Programmazione visuale: Blockly

Alcuni dei problemi proposti quest’anno alle ragazze e ai ragazzi che partecipano alle attività del progetto RiA – Research in Action richiederanno, per la loro soluzione, di sviluppare procedure e algoritmi o di costruire una libreria di funzioni come strumento per esplorare un certo campo della matematica (vedere, per esempio, I numeri trascendenti o Allineamento LIDAR). Una vera sfida perché, fino a oggi, nessuno degli studenti si è mai cimentato con un linguaggio di programmazione.

Ecco perché ci è venuto in mente di usare Blockly: un sistema, una libreria – open source – per implementare un editor che permetta, aggregando e manipolando blocchi di programma (veri e propri, non blocchi intesi in senso metaforico), di generare codice, completo e pronto per l’uso, in svariati linguaggi di programmazione. È un progetto per sviluppatori Google che rende disponibile una libreria in Javascript da aggiungere alla propria applicazione o, come sarà nel nostro caso, al proprio sito web in modo da avere a disposizione un editor visuale già pronto. Una demo funzionante e abbastanza completa di Blockly si puà trovare qui: blockly-demo.appspot.com/static/demos/code/index.html.

Blockly è alla base di molte applicazioni. Per esempio App Inventor, il sistema di sviluppo didattico del MIT, o Scratch, per introdurre al coding, sempre sviluppato dal MIT, hanno al loro interno Blockly.

Un esempio

Qui di seguito una schermata di Blockly, così come disponibile all’indirizzo blockly-demo.appspot.com/…/index.html, in cui abbiamo costruito una piccola applicazione per verificare la divisibilità di una coppia di numeri. L’applicazione vera e propria è, in figura, il primo insieme di blocchi mentre il test di divisibilità è implementato dalla funzione Divisibile – il secondo insieme di blocchi. La funzione chiede due parametri – dividendo e divisore – e controlla se il resto della divisione di dividendo per divisore è zero (è il blocco di colore blu con l’etichetta remainder of). In caso affermativo i due numeri sono divisibili.

La traduzione

Il codice realizzato attraverso i blocchi di Blockly può essere tradotto in un linguaggio a scelta (nelll’esempio mostrato qui sopra si notano le etichette per la traduzione in Javascript, Python, PHP, Lua, dart e XML). Qui di seguito mostriamo la nostra piccola applicazione in Python così come tradotta da Blockly.

dividendo = None
divisore = None

def text_prompt(msg):
  try:
    return raw_input(msg)
  except NameError:
    return input(msg)

"""
Determina se dividendo è divisibile per divisore controllando
se il resto della divisione del primo per il secondo è zero.
Restituisce true se dividendo è divisibile per divisore, false altrimenti
"""
def Divisibile(dividendo, divisore):
  if dividendo % divisore == 0:
    return True
  return False


dividendo = float(text_prompt('Inserire il dividendo'))
divisore = float(text_prompt('Inserire il dividendo'))
print(Divisibile(dividendo, divisore))

Espansioni

Il programmatore che vuole aggiungere Blockly alla propria applicazione ha il completo controllo sull’editor, sulla disposizione e l’organizzazione dei blocchi e, soprattutto, può aggiungere blocchi del tutto originali codificandoli in Javascript. Per l’utente finale, che svilupperà usando l’editor visuale, i nuovi blocchi saranno in tutto e per tutto simili a quelli predefiniti.