Blockly의 핵심을 해킹하거나 플러그인을 개발할 때 플레이그라운드는 매우 유용한 도구입니다. 테스트, 디버깅 또는 프로토타입 제작에 사용할 수 있는 사전 구성된 Blockly 인스턴스가 있습니다. Google에서 Blockly의 거의 모든 개발은 플레이그라운드를 사용하여 이루어집니다. 예를 들어 데모 서버의 간단한 플레이그라운드를 통해 미리 볼 수 있습니다.
Core Blockly의 플레이그라운드에는 단순, 고급, 멀티의 3가지 유형이 있습니다. 블록리 샘플에서는 일반적으로 고급 플레이그라운드만 사용됩니다.
기본 요건
이제 Blockly는 클로저 모듈 시스템을 사용합니다. 컴파일되지 않은 클로저 모듈은 로드되는 방식 때문에 http: 또는 https: URL에서 가져와야 하며 file: URL에서 직접 가져올 수 없습니다. 따라서 컴파일되지 않은 모드로 플레이그라운드를 로드하려면 로컬 웹 서버에서 로드해야 합니다.
로컬 서버를 시작하고 Blockly 모듈을 로드하는 데 필요한 모든 코드를 로드하는 스크립트를 만들었습니다. 모든 종속 항목을 설치하려면 머신에 npm을 설치하고 Blockly의 루트에서 npm install를 실행해야 합니다.
Internet Explorer 사용
이제 Blockly는 Internet Explorer와 호환되지 않을 수 있는 고급 기능을 코드베이스에서 사용합니다. 압축된 (컴파일된) 코드에서는 이러한 기능이 IE와 함께 작동하도록 트랜스파일되지만, 압축되지 않은 코드를 로드하는 것은 작동하지 않을 수 있습니다. 로컬 http 서버를 통해서도 플레이그라운드를 IE에서 로드하면 플레이그라운드는 호환성을 보장하기 위해 압축된 Blockly 코드를 자동으로 로드합니다. 압축 모드로 플레이그라운드의 변경사항을 테스트하는 방법에 관한 자세한 내용은 '플레이그라운드 직접 액세스' 섹션을 참고하세요.
간단한 플레이그라운드
다른 두 플레이그라운드는 단순한 플레이그라운드를 기반으로 합니다. 여기에는 도구 상자와 작업공간이 표시되며, 제한된 수의 설정을 조정할 수 있습니다.
플레이그라운드를 열려면 다음을 실행합니다.
npm run start
Blockly의 루트에서 가져온 것입니다. 포트 8080에서 리슨하는 다른 항목이 없는지 확인합니다. 이 명령어는 Blockly 모듈을 호스팅하는 서버를 시작하고 플레이그라운드 페이지를 자동으로 엽니다. 플레이그라운드를 종료할 준비가 되면 프로세스를 종료합니다 (Mac 및 Linux 환경에서는 ctrl-c).
놀이터의 특징은 다음과 같습니다.
- 신속한 개발을 위해 모든 코드가 압축되지 않습니다.
- 모든 기본 차단 (일부 지원 중단된 차단 제외)
- 모든 언어 생성기 (JavaScript, Python, PHP, Lua, Dart)
- 작업공간 상태 (JSON 또는 XML)를 직렬화 및 역직렬화합니다.
- LTR과 RTL 레이아웃 간 전환
- 도구 상자 레이아웃 간에 전환합니다.
- 렌더기의 스트레스 테스트
- 콘솔에 모든 이벤트를 로깅합니다.
고급 플레이그라운드
고급 플레이그라운드에는 Blockly 디버깅을 더 쉽게 할 수 있는 추가 기능이 포함되어 있습니다. 이는 모든 플러그인의 블록리 샘플에 사용되는 기본 플레이그라운드이기도 합니다.
이 플레이그라운드에는 간단한 플레이그라운드 기능은 모두 포함되어 있으며 다음 기능도 갖추고 있습니다.
- 그리드 크기, 확대/축소/이동 컨트롤, 렌더기, 테마 등의 추가 설정을 구성할 수 있습니다.
- 사용된 설정과 블록은 캐시되며 다음에 플레이그라운드가 로드될 때 자동으로 사용됩니다.
- 동일한 창에서 각 생성기의 출력을 확인합니다.
블록리 샘플에서 플러그인의 고급 플레이그라운드를 시작하려면 플러그인 루트 디렉터리에서 npm run
start를 실행합니다. 현재는 한 번에 하나의 플러그인만 실행할 수 있으며 포트 3000을 사용합니다. 플러그인을 시작하는 데 문제가 있으면 먼저 해당 포트에서 리슨하는 다른 항목이 있는지 확인합니다.
Core에서 고급 플레이그라운드를 시작하려면 Blockly의 루트에서 npm run start를 실행한 다음 제목 아래의 'Advanced' 링크를 클릭합니다.
Blockly의 dev-tools 패키지를 사용하여 고급 플레이그라운드가 포함된 자체 테스트 페이지를 만들 수도 있습니다.
멀티 플레이그라운드
멀티 플레이그라운드에는 LTR 모드와 도구 상자 위치에 맞게 구성이 서로 다른 여러 플레이그라운드가 포함되어 있습니다. 주로 Blockly가 출시 전에 LTR과 관련된 문제를 위반하지 않았는지 빠르게 확인하는 데 사용됩니다. 이 플레이그라운드를 열려면 간단한 플레이그라운드의 단계를 따른 후 URL을 /tests/multi_playground.html로 변경합니다.
변경사항 테스트
로컬 서버에서 플레이그라운드를 실행할 때 대부분의 경우 Blockly의 변경사항을 확인하려면 페이지를 새로고침하면 됩니다. 새 파일을 추가했거나 파일에 새 종속 항목을 추가했다면 먼저 npm run
build를 실행하여 종속 항목이 올바르게 로드되도록 test/deps.js 파일을 업데이트한 후 페이지를 새로고침해야 할 수 있습니다.
플러그인의 고급 플레이그라운드를 실행 중이라면 페이지를 새로고침하지 않아도 됩니다. 변경사항은 자동으로 핫로드됩니다.
플레이그라운드에 직접 액세스
이전에는 브라우저에서 test/playground.html 파일로 직접 이동하여 간단한 플레이그라운드에 로컬에서 액세스했습니다. 간단한 다중 플레이그라운드를 사용하면 가능하지만 더 이상 권장되지 않습니다. 이렇게 하면 Playground가 로컬 서버가 실행되고 있지 않음을 감지하고 압축된 Blockly 파일을 자동으로 사용한다는 것을 감지하고 (자세한 내용은 Blockly 빌드 페이지 참고) Core Blockly에서 무언가를 변경할 때마다 코어를 다시 빌드하고 변경사항을 스테이징해야 합니다. 데모 사이트에 호스팅된 예와 같이 원격 서버에서 호스팅되는 경우 이 페이지에 계속 액세스할 수 있습니다. 압축 모드에서는 배경이 밝은 파란색으로 표시됩니다.
file: 액세스를 통해서는 고급 플레이그라운드를 이용할 수 없습니다.