Ferramentas do desenvolvedor do Blockly

O Blockly Developer Tools é uma ferramenta para desenvolvedores baseada na Web que pode ajudar você a criar blocos personalizados e incluí-los no seu aplicativo.

Observação: este documento é sobre a versão mais recente do Blockly Developer Tools compatível com o Blockly v10 ou mais recente. Se você estiver procurando a ferramenta legada, consulte a documentação legada.

Definir um bloco

O espaço de trabalho do Block Factory começará com um bloco de configuração vazio. Para adicionar entradas e campos ao bloco, arraste os 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 para o bloco modificando o bloco de configuração.

A Block Factory só pode criar um tipo de bloco por vez. Se quiser projetar vários blocos conectados, será necessário projetar os blocos separadamente e conectá-los na definição da caixa de ferramentas. Além disso, os blocos podem ter recursos avançados, como mutadores, mas eles não podem ser criados na fábrica. Será necessário modificar a definição do bloco de acordo com a documentação depois de criar a forma básica do bloco.

À medida que você modifica o bloco de configuração no espaço de trabalho, a visualização do bloco é atualizada automaticamente. O código que você precisa adicionar ao 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 próprio Blockly, além de ter várias linguagens de gerador de código integradas. A maneira como você define os blocos e os geradores de código de bloco depende desses fatores. Portanto, é possível configurá-los no Block Factory para mudar a saída do código.

Formato de importação Blockly

É possível carregar o Blockly com tags <script> em HTML ou usando instruções import se você usa uma ferramenta de build com o aplicativo. Essa escolha afeta a forma como você referencia determinadas partes da API Blockly. Para mais informações sobre qual escolher, consulte a documentação sobre como carregar o Blockly. Seja qual for o método usado, selecione a opção correspondente no Block Factory para que o código a ser adicionado ao aplicativo seja preciso.

Formato de definição de bloco

O Blockly aceita definição de blocos em JSON ou JavaScript. É preferível usar o formato JSON, mas se você for adicionar recursos avançados, como mutadores, poderá usar o formato JavaScript.

Linguagem do gerador de código

O Blockly vem com várias linguagens de gerador de código. Escolha as linguagens de que o aplicativo precisa para mostrar o stub do gerador de código de bloco correspondente. Se você usa um gerador de linguagem personalizado, pode 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ê precisará copiar no aplicativo para carregar o bloco criado. O local em que o código é copiado dependerá de como você estruturou o aplicativo, mas geralmente será necessário executar os cabeçalhos do 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. Para cada uma das seções, você pode usar o botão "Copiar" para copiar todo o bloco de código dessa seção.

Se você ainda não souber como usar a saída do código, talvez se interesse pelo app de exemplo, que tem exemplos de blocos personalizados e geradores de código de bloqueio.

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. Pode haver outra configuração aqui também. Por exemplo, alguns campos que você pode incluir em um bloco são de plug-ins do Blockly. Esses plug-ins terão as próprias instruções de importação e possivelmente outro código que você precisará executar para inicializar o campo. Esse código precisa ser incluído antes de qualquer uma das seções de código abaixo.

Definição de bloco

A definição de bloco é como você informa ao Blockly a forma do seu bloco, por exemplo, quais campos e entradas ele tem, a cor e muito mais. Depois de executar esse código, o Blockly saberá como criar um bloco com base apenas no type.

Se você estiver usando o app de exemplo, será possível incluir 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 pelo nome, como em uma definição de caixa de ferramentas. De qualquer forma, confira se os cabeçalhos do código estão presentes no arquivo em que o código foi incluído.

stub de gerador

O gerador de código de bloco é como você descreve o código que precisa ser gerado para um bloco. O stub de gerador criado pela Block Factory fornece o código básico para receber os valores de entradas e campos que estão no bloco. Cabe a você combinar esses valores no código final que será gerado.

Se você estiver usando o app de exemplo, será possível incluir 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, confira se os cabeçalhos do código estão presentes no arquivo em que você incluiu esse código.

Tutorial em vídeo

Este vídeo mostra em detalhes as etapas para definir um bloco. A interface está desatualizada, mas os recursos de bloco destacados ainda são mais ou menos precisos.

Bloquear biblioteca

Os blocos são salvos automaticamente no armazenamento local do navegador sempre que você faz uma alteração no bloco. Você pode criar um novo bloco ou carregar um existente do armazenamento local clicando nos botões correspondentes na barra de ferramentas de cima.

Importar da Block Factory legada

Se você usou o legacy Block Factory e quer migrar suas definições de blocos existentes para a nova ferramenta, faça isso seguindo estas etapas:

1. Na Block Factory legada, clique no botão Export Block Library na barra de ferramentas. Será feito o download de um arquivo com todas as suas definições de bloqueio.

   

2. No novo Block Factory, clique no botão Load block na barra de ferramentas.

3. Selecione a opção "Import from Block Factory" no menu.

   

4. Faça upload do arquivo salvo na Etapa 1.

5. Suas definições de bloco serão convertidas automaticamente para o novo formato e agora estarão disponíveis no menu Load block. Os blocos podem ter sido renomeados em caso de conflito com os blocos existentes.

6. Se houver erros ao analisar qualquer um dos seus blocos, não poderemos carregá-los. Você pode nos ajudar registrando um bug em amostras em bloco e incluindo o arquivo que não seria analisado.