Progettazione dell'applicazione

Esistono diversi paradigmi tra cui scegliere quando si progetta un'applicazione che utilizza Blockly. Queste scelte devono essere prese in anticipo, poiché influiscono sui blocchi di cui l'utente avrà bisogno.

Configurazione

Molte applicazioni Blockly vengono utilizzate per descrivere configurazioni, anziché programmi eseguibili. Le applicazioni di configurazione in genere iniziano inizializzando un blocco di primo livello nello spazio di lavoro. Un buon esempio è la scheda Block Factory degli Strumenti per sviluppatori di Blockly:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

In questo modo viene creato un blocco non eliminabile e non spostabile che contiene tutta la configurazione dell'utente. Il workspace può essere serializzato in qualsiasi momento per determinare la configurazione attuale.

Queste applicazioni potrebbero voler disattivare automaticamente qualsiasi blocco non collegato al blocco principale. Questa operazione può essere eseguita con una riga:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Programma seriale

La maggior parte delle applicazioni Blockly è progettata per creare programmi sequenziali. Gli utenti impilano i blocchi che vengono eseguiti in ordine.

Ogni blocco (non disattivato) nello spazio di lavoro farà parte del programma. Se ci sono più pile di blocchi, quelle più alte vengono eseguite per prime. Se due pile hanno all'incirca la stessa altezza, viene data la priorità alle pile a sinistra (a destra in modalità RTL).

Lo spazio di lavoro può essere esportato in codice eseguibile in qualsiasi momento. Questo codice può essere eseguito lato client in JavaScript (utilizzando eval o l'interprete JS) o lato server in qualsiasi linguaggio.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Programma parallelo

Alcune applicazioni Blockly scelgono di eseguire tutte le pile di blocchi in parallelo, anziché in serie. Un esempio è un'applicazione musicale in cui un loop di batteria viene eseguito contemporaneamente a una melodia.

Un modo per implementare l'esecuzione parallela è generare il codice per ogni blocco singolarmente:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

Se il linguaggio di destinazione è JavaScript, l'array allCode può essere utilizzato per creare più interpreti JS per l'esecuzione simultanea. Se la lingua di destinazione è Python, l'array allCode può essere assemblato in un unico programma che utilizza un modulo di threading.

Come per qualsiasi programma parallelo, è necessario prendere decisioni attente in merito a eventuali risorse condivise come variabili e funzioni.

Programma basato su eventi

I gestori di eventi sono solo funzioni chiamate dal sistema, non dal programma. Questi blocchi possono racchiudere lo stack di blocchi da eseguire oppure possono essere intestazioni che si trovano in cima a uno stack di blocchi.

Alcuni sviluppatori preferiscono aggiungere un "cappello" alla parte superiore dei blocchi di eventi in modo che si distinguano dagli altri blocchi. Questo non è l'aspetto predefinito di Blockly, ma potrebbe essere aggiunto sostituendo la costante del renderer ADD_START_HATS con true (Custom renderers codelab - Override constants). o aggiungendo un tema e impostando l'opzione del cappello nello stile del blocco. Per ulteriori informazioni sull'impostazione dei cappelli sui blocchi nell'ambito dei temi, consulta Stile blocco nella documentazione sui temi.

In un modello basato sugli eventi, potrebbe essere opportuno creare anche un gestore per l'avvio del programma. In base a questo modello, qualsiasi blocco nello spazio di lavoro non collegato a un gestore di eventi verrà ignorato e non verrà eseguito.

Quando progetti un sistema che utilizza gli eventi, valuta se è possibile o auspicabile supportare più istanze dello stesso gestore di eventi.

Layout dello spazio di lavoro

Esistono due modi ragionevoli per disporre una schermata da sinistra a destra. Un modo inizia con la barra degli strumenti a sinistra, lo spazio di lavoro al centro e la visualizzazione dell'output a destra. Questo layout viene utilizzato dalla versione 1 di Scratch, nonché da Made with Code.

L'altro modo inizia con la visualizzazione dell'output a sinistra, la barra degli strumenti al centro e lo spazio di lavoro a destra. Questo layout viene utilizzato dalla versione 2 di Scratch, nonché dalla maggior parte delle applicazioni Blockly.

In entrambi i casi, lo spazio di lavoro deve estendersi per occupare le dimensioni dello schermo disponibili. Gli utenti hanno bisogno di tutto lo spazio possibile per programmare. Come si può vedere negli screenshot precedenti, il primo layout ha un rendimento scarso sugli schermi larghi perché il codice dell'utente e la visualizzazione dell'output sono separati. Il secondo layout consente di avere più spazio per i programmi più grandi, mantenendo comunque vicine tutte e tre le sezioni.

Inoltre, è logico che gli utenti considerino prima il problema che stanno cercando di risolvere, poi esaminino gli strumenti forniti e solo dopo inizino a programmare.

Naturalmente, l'intero ordine deve essere invertito per le traduzioni in arabo ed ebraico.

In alcuni casi, ad esempio quando si utilizza un numero ridotto di blocchi semplici, può essere essere utile posizionare la casella degli strumenti sopra o sotto lo spazio di lavoro. Blockly supporta lo scorrimento orizzontale nella toolbox per questi casi, ma deve essere utilizzato con attenzione.

Consiglio: posiziona la visualizzazione del programma accanto alla barra degli strumenti.