Gerar e executar código

Seu aplicativo pode gerar códigos 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ódigos de idioma

Para gerar o código, você precisa de um gerador de código de idioma. É 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. Gerar código é uma operação rápida, então há pouco impacto na performance ao fazer isso. 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 postscript

Depois de gerar o código, você pode incluir código antes do início ou após o fim 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 postscript 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-escript.

Executar código

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

Se você quiser executar um código JavaScript, consulte Gerar e executar JavaScript. Esta seção discute alguns recursos especiais do gerador de código JavaScript, além do JSInterpreter, que a equipe do Blockly recomenda como uma maneira de executar JavaScript com segurança.

Outros idiomas exigem outras ferramentas.