Blockly 개발자 도구는 웹 기반 개발자 도구로, 맞춤 블록을 빌드하여 애플리케이션에 포함할 수 있습니다.
차단 정의
블록 팩토리 작업공간은 빈 구성 블록으로 시작합니다. 도구 상자의 각 카테고리에서 블록을 드래그하여 입력 및 필드를 블록에 추가할 수 있습니다. 구성 블록을 수정하여 블록의 도움말 텍스트, 도움말 URL, 색상, 연결 확인을 설정할 수도 있습니다.
블록 팩토리는 한 번에 한 가지 유형의 블록만 생성할 수 있습니다. 함께 연결된 여러 블록을 설계하려면 블록을 별도로 설계하고 도구 상자 정의에서 연결해야 합니다. 또한 블록에는 뮤테이터와 같은 고급 기능이 있을 수 있지만 이러한 고급 기능은 팩토리에서 만들 수 없습니다. 블록의 기본 형태를 빌드한 후에는 문서에 따라 블록 정의를 수정해야 합니다.
작업공간에서 구성 블록을 수정하면 블록의 미리보기가 자동으로 업데이트됩니다. 애플리케이션에 추가해야 하는 코드도 자동으로 업데이트됩니다.
출력 구성
Blockly는 블록을 정의하고 Blockly 자체를 로드하는 다양한 방법을 지원하며, 여러 개의 기본 제공 코드 생성기 언어를 보유합니다. 블록 및 블록 코드 생성기를 정의하는 방법은 이러한 요소에 따라 다르므로 블록 팩토리에서 설정하여 코드 출력을 변경할 수 있습니다.
차단 형식 가져오기
HTML의 <script> 태그를 통해 또는 애플리케이션에서 빌드 도구를 사용하는 경우 import 문을 통해 Blockly를 로드할 수 있습니다. 선택에 따라 Blockly API의 특정 부분을 참조하는 방법이 달라집니다. 선택할 수 있는 방법에 대한 자세한 내용은 Blockly 로드에 관한 문서를 참조하세요.
어떤 방법을 사용하든 애플리케이션에 해당하는 코드가 정확하도록 블록 팩토리에서 해당하는 선택을 선택해야 합니다.
블록 정의 형식
Blockly는 JSON 또는 JavaScript에서 블록 정의를 지원합니다. JSON 형식을 사용하는 것이 좋지만 변형자와 같은 고급 기능을 추가하려면 JavaScript 형식을 사용할 수 있습니다.
코드 생성기 언어
여러 코드 생성기 언어와 함께 Blockly를 사용할 수 있습니다. 해당하는 블록 코드 생성기 스텁을 표시하기 위해 애플리케이션에 필요한 언어를 선택합니다. 커스텀 언어 생성기를 사용하는 경우 코드를 애플리케이션에 복사한 후 맞춤 CodeGenerator 클래스의 이름을 수정할 수 있습니다.
코드 출력
블록 팩토리의 다음 섹션에서는 생성한 블록을 로드하기 위해 애플리케이션에 복사해야 하는 코드를 보여줍니다. 코드를 복사하는 위치는 애플리케이션을 구조화한 방법에 따라 다르지만 일반적으로 정의 및 블록 코드 생성기 앞에 코드 헤더를 실행하고, 도구 상자에서 사용하기 전에 블록 정의, 블록 코드 생성기를 실행한 다음에 작업공간용 코드를 생성해야 합니다. 각 섹션에서 복사 버튼을 사용하여 해당 섹션의 전체 코드 블록을 복사할 수 있습니다.
코드 출력을 사용하는 방법을 잘 모르겠다면 맞춤 블록과 블록 코드 생성기의 예가 포함된 샘플 앱을 참조하세요.
코드 헤더
코드 헤더 섹션에는 핵심 Blockly 라이브러리와 선택한 언어 생성기를 로드하는 데 필요한 코드가 나와 있습니다. 여기에는 다른 구성도 있을 수 있습니다. 예를 들어 블록에 포함할 수 있는 일부 필드는 Blockly 플러그인에서 가져옵니다. 이러한 플러그인에는 자체 가져오기 문이 있으며, 필드를 초기화하기 위해 실행해야 하는 다른 코드도 있을 수 있습니다. 이 코드는 다음 코드 섹션 중 하나 앞에 포함되어야 합니다.
차단 정의
블록 정의는 블록의 모양(예: 필드 및 입력, 색상 등)을 Blockly에 알리는 방법입니다. 이 코드를 실행하면 Blockly는 type만을 기준으로 블록을 만드는 방법을 알게 됩니다.
샘플 앱을 사용하는 경우 blocks/ 디렉터리 아래의 파일에 이 코드를 포함할 수 있습니다. 자체 애플리케이션 구조가 있는 경우 도구 상자 정의와 같이 이름으로 블록을 참조하기 전에 이 코드를 포함해야 합니다. 어떤 방법을 사용하든 이 코드를 포함한 파일에 코드 헤더가 있는지 확인하세요.
생성기 스텁
블록 코드 생성기는 블록에 생성되어야 하는 코드를 설명하는 방법입니다. Block Factory에서 생성한 생성기 스텁은 블록에 있는 입력 및 필드의 값을 가져오기 위한 기본 코드를 제공합니다. 생성될 최종 코드에 이러한 값을 결합하는 것은 사용자의 책임입니다.
샘플 앱을 사용하는 경우 generators/ 디렉터리 아래의 파일에 이 코드를 포함할 수 있습니다. 자체 애플리케이션 구조가 있는 경우 커스텀 블록이 포함된 작업공간에 대한 코드를 생성하기 전에 이 코드를 포함해야 합니다. 어떤 방법을 사용하든 이 코드를 포함한 파일에 코드 헤더가 있는지 확인하세요.
동영상 둘러보기
이 동영상에서는 블록을 정의하는 단계를 자세히 안내합니다. UI는 최신 버전이 아니지만 UI에서 강조하는 블록 기능의 정확성은 여전히 더 높습니다.
라이브러리 차단
블록은 블록을 변경할 때마다 브라우저의 로컬 저장소에 자동으로 저장됩니다. 상단 툴바에서 해당 버튼을 클릭하여 새 블록을 만들거나 로컬 스토리지에서 기존 블록을 로드할 수 있습니다.
기존 블록 팩토리에서 가져오기
기존 블록 팩토리를 사용했고 기존 블록 정의를 새 도구로 이전하려면 다음 단계를 따르세요.
기존 Block Factory의 툴바에서
Export Block Library버튼을 클릭합니다. 그러면 모든 블록 정의가 포함된 파일이 다운로드됩니다.
새로운 Block Factory의 툴바에서
Load block버튼을 클릭합니다.메뉴에서 'Import from Block Factory' 옵션을 선택합니다.
1단계에서 다운로드한 파일을 업로드합니다.
블록 정의는 새 형식으로 자동 변환되며 이제
Load block메뉴에서 사용할 수 있습니다. 기존 블록과 충돌한 경우 블록의 이름이 변경되었을 수 있습니다.블록을 파싱하는 중에 오류가 발생하면 해당 블록을 로드할 수 없습니다. 차단된 샘플을 대상으로 버그를 신고하고 파싱할 수 없는 파일을 포함하면 도움이 됩니다.