Esercizio: Creare un'app
L'applicazione verrà creata in modo iterativo, concentrandosi su concetti specifici man mano che si procede. Per iniziare, verrà creata la pagina di destinazione dell'applicazione in cui verrà visualizzato il modulo usato dall'utente.
In genere, il punto di ingresso per le applicazioni Flask è un file denominato app.py. Verrà seguita questa convenzione e verrà creata la parte principale dell'applicazione. Verranno eseguite le operazioni seguenti:
- Creazione dell'applicazione principale
- Aggiunta della route per l'applicazione
- Creazione del modello HTML per il sito
- Testare l'applicazione
Creare l'applicazione principale
Tornare all'istanza di Visual Studio Code usata in precedenza e creare un nuovo file denominato app.py facendo clic su Nuovo file nella scheda Explorer
Importante
Se Visual Studio Code viene usato per la prima volta in questo esercizio per creare un'applicazione Python, verranno visualizzati messaggi sull'installazione dell'estensione Python e del linter pylint. Selezionare Installa per installare ognuno di questi componenti aggiuntivi.
Aggiungere il codice per creare l'applicazione Flask
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
L'istruzione di importazione include riferimenti a Flask, che è il componente principale di qualsiasi applicazione Flask. Si userà render_template a breve, quando si vuole restituire il codice HTML.
app sarà l'applicazione principale. Verrà usata durante la registrazione delle route nel passaggio successivo.
Aggiungere la route
L'applicazione userà una sola route - /. Questa route viene a volte chiamata route predefinita o route indice poiché si tratta della route che verrà usata se l'utente non specifica nulla oltre al nome del dominio o del server.
Aggiungere il codice seguente alla fine del file app.py
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Usando @app.route si indica la route che si vuole creare. Il percorso sarà /, ovvero la route predefinita. Si specifica che la route verrà usata per GET. Se viene ricevuta una richiesta GET per /, Flask chiamerà automaticamente la funzione dichiarata immediatamente sotto l'elemento Decorator, in questo caso index. Nel corpo di index si indica che verrà restituito un modello HTML denominato index.html all'utente.
Creare il modello HTML per il modulo
Jinja, il motore di creazione di modelli per Flask, è incentrato principalmente sul codice HTML. Di conseguenza, è possibile usare tutte le competenze e gli strumenti HTML esistenti già disponibili. Bootstrap verrà usato per definire il layout della pagina, per renderla più accattivante. Con Bootstrap, verranno usate diverse classi CSS nel codice HTML. Se non si ha familiarità con Bootstrap, è possibile ignorare le classi e concentrarsi sul codice HTML (che è effettivamente la parte importante).
Importante
HTML (HyperText Markup Language) è un linguaggio di markup standard usato per creare pagine Web. HTML è costituito da una serie di tag e attributi per creare intestazioni, paragrafi, elenchi, immagini, collegamenti e altri elementi che costituiscono una pagina Web. Quando un utente richiede una pagina Web, il browser legge il codice HTML e lo esegue come pagina Web visiva con cui l'utente può interagire. Per altre informazioni su HTML, vedere Nozioni di base su HTML.
È necessario creare modelli per Flask in una cartella adatta denominata templates. Creare la cartella e il file necessario e aggiungere il codice HTML.
Creare una nuova cartella denominata templates selezionando Nuova cartella nello strumento Explorer in Visual Studio Code
Selezionare la cartella templates creata e selezionare Nuovo file per aggiungere un file alla cartella
Denominare il file index.html
Aggiungere il codice HTML seguente
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
I componenti principali del codice HTML precedente sono i componenti textarea per il testo che l'utente vuole tradurre e l'elenco a discesa (select) che verrà usato dall'utente per indicare la lingua di destinazione. Per aggiungere altre lingue, è possibile consultare l'elenco delle lingue supportate per altre opzioni. Impostare l'attributo value sul codice della lingua, ad esempio pl per il polacco.
Testare l'applicazione
Dopo aver creato il sito iniziale, è possibile eseguirne il test. Per semplicità, verrà usato il terminale integrato all'interno di Visual Studio Code.
Aprire il terminale integrato selezionando CTRL- o Cmd- in Mac
Eseguire il comando seguente per impostare il runtime Flask sullo sviluppo: il server verrà ricaricato automaticamente a ogni modifica
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentEseguire l'applicazione!
flask runAprire l'applicazione in un browser passando a http://localhost:5000
Verrà visualizzato il modulo. Complimenti.