20  Esercitazione 1: web app con Flask

20.1 Il problema

In questa esercitazione, svilupperemo una semplice web app utilizzando Flask. L’applicazione accetterà in input un indirizzo dall’utente e mostrerà la mappa corrispondente utilizzando Google Maps, consentendo all’utente di scegliere il tipo di visualizzazione della mappa (mappa normale, satellite, terreno). Inoltre, permetteremo all’utente di visualizzare punti di interesse (POI) come ristoranti e ospedali e di tracciare un percorso tra due indirizzi.

20.2 Flask

Flask è un micro-framework per il web sviluppato in Python. È semplice da usare e molto flessibile, rendendolo ideale per piccoli progetti web e prototipi. Flask utilizza Jinja2 per il rendering dei template HTML e supporta vari metodi HTTP per la gestione delle richieste web.

20.2.1 Installazione

Per installare Flask, è possibile utilizzare pip:

pip install Flask

20.2.2 Creazione di una semplice web app

Iniziamo creando una semplice applicazione Flask che visualizza Hello, World! quando si accede alla homepage.

Crea un file chiamato app.py e aggiungi il seguente codice:

1from flask import Flask

2app = Flask(__name__)

3@app.route('/')
4def hello_world():
5  return 'Hello, World!'

6if __name__ == '__main__':
7  app.run(debug=True)
1
Importiamo la classe Flask dal modulo flask. Questa classe viene utilizzata per creare un’applicazione Flask.
2
Creiamo un’istanza dell’applicazione Flask. __name__ è una variabile speciale che indica il nome del modulo corrente. Flask usa questa variabile per sapere dove trovare risorse come i file di template e di configurazione.
3
Utilizziamo il decoratore @app.route('/') per definire una “route” per la nostra applicazione. Una route è un URL specifico che l’utente può visitare nel browser. In questo caso, la route è la homepage, rappresentata da /.
4
Definiamo una funzione chiamata hello_world che viene eseguita quando un utente visita la route /.
5
La funzione hello_world restituisce una stringa 'Hello, World!'. Questo è il contenuto che verrà visualizzato nel browser dell’utente quando visiterà la homepage dell’applicazione.
6
Controlliamo se lo script è eseguito direttamente (non importato come modulo in un altro script). Se è così, eseguiamo il codice nel blocco.
7
Avviamo l’applicazione Flask. app.run(debug=True) avvia un server web integrato che esegue l’applicazione. L’opzione debug=True abilita la modalità di debug, che fornisce informazioni dettagliate sugli errori e ricarica automaticamente l’applicazione quando i file di codice vengono modificati.

20.2.3 Esecuzione della web app

Per eseguire l’applicazione, utilizza il comando:

python app.py

Naviga verso http://127.0.0.1:5000/ nel browser per vedere il risultato.

20.2.4 Template

Flask utilizza Jinja2 come motore di template. I template permettono di separare la logica dell’applicazione dalla presentazione. Possiamo creare file HTML che contengono variabili e istruzioni di controllo che vengono sostituite con i dati reali al momento del rendering.

Per utilizzare i template, crea una cartella chiamata templates nella directory del tuo progetto. All’interno di templates, crea un file chiamato index.html:

<!DOCTYPE html>
<html>
<head>
1  <title>Home</title>
</head>
<body>
2  <h1>{{ title }}</h1>
3  <p>{{ message }}</p>
</body>
</html>
1
Titolo della pagina: Il titolo della pagina HTML, visualizzato nella barra del titolo del browser.
2
Variabile Jinja2 per il titolo: Variabile Jinja2 title che sarà sostituita con il valore passato dal codice Python.
3
Variabile Jinja2 per il messaggio: Variabile Jinja2 message che sarà sostituita con il valore passato dal codice Python.

Aggiorniamo app.py per utilizzare il template index.html:

1from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
2  return render_template('index.html',
                         title='Hello, World!', 
                         message='Welcome to my Flask app')

if __name__ == '__main__':
  app.run(debug=True)
1
Importiamo la funzione render_template da Flask.
2
Utilizziamo render_template nella funzione home per renderizzare il template index.html e passare i valori per title e message.

20.2.5 Jinja2

Jinja2 è il motore di template utilizzato da Flask. Permette di inserire variabili, eseguire cicli e condizioni, e molto altro nei file HTML.

Sintassi di base di Jinja2:

  • Variabili { variabile }.

  • Condizioni {% if condizione %} ... {% endif %}.

  • Cicli {% for item in lista %} ... {% endfor %}.

Esempio con ciclo e condizione:

Aggiorniamo index.html per includere un ciclo e una condizione:

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <ul>
  {% for item in items %}
    <li>{% if item == 'Special' %}<strong>{{ item }}</strong>{% else %}{{ item }}{% endif %}</li>
  {% endfor %}
  </ul>
</body>
</html>

Aggiorniamo app.py per passare una lista di elementi al template:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
  items = ['Item 1', 'Item 2', 'Special', 'Item 3']

  return render_template('index.html', 
                          title='Hello, World!', 
                          message='Welcome to my Flask app', 
                          items=items)

if __name__ == '__main__':
  app.run(debug=True)

20.2.6 Metodi HTTP

Flask supporta vari metodi HTTP, inclusi GET e POST, che sono i più comunemente utilizzati. I metodi HTTP sono modi standard per inviare e ricevere dati tra il client (come il browser web) e il server. In Flask, dobbiamo considerare questi metodi perché determinano come i dati vengono inviati e ricevuti dall’applicazione. Ad esempio, il metodo GET viene utilizzato per richiedere dati dal server (come caricare una pagina web), mentre il metodo POST viene utilizzato per inviare dati al server (come inviare un modulo).

Creiamo un semplice modulo di contatto che utilizza sia GET che POST.

Form HTML, da salvare in templates/contact.html:

<!DOCTYPE html>
<html>
<head>
  <title>Contattaci</title>
</head>
<body>
  <h1>Contattaci</h1>
  <form method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    <label for="messaggio">Messaggio:</label>
    <textarea id="messaggio" name="messaggio" required></textarea>
    <input type="submit" value="Invia">
  </form>
</body>
</html>

Aggiornamento di app.py:

1from flask import Flask, render_template, request

2app = Flask(__name__)

3@app.route('/')
4def home():
5  items = ['Item 1', 'Item 2', 'Special', 'Item 3']

  return render_template('index.html', 
                         title='Hello, World!', 
                         message='Welcome to my Flask app', 
6                         items=items)

7@app.route('/contact', methods=['GET', 'POST'])
8def contact():
9  if request.method == 'POST':
10    nome = request.form['nome']

11    messaggio = request.form['messaggio']

12

13    return f'Thank you {nome}, your message has been received.'

14  return render_template('contact.html')

15if __name__ == '__main__':
16  app.run(debug=True)
1
Importiamo Flask, render_template e request da Flask per gestire i dati dei moduli.
2
Creiamo un’applicazione Flask.
3
Definiamo la route per la homepage con il decoratore @app.route('/').
4
Definiamo la funzione home che viene chiamata quando la homepage viene richiesta.
5
Creiamo una lista di oggetti da passare al template.
6
Utilizziamo render_template per rendere il template index.html con variabili title, message e items.
7
Definiamo la route /contact che gestisce sia le richieste GET che POST.
8
Definiamo la funzione contact che gestisce la logica per la route /contact.
9
Se il metodo della richiesta è POST, elaboriamo i dati del modulo.
10
Otteniamo il valore del campo nome dal modulo.
11
Otteniamo il valore del campo messaggio dal modulo.
12
Qui, è possibile aggiungere codice per elaborare i dati del modulo, come inviarli via email.
13
Restituiamo un messaggio di ringraziamento con il nome dell’utente.
14
Se il metodo è GET, visualizziamo il modulo di contatto.
15
Eseguiamo l’applicazione Flask in modalità di debug.
16
Avviamo il server Flask.

20.2.7 Per continuare

Questa introduzione copre le basi di Flask, inclusi template, Jinja2 e metodi HTTP. Flask è un framework potente e flessibile che rende lo sviluppo web con Python semplice ed efficace. Per ulteriori approfondimenti, è possibile consultare la documentazione ufficiale di Flask.

20.2.8 Esercitazione 1: web app con Flask

20.3 Il problema

In questa esercitazione, svilupperemo una semplice web app utilizzando Flask. L’applicazione accetterà in input un indirizzo dall’utente e mostrerà la mappa corrispondente utilizzando Google Maps, consentendo all’utente di scegliere il tipo di visualizzazione della mappa (mappa normale, satellite, terreno) e visualizzare i dettagli dell’indirizzo. Inoltre, sarà possibile tracciare un percorso tra due indirizzi.

20.4 Flask

Flask è un micro-framework per il web sviluppato in Python. È semplice da usare e molto flessibile, rendendolo ideale per piccoli progetti web e prototipi. Flask utilizza Jinja2 per il rendering dei template HTML e supporta vari metodi HTTP per la gestione delle richieste web.

20.4.1 Installazione

Per installare Flask, è possibile utilizzare pip:

pip install Flask

20.4.2 Creazione di una semplice web app

Iniziamo creando una semplice applicazione Flask che visualizza Hello, World! quando si accede alla homepage.

Crea un file chiamato app.py e aggiungi il seguente codice:

1from flask import Flask

2app = Flask(__name__)

3@app.route('/')
4def hello_world():
5    return 'Hello, World!'

6if __name__ == '__main__':
7    app.run(debug=True)
1
Importiamo la classe Flask dal modulo flask.
2
Creiamo un’istanza dell’applicazione Flask.
3
Utilizziamo il decoratore @app.route('/') per definire una route per la nostra applicazione.
4
Definiamo una funzione chiamata hello_world che viene eseguita quando un utente visita la route /.
5
La funzione hello_world restituisce una stringa 'Hello, World!'.
6
Controlliamo se lo script è eseguito direttamente.
7
Avviamo l’applicazione Flask in modalità debug.

20.4.3 Esecuzione della web app

Per eseguire l’applicazione, utilizza il comando:

python app.py

Naviga verso http://127.0.0.1:5000/ nel browser per vedere il risultato.

20.4.4 Template

Flask utilizza Jinja2 come motore di template. I template permettono di separare la logica dell’applicazione dalla presentazione. Possiamo creare file HTML che contengono variabili e istruzioni di controllo che vengono sostituite con i dati reali al momento del rendering.

Per utilizzare i template, crea una cartella chiamata templates nella directory del tuo progetto. All’interno di templates, crea un file chiamato index.html:

<!DOCTYPE html>
<html>
<head>
1  <title>Home</title>
</head>
<body>
2  <h1>{{ title }}</h1>
3  <p>{{ message }}</p>
</body>
</html>
1
Titolo della pagina.
2
Variabile Jinja2 per il titolo.
3
Variabile Jinja2 per il messaggio.

Aggiorniamo app.py per utilizzare il template index.html:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', 
                           title='Hello, World!', 
                           message='Welcome to my Flask app')

if __name__ == '__main__':
    app.run(debug=True)
  1. Importiamo la funzione render_template da Flask.
  2. Utilizziamo render_template nella funzione home per rendere il template index.html e passare i valori per title e message.

20.4.5 Jinja2

Jinja2 è il motore di template utilizzato da Flask. Permette di inserire variabili, eseguire cicli e condizioni, e molto altro nei file HTML.

Sintassi di base di Jinja2:

  • Variabili { variabile }.
  • Condizioni {% if condizione %} ... {% endif %}.
  • Cicli {% for item in lista %} ... {% endfor %}.

Aggiorniamo index.html per includere un ciclo e una condizione:

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <ul>
  {% for item in items %}
    <li>{% if item == 'Special' %}<strong>{{ item }}</strong>{% else %}{{ item }}{% endif %}</li>
  {% endfor %}
  </ul>
</body>
</html>

Aggiorniamo app.py per passare una lista di elementi al template:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    items = ['Item 1', 'Item 2', 'Special', 'Item 3']
    return render_template('index.html', 
                           title='Hello, World!', 
                           message='Welcome to my Flask app', 
                           items=items)

if __name__ == '__main__':
    app.run(debug=True)
  1. Definiamo una lista di oggetti da passare al template.
  2. Passiamo la lista di oggetti items al template.

20.4.6 Metodi HTTP

Flask supporta vari metodi HTTP, inclusi GET e POST, che sono i più comunemente utilizzati. I metodi HTTP sono modi standard per inviare e ricevere dati tra il client (come il browser web) e il server. In Flask, dobbiamo considerare questi metodi perché determinano come i dati vengono inviati e ricevuti dall’applicazione. Ad esempio, il metodo GET viene utilizzato per richiedere dati dal server (come caricare una pagina web), mentre il metodo POST viene utilizzato per inviare dati al server (come inviare un modulo).

Creiamo un semplice modulo di contatto che utilizza sia GET che POST.

Form HTML (templates/contact.html):

<!DOCTYPE html>
<html>
<head>
  <title>Contattaci</title>
</head>
<body>
  <h1>Contattaci</h1>
  <form method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    <label for="messaggio">Messaggio:</label>
    <textarea id="messaggio" name="messaggio" required></textarea>
    <input type="submit" value="Invia">
  </form>
</body>
</html>

Aggiornamento di app.py:

1from flask import Flask, render_template, request

2app = Flask(__name__)

3@app.route('/')
4def home():
5    items = ['Item 1', 'Item 2', 'Special', 'Item 3']
    return render_template('index.html', 
                           title='Hello, World!', 
                           message='Welcome to my Flask app', 
6                           items=items)

7@app.route('/contact', methods=['GET', 'POST'])
8def contact():
9    if request.method == 'POST':
10        nome = request.form['nome']
11        messaggio = request.form['messaggio']

12
13        return f'Thank you {nome}, your message has been received.'
14    return render_template('contact.html')

15if __name__ == '__main__':
16    app.run(debug=True)
1
Importiamo Flask, render_template e request da Flask per gestire i dati dei moduli.
2
Creiamo un’applicazione Flask.
3
Definiamo la route per la homepage con il decoratore @app.route('/').
4
Definiamo la funzione home che viene chiamata quando la homepage viene richiesta.
5
Creiamo una lista di oggetti da passare al template.
6
Utilizziamo render_template per rendere il template index.html con variabili title, message e items.
7
Definiamo la route /contact che gestisce sia le richieste GET che POST.
8
Definiamo la funzione contact che gestisce la logica per la route /contact.
9
Se il metodo della richiesta è POST, elaboriamo i dati del modulo.
10
Otteniamo il valore del campo nome dal modulo.
11
Otteniamo il valore del campo messaggio dal modulo.
12
Qui, è possibile aggiungere codice per elaborare i dati del modulo, come inviarli via email.
13
Restituiamo un messaggio di ringraziamento con il nome dell’utente.
14
Se il metodo è GET, visualizziamo il modulo di contatto.
15
Eseguiamo l’applicazione Flask in modalità di debug.
16
Avviamo il server Flask.

20.4.7 Per continuare

Questa introduzione copre le basi di Flask, inclusi template, Jinja2 e metodi HTTP. Flask è un framework potente e flessibile che rende lo sviluppo web con Python semplice ed efficace. Per ulteriori approfondimenti, è possibile consultare la documentazione ufficiale di Flask.

20.5 Passaggi dell’esercitazione

  1. Creare un’applicazione Flask.
  2. Implementare della pagina web per l’inserimento dell’indirizzo.
  3. Integrare Google Maps per visualizzare la mappa basata sull’indirizzo inserito.
  4. Consentire la selezione del tipo di visualizzazione della mappa.
  5. Visualizzare una tabella con i dettagli dell’indirizzo.
  6. Permettere di tracciare un percorso tra due indirizzi.

20.5.1 Passaggio 1: creazione di un’applicazione Flask

Il primo passo è creare una semplice applicazione Flask. Creiamo un file chiamato app.py che analizza due template cioè due file HTML delle variabili i cui valori saranno definiti al tempo di esecuzione.

La struttura dei file su disco prevede una cartella radice dove posizioniamo app.py, VisualizzaMappa e la sottocartella templates dove andranno i template delle pagine HTML:

VisualizzaMappa/
├── app.py
├── templates/
│   ├── index.html
│   └── mappa.html
│   └── route.html
└── static/

app.py:

1from flask import Flask, render_template, request
2import requests

3app = Flask(__name__)

GOOGLE_API_KEY = "INSERIRE CHIAVE API GOOGLE MAPS"


4@app.route('/', methods=['GET', 'POST'])
def home():
5  if request.method == 'POST':
6    indirizzo = request.form['indirizzo']
7    visualizzazione = request.form['visualizzazione']

    geocode_url = f"https://maps.googleapis.com/maps/api/geocode/json?" + \
8                  f"address={indirizzo}&key={GOOGLE_API_KEY}"

9    response = requests.get(geocode_url)
10    data = response.json()

11    if data['status'] == 'OK':
12      result = data['results'][0]
13      dettagli = {
        'Indirizzo Formattato': result['formatted_address'],
        'Latitudine': result['geometry']['location']['lat'],
        'Longitudine': result['geometry']['location']['lng'],
        'Tipo di Luogo': result['types']
      }
    else:
14      dettagli = None

    return render_template('mappa.html',
                           indirizzo=indirizzo,
                           visualizzazione=visualizzazione,
                           dettagli=dettagli,
15                           api_key=GOOGLE_API_KEY)

16  return render_template('index.html')


17@app.route('/route', methods=['GET', 'POST'])
def route():
18  if request.method == 'POST':
19    start = request.form['start']
20    end = request.form['end']

    return render_template('route.html',
                           start=start,
                           end=end,
21                           api_key=GOOGLE_API_KEY)

22  return render_template('route_form.html')


if __name__ == '__main__':
23  app.run(debug=True)
1
Importa Flask e i moduli necessari per gestire le richieste e i template.
2
Importa il modulo requests per effettuare richieste HTTP.
3
Crea l’istanza dell’applicazione Flask.
4
Definisce una route per la homepage, che accetta sia richieste GET che POST.
5
Controlla se la richiesta è di tipo POST.
6
Ottiene l’indirizzo inserito dall’utente nel modulo HTML.
7
Ottiene il tipo di visualizzazione selezionato dall’utente nel modulo HTML.
8
Costruisce l’URL per l’API di Google Maps per ottenere i dettagli dell’indirizzo.
9
Effettua una richiesta HTTP all’API di Google Maps.
10
Converte la risposta JSON in un dizionario Python.
11
Controlla se la richiesta all’API di Google Maps è andata a buon fine.
12
Ottiene il primo risultato dalla risposta dell’API.
13
Estrae i dettagli dell’indirizzo dalla risposta dell’API.
14
Se la richiesta all’API di Google Maps non è andata a buon fine, imposta dettagli a None.
15
Renderizza il template mappa.html, passando l’indirizzo, il tipo di visualizzazione e i dettagli come variabili.
16
Renderizza il template index.html per le richieste GET.
17
Definisce una route per il percorso, che accetta sia richieste GET che POST.
18
Controlla se la richiesta è di tipo POST.
19
Ottiene l’indirizzo di partenza inserito dall’utente nel modulo HTML.
20
Ottiene l’indirizzo di arrivo inserito dall’utente nel modulo HTML.
21
Renderizza il template route.html, passando gli indirizzi di partenza e arrivo come variabili.
22
Renderizza il template route_form.html per le richieste GET.
23
Avvia l’applicazione Flask in modalità debug.

20.5.2 Passaggio 2: implementazione della pagina web per inserimento indirizzo

Creiamo una pagina web che permetta agli utenti di inserire un indirizzo e selezionare il tipo di visualizzazione della mappa. Creiamo un file chiamato templates/index.html.

<!DOCTYPE html>
<html>
<head>
  <title>Inserisci Indirizzo</title>
</head>
<body>
  <h1>Inserisci un indirizzo</h1>
  <form method="post">
    <label for="indirizzo">Indirizzo:</label>
1    <input type="text" id="indirizzo" name="indirizzo" required>
    <label for="visualizzazione">Visualizzazione:</label>
2    <select id="visualizzazione" name="visualizzazione">
      <option value="roadmap">Mappa</option>
      <option value="satellite">Satellite</option>
      <option value="terrain">Terreno</option>
    </select>
3    <input type="submit" value="Mostra Mappa">
  </form>
  <h1>Traccia un percorso</h1>
  <form method="post" action="/route">
    <label for="start">Partenza:</label>
    <input type="text" id="start" name="start" required>
    <label for="end">Arrivo:</label>
    <input type="text" id="end" name="end" required>
    <input type="submit" value="Traccia Percorso">
  </form>
</body>
</html>
1
Campo di input per l’indirizzo.
2
Dropdown per selezionare il tipo di visualizzazione della mappa.
3
Pulsante di invio per il modulo.

20.5.3 Passaggio 3: integrazione di Google Maps

Creiamo un template per visualizzare la mappa di Google. Creiamo un file chiamato templates/mappa.html.

<!DOCTYPE html>
<html>
<head>
  <title>Mappa</title>
1  <script src="https://maps.googleapis.com/maps/api/js?key={{ api_key }}&libraries=places"></script>
  <script>
    function initMap() {
      var geocoder = new google.maps.Geocoder();
2      var indirizzo = "{{ indirizzo }}";
3      var visualizzazione = "{{ visualizzazione }}";
      geocoder.geocode({'address': indirizzo}, function(results, status) {
        if (status === 'OK') {
          var mapOptions = {
            zoom: 15,
            center: results[0].geometry.location,
4            mapTypeId: visualizzazione,
5            tilt: 45
          };
          var map = new google.maps.Map(document.getElementById('map'), mapOptions);

          var service = new google.maps.places.PlacesService(map);
          service.nearbySearch({
            location: results[0].geometry.location,
            radius: 1000,
            type: ['restaurant']
          }, function(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                var place = results[i];
                new google.maps.Marker({
                  position: place.geometry.location,
                  map: map,
                  title: place.name
                });
              }
            }
          });

          var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'), {
              position: results[0].geometry.location,
              pov: {
                heading: 34,
                pitch: 10
              }
            });
6          map.setStreetView(panorama);
        } else {
          alert('Geocode non riuscito per il seguente motivo: ' + status);
        }
      });
    }
  </script>
</head>
7<body onload="initMap()">
  <h1>Mappa di {{ indirizzo }}</h1>
8  <div id="map" style="height: 500px; width: 100%;"></div>
9  <div id="street-view" style="height: 500px; width: 100%; margin-top: 20px;"></div>
10  {% if dettagli %}
  <h2>Dettagli Indirizzo</h2>
  <table>
    <tr><th>Chiave</th><th>Valore</th></tr>
    {% for chiave, valore in dettagli.items() %}
    <tr><td>{{ chiave }}</td><td>{{ valore }}</td></tr>
    {% endfor %}
  </table>
11  {% else %}
  <p>Dettagli non disponibili.</p>
  {% endif %}
</body>
</html>
1
Carica l’API di Google Maps con la chiave API.
2
Inserisce l’indirizzo passato dal backend.
3
Inserisce il tipo di visualizzazione passato dal backend.
4
Imposta il tipo di visualizzazione della mappa.
5
Aggiunge l’inclinazione per la visualizzazione 3D.
6
Utilizza l’API di Street View per creare una vista 3D interattiva.
7
Chiama la funzione initMap quando la pagina è caricata.
8
div per visualizzare la mappa.
9
div per visualizzare la Street View sotto la mappa principale.
10
Controlla se i dettagli dell’indirizzo sono disponibili.
11
Messaggio di fallback se i dettagli non sono disponibili.

Creiamo un template per tracciare il percorso. Creiamo un file chiamato templates/route.html.

<!DOCTYPE html>
<html>
<head>
  <title>Percorso</title>
1  <script src="https://maps.googleapis.com/maps/api/js?key={{ api_key }}"></script>
  <script>
    function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
2      var start = "{{ start }}";
3      var end = "{{ end }}";
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {lat: 41.85, lng: -87.65}
      });
      directionsRenderer.setMap(map);
      var request = {
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(result, status) {
        if (status === 'OK') {
          directionsRenderer.setDirections(result);
        } else {
          alert('Directions request failed due to ' + status);
        }
      });
    }
  </script>
</head>
4<body onload="initMap()">
  <h1>Percorso da {{ start }} a {{ end }}</h1>
5  <div id="map" style="height: 500px; width: 100%;"></div>
</body>
</html>
1
Carica l’API di Google Maps con la chiave API.
2
Inserisce l’indirizzo di partenza passato dal backend.
3
Inserisce l’indirizzo di arrivo passato dal backend.
4
Chiama la funzione initMap quando la pagina è caricata.
5
div per visualizzare il percorso sulla mappa.

20.5.4 Passaggio 4: test dell’applicazione

Eseguiamo l’applicazione Flask:

python app.py

Apriamo il browser e navighiamo all’indirizzo http://127.0.0.1:5000/. Inseriamo un indirizzo, selezioniamo il tipo di visualizzazione e clicchiamo su Mostra Mappa. La mappa di Google dovrebbe essere visualizzata con l’indirizzo inserito e il tipo di visualizzazione selezionato. Inoltre, possiamo inserire gli indirizzi di partenza e arrivo per tracciare un percorso sulla mappa. I dettagli dell’indirizzo verranno mostrati in una tabella sotto la mappa.

20.6 File

app.py

index.html

mappa.html

route.html