Latihan - Membangun aplikasi Python dan halaman web

7 menit

Di unit ini, Anda menggunakan kerangka kerja aplikasi web Flask untuk membuat aplikasi Python. Anda juga membuat halaman web yang dapat digunakan Azure Peta web SDK untuk menampilkan aplikasi peta Anda.

Membangun aplikasi

Untuk membangun aplikasi, pertama-tama, kita membuat folder proyek, mengonfigurasi lingkungan Python, dan menginstal paket pip yang kita butuhkan.

Kemudian, kami membuat file lingkungan dan file Python aplikasi.

Terakhir, kita membuat file home.html untuk menampilkan hasil.

Membuat folder untuk aplikasi Python

Di komputer Anda, buat folder untuk menyimpan kode aplikasi.
Buka Visual Studio Code, kemudian buka folder yang Anda buat.
Di akar folder kode aplikasi Anda, buat file aplikasi Python yang disebut app.py.

Saat Anda membuat file Python ini, Visual Studio Code mengaktifkan ekstensi Python, sehingga siap untuk membangun aplikasi Python. Anda dapat melihat kemajuan aktivasi ekstensi di bilah status di sudut kiri bawah Visual Studio Code.
Di akar folder kode aplikasi Anda, buat folder bernama templat. Folder ini menyimpan templat HTML yang digunakan aplikasi Flask.

Mengonfigurasi lingkungan Python

Pada Visual Studio Code, pilih Terminal>Terminal Baru untuk membuka terminal.
Di terminal, masukkan perintah berikut untuk membuat lingkungan virtual Python.

Di Windows:
```
python -m venv .venv
```
Di Linux atau macOS:
```
python3 -m venv .venv
```
Perintah ini membuat lingkungan virtual di dalam folder saat ini. Visual Studio Code mendeteksi perubahan ini dan meminta Anda untuk memilih lingkungan virtual untuk folder ini. Pilih Ya.

Catatan

Jika Anda tidak melihat kotak dialog yang menanyakan apakah Anda ingin memilih lingkungan virtual, Anda dapat memilih versi penerjemah Python secara manual. Di bilah status Visual Studio Code di sudut kanan bawah, pilih versi Python. Di bagian atas jendela Visual Studio Code, pemilihan penerjemah Python terbuka. Pilih versi Python yang berada dalam file ./.venv/Scripts/python.exe.
Tutup terminal dengan memilih ikon keranjang sampah.
Pilih Terminal>Terminal Baru untuk membuka kembali terminal di lingkungan virtual.

Ketika terminal berjalan di lingkungan virtual Python, perhatikan bahwa perintah ditampilkan (.venv) sebagai awalan.

Pasang paket pip

Alat Pemasang paket untuk Python disebut pip. Aplikasi yang Anda buat memerlukan paket pip berikut:

flask: Paket ini adalah kerangka kerja web untuk Python.
python-dotenv: Paket ini memungkinkan variabel lingkungan seperti kunci Azure Maps dimuat dari file lingkungan.
requests: Paket ini memudahkan untuk membuat permintaan web. Kami menggunakannya nanti untuk mengkueri data kualitas udara.

Pertama, Anda membuat file teks yang mencantumkan paket pip yang diperlukan. Kemudian, Anda menjalankan perintah yang menginstal paket yang tercantum dalam file teks.

Di Visual Studio Code, di akar folder kode aplikasi Anda, buat file teks baru bernama requirements.txt. Salin kode berikut ke dalam file:
```
flask
python-dotenv
requests
```
Simpan file.

Tip

Di Visual Studio Code, jika Anda ingin menyimpan file secara otomatis setelah setiap perubahan, pilih File>Simpan Otomatis.
Di terminal, jalankan perintah ini untuk memasang paket pip:
```
pip install -r requirements.txt
```
Catatan

Anda dapat mengabaikan pesan peringatan apa pun tentang versi pip.

Membuat file lingkungan

Aplikasi Flask yang Anda buat menggunakan kunci Azure Peta untuk memuat kontrol peta ke halaman web. Praktik terbaik adalah menyimpan data seperti ini di variabel lingkungan sehingga data tidak diperiksa ke kontrol kode sumber. Anda dapat menyetel variabel lingkungan ke nilai tertentu saat mengembangkan atau menerbitkan aplikasi. Flask menggunakan paket python-dotenv untuk mencari file bernama .env di akar folder kode aplikasi Anda dan kemudian memuat variabel lingkungan dari file ini.

Tip

Jika Anda menyebarkan aplikasi ini ke Azure dengan menggunakan Azure App Service, nilai dalam file .env harus ditambahkan ke file pengaturan aplikasi sehingga nilai secara otomatis diatur sebagai variabel lingkungan yang dapat digunakan aplikasi.

Untuk membuat file lingkungan:

Di akar folder kode aplikasi Anda, buat file lingkungan baru bernama .env.
Salin pernyataan berikut ke dalam file lingkungan:
```
MAP_KEY=<your map key>
```
Ganti <your map key> dengan nilai kunci primer yang Anda ambil setelah membuat akun Azure Maps di pelajaran sebelumnya. Jangan sertakan tanda kutip.
Simpan file.

Membuat file Python aplikasi

Di Visual Studio Code, di folder kode aplikasi Anda, buka file app.py.

Salin kode berikut ke dalam file aplikasi:

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)

Kode ini menangani permintaan ke /, yang merupakan akar situs web. Ketika halaman web ini dimuat, aplikasi menggunakan kunci dari file .env Anda untuk membuat data. Data digunakan untuk merender file home.html sebagai parameter bernama data.

Simpan file.

Membuat file home.html

Di Visual Studio Code, di folder templat, buat file HTML baru bernama home.html.

Salin kode berikut ke dalam file 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>

Halaman web ini merender elemen layar penuh div yang memiliki ID myMap. Setelah halaman dimuat sepenuhnya, di browser, aplikasi meminta lokasi pengguna. Aplikasi bisa mendapatkan lokasi pengguna hanya jika pengguna memberikan izin. Jika pengguna tidak memberikan izin kepada browser untuk mengakses lokasi mereka, browser menggunakan lokasi kantor pusat Microsoft di Redmond, Washington, AS.

Catatan

Azure Maps menggunakan bujur dan lintang untuk koordinat peta. Garis bujur mengelilingi Bumi dari timur ke barat pada 0 ° di meridian utama (garis dari Kutub Utara ke Kutub Selatan yang melintasi Inggris Raya). Ia pergi ke timur hingga 180 ° di sisi berlawanan dari dunia, kira-kira antara Alaska dan Rusia, dan barat ke tempat yang sama di -180 °. Garis lintang menuju utara ke selatan, dengan Kutub Utara pada 90°, khatulistiwa pada 0 °, dan Kutub Selatan pada -90 °.

Kontrol peta kemudian dimuat ke dalam elemen div. Kunci Azure Maps diatur ke {{ data.map_key }}, notasi Flask untuk merender data dalam file HTML. Ketika halaman ini dikembalikan ke browser web pengguna, nilai {{ data.map_key }} digantikan oleh nilai map_key yang ditetapkan pada objek data. Objek ini diteruskan ke panggilan render_template dalam file app.py, dan map_key diatur ke kunci primer Azure Maps yang dimuat dari file .env.

Saat kontrol siap, tampilan peta dipusatkan di atas lokasi pengguna dengan menggunakan kamera virtual. Nilai zoom menunjukkan seberapa jauh kamera seharusnya berada di atas Bumi, dan menentukan berapa meter peta yang ditampilkan per piksel di layar. Anda dapat membaca selengkapnya tentang nilai zoom yang berbeda di tingkat Zoom dan kisi petak peta.

Simpan file.

Di pelajaran ini, Anda menggunakan Flask untuk membuat aplikasi Python. Selanjutnya, jalankan aplikasi dan lihat di halaman web Anda.

Lanjutkan