Alıştırma - Python uygulamasını ve web sayfasını oluşturma - Training

7 dakika

Bu ünitede, Bir Python uygulaması oluşturmak için Flask web uygulaması çerçevesini kullanacaksınız. Ayrıca, Azure Haritalar web SDK'sının harita uygulamanızı görüntülemek için kullanabileceği bir web sayfası da oluşturursunuz.

Uygulamayı oluşturma

Uygulamayı oluşturmak için öncelikle proje klasörleri oluşturacak, Python ortamını yapılandıracak ve ihtiyacımız olan pip paketlerini yükleyeceğiz.

Ardından bir ortam dosyası ve uygulama Python dosyası oluştururuz.

Son olarak, sonuçları göstermek için bir home.html dosyası oluştururuz.

Python uygulaması için klasör oluşturma

Bilgisayarınızda, uygulama kodunu depolamak için bir klasör oluşturun.
Visual Studio Code'ı açın ve ardından oluşturduğunuz klasörü açın.
Uygulama kodu klasörünüzün kökünde app.py adlı bir Python uygulama dosyası oluşturun.

Bu Python dosyasını oluşturduğunuzda Visual Studio Code, Python uzantısını etkinleştirerek bir Python uygulaması oluşturmaya hazır hale getirir. Uzantı etkinleştirme işleminin ilerleme durumunu Visual Studio Code'un sol alt köşesindeki durum çubuğunda görebilirsiniz.
Uygulama kodu klasörünüzün kökünde templates adlı bir klasör oluşturun. Bu klasör, Flask uygulamasının kullandığı HTML şablonlarını barındırır.

Python ortamını yapılandırma

Visual Studio Code'da Terminal>Yeni terminal'i seçerek terminali açın.
Terminalde, python sanal ortamı oluşturmak için aşağıdaki komutu girin.

Windows'da:
```
python -m venv .venv
```
Linux veya macOS'ta:
```
python3 -m venv .venv
```
Bu komut geçerli klasörün içinde bir sanal ortam oluşturur. Visual Studio Code bu değişikliği algılar ve bu klasör için sanal ortamı seçmenizi ister. Evet'i seçin.

Dekont

Sanal ortamı seçmek isteyip istemediğinizi soran bir iletişim kutusu görmüyorsanız Python yorumlayıcısı sürümünü el ile seçebilirsiniz. Sağ alt köşedeki Visual Studio Code durum çubuğunda Python sürümünü seçin. Visual Studio Code penceresinin üst kısmında Python yorumlayıcı seçimi açılır. ./.venv/Scripts/python.exe dosyasındaki Python sürümünü seçin.
Çöp kutusu simgesini seçerek terminali kapatın.
Terminali>sanal ortamda yeniden açmak için Terminal Yeni terminal'i seçin.

Terminal bir Python sanal ortamında çalışırken, istemin ön ek olarak gösterildiğine (.venv) dikkat edin.

Pip paketlerini yükleme

Python için paket yükleyicisi pip olarak adlandırılır. Oluşturduğunuz uygulama için aşağıdaki pip paketleri gerekir:

flask: Bu paket Python için bir web çerçevesidir.
python-dotenv: Bu paket, Azure Haritalar anahtarı gibi ortam değişkenlerinin ortam dosyalarından yüklenmesine olanak tanır.
requests: Bu paket, web isteğinde bulunmayı kolaylaştırır. Bunu daha sonra hava kalitesi verilerini sorgulamak için kullanırız.

İlk olarak, gerekli pip paketlerini listeleyen bir metin dosyası oluşturursunuz. Ardından, metin dosyasında listelenen paketleri yükleyen bir komut çalıştırırsınız.

Visual Studio Code'da, uygulama kodu klasörünüzün kökünde requirements.txt adlı yeni bir metin dosyası oluşturun. Aşağıdaki kodu metin dosyasına kopyalayın:
```
flask
python-dotenv
requests
```
Dosyayı kaydedin.

Bahşiş

Visual Studio Code'da, her değişiklikten sonra dosyaları otomatik olarak kaydetmek istiyorsanız, Dosya>Otomatik Kaydet'i seçin.
Terminalde şu komutu çalıştırarak pip paketlerini yükleyin:
```
pip install -r requirements.txt
```
Dekont

Pip sürümüyle ilgili uyarı iletilerini göz ardı edebilirsiniz.

Ortam dosyası oluşturma

Oluşturduğunuz Flask uygulaması, harita denetimini bir web sayfasına yüklemek için Azure Haritalar anahtarınızı kullanır. Bunun gibi verileri ortam değişkenlerinde depolamak en iyi yöntemdir; böylece veriler kaynak kodu denetiminde iade edilemez. Uygulamanızı geliştirirken veya yayımlarken ortam değişkenini belirli bir değere ayarlayabilirsiniz. Flask, uygulama kodu klasörünüzün kökünde .env adlı bir dosyayı aramak için python-dotenv paketini kullanır ve ardından bu dosyadan ortam değişkenlerini yükler.

Bahşiş

Bu uygulamayı Azure Uygulaması Hizmeti kullanarak Azure'a dağıtırsanız, .env dosyasındaki değerlerin uygulamanın kullanabileceği ortam değişkenleri olarak otomatik olarak ayarlanması için bir uygulama ayarları dosyasına eklenmesi gerekir.

Ortam dosyasını oluşturmak için:

Uygulama kodu klasörünüzün kökünde .env adlı yeni bir ortam dosyası oluşturun.
Aşağıdaki deyimi ortam dosyasına kopyalayın:
```
MAP_KEY=<your map key>
```
değerini, önceki ünitede Azure Haritalar hesabını oluşturduktan sonra aldığınız birincil anahtarın değeriyle değiştirin<your map key>. Tırnak işaretleri eklemeyin.
Dosyayı kaydedin.

Uygulama Python dosyası oluşturma

Visual Studio Code'da, uygulama kodu klasörünüzde app.py dosyasını açın.

Aşağıdaki kodu uygulama dosyasına kopyalayın:

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)

Bu kod, web sitesinin kökü olan öğesine yönelik istekleri /işler. Bu web sayfası yüklendiğinde, uygulama veri oluşturmak için .env dosyanızdaki anahtarı kullanır. Veriler home.html dosyasını adlı databir parametre olarak işlemek için kullanılır.

Dosyayı kaydedin.

Home.html dosyasını oluşturma

Visual Studio Code'daki templates klasöründe home.html adlı yeni bir HTML dosyası oluşturun.

Aşağıdaki kodu HTML dosyasına kopyalayın:

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

Bu web sayfası kimliğine myMapsahip bir tam ekran div öğesi işler. Sayfa tamamen yüklendikten sonra, tarayıcıda uygulama kullanıcının konumunu ister. Uygulama kullanıcının konumunu yalnızca kullanıcı izin verirse alabilir. Kullanıcı tarayıcıya konumuna erişim izni vermezse, tarayıcı Redmond, Washington, ABD'deki Microsoft genel merkezinin konumunu kullanır.

Dekont

Azure Haritalar harita koordinatları için boylam ve enlem kullanır. Boylam, ana meridyende (Kuzey Kutbu'ndan Güney Kutbu'na doğru Birleşik Krallık'tan geçen bir çizgi) 0°'de doğudan batıya doğru Dünya'nın etrafında ölçülür. Dünyanın karşı tarafında 180° doğuya, kabaca Alaska ve Rusya arasında, batıya ise -180° ile aynı yere gider. Enlem kuzeyden güneye, Kuzey Kutbu 90° ile, ekvator 0° ve Güney Kutbu -90° ile gider.

Daha sonra eşleme denetimi öğesine yüklenir div . Azure Haritalar anahtarı, HTML dosyasındaki verileri işlemek için Flask gösterimi olarak ayarlanır{{ data.map_key }}. Bu sayfa kullanıcının web tarayıcısına döndürülürse, değer {{ data.map_key }} nesnede data ayarlanan değeriyle map_key değiştirilir. Bu nesne app.py dosyasındaki çağrıya render_template geçirildi ve map_key .env dosyasından yüklenen Azure Haritalar birincil anahtara ayarlanır.

Denetim hazır olduğunda, harita görünümü bir sanal kamera kullanılarak kullanıcının konumu üzerinde ortalanır. Yakınlaştırma değeri, kameranın Dünya'nın ne kadar üstünde olması gerektiğini gösterir ve ekranda piksel başına haritanın kaç metre gösterileceğini belirler. Yakınlaştırma düzeylerinde ve kutucuk kılavuzunda farklı yakınlaştırma değerleri hakkında daha fazla bilgi edinebilirsiniz.

Dosyayı kaydedin.

Bu ünitede, Bir Python uygulaması oluşturmak için Flask kullandınız. Ardından uygulamayı çalıştırın ve web sayfanızda görüntüleyin.

Devam et

Alıştırma - Python uygulamasını ve web sayfasını oluşturma