Gerar e executar código

Seu aplicativo pode gerar código a qualquer momento. Por exemplo, ele pode gerar código quando o usuário final clica em um botão ou sempre que o usuário faz uma mudança.

Para uma visão geral da geração de código, consulte Geração de código.

Importar um gerador de código de linguagem

Para gerar código, você precisa de um gerador de código de linguagem. É possível importar geradores de código de linguagem com qualquer um dos métodos a seguir.

Módulos

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

// Generate code for all the blocks in the workspace.
const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Unpkg

É necessário incluir o gerador depois de incluir o Blockly.

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Scripts locais

É necessário incluir o gerador depois de incluir o Blockly.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Gerar código

Para gerar código, use a função workspaceToCode do gerador.

const code = javascriptGenerator.workspaceToCode(workspace);

Atualizações contínuas

As atualizações contínuas permitem mostrar ou executar o código sempre que o usuário faz uma mudança. A geração de código é uma operação rápida, então há pouco impacto no desempenho. Isso é feito usando um listener de eventos.

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

Adicionar código de preâmbulo ou pós-escrito

Depois de gerar o código, você pode incluir um código antes do início ou depois do final do código gerado.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

O código de preâmbulo geralmente é usado para incluir definições externas no início do código. O código de pós-escrito geralmente é usado para chamar funções para iniciar o comportamento no final do código.

Se o código gerado puder ser executado como está, não será necessário incluir um preâmbulo ou um pós-escrito.

Executar código

Depois de gerar o código, você precisa descobrir como executá-lo. Decidir como executar é muito específico do aplicativo e está fora do escopo do Blockly.

Se você quiser executar código JavaScript, consulte Gerar e executar JavaScript. Isso discute alguns recursos especiais do gerador de código JavaScript, bem como JSInterpreter, que a equipe do Blockly recomenda como uma maneira de executar JavaScript com segurança.

Outras linguagens exigem outras ferramentas.