Esercitazione: Usare il framework Web Flask in Visual Studio

Questo articolo è il primo passaggio di una serie di esercitazioni in tre parti che illustra come usare Flask in Visual Studio. Flask è un framework Python leggero per le applicazioni Web che fornisce le nozioni di base per il routing url e il rendering delle pagine. Flask è denominato framework "micro" perché non fornisce direttamente funzionalità come la convalida dei moduli, l'astrazione del database, l'autenticazione e così via. Queste funzionalità vengono invece fornite da pacchetti Python speciali denominati estensioni Flask. Le estensioni si integrano perfettamente con Flask in modo che vengano visualizzate come se fossero parte di Flask stesso. Ad esempio, Flask non fornisce un motore di modelli di pagina. La creazione di modelli è fornita da estensioni come Jinja e Jade, come illustrato in questa esercitazione.

Nel passaggio 1 dell'esercitazione si apprenderà come:

• Creare una soluzione di Visual Studio e un progetto Flask
• Esaminare il codice boilerplate del progetto ed eseguire il progetto
• Creare un repository Git per gestire le modifiche apportate al progetto Flask
• Usare i controlli del codice sorgente Git
• Creare un ambiente virtuale per il progetto Flask

Questa esercitazione è diversa da Flask Quickstart. Altre informazioni su Flask e su come usare i modelli di progetto Flask per fornire un punto di partenza più completo per i progetti. I modelli installano automaticamente il pacchetto Flask quando si crea un progetto, mentre la guida introduttiva ha illustrato come installare manualmente il pacchetto.

Prerequisiti

• Visual Studio 2022 o versione successiva in Windows con le opzioni seguenti selezionate nel programma di installazione di Visual Studio:

  • Nella scheda Carichi di lavoro selezionare l'opzione sviluppo Python . Per altre informazioni, vedere Installare il supporto python in Visual Studio.

  • Nella scheda Singoli componenti in Strumenti di codice selezionare l'opzione Git per Windows .

I modelli di progetto Flask sono inclusi in tutte le versioni precedenti di Python Tools per Visual Studio. I dettagli del modello potrebbero differire dalle descrizioni di questa esercitazione.

Visual Studio per Mac non è supportato. Per altre informazioni, vedere Cosa accade a Visual Studio per Mac? Visual Studio Code in Windows, Mac e Linux funziona bene con Python tramite le estensioni disponibili.

Creare una soluzione di Visual Studio e un progetto Flask

Nel passaggio 1 di questa esercitazione si crea una singola soluzione di Visual Studio per contenere due progetti Flask separati. I progetti vengono creati usando modelli di progetto Flask diversi inclusi in Visual Studio. Mantenendo i progetti nella stessa soluzione, è possibile passare facilmente da un file all'altro per il confronto.

Seguire questa procedura per creare la soluzione e un progetto Web Flask:

1. In Visual Studio selezionare File>nuovo>progetto e cercare "Flask". Selezionare quindi il modello Progetto Web Flask vuoto e selezionare Avanti.

   

2. Configurare il nuovo progetto e la soluzione:

   1. Impostare Il nome del progetto di Visual Studio su BasicProject. Questo nome viene usato anche per il progetto Flask.

   2. Specificare il percorso per Visual Studio per salvare la soluzione e il progetto.

   3. Deselezionare l'opzione Inserisci soluzione e progetto nella stessa directory .

   4. Impostare il nome della soluzione su LearningFlask. La soluzione funge da contenitore per più progetti in questa serie di esercitazioni.

3. Fare clic su Crea.

4. Dopo qualche istante, Visual Studio visualizza il file di specifica del pacchetto Python "requirements.txt" rilevato nel progetto "BasicProject".:

   

   La finestra di dialogo indica che il modello selezionato include un filerequirements.txt che è possibile usare per creare un ambiente virtuale per il progetto.

5. Selezionare la X a destra per chiudere il prompt. Più avanti in questa esercitazione si crea l'ambiente virtuale e si verifica che il controllo del codice sorgente escluda l'ambiente. L'ambiente può sempre essere creato successivamente dal file requirements.txt.

Esaminare i controlli Git

Nella procedura successiva si acquisisce familiarità con il supporto di Visual Studio per il controllo del codice sorgente Git.

1. Per eseguire il commit del progetto nel controllo del codice sorgente locale, selezionare Aggiungi al controllo del codice sorgente in basso a destra nella finestra principale di Visual Studio e quindi selezionare Git:

   

   Viene visualizzata la finestra Crea repository Git in cui è possibile creare ed eseguire il push di un nuovo repository.

2. Dopo aver creato un repository, la barra dei controlli Git viene visualizzata in basso a destra nella finestra principale di Visual Studio:

   

   Da sinistra a destra, la barra dei controlli Git mostra il numero di commit in uscita/in ingresso (frecce #/#), il numero di modifiche di cui non è stato eseguito il commit (matita #), il nome del ramo corrente e il nome del repository corrente. I controlli Git sono disponibili anche nel menu Git sulla barra degli strumenti principale.

3. Sulla barra dei controlli Git selezionare le modifiche (matita #) per aprire la finestra Modifiche Git . È anche possibile selezionare Visualizza>modifiche Git (CTRL+O, CTRL+G):

   

   Questa finestra mostra i dettagli relativi a eventuali modifiche non sottoposte a commit, incluse le modifiche accantonate. Poiché il progetto appena creato è stato automaticamente salvato nel controllo del codice sorgente, non vengono visualizzate modifiche in sospeso.

4. Nella barra dei controlli Git selezionare i commit (frecce #/#) e quindi selezionare Visualizza tutti i commit:

   

   Verrà visualizzata la finestra del repository Git . È anche possibile selezionare Visualizza>repository Git (CTRL+O, CTRL+R):

   

   Questa finestra mostra i dettagli del repository corrente nel riquadro sinistro e il ramo corrente con commit in uscita e in entrata nel riquadro destro.

   Per visualizzare la visualizzazione delle differenze per il file, selezionare un commit nel riquadro centrale. La versione precedente viene visualizzata sul lato sinistro e la versione rivista mostra sul lato destro. I dettagli contengono anche l'autore della modifica, il responsabile del commit delle modifiche e il messaggio di commit.

Durante l'esecuzione di questa esercitazione, è possibile usare periodicamente i controlli Git in Visual Studio per eseguire il commit e il push delle modifiche. Questa guida ti ricorda nei momenti opportuni.

Usare il controllo del codice sorgente dall'inizio

L'uso del controllo del codice sorgente dall'inizio di un progetto offre diversi vantaggi. Quando si usa il controllo del codice sorgente dall'inizio di un progetto, soprattutto se si usa anche un repository remoto, si ottiene un normale backup fuori sede del progetto. A differenza della gestione di un progetto solo in un file system locale, il controllo del codice sorgente fornisce anche una cronologia delle modifiche completa e la possibilità di ripristinare un singolo file o l'intero progetto a uno stato precedente. La cronologia delle modifiche consente di determinare la causa delle regressioni (errori di test).

Il controllo del codice sorgente è essenziale se più persone lavorano su un progetto, perché gestisce le sovrascrizioni e fornisce la risoluzione dei conflitti. Il controllo del codice sorgente è fondamentalmente una forma di automazione, consente di automatizzare compilazioni, test e gestione delle versioni. Si tratta del primo passaggio nell'uso di Azure DevOps per un progetto e, poiché le barriere all'ingresso sono così basse, non c'è davvero motivo di non usare il controllo del codice sorgente fin dall'inizio.

Per altre informazioni sul controllo del codice sorgente come automazione, vedere The Source of Truth: The Role of Repository in DevOps, un articolo di MSDN Magazine scritto per le app per dispositivi mobili che si applicano anche alle app Web.

Impedire a Visual Studio di eseguire il commit automatico dei progetti

Seguire questa procedura per impedire a Visual Studio di eseguire il commit automatico di un nuovo progetto:

1. Aprire il riquadro Opzioni strumenti> ed espandere la sezione Tutte le impostazioni>controllo> del codice sorgenteImpostazioni Git.

2. Deselezionare l'opzione Commit changes after merge by default.

Creare un ambiente virtuale ed escludere il controllo del codice sorgente

Dopo aver configurato il controllo del codice sorgente per il progetto, è possibile creare l'ambiente virtuale con i pacchetti Flask necessari richiesti dal progetto. È quindi possibile usare la finestra Modifiche Git per escludere la cartella dell'ambiente dal controllo del codice sorgente.

1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo Ambienti Python e scegliere Aggiungi ambiente.

   

2. Nella finestra di dialogo Aggiungi ambiente selezionare Crea per accettare i valori predefiniti. È possibile modificare il nome dell'ambiente virtuale, se necessario, che modifica il nome della relativa sottocartella, ma env è una convenzione standard.

   

3. Se Visual Studio richiede privilegi di amministratore, fornire il consenso. Attendere alcuni minuti mentre Visual Studio scarica e installa i pacchetti. Per Flask e le relative dipendenze, il processo può richiedere l'espansione di circa 1.000 file in oltre 100 sottocartelle. È possibile visualizzare lo stato di avanzamento nella finestra Output di Visual Studio.

4. Nella barra dei controlli Git selezionare le modifiche di cui non è stato eseguito il commit (che ora mostra 99+) per aprire la finestra Modifiche Git :

   

   La creazione dell'ambiente virtuale comporta migliaia di modifiche, ma non è necessario includerle nel controllo del codice sorgente. L'utente o chiunque altro che cloni il progetto può sempre ricreare l'ambiente usando il file requirements.txt .

5. Per escludere l'ambiente virtuale dal controllo del codice sorgente, nella finestra Modifiche Git fare clic con il pulsante destro del mouse sulla cartella env e scegliere Ignora questi elementi locali:

   

   Dopo aver escluso l'ambiente virtuale, le uniche modifiche rimanenti vengono apportate al file di progetto (.py) e al file con estensione gitignore , che contiene una voce aggiunta per la cartella dell'ambiente virtuale.

   Per visualizzare la visualizzazione delle differenze per il file con estensione gitignore , nella finestra Modifiche Git fare doppio clic sul file.

6. Nella finestra Modifiche Git immettere un messaggio di commit, ad esempio "Modifiche iniziali del progetto":

   

7. Nel menu a discesa Commit selezionare Commit Staged e Push.

È possibile aprire la finestra Repository Git e confermare che i commit di staging vengono visualizzati nella cronologia locale per il ramo corrente.

Comprendere lo scopo degli ambienti virtuali

Un ambiente virtuale è un ottimo modo per isolare le dipendenze esatte dell'applicazione. Questo metodo di isolamento evita i conflitti all'interno di un ambiente Python globale e facilita sia i test che la collaborazione. Nel corso del tempo, man mano che si sviluppa un'app, si apportano invariabilmente molti pacchetti Python utili. Mantenendo i pacchetti in un ambiente virtuale specifico del progetto, è possibile aggiornare facilmente il file direquirements.txt del progetto che descrive tale ambiente, incluso nel controllo del codice sorgente. Quando si copia il progetto in altri computer, inclusi server di compilazione, server di distribuzione e altri computer di sviluppo, è facile ricreare l'ambiente. È possibile ricreare l'ambiente usando solo il file requirements.txt , motivo per cui l'ambiente non deve essere incluso nel controllo del codice sorgente. Per altre informazioni, vedere Usare ambienti virtuali.

Rimuovere l'ambiente virtuale sotto il controllo del codice sorgente

È possibile rimuovere un ambiente virtuale dopo che è sotto il controllo del codice sorgente. Segui questi passaggi:

1. Modifica il file .gitignore per escludere la cartella:

   1. Aprire il file selezionando File>Apri>file.

      È anche possibile aprire il file da Team Explorer. Nella pagina Impostazioni selezionare Impostazioni del Repository. Vai alla sezione Ignorare & File degli Attributi e selezionare il link Modifica accanto a .gitignore.

   2. Individuare la sezione alla fine con il commento # Python Tools for Visual Studio (PTVS).

   3. Dopo questa sezione, aggiungere una nuova riga per la cartella dell'ambiente virtuale, ad esempio /BasicProject/env.

2. Aprire una finestra di comando e passare alla cartella (ad esempio BasicProject) con la cartella dell'ambiente virtuale, ad esempio env.

3. Eseguire il git rm -r env comando per rimuovere l'ambiente virtuale attualmente sotto il controllo del codice sorgente.

4. Esegui il commit delle modifiche con il comando git commit -m 'Remove venv' o esegui il commit dalla pagina Modifiche di Team Explorer.

Esaminare il codice boilerplate

In questa sezione viene esaminato il codice boilerplate nel file di progetto (.py) creato da Visual Studio in base alla selezione del modello.

1. Aprire Esplora soluzioni per visualizzare i file di soluzione e di progetto. Il progetto iniziale contiene solo due file, app.py e requirements.txt:

   

   Il filerequirements.txt specifica le dipendenze del pacchetto Flask. La presenza di questo file è ciò che invita a creare un ambiente virtuale durante la creazione del progetto.

   Il singolo file app.py contiene il codice boilerplate per un progetto Web Flask vuoto.

2. Aprire il file app.py nell'editor ed esaminare la prima sezione, un'istruzione import per Flask.

   Questa istruzione crea un'istanza della Flask classe , assegnata alla variabile app. Questa sezione assegna anche una wsgi_app variabile (utile quando si esegue la distribuzione in un host Web, ma non usata per il momento):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

3. La seconda sezione da esaminare si verifica alla fine del file. Questa sezione contiene codice facoltativo che è possibile usare per avviare il server di sviluppo Flask.

   È possibile definire il codice per usare valori di porta e host specifici acquisiti dalle variabili di ambiente oppure usare il valore localhost:55551di porta e host predefinito .

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

4. La terza sezione del codice da esaminare assegna una funzione a una route URL, ovvero la funzione fornisce la risorsa identificata dall'URL.

   Le route vengono definite utilizzando il decoratore @app.route di Flask con un argomento che è l'URL relativo dalla radice del sito. Come si può notare nel codice, la funzione restituisce solo una stringa di testo, sufficiente per il rendering di un browser. Nei passaggi successivi di questa serie di esercitazioni si aggiorna il codice per eseguire il rendering di pagine più avanzate con HTML.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Comprendere l'argomento name nella classe Flask

L'argomento name in una classe Flask è il nome del modulo o del pacchetto dell'applicazione. Flask usa il nome per determinare dove cercare modelli, file statici e altre risorse che appartengono all'app. Per le app contenute in un singolo modulo, __name__ è sempre il valore appropriato. Il nome è importante anche per le estensioni che richiedono informazioni di debug. Per altre informazioni e altri argomenti, vedere la documentazione della classe Flask (flask.pocoo.org).

Usare più decoratori di route

Una funzione può avere più di un decoratore di route. È possibile usare tanti decoratori quanti ne vuoi, se la stessa funzione serve a più route. Ad esempio, per usare la funzione sia per il percorso hello che per il percorso /, utilizzare il codice seguente:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Usare route URL variabili e parametri di query

Flask può essere usata con route URL variabili e parametri di query. In una route si contrassegna qualsiasi variabile con l'attributo <variable_name> . Flask passa la variabile alla funzione usando un argomento denominato nel percorso URL. Ad esempio, una route sotto forma di /hello/<name> genera un argomento stringa denominato name alla funzione . I parametri di query sono disponibili tramite la request.args proprietà , in particolare tramite il request.args.get metodo . Nel codice seguente ne viene illustrato un esempio:

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Per modificare il tipo, anteporre alla variabile int, float, path (che accetta slash per delineare i nomi delle cartelle) e uuid. Per altre informazioni, vedere Regole delle variabili nella documentazione di Flask.

Generare i requisiti dopo l'installazione del pacchetto

Visual Studio può generare un filerequirements.txt da un ambiente virtuale dopo l'installazione di altri pacchetti.

• In Esplora soluzioni espandere il nodo Ambienti Python , fare clic con il pulsante destro del mouse sull'ambiente virtuale e selezionare Genera requirements.txt.

È consigliabile usare periodicamente questo comando quando si modifica l'ambiente. Fai il commit delle modifiche apportate al file requirements.txt nel controllo del sorgente insieme a qualsiasi altra modifica del codice che dipendono da quell'ambiente. Se si configura l'integrazione continua in un server di compilazione, è necessario generare il file ed eseguire il commit delle modifiche ogni volta che si modifica l'ambiente.

Eseguire il progetto

A questo momento è possibile eseguire il progetto in Visual Studio seguendo questa procedura:

1. In Visual Studio selezionare Debug>Avvia debug (F5) oppure selezionare server Web sulla barra degli strumenti principale (il browser visualizzato potrebbe variare):

   

2. Entrambi i comandi assegnano un numero di porta casuale alla variabile di ambiente PORT ed esegue il file di app.py Python.

   Il codice avvia l'applicazione usando tale porta all'interno del server di sviluppo Flask.

   Se Visual Studio pubblica il messaggio Impossibile avviare il debugger e indica che non viene trovato alcun file di avvio, fare clic con il pulsante destro del mouse sul file app.py in Esplora soluzioni e scegliere Imposta come file di avvio.

3. All'avvio del server, viene visualizzata una finestra della console per visualizzare il log del server. Visual Studio apre automaticamente un browser su http://localhost:<port>, dove dovrebbe essere visualizzato il messaggio generato dalla funzione hello.

   

4. Al termine, chiudere la finestra della console che arresta il server di sviluppo Flask. È anche possibile selezionare Debug>Arresta debug.

Confrontare i comandi di debug con i comandi Python del progetto

Esiste una differenza tra l'uso dei comandi di menu Debug e dei comandi del server elencati nel sottomenu Python del progetto.

Oltre ai comandi di menu Debug e ai pulsanti della barra degli strumenti, è anche possibile avviare il server usando i> comandi PythonStart server o PythonStart debug server nel menu di scelta rapida del progetto.

Entrambi i comandi aprono una finestra della console in cui viene visualizzato l'URL locale (localhost:port) per il server in esecuzione. Tuttavia, è necessario aprire manualmente un browser con tale URL e l'esecuzione del server di debug non avvia automaticamente il debugger di Visual Studio. È possibile collegare un debugger al processo in esecuzione in un secondo momento, se si vuole usare il comando Debug>Connetti a processo .

Passo successivo

Passaggio 2: Creare un'app Flask con visualizzazioni e modelli di pagina