As Ferramentas para desenvolvedores do Blockly são uma ferramenta de desenvolvimento baseada na Web que pode ajudar você a criar blocos personalizados e incluí-los no seu aplicativo.
Definir um bloco
O espaço de trabalho da Block Factory vai começar com um bloco de configuração vazio. É possível adicionar entradas e campos ao bloco arrastando blocos das respectivas categorias na caixa de ferramentas. Você também pode definir o texto da dica, o URL de ajuda, a cor e as verificações de conexão do bloco modificando o bloco de configuração.
A Fábrica de blocos só pode criar um tipo de bloco por vez. Se você quiser criar vários blocos conectados, crie os blocos separadamente e conecte-os na definição da caixa de ferramentas. Além disso, os blocos podem ter recursos avançados, como mutadores, mas esses recursos não podem ser criados na fábrica. Você precisará modificar a definição do bloco de acordo com a documentação depois de criar a forma básica dele.
À medida que você modifica o bloco de configuração no espaço de trabalho, a prévia do bloco é atualizada automaticamente. O código que você precisa adicionar ao seu aplicativo também será atualizado automaticamente.
Configuração de saída
O Blockly oferece suporte a diferentes métodos de definição de blocos e de carregamento do Blockly em si, além de ter várias linguagens de gerador de código integradas. A maneira como você define seus blocos e geradores de código de bloco depende desses fatores. Por isso, é possível configurá-los na Block Factory para mudar a saída do código.
Formato de importação do Blockly
É possível carregar o Blockly usando tags <script> em HTML ou instruções import
se você usar uma ferramenta de build com seu aplicativo. Essa escolha afeta
como você faz referência a determinadas partes da API Blockly. Para mais informações sobre
qual escolher, consulte a documentação sobre carregar o Blockly.
Seja qual for o método usado, selecione a opção correspondente na
Block Factory para que o código adicionado ao aplicativo seja preciso para
ele.
Formato de definição de bloco
O Blockly permite definir blocos em JSON ou JavaScript. O formato JSON é preferível, mas se você for adicionar recursos avançados, como mutadores, use o formato JavaScript.
Linguagem do gerador de código
O Blockly é fornecido com várias linguagens de gerador de código. Escolha os idiomas de que seu aplicativo precisa para mostrar o stub do gerador de código de bloco correspondente. Se você usa um gerador de linguagem personalizado, é possível
modificar o nome da classe CodeGenerator personalizada depois de copiar o código
no aplicativo.
Saída de código
As próximas seções da Block Factory mostram o código que você precisa copiar para o aplicativo para carregar o bloco criado. O local em que você copia o código depende da estrutura do aplicativo, mas geralmente é necessário executar os cabeçalhos de código antes da definição e do gerador de código de bloco, as definições de bloco antes de tentar usá-las em uma caixa de ferramentas e os geradores de código de bloco antes de tentar gerar código para um espaço de trabalho. Em cada uma das seções, use o botão de cópia para copiar todo o bloco de código.
Se você ainda não souber como usar a saída de código, talvez se interesse pelo app de exemplo, que tem exemplos de blocos personalizados e geradores de código de bloco.
Cabeçalhos de código
A seção "Cabeçalhos de código" mostra o código necessário para carregar a biblioteca principal do Blockly e o gerador de linguagem escolhido. Também pode haver outras configurações aqui. Por exemplo, alguns campos que você pode incluir em um bloco são de plug-ins do Blockly. Esses plugins têm próprias instruções de importação e possivelmente outros códigos que você precisa executar para inicializar o campo. Esse código precisa ser incluído antes de qualquer uma das seções de código a seguir.
Definição de bloco
A definição de bloco é como você informa ao Blockly o formato do bloco, como campos e entradas, cor e muito mais. Depois de executar esse código, o Blockly vai saber como criar um bloco apenas com base no type.
Se você estiver usando o app de exemplo, inclua esse código em um
arquivo no diretório blocks/. Se você tiver sua própria estrutura de aplicativo,
inclua esse código antes de tentar referenciar um bloco por nome, como
em uma definição de caixa de ferramentas. De qualquer forma, verifique se os cabeçalhos de código estão presentes
no arquivo em que você inclui esse código.
Stub do gerador
O gerador de código de bloco é como você descreve o código que deve ser gerado para um bloco. O stub do gerador criado pela Block Factory oferece o código básico para receber os valores de entradas e campos que estão no seu bloco. Você precisa combinar esses valores no código final que será gerado.
Se você estiver usando o app de exemplo, inclua esse código em um
arquivo no diretório generators/. Se você tiver sua própria estrutura de
aplicativo, inclua esse código antes de tentar gerar código para um
espaço de trabalho que inclua seus blocos personalizados. De qualquer forma, verifique se os cabeçalhos de código estão presentes no arquivo em que você inclui esse código.
Tutorial em vídeo
Este vídeo mostra as etapas para definir um bloco em detalhes. A interface está desatualizada, mas os recursos de bloqueio que ela destaca ainda são mais ou menos precisos.
Biblioteca de blocos
Os blocos são salvos automaticamente no armazenamento local do navegador sempre que você faz uma mudança neles. É possível criar um novo bloco ou carregar um existente do armazenamento local clicando nos botões correspondentes na barra de ferramentas superior.
Importar da Block Factory legada
Se você usou a fábrica de blocos legada e quer migrar as definições de blocos atuais para a nova ferramenta, siga estas etapas:
Na Block Factory legada, clique no botão
Export Block Libraryna barra de ferramentas. Isso vai baixar um arquivo com todas as suas definições de bloco.
Na nova Block Factory, clique no botão "Carregar bloco" na barra de ferramentas.
Selecione a opção "Importar da Block Factory" no menu.
Envie o arquivo que você baixou na etapa 1.
Suas definições de bloqueio serão convertidas automaticamente para o novo formato e estarão disponíveis no menu
Load block. Os blocos podem ter sido renomeados se houver conflitos com blocos atuais.Se houver erros ao analisar algum dos seus blocos, não será possível carregá-los. Você pode ajudar registrando um bug no blockly-samples e incluindo o arquivo que não foi analisado.