前言

Scratch 3.0 官方 Extension (外掛) 對於硬體的支援,比 Scratch 2 更加的豐富。雖然原本 Scratch 2 所支援的 PicoBoard、LEGO WeDo 1.0 與 LEGO WeDo 2.0 三者當中僅留下 LEGO WeDo 2.0,但是加上了 LEGO MINDSTORMS EV3 與 LEGO Boost 以及我們今天要討論的主角,也就是相當火紅的 Micro:bit。

嚴格來說,Scratch 2 雖然官方沒有提供 Micro:bit 的外掛,但是也是可以透過第三方的外掛來達到與 Micro:bit 互動的目的。不過官方的正式支援,對 Scratch 與 Micro:bit 來說可都算是正面的訊息。在這篇文章中,我們將在 Windows 10 的環境下一步一步建立一個 Scratch 3.0 與 Micro:bit 互動的簡單程式,搶在 Scratch 3.0 正式推出之前看看兩者之間將擦出甚麼樣的火花。

基本需求

根據官方外掛的說明文件,Scratch 3.0 可在 Mac、ChromeOS、Linux 與 Windows 10 的環境下支援 Micro:bit,而且僅需要四個簡單的步驟就可以順利連結。不過可別高興得太早,Scratch 3.0 在 Windows 10 下依舊必須安裝額外的中介程式才能夠順利與 Micro:bit 進行互動,而這個中介程式叫做 Web Bluetooth Polyfill。根據目前看到的資料, Web Bluetooth Polyfill 僅支援 Chrome 瀏覽器,其他瀏覽器則不適用。所以在 Windows 10 環境下 Scratch 3.0 與 Micro:bit 進行互動需要先滿足下列基本需求:

  1. Windows 10 Creators Update version 1703 / build 15063 以上的版本。
  2. 安裝 Visual C++ Redistributable for Visual Studio 2015 (x86)。
  3. 使用 Chrome 瀏覽器。

確認 Windows 10 版本

  1. 點選左下角 “開始” 輸入 winver 後執行 “winver”。

    執行 winver

    執行 winver

  2. 在跳出視窗中尋找 Windows 10 版本資訊。以下圖為例,版本編號為 1803,高於需求所需版本 1703。

    winver 執行結果

    winver 執行結果

確認是否已經安裝 C++ Redistributable

  1. 點選左下角 “開始” 後點選 “設定” 以開啟 “Windows 設定” 畫面。

    開啟 Windows 設定

    開啟 Windows 設定

  2. 點取 “應用程式” 圖示。

    設定 - 應用程式

    設定 – 應用程式

  3. 捲動畫面,尋找是否如下圖所示已列出 Microsoft Visual C++ 2015 Redistributable (x86)。需特別注意的是,數字必須是 2015,其他任何數字都不行。而且必須是 Microsoft Visual C++ 2015 Redistributable (x86),如果是 Microsoft Visual C++ 2015 Redistributable (x64) 也一樣不行。

    已安裝應用程式

    已安裝應用程式

  4. 如果沒有列出 Microsoft Visual C++ 2015 Redistributable (x86),請前往這裡下載,並如畫面般維持 English 選項直接按下 Download 即可。

    下載 Visual C++ Redistributable for Visual Studio 2015

    下載 Visual C++ Redistributable for Visual Studio 2015

  5. 勾選 vc_redist.x86.exe 後按下 Next 開始下載。

    選擇 x86 版本

    選擇 x86 版本

  6. 下載完成後執行 vc_redist.x86.exe。安裝過程相當簡單,一直按 Next 即可。

準備環境

安裝 Git

安裝步驟請參考文章 開發你的第一個 Scratch 3.0 Extension

安裝 Web Bluetooth Polyfill

  1. 點選左下角 “開始” 輸入 cmd 後執行 “命令提示字元”。

    開啟命令提示字元

    開啟命令提示字元

  2. 在命令提示字元視窗內,輸入下列指令。
  3. 開啟 Chrome 瀏覽器。
  4. 開啟新的分頁,並在網址列中輸入 “chrome://extensions”。
  5. 啟用 “開發人員模式”。開發人員模式的開關在頁面右上方,畫面中為未開啟的狀態,點選後滑至右邊表示開啟。

    啟用開發人員模式

    啟用開發人員模式

  6. 點選 “載入未封裝項目”。

    載入未封裝項目

    載入未封裝項目

  7. 選擇目錄 c:\temp\web-bluetooth-polyfill\extension 後按下確定。

    選擇 web bluetooth polyfish extension

    選擇 web bluetooth polyfish extension

  8. 確認 Web Bluetooth Polyfill Extension 的 ID,如畫面中的 ID 為 ibaegageiefmimgpakjneelhkfcdgaif。但每一次安裝的 ID 皆有所不同,所以需重新確認。後面需要用到此 ID,可先用 Ctrl-C 的方式加以複製。

    查看 Web Bluetooth Polyfill ID

    查看 Web Bluetooth Polyfill ID

  9. 這裡下載最新版的 BLEServer。

    下載 BLEServer

    下載 BLEServer

  10. 利用檔案總管在 C:\Program Files (x86) 下新增 Web Bluetooth Polyfill 目錄,並將剛剛下載的壓縮檔解壓縮至這個目錄,完成後如下圖所示。

    BLEServer 檔案

    BLEServer 檔案

  11. 修改檔案 manifest.json,將  “chrome-extension://lfdhhpmjipnimfkijgapkalpepjjecfm/” 那行設定中的 lfdhhpmjipnimfkijgapkalpepjjecfm 改成在步驟 8 所看到的 ID。
  12. 雙擊 register.cmd 進行註冊服務的動作,執行過程一閃而逝是正常的。
  13. 回到之前開啟的命令提示字元視窗內,輸入下列指令。

    如果沒有錯誤訊息,表示已經正確安裝 Web Bluetooth Polyfill Extension。

開啟 Scratch 3.0

經過一連串動作後,我們終於來到文件上所提到的四個簡單步驟。

  1. 下載 scratch-firmware-combined.hex 並寫入 Micro:bit。
  2. 找尋藍芽圖示後點選滑鼠右鍵,選取 “新增藍芽裝置” 選項。

    開啟藍芽設定畫面

    開啟藍芽設定畫面

  3. 開啟藍芽功能並點選 “新增藍芽或其他裝置”。

    開啟藍芽並搜尋設備

    開啟藍芽並搜尋設備

  4. 點選 “藍芽” 選項。

    新增藍芽設備

    新增藍芽設備

  5. 發現 Micro:bit 後直接選取即可。這個 Hex 檔的藍芽配對不需要使用 Micro:bit 的 Pair Mode,跟之前 Micro:bit 常見的藍芽配對方式有所不同。

    發現 Micro:bit

    發現 Micro:bit

  6. 配對完成後按下 “完成” 即可關閉設定畫面。

    Micro:bit 配對完成

    Micro:bit 配對完成

  7. 使用 Chrome 瀏覽器開啟網址 https://llk.github.io/scratch-gui/microbit/ 。點選 Try It! 即可進入 Scratch 3.0 的編輯頁面。
  8. 點選左下方圖示開啟 Extension 選擇頁面。

    開啟 Scratch 3.0 Extension 選擇頁面

    開啟 Scratch 3.0 Extension 選擇頁面

  9. 選擇 Micro:bit Extension。

    選擇 Micro:bit Extension

    選擇 Micro:bit Extension

  10. 成功載入後就可以看到 Micro:bit 選項以及相關積木。不過在右上角可以看到藍芽符號旁呈現橘色的標示,表示尚未連接至任何的 Micro:bit。

    成功載入 Micro:bit Extension

    成功載入 Micro:bit Extension

  11. 點選藍芽符號後出現 Micro:bit 選擇畫面。需等待一段時間才會出現 Micro:bit 設備,出現後加以點選並按下 Pair 按鈕。

    連接 Micro:bit

    連接 Micro:bit

  12. 當橘色標示轉為綠色後即表示已經連接至 Micro:bit,這時候我們就可以開始在 Scratch 3.0 中與 Micro:bit 進行互動,像是取得按鈕的狀態以及傾斜方向、或是透過 Micro:bit 顯示文字或符號等。

    成功連接 Micro:bit

    成功連接 Micro:bit

  13. 我們的範例程式如下,程式開始後不斷檢查 Micro:bit 的傾斜方向,而畫面上的 Scratch 貓咪則做出相對應方向的移動並說出對應訊息。

    範例程式

    範例程式

  14. 程式執行結果如影片中所示。

在這篇文章中我們利用 Scratch 3.0 的官方 Extension 與 Micro:bit 進行互動。儘管如此,就像 Scratch 2 與 Micro:bit 之間其實存在著許多種不同的互動方式一樣,我相信未來即使在 Scratch 3.0 的環境下仍有可能出現其他非官方的 Micro:bit Extension。甚至現有 Scratch 2 的連結方式,也有可能轉至 Scratch 3.0,一切就讓我們拭目以待了。

Summary
當 Scratch 3.0 遇上 Micro:bit
Article Name
當 Scratch 3.0 遇上 Micro:bit
Description
在這篇文章中,我們將在 Windows 10 的環境下一步一步建立一個 Scratch 3.0 與 Micro:bit 互動的簡單程式,搶在 Scratch 3.0 正式推出之前看看兩者之間將擦出甚麼樣的火花。
Author
Publisher Name
Everlearn Studio
Publisher Logo
Facebook 留言
Print Friendly, PDF & Email