🌐 Modulo 1: Cos'è un Server Web?

Impariamo le basi prima di iniziare con Flask

📚

MODULO
1 di 8

⏱️

TEMPO
45 minuti

🎯

LIVELLO
Principiante

🖥️ Cos'è un Server Web?

Prima di iniziare con Flask, è fondamentale capire cos'è un server web e come funziona la comunicazione tra browser e server.

🤔 Definizione Semplice

Un server web è un programma che:

  • Resta in ascolto su una porta (es. 5000, 8080, 80)
  • Riceve richieste da un browser (o altra applicazione)
  • Elabora la richiesta (legge database, processa dati, ecc.)
  • Risponde inviando HTML, JSON, immagini, ecc.
🔄 Il Ciclo Richiesta-Risposta (Request-Response)

👤 Browser
GET /pagina
Chiede la pagina al server

🖥️ Server
Elabora
Processa la richiesta

🖥️ Server
200 OK + HTML
Invia la risposta

👤 Browser
Visualizza
Mostra il contenuto

💡 Analogia del Ristorante

Pensa al server web come a un ristorante:

  • Cliente (Browser): fa un ordine (richiesta HTTP)
  • Cameriere (Flask): prende l'ordine e lo porta in cucina
  • Cuoco (La tua funzione Python): prepara il piatto (elabora i dati)
  • Piatto (Risposta HTTP): viene servito al cliente

📡 Il Protocollo HTTP

HTTP (HyperText Transfer Protocol) è il "linguaggio" che browser e server usano per comunicare.

Componente Descrizione Esempio
URL Indirizzo della risorsa http://localhost:5000/home
Metodo Tipo di richiesta GET, POST, PUT, DELETE
Headers Metadati della richiesta Content-Type, User-Agent
Body Dati inviati (opzionale) Form data, JSON
Status Code Esito della risposta 200 OK, 404 Not Found, 500 Error
📊 Status Code Comuni

2xx - Successo
200 OK
201 Created
3xx - Redirect
301 Moved
302 Found
4xx - Errore Client
404 Not Found
403 Forbidden
5xx - Errore Server
500 Internal Error
503 Unavailable

🛠️ Setup dell'Ambiente con PyCharm

Prima di scrivere codice, prepariamo correttamente il nostro ambiente di sviluppo.

1
Crea un Nuovo Progetto

  • Apri PyCharm
  • File → New Project
  • Scegli una cartella (es. flask-corso)
  • Seleziona New environment using Virtualenv
  • Clicca su Create

2
Installa Flask

Nel terminale di PyCharm (in basso), digita:

pip install flask

Vedrai l'installazione procedere. Quando finisce, Flask è pronto!

3
Verifica l'Installazione

Controlla che Flask sia installato correttamente:

pip list

Dovresti vedere Flask nella lista dei pacchetti installati.

🎯 Cos'è un Virtual Environment?

Un ambiente virtuale è uno spazio isolato per il tuo progetto dove installi le librerie senza interferire con altri progetti Python sul tuo computer.

Perché è importante?

  • Ogni progetto può avere versioni diverse delle stesse librerie
  • Mantieni il sistema Python pulito
  • Facilita la condivisione del progetto (file requirements.txt)

🚀 Il Tuo Primo Server Web

Ora creiamo il nostro primo mini server web! Sarà incredibilmente semplice ma funzionante.

1
Crea il file principale

In PyCharm, fai clic destro sulla cartella del progetto → New → Python File

Chiamalo app.py

2
Scrivi il codice del server

Digita il seguente codice nel file app.py:

📄 app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Benvenuto nel mio primo server web!'

if __name__ == '__main__':
    app.run(debug=True)

3
Avvia il server

In PyCharm, fai clic destro su app.py → Run 'app'

Oppure usa il terminale:

python app.py

4
Testa nel Browser

Apri il browser e vai su:

http://localhost:5000

Dovresti vedere il messaggio "Benvenuto nel mio primo server web!" 🎉

🔍 Analisi Approfondita del Codice

Ora che hai visto il codice funzionare, analizziamo riga per riga cosa succede dietro le quinte. Capire questi concetti è fondamentale per diventare un esperto di Flask!

📄 app.py - Analisi Completa (10 righe di codice)

Codice completo
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Benvenuto nel mio primo server web!'

if __name__ == '__main__':
    app.run(debug=True)

🎯 Mappa delle Righe

  • Riga 1: Importa la classe Flask dal modulo flask
  • Riga 3: Crea un'istanza dell'applicazione Flask
  • Riga 5: Decoratore che associa la URL '/' alla funzione
  • Righe 6-7: Funzione che gestisce la richiesta alla homepage
  • Righe 9-10: Avvia il server solo se eseguiamo il file direttamente

1
Importazione di Flask

from flask import Flask importa la classe Flask dal modulo flask.

💡 Differenza chiave

from flask import Flask è diverso da import flask:

  • from flask import Flask: Importa SOLO la classe Flask, più efficiente
  • import flask: Importa tutto il modulo, dovresti usare flask.Flask

Analogia: Come quando compri un nuovo elettrodomestico, devi prima toglierlo dalla scatola (importarlo) prima di poterlo usare.

2
Creazione dell'Istanza Flask

app = Flask(__name__) crea un'istanza della classe Flask, ovvero la nostra applicazione web.

🏠 Analogia della Casa

Immagina di costruire una casa (la tua app web):

  • Flask = Il progetto architettonico
  • app = Flask(__name__) = La costruzione effettiva della casa
  • app = La casa finita, pronta per essere arredata (aggiungere route)

🔍 Il misterioso parametro __name__

__name__ è una variabile speciale di Python che contiene il nome del modulo corrente:

  • Se eseguiamo python app.py__name__ = '__main__'
  • Se importiamo app.py come modulo → __name__ = 'app'

Perché Flask ha bisogno di __name__?

  1. Per trovare risorse: Cartelle statiche (CSS, JS, immagini) e template (HTML)
  2. Per debugging: Sapere da quale file è partita l'applicazione
  3. Per configurazione: Impostazioni specifiche per l'ambiente

3
I Decoratori - Il Cuore di Flask

Cosa sono i decoratori? Sono funzioni speciali che "decorano" (modificano/estendono) altre funzioni.

Funzione Normale
def home():
Semplice funzione Python

Decoratore
@app.route('/')
Aggiunge funzionalità

Funzione Decorata
HTTP Handler
Gestisce richieste web

Risultato
Server Web
Funziona come endpoint HTTP

🔧 Cosa fa esattamente @app.route('/')?

Il decoratore @app.route('/') fa queste cose:

  1. Registra la URL: Dice a Flask: "Quando qualcuno visita '/', chiama questa funzione"
  2. Crea un collegamento: Associa la funzione home() al percorso '/'
  3. Gestisce l'HTTP: Trasforma la tua funzione Python in un handler HTTP

📞 Analogia del Centralino

Immagina un centralino telefonico di un'azienda:

  • @app.route('/') = "Se chiamano il numero 0 (homepage), passa la chiamata all'ufficio amministrativo"
  • @app.route('/contatti') = "Se chiamano il numero 1, passa alla reception"
  • @app.route('/prodotti') = "Se chiamano il numero 2, passa al reparto vendite"
  • def home() = L'ufficio amministrativo che risponde alle chiamate

📝 Sintassi equivalente senza decoratori

Per capire meglio, ecco come sarebbe senza la sintassi col @:

⚖️ Due modi equivalenti

Con decoratore (elegante) ✨
@app.route('/')
def home():
    return "Ciao"

Senza decoratore (manuale) 🔧
def home():
    return "Ciao"

app.add_url_rule('/', 'home', home)

Il decoratore @app.route('/') è solo una scorciatoia elegante per chiamare app.add_url_rule()!

4
La Funzione Handler

def home(): definisce una funzione normale di Python che diventa un handler HTTP grazie al decoratore.

🎯 Cosa deve restituire una funzione Flask?

Una funzione decorata con @app.route() può restituire:

  • Stringhe: return "Ciao mondo" → Diventa HTML
  • Tuple: return "Testo", 200 → Con status code personalizzato
  • Response object: Per controllo avanzato
  • JSON: Per API (lo vedremo più avanti)

⚡ Processo Automatico

Flask fa automaticamente queste conversioni:

  1. Stringa → Response: "Ciao"Response("Ciao", mimetype="text/html")
  2. Status code 200: Se non specifichi, usa 200 OK
  3. Header HTML: Imposta il Content-Type a text/html

🔗 Il ciclo completo richiesta-risposta

👤 Browser
GET http://localhost:5000/
Richiede la homepage

🖥️ Flask
Cerca route '/'
Trova funzione home()

🖥️ home()
Esegue codice
return "Benvenuto!"

🖥️ Flask
Converte in HTTP
200 OK + HTML

📦 Risposta HTTP
HTTP/1.1 200 OK
Content-Type: text/html

👤 Browser
Mostra contenuto
Visualizza la pagina

5
Avvio del Server e Debug Mode

Le righe finali cruciali
if __name__ == '__main__':
    app.run(debug=True)

🔒 Perché if __name__ == '__main__'?

Questa condizione impedisce che il server parta accidentalmente quando importi app.py come modulo.

🏭 Analogia della Fabbrica

Immagina una fabbrica di automobili:

  • File eseguito direttamente: Sei nella fabbrica principale → __name__ == '__main__' → Avvia la produzione (server)
  • File importato: Sei in un reparto satellite → __name__ == 'app' → Non avviare la produzione, fornisci solo componenti

🔍 DEBUG=True - Spiegazione Approfondita

Il parametro debug=True attiva la modalità di sviluppo di Flask, che offre diverse funzionalità cruciali:

🔄 Auto-reload
Il server si riavvia automaticamente quando modifichi il codice. Non serve fermare e riavviare manualmente!
🐛 Debugger Interattivo
In caso di errore, mostra una pagina dettagliata con stack trace e console Python interattiva.
📊 Log Dettagliati
Mostra informazioni dettagliate su ogni richiesta nel terminale.
🔧 Pin Debugger
Permette debugging remoto (SOLO in ambiente di sviluppo controllato!).

⚠️ ATTENZIONE CRUCIALE: MAI in Produzione!

Il parametro debug=True NON DEVE MAI essere usato in ambiente di produzione perché:

  1. Espone informazioni sensibili: Stack trace, variabili, percorsi file
  2. Permette esecuzione codice remoto: Il debugger interattivo può essere sfruttato da malintenzionati
  3. Performance ridotte: Il reload continuo consuma risorse
  4. Sicurezza compromessa: Vulnerabilità esposta

Per produzione usa sempre: app.run(debug=False) o meglio ancora, un server WSGI come Gunicorn.

🎯 Quando usare debug=True

✅ USARE
Sviluppo Locale
Sul tuo computer

❌ NON USARE
Server Pubblico
Online per tutti

✅ USARE
Testing
Durante lo sviluppo

❌ NON USARE
Ambiente Produzione
Sito live

🛠️ Configurazioni Alternative

Configurazione Descrizione Quando usarla
debug=True Modalità sviluppo completa Sviluppo locale
debug=False Modalità produzione Server pubblico
port=8080 Cambia porta (default: 5000) Se porta 5000 è occupata
host='0.0.0.0' Accetta connessioni esterne Testing su rete locale

🧪 Prova il Debug Mode

Crea un errore nel tuo codice per vedere il debugger in azione:

Esempio di errore intenzionale
@app.route('/errore')
def pagina_errore():
    # Errore intenzionale: variabile non definita
    return variabile_non_definita  # ← NameError!

# Poi visita: http://localhost:5000/errore
# Vedrai il debugger interattivo di Flask!

💪 Esercizio Pratico

Modifica il tuo app.py per aggiungere queste funzionalità:

  1. Aggiungi una seconda pagina: Crea una route /about che restituisca "Informazioni su di me"
  2. Cambia porta: Fai partire il server sulla porta 8080 invece di 5000
  3. Personalizza lo status: Fai restituire alla homepage lo status code 201 invece di 200
  4. Prova debug mode: Crea una pagina che genera un errore e osserva il debugger
💡 Soluzione suggerita
from flask import Flask

app = Flask(__name__)

# Homepage con status code personalizzato
@app.route('/')
def home():
    return 'Benvenuto!', 201  # Status code 201 Created

# Nuova pagina about
@app.route('/about')
def about():
    return 'Informazioni su di me'

# Pagina con errore per testare debug mode
@app.route('/errore')
def pagina_errore():
    # Errore intenzionale per testare il debugger
    return variabile_non_definita  # ← NameError

if __name__ == '__main__':
    # Avvia sulla porta 8080 con debug mode
    app.run(debug=True, port=8080)

🎯 Testa il Tuo Codice

Dopo aver salvato il file:

  1. Visita http://localhost:8080/ → Dovresti vedere "Benvenuto!"
  2. Visita http://localhost:8080/about → Dovresti vedere "Informazioni su di me"
  3. Visita http://localhost:8080/errore → Dovresti vedere il debugger di Flask con l'errore
  4. Prova a modificare un messaggio e salvare → Il server dovrebbe riavviarsi automaticamente

📝 Riepilogo Modulo 1

✅ Cosa Hai Imparato:

  • Cos'è un server web e come funziona il ciclo request-response
  • Il protocollo HTTP e gli status code
  • Come configurare PyCharm per Flask
  • Creare e avviare il tuo primo server web
  • La struttura base di un'applicazione Flask
  • Come funzionano i decoratori in Flask
  • L'importanza di __name__ e debug=True
  • Il ciclo completo di una richiesta HTTP

🎯 Nel Prossimo Modulo

Imparerai a creare route dinamiche, gestire parametri URL e organizzare meglio la tua applicazione con più pagine!

Torna in alto