如何在 MakeCode 自訂積木並供其他人由 Add Package 中下載使用(自GitHub網站)

動機:在MakeCode中可否自訂積木,要如何做呢?

目的:利用自訂積木可以減化程式、黑箱包裝程式、方便教學、商業包裝...等

準備環境
1.Windows/MacOS筆電
2.micro:bit/taibit(需連接USB數據線)

實作步驟
1.先至 MakeCode 網站實作積木,在此示範做一個 可(順時針逆時針)轉動 並 可調整顯示速度 的箭頭,如下圖

2.再到 GitHub 新增專案,如下圖


3.請自行利用 文書編輯器 來撰寫程式,並上傳至 GitHub,如下圖

再拖曳~寫好的程式檔案,如下圖

4.其中,在自訂積木時,請依據官網定義 Defining blockshttps://makecode.com/defining-blocks ) 來撰寫 main.ts (typescript),部分說明 //% 註解區 如下:
(a)利用 namespace 來定義積木顯示名稱
(b)利用 weight= 來定義積木排序 (若要在最上層請設定 > 100 的數字)
(c)利用 color= 來定義積木顏色 (請參攷 色碼表 16進位表示,例如:https://www.toodoo.com/db/color.html )
(d)利用 icon= 來定義積木圖示 ( 請查詢 http://fontawesome.io/icons/ 再至網頁  https://github.com/FokkeZB/IconFont/blob/master/test/font-awesome.tss 查詢其 text 的 unicode )
(e)利用 blockId= 來定義積木的ID名稱(請注意命名規則)
(f)再將 步驟1. 的JavaScript碼複製到 export function 區塊(請注意命名規則)

5.其中,在自訂積木時,請依據官網定義 pxt.json Manual Pagehttps://makecode.com/packages/pxtJson ) 來撰寫 pxt.json (JavaScript Object Notation),部分說明如下:
(a)name定義 package 名稱
(b)files:定義載入的檔案,其中 main.ts 是必須宣告的,另外,針對語言轉換的文字可定義於此 (例如:本範例~繁中積木_locales/zh/showarrow-strings.json)
(c)testFiles:定義測試程式 test.ts,通常我會把要示範的程式放此處,方便複製至 JavaScript編輯區
(d)public:一般設為 true 定義package發佈至雲端cloud

6.以上步驟就緒後,即可利用 MakeCode Add Package 來新增自訂的積木,如下圖

在 [搜尋欄] 輸入: github:dvsseed/pxt-showarrow    =>  ( GitHub網站建立者 / repository name
按下右方的 放大鏡 搜尋,即可於下方看見 自訂的Package 及 警訊(非官方的Package),如下圖

此時,可於積木最上層(weight=110)看到 自訂積木--TaiBit,如下圖

7.終於,可以快樂使用 自訂積木 (可切換 英文 積木)了,如下圖












*********************************************************************************************
上述程式如有疑問,歡迎至 https://github.com/dvsseed/pxt-showarrow 察明究理...
*********************************************************************************************


後記:其實,PXT 有支援 c++ 及 ts ( 請參攷 https://makecode.com/simshim ),下次寫一篇有關引用 sensor 的 .cpp 及 .h 並撰寫 .ts 的自訂積木心得!!


參攷

留言