Blockly 개발자 도구
는 맞춤 블록 만들기, 도구 상자 빌드, 웹 Blockly 작업공간 구성 등 Blockly 구성 프로세스의 일부를 자동화하는 웹 기반 개발자 도구입니다.
이 도구를 사용하는 Blockly 개발자 프로세스는 세 부분으로 구성됩니다.
- Block Factory 및 Block Exporter를 사용하여 맞춤 블록을 만듭니다.
- Workspace Factory를 사용하여 도구 상자와 기본 작업공간을 빌드합니다.
- Workspace 팩토리 (현재 웹 전용 기능)를 사용하여 작업공간을 구성합니다.
공장 출고 시 탭 차단
Block Factory 탭을 사용하면 맞춤 블록의 블록 정의 및 블록 코드 생성기를 만들 수 있습니다. 이 탭에서 맞춤 블록을 쉽게 만들고 수정하고 저장할 수 있습니다.
블록 정의
이 동영상에서는 블록을 정의하는 단계를 자세히 살펴봅니다. UI는 오래되었지만 UI가 강조 표시하는 블록 기능은 여전히 정확합니다.
라이브러리 관리
블록은 이름으로 참조되므로 만들려는 각 블록에는 고유한 이름이 있어야 합니다. UI는 이를 적용하고 새 블록을 '저장'하거나 기존 블록을 '업데이트'할 때 이를 명확하게 표시합니다.
라이브러리 버튼을 클릭하여 이전에 저장한 블록 간에 전환하거나 새로운 빈 블록을 만들 수 있습니다. 기존 블록의 이름을 변경하는 것은 유사한 정의로 여러 블록을 빠르게 만드는 또 다른 방법입니다.
라이브러리 내보내기 및 가져오기
블록은 브라우저의 로컬 저장소에 저장됩니다. 브라우저의 로컬 저장소를 지우면 블록이 삭제됩니다. 블록을 무기한 저장하려면 라이브러리를 다운로드해야 합니다. 블록 라이브러리는 XML 파일로 다운로드되며, 이 파일을 가져와서 블록 라이브러리를 파일을 다운로드했을 때의 상태로 설정할 수 있습니다. 블록 라이브러리를 가져오면 현재 라이브러리가 대체되므로 먼저 내보내는 것이 좋습니다.
가져오기 및 내보내기 기능은 다양한 맞춤 블록 세트를 유지관리하고 공유하는 데에도 권장되는 방법입니다.
내보내기 차단 탭
블록을 설계한 후에는 블록 정의와 생성기 스텁을 내보내 앱에서 사용해야 합니다. 이 작업은 차단 내보내기 탭에서 수행할 수 있습니다.
블록 라이브러리에 저장된 모든 블록이 블록 선택기에 표시됩니다. 내보낼 블록을 클릭하여 선택하거나 선택 해제합니다. 라이브러리의 모든 블록을 선택하려면 '선택' → '라이브러리에 저장된 모든 항목' 옵션을 사용하세요. 도구 상자를 빌드했거나 작업공간 팩토리 탭을 사용하여 작업공간을 구성한 경우 '선택' → 'Workspace Factory에서 모두 사용됨'을 클릭하여 사용한 모든 블록을 선택할 수도 있습니다.
내보내기 설정을 사용하면 타겟팅할 생성된 언어를 선택하고 선택한 블록의 정의, 생성기 스텁 또는 둘 다를 원하는지 여부를 선택할 수 있습니다. 이러한 항목을 선택했으면 '내보내기'를 클릭하여 파일을 다운로드합니다.
Workspace Factory 탭
작업공간 팩토리를 사용하면 작업공간에서 도구 상자 및 기본 블록 세트를 쉽게 구성할 수 있습니다. '도구 상자' 및 '작업공간' 버튼을 사용하여 도구 상자 수정과 시작 작업공간 간에 전환할 수 있습니다.
도구 상자 빌드
이 탭은 도구 상자의 XML을 빌드하는 데 도움이 됩니다. 이 자료는 도구 상자의 기능을 잘 알고 있다고 가정합니다. 여기에서 수정하려는 도구 상자의 XML이 이미 있다면 'Load to Edit(수정하려면 로드)'를 클릭하여 로드할 수 있습니다.
카테고리가 없는 도구 상자
블록이 몇 개 있는데 카테고리 없이 표시하려면 작업공간으로 드래그하기만 하면 블록이 미리보기의 도구 상자에 표시됩니다.
카테고리가 있는 도구 상자
카테고리에 블록을 표시하려면 '+' 버튼을 클릭하고 새 카테고리의 드롭다운 항목을 선택합니다. 이렇게 하면 선택하고 수정할 수 있는 카테고리가 카테고리 목록에 추가됩니다. '표준 카테고리'를 선택하여 개별 표준 Blockly 카테고리 (로직, 루프 등)를 추가하거나 '표준 도구 상자'를 선택하여 모든 표준 Blockly 카테고리를 추가합니다. 카테고리 순서를 변경하려면 화살표 버튼을 사용하세요.
선택한 카테고리의 이름 또는 색상을 변경하려면 '카테고리 수정' 드롭다운을 사용합니다. 블록을 작업공간으로 드래그하면 선택한 카테고리에 추가됩니다.
고급 블록
기본적으로 라이브러리의 모든 표준 블록 또는 블록을 도구 상자에 추가할 수 있습니다. 라이브러리에 없는 JSON으로 정의된 블록이 있는 경우 '맞춤 블록 가져오기' 버튼을 사용하여 가져올 수 있습니다.
일부 블록은 함께 사용하거나 기본값을 포함해야 합니다. 이 작업은 그룹 및 그림자를 사용하여 수행됩니다. 편집기에서 연결된 모든 블록은 도구 상자에 그룹으로 추가됩니다. 다른 블록에 연결된 블록도 하위 블록을 선택하고 '그림자 만들기' 버튼을 클릭하여 섀도우 블록으로 변경할 수 있습니다. 참고: 변수가 포함되지 않은 하위 블록만 섀도우 블록으로 변경할 수 있습니다.
도구 상자에 변수 또는 함수 블록을 포함하는 경우 사용자가 블록을 최대한 활용할 수 있도록 도구 상자에 '변수' 또는 '함수' 카테고리를 포함합니다. '변수' 또는 '함수' 카테고리에 대해 자세히 알아보세요.
작업공간 구성 (웹 Blockly용)
작업공간의 다른 부분을 구성하려면 '작업공간 팩토리' 탭으로 이동하여 '작업공간'을 선택합니다.
작업공간 옵션 선택
구성 옵션에 다른 값을 설정하고 미리보기 영역에서 결과를 확인합니다. 그리드 또는 확대/축소를 사용 설정하면 더 많은 구성 옵션이 표시됩니다. 또한 카테고리를 사용하도록 전환하려면 일반적으로 더 복잡한 작업공간이 필요합니다. 첫 번째 카테고리를 추가하면 휴지통과 스크롤바가 자동으로 추가됩니다.
작업공간에 미리 로드된 블록 추가
이는 선택사항이지만 작업공간에 블록 집합을 표시하려는 경우 필요할 수 있습니다.
- 애플리케이션이 로드될 때
- 이벤트 (레벨 올리기, 도움말 버튼 클릭 등)가 트리거됩니다.
블록을 수정 공간으로 드래그하여 미리보기의 작업공간에서 확인하세요. 블록 그룹을 만들고 블록을 사용 중지하며 특정 블록을 선택할 때 섀도 블록을 만들 수 있습니다.
이러한 블록을 XML로 내보낼 수 있습니다 (아래 참조). 작업공간을 만든 직후에 Blockly.Xml.domToWorkspace를 사용하여 작업공간에 추가합니다.
var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);
이 샘플 코드는 작업공간에 단일 math_number 블록을 추가합니다.
내보내기
Workspace Factory는 다음과 같은 내보내기 옵션을 제공합니다.
- 시작 코드: 시작 HTML 및 자바스크립트를 생성하여 맞춤설정된 Blockly 작업공간을 삽입합니다.
- 도구 상자: 도구 상자를 지정하는 XML을 생성합니다.
- 작업공간 블록: 작업공간에 로드할 수 있는 XML을 생성합니다.