Design do aplicativo

Há vários paradigmas para escolher ao projetar um aplicativo que usa o Blockly. Essas escolhas precisam ser feitas no início, já que afetam os blocos que o usuário vai precisar.

Configuração

Muitos aplicativos do Blockly são usados para descrever configurações, em vez de programas executáveis. Os aplicativos de configuração geralmente começam inicializando um bloco de nível raiz no espaço de trabalho. Um bom exemplo é a guia "Fábrica de blocos" das Ferramentas para desenvolvedores do 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);

Isso cria um bloco não excluível e não movível que contém toda a configuração do usuário. O espaço de trabalho pode ser serializado a qualquer momento para determinar a configuração atual.

Esses aplicativos podem desativar automaticamente qualquer bloco não conectado ao bloco raiz. Isso pode ser feito com uma linha:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Programa em série

A maioria dos aplicativos do Blockly é projetada para criar programas seriais. Os usuários juntam blocos que são executados em ordem.

Todos os blocos (não desativados) no espaço de trabalho fazem parte do programa. Se houver várias pilhas de blocos, as mais altas serão executadas primeiro. Se duas pilhas tiverem aproximadamente a mesma altura, as pilhas à esquerda (direita no modo RTL) terão prioridade.

O espaço de trabalho pode ser exportado para código executável a qualquer momento. Esse código pode ser executado do lado do cliente em JavaScript (usando eval ou o JS Interpreter) ou do lado do servidor em qualquer linguagem.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Programa paralelo

Alguns aplicativos do Blockly executam todas as pilhas de blocos em paralelo, em vez de em série. Um exemplo seria um aplicativo de música em que um loop de bateria é executado simultaneamente com uma melodia.

Uma maneira de implementar a execução paralela é gerar o código para cada bloco individualmente:

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 a linguagem de destino for JavaScript, a matriz allCode poderá ser usada para criar vários intérpretes de JS para execução simultânea. Se o idioma de destino for algo como Python, a matriz allCode poderá ser montada em um único programa que usa um módulo de threading.

Como em qualquer programa paralelo, é preciso tomar decisões cuidadosas sobre recursos compartilhados, como variáveis e funções.

Programa orientado a eventos

Os manipuladores de eventos são apenas funções chamadas pelo sistema, e não pelo programa. Esses blocos podem envolver a pilha de blocos a serem executados ou podem ser cabeçalhos que ficam em cima de uma pilha de blocos.

Alguns desenvolvedores gostam de adicionar um "chapéu" na parte de cima dos blocos de eventos para que eles pareçam diferentes de outros blocos. Essa não é a aparência padrão do Blockly, mas pode ser adicionada substituindo a constante do renderizador ADD_START_HATS por true (Codelab de renderizadores personalizados: substituir constantes) ou adicionando um tema e definindo a opção de chapéu no estilo do bloco. Para mais informações sobre como definir chapéus em blocos como parte de temas, consulte Estilo de bloco na documentação de temas.

Em um modelo orientado a eventos, também faz sentido criar um manipulador para o início do programa. Nesse modelo, qualquer bloco no espaço de trabalho que não esteja conectado a um manipulador de eventos será ignorado e não será executado.

Ao projetar um sistema que usa eventos, considere se é possível ou desejável oferecer suporte a várias instâncias do mesmo manipulador de eventos.

Layout do espaço de trabalho

Há duas maneiras razoáveis de dispor uma tela da esquerda para a direita. Uma maneira começa com a barra de ferramentas à esquerda, o espaço de trabalho no meio e a visualização de saída à direita. Esse layout é usado pela versão 1 do Scratch e pelo Made with Code.

A outra forma começa com a visualização de saída à esquerda, a barra de ferramentas no meio e o espaço de trabalho à direita. Esse layout é usado pela versão 2 do Scratch e pela maioria dos aplicativos do Blockly.

Em ambos os casos, o espaço de trabalho precisa se estender para ocupar o tamanho da tela disponível. Os usuários precisam de o máximo de espaço possível para programar. Como pode ser visto nas capturas de tela acima, o primeiro layout tem um desempenho ruim em telas grandes, já que o código do usuário e a visualização da saída ficam separados. Já o segundo layout permite mais espaço para programas maiores, mantendo as três seções próximas.

Também faz sentido que os usuários primeiro considerem o problema que estão tentando resolver, depois analisem as ferramentas fornecidas e só então comecem a programar.

É claro que toda a ordem precisa ser invertida para traduções em árabe e hebraico.

Em alguns casos, como ao usar um pequeno número de blocos simples, pode fazer sentido que a caixa de ferramentas fique acima ou abaixo da área de trabalho. O Blockly oferece suporte a rolagem horizontal na caixa de ferramentas para esses casos, mas ela precisa ser usada com cuidado.

Recomendação: coloque a visualização do programa ao lado da barra de ferramentas.