[JAVA] Whale and Cat Parent-Child Programming-Try Scratch 3.0's original extension with Docker for Windows.

Is parent-child programming premised on using Git and Node.js?

With the mandatory programming education in elementary school, I think children will have more opportunities to come into contact with Scratch 3.0. Meanwhile, when I thought that it was a play tool that just stuck blocks together, the following serialization started.

["Parent-child can do!" Manufacturing "experience using Scratch and AWS --1 Preparation ~ Communication confirmation"](https://aws.amazon.com/jp/builders-flash/202009/programming-with- kids /) 2020-09-01 How to be a Developer Kei Kanazawa

In this series "2. Premises of work", the following shocking sentence is There is.

** You need to have Git and Node.js installed on your PC. ** **

We are in an era where parents also have to install Git and Node.js as a matter of course. But don't worry. There is a convenient tool called Docker, so you can easily set up your development environment.

In this article, a Docker container (jprad" that contains the source code (scratch-vm / scratch-gui) required to develop and execute the web-based integrated development environment code-server and the Scratch 3.0 extension. Use / s3coder) to enable the Scratch 3.0 GUI server to start on a Windows computer. In the second half, ["Let's make an extension of Scratch 3.0"](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6%8B%A1%E5%BC % B5% E6% A9% 9F% E8% 83% BD% E3% 82% 92% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E3% 81% BF% E3% 82% 88 Add the extension by referring to% E3% 81% 86).

** Add extensions and code with Scratch 3.0 GUI **

Things necessary

--Windows 10 PC -Docker Desktop on Windows or [Docker Desktop on Windows Home](https://docs.docker.com/docker-for- windows / install-windows-home /)

Install Docker on your Windows 10 computer. For how to install Docker, refer to the links and various articles.

Setup and startup

Start the Docker container based on the Docker image (jprad / s3coder) and enable the Scratch 3.0 GUI server to run on your Window PC.

1. Create a shared folder and launch a Docker container for the first time

In Windows 10, launch a command prompt and enter the following set of commands.

command prompt.cmd

cd c:\
mkdir scratch-ws
docker run --name s3coder -d -p 8080:8080 -p 8601:8601 ^
-v C:/scratch-ws:/home/coder/s3/scratch-ws -e PASSWORD=password ^
jprad/s3coder /home/coder/s3

REM docker run ...Because the command of is long, "^(Caret) ”is a line break.

The C \ scratch-ws folder is a shared folder mounted on the Docker container (/ home / coder / s3 / scratch-ws). When you start the docker run command, it will start downloading the required Docker images (total: 844.17 MB) and start the Docker container (container name: s3coder).

** Command prompt during download **

** Command prompt with container started after download is completed **

When you start the Docker container for the first time, a confirmation notification will be displayed asking whether to allow access to the shared folder, so allow it with [Share it].

** Allow sharing (Share it) **

2. Log in to code-sever and launch the Scratch 3.0 GUI

After starting the Docker container, access [code-server (http: // localhost: 8080)](http: // localhost: 8080) and log in (password is password). The integrated development environment will open, so start the scratch-gui included in the Docker image. Since the startup method is set in the configuration file (./s3/.vscode/launch.json), you can start it with just a click operation. When you access [Scratch 3.0 GUI (http: // localhost: 8601)](http: // localhost: 8601) after the startup of scratch-gui is completed, it is a little different from the official page, but You can code with the familiar Scratch 3.0.

procedure

1. Access [code-server (http: // localhost: 8080)](http: // localhost: 8080).
2. Enter password as the password and click the[SUBMIT]button to log in.
3. Click the [Run (Ctrl + Shift + D)] icon.
4. Select 'Run Scratch 3.0 GUI' (default) from the drop-down list.
5. Click the [Start Debugging] icon.
6. Click the [TERMINAL] tab and wait for the 'Compiled successfully' to appear after the build is complete.
7. Access [Scratch 3.0 GUI (http: // localhost: 8601)](http: // localhost: 8601).

** Launch scratch-gui **

Scratch 3.0 GUI

3. Stop / Resume

** Restart / stop scratch-gui ** To restart scratch-gui without stopping it, click the [Restart (Ctrl + Shift + F5)] icon on the coder-server. To stop the scratch-gui, click the [Stop (Shift + F5)] icon on the code-server.

** Start of scratch-gui **

1. Click the [Run (Ctrl + Shift + D)] icon.
2. Select 'Run Scratch 3.0 GUI' (default) from the drop-down list.
3. Click the [Start Debugging] icon.
4. Click the [TERMINAL] tab and wait for the 'Compiled successfully' to appear after the build is complete.

** Stop Docker container ** Execute the following command at the command prompt to stop the Docker container (container name: s3coder).

command prompt.cmd

docker stop s3coder

** Resume Docker container ** Execute the following command at the command prompt to restart the Docker container (container name: s3coder).

command prompt.cmd

docker start s3coder

Extension development

Information about developing Scratch 3.0 Extensions includes the following:

-"Children's Science September 2020 issue, p.p.66-69, Let's extend scratches with Javascript"
This is an article in a monthly magazine for children. -"Let's modify Scratch"
Strecth3, Scratch3. This is a paid content by Junya Ishihara, who provides a development environment where you can program machine learning with 0 (some are available for free). -"Scratch 3.0 Extensions"
This page is about LLK official extensions. -["Let's make an extension of Scratch 3.0"](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6%8B%A1%E5%BC%B5 % E6% A9% 9F% E8% 83% BD% E3% 82% 92% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E3% 81% BF% E3% 82% 88% E3 % 81% 86)
Explains how to make an extension of Scratch 3.0 from the preparation.

Here, ["Let's make an extension of Scratch 3.0"](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6%8B%A1%E5%BC % B5% E6% A9% 9F% E8% 83% BD% E3% 82% 92% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E3% 81% BF% E3% 82% 88 Let's implement (copy) an extension function (block) that outputs logs with reference to% E3% 81% 86).

Files required for extensions

To implement the extension (s3coder_newblocks), add / edit the following files:

scratch-vm

scratch-gui

Implementation with scratch-vm

Implement the extension itself with scratch-vm.

** Create folder **

Follow the steps below to create a folder for your extension.

1. In the code-server EXPLORER, select the s3 / scratch-vm / src / extensions folder.
2. Right-click and select New Folder from the context menu to create a's3coder_newblocks' folder.

** Implementation of index.js file **

Follow the steps below to implement the index.js file.

1. Right-click on the created 's3coder_newblocks' folder, select New File and name the file index.js.
2. ["Let's make an extension of Scratch 3.0 / Basic format --Addition of extension"](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6 % 8B% A1% E5% BC% B5% E6% A9% 9F% E8% 83% BD% E3% 82% 92% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E3% 81 % BF% E3% 82% 88% E3% 81% 86 /% E5% 9F% BA% E6% 9C% AC% E3% 81% AE% E6% 9B% B8% E5% BC% 8F # .E6.8B Copy the source code of index.js from .A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E8.BF.BD.E5.8A.A0) & Paste.

const ArgumentType = require('../../extension-support/argument-type');
const BlockType = require('../../extension-support/block-type');
const Cast = require('../../util/cast');
const log = require('../../util/log');

/**
 * Icon svg to be displayed at the left edge of each extension block, encoded as a data URI.
 * @type {string}
 */
// eslint-disable-next-line max-len
const blockIconURI = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyBpZD0iSUQwLjA4NjgyNDQzOTAwMDMzODMyIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjQ5MTU0NjY2MDY2MTY5NzQsIDAsIDAsIDAuNDkxNTQ2NjYwNjYxNjk3NCwgLTY0LjUsIC03Ny4yNSkiPjxwYXRoIGlkPSJJRDAuNTcyMTQ2MjMwMzc3MjU2OSIgZmlsbD0iI0ZGOTQwMCIgc3Ryb2tlPSJub25lIiBkPSJNIDE4OCAxNDEgTCAyNTAgMTQxIEwgMjUwIDIwMyBMIDE4OCAyMDMgTCAxODggMTQxIFogIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjI4NzkwMzMwODg2ODQwODIsIDAsIDAsIDEuMjg3OTAzMzA4ODY4NDA4MiwgLTExMC45LCAtMjQuNCkiLz48cGF0aCBpZD0iSUQwLjYzODMzNjEzNTA3NDQ5NjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0gMTk2IDIwNCBDIDE5NiAyMDQgMTkyLjcwNiAxOTAuMDU4IDE5MyAxODMgQyAxOTMuMDc0IDE4MS4yMzYgMTk1Ljg4NiAxNzguNDU4IDE5NyAxODAgQyAyMDEuNDU1IDE4Ni4xNjggMjAzLjQ0MyAyMDMuNzU0IDIwNiAyMDEgQyAyMDkuMjExIDE5Ny41NDIgMjEwIDE2NiAyMTAgMTY2ICIgdHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgMSwgLTU3LCAxNS44KSIvPjxwYXRoIGlkPSJJRDAuNzU4NzMwMzU2NTgxNTA5MSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTSAyMTUgMTY5IEMgMjE1IDE2OSAyMTguMzY3IDE2OS41MzQgMjIwIDE3MCBDIDIyMC43MTYgMTcwLjIwNSAyMjEuMjc4IDE3MC44MTkgMjIyIDE3MSBDIDIyMi42NDYgMTcxLjE2MiAyMjMuMzY4IDE3MC43ODkgMjI0IDE3MSBDIDIyNC40NDcgMTcxLjE0OSAyMjUgMTcyIDIyNSAxNzIgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAtNTcsIDE1LjgpIi8+PHBhdGggaWQ9IklEMC4yNDM2NzMwNzMxMjc4NjU4IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNIDIyNyAxNTQgQyAyMjcgMTU0IDIxOC41NTUgMTQ3Ljg5MCAyMTcgMTUxIEMgMjEyLjM0NSAxNjAuMzEwIDIxMS4yODkgMTcxLjczMyAyMTMgMTgyIEMgMjEzLjYxMiAxODUuNjcyIDIyMyAxODcgMjIzIDE4NyAiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIC01NywgMTUuOCkiLz48cGF0aCBpZD0iSUQwLjc5MzkzOTQ4MTk1NTAyMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0gMTc1IDIwMC41MDAgQyAxNzUgMjAwLjUwMCAxNjkuODA1IDIyMS45MTMgMTcxIDIyMi43NTAgQyAxNzIuMTk1IDIyMy41ODcgMTc4Ljc5NSAyMDUuMjk1IDE4Mi41MDAgMjA1Ljc1MCBDIDE4NS45MjAgMjA2LjE3MCAxODEuODU5IDIyNC41MDAgMTg1LjI1MCAyMjQuNTAwIEMgMTg5LjIxMyAyMjQuNTAwIDE5Ny4yNTAgMjA1Ljc1MCAxOTcuMjUwIDIwNS43NTAgIi8+PC9nPjwvc3ZnPg==';

/**
 * Icon svg to be displayed in the category menu, encoded as a data URI.
 * @type {string}
 */
// eslint-disable-next-line max-len
const menuIconURI = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyBpZD0iSUQwLjA4NjgyNDQzOTAwMDMzODMyIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjQ5MTU0NjY2MDY2MTY5NzQsIDAsIDAsIDAuNDkxNTQ2NjYwNjYxNjk3NCwgLTY0LjUsIC03Ny4yNSkiPjxwYXRoIGlkPSJJRDAuNTcyMTQ2MjMwMzc3MjU2OSIgZmlsbD0iI0ZGOTQwMCIgc3Ryb2tlPSJub25lIiBkPSJNIDE4OCAxNDEgTCAyNTAgMTQxIEwgMjUwIDIwMyBMIDE4OCAyMDMgTCAxODggMTQxIFogIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjI4NzkwMzMwODg2ODQwODIsIDAsIDAsIDEuMjg3OTAzMzA4ODY4NDA4MiwgLTExMC45LCAtMjQuNCkiLz48cGF0aCBpZD0iSUQwLjYzODMzNjEzNTA3NDQ5NjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0gMTk2IDIwNCBDIDE5NiAyMDQgMTkyLjcwNiAxOTAuMDU4IDE5MyAxODMgQyAxOTMuMDc0IDE4MS4yMzYgMTk1Ljg4NiAxNzguNDU4IDE5NyAxODAgQyAyMDEuNDU1IDE4Ni4xNjggMjAzLjQ0MyAyMDMuNzU0IDIwNiAyMDEgQyAyMDkuMjExIDE5Ny41NDIgMjEwIDE2NiAyMTAgMTY2ICIgdHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgMSwgLTU3LCAxNS44KSIvPjxwYXRoIGlkPSJJRDAuNzU4NzMwMzU2NTgxNTA5MSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTSAyMTUgMTY5IEMgMjE1IDE2OSAyMTguMzY3IDE2OS41MzQgMjIwIDE3MCBDIDIyMC43MTYgMTcwLjIwNSAyMjEuMjc4IDE3MC44MTkgMjIyIDE3MSBDIDIyMi42NDYgMTcxLjE2MiAyMjMuMzY4IDE3MC43ODkgMjI0IDE3MSBDIDIyNC40NDcgMTcxLjE0OSAyMjUgMTcyIDIyNSAxNzIgIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAtNTcsIDE1LjgpIi8+PHBhdGggaWQ9IklEMC4yNDM2NzMwNzMxMjc4NjU4IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNIDIyNyAxNTQgQyAyMjcgMTU0IDIxOC41NTUgMTQ3Ljg5MCAyMTcgMTUxIEMgMjEyLjM0NSAxNjAuMzEwIDIxMS4yODkgMTcxLjczMyAyMTMgMTgyIEMgMjEzLjYxMiAxODUuNjcyIDIyMyAxODcgMjIzIDE4NyAiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIC01NywgMTUuOCkiLz48cGF0aCBpZD0iSUQwLjc5MzkzOTQ4MTk1NTAyMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0gMTc1IDIwMC41MDAgQyAxNzUgMjAwLjUwMCAxNjkuODA1IDIyMS45MTMgMTcxIDIyMi43NTAgQyAxNzIuMTk1IDIyMy41ODcgMTc4Ljc5NSAyMDUuMjk1IDE4Mi41MDAgMjA1Ljc1MCBDIDE4NS45MjAgMjA2LjE3MCAxODEuODU5IDIyNC41MDAgMTg1LjI1MCAyMjQuNTAwIEMgMTg5LjIxMyAyMjQuNTAwIDE5Ny4yNTAgMjA1Ljc1MCAxOTcuMjUwIDIwNS43NTAgIi8+PC9nPjwvc3ZnPg==';


/**
 * Class for the new blocks in Scratch 3.0
 * @param {Runtime} runtime - the runtime instantiating this block package.
 * @constructor
 */
class Scratch3NewBlocks {
    constructor (runtime) {
        /**
         * The runtime instantiating this block package.
         * @type {Runtime}
         */
        this.runtime = runtime;

        //this._onTargetCreated = this._onTargetCreated.bind(this);
        //this.runtime.on('targetWasCreated', this._onTargetCreated);
    }


    /**
     * @returns {object} metadata for this extension and its blocks.
     */
    getInfo () {
        return {
            id: 'newblocks',
            name: 'New Blocks',
            menuIconURI: menuIconURI,
            blockIconURI: blockIconURI,
            blocks: [
                {
                    opcode: 'writeLog',
                    blockType: BlockType.COMMAND,
                    text: 'log [TEXT]',
                    arguments: {
                        TEXT: {
                            type: ArgumentType.STRING,
                            defaultValue: "hello"
                        }
                    }
                },
                {
                    opcode: 'getBrowser',
                    text: 'browser',
                    blockType: BlockType.REPORTER
                }
            ],
            menus: {
            }
        };
    }

    /**
     * Write log.
     * @param {object} args - the block arguments.
     * @property {number} TEXT - the text.
     */
    writeLog (args) {
        const text = Cast.toString(args.TEXT);
        log.log(text);
    }

    /**
     * Get the browser.
     * @return {number} - the user agent.
     */
    getBrowser () {
        return navigator.userAgent;
    }
}

module.exports = Scratch3NewBlocks;

** Modify extension-manager.js file **

Open the extension-manager.js file in the scratch-vm / src / extension-support folder, and add the extension (s3coder_newblocks) to builtinExtensions as follows.

• Don't forget to separate them with commas.

extension-manager.js

const builtinExtensions = {
    ...
    gdxfor: () => require('../extensions/scratch3_gdx_for'),
    newblocks: () => require('../extensions/s3coder_newblocks'),
};

Settings with scratch-gui

Set the scratch-gui so that you can select the extension.

** Create folder **

Follow the steps below to create a folder for saving images.

1. Under EXPLORER on code-server, select the s3 / scratch-gui / src / lib / libraries / extensions folder.
2. Right-click and select New Folder from the context menu to create a's3coder_newblocks' folder.

Image file

Download the image file and save it in the created folder.

1. Download the two image files and save them in the C: \ scratch-ws folder.
2. In EXPLORER of code-server, open the s3 / scratch-ws folder, select two image files, right-click and Copy from the context menu.
3. Select the s3 / scratch-gui / src / lib / libraries / extensions / s3coder_newblocks folder, right-click and select Paste from the context menu.

** Index.js file settings **

Open the index.js file in the s3 / scratch-gui / src / lib / libraries / extensions folder and configure the extensions as follows: This will allow you to select extensions by adding extensions to the Scratch 3.0 GUI.

index.js

...
import gdxforConnectionSmallIconURL from './gdxfor/gdxfor-small.svg';

import newblocksImage from './s3coder_newblocks/newblocks.png';
import newblocksInsetImage from './s3coder_newblocks/newblocks-small.png';

export default [
...
        ),
        helpLink: 'https://scratch.mit.edu/vernier'
    },
    {
        name: (
            <FormattedMessage
                defaultMessage="New Blocks"
                description="Name for the 'New Blocks' extension"
                id="gui.extension.newblocks.name"
            />
        ),
        extensionId: 'newblocks',
        iconURL: newblocksImage,
        insetIconURL: newblocksInsetImage,
        description: (
            <FormattedMessage
                defaultMessage="New extension"
                description="Description for the 'New Blocks' extension"
                id="gui.extension.newblocks.description"
            />
        ),
        featured: true
    },
];

Operation check

After starting scratch-gui and reopening Scratch 3.0 GUI, you can select a new extension with "Add Extension".

Executing the log block will output hello to the browser console.

in conclusion

--Using the Docker image (jprad / s3coder), I built the development environment and operating environment for Scratch 3.0 Extentions. -["Let's make an extension of Scratch 3.0"](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6%8B%A1%E5%BC%B5 % E6% A9% 9F% E8% 83% BD% E3% 82% 92% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E3% 81% BF% E3% 82% 88% E3 The extension function was added by referring to% 81% 86).

** Added on 2020.11.03 ** Parents and children can do it! “Manufacturing” experience using Scratch and AWS ―― 2. Make a simple quiz and learn if-else! Hen https://aws.amazon.com/jp/builders-flash/202011/programming-with-kids-2/

cd c:\
mkdir scratch-ws
docker run -it -p 8080:8080 -p 8601:8601 -v C:/scratch-ws:/home/coder/s3/scratch-ws -e PASSWORD=password codercom/code-server /home/coder/s3

sudo apt-get update -y
sudo apt-get install -y nodejs npm
sudo npm install -g npm

sudo chown -R coder:coder /home/coder/s3
git clone --depth 1 https://github.com/llk/scratch-vm.git
git clone --depth 1 https://github.com/llk/scratch-gui.git

cd scratch-vm
npm ci
sudo npm link

cd ../scratch-gui
npm ci
sudo npm link scratch-vm

npm start
--->> [Ctrl]+[C]Suspended at

docker build -t test-image .

docker run --name test-container -it -p 8080:8080 -p 8601:8601 -v C:/scratch-ws:/home/coder/s3/scratch-ws -e PASSWORD=password test-image /home/coder/s3