Gyakorlat – A Python-alkalmazás és a weblap létrehozása

7 perc

Ebben a leckében a Flask webalkalmazás-keretrendszer használatával hoz létre Egy Python-alkalmazást. Emellett létrehozhat egy weblapot is, amelyet az Azure Térképek webes SDK használhat a térképalkalmazás megjelenítéséhez.

Az alkalmazás létrehozása

Az alkalmazás létrehozásához először projektmappákat hozunk létre, konfiguráljuk a Python-környezetet, majd telepítjük a szükséges pip-csomagokat.

Ezután létrehozunk egy környezeti fájlt és egy alkalmazás Python-fájlt.

Végül létrehozunk egy home.html fájlt az eredmények megjelenítéséhez.

Mappák létrehozása a Python-alkalmazáshoz

A számítógépen hozzon létre egy mappát az alkalmazáskód tárolásához.
Nyissa meg a Visual Studio Code-ot, majd nyissa meg a létrehozott mappát.
Az alkalmazáskód mappa gyökerénél hozzon létre egy Python-alkalmazásfájlt app.py néven.

A Python-fájl létrehozásakor a Visual Studio Code aktiválja a Python-bővítményt, így készen áll egy Python-alkalmazás létrehozására. A bővítményaktiválás előrehaladását a Visual Studio Code bal alsó sarkában található állapotsoron tekintheti meg.
Az alkalmazáskód mappa gyökerénél hozzon létre egy sablonok nevű mappát. Ez a mappa tartalmazza a Flask-alkalmazás által használt HTML-sablonokat.

A Python-környezet konfigurálása

A Visual Studio Code-ban válassza az Új terminál terminál> lehetőséget a terminál megnyitásához.
A terminálban adja meg a következő parancsot a Python virtuális környezet létrehozásához.

Windows rendszeren:
```
python -m venv .venv
```
Linux vagy macOS rendszeren:
```
python3 -m venv .venv
```
Ez a parancs létrehoz egy virtuális környezetet az aktuális mappában. A Visual Studio Code észleli ezt a módosítást, és kéri, hogy válassza ki a mappa virtuális környezetét. Válassza az Igen lehetőséget.

Megjegyzés:

Ha nem jelenik meg egy párbeszédpanel, amely megkérdezi, hogy ki szeretné-e választani a virtuális környezetet, manuálisan kiválaszthatja a Python-értelmező verzióját. A Visual Studio Code jobb alsó sarkában található állapotsoron válassza ki a Python-verziót. A Visual Studio Code ablakának tetején megnyílik a Python-értelmező kiválasztása. Válassza ki a ./.venv/Scripts/python.exe fájlban található Python-verziót.
Zárja be a terminált a kuka ikon kiválasztásával.
Az Új terminál lehetőséget> választva nyissa meg újra a terminált a virtuális környezetben.

Ha a terminál Python virtuális környezetben fut, figyelje meg, hogy a parancssor előtagként jelenik meg (.venv) .

Pip-csomagok telepítése

A Python csomagtelepítőjének neve pip. A létrehozott alkalmazáshoz a következő pipcsomagok szükségesek:

flask: Ez a csomag a Python webes keretrendszere.
python-dotenv: Ez a csomag lehetővé teszi az Olyan környezeti változók betöltését, mint az Azure Térképek kulcs a környezeti fájlokból.
requests: Ez a csomag megkönnyíti a webes kérések létrehozását. Később a levegőminőségi adatok lekérdezésére használjuk.

Először létre kell hoznia egy szöveges fájlt, amely felsorolja a szükséges pip-csomagokat. Ezután futtat egy parancsot, amely telepíti a szövegfájlban felsorolt csomagokat.

A Visual Studio Code-ban, az alkalmazáskód mappa gyökerénél hozzon létre egy új, requirements.txt nevű szövegfájlt. Másolja a következő kódot a szövegfájlba:
```
flask
python-dotenv
requests
```
Mentse a fájlt.

Tipp.

Ha minden módosítás után automatikusan menteni szeretné a fájlokat a Visual Studio Code-ban, válassza az Automatikus fájlmentés> lehetőséget.
A terminálban futtassa ezt a parancsot a pip-csomagok telepítéséhez:
```
pip install -r requirements.txt
```
Megjegyzés:

Figyelmen kívül hagyhatja a pip verziójával kapcsolatos figyelmeztető üzeneteket.

Környezeti fájl létrehozása

A létrehozott Flask-alkalmazás az Azure Térképek kulccsal tölti be a térképvezérlőt egy weblapra. Az ajánlott eljárás az ilyen adatok környezeti változókban való tárolása, hogy az adatok ne legyenek beadva a forráskód-vezérlőbe. Az alkalmazás fejlesztésekor vagy közzétételekor beállíthat egy környezeti változót egy adott értékre. A Flask a python-dotenv csomag használatával keres egy .env nevű fájlt az alkalmazás kódmappájának gyökerénél, majd betölti a fájl környezeti változóit.

Tipp.

Ha az alkalmazást a Azure-alkalmazás Service használatával helyezi üzembe az Azure-ban, az .env fájl értékeit hozzá kell adni egy alkalmazásbeállítási fájlhoz, hogy az értékek automatikusan környezeti változókként legyenek beállítva, amelyeket az alkalmazás használhat.

A környezeti fájl létrehozása:

Az alkalmazáskód mappa gyökerénél hozzon létre egy .env nevű új környezeti fájlt.
Másolja a következő utasítást a környezeti fájlba:
```
MAP_KEY=<your map key>
```
Cserélje le <your map key> az előző leckében az Azure Térképek-fiók létrehozása után lekért elsődleges kulcs értékét. Ne tartalmazzon idézőjeleket.
Mentse a fájlt.

Az alkalmazás Python-fájljának létrehozása

Nyissa meg a app.py fájlt a Visual Studio Code alkalmazáskódmappájában.

Másolja a következő kódot az alkalmazásfájlba:

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)

Ez a kód kezeli a webhely gyökerét képező kéréseket /. A weblap betöltésekor az alkalmazás az .env fájl kulcsával hoz létre adatokat. Az adatok a home.html fájlnak a nevesített dataparaméterként való megjelenítésére szolgálnak.

Mentse a fájlt.

A home.html fájl létrehozása

A Visual Studio Code sablonok mappájában hozzon létre egy home.html nevű új HTML-fájlt.

Másolja a következő kódot a HTML-fájlba:

<!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>

Ez a weblap egy teljes képernyős div elemet jelenít meg, amely azonosítójával rendelkezik myMap. A lap teljes betöltése után az alkalmazás a böngészőben kéri a felhasználó helyét. Az alkalmazás csak akkor tudja lekérni a felhasználó helyét, ha a felhasználó engedélyt ad. Ha a felhasználó nem ad engedélyt a böngészőnek a tartózkodási helyük elérésére, a böngésző a Microsoft washingtoni redmondi központjának helyét használja.

Megjegyzés:

Az Azure Térképek hosszúságot és szélességet használ a térkép koordinátáihoz. Hosszúsági mértékek a Föld körül keletről nyugatra a fő meridiánnál 0°-on (az Északi-sarktól a Déli-sarkig tartó vonal, amely az Egyesült Királyságon keresztül fut). Keletről 180°-ra megy a föld másik oldalán, nagyjából Alaszka és Oroszország között, nyugatra pedig -180°-on ugyanahhoz a helyhez. A szélesség északról délre halad, az Északi-sark 90°-on, az Egyenlítő 0°-on, a Déli-sark pedig -90°-on.

A térképvezérlő ezután betöltődik az div elembe. Az Azure Térképek kulcs a Flask jelölésre {{ data.map_key }}van állítva a HTML-fájlban lévő adatok megjelenítéséhez. Amikor a rendszer visszaadja ezt a lapot a felhasználó webböngészőjének, az érték {{ data.map_key }} helyébe az objektumon data beállított érték map_key lép. Ez az objektum a app.py fájlban lévő hívásnak render_template lett átadva, és map_key az Azure Térképek elsődleges kulcsra van állítva, amely betöltődik az .env fájlból.

Ha a vezérlő készen áll, a térképnézet egy virtuális kamera használatával középre kerül a felhasználó helyére. A nagyítási érték azt mutatja, hogy a kamera milyen messze van a Föld felett, és meghatározza, hogy a térkép hány métert jelenít meg képpontonként a képernyőn. A nagyítási szintek és a csemperács különböző nagyítási értékeiről bővebben is olvashat.

Mentse a fájlt.

Ebben a leckében a Flask használatával létrehozott egy Python-alkalmazást. Ezután futtassa az alkalmazást, és tekintse meg a weblapon.

Folytatás