如何開始自定micro:bit客製化積木

這是今天跟劉正吉老師學到的，趕快來跟大家分享一下，讓有興趣但是沒機會參加到劉老師研習的同學們也可以很快的上手。不過，想要學客製化積木，除了對micro:bit有一些認識之外，對於JavaScript的語法（嚴格來說是TypeScript啦）也要有一些瞭解，這樣才比較會知道究竟是在做些什麼喔。

1.進入makecode.microbit.org

首先，要前往micro:bit的makecode網址，也就是它的積木開發介面，網址如下：

https://makecode.microbit.org/

2.進入JavaScript的編輯環境

進入網站之後，接著要開啟一個專案，也就是入標準的積木程式編輯環境，畫面如下：

然後請如上圖中箭頭所指的地方，按下「JavaScript」按鈕，切換到JavaScript程式的編輯介面，沒錯，自訂的積木正是要使用JavaScript語言來實作才行。點擊之後，畫面如下所示：

3.進入資源管理器

接下來要做的是點擊左下角的「資源管理器」，如上圖中的箭頭所示的地方。按下去之後會出現如下所示的選項：

4.添加自訂積木的程式碼custom.ts

接著再依上圖的箭頭所指的地方，按下「+」，系統即會詢問是否要添加自訂的積木，如下所示：

所有的自訂積木都是放在custom.ts程式內，因此按下「繼續」之後，就可以在原來的資源管理器下方，看到custom.ts這個檔案，如下所示：

之後只要再點擊這個檔案，即可進入程式編輯環境了，如下所示：

在這個環境中，我們可以隨時按下上方的「積木」頁籤回到積木程式設計環境，回到該環境中，只要按下瀏覽器的重新整理，即可看到我們建立的客製化積木。在預設的情況下，一開始MakeCode就已幫我們準備好一個範例，這個範例是以namespace custom作為整個積木的大分類，在此namespace中可以自行利用函式的方式，自行定義出所需要的自訂積木。

5.回到積木環境檢視成果（要重新整理網頁）

在沒有更改任何內容的情況下回到積木編輯環境，再重新整理網頁，即可看到自定的（其實是預設的範例）Custom積木類別就已踁呈現在積木程式設計環境中了，如下所示：

6.custom.ts的程式碼內容

這個積木是用來計算費氏函數的程式，讀者們可以自行試用看看。而以下即是它的範例程式碼（來自MakeCode的範例程式）：

/**
 * 使用這個文件來定義自訂的函式和積木。
 * 進一步了解：https://makecode.microbit.org/blocks/custom
 */

enum MyEnum {
    //% block="one"
    One,
    //% block="two"
    Two
}

/**
 * 自訂的積木
 */
//% weight=100 color=#0fbc11 icon=""
namespace custom {
    /**
     * TODO: 在此描述函式
     * @param n 在此描述參數, eg: 5
     * @param s 在此描述參數, eg: "Hello"
     * @param e 在此描述參數
     */
    //% block
    export function foo(n: number, s: string, e: MyEnum): void {
        // Add code here
    }

    /**
     * TODO: 在此描述函式
     * @param value 在此描述值, eg: 5
     */
    //% block
    export function fib(value: number): number {
        return value <= 1 ? value : fib(value -1) + fib(value - 2);
    }
}

從上方的程式基本上可以看出客製化積木的架構，namespace custom指的是積木的總類別，而其中使用export之function則是自定義的積木，如果定義的function是void沒有回傳值的話，就是執行處理的積木，而如果定義的function本身是具有return值的話，則它會是一個可以傳回值的積木。

其它的設定，我們會在另外的教學中說明。