애플리케이션 설계

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는 Toolbox에서 가로 스크롤을 지원하지만 주의해서 사용해야 합니다.

권장사항: 프로그램 시각화를 툴바 옆에 배치합니다.