Ciao a tutti e benvenuti in questa nuova guida su come utilizzare Flask, un modulo leggero per Python utilizzato per la creazione di applicazioni web.
Che cos’è Flask?
Flask è un micro-framework per Python facile da installare e da usare ed è utilizzato da compagnie come: Pinterest, LinkedIn, ed anche dal sito della campagna elettorale di Obama.
Se non sapete cosa sia un framework per la creazione di applicazioni web, potete immaginare un insieme di programmi con lo scopo di facilitare la creazione di servizi web come web server, API ed altro.
Vediamo ora come creare la nostra prima web app con Flask.
La guida sarà divisa nelle seguenti parti:
- Come installare Flask sul vostro pc
- Creare un semplice web server Hello world
- Come servire una pagina HTML
- Come collegare file statici come CSS e JavaScript
- Come utilizzare variabili python all’interno del codice HTML
Installare Flask sul vostro PC
Installare Flask è molto semplice: Possiamo fare uso del package manager pip.
Se non avete pip potete installarlo eseguendo il comando dal Vostro Terminal o cmd.:
sudo easy_install pip
Se avete pip installato sul vostro PC, potete installare Flask con il seguente comando:
sudo pip install Flask
Per ulteriori informazioni su come installare Flask potete fare riferimento a questa guida: Come installare Flask
Per verificare se Flask è correttamente installato sul vostro sistema, potete eseguire una console interattive di Python con il comando: Python nel terminal. Una volta aperta la console potete importare Flask in questo modo:
>>> from flask import Flask
Se questo comando non mostra errori, avete installato Flask correttamente.
Come creare un semplice server Hello world con Flask
Ora che abbiamo Flask installato sul nostro PC, possiamo creare la nostra prima web app. In questo esempio andremo a creare un web server che ci mostrerà la scritta Hello world quando facciamo una richiesta all’URL localhost:5000/
Come prima cosa create un nuovo file con estensione .py per esempio app.py
All’interno di questo file andiamo ad inserire:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()
Con questo codice stiamo:
- Importando Flask
- Creando una nuova app
- Definendo una route all’indirizzo home (‘/’) e collegarla alla funzione hello()
- Il metodo restituisce la parola Hello world al browser.
Possiamo eseguire il nostro server con il comando:
python app.py
Dal vostro browser navigate all’indirizzo localhost:5000 e dovreste vedere la parola Hello world nel browser. Se avete riscontrato qualche problema con questa parte della guida, commentate in basso e cercherò di aiutarvi :)
Come mostrare una pagina HTML con Flask
Mostrare del testo all’utente non è molto entusiasmante. Una funzione molto più utile sarebbe una che mostra una pagina HTML nel browser. Per fare questo dobbiamo utilizzare la funzione render_template.
Questa funzione prende come parametro, il nome della pagina HTML e la invia automaticamente al browser.
Vediamo come restituire una pagina HTML con Flask.
Flask utilizza un sistema ben definito per servire file HTML. Per poter restituire un file HTML in modo corretto dobbiamo creare una cartella nella stessa directory del file app.py chiamata templates:
mkdir templates
All’interno della cartella templates posizioniamo il nostro file HTML, in questo caso chiamato index.html
I questo file, inserite il codice HTML che preferite nel file e salvate.
Una volta creato e salvato il file HTML, possiamo modificare il codice Python usato nel passo precedente nel seguente modo:
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def hello():return render_template('index.html') if __name__ == "__main__":app.run()
Ora se riavviamo il server, possiamo vedere nel browser la pagina HTML che abbiamo creato. (per riavviare il server fare Ctrl + c e poi di nuovo python app.py nel terminal)
Come collegare file CSS e JavaScript con Flask
Ora vediamo come dare un po’ di stile e funzionalità alla nostra pagina HTML.
Come per le pagine HTML, Flask utilizza una struttura di directory definita anche per i file statici come CSS e JS. Questi tipi di file vanno posizionati all’interno di una cartella chiamata: static.
Andiamo a creare questa directory nella stessa directory del file app.py
All’interno di questa directory creiamo un file .js ed un file .css
La struttura del progetto dovrebbe essere del tipo:
app.py /templatesindex.html /staticapp.jsmain.css
Per collegare il file CSS al file HTML dobbiamo utilizzare all’interno del file HTML una funzione chiamata url_for(). Questa funzione specifica al server Flask la nostra intenzioni di utilizzare file statici all’interno della cartella /static.
Inseriamo questo codice all’interno del tag <head> della nostra pagina HTML:
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='main.css') }}">
Per linkare il file JS usiamo questo codice nella pagina HTML
<script type="text/javascript" src="{{ url_for('static',filename='app.js') }}"></script>
inserite delle regole CSS e dei console.log() all’interno di file CSS e JS
Ora se riavviamo il server e carichiamo l’indirizzo localhost:5000 nel nostro browser, possiamo vedere gli effetti del codice CSS e del codice JS nella console del browser.
Se avete problemi con qualsiasi di questi passi commentate in basso e cercherò di aiutarvi :)
Come utilizzare le variabili all’interno del codice HTML
Ora che abbiamo visto come dare stile e funzionalità alla nostra pagina web, possiamo vedere come utilizzare le variabili all’interno del nostro codice HTML per rendere la nostra pagina statica un po’ più dinamica.
Se venite dal mondo della programmazione PHP sarete abituati ad utilizzare le variabili all’interno del codice HTML. Con Flask e Python si può fare la stessa cosa. Vediamo un esempio dove mostriamo un nome nel browser proveniente da una variabile Python.
La funzione render_template() accetta una serie di parametri che possiamo utilizzare per passare dei valori dal codice Python al codice HTML. Per esempio se vogliamo passare il nome Marco alla pagina HTML possiamo modificare il file app.py nel seguente modo:
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def hello():return render_template('index.html', nome="Marco") if __name__ == "__main__":app.run()
Come vedete nella funzione render_template passiamo una variabile chiamata nome con un valore di 'Marco'.
Per utilizzare questa variabile nella nostra pagina HTML, dobbiamo usare la notazione a doppia parentesi graffa.
Per esempio:
<h1>Ciao {{nome}}</h1>
Se salvate il tutto e riavviate il server, dovreste vedere la scritta Ciao Marco nel vostro browser all’indirizzo localhost:5000
Ci siamo ora siete in grado di creare semplici applicazioni web con Python Flask.
Potete trovare il codice completo per la guida, nella nostra repository di GitHub.
