Config 블록 개발자 도구(Blockly Developer Tools)

[주인장]

블록 개발자 도구(Blockly Developer Tools)

- Blockly 개발자 도구는 웹 기반 개발자 도구로, 맞춤 블록을 빌드하여 애플리케이션에 포함할 수 있음

- https://google.github.io/blockly-samples/examples/developer-tools/index.html

Blockly Developer Tools

블록 정의

- 블록 팩토리 작업공간은 빈 구성 블록으로 시작

- 도구 상자의 각 카테고리에서 블록을 드래그하여 입력 및 필드를 블록에 추가

- 구성 블록을 수정하여 블록의 도움말 텍스트, 도움말 URL, 색상, 연결 확인을 설정할 수도 있음

- 블록 팩토리는 한 번에 한 가지 유형의 블록만 생성할 수 있음

- 함께 연결된 여러 블록을 설계하려면 블록을 별도로 설계하고 도구 상자 정의에서 연결

- 블록에는 뮤테이터와 같은 고급 기능이 있을 수 있지만 이러한 고급 기능은 팩토리에서 만들 수 없음.

- 블록의 기본 형태를 빌드한 후에는 문서에 따라 블록 정의를 수정함

- 작업공간에서 구성 블록을 수정하면 블록의 미리보기가 자동으로 업데이트

- 애플리케이션에 추가해야 하는 코드도 자동으로 업데이트

출력 구성

- Blockly는 블록을 정의하고 Blockly 자체를 로드하는 다양한 방법을 지원하며, 여러 개의 기본 제공 코드 생성기 언어를 보유

블록 형식 가져오기

- HTML의 <script> 태그를 통해 또는 애플리케이션에서 빌드 도구를 사용하는 경우 import 문을 통해 Blockly를 로드

- 선택에 따라 Blockly API의 특정 부분을 참조하는 방법이 달라집니다.

- 어떤 방법을 사용하든 애플리케이션에 해당하는 코드가 정확하도록 블록 팩토리에서 해당하는 선택을 선택해야 합니다.

블록 정의 형식

- Blockly는 JSON 또는 JavaScript에서 블록 정의를 지원

- JSON 형식을 사용하는 것이 좋지만 변형자와 같은 고급 기능을 추가하려면 JavaScript 형식을 사용할 수 있음.

코드 생성기 언어

- 여러 코드 생성기 언어와 함께 Blockly를 사용할 수 있음

- 해당하는 블록 코드 생성기 스텁을 표시하기 위해 애플리케이션에 필요한 언어를 선택

- 커스텀 언어 생성기를 사용하는 경우 코드를 애플리케이션에 복사한 후 맞춤 CodeGenerator 클래스의 이름을 수정할 수 있음

코드 출력

- 블록 팩토리의 다음 섹션에서는 생성한 블록을 로드하기 위해 애플리케이션에 복사해야 하는 코드를 보여줌.

- 코드를 복사하는 위치는 애플리케이션을 구조화한 방법에 따라 다르지만 일반적으로 정의 및 블록 코드 생성기 앞에 코드 헤더를 실행하고, 도구 상자에서 사용하기 전에 블록 정의, 블록 코드 생성기를 실행한 다음에 작업공간용 코드를 생성

- 각 섹션에서 복사 버튼을 사용하여 해당 섹션의 전체 코드 블록을 복사할 수 있습니다.

코드 헤더

- 코드 헤더 섹션에는 핵심 Blockly 라이브러리와 선택한 언어 생성기를 로드하는 데 필요한 코드가 나와 있습니다. 

코드 정의

- 블록 정의는 블록의 모양(예: 필드 및 입력, 색상 등)을 Blockly에 알리는 방법

- 코드를 실행하면 Blockly는 type만을 기준으로 블록을 만드는 방법을 알게 됨

생성기 스텁

- 블록 코드 생성기는 블록에 생성되어야 하는 코드를 설명하는 방법

- Block Factory에서 생성한 생성기 스텁은 블록에 있는 입력 및 필드의 값을 가져오기 위한 기본 코드를 제공.

- 생성될 최종 코드에 이러한 값을 결합하는 것은 사용자의 책임.

블록 라이브러리

- 블록은 블록을 변경할 때마다 브라우저의 로컬 저장소에 자동으로 저장

- 상단 툴바에서 해당 버튼을 클릭하여 새 블록을 만들거나 로컬 스토리지에서 기존 블록을 로드할 수 있음