練習 - 建立 Python 應用程式和網頁

7 分鐘

在此單元中，您會使用 Flask Web 應用程式架構來建立 Python 應用程式。您也會建立 Azure 地圖服務 Web SDK 可用來顯示地圖應用程式的網頁。

建置應用程式

若要建置應用程式，首先我們要建立專案資料夾、設定 Python 環境，並安裝所需的 pip 套件。

接著，我們會建立環境檔案和應用程式 Python 檔案。

最後，我們會建立 home.html 檔案來顯示結果。

建立 Python 應用程式的資料夾

在您的電腦上，建立用來儲存應用程式程式碼的資料夾。
開啟 Visual Studio Code，接著開啟剛建立的資料夾。
在應用程式程式碼資料夾的根目錄中，建立名為 app.py 的 Python 應用程式檔案。

當您建立此 Python 檔案時，Visual Studio Code 會啟動 Python 延伸模組，因此可以建立 Python 應用程式。您可以在 Visual Studio Code 左下角的狀態列中，看到延伸模組啟用的進度。
在應用程式程式碼資料夾的根目錄中，建立名為 templates 的資料夾。此資料夾會保存 Flask 應用程式使用的 HTML 範本。

設定 Python 環境

在 Visual Studio Code 中，選取 [終端機]> [新增終端機] 以開啟終端機。
在終端機中，輸入下列命令以建立 Python 虛擬環境。

在 Windows 上：
```
python -m venv .venv
```
在 Linux 或 MacOS 上：
```
python3 -m venv .venv
```
此命令會在目前的資料夾內建立虛擬環境。 Visual Studio Code 會偵測到此變更，並提示您選取此資料夾的虛擬環境。選取 [是] 。

注意

如果您沒有看到詢問您是否要選取虛擬環境的對話方塊，您可以手動選取 Python 解譯器版本。在右下角的 Visual Studio Code 狀態列中，選取 Python 版本。在 Visual Studio Code 視窗的頂端，會開啟 Python 解譯器選取項目。選取位於 ./.venv/Scripts/python.exe 檔案的 Python 版本。
選取資源回收筒圖示來關閉終端機。
選取 [終端機]> [新增終端機]，以重新開啟虛擬環境中的終端機。

當終端機在 Python 虛擬環境中執行時，請注意提示會顯示 (.venv) 為首碼。

安裝 pip 套件

適用於 Python 的套件安裝程式稱為 pip。您將建立的應用程式需要下列 pip 套件：

flask：此套件是適用於 Python 的 Web 架構。
python-dotenv：此套件允許從環境檔案載入環境變數 (例如 Azure 地圖服務金鑰)。
requests：此套件可讓您輕鬆地提出 Web 要求。我們稍後會用來查詢空氣品質資料。

首先，您會建立文字檔，其中列出所需的 pip 套件。然後，您會執行命令來安裝文字檔中列出的套件。

在 Visual Studio Code 的應用程式程式碼資料夾根目錄中，建立名為 requirements.txt 的新文字檔。將下列程式碼複製到文字檔：
```
flask
python-dotenv
requests
```
儲存檔案。

提示

在 Visual Studio Code 中，如果您想要在每次變更之後自動儲存檔案，請選取 [檔案]> [自動儲存]。
在終端機中，執行此命令以安裝 pip 套件：
```
pip install -r requirements.txt
```
注意

您可以忽略任何有關 pip 版本的警告訊息。

建立環境檔案

您建立的 Flask 應用程式會使用 Azure 地圖服務金鑰，以將地圖控制項載入網頁。最佳做法是將這類資料儲存在環境變數中，使資料不簽入原始程式碼控制中。您可以在開發或發佈您的應用程式時，將環境變數設定為特定值。 Flask 會使用 python-dotenv 套件，尋找應用程式程式碼資料夾根目錄中名為 .env 的檔案，然後從此檔案載入環境變數。

提示

如果使用 Azure App Service 將此應用程式部署至 Azure，則必須將 .env 檔案中的值新增至應用程式設定檔案，使值自動設定為應用程式可使用的環境變數。

若要建立環境檔案：

在應用程式程式碼資料夾的根目錄中，建立名為 .env 的新環境檔案。
將下列陳述式複製到環境檔案中：
```
MAP_KEY=<your map key>
```
使用在先前單元中建立 Azure 地圖服務帳戶之後所取出的主要金鑰值來取代 <your map key>。不要包含引號。
儲存檔案。

建立應用程式 Python 檔案

在 Visual Studio Code 的應用程式程式碼資料夾中，開啟 app.py 檔案。

將下列程式碼複製到應用程式檔案中：

import os, json
from flask import Flask, render_template, request
import requests

# Load the Azure Maps key from the .env file.
MAP_KEY = os.environ["MAP_KEY"]

# Initialize the Flask app.
app = Flask(__name__)

# Handle requests to the root of the website, returning the home page.
@app.route("/")
def home():
    # Create data for the home page to pass the Maps key.
    data = { "map_key" : MAP_KEY }
    # Return the rendered HTML page
    return render_template("home.html", data = data)

此程式碼會處理對 / 的要求，這是網站的根目錄。載入此網頁時，應用程式會使用您的 .env 檔案中的金鑰來建立資料。資料會用來將 home.html 檔案轉譯為名為 data 的參數。

儲存檔案。

建立 home.html 檔案

在 Visual Studio Code 的 templates 資料夾中，建立名為 home.html 的新 HTML 檔案。

將下列程式碼複製到 HTML 檔案：

<!doctype html>
<html>
<head>
    <title>Air quality tracker</title>
    <!-- Ensures that Internet Explorer and Microsoft Edge use the latest versions and that they don't emulate earlier versions. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta charset='utf-8'>
    <!-- Ensures that the webpage looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Import the Azure Maps control. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
        }
        #myMap {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
    <div id="myMap"></div>
    <script type="text/javascript">
        window.addEventListener("DOMContentLoaded", function () {
            // Pick a predefined location of the Microsoft headquarters.
            map_center = [-122.136866, 47.642472]

            // If the user grants permission when prompted, get the user's location.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    map_center = [position.coords.longitude, position.coords.latitude]
                })
            }

            // Create an instance of the map control by using the map key from the Flask app.
            var map = new atlas.Map('myMap', {
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '{{ data.map_key }}'
                }
            });

            // When the map is ready, center the map on the user's location.
            map.events.add('ready', function () {
                map.setCamera({
                    center: map_center,
                    zoom: 5
                })
            })
        })
    </script>
</body>
</html>

此網頁會呈現全螢幕 div 元素，具有 myMap 識別碼。在頁面完全載入之後，在瀏覽器中，應用程式會要求使用者的位置。只有當使用者授與權限時，應用程式才能取得使用者的位置。如果使用者未授與瀏覽器權限來存取他們的位置，則瀏覽器會使用美國華盛頓州雷德蒙德的 Microsoft 總部位置。

注意

Azure 地圖服務會使用地圖座標的經度和緯度。經度從東到西繞地球一圈，在本初子午線 (從北極到南極穿過英國的直線) 上為 0°。經度會向東至地球另一側的 180°，大致在阿拉斯加和俄羅斯之間，然後向西至相同位置的 -180°。緯度從北到南，北極點為 90°，赤道為 0°，南極點為 -90°。

然後地圖控制項會載入至 div 元素中。 Azure 地圖服務金鑰會設為 {{ data.map_key }}，將資料轉譯為 HTML 檔案的 Flask 標記法。當此頁面傳回至使用者網頁瀏覽器時，{{ data.map_key }} 值會取代為在 data 物件上設定的 map_key 值。此物件已傳遞至 the app.py 檔案中的 render_template 呼叫，且 map_key 設定為從 .env 檔案載入的 Azure 地圖服務主要金鑰。

當控制項就緒時，地圖檢視會使用虛擬相機，將使用者的位置置中。縮放值會顯示相機在地球上方的距離，並決定螢幕上每個像素要顯示多少公尺的距離。您可以在縮放層級和圖格格線中參閱不同縮放值的詳細資訊。

儲存檔案。

在此單元中，您已使用 Flask 來建立 Python 應用程式。接下來，請執行應用程式，並在您的網頁中檢視。

繼續