Programmazione a blocchi: cos'è e come diventa codice vero

La programmazione a blocchi è un modo di costruire un programma impilando blocchi colorati a forma di pezzi di puzzle, invece di scriverlo riga per riga. Ogni blocco è una singola istruzione, come «imposta il pin come uscita», «accendi il LED» o «attendi 100 ms». Poiché i blocchi si incastrano solo dove combaciano, errori come un punto e virgola dimenticato, una parentesi non chiusa o un comando scritto male spariscono, e tu ti concentri sulla logica del programma. Per questo la programmazione a blocchi è considerata l'ingresso più dolce nella programmazione per bambini e principianti.

Ma la programmazione a blocchi non è un linguaggio giocattolo. Dietro ogni programma a blocchi destinato a un Arduino o a un Raspberry Pi Pico c'è codice vero, e la scheda esegue sempre quel codice. In questo articolo vedrai passo per passo, con progetti gratuiti di BlueGrays, cosa sono i blocchi, cosa dicono i loro colori e come un programma a blocchi diventa vero codice C++ o MicroPython. Alla fine troverai anche i vantaggi e i limiti della programmazione a blocchi e come si combina con strumenti come Scratch, mBlock e Tinkercad.

Cos'è la programmazione a blocchi e perché si chiama così?

Nella programmazione a blocchi ogni istruzione è un pezzo con incavi e sporgenze sui bordi. La sporgenza in basso di un blocco entra nell'incavo del blocco sotto, così le istruzioni vengono eseguite in ordine dall'alto verso il basso. Alcuni blocchi hanno un'apertura al loro interno: sono blocchi contenitore che ospitano altri blocchi. Altri hanno spazi ovali bianchi in cui si inserisce un numero o un altro blocco valore. Dato che la forma di ogni pezzo decide cosa va dove, è quasi impossibile costruire un programma che violi le regole. La maggior parte degli editor a blocchi di oggi segue la strada aperta da Scratch del MIT e dalla libreria open source Blockly di Google. Anche i blocchi di BlueGrays si basano su Blockly; il set di blocchi l'abbiamo progettato noi per i progetti di elettronica e lo mostriamo nella lingua dell'app. Ricorda che i blocchi non sono un nuovo linguaggio di programmazione. Istruzioni, ordine, condizioni, cicli e variabili sono esattamente gli stessi concetti del codice testuale; i blocchi li rendono solo visibili.

Come diventa codice vero un programma a blocchi?

Gli editor a blocchi usano dietro le quinte un generatore di codice: ogni tipo di blocco ha un modello in codice testuale e, man mano che i blocchi vengono impilati, quei modelli si uniscono in ordine. BlueGrays è un po' più rigoroso: i blocchi di ogni progetto vengono creati in modo da corrispondere uno a uno al codice vero che va sulla scheda. Ogni riga dei blocchi ha il suo corrispondente nel codice, e ogni riga del codice il suo corrispondente nei blocchi. Nei progetti Arduino ed ESP32 quel codice è C++, nei progetti Raspberry Pi Pico è MicroPython. Per leggere un programma a blocchi ti basta conoscere queste cinque parti:

• setup (una volta): la sezione che viene eseguita una sola volta quando la scheda si accende o si resetta. Corrisponde alla funzione setup() di Arduino ed è di solito il punto in cui i pin vengono impostati come ingresso o USCITA.
• ripeti per sempre: la sezione che viene eseguita dall'alto in basso ancora e ancora finché la scheda è accesa. In Arduino è la funzione loop(), in MicroPython un ciclo while True:.
• Blocchi istruzione: blocchi come «scrivi ALTO sul pin 9» o «attendi 100 ms», impilati dentro i contenitori, che svolgono ciascuno un compito. La maggior parte corrisponde a una sola riga di codice testuale.
• Blocchi valore: numeri come 9 o 100 negli ovali bianchi e blocchi arrotondati che restituiscono un risultato, come la lettura di un pin. Si inseriscono negli spazi dei blocchi istruzione e diventano il valore tra parentesi nel codice.
• Menu a tendina: opzioni come USCITA o ALTO / BASSO. Corrispondono alle costanti OUTPUT / INPUT e HIGH / LOW del codice e, poiché il menu offre solo opzioni valide, non si possono scrivere male.

Blocchi e codice affiancati: il progetto LED lampeggiante

Basta teoria, guardiamo un esempio vero. Nel progetto LED lampeggiante un LED e una resistenza sono collegati al pin 9, e il LED lampeggia cinque volte al secondo. Nella tabella qui sotto traduciamo in codice, uno per uno, i blocchi dell'immagine sopra. Ogni riga è un blocco, e ogni blocco è una riga di codice:

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

Nel codice ci sono alcune cose che nei blocchi non vedi: la parola void, le parentesi graffe e i punti e virgola. Sono regole di sintassi del C++, e nei blocchi se ne occupa la forma stessa. L'apertura di un blocco contenitore fa le veci delle parentesi graffe, e i blocchi uno sotto l'altro fanno le veci dell'ordine delle righe. Se cambiassi il 100 nello spazio con 1000, nel codice ci sarebbe delay(1000) e il LED lampeggerebbe una volta al secondo. Se nel menu scegliessi BASSO invece di ALTO, HIGH diventerebbe LOW. Grazie a questa corrispondenza uno a uno, dopo qualche progetto inizi a leggere il codice senza guardare i blocchi. Il circuito e il montaggio passo per passo di questo stesso progetto ti aspettano nella parte 2 della serie: far lampeggiare un LED a blocchi.

Cosa significano i colori dei blocchi?

Negli editor a blocchi il colore non è decorazione: indica da quale categoria arriva un blocco. Alla prima occhiata a un programma, i colori ti permettono di leggere «qui si dichiara una variabile, qui si prende una decisione, qui c'è un ciclo». Queste sono le categorie che vedrai nelle immagini dei blocchi dei progetti BlueGrays:

Anche le forme danno indizi. I blocchi di condizione e confronto hanno estremità a punta, simili a un esagono, e si inseriscono nello spazio della condizione di un blocco condizione; i blocchi di numeri e variabili hanno invece estremità arrotondate. C'è un dettaglio della tabella a cui fare attenzione: nel ciclo che conta con i da 0 a 5 a passi di 1 il limite superiore è incluso, quindi i assume i valori 0, 1, 2, 3, 4 e 5. Nel codice si scrive con la condizione i < 6 e il ciclo fa sei giri. Il progetto LED in sequenza accende sei LED uno dopo l'altro proprio con questo blocco; spieghiamo in dettaglio i blocchi di cicli e array nella parte cicli e variabili della serie.

I blocchi condizione annidati di questa immagine diventano righe if annidate nel codice. Il blocco esterno con il confronto button ≠ lastButton è la riga if (button != lastButton) e interviene quando lo stato del pulsante cambia. Il blocco interno con button = 1 coglie solo il momento della pressione. Il blocco che assegna a ledState la negazione di ledState è la riga ledState = !ledState;: lo 0 diventa 1 e l'1 diventa 0. Il blocco successivo, che scrive ledState sul pin 7, è digitalWrite(7, ledState);. Puoi vedere il progetto completo nella pagina Accendere e spegnere un LED con un pulsante; spieghiamo il legame tra blocco condizione e if/else nella parte pulsanti e condizioni della serie.

C++ su Arduino ed ESP32, MicroPython sul Pico

La stessa logica a blocchi viene tradotta in linguaggi diversi a seconda della scheda. Nei progetti Arduino ed ESP32 i blocchi corrispondono a codice C++, e i blocchi setup e ripeti per sempre diventano setup() e loop(). Per esempio, i blocchi del progetto LED Lampeggiante con ESP32 hanno la stessa struttura del LED lampeggiante; cambiano solo il pin, che è il 5, e l'attesa, di 500 ms. Nei progetti Raspberry Pi Pico, invece, i blocchi diventano MicroPython. Qui non esiste una funzione setup(): ciò che sta nel blocco setup diventa righe eseguite una volta all'inizio del file, e il blocco ripeti per sempre diventa un ciclo while True:.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Puoi seguire la corrispondenza riga per riga. Il blocco «dichiara intero (int) LED_PIN = 14» dentro «variabili globali (all’inizio)» è la riga LED_PIN = 14; dato che in Python i tipi non si scrivono, la parte (int) non compare nel codice. Il blocco «pin led : GP LED_PIN, USCITA» diventa led = Pin(LED_PIN, Pin.OUT). «accendi (on) il pin led» è led.on(), «attendi 0.5 secondi» è time.sleep(0.5) e «stampa su seriale» è una riga print(). Il blocco «crea testo con» unisce con + il testo «LED pin: GP» e il valore di LED_PIN. Attenzione: su Arduino l'attesa è in millisecondi (100 ms), in MicroPython in secondi (0.5), e i blocchi mostrano questa differenza con blocchi separati per i ms e per i secondi. Per il circuito, guarda la pagina LED esterno con Raspberry Pi Pico; se il Pico è una novità per te, leggere prima cos'è il Raspberry Pi Pico ti renderà tutto più semplice.

Vantaggi e limiti della programmazione a blocchi

La programmazione a blocchi non è la risposta a tutto: è un ponte. Nelle prime settimane è uno strumento potentissimo per capire la logica di un programma; il vero obiettivo, però, è attraversare quel ponte a un certo punto e leggere il codice testuale con tranquillità. Vedere blocchi e codice affiancati accelera questo passaggio, perché in ogni nuovo progetto vedi gli stessi blocchi trasformarsi nelle stesse righe. Dopo aver incontrato il blocco «ripeti per sempre» in dieci progetti, la parola loop() non ti sembrerà più strana. Quando sarai pronto per il codice testuale, l'articolo basi della programmazione Arduino spiega tutto, dalle variabili alle funzioni, con esempi.

A chi è adatta la programmazione a blocchi?

• Bambini e famiglie: i bambini dai 9-10 anni in su che leggono con sicurezza possono iniziare insieme a un adulto. Con i blocchi sullo schermo e un LED che si accende sulla breadboard, programmare smette di essere astratto.
• Insegnanti e club di robotica: spiegare un progetto prima con i blocchi e poi passare al suo codice mette insieme livelli diversi nella stessa lezione. Il piano di lezione che abbiamo preparato per questo è nell'ultima parte della serie: piano di lezione di robotica con la programmazione a blocchi.
• Principianti con Arduino: se hai appena preso la tua scheda e i primi sketch ti sembrano confusi, i blocchi sono il modo più rapido per vedere cosa fa ogni riga. Per conoscere la scheda in sé, comincia da cos'è Arduino.
• Chiunque faccia fatica a leggere il codice: capire un programma scritto da altri è un'abilità a sé. Guardare i blocchi di un progetto già pronto per coglierne la struttura aiuta a vedere cosa fa un codice lungo, e dove.

Confronto con Scratch, mBlock, Tinkercad e MakeCode

La maggior parte degli strumenti che vengono in mente parlando di programmazione a blocchi sono editor per computer o browser, e ognuno eccelle nel suo campo. Ciò che li accomuna è che sei tu a trascinare i blocchi e a costruire il tuo programma. BlueGrays risponde a un'esigenza diversa: mostra i blocchi di progetti già pronti e testati accanto allo schema del circuito, all'elenco dei componenti e al codice vero. Nell'app non puoi (per ora) comporre i tuoi blocchi per creare un programma; leggi invece come è costruito un programma che si sa che funziona. Per questo questi strumenti non sono in concorrenza, ma si completano. Per esempio, puoi confrontare una sequenza di semaforo creata in mBlock con i blocchi del progetto Semaforo e, se non hai ancora una scheda, simulare il circuito in Tinkercad. Per i dettagli, consulta le guide mBlock con Arduino e simulazione Arduino con Tinkercad.

Come usare la programmazione a blocchi nell'app BlueGrays

1. Scegli in Scopri › Progetti un progetto con il badge dei blocchi. Puoi anche usare il filtro per mostrare solo i progetti a blocchi. Più di 100 progetti dell'app hanno la versione a blocchi, per la maggior parte progetti Arduino e gli altri progetti ESP32 e Raspberry Pi Pico.
2. Nella sezione codice del progetto, attiva l'interruttore Mostra a blocchi. Al posto del codice compaiono i blocchi dello stesso programma; tocca l'immagine per aprirla a schermo intero e ingrandirla con comodità.
3. Passa alla scheda Capire i blocchi. Il programma viene spiegato passo per passo: in ogni passo vedi solo i blocchi di quel passo e cosa fanno.
4. Se ti chiedi a cosa serve un comando, apri la Guida al codice. Ogni esempio è presentato con i comandi Arduino e MicroPython e anche a blocchi.
5. Disattiva l'interruttore per tornare al codice vero. Copialo, incollalo nell'IDE Arduino (in Thonny per il Pico) e caricalo sulla scheda.
6. Consolida quello che hai imparato con le Domande del giorno: 5 domande ogni giorno sui livelli da A1 a C2, una classifica settimanale e badge.

In 31 progetti sia i blocchi sia il codice sono completamente gratuiti; negli altri i blocchi si sbloccano con Premium, come il codice. Alcuni progetti gratuiti ideali come primo passo: LED lampeggiante, Due LED lampeggianti alternati, Semaforo, LED in sequenza, LED Lampeggiante con ESP32 e LED integrato del Raspberry Pi Pico lampeggiante. Puoi vedere tutti i progetti a blocchi per piattaforma nella pagina programmazione a blocchi, dove puoi anche confrontare affiancati i blocchi e il codice di un progetto di esempio.

Serie Dai blocchi al codice: la tabella di marcia

1. Cos'è la programmazione a blocchi e come un programma a blocchi diventa codice vero (questo articolo)
2. Il primo programma: far lampeggiare un LED a blocchi, blocchi e C++ affiancati
3. Pulsanti e condizioni: il blocco condizione e if/else
4. Cicli e variabili: ripeti per sempre, conta, array e contatori
5. Leggere sensori a blocchi, la porta seriale e MicroPython sul Pico
6. Per gli insegnanti: un piano di lezione di robotica con la programmazione a blocchi

Nella prossima parte della serie ricostruiamo da zero il progetto LED lampeggiante di questo articolo, con circuito, blocchi e codice C++ affiancati, in far lampeggiare un LED a blocchi. Nel frattempo puoi aprire nell'app BlueGrays i progetti citati qui con schema e codice, e passare con un tocco alla versione a blocchi dello stesso programma con Mostra a blocchi o alla spiegazione passo per passo con Capire i blocchi.