Avviso pubblico

Prot. n. 81652 del 23/05/2025

Decreti ministeriali

11 aprile 2024 n. 72 · 22 maggio 2025 n. 96

1 · Dal Wi-Fi al Web Server

Siamo ripartiti dal risultato raggiunto nella lezione precedente: collegamento dell’ESP32 alla rete Wi-Fi a 2,4 GHz e lettura dell’indirizzo IP tramite il monitor seriale. Il nuovo obiettivo è stato trasformare l’ESP32 in un vero Web Server accessibile dalla rete locale.

2 · Il browser incontra l’ESP32

Abbiamo analizzato il funzionamento di una semplice comunicazione HTTP: il browser svolge il ruolo di client, invia una richiesta all’indirizzo IP dell’ESP32 e il Web Server risponde restituendo una pagina HTML. Per questa attività è sufficiente che i dispositivi si trovino sulla stessa rete locale.

3 · WebServer, porta 80 e route

Con la libreria WebServer abbiamo creato un server HTTP sulla porta 80. Gli studenti hanno imparato il concetto di route: il percorso principale / visualizza la pagina, mentre /on e /off eseguono le funzioni che modificano lo stato della luce. Nel loop, server.handleClient() permette all’ESP32 di intercettare e gestire continuamente le richieste provenienti dal browser.

4 · La prima pagina web: ACCENDI e SPEGNI

Abbiamo costruito direttamente nello sketch una semplice pagina HTML che mostra lo stato della luce e permette di comandarla attraverso due collegamenti: ACCENDI e SPEGNI. Ogni clic genera una nuova richiesta HTTP verso l’ESP32, che modifica lo stato del relè sul GPIO 23 e restituisce la pagina aggiornata.

5 · Dal clic del browser al relè

Abbiamo seguito l’intero percorso del comando: clic nel browser, richiesta HTTP, riconoscimento della route, esecuzione della funzione C++ e comando elettrico del relè. In questo modo gli studenti hanno collegato concretamente rete, programmazione e controllo hardware in un unico sistema.

6 · Sfida 1: un unico pulsante toggle

La prima sfida ha trasformato i due comandi separati in un solo pulsante. Abbiamo introdotto la route /toggle, capace di invertire lo stato della variabile luce a ogni pressione. Il testo del pulsante cambia automaticamente: quando la luce è spenta propone ACCENDI, quando è accesa propone SPEGNI.

7 · Sfida 2: personalizzare l’interfaccia con CSS

Dopo aver verificato il funzionamento del pulsante unico, ogni gruppo ha iniziato a personalizzare la propria interfaccia mediante CSS. Sfondo, colori, dimensioni, spaziatura e pulsante sono diventati parte del progetto, con l’obiettivo di ottenere una pagina chiara, responsive e facilmente utilizzabile anche da smartphone.