如何製作makecode裡的micro:bit積木

micro:bit是一個簡單學習的開發板,搭配微軟的makecode積木函式,更能讓小朋友以非常簡單的方式學習寫程式。但有時makecode的積木程式不太夠,或是有更多的功能想要實現,但makecode卻沒有提供,這時就免不了就有想要自己增加自訂積木的衝動。之前,為了KSB037這個micro:bit的擴展板,我為它設計了專用的程式積木(請參閱使用KSB037擴展板積木),有一些朋友也想要學習自製積木,於是便寫了這個文件,讓大家可以寫更多的積木提供出來給更多人使用。

有一些擴充積木要能在makecode被搜尋出來,必須把做好的套件向微軟註冊才可以,而且要註冊通過好像不容易,但是微軟還提供了另一種方式供使用者提供及使用自訂套件,這些自訂套件必須放在github上,放在別的地方好像不行(沒有驗證過,大家可以試試)。基本上,要自製積木不難,在底下這個自製積木的範例中,只要做好四個文件檔,並上傳至github便可以在makecode被使用了,所以,就請大家多多自製積木,並分享出來吧......。如果不想自己做這四個檔案,也可以直接下載我已做好的檔案加以修改,再上傳至自己的github也可以,那就請跳過以下的第「壹」步驟(但是要進行壹-三步驟,修改自己的github帳號成為自己的帳號),直接從第貳個步驟開始試試。這四個檔案的下載網址:https://github.com/lioujj/pxt-tools/archive/master.zip

壹、建立四個積木程式檔:

一、在自己的電腦裡建立一個叫做pxt-tools的資料夾(可自行更改),裡面建立一個文字檔,檔名為「main.ts」,這個檔案是makecode自製積木的主程式內容,定義了套件名稱tools(namespace後面即是套件名稱)以及積木函式,內容如下:

//% weight=0 color=#3CB371 icon="\uf0ad" block="Tools"
namespace tools {
    /**
    * 計算長方形面積,並回傳
    */
    //% blockId="areaOfRectangle" block="area of rectangle length %length|width %width"
    //% blockGap=2 weight=0 blockExternalInputs=true
    export function areaOfRectangle(length: number, width:number): number {
        return length*width
    }
    /**
    * 計算長方形面積,不回傳,只顯示在LED
    */
    //% blockId="ledOfRectangle" block="show area of rectangle length %length|width %width"
    //% blockGap=2 weight=1
    export function ledOfRectangle(length: number, width:number): void {
        basic.showNumber(length*width)
    }
}

其意義概略以圖示如下:

main.ts的語法概述

1、namespace定義積木的選單package,以上圖為例是tools,tools便是這個自訂套件的名稱,但是真正顯示在瀏覽器上的是Tools,是由block="Tools"來定義的。

2、Tools在選單上出現的位置,是由weight來定義,weight愈小則出現在愈下面,選單的顏色由color定義,icon則定義選單文字前要出現的圖示,icon是由四個英數字組成的unicode碼前面再加上\u所組成的,至於icon的定義要由哪裡找,請參閱 http://fontawesome.io/icons/

3、定義積木外觀的語法:每一行的最前面一定要加上//%才會被認可為定義積木的語法

blockId可自定,通常就用函式名稱即可。

weight同樣是定義積木出現的順序,在這裡是數字愈小愈上面。

blockGap定義積木和積木之間的間距

block則定義了積木中要出現的字,以及對應的輸入參數名稱,參數名稱前面要加%,每個參數中間必須要加上|以做為區隔

blockExternalInputs=true則定義了二個參數以上的輸入,以縱排的方式排版積木(請參閱上面的圖)

以上相關的積木語法,請參閱makecode的官網說明:https://makecode.com/defining-blocks


二、建立pxt.json這個文字檔,這個文字檔最主要是要告訴makecode,這些積木用到了哪些檔案,都是定義在pxt.json這個文字檔裡面,檔案內容如下:

{
    "name": "tools",
    "version": "0.0.1",
    "description": "這是專為測試用的micro:bit積木",
    "license": "MIT",
    "dependencies": {
        "core": "*"
    },
    "files": [
        "README.md",
        "main.ts",
        "_locales/zh/tools-strings.json"
    ],
    "public": true
}

其中,name後面要接上這個套件的名稱,在這個例子是tools,若有自訂的套件名稱,請在這裡修改。

description後面則可以輸入這個套件的簡單介紹。

files則定義了這個套件使用到了README.md、main.ts以及_locales/zh/tools-strings.json這三個檔案(README.md以及tools-string.json這二個檔案之後的步驟會介紹到)。


三、再建立一個文字檔,檔名為「README.md」(請勿更改其大小寫),這個檔案最主要是讓makecode識別這個套件用的,讓makecode知道套件是放在github的哪一個地方。檔案內容如下:

# tools

這是專為測試用的micro:bit積木

## License

MIT

## Supported targets

* for PXT/microbit
(The metadata above is needed for package search.)

```package
tools=github:XXXXX/pxt-tools
```

除了以下需要自行修改的部份之外,其餘的內容請不要動

1。第一行要放上這個套件名稱,在這個例子是tools,若有自訂的套件名稱,請自行修改

2、tools=github:XXXXX/pxt-tools這一行,tools是套件名稱,請自行修改。XXXXX則是自己在github的帳號,pxt-tools則是稍後要在github建立的repository名稱,在這個例子是pxt-tools,請視需要自行修改。

四、建立多國語系積木

建立「_locales」這個資料夾(locales前面要有底線),_locales底下再建立zh資料夾(zh為中文語系的資料夾,如要建立日文的則建立jp資料夾),zh資料夾底下建立一個叫做tools-strings.json的文字檔(檔名規則:上面main.ts中的namespace的名稱加上-strings.json),檔案內容如下:

{
    "tools|block": "工具",
    "tools.areaOfRectangle|block": "長方形面積 長 %length|寬 %width",
    "tools.ledOfRectangle|block": "LED顯示長方形面積 長 %length|寬 %width"
}

當使用者在makecode切換成中文語系時,便會以上面的內容取代掉在main.ts中定義好的英文積木的內容。

貳、建立github帳號,並上傳積木程式檔到github

一、首先需要在github建立帳號,請自行至https://github.com建立好帳號。

二、建立一個新的repository,以便存放積木程式


三、設定一個repository的名稱,在這個例子是pxt-tools,請視需要自行修改


四、以下三張圖為上傳的步驟,請依序操作:


五、將此連結點複製下來,以便在makecode安裝套件時使用,通常網址大概是如此:https://github.com/帳號/repository名稱。


參、在makecode裡添加這個自製的積木套件:

一、在makecode網站點選設定後,按下「添加套件」。


二、接下來輸入在上一個步驟所複製下來的pxt-toos的網址,按下搜尋後會出現自製的套件,點選後便會開始安裝套件。


三、安裝完成後,即可在積木選單看到「工具」這個選單,並且有二個自己設定好的積木。轉換成英語環境後,也能看到英文的選單以及積木。

四、這個套件基本上已經從github下載到電腦裡面來了,如果在github上對自製的套件有任何變動,例如又再增加積木函式,這時makecode是不會有任何改變的,因為它不知道套件被更新過了,這個時候要刪除專案,並且再重新添加套件,github上的新的改變才會被makecode重新抓取以及下載。請記得,若github上有任何更改,都要刪除專案並重新添加套件。

底下,我列出我找到的一些別人寫好並放在github上的積木,若對自製積木有興趣的話,大家可以參考他們的積木寫法:

https://github.com/lioujj/KSB037

https://github.com/KittenBot/pxt-robotbit

https://github.com/microsoft/pxt-sonar

https://github.com/Seeed-Studio/pxt-grove

https://github.com/srs/pxt-bitbot