Exercício - Crie o aplicativo Python e a página da Web

7 minutos

Nesta unidade, você usa a estrutura da aplicação web Flask para criar um aplicativo Python. Você também cria uma página da Web que o SDK da Web do Azure Maps pode usar para exibir seu aplicativo de mapa.

Criar a aplicação

Para construir o aplicativo, primeiro, criamos pastas de projeto, configuramos o ambiente Python e instalamos os pacotes pip de que precisamos.

Em seguida, criamos um arquivo de ambiente e o arquivo Python do aplicativo.

Finalmente, criamos um arquivo home.html para mostrar os resultados.

Criar pastas para o aplicativo Python

No computador, crie uma pasta para armazenar o código do aplicativo.
Abra o Visual Studio Code e, em seguida, abra a pasta que você criou.
Na raiz da pasta de código do aplicativo, crie um arquivo de aplicativo Python chamado app.py.

Quando você cria esse arquivo Python, o Visual Studio Code ativa a extensão Python, portanto, ele está pronto para criar um aplicativo Python. Você pode ver o progresso da ativação da extensão na barra de status no canto inferior esquerdo do Visual Studio Code.
Na raiz da pasta de código do aplicativo, crie uma pasta chamada templates. Esta pasta contém os modelos HTML que o aplicativo Flask usa.

Configurar o ambiente do Python

No Visual Studio Code, selecione Terminal>New terminal para abrir o terminal.
No terminal, digite o seguinte comando para criar um ambiente virtual Python.

No Windows:
```
python -m venv .venv
```
No Linux ou macOS:
```
python3 -m venv .venv
```
Este comando cria um ambiente virtual dentro da pasta atual. O Visual Studio Code deteta essa alteração e solicita que você selecione o ambiente virtual para essa pasta. Selecione Yes (Sim).

Nota

Se você não vir uma caixa de diálogo perguntando se deseja selecionar o ambiente virtual, você pode selecionar manualmente a versão do interpretador Python. Na barra de status do Visual Studio Code no canto inferior direito, selecione a versão do Python. Na parte superior da janela Código do Visual Studio, a seleção do interpretador Python é aberta. Selecione a versão Python que está no arquivo ./.venv/Scripts/python.exe .
Feche o terminal selecionando o ícone da lixeira.
Selecione Terminal>Novo terminal para reabrir o terminal no ambiente virtual.

Quando o terminal está sendo executado em um ambiente virtual Python, observe que o prompt mostra (.venv) como um prefixo.

Instalar pacotes pip

O instalador do pacote para Python é chamado pip. O aplicativo que você cria requer os seguintes pacotes pip:

flask: Este pacote é um framework web para Python.
python-dotenv: Este pacote permite que variáveis de ambiente, como a chave do Azure Maps, sejam carregadas a partir de ficheiros de ambiente.
requests: Este pacote facilita a realização de pedidos na Web. Utilizamo-lo mais tarde para consultar dados sobre a qualidade do ar.

Primeiro, você cria um arquivo de texto que lista os pacotes pip necessários. Em seguida, execute um comando que instala os pacotes listados no arquivo de texto.

No Visual Studio Code, na raiz da pasta de código do aplicativo, crie um novo arquivo de texto chamado requirements.txt. Copie o seguinte código para o arquivo de texto:
```
flask
python-dotenv
requests
```
Guarde o ficheiro.

Gorjeta

No Visual Studio Code, se você quiser salvar arquivos automaticamente após cada alteração, selecione Salvar automaticamente o arquivo>.
No terminal, execute este comando para instalar os pacotes pip:
```
pip install -r requirements.txt
```
Nota

Você pode ignorar quaisquer mensagens de aviso sobre a versão pip.

Criar um ficheiro de ambiente

O aplicativo Flask que você cria usa sua chave do Azure Maps para carregar o controle de mapa em uma página da Web. Uma prática recomendada é armazenar dados como esse em variáveis de ambiente para que os dados não sejam verificados no controle do código-fonte. Você pode definir uma variável de ambiente para um valor específico ao desenvolver ou publicar seu aplicativo. O Flask usa o pacote python-dotenv para procurar um arquivo chamado .env na raiz da pasta de código do aplicativo e, em seguida, carrega variáveis de ambiente desse arquivo.

Gorjeta

Se você implantar esse aplicativo no Azure usando o Serviço de Aplicativo do Azure, os valores no arquivo .env deverão ser adicionados a um arquivo de configurações do aplicativo para que os valores sejam definidos automaticamente como variáveis de ambiente que o aplicativo pode usar.

Para criar o arquivo de ambiente:

Na raiz da pasta de código do aplicativo, crie um novo arquivo de ambiente chamado .env.
Copie a seguinte instrução para o arquivo de ambiente:
```
MAP_KEY=<your map key>
```
Substitua <your map key> pelo valor da chave primária recuperada depois de criar a conta do Azure Maps na unidade anterior. Não inclua aspas.
Guarde o ficheiro.

Criar o ficheiro Python da aplicação

No Visual Studio Code, na pasta de código do aplicativo, abra o arquivo app.py .

Copie o seguinte código para o arquivo do aplicativo:

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)

Este código lida com solicitações para /, que é a raiz do site. Quando esta página da Web é carregada, o aplicativo usa a chave do seu arquivo .env para criar dados. Os dados são usados para renderizar o arquivo home.html como um parâmetro chamado data.

Guarde o ficheiro.

Criar o ficheiro home.html

No Visual Studio Code, na pasta templates , crie um novo arquivo HTML chamado home.html.

Copie o seguinte código para o arquivo 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>

Esta página da Web renderiza um elemento de tela div inteira que tem uma ID de myMap. Depois que a página estiver totalmente carregada, no navegador, o aplicativo solicita a localização do usuário. O aplicativo pode obter a localização do usuário somente se o usuário conceder permissão. Se o usuário não der permissão ao navegador para acessar sua localização, o navegador usará a localização da sede da Microsoft em Redmond, Washington, EUA.

Nota

O Azure Maps usa longitude e latitude para coordenadas de mapa. A longitude mede em torno da Terra de leste a oeste a 0° no meridiano primo (uma linha que vai do Polo Norte ao Polo Sul que atravessa o Reino Unido). Vai para leste até 180° no lado oposto do globo, aproximadamente entre o Alasca e a Rússia, e oeste para o mesmo lugar a -180°. A latitude vai de norte a sul, com o Polo Norte a 90°, o equador a 0° e o Polo Sul a -90°.

O controle de mapa é então carregado no div elemento . A chave do Azure Maps é definida como {{ data.map_key }}, a notação Flask para renderizar dados no arquivo HTML. Quando essa página é retornada ao navegador da Web do usuário, o valor é substituído pelo valor {{ data.map_key }} de map_key set no data objeto. Esse objeto foi passado para a render_templatechamada no arquivo app.py e map_key é definido como a chave primária do Azure Maps que é carregada do arquivo .env .

Quando o controle está pronto, a visualização do mapa é centralizada sobre a localização do usuário usando uma câmera virtual. O valor de zoom mostra o quão acima da Terra a câmera deve estar e determina quantos metros do mapa são mostrados por pixel na tela. Você pode ler mais sobre os diferentes valores de zoom em Níveis de zoom e grade de blocos.

Guarde o ficheiro.

Nesta unidade, você usou o Flask para criar um aplicativo Python. Em seguida, execute o aplicativo e visualize-o em sua página da Web.

Continuar