Progettazione dell'applicazione

Esistono diversi paradigmi tra cui scegliere quando si progetta un'applicazione che utilizza Blockly. È necessario prendere in considerazione queste scelte frühzeitig, poiché influiscono sui blocchi di cui l'utente avrà bisogno.

Configurazione

Molte applicazioni Blockly vengono utilizzate per descrivere le configurazioni anziché i programmi eseguibili. In genere le applicazioni di configurazione iniziano inizializzando un blocco a livello di radice 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);

Viene creato un blocco non eliminabile e non spostabile che contiene tutta la configurazione dell'utente. L'area di lavoro può essere serializzata in qualsiasi momento per determinare la configurazione corrente.

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 seriali. Gli utenti impilano blocchi che vengono eseguiti in ordine.

Ogni blocco (non disattivato) nello spazio di lavoro farà parte del programma. Se sono presenti più serie di blocchi, quelle più in alto vengono eseguite prima. Se due serie hanno approssimativamente la stessa altezza, viene data la priorità alle serie a sinistra (a destra in modalità RTL).

L'area di lavoro può essere esportata 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 serie 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 la lingua di destinazione è JavaScript, l'array allCode può essere utilizzato per creare più interpreti JS per l'esecuzione simultanea. Se la lingua di destinazione è qualcosa di simile a Python, l'array allCode può essere assemblato in un unico programma che utilizza un modulo di threading.

Come per qualsiasi programma parallelo, devono essere prese decisioni attente in merito alle risorse condivise, come variabili e funzioni.

Programma basato su eventi

I gestori di eventi sono solo funzioni chiamate dal sistema anziché dal programma. Questi blocchi possono racchiudere la serie di blocchi da eseguire o essere intestazioni posizionate sopra una serie di blocchi.

Ad alcuni sviluppatori piace aggiungere un "cappello" nella parte superiore dei blocchi di eventi in modo che si distinguano dagli altri blocchi. Questo non è l'aspetto predefinito di Blockly, ma può essere aggiunto sostituendo la costante del visualizzatore ADD_START_HATS con true (Codelab sui visualizzatori personalizzati - Sostituzione delle costanti) o aggiungendo un tema e impostando l'opzione del cappello sullo stile del blocco. Puoi trovare altre informazioni su come impostare i cappelli sui blocchi all'interno dei temi qui.

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

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

Layout dello spazio di lavoro

Esistono due modi ragionevoli per impostare il layout di una schermata da sinistra a destra. Un modo è iniziare 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, l'area di lavoro deve occupare le dimensioni dello schermo disponibili: gli utenti hanno bisogno di tanto spazio per programmare. Come si può vedere negli screenshot sopra, il primo layout ha un rendimento scadente sugli schermi ampi perché il codice dell'utente e la visualizzazione dell'output sono separati. mentre il secondo consente di avere più spazio per i programmi più grandi, mantenendo comunque tutte e tre le sezioni vicine.

Inoltre, è logico che gli utenti considerino prima il problema che stanno tentando 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 e ebraico.

In alcuni casi, ad esempio quando utilizzi un numero ridotto di blocchi semplici, potrebbe essere opportuno posizionare la cassetta degli attrezzi sopra o sotto lo spazio di lavoro. Blockly supporta lo scorrimento orizzontale nella cassetta degli attrezzi per questi casi, ma deve essere utilizzato con cautela.

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