애플리케이션 설계

Blockly를 사용하는 애플리케이션을 설계할 때 선택할 수 있는 패러다임은 여러 가지가 있습니다. 이러한 선택은 사용자가 필요로 하는 블록에 영향을 미치므로 일찍 고려해야 합니다.

구성

많은 Blockly 애플리케이션은 실행 가능한 프로그램이 아닌 구성을 설명하는 데 사용됩니다. 구성 애플리케이션은 일반적으로 작업공간에서 하나의 루트 수준 블록을 초기화하여 시작합니다. Blockly 개발자 도구의 블록 팩토리 탭을 예로 들 수 있습니다.

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

이렇게 하면 사용자의 모든 구성을 보유하는 삭제할 수 없고 이동할 수 없는 블록이 생성됩니다. 작업공간은 언제든지 직렬화되어 현재 구성을 확인할 수 있습니다.

이러한 애플리케이션은 루트 블록에 연결되지 않은 블록을 자동으로 사용 중지할 수 있습니다. 다음과 같이 한 줄로 이를 수행할 수 있습니다.

workspace.addChangeListener(Blockly.Events.disableOrphans);

시리얼 프로그램

대부분의 Blockly 애플리케이션은 직렬 프로그램을 만들도록 설계되어 있습니다. 사용자는 순서대로 실행되는 블록을 함께 쌓습니다.

작업공간의 모든 (사용 중지되지 않은) 블록은 프로그램의 일부를 구성합니다. 블록 스택이 여러 개 있는 경우 더 높은 스택이 먼저 실행됩니다. (두 스택의 높이가 거의 같은 경우 왼쪽 스택 (RTL 모드에서는 오른쪽)에 우선순위가 부여됩니다.)

작업공간은 언제든지 실행 가능한 코드로 내보낼 수 있습니다. 이 코드는 JavaScript에서 클라이언트 측 (eval 또는 JS 인터프리터 사용)으로 실행하거나 모든 언어에서 서버 측으로 실행할 수 있습니다.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

병렬 프로그램

일부 Blockly 애플리케이션은 블록 스택을 순차적으로가 아니라 동시에 실행합니다. 예를 들어 드럼 루프가 멜로디와 동시에 실행되는 음악 애플리케이션을 들 수 있습니다.

병렬 실행을 구현하는 한 가지 방법은 각 블록의 코드를 개별적으로 생성하는 것입니다.

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

타겟 언어가 JavaScript인 경우 allCode 배열을 사용하여 동시 실행을 위한 여러 JS 인터프리터를 만들 수 있습니다. 타겟 언어가 Python과 같은 언어인 경우 allCode 배열은 스레딩 모듈을 사용하는 단일 프로그램으로 조립될 수 있습니다.

모든 병렬 프로그램과 마찬가지로 변수 및 함수와 같은 공유 리소스에 관해 신중한 결정을 내려야 합니다.

이벤트 기반 프로그램

이벤트 핸들러는 프로그램이 아닌 시스템에서 호출하는 함수일 뿐입니다. 이러한 블록은 실행할 블록 스택을 둘러싸거나 블록 스택 위에 있는 헤더일 수 있습니다.

일부 개발자는 이벤트 블록이 다른 블록과 구별되도록 이벤트 블록 상단에 '모자'를 추가합니다. 이는 Blockly의 기본 모양은 아니지만 렌더러 상수 ADD_START_HATS를 true로 재정의하거나(맞춤 렌더러 Codelab - 상수 재정의) 테마를 추가하고 블록 스타일에서 모자 옵션을 설정하여 추가할 수 있습니다. 테마의 일부로 블록에 모자를 설정하는 방법에 관한 자세한 내용은 테마 문서의 블록 스타일을 참고하세요.

이벤트 기반 모델에서는 프로그램 시작 핸들러도 만드는 것이 좋습니다. 이 모델에서는 이벤트 핸들러에 연결되지 않은 작업공간의 모든 블록이 무시되고 실행되지 않습니다.

이벤트를 사용하는 시스템을 설계할 때는 동일한 이벤트 핸들러의 여러 인스턴스를 지원하는 것이 가능한지 또는 바람직한지 고려하세요.

Workspace 레이아웃

왼쪽에서 오른쪽으로 화면을 배치하는 합리적인 방법은 두 가지가 있습니다. 한 가지 방법은 왼쪽의 툴바, 가운데의 작업 공간, 오른쪽의 출력 시각화로 시작하는 것입니다. 이 레이아웃은 Scratch 버전 1과 Made with Code에서 사용됩니다.

다른 방법은 왼쪽의 출력 시각화, 가운데의 툴바, 오른쪽의 작업 공간으로 시작합니다. 이 레이아웃은 Scratch 버전 2와 대부분의 Blockly 애플리케이션에서 사용됩니다.

어떤 경우든 작업공간은 사용 가능한 화면 크기에 맞게 늘어나야 합니다. 사용자는 최대한 많은 공간에서 프로그래밍해야 합니다. 위 스크린샷에서 볼 수 있듯이 첫 번째 레이아웃은 사용자의 코드와 출력 시각화가 분리되어 있으므로 와이드 화면에서 성능이 좋지 않습니다. 두 번째 레이아웃은 세 섹션을 모두 가까이 유지하면서 더 큰 프로그램을 위한 추가 공간을 허용합니다.

또한 사용자가 먼저 해결하려는 문제를 고려한 다음 제공된 도구를 살펴보고 나서야 프로그래밍을 시작하는 것이 논리적으로 타당합니다.

아랍어와 히브리어 번역의 경우 전체 순서를 바꿔야 합니다.

간단한 블록을 소수만 사용하는 경우와 같이 일부 경우에는 도구 상자가 작업 영역 위나 아래에 있는 것이 적절할 수 있습니다. Blockly는 이러한 경우 도구 상자에서 가로 스크롤을 지원하지만 주의해서 사용해야 합니다.

권장사항: 프로그램 시각화를 툴바 옆에 배치하세요.