Come creare la tua prima applicazione web utilizzando Flask e Python 3

L’autore ha selezionato il Fondo per Software Libero e Open Source per ricevere una donazione nell’ambito del programma Scrivi per Donazioni.

Introduzione

Flask è un framework web leggero per Python che fornisce strumenti e funzionalità utili per creare applicazioni web nel linguaggio Python. Offre flessibilità ai sviluppatori ed è accessibile per i nuovi programmatori perché è possibile costruire rapidamente un’applicazione web utilizzando solo un singolo file Python. Flask è anche estensibile e non impone una struttura di directory particolare o richiede codice boilerplate complicato prima di iniziare.

Imparare Flask ti permetterà di creare rapidamente applicazioni web in Python. Puoi sfruttare le librerie Python per aggiungere funzionalità avanzate alla tua applicazione web, come la memorizzazione dei tuoi dati in un database o la convalida dei moduli web.

In questo tutorial, creerai una piccola applicazione web che renderizza testo HTML sul browser. Installerete Flask, scriverete ed eseguirete un’applicazione Flask, e poi eseguirete l’applicazione in modalità sviluppo. Utilizzerete il routing per visualizzare varie pagine web che svolgono scopi diversi nella vostra applicazione web. Utilizzerete anche funzioni di visualizzazione per permettere agli utenti di interagire con l’applicazione attraverso route dinamiche. Infine, utilizzerete il debugger per risolvere errori.

Prerequisiti

• Un ambiente di programmazione Python 3 locale. Seguite il tutorial per la vostra distribuzione nella serie Come Installare e Configurare un Ambiente di Programmazione Locale per Python 3. In questo tutorial chiameremo la nostra directory del progetto flask_app.

• Una conoscenza dei concetti base di Python 3, come tipi di dati, liste, funzioni e altri concetti simili. Se non conosci Python, dai un’occhiata alla nostra serie Come Programmare in Python 3.

• Una comprensione dei concetti base di HTML. Puoi rivedere la serie di tutorial Come Costruire un Sito Web con HTML per conoscenze di base.

Passo 1 — Installare Flask

In questo passo, attiverai il tuo ambiente Python e installerà Flask utilizzando l’installer di pacchetti pip.

Prima, attiva il tuo ambiente di programmazione se non l’hai già fatto:

source env/bin/activate

Una volta attivato il tuo ambiente di programmazione, installa Flask utilizzando il comando pip install:

pip install flask

Una volta completata l’installazione, vedrai un elenco dei pacchetti installati nelle ultime parti dell’output, simile a questo:

Output
...

Installing collected packages: Werkzeug, MarkupSafe, Jinja2, itsdangerous, click, flask
Successfully installed Jinja2-3.0.1 MarkupSafe-2.0.1 Werkzeug-2.0.1 click-8.0.1 flask-2.0.1 itsdangerous-2.0.1

Ciò significa che l’installazione di Flask ha installato anche diversi altri pacchetti. Questi pacchetti sono dipendenze di cui Flask ha bisogno per svolgere diverse funzioni.

Hai creato la cartella del progetto, un ambiente virtuale e installato Flask. Ora puoi procedere alla configurazione di una semplice applicazione.

Passo 2 — Creare una Semplice Applicazione

Ora che hai configurato il tuo ambiente di programmazione, inizierai a utilizzare Flask. In questo passaggio, creerai una piccola applicazione web Flask all’interno di un file Python, in cui scriverai codice HTML da visualizzare nel browser.

Nella tua directory flask_app, apri un file chiamato app.py per la modifica, utilizza nano o il tuo editor di testo preferito:

nano app.py

Scrivi il seguente codice all’interno del file app.py:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'

Salva e chiudi il file.

Nel blocco di codice sopra, prima importi l’oggetto Flask dal pacchetto flask. Quindi lo utilizzi per creare l’istanza della tua applicazione Flask, dandogli il nome app. Passi la variabile speciale __name__, che contiene il nome del modulo Python corrente. Questo nome indica alla istanza dove si trova; ne hai bisogno perché Flask configura alcuni percorsi dietro le quinte.

Una volta creata l’istanza app, puoi utilizzarla per gestire le richieste web in ingresso e inviare risposte all’utente. @app.route è un decoratore che trasforma una normale funzione Python in una funzione di visualizzazione Flask, che converte il valore di ritorno della funzione in una risposta HTTP da visualizzare da un client HTTP, come un browser web. Passi il valore '/' a @app.route() per indicare che questa funzione risponderà alle richieste web per l’URL /, che è l’URL principale.

La funzione di visualizzazione hello() restituisce la stringa '<h1>Hello, World!</h1>' come risposta HTTP.

Ora hai una semplice applicazione Flask in un file Python chiamato app.py, nel passo successivo, eseguirai l’applicazione per vedere il risultato della funzione di visualizzazione hello() renderizzata in un browser web.

Passo 3 — Esecuzione dell’Applicazione

Dopo aver creato il file che contiene l’applicazione Flask, la eseguirai utilizzando l’interfaccia della riga di comando di Flask per avviare il server di sviluppo e renderizzare nel browser il codice HTML che hai scritto come valore di ritorno per la funzione di visualizzazione hello() nel passo precedente.

Prima, mentre sei nella directory flask_app con l’ambiente virtuale attivato, indica a Flask dove trovare l’applicazione (app.py nel tuo caso) utilizzando la variabile d’ambiente FLASK_APP con il seguente comando (su Windows, usa set invece di export):

export FLASK_APP=app

Quindi specifica che vuoi eseguire l’applicazione in modalità di sviluppo (così puoi utilizzare il debugger per catturare gli errori) con la variabile d’ambiente FLASK_ENV:

export FLASK_ENV=development

Infine, esegui l’applicazione utilizzando il comando flask run:

flask run

Una volta che l’applicazione è in esecuzione, l’output sarà qualcosa del genere:

Output
 * Serving Flask app "app" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 296-353-699

L’output precedente contiene diverse informazioni, come:

• Il nome dell’applicazione che stai eseguendo ("app").
• L’ambiente in cui l’applicazione è in esecuzione (development).
• Debug mode: on indica che il debugger di Flask è in funzione. Questo è utile durante lo sviluppo perché fornisce messaggi di errore dettagliati quando qualcosa va storto, facilitando la risoluzione dei problemi.
• L’applicazione è in esecuzione localmente all’URL http://127.0.0.1:5000/. 127.0.0.1 è l’IP che rappresenta il localhost della tua macchina e :5000 è il numero di porta.

Apri un browser e inserisci l’URL http://127.0.0.1:5000/. Vedrai il testo Hello, World! in un’intestazione <h1> come risposta. Questo conferma che la tua applicazione è in esecuzione con successo.

Se desideri interrompere il server di sviluppo, premi CTRL+C.

Per continuare a sviluppare l’applicazione app.py, lascia il server di sviluppo in esecuzione e apri un’altra finestra del terminale. Spostati nella directory flask_app, attiva l’ambiente virtuale, imposta le variabili d’ambiente FLASK_ENV e FLASK_APP, e procedi con i prossimi passaggi. (Questi comandi sono elencati precedentemente in questo passaggio.)

Output
OSError: [Errno 98] Address already in use

flask run -p 5001

Ora hai una piccola applicazione web Flask. Hai eseguito la tua applicazione e visualizzato informazioni sul browser web. Successivamente, imparerai le route e come utilizzarle per servire più pagine web.

Passo 4 — Route e Funzioni di Visualizzazione

In questo passo, aggiungerai alcune route alla tua applicazione per mostrare diverse pagine a seconda dell’URL richiesto. Imparerai anche cosa sono le funzioni di visualizzazione e come utilizzarle.

Una route è un URL che puoi utilizzare per determinare cosa riceve l’utente quando visita la tua applicazione web nel loro browser. Ad esempio, http://127.0.0.1:5000/ è la route principale che potrebbe essere utilizzata per mostrare una pagina di indice. L’URL http://127.0.0.1:5000/about potrebbe essere un’altra route utilizzata per una pagina “about” che fornisce all’utente alcune informazioni sulla tua applicazione web. Allo stesso modo, puoi creare una route che permetta agli utenti di accedere alla tua applicazione all’indirizzo http://127.0.0.1:5000/login.

La tua applicazione Flask attualmente ha una route che serve gli utenti che richiedono l’URL principale (http://127.0.0.1:5000/). Per dimostrare come aggiungere una nuova pagina web alla tua applicazione, modificherai il file della tua applicazione per aggiungere un’altra route che fornisce informazioni sulla tua applicazione web all’indirizzo http://127.0.0.1:5000/about.

Per prima cosa, apri il tuo file app.py per la modifica:

nano app.py

Modifica il file aggiungendo il seguente codice evidenziato alla fine del file:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

Salva e chiudi il file.

Hai aggiunto una nuova funzione chiamata about(). Questa funzione è decorata con il decoratore @app.route() che la trasforma in una funzione vista che gestisce le richieste per l’endpoint http://127.0.0.1:5000/about.

Con il server di sviluppo in esecuzione, visita il seguente URL utilizzando il tuo browser:

http://127.0.0.1:5000/about

Vedrai il testo This is a Flask web application. renderizzato in un’intestazione HTML <h3>.

Puoi anche utilizzare più route per una sola funzione vista. Ad esempio, puoi servire la pagina index sia a / che a /index/. Per fare questo, apri il tuo file app.py per la modifica:

nano app.py

Modifica il file aggiungendo un altro decoratore alla funzione vista hello():

from flask import Flask

app = Flask(__name__)

@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'

@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

Salva e chiudi il file.

Dopo aver aggiunto questo nuovo decoratore, puoi accedere alla pagina index sia a http://127.0.0.1:5000/ che a http://127.0.0.1:5000/index.

Ora capisci cosa sono le route, come utilizzarle per creare funzioni vista e come aggiungere nuove route alla tua applicazione. Successivamente, utilizzerai le route dinamiche per consentire agli utenti di controllare la risposta dell’applicazione.

Passo 5 — Route Dinamiche

In questo passaggio, utilizzerai le route dinamiche per consentire agli utenti di interagire con l’applicazione. Creerai una route che capitalizza le parole passate attraverso l’URL e una route che somma due numeri e visualizza il risultato.

Normalmente, gli utenti non interagiscono con un’applicazione web modificando manualmente l’URL. Piuttosto, l’utente interagisce con elementi della pagina che portano a diversi URL a seconda dell’input e dell’azione dell’utente, ma ai fini di questo tutorial, modificherai l’URL per dimostrare come far rispondere l’applicazione in modo diverso con URL diversi.

Prima, apri il tuo file app.py per la modifica:

nano app.py

Se permetti all’utente di inviare qualcosa alla tua applicazione web, come un valore nell’URL che stai per fare nella seguente modifica, dovresti sempre tenere a mente che la tua app non dovrebbe visualizzare direttamente dati non attendibili (dati inviati dall’utente). Per visualizzare i dati utente in modo sicuro, utilizza la funzione escape() fornita dal pacchetto markupsafe, che è stato installato insieme a Flask.

Modifica app.py e aggiungi la seguente riga all’inizio del file, sopra l’importazione di Flask:

from markupsafe import escape
from flask import Flask

# ...

Quindi, aggiungi la seguente route alla fine del file:

# ...

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

Salva e chiudi il file.

Questa nuova route ha una sezione variabile <word>. Questo indica a Flask di prendere il valore dall’URL e passarlo alla funzione di visualizzazione. La variabile URL <word> passa un argomento chiave alla funzione di visualizzazione capitalize(). L’argomento ha lo stesso nome della variabile URL (word in questo caso). Con questo puoi accedere alla parola passata attraverso l’URL e rispondere con una versione maiuscola utilizzando il metodo capitalize() in Python.

Utilizzi la funzione escape() che hai importato in precedenza per rendere la stringa word come testo. Questo è importante per evitare attacchi Cross Site Scripting (XSS). Se l’utente invia JavaScript malevolo invece di una parola, escape() lo renderà come testo e il browser non lo eseguirà, mantenendo sicura la tua applicazione web.

Per visualizzare la parola maiuscola all’interno di un’intestazione HTML <h1>, utilizzi il metodo format() di Python, per maggiori informazioni su questo metodo, vedi Come Usare i Formatter di Stringa in Python 3

Con il server di sviluppo in esecuzione, apri il browser e visita i seguenti URL. Puoi sostituire le parole evidenziate con qualsiasi parola di tua scelta.

http://127.0.0.1:5000/capitalize/hello
http://127.0.0.1:5000/capitalize/flask
http://127.0.0.1:5000/capitalize/python

Puoi vedere la parola nell’URL maiuscola all’interno di un tag <h1> nella pagina.

Puoi anche utilizzare più variabili in una route. Per dimostrarlo, aggiungerai una route che somma due numeri interi positivi e visualizza il risultato.

Apri il tuo file app.py per la modifica:

nano app.py

Aggiungi la seguente route alla fine del file:

# ...

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

Salva e chiudi il file.

In questa route, utilizzi un convertitore speciale int con la variabile URL (/add/<int:n1>/<int:n2>/) che accetta solo numeri interi positivi. Di default, le variabili URL sono considerate stringhe e trattate come tali.

Con il server di sviluppo in esecuzione, apri il tuo browser e visita la seguente URL:

http://127.0.0.1:5000/add/5/5/

Il risultato sarà la somma dei due numeri (10 in questo caso).

Ora hai capito come utilizzare le route dinamiche per visualizzare diverse risposte in una singola route a seconda dell’URL richiesto. Successivamente, imparerai come risolvere problemi e debuggare la tua applicazione Flask in caso di errore.

Passo 6 — Debugging di un’Applicazione Flask

Quando sviluppi un’applicazione web, ti imbatterai frequentemente in situazioni in cui l’applicazione mostra un errore invece del comportamento che ti aspetti. Potresti sbagliare a scrivere una variabile o dimenticare di definire o importare una funzione. Per facilitare la risoluzione di questi problemi, Flask fornisce un debugger quando l’applicazione è in esecuzione in modalità di sviluppo. In questo passaggio, imparerai come correggere gli errori nella tua applicazione utilizzando il debugger di Flask.

Per dimostrare come gestire gli errori, creerai una route che saluta un utente da una lista di nomi utente.

Apri il tuo file app.py per la modifica:

nano app.py

Aggiungi la seguente route alla fine del file:

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    return '<h2>Hi {}</h2>'.format(users[user_id])

Salva e chiudi il file.

Nella route sopra, la funzione di visualizzazione greet_user() riceve un argomento user_id dalla variabile URL user_id. Utilizzi il convertitore int per accettare numeri interi positivi. All’interno della funzione, hai una lista Python chiamata users, che contiene tre stringhe che rappresentano nomi utente. La funzione di visualizzazione restituisce una stringa costruita in base al user_id fornito. Se il user_id è 0, la risposta sarà Hi Bob in un tag <h2> perché Bob è il primo elemento della lista (il valore di users[0]).

Con il server di sviluppo in esecuzione, apri il tuo browser e visita le seguenti URL:

http://127.0.0.1:5000/users/0
http://127.0.0.1:5000/users/1
http://127.0.0.1:5000/users/2

Riceverai le seguenti risposte:

Output
Hi Bob
Hi Jane
Hi Adam

Finora funziona bene, ma può andare storto quando richiedi un saluto per un utente che non esiste. Per dimostrare come funziona il debugger di Flask, visita il seguente URL:

http://127.0.0.1:5000/users/3

Vedrai una pagina che sembra questa:

In alto, la pagina ti fornisce il nome dell’eccezione Python, che è IndexError, indicando che l’indice della lista (3 in questo caso) è fuori dall’intervallo della lista (che va solo da 0 a 2 perché la lista ha solo tre elementi). Nel debugger, puoi vedere la traccia che ti dice le righe di codice che hanno generato questa eccezione.

Le ultime due righe della traccia solitamente indicano l’origine dell’errore. Nel tuo caso, le righe potrebbero essere qualcosa del genere:

File "/home/USER/flask_app/app.py", line 28, in greet_user
    return '<h2>Hi {}</h2>'.format(users[user_id])

Questo ti dice che l’errore ha origine dalla funzione greet_user() all’interno del file app.py, specificamente nella riga return.

Conoscendo la riga originale che genera l’eccezione ti aiuterà a determinare cosa è andato storto nel tuo codice e decidere cosa fare per risolverlo.

In questo caso puoi usare una semplice clausola try...except per risolvere questo errore. Se l’URL richiesto ha un indice fuori dall’intervallo della lista, l’utente riceverà un errore 404 Not Found, che è un errore HTTP che informa l’utente che la pagina che stanno cercando non esiste.

Apri il tuo file app.py per la modifica:

nano app.py

Per rispondere con un errore HTTP 404, avrai bisogno della funzione abort() di Flask, che può essere utilizzata per creare risposte di errore HTTP. Modifica la seconda riga del file per importare anche questa funzione:

from markupsafe import escape
from flask import Flask, abort

Quindi modifica la funzione di visualizzazione greet_user() come segue:

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

Utilizzi try sopra per testare l’espressione return per gli errori. Se non si è verificato alcun errore, il che significa che user_id ha un valore che corrisponde a un indice nella lista users, l’applicazione risponderà con il saluto appropriato. Se il valore di user_id è al di fuori dell’intervallo della lista, verrà sollevata un’eccezione IndexError e utilizzi except per catturare l’errore e rispondere con un errore HTTP 404 utilizzando la funzione di supporto Flask abort().

Ora, con il server di sviluppo in esecuzione, visita di nuovo l’URL:

http://127.0.0.1:5000/users/3

Questa volta vedrai una pagina di errore standard 404 che informa l’utente che la pagina non esiste.

Alla fine di questo tutorial, il tuo file app.py sarà simile a questo:

from markupsafe import escape
from flask import Flask, abort

app = Flask(__name__)


@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

Ora hai una idea generale di come utilizzare il debugger di Flask per risolvere i tuoi errori e aiutarti a determinare l’azione appropriata per correggerli.

Conclusione

Ora hai una comprensione generale di cosa sia Flask, come installarlo e come utilizzarlo per scrivere un’applicazione web, come eseguire il server di sviluppo e come utilizzare route e funzioni di visualizzazione per mostrare diverse pagine web che servono scopi specifici. Hai anche imparato a utilizzare route dinamiche per consentire agli utenti di interagire con la tua applicazione web tramite l’URL e come utilizzare il debugger per risolvere errori.

Se desideri leggere di più su Flask, dai un’occhiata alla pagina del tema Flask.