How to Develop Your Own Block for Scratch 3.0
Prepare development environment and develop your own block on Scratch 3.0 with Node.js
[UPDATE] 08/18/2019: updated extension-manager.js and published my repository to https://github.com/onelittlenightmusic/scratch-gui
[UPDATE] 09/05/2019: I summarized block types you can choose in this article.
[UPDATE] 09/11/2019: The Python Banyan creator Alan Yorinks kindly taught some development environment conditional error using npm . He wrote blog about it. I added my environments for information.
Jan 2nd 2019, this finally came. Scratch 3.0 was released.
Scratch
So exciting, isn’t it?
The user interface is more sophisticated than before. And now we can touch it on tablet devices such as iPad.
In this article, I’ll describe about important points of Scratch 3.0 and how to add your own blocks into it.
Important points of 3.0 (for users)
- Requirement: only browser (as it was)
- It works without Flash 👍
Then iPad, iPhone and any other smart devices are OK. - Tutorials is much more.
You can begin without any training. - Design becomes clearer
Important points of 3.0 (for developers)
- Scratch 3.0 is developed with Node.js. Not TypeScript, plain JavaScript.
- It is developed on React.JS framework. Each view sections are separated as components. This architecture is also sophisticated as design.
- Compatible with ES2015(const etc.). But no support of ES2017(async). Built with webpack.
- You can develop your own blocks as extensions. This is the same as Scratch 2 but its specification seems slightly changed.
- You can import npm packages onto your development environment.
Create your own blocks
I tried the following 2 methods and succeeded.
- Method #1. On a trial website
- Method #2. On your development environment
Method #1. On a TRIAL website
Pros and cons
- Easy to start
- Can import only one JavaScript file
- This environment resets after every browser reload
- Impossible to import NPM packages
Procedure
The following article introduced the trial method .
A trial website in this following link enables us to load new JavaScript file as extension and to test it.
Trial website
https://sheeptester.github.io/scratch-gui/
Result
A test module is loaded and works well. This module only generates new log line “hello”. In the website, “hello” log
Method #2. On your development environment
Thank you Japanese Wikipedia Twitter Account for instruct me.
Pros and Cons
- You will have your own development environment
- You can import NPM packages and utilize them to create your own blocks.
- Sharing and publishing your own blocks is not supported yet (at this time 2019.1).
Procedure
The following resources are so informative. I arranged these to be simpler.
We will create a new block to do just one thing “Write a Log”.
(Japanese Scratch Wiki)
1) Prepare your development environment
If you have Windows PC, I recommend installing WSL (ubuntu or some Linux environment on Windows).
My development environment patterns which were successful —
Pattern 1
{OS: Window 10,
npm: v6.4.1,
node: v11.2.0,
— using WSL (ubuntu 18.04)}Pattern 2
{OS: MacOS 10.14.6,
npm: v6.9.0,
node: v12.1.0}
First, please download clones of 2 git repositories (scratch-vm, scratch-gui).
Because both projects need to be modified and compiled together, we link both projects with npm command so that scratch-gui becomes a parent project and scratch-vm gets linked to the parent.
Check that compiling is done and Scratch service starts.
After compiling, access to the following address with your browser.
Done!
2) Implement your block
We create a new extension called “newblocks”. Each extension can have multiple blocks, but this newblocks extension has only one block.
Add (★) and update (★★) some files.
Then, we add extensions in this project.
In File 1 src/extensions/scratch3_newblocks/index.js , we add a block interface and process. Details about how to define blocks is in the next article.
File 2src/extension-support/extension-manager.js is for a extension menu implementation. In this file, add scratch3_newblocks defined in previous File 1.
3) Implement GUI
When you push GUI button “+” at the left bottom side of display, a menu appears. This is called “Library”.
In this Library, we add a block implementation 2). Add some lines at the last of src/lib/libraries/extensions/index.jsx file in the same directoryscratch-gui.
As a menu item background image, we add a new image file with 600 x 372 size named as newblocks.png in the same directory.
As a menu icon, we add one more picture with 180 x 180 size named as newblocks-small.png.
It is OK when you have the following directory structure.
We are around the last corner. Start GUI. When compiling is successful, our extensions is included into Scratch GUI.
4) Customize
If you want users to select value from list, you can configure list in implementation in scratch-vm like this.
Then you will see selection in your block like this.
Result
When you open a extension menu, you will find your own blocks “NewBlocks” then click it.
After that, a NewBlocks icon will be added on icon list and you can see a block log(hello) listed in “New Blocks” section.
Now we are ready to use. Create new project. And open debug window of your browser (just press F12 button if it’s chrome)
When you add this block into your scratch project and click “Start” green flag button, you will see a log in output like this.
This is a output from your newblocks. The new block works.
“hello” is just a default value. When you change the string in a box on the right side of “log”, the output will be changed.
Summary
It was done. Great.
We created a simple block on Scratch 3.0.
After we complete publishing process like official said, we can publish as github pages like this.
I went farther. I set up a GraphQL server and made use of apollo-link, and finally I created a new block fetching weather information in any location.
Scratch cat are teaching me a weather at New york. I’ll post this how-to later.
Troubleshooting — a error case
Alan taught me some errors occur like this and his extension block didn’t appeared when he compiled and tested his extensions. After he rebuilt it in another dev environment, he could see blocks successfully. Maybe he will write detailed blog as this solution.
shared-dispatch.js:137 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned.at http://localhost:8601/extension-worker.js:993:20
...
Remaining problems
- We want to release our extensions sometimes. But there is no way to release them yet. We modified both GUI and VM. How can we release these modification as portable extensions? I am hopeful about Scratch’s future because Scratch Team mentioned they are working about it. I think it will be a good solution that we can release extensions as npm packages like Node-RED.
Appendix
My 8-year-old girl has some experience around Scratch. But until now, she hesitated and didn’t touch Scratch 3.0. I will encourage her to get used to it more from today.
