코드 생성 및 실행

애플리케이션은 언제든지 코드를 생성할 수 있습니다. 예를 들어 최종 사용자가 버튼을 클릭하거나 사용자가 변경할 때마다 코드를 생성할 수 있습니다.

코드 생성에 관한 개요는 코드 생성을 참고하세요.

언어 코드 생성기 가져오기

코드를 생성하려면 언어 코드 생성기가 필요합니다. 다음 방법 중 하나를 사용하여 언어 코드 생성기를 가져올 수 있습니다.

모듈

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

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);

로컬 스크립트

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);

코드 생성

코드를 생성하려면 생성기의 workspaceToCode 함수를 사용하세요.

const code = javascriptGenerator.workspaceToCode(workspace);

지속적인 업데이트

연속 업데이트를 사용하면 사용자가 변경할 때마다 코드를 표시하거나 실행할 수 있습니다. 코드 생성은 빠른 작업이므로 이 작업으로 인한 성능 영향은 거의 없습니다. 이는 이벤트 리스너를 사용하여 실행됩니다.

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);

전문 또는 후문 코드 추가

코드를 생성한 후 원하는 경우 생성된 코드의 시작이나 끝 앞에 코드를 포함할 수 있습니다.

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;

머리말 코드는 일반적으로 코드 시작 부분에 외부 정의를 포함하는 데 사용됩니다. 포스트스크립트 코드는 일반적으로 함수를 호출하여 코드 끝에서 동작을 시작하는 데 사용됩니다.

생성된 코드를 있는 그대로 실행할 수 있는 경우 머리말이나 마무리 문구를 포함할 필요가 없습니다.

코드 실행

코드를 생성한 후에는 코드를 실행하는 방법을 알아야 합니다. 실행 방법을 결정하는 것은 애플리케이션에 따라 다르며 Blockly의 범위를 벗어납니다.

JavaScript 코드를 실행하려면 JavaScript 생성 및 실행을 참고하세요. 여기에서는 JavaScript 코드 생성기의 몇 가지 특수 기능과 Blockly팀에서 JavaScript를 안전하게 실행하는 방법으로 권장하는 JSInterpreter에 대해 설명합니다.

다른 언어에는 다른 도구가 필요합니다.