scratch3增加擴充積木(進階）

30天通github

https://github.com/doggy8088/Learn-Git-in-30-days

java script快速入門播放清單

https://youtube.com/playlist?list=PLxNBsYH_m6ywXdOfpVgibRbJzidecajoX

scratch-vm index.js結構

 //require基本架構

const ArgumentType = require('../../extension-support/argument-type');
const BlockType = require('../../extension-support/block-type');
const formatMessage = require('format-message');
const msg = require('./translation');

 

物件

class 物件名稱 {

//物件架構

  constructor(runtime) {
        the_locale = this._setLocale();
        this.runtime = runtime;
    }

//物件資料

  getInfo() {
        the_locale = this._setLocale();
        return {
            id: 'mqtt',
            color1: '#003D79', //'#0C5986',
            color2: '#34B0F7',
            name: 'MQTT',
            blockIconURI: 'data:image/png;base64,',
            blocks: [
                {

               }

}

function(){

}

module.exports = 物件名稱;

語系

方法1：

在index.js中有

const msg = require('./translation');

物件中要有function定義語系

_setLocale() {
        let now_locale = '';
        switch (formatMessage.setup().locale) {
            case 'zh-tw':
                now_locale = 'zh-tw';
                break;
            default:
                now_locale = 'en';
                break;
        }
        return now_locale;
    } 

物件架構是呼叫function定義語系

constructor(runtime) {
        the_locale = this._setLocale();
        this.runtime = runtime;
    }

使用方法：

msg.disconnect[the_locale];

在資料夾下，要有translation.js

 檔案內容：

export const disconnect = {
    'en': 'disconnected',
    'zh-tw': '未連線',
};

方法2：

在index.js中加入語系物件

const formatMessage = require('format-message');

const FormLcdShow = {
    'en': 'LCD show text [VALUE] at [ROW] row',
    'zh-tw': 'LCD顯示文字[VALUE]在第[ROW]列',
};

在物件中加入架構

constructor(runtime,util) {
        the_locale = this._setLocale();
        this.runtime = runtime;
    }

需要有function _setLocale()

_setLocale () {
        let now_locale = '';
        switch (formatMessage.setup().locale){
            case 'en':
                now_locale='en';
                break;
            case 'zh-tw':
                now_locale= 'zh-tw';
                break;
            default:
                now_locale='en';
                break;
        }
        return now_locale;
    }

使用方法

FormLcdShow [the_locale]

積木表示

在物件中使用陣列blocks: [ ]包括所有積木。

每個積木為一物件{}。內容為

opcode: 'digital_write',
                    blockType: BlockType.COMMAND,
                    text: FormDigitalWrite[the_locale],
                    arguments: {
                        PIN: {
                            type: ArgumentType.NUMBER,
                            defaultValue: 'D2',
                            menu: "digital_pins"
                        },

                     }

方法3：

/src/lib/libraries/extensions/index.jsx的

翻譯檔案在/node_modules/scratch-l10n/locales/editor-msgs.js

中文語系在最後面。

格式範例：

"gui.extension.microbitMore.description":"玩轉 micro:bit 的所有功能。(v2-0.2.4)",

github資料

 1.網址：https://github.com/

2.註冊：點選右上方Sign up，依續輸入email 密碼 username ..要不要用mail收資料..驗證是不是真人...收email，輸入認證code ，最後成功畫面如下：

3. 把別人的網站fork一份：

參考文章

https://git-scm.com/book/zh-tw/v2/GitHub-%E5%8F%83%E8%88%87%E4%B8%80%E5%80%8B%E5%B0%88%E6%A1%88

把osep web serial api fork一份吧

https://github.com/estea8968/osep_web_serial

按右上方的fork按鈕，你就有一份一模一樣的資料了。

4.專案設定web位置：

https://ithelp.ithome.com.tw/articles/10171911

在專案位置，按下右邊Settings設定鈕，再選左邊Pages按鈕，選一個佈景。在source按鈕選master。約過了3-5分鐘，按下連結，就會看到網頁了。但它不是scratch的網頁。按下左上角，code按鈕，再按下右邊設定圖示（小的），可以在這裡告訴別人，要連app資料夾。

5.更新github

參考網址：https://sites.google.com/view/scratch-web-serial-api/%E6%8A%80%E8%A1%93%E6%96%87%E4%BB%B6/2-%E4%BD%BF%E7%94%A8-github-%E5%BB%BA%E7%AB%8B-osep-scratch-%E7%B6%B2%E7%AB%99?authuser=0

 

6.github常用指令

https://hellojs-tw.github.io/git-101/cheat-sheet.html

git add .

git commit -m "說明文字"

git push -u origin

7.github token

https://iter01.com/611911.html

現在不能再用帳密更新上傳了，必需使用token。上傳時第一次打密碼時，要輸入token的值，很長，建議用貼的，申請完記起來，這個token最長可以用一個月，下個月要再申請一之。

 scratch3增加擴充積木

下載scratch3原始碼

網址：https://github.com/LLK/scratch-gui

 linux 下可以用git下載，win可以下載zip後解壓縮

git clone https://github.com/LLK/scratch-gui.git

註：linux下如果缺少git套件請自行安裝(sudo apt install git)

打開下載或解壓縮資料夾

安裝必要軟體 nodejs git nopad++

windows install npm 、git 和 nopad++

下載https://nodejs.org/en/download/

安裝64 bit msi

下載:http://git-scm.com/download/win

安裝git 

在win下編輯器個人使用nopad++

https://notepad-plus-plus.org/downloads/

安裝visualstudio code 

https://code.visualstudio.com/

安裝scratch gui

git clone https://github.com/LLK/scratch-gui.git
cd scratch-gui
npm install

npm install也可以一個指令解決npm install https://github.com/LLK/scratch-gui.git

 

啟動scratch3-gui

在scratch-gui資料夾下執行

npm start

在瀏覽器的網址列中輸入http://0.0.0.0:8601/就可以看到畫面

如果沒有成功可以嘗試輸入http://127.0.0.1:8601/ 

增加擴充積木

擴充積木的位置在scratch-gui目錄下的node_modules/scratch-vm資料夾中

原始檔要放在src/extensions資料夾中

試做範例

1.copy scratch3_microbit 成為scratch3_mybit

2.編輯node_modules/scratch-vm/src/extension-support/extension-manager.js

找到gdxfor: () => require('../extensions/scratch3_gdx_for')

在行尾加上,和mybit: () => require('../extensions/scratch3_mybit')

3.編輯src/lib/libraries/extensions/index.jsx

複製

import microbitIconURL from './microbit/microbit.png';
import microbitInsetIconURL from './microbit/microbit-small.svg';
import microbitConnectionIconURL from './microbit/microbit-illustration.svg';
import microbitConnectionSmallIconURL from './microbit/microbit-small.svg';

修改為

import mybitIconURL from './mybit/microbit.png';
import mybitInsetIconURL from './mybit/microbit-small.svg';
import mybitConnectionIconURL from './mybit/microbit-illustration.svg';
import mybitConnectionSmallIconURL from './mybit/microbit-small.svg'; 

往下找，找到

{ 

ame: 'micro:bit',

extensionId: 'microbit',

把整段大括號複製起來，在下面貼上並修改

4.複製microbit資料夾為mybit資料夾

5.回到瀏覽器中輸入網址http://0.0.0.0:8601，再按左下角的+號，就可以看到修改完的擴充積木

打包成離線版

 執行指令npm run build

會多build dist兩個資料夾，build資夾中為打包好的檔案，使用瀏覽器開啟index.html。

 

打包成應用程式

使用的是新北市育林國中林士立老師的打包方法

github下載:https://github.com/t301000/my-scratch3-offline

打包方式詳如github說明檔

1.npm install 安裝套件

2.把scratch-gui下的build資料夾複製到my-scratch3-offline中並改名為app

3.npm run package:win32 打包成exe應用程式

這時會有一個scratch3-win32-x64資料夾産生，裡面會有一個scratch3.exe的應用程式。

 

 如果要打包mac版，需要修改package.json

加入

"compress:mac": "rimraf osep_scratch3-darwin-x64-*.7z && 7z a scratch3-darwin-x64-`date '+%Y%m%d%H%M%S'`.7z osep_scratch3-darwin-x64"

打包指令

npm run package:mac

會産生一個scratch3-darwin-x64的資料夾

 

 

extensions內容探究

 const 是定義一些事情

class name是物件

最後一行要

module.exports = name;

積木前的圖示可以用blockiconURI來指定

const blockIconURI = 'data:image

積木是使用{}包起來描述

積木內容在

blocks: []

 

以下列範例示範

                {
                    opcode: 'displayText',
                    text: formatMessage({
                        id: 'microbit.displayText',
                        default: 'display text [TEXT]',
                        description: 'display text on the micro:bit display'
                    }),
                    blockType: BlockType.COMMAND,
                    arguments: {
                        TEXT: {
                            type: ArgumentType.STRING,
                            defaultValue: formatMessage({
                                id: 'microbit.defaultTextToDisplay',
                                default: 'Hello!',
                                description: `default text to display.
                                IMPORTANT - the micro:bit only supports letters a-z, A-Z.
                                Please substitute a default word in your language
                                that can be written with those characters,
                                substitute non-accented characters or leave it as "Hello!".
                                Check the micro:bit site documentation for details`
                            })
                        }
                    }
                },

 

opcode:是每個積木執行時要執行的副程式，後面的文字都對應一個function

blockType: BlockType.COMMAND,是積木型態，可以參考

https://medium.com/@hiroyuki.osaki/scratch-3-block-types-you-can-develop-and-samples-191b0d769b91

text:是描述內容，裡面用formatMessage()來表述時可以做多國語言id default和description，當然可以不寫，直接接一串文字 

menus:是選單，每個選單也都是用陣列表示

touchPins: {
                    acceptReporters: true,
                    items: ['0', '1', '2']
                } 

教學影片清單

osep github：https://github.com/ys-fang/OSEP