Flask è un mini-framework in Python che viene utilizzato per lo sviluppo web. Date le sue piccole dimensioni e le sue ottime capacità, Flask è un ottimo strumento per creare i propri siti web in modo dinamico ed interattivo. Inoltre grazie alla sua versatilità e allo stesso tempo semplicità, si dimostra un’ottima soluzione per implementare un Web server su Raspberry Pi.
In questo articolo vedremo come installare Flask sul nostro Raspberry Pi e illustreremo alcuni concetti base per cominciare a lavorarci sopra.
[wpda_org_chart tree_id=27 theme_id=50]
Premesse prima dell’installazione di Flask
Creazione di un nuovo ambiente Raspi dedicato (una nuova SD card)
Per evitare problemi di conflittualità e cominciare a lavorare in un ambiente pulito, consiglio vivamente di utilizzare per l’installazione di Flask un nuovo ambiente, creado una nuova SD card.
Inoltre in questo modo sarà possibile clonare l’ambiente su cui stiamo lavorando (clonazione della SD card) in pochi minuti, e ripristinare il tutto in maniera facile e veloce qualora si dovessero riscontrare problemi troppo lunghi o si dovessero commettere errori non facilmente risolvibili ( capita a volte 😉 ).
In questo esempio si farà riferimento a Python 3.
Per riferimento vi passo questo HOW-TO che vi potrebbe essere utile:
Abilitare SSH
Come configurazione di default, Raspberry ha SSH disabilitato, quindi se vogliamo operare in remoto sarà necessario abilitarlo.
Create un file vuoto nella partizione di boot e chiamatelo ssh.
Utilizzate l’utility raspi-config per abilitare SSH.
Per effettuare al meglio questa operazione vi consiglio di andare a vedere questo HOW-TO:
Trovare l’indirizzo IP
Per conoscere l’indirizzo IP assegnato dalla nostra rete a Raspberry potete lanciare il comando
ifconfig
Molto probabilmente avrà un indirizzo di questo tipo 192.168.x.x
Modificare la password
Quando si abilita SSH su Raspberry, si apre in realtà una porta di accesso al nostro sistema, sarà quindi necessario modificare la password di default di Raspberry “rapberry” in una differente.
Per modificare la password su Raspberry lanciate il comando:
passwd
Espansione del File system
Un’altra operazione da effettuare ogni volta che installiamo una nuova immagine di Raspbian su una scheda SD è quella di espandere il file system. Infatti, spesso lo spazio disponibile sulla scheda SD è di gran lunga maggiore rispetto a quella impostata nell’immagine che abbiamo scaricato.
Quindi per espandere il file system, lanciate il comando:
sudo raspi-config
Poi selezionate Advanced ed in seguito Expand Filesystem.
Aggiornamento del sistema
E’ naturale che l’immagine che abbiamo installato sulla scheda SD non è certamente la più recente, ma risale ad un instante preciso in cui è stata rilasciata una particolare release. Per aggiornare Raspbian alla versione più recente possibile, lanciamo i seguenti comandi:
sudo apt-get update sudo apt-get -y upgrade
Questa procedura potrebbe richiedere svariati minuti (è il momento di una pausetta…che dite? 😉 )
Installazione di pip
Una volta che Raspbian è pronto e ben aggiornato, è giunto il momento di installare il package manager per installare e gestire i nostri pacchetti Python. Dato che faremo riferimento alla versione 3 di Python, installeremo il pip corrispondente.
Da console lanciate il seguente comando:
sudo apt-get -y install python3-pip
Installazione di Flask
Finalmente siamo giunti all’installazione di Flask…. Sarà un lavoro difficile?
Ecco il comando per eseguire l’installazione:
sudo pip3 install flask
Quando dal terminare riceverete il messaggio “Successfully installed flask” allora vorrà dire che tutto sarà andato correttamente. E’ stato davvero molto semplice…. non trovate? 😉
Realizziamo un sito di test
Il lavoro interessante comincia qui. La prima cosa da fare è quella di creare un sito di test che chiameremo mySite. Sembra strano, ma creare un sito la prima cosa da fare è quella di creare una cartella di nome mySite.
mkdir mySite cd mySite
Adesso che siete all’interno della nuova directory create uno script in Python e chiamatelo con il nome del sito, appunto mySite.py.
sudo nano mySite.py
Scrivete all’interno del file il seguente codice:
from flask import Flask
app = Flask( __name__ )
@app .route( "/" )
def index():
return "<html><body><h1>This is my Site (Flask)</h1></body></html>
if __name__ == "__main__" :
app.run( host = '0.0.0.0' , debug = True )Se avete conoscenze di HTML, potete vedere che all’interno dello script abbiamo definito la pagina da visualizzare attraverso una stringa contenente del codice HTML.
Adesso lanciamo lo script
python3 mySite.py
Aprite un browser qualsiasi e ricercate il vostro indirizzo IP seguito dal numero della porta 5000, che è la porta di default utilizzata da Flask.
Flask come web application server
Come abbiamo visto abbiamo realizzato la pagine di Home del sito. La nostra “index.html” per intenderci, solo che in questo caso invece di essere statica, viene generata dinamicamete dall’interpreta Python ogni volta che viene chiamata ed è epressa dal file mySite.py.
Infatti Flask si potrebbe considerare un vero e proprio web application server, cioè uno strumento con cui si possono gestire diverse applicazioni in grado di generare pagine web dinamiche facendo uso di un linguaggio di programmazione (in questo caso Python) invece che scrivere pagine HTML statiche. Questo ci permette di realizzare pagine web con contenuti variabili a seconda delle diverse scelte dell’utente e quindi la possibilità di creare siti professionali.
Aggiungere delle pagine al sito
Adesso che abbiamo realizzato la Home page del sito, sarà necessario cominciare ad aggiungere le varie pagine di contenuti. Per fare questo si continua a procedere in maniera programmatica, cioè attraverso la stesura di codice Python.
Prima di cominciare, è interessante porre attenzione su questo aspetto. Lasciate il programma mySite.py in esecuzione su una sessione di terminale. Aprite una nuova sessione su un altro terminale per modificare il file mySite.py.
Non appena salverete il file, le modifiche saranno lette in tempo reale dal web server, che saranno immediatamente attive sul browser, senza dover interrompere e far ripartire l’esecuzione del programma. Questo è molto comodo durante la fase di sviluppo.
Adesso effettuate le modifiche al file mySite.py come riportato sotto:
from flask import Flask
app = Flask( __name__ )
@app .route( "/" )
def index():
return "<html><body><h1>This is my Site (Flask)</h1><p><a href='contact'>Contact</a></p></body></html>"
@app .route( "/contact" )
def contact():
return "<html><body><h1>This is the Contact page</h1></body></html>"
if __name__ == "__main__" :
app.run( host = '0.0.0.0' , debug = True )Salvate il file. Questa volta dal browser accedendo alla pagina Home, troverete un link che vi rindirizzerà alla nuova pagina.
Cliccando sul link Contact, caricherete sul browser la nuova pagina.
Dall’esempio si capisce facilmente che per aggiungere delle pagine è necessario definire delle routes, ad ognuna delle quali verrà assegnato un particolare “Url” di riferimento ed una stringa di testo contenente il codice HTML da visualizzare.
I path da utilizzare nell’anchor link di HTML devono essere assoluti senza / all’inizio.
<a href="contact">
mentre per quanto riguarda le route è necessario inserire il simbolo / come root del sito web.
@app route( "/contact" )
questo nel path del browser corrisponderà a
Ridate un’occhiata alla console dove avete lanciato l’esecuzione di mySite.py la prima volta. Vedrete una serie di messaggi e codici HTTP molto utili per capire il funzionamento delle chiamate dai browser e per conoscere eventuali errori di codice.
Aggiungere più routes
La situazione che abbiamo visto in precedenza era solo un semplice esempio per meglio comprendere il funzionamento di Flask e di come questo effettui il routing delle chiamate delle varie pagine da browser. In realtà, la gestione delle pagine è un po’ più complessa, ma è importante arrivarci per gradi.
Per esempio, la prima cosa che si fa oggi è quella di separare il più possibile il contenuto statico (HTML appunto) e quello dinamico (variabili e funzioni in Python). A tale scopo per gestire ed isolare il contenuto statico di una pagina (che spesso appunto si ripete in diverse pagine HTML) si utilizzano i template. Mentre per la gestione del contenuto dinamico si ha un approccio più programmatico attraverso l’utilizzo di funzioni e variabili. I dati da passare alle pagine richiamate sono spesso strutturati, un buon esempio sono proprio le liste.
Vediamo l’esempio precedente con questo nuovo approccio e qualche aggiunta.
from flask import Flask, render_template
app = Flask( __name__ )
@app .route( "/" )
def index():
data = [ 'Index', 'Home', 'red' ]
return render_template('template.html', data = data)
@app .route( "/contact" )
def contact():
data = [ 'Contact', 'Contact', 'blue']
return render_template('template.html', data = data)
if __name__ == "__main__" :
app.run( host = '0.0.0.0' , debug = True )Come possiamo vedere per ogni route viene utilizzata la funzione render_template() che si occupa di restituire il contenuto statico HTML del file template.html all’interno del quale le parti dinamiche occupate dalle variabili modificate con i corrispondenti valori contenuti in data.
Create all’interno della directory MySite una nuova directory templates.
mkdir templates cd templates sudo nano template.html
Infatti per default Flask cercherà i templati al suo interno. Creiamo quindi al suo interno il file template.html.
<! DOCTYPE html>
<html>
<head>
<title>{{ data[0] }}</title>
</head>
<body>
<h1>This is the {{ data[1] }} page</h1>
<p style='color: {{ data[2] }} ;'>Text to show</p>
</body>
</html>Eseguendo il codice si potranno vedere come i valori occupati dalle variabili nel template varino a seconda della pagina chiamata (contenuto dinamico).
Carichiamo sul browser l’Home page
E poi carichiamo la pagina dei contatti.
Come possiamo vedere anche se il template è lo stesso, il contenuto che apparirà sulle pagine web sarà differente
Inserimento delle condizioni nei templates
Nell’esempio precedente abbiamo cominciato davvero a comprendere le alte potenzialità delle pagine dinamiche. Infatti la possibilità di utilizzare i template come base statica e l’introduzione delle variabili all’interno di essi rende Flask uno strumento davvero potente. Ma la parte dinamica delle pagine non si limita a questo. Moltissime altre funzionalità possono essere aggiunte all’interno dei template per creare contenuto dinamico. Tra tutte queste, le condizioni sono forse l’aspetto più utile e comune.
Vediamolo insieme con un ulteriore esempio.
Nell’esempio precedente abbiamo utilizzato un unico template.html per entrambe le pagine. Ma nel fare questo abbiamo perso il link della Home page che portava alla pagina dei contatti. Questa caratteristica è necessaria solo per la Home page, ma noi vogliamo continuare ad usare un solo template. Come fare allora?
Attraverso l’uso degli operatori condizionali. Apri e aggiungi le modiche a template.html .
<! DOCTYPE html>
<html>
<head>
<title>{{ data[0] }}</title>
</head>
<body>
<h1>This is the {{ data[1] }} page</h1>
<p style='color: {{ data[2] }} ;'>Text to show</p>
{% if data[1] == 'Home' %}
<p><a href='Contact'>Contact</a></p>
{% else %}
<p><a href='/'>Come back to Home page</a></p>
{% endif %}
</body>
</html>Ricarichiamo le pagine precedenti e vedremo la situazione dei link ripristinata.
Modalità di Debug
Nello script mySite.py possiamo vedere che l’opzione debug è impostata su True. Questo significa che Flask si attiverà in Debug Mode in modo da visualizzare eventuali messaggi di errore nel caso ci fosse qualche problema durante il caricamento della pagina. In questo modo sarà più semplice controllare lo sviluppo del codice in Python ed eventuali errori commessi durante la programmazione.
Una volta che il sito avrà raggiunto la sua stabilità, potrai rimuovere questa modalità impostando l’opzione debug su False.
Ulteriori approfondimenti
Se l’argomento ti ha stuzzicato l’interesse e vuoi continuare ad approfondire l’argomento, ti consiglio dapprima di rafforzarti nella conoscenza di HTML5, JavaScript e CSS3. Infatti molti di noi pur avendo familiarità con questo argomento, abbiamo conoscenze non così aggiornate. Negli ultimi anni l’HTML si è molto aggiornato creando nuove regole e standard da seguire (HTML5) e la stessa cosa per il CSS ed il JavaScript ad esso correlati.
Libro Suggerito
Un grosso problema è il tempo da dedicare a questi studi. Recentemente ho avuto modo di avere tra le mani una coppia di libri che mi hanno permesso in pochissimo tempo (non 24 ore si intende… 😉 ) di aggiornarmi su queste tecnologie, in modo facile ed intuitivo.
Mentre per chi ama approfondire e sviluppare il web a 360° allora dovrà certamente aggiornarni anche per quanto riguarda JavaScript e le jQuery.
Libro Suggerito:
Conclusioni
In questo articolo introduttivo hai visto cosa è Flask e alcuni suoi concetti basi su come creare le pagine web in modo dinamico. Si è inoltre visto come sia facile installarlo su Raspberry e sono state mostrate le regole base ci creazione delle pagine. Se l’argomenti ti interessa, consiglio di prendere visione di alcuni articoli online disponibili in rete per una trattazione più approfondita. Comunque a presto seguiranno alcuni articoli di carattere più approdondito che tratteranno lo sviluppo Web su Flask utilizzando il linguaggio Python. Molti saranno i tutorial e gli esempi che ti verranno mostrati. A presto allora!