코드 생성

코드 생성은 작업공간의 블록을 실행 가능한 코드 문자열로 변환하는 프로세스입니다.

코드 생성은 블록에서 연산을 평가하거나, 미로를 통해 캐릭터를 이동하거나, 온라인 상점을 구성하는 등의 작업을 실질적으로 할 수 있게 하므로 매우 중요합니다.

블록을 직접 '실행'할 수는 없습니다. 대신 코드 문자열을 생성한 다음 실행합니다.

코드 생성기

코드를 생성하려면 생성하려는 텍스트 기반 언어를 선택해야 합니다.

코드 생성기는 지정된 언어에만 있지만 개별 블록에 관련되지 않은 코드를 생성하기 위한 규칙을 처리하는 클래스입니다. 예를 들어 주석 서식 지정, 들여쓰기 구문, 문자열 따옴표 등의 작업을 처리합니다.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly는 5가지 코드 생성기를 기본적으로 제공합니다.

  • 자바스크립트 ES5
  • Python 3
  • 루아 5.1
  • 다트 2
  • PHP 7

다음 방법 중 하나를 사용하여 생성기를 가져와 사용할 수 있습니다.

모듈

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

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

패키지 해제

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>

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>

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

코드를 생성할 언어가 목록에 포함되어 있지 않으면 커스텀 코드 생성기를 만들 수도 있습니다.

블록 코드 생성기

코드 생성의 두 번째 단계는 개별 블록이 생성하는 코드를 정의하는 것입니다. 이 작업은 각 블록에서 생성하려는 개별 언어에 대해 수행해야 합니다.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

코드 생성기가 작동하는 방식은 블록 유형에 따라 다릅니다.

하지만 모두 필드에서 값을 수집하고 내부 블록의 코드를 수집한 후 문자열을 연결해야 합니다.

생성

생성은 최종 사용자가 요청 (예: 버튼 클릭)할 때 수행되거나 지속적으로 수행될 수 있습니다.

지속적 업데이트를 사용하면 사용자가 변경할 때마다 코드를 표시하거나 실행할 수 있습니다. 코드 생성은 빠른 작업이므로 이 작업을 실행하더라도 성능에 미치는 영향이 거의 없습니다. 이벤트 리스너를 사용하면 됩니다.

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.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

프리앰블 코드는 일반적으로 코드 시작 부분에 외부 정의를 포함하는 데 사용됩니다. Postscript 코드는 일반적으로 함수를 호출하여 코드 끝에서 동작을 시작하는 데 사용됩니다.

생성된 코드를 있는 그대로 실행할 수 있으면 프리앰블이나 포스트스크립트를 포함할 필요가 없습니다.

실행

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

JavaScript 코드의 경우 Blockly팀에서는 JSInterpreter를 사용하도록 권장합니다. 다른 언어에는 다른 도구가 필요합니다.