micro:bit

如何開始自定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值的話,則它會是一個可以傳回值的積木。

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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s