Programmazione visuale: introduzione

Mon, 19 Jan 2015 06:00:00 +0000

Il modello di programmazione tradizionale si basa sulla scrittura di codice sorgente secondo una struttura logica e ad una sintassi ben definita e dipendente dal linguaggio di programmazione prescelto.

L’idea di sostituire questo modello con uno fondato su una interfaccia grafica sulla quale trascinare dei blocchi funzionali predefiniti, manipolandoli ed assemblandoli l’uno all’altro quasi fossero dei mattoncini del LEGO, data dalla fine degli anni ‘80 a livello commerciale e si basa su ricerche iniziate già negli anni ‘60. Questo cambio di paradigma aveva l’obiettivo di rendere la programmazione accessibile anche ai non iniziati, permettendo di insegnarne i rudimenti già ai bambini della scuola elementare.

Ma non voglio farla lunga e rimando chi fosse interessato ad approfondire l’argomento a questa eccellente infografica e alla bibliografia alla fine del post. Ricordo solo che anche in questo campo Apple ha fatto da apripista con il suo HyperCard, il primo ambiente visuale di programmazione uscito dal chiuso dei laboratori di ricerca.

A parte HyperCard, finora l’unico linguaggio di programmazione visuale che ha avuto un vero successo è stato LabVIEW (Laboratory Virtual Instrument Engineering Workbench), un ambiente di programmazione grafica sviluppato dalla National Instruments per il controllo della strumentazione di misura, l’acquisizione dei dati e l’automazione dei processi industriali.

Un linguaggio utilissimo in un ambito professionale molto specializzato, ma decisamente molto lontano dall’idea di programmazione per i ragazzini. E nato anch’esso, non a caso, prima sul Mac alla fine degli anni ‘80 (ho usato a lungo su un Macintosh II la prima versione di LabVIEW divertendomi moltissimo) e portato solo in seguito su Windows e poi finalmente anche su Linux e OS X.

Ma allora perché trattare di programmazione visuale? Perché mentre preparavo i post sull’implementazione in BASIC e in Python del Crivello di Eratostene mi sono imbattuto in tre diverse implementazioni di linguaggi di programmazione visuali derivanti chiaramente da Scratch, il più noto linguaggio di programmazione visuale per insegnare la programmazione ai bambini:

Blockly, sviluppato da Google e di cui ho già parlato brevemente in un post precedente;
App Inventor 2, sviluppato inizialmente presso i laboratori di Google ma gestito ora dal Massachusetts Institute of Technology (MIT), che permette di creare applicazioni per Android;
SNAP!, sviluppato presso l’Università della California a Berkeley.

A differenza di Scratch, questi linguaggi sono utilizzabili direttamente dal browser e non richiedono nessuna installazione sul proprio Mac (o quasi).

Leggendo la descrizione delle caratteristiche dai rispettivi siti web mi sono chiesto quanto fosse facile implementare un algoritmo semplice come quello del Crivello di Eratostene in uno di questi linguaggi rispetto al Python (o al BASIC). Ma perché chiederselo soltanto, senza provare direttamente?

Nel seguito ho riassunto le mie considerazioni personali su Blockly, i prossimi post saranno dedicati rispettivamente a App Inventor 2 e a SNAP!

Blockly

Su Blockly ho già scritto qualcosa: mi è bastata una mezz’oretta di lavoro per implementare in Blockly l’algoritmo del Crivello di Eratostene a partire dalla versione originale in Python (e in BASIC).

Usare Blockly è divertente ed è abbastanza facile capirne la logica di funzionamento. È chiaro che conoscere già dei rudimenti di programmazione in un linguaggio tradizionale aiuta parecchio, ma imparare ad usare Blockly non dovrebbe essere troppo difficile anche per chi è del tutto a digiuno ma abbia voglia di applicarsi e di sperimentare un po’.

Purtroppo il codice Python (ma anche JavaScript) generato automaticamente è troppo verboso rispetto ad una versione sviluppata direttamente in uno dei due linguaggi. La ragione principale è che il linguaggio cerca di prevedere esplicitamente i diversi casi che possono presentarsi a seconda del segno delle variabili utilizzate, complicando notevolmente l’implementazione del ciclo. Un aspetto che probabilmente verrà migliorato con il tempo.

Il codice del programma che implementa il Crivello di Eratostene in Blockly (Fig. 1) è accessibile al link https://blockly-demo.appspot.com/static/demos/code/index.html#d93qba, e da quanto ho capito, ogni volta che vi si accede da un browser diverso Blockly crea automaticamente un link diverso, permettendo di provare a modificare il codice senza danneggiare la versione originale.

Tutto sommato Blockly è un bel giocattolino.

[caption id=“attachment_1615” align=“aligncenter” width=“605”] Implementazione del Crivello di Eratostene in Blockly.[/caption]

Bibliografia

Visual Programming Language - Infograph and Introduction, http://constructingkids.com/2013/05/15/vpl/.
Stack Exchange, Why did visual programming never take off and what future paradigms might change that?
Documentazione e risorse su HyperCard, http://hypercard.org/.
J. Nickerson, “Visual Programming”, (1994), http://www.nickerson.to/visprog/visprog.htm.
M. Boshernitsan, M. S. Downes, “Visual Programming Languages: A Survey”, Università della California, Berkeley (2004), http://www.eecs.berkeley.edu/Pubs/TechRpts/2004/CSD-04-1368.pdf.

Setacciare a blocchi

Tue, 16 Dec 2014 06:00:00 +0000

L’algoritmo del Crivello di Eratostene è stato implementato in almeno 103 linguaggi diversi, alcuni decisamente curiosi o esoterici. Chi ha mai sentito parlare di AutoIt, Bracmat, M4, Nimrod o zkl?

Manca una implementazione in Blockly, un linguaggio di generazione di codice visuale a blocchi.

Blockly è stato sviluppato da Google e deriva da Scratch, StarLogo TNG e SNAP!, linguaggi di programmazione didattici rivolti soprattutto ai programmatori più giovani, e anche da AppInventor, un linguaggio più avanzato con cui si possono sviluppare applicazioni per Android.

Blockly non è però un linguaggio di programmazione vero e proprio, ma è piuttosto “un editor visuale che traduce programmi creati mettendo insieme blocchi standard nel corrispondente codice JavaScript, Python, Dart e altri”.

Nonostante queste limitazioni, una mezz’oretta di lavoro basta per sviluppare una versione in Blockly dell’algoritmo del Crivello di Eratostene (purtroppo il codice in JavaScript e Python generato automaticamente non è un granché).

[caption id=“attachment_1497” align=“aligncenter” width=“605”] Algoritmo del Crivello di Eratostene in Blockly.[/caption]

Chissà se vale la pena aggiungere questa implementazione del Crivello alle 103 precedenti…

Scratch on Melabit

Programmazione visuale: introduzione

Blockly

Bibliografia

Setacciare a blocchi