2016-07-08

App Inventor 2 控制 mBot

上午在臉書社團『mBot 機器人 mBlock 教學問答』貼出Makeblock官網的網頁:App Inventor控制mBot機器人(Use mBot with App Inventor

剛好有讀友詢問如何使用,邱老師決定寫下操作記錄,分享給像我一樣的初學者。

首先使用App Inventor 2 (AI2),需要註冊,我使用Google帳號,直接進入網頁。

因為我們需要使用最近才新增的擴充功能,所以需要到另外一台主機http://extension-test.appinventor.mit.edu/(不是AI2官方網址ai2.appinventor.mit.edu/)

進入網頁後可以切換成繁體中文介面。

image

接下來的程序分為三部份:
1. 編輯螢幕畫面,增加程式碼。
2. 用無線網路連線你的手機裝置,同步操作。
3. 操作手機遙控mBot

以下介紹各部份操作

編輯螢幕畫面,增加程式碼

1. 首先需要新增mBot函式庫(擴充功能Extension),點擊Extension

image

2. 出現小視窗,選擇URL,貼上『http://appinventor.makeblock.com/com.makeblock.appinventor.MBot.aix』,按下『Import』

image

不用更改Extension名稱,直接按確定。
2. 接著需要編輯手機上的螢幕畫面Screen,外觀編排,點擊『使用者介面』,打開下拉式清單。

image

3. 拖拉一個『清單選擇器』ListPicker,拖拉2個『按鈕』Button。
還要將mBot拖入螢幕,新增一個無法看見的元件,你可以在元件清單看到物件列表。

image

4. 接著點擊『程式設計』

image

5. 一一增加範例的指令
當清單選擇器『準備選擇』『選擇完成』兩個指令

image

需要以顏色分辨命令種類,依樣畫葫蘆。

image

清單選擇器的命令方法就在清單選擇器內,

image

最後是兩個按鈕的事件偵測,一般來說按鈕都是按下(Click)時做出相對應的動作。

image

裡面再放入mBot的控制方法,

image

全部程式碼如下:

image

無線網路同步手機裝置

App Inventor使用線上編輯器,實際編譯在伺服器中進行,可以使用USB或無線WiFi連線至你的Android裝置,同步顯示編輯的螢幕畫面。(也能使用模擬器)

1. 先在你的Android裝置安裝一個應用程式 MIT AI2 Companion (https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=zh_TW)

2. 點擊瀏覽器上App Inventor編輯器的『連線—>AI Companion』,就會出現6位密碼及QR Code

image

image

3. 執行手機上的 MIT AI2 Companion,會詢問你輸入6位密碼,或是使用QR Code掃描,連結AI2線上編輯器。

Screenshot_20160708-195326

4.  連線後,你的手機應該就會出現相同的螢幕畫面




操作手機遙控mBot

1. 打開手機的藍牙,先跟mBot配對。
2. 按下『清單選擇器1文字』,點擊藍牙的mac號碼。
3. 點擊『按鈕1文字』,mBot向前跑
4, 點擊『按鈕2文字』,mBot停止

還有更多東西等待你的創意發想….

螢幕畫面的文字都可以更改,

image

還有增加更多東西,例如增加按鈕控制前後左右,LED燈光,播放音調…

到目前為止是應用前為止是東西無線網路同步,將來也可以包裝成APK下載安裝在手機上,更可以將你的成果上架到Google Play商店(販賣賺錢囉!)

歡迎討論,分享你的使用心得。^^

延伸閱讀:香港永佳教學網頁 http://makeblock.hk/makeblock_app-inventor2/