Blockly 개발자 도구
웹 기반 개발자 도구로, Blockly 구성의 일부를 자동화합니다.
커스텀 블록 만들기, 도구 상자 만들기,
웹 Blockly 작업공간을 구성할 수 있습니다.
도구를 사용하는 Blockly 개발자 프로세스는 세 부분으로 구성됩니다.
- 블록 팩토리 및 블록 내보내기 도구를 사용하여 맞춤 블록을 만듭니다.
- Workspace Factory를 사용하여 도구 상자와 기본 작업공간을 빌드합니다.
- Workspace Factory (현재 웹 전용)를 사용하여 작업공간을 구성합니다. 기능).
공장 출고 시 탭 차단
Block Factory 탭을 사용하면 블록 정의 및 블록 코드 생성기 를 참조하세요. 이 탭에서는 쉽게 만들고, 수정하고, 저장할 수 있습니다. 맞춤 템플릿을 만들 수도 있습니다.
블록 정의
이 동영상에서는 블록을 정의하는 단계를 자세히 안내합니다. UI가 벗어남 그러나 표시된 차단 기능은 여전히 정확합니다.
라이브러리 관리
블록은 이름으로 참조되므로 만들려는 각 블록에 이름을 지정할 수 있습니다 UI는 이를 강제하며 '저장'할 때 이를 명확하게 표시합니다. 새로운 블록 또는 '업데이트 중' 추가할 수 있습니다.
이전에 저장한 블록 간에 전환하거나 새로운 빈 블록을 만들 수 있습니다. 클릭하여 차단할 수 있습니다. 기존 블록의 이름 변경은 정의가 유사한 여러 블록을 빠르게 만드는 또 다른 방법입니다.
라이브러리 내보내기 및 가져오기
블록은 브라우저의 로컬 저장소에 저장됩니다. 브라우저의 로컬 저장소 삭제 스토리지에서 블록이 삭제됩니다 차단을 무기한 저장하려면 라이브러리를 다운로드합니다. 차단 라이브러리는 XML로 다운로드됩니다. 파일을 가져올 수 있습니다. 표시됩니다. 차단 라이브러리를 가져오면 최신 데이터이므로 먼저 내보내는 것이 좋습니다.
가져오기 및 내보내기 기능은 다양한 맞춤 템플릿을 공유합니다.
내보내기 차단 탭
블록을 설계한 후에는 블록 정의를 내보내야 합니다. 생성기 스텁을 생성하여 앱에서 사용할 수 있습니다. 이 작업은 내보내기 차단 탭
차단 라이브러리에 저장된 모든 블록은 차단 선택기에 표시됩니다. 차단을 클릭하여 내보내기를 선택하거나 선택 해제합니다. 선택 항목 'Select(선택)' → 'All Saved In Block(블록에 저장된 모든 블록)'을 사용합니다. 선택할 수 있습니다. Google Cloud 콘솔에서 도구 상자를 빌드하거나 작업공간에서 공장 출고 시 탭에서 사용하는 모든 블록을 선택할 수도 있습니다. '선택' → 'Workspace 팩토리에서 사용된 모든 항목'을 클릭합니다.
내보내기 설정을 사용하면 타겟팅할 생성된 언어를 선택할 수 있습니다. 를 선택하는 것이 좋습니다. 차단하도록 요청할 수 있습니다. 항목을 선택했으면 '내보내기'를 클릭합니다. 지금 바로 할 수 있습니다.
작업공간 초기화 탭
Workspace Factory를 사용하면 도구 상자와 기본값을 쉽게 구성할 수 있습니다. 블록 집합이라고 할 수 있습니다 도구 상자와 '도구 상자'로 작업공간을 시작합니다. 'Workspace'라는 버튼을 클릭합니다.
도구 상자 빌드
이 탭은 도구 상자의 XML을 빌드하는 데 도움이 됩니다. 이 자료는 도구 상자의 기능을 숙지하고 있어야 합니다. 여기에서 수정하려는 도구 상자의 XML이 이미 있는 경우 '수정할 로드'를 클릭하여 로드할 수 있습니다
카테고리가 없는 도구 상자
블록이 몇 개 있고 카테고리 없이 이를 표시하려면 작업공간으로 드래그하면 도구 상자에 블록이 표시됩니다. 미리 볼 수 있습니다
카테고리가 있는 도구 상자
카테고리에 블록을 표시하려면 '+' 버튼을 클릭하고 새 카테고리의 드롭다운 항목을 찾습니다. 이렇게 하면 카테고리 목록에 카테고리가 추가됩니다. 선택하고 수정할 수 있습니다. 개인을 추가하려면 '표준 카테고리'를 선택하세요. 'Standard Toolbox'와 같은 표준 Blockly 카테고리 또는 표준 Blockly 카테고리입니다. 화살표 버튼을 사용하여 카테고리를 재정렬합니다.
선택한 카테고리의 이름이나 색상을 변경하려면 '카테고리 수정'을 사용하세요. 선택합니다. 작업 영역으로 블록을 드래그하면 선택한 카테고리입니다.
고급 차단
기본적으로 라이브러리에 있는 표준 블록이나 모든 블록을 추가할 수 있습니다. 추가합니다. JSON으로 정의된 블록이 라이브러리에 없는 경우 ‘맞춤 블록 가져오기’ 버튼을 클릭합니다.
일부 블록은 함께 사용하거나 기본값을 포함해야 합니다. 이 작업은 그룹 및 그림자입니다. 모든 문자 편집기에서 연결된 블록은 도구 상자에 그룹으로 추가됩니다. 다른 블록에 연결된 블록도 섀도 블록으로 변경할 수 있습니다. 하위 블록을 선택하고 'Make Shadow(그림자 만들기)'를 클릭하여 버튼을 클릭합니다. 참고: 변수를 포함하지 않는 하위 블록만 그림자로 변경될 수 있습니다. 있습니다.
도구 상자에 변수나 함수 블록을 포함하는 경우 사용자는 도구 상자의 '변수' 또는 '함수' 카테고리를 기반으로 블록을 활용합니다. 다음에 대해 자세히 알아보기 '변수' 또는 '함수' 카테고리의 목록을 참조하세요.
작업공간 구성 (웹 Blockly용)
작업공간의 여러 부분을 구성하려면 'Workspace Factory'로 이동하세요. '작업공간'을 선택합니다
작업공간 옵션 선택
다음에 대해 다른 값 설정 구성 옵션 미리보기 영역에서 결과를 확인합니다. 사용 설정 중 grid 또는 zoom을 사용하면 구성할 수 있는 추가 옵션이 표시됩니다. 또한 카테고리를 사용하도록 전환하려면 일반적으로 더 복잡한 작업을 workspace; 항목을 추가하면 휴지통과 스크롤바가 첫 번째 카테고리입니다.
작업공간에 미리 로드된 블록 추가하기
이는 선택사항이지만, 목록에 블록 집합을 표시하려는 경우 필요할 수 있습니다. 확인할 수 있습니다.
- 애플리케이션이 로드될 때
- 이벤트 (레벨 진행, 도움말 버튼 클릭 등)가 트리거될 때
블록을 수정 공간으로 드래그하여 미리보기로 작업공간에서 확인하세요. 블록 그룹을 만들고, 블록을 사용 중지하고, 특정 블록을 섀도잉할 수 있습니다. 표시되지 않습니다.
이러한 블록을 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 및 자바스크립트를 생성하여 맞춤 블록 작업공간
- 도구 상자: 도구 상자를 지정하는 XML을 생성합니다.
- 작업공간 블록: 작업공간에 로드할 수 있는 XML을 생성합니다.