練習 - 執行應用程式

7 分鐘

在此單元中，您會執行應用程式，並在您建立的網頁上檢視。然後，看看如何針對常見體驗進行疑難排解。

執行及偵錯應用程式

您可以設定 Visual Studio Code 來執行及偵錯 Flask 應用程式。然後，使用您的瀏覽器來查看作用中的應用程式。

在 Visual Studio Code 中，確定已在編輯器中開啟 app.py 檔案。 (偵錯選項會根據您已開啟的檔案而有所不同。) 在活動列中，選取 [執行] 圖示。在 [執行及偵錯] 按鈕底下，選取 [建立和啟動 .json 檔案] 連結。在選取範圍下拉式清單中，選擇 [Flask] 連結。

Screenshot that shows the steps to take to debug a Flask app.

注意

如果您在應用程式程式碼資料夾的.vscode 資料夾中沒有看到名為 launch.json 的新檔案，您可以手動建立設定檔。

若要建立設定檔，請在 [執行] 檢視的右邊，選取齒輪圖示。

新的 launch.json 檔案會在 .vscode 資料夾中開啟，而且 [執行] 檢視中的文字會變更為 [Python:Flask]。

若要針對 Flask 應用程式進行偵錯：

當 [執行] 檢視中顯示 [Python:Flask] 時，請選取綠色箭號以執行應用程式。

應用程式隨即啟動。程式碼輸出會顯示應用程式執行所在的本機 URL：
```
 * Serving Flask app "app.py"
 * Environment: development
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```
在終端機輸出中，將游標放在 IP 位址連結。選取 Ctrl+Click 以在網頁瀏覽器中開啟應用程式。如果您授與瀏覽器可以取得您位置的權限，就會將您目前的位置置中。否則，應用程式會將位於美國華盛頓州雷德蒙德的 Microsoft 總部置中。

請嘗試拖曳、使用滑鼠滾輪或捏合放大及縮小來移動，取決於您的裝置輸入選項。

完成探索時，請選取 Visual Studio Code 偵錯工具列上的停止按鈕來停止應用程式。

疑難排解

讓我們看看您在執行應用程式時可能遇到的一些問題，以及如何解決這些問題。

發生例外狀況：KeyError

如果應用程式在執行後立即停止，並顯示包含 Exception has occurred: KeyError 訊息的例外狀況，則表示 Azure 地圖服務金鑰尚未新增至 .env 檔案。

Screenshot that shows an example of the key error exception message.

確認符合下列需求：

名為 .env 的檔案位於應用程式的根資料夾中。
.env 檔案包含格式為 key=value 的金鑰/值組。金鑰必須是 MAP_KEY，而且值必須是從 Azure 地圖服務帳戶複製的主要金鑰。

地圖上沒有資料

如果在地圖上看不到任何資料，但能看到 Microsoft 標誌，則表示您未使用有效的金鑰作為地圖控制項。檢查 .env 檔案中的值，以確保其正確無誤。值不應該包含引號。

500 內部伺服器錯誤

如果傳回 500 Internal Server Error，則請檢查 Visual Studio Code 終端機中的記錄。下列輸出範例指出 home.html 檔案不在正確的位置：

jinja2.exceptions.TemplateNotFound: home.html

home.html 檔案應該位於 templates 資料夾。移動檔案，然後重新開啟應用程式。

在此單元中，您已在網頁中檢視應用程式，並且有機會試用其功能。接下來，讓我們了解用於空間資料的 GeoJSON 格式。

繼續