Scratch가 3.0으로 버전이 올라가면서 사용자가 확장 블럭 (Extension)을 추가하는 것이 좀더 간단해졌다. 확장 블럭은 Scratch의 기본 기능 외에 다양한 하드웨어나 클라우드 서비스의 기능을 사용할 수 있는 것인데, 메인 화면 왼쪽 하단의 버튼을 눌러 추가한다.
Scratch에 기본적으로 포함되어 있는 확장 블럭은 다음과 같다. 외부 기기나 하드웨어 클라우드 서비스 등이 포함된다.
이제 이것들 이외에 사용자만의 블럭을 추가 할 수 있다. 이 작업은 크게 두가지로 나뉠 수 있는데, 처음은 위 화면에서 본것과 같은 확장 카드를 추가하기, 다음으론 확장 블럭 생성하기이다.
먼저 사용할 이미지를 준비한다. 위 확장 카드에서 가장 크게 보이는 이미지로, 크기는 600×372 이고, png 타입이다.
준비된 이미지를 다음의 경로에 복사한다. (경로는 앞 포스트에서 설명한 경로를 기준으로 설명함).
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/edubot.png다음으로 확장카드에 들어갈 작은 이미지와 추후 메인화면의 카테고리에 들어갈 중간 사이즈의 이미지를 준비한다. 이 이미지는 가급적이면 SVG 타입의 벡터 이미지를 사용한다. (벡터 이미지는 Illustrator, Sketch, Affinity Designer 등의 툴을 사용하면 쉽게 생성 가능)
준비된 이미지를 다음의 경로에 복사한다. (디렉토리를 생성해야함).
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/peripheral-connection/edubot/edubot-illustration.svg
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/peripheral-connection/edubot/edubot-small.svg이제 index.jsx 파일을 수정한다. 파일의 경로는 다음과 같다.
~/Developer/scratch/scratch-gui/src/lib/libraries/extensions/index.jsx저장된 이미지에 대한 변수 선언
import edubotImage from './edubot.png';
import edubotPeripheralImage from './peripheral-connection/edubot/edubot-illustration.svg';
import edubotMenuImage from './peripheral-connection/edubot/edubot-small.svg';이제 중간 쯤 적당한 곳에 블럭 생성을 위한 코드 삽입.
{
name: 'OROCA_Edubot',
extensionId: 'edubot',
collaborator: 'OROCA',
iconURL: edubotImage,
insetIconURL: edubotMenuImage,
description: (
<FormattedMessage
defaultMessage="Play with powerful small robot!"
description="Description for the 'OROCA_Edubot' extension"
id="gui.extension.oroca_edubot.description"
/>
),
featured: true,
disabled: false,
bluetoothRequired: true,
launchPeripheralConnectionFlow: true,
useAutoScan: false,
peripheralImage: edubotPeripheralImage,
smallPeripheralImage: edubotMenuImage,
connectingMessage: (
<FormattedMessage
defaultMessage="Connecting"
description="Message to help people connect to their edubot."
id="gui.extension.edubot.connectingMessage"
/>
),
helpLink: 'https://github.com/oroca/OROCA-EduBot'
},각 설정값의 의미는 다음과 같다.
이외에도
- extensionId: 확장블럭에 대한 고유 이름
- launchPeripheralConnectionFlow: 선택시 기기를 연결하기 위한 다이얼로그를 실행할 지 여부
- useAutoScan: 다이얼로그를 띄운 뒤, 자동 스캔 시작 여부
일단 저렇게 수정한 파일을 저장한다. 다음으로 확장블럭에 대한 파일을 작성한다. 해당 경로는 다음과 같다.
~/Developer/scratch/scratch-vm/src/extensions위 디렉토리에 확장 블럭의 파일을 위한 디렉토리를 생성하고, index.js 파일을 생성한다. index.js 파일의 템플릿은 ~/Developer/scratch/scratch-gui/src/examples/extensions/example-extension.js 를 참고한다.
일단 여기까지!.
안녕하세요. index.jsx파일을 수정하였는데 compile이 계속 실패하고 있어서 도움을 요청드립니다ㅠㅠ
아래와 같은 에러메시지를 혹시 어떻게 수정하면 좋을지 조언을 부탁드려도 될까요?
ERROR in ./node_modules/scratch-vm/src/extension-support/extension-worker.js (c:/Users/BYJ/AppData/Roaming/npm/node_modules/scratch-vm/node_modules/worker-loader/dist/cjs.js?name=extension-worker.js!./node_modules/scratch-vm/src/extension-support/extension-worker.js)
Module build failed (from c:/Users/BYJ/AppData/Roaming/npm/node_modules/scratch-vm/node_modules/worker-loader/dist/cjs.js):
Error: Cannot find module ‘webpack/lib/node/NodeTargetPlugin’
Require stack:
– c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\index.js
– c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\cjs.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\loader-runner\lib\loadLoader.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\loader-runner\lib\LoaderRunner.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\NormalModule.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\NormalModuleFactory.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\Compiler.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack\lib\webpack.js
– c:\Users\BYJ\Desktop\Developer\scratch\scratch-gui\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
at Function.Module._load (internal/modules/cjs/loader.js:864:27)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object. (c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\index.js:21:25)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object. (c:\Users\BYJ\AppData\Roaming\npm\node_modules\scratch-vm\node_modules\worker-loader\dist\cjs.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
@ ./node_modules/scratch-vm/src/extension-support/extension-manager.js 210:30-98
@ ./node_modules/scratch-vm/src/virtual-machine.js
@ ./node_modules/scratch-vm/src/index.js
@ ./src/containers/controls.jsx
@ ./src/playground/blocks-only.jsx
Child html-webpack-plugin for “blocks-only.html”:
1 asset
Entrypoint undefined = blocks-only.html
4 modules
Child html-webpack-plugin for “compatibility-testing.html”:
1 asset
Entrypoint undefined = compatibility-testing.html
4 modules
Child html-webpack-plugin for “index.html”:
1 asset
Entrypoint undefined = index.html
4 modules
Child html-webpack-plugin for “player.html”:
1 asset
Entrypoint undefined = player.html
4 modules
Child worker:
2 assets
Entrypoint main = 326c5f98902ccd335b5b.worker.js 326c5f98902ccd335b5b.worker.js.map
1 module
i ｢wdm｣: Failed to compile.
글쎄요… 에러 메시지 내용으론, NodeTargetPlugin 모듈을 찾을 수 없다는 것인데… 먼저 npm install을 통해 관련 모듈을 설치하셔야 할듯 한데요..
멋지십니다. ^^ 열심히 따라하는 중이예요 ~~~
감사합니다. 혹여 제가 도울 일이 있으시면 언제라도 질문 주세요. ^^
안녕하세요. ^^
확장블럭 추가하기를 해봤습니다. 일단 확장블럭란에 edubot를 그대로 넣어봤습니다. 일단 나타나기는 합니다. (index.jsx도 수정)
그리고, vm쪽에도 edubot을 넣었습니다.
스크래치를 기동하고 확장블럭에서 edubot을 선택하면 블럭들이 추가되어야 하는데…뭔가 vm쪽과 연동이 않되는지…아무 블럭도 나타나지 않네요.
그렇다고 에러가 떨어지는 건 없습니다.
무슨 단계를 생략한걸까요?
정상적으로 extension 메뉴에는 보이는데..왜 추가를 누르면 아무 반응이 없을까요?
VM쪽에 index.js도 넣었습니다. 제꺼가 않되어 edubot도 해봤는데…메뉴에만 보이고 정작 추가하면 블럭들이 추가되지 않네요. 뭐를 안한걸까요?
흠.. 크롬에서 개발자도구를 활성화 시키신 후, Console에서 어떤 에러가 나고 있는지 확인하실 수 있을겁니다. 어떤 에러 메시지가 나오는지 알려주시면 대응이 가능하겠습니다.^^
아..개발자도구에 에러가 보이네요 ^^;;
0.0.0.0/:1 Uncaught (in promise) DOMException: Failed to execute ‘importScripts’ on ‘WorkerGlobalScope’: The script at ‘http://0.0.0.0:8601/edubot’ failed to load.
이게 먼저 뜨고 나중에 위에 에러가 뜹니다.
react_devtools_backend.js:2273 [React Intl] Missing message: “gui.extension.edubot.description” for locale: “ko”, using default message as fallback.
react_devtools_backend.js:2273 [React Intl] Missing message: “gui.extension.edubot.description” for locale: “ko”, using default message as fallback.
Uncaught (in promise) DOMException: Failed to execute ‘importScripts’ on ‘WorkerGlobalScope’: The script at ‘http://0.0.0.0:8601/edubot’ failed to load.
이렇게 2개가 뜨네요.
홈페이지에 글을 남기면 글이 자꾸 뜨지 않아 또 적습니다. 혹시라도 제 글이 여러개 보이면 이해해주세요 ^^;;;
첫번째 메세지는 언어문제네요. 그 이유는 아닌거 같고요, DOMException에러의 원인이 무얼까요?
아마도 extensionId에 해당하는 것들이 없어서 (파일들…) 그럴것 같은데요… 여기선 확인이 힘들고… 작성하신 파일이나 참조할만한 내용을 압축하여 메일 주시면 검토해보도록 하겠습니다.
바쁘신데 감사합니다. ^^;;; 파일정리해서 공유드리겠습니다.~~
병규님께서 올리신 깃헙에 있는걸 다운 받아서 해보니 그것도 같은 에러가 있습니다. 제가 뭐 환경이 이상한건가요? ^^;;; 늘 감사드립니다.
yarn으로 하니 문제가 없어지네요 ㅠㅜ, 뭐가 차이인건지..
https://mryslab.github.io/bots-in-pieces/scratch3/gpio/2019/09/15/scratch3-1.html
참고하였습니다. ^^;;
흠.. 개발환경이… macOS에서 하고 계신건가요?? nodejs, npm이 별문제 없이 동작한다면 큰 문제는 없을텐데요…
네, 현재 맥인데요..npm 잘 작동했는데…익스텐션추가하면서 에러가 나서요…글 찾아보니 누가 리포팅을 yarn 써서 했다고 하더라고요. npm에서 다시 해보게요 ^^. 감사합니다.
이제야 정리가 되었습니다. ^^
맥에서 npm, yarn에서 다 잘 됩니다. npm install과 npm link 할 때 순서가 중요했었던거 같습니다.
extension 추가와 index.js 파일 구조도 이제 이해했습니다. 병규님 대단하십니다. 이걸 다 이해하시고 ㅋㅋ
여러모로 정리해주신 내용 정말 고맙습니다. ^^
한가지…현재 상태에서 카메라 익스텐션이 작동 않되는데…예전에 app으로 말아 놓으니까 잘 작동하던데..원래 npm start로 하면 실행이 에러가 나는건지…여튼 이것도 연구해보겠습니다. ^^;;
아~ 잘되신다니 다행이네요.. 제가 별로 도움을 못드려 죄송합니다.^^