2019年4月28日 星期日

App inventor2+Micro:bit

(2017/12/20)

有朋友說:學生需要利用bit內的加速器偵測到物體移動後,將訊號傳致手機上!這讓我想到用App Inventor2寫手機APP應該可以做到,也藉此機會來學習App Inventor2的程式寫作~~
以下有一系列參考資料可參考
一、基本的藍芽連接設定
  • 參考文章:http://www.astar-tek.com.tw/news/app-inventor-iot-basic-bluetooth-connection-setup/
  • 進入 app inventor2 (http://ai2.appinventor.mit.edu)
  • 建立一個新專案,命名為BasicIoTSetup
  • 拉出一個【水平排列】的框
  • 並在其中添加4個按鈕。重命名按鈕:ButtonScan,ButtonStopScan,ButtonConnect和ButtonDisconnect。
  • 在【水平排列】下方添加一個標籤。 重命名LabelStatus並將其文本更改為 Status:
  • 將ListView拉到Status:下方,並將其重命名為ListBLE
  • 接下來,我們要安裝BluetoothLE擴展,點選import extension
  • BluetoothLE extension 的連結網址 http://iot.appinventor.mit.edu/assets/edu.mit.appinventor.ble.aix
  • 將【藍牙擴展】拖放到Screen1上,因為它是不可見的組件,所以它會顯示在Screen1的下方
  • 接下來,點選Blocks開始寫程式了
  • 當ButtonScan.Click
  • 當 ButtonStopScan.Click
  • 當 ButtonConnect.Click
  • 當 ButtonDisconnect.Click
  • 按Scan後,要列出可用的藍牙設備
  • 與藍牙設備連接後
  • 當藍牙設備斷線後
  • 大功告成,點選Build/App(provide QR code for .apk),並利用手機掃描QR code 來下載檔案到手機
  • 利用手機來測試,執行BasicIoTSetup




二、利用手機讀取 Microbit 的 Temperature
  • 參考資料:http://www.astar-tek.com.tw/news/%E7%94%A8appinvnetor-%E5%AF%AB%E7%89%A9%E8%81%AF%E7%B6%B2%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8B-app-%E5%BE%9E-microbit-%E8%AE%80-temperature/
  • 使用App Inventor 寫程式來讀取micro:bit控制器上的溫度傳感器,藍牙程式同上
  • 接下來加入讀取micro:bit 溫度的擴展功能 http://iot.appinventor.mit.edu/assets/com.bbc.microbit.profile.aix
  • 產生很多micro:bit相關的東西,這次只讀取溫度,所以選擇Microbit_Temperature


  • 在Microbit_Temperature1的“屬性”選項卡中,將BluetoothDevice設置為“BluetoothLE1”
  • 再拉一個Label到LabelStatus和ListBLE之間,重新命名為LabelData,其text改為Data:
  • 好,開始來將與溫度有關的程式寫進去,點選Blocks開始寫程式了
  • 當藍牙連接成功後,把溫度值也叫過來
  • 接下來,我們要增加一個變數來儲存從傳感器接收到的數據(溫度),起始值為“0”。

  • 當我們得到新數據時,讓我們製作一個新的副程式來顯示LabelData中的當前讀數。
  • 當取得micro:bit 的溫度時
  • 也可以不用這兩個,直接下面程式即可

  • 程式完成,再將檔案下載到手機來測試

  • 完成!

三、利用手機來控制 Microbit 的 LED顯示器
  • 參考資料:http://www.astar-tek.com.tw/news/appinventor-iot-microbit-led/
  • 使用App Inventor 寫程式來控制micro:bit上LED顯示器上的內容,藍牙程式同上
  • 接下來加入讀取micro:bit LED的擴展功能 http://iot.appinventor.mit.edu/assets/com.bbc.microbit.profile.aix(同上,如果做過就不用再做一次)
  • 產生很多micro:bit相關的東西,這次要控制LED,所以選擇Microbit_LED
  • 在Microbit_Led1的“屬性”選項卡中,將BluetoothDevice設置為“BluetoothLE1”
  • 接下來加入一個TextBox及兩個按鈕,第一個按鈕改名為WriteLEDButton並將其Text屬性更改為write to LED;第二個按鈕改名為SmileyButton,並將其Text屬性更改為Draw Smiley。
  • 開始來將與LED有關的程式寫進去,點選Blocks開始寫程式了
  • 當 WriteLEDButton.Click
  • 建一個畫笑臉的副程式
  • 當 SmileyButton.Click
  • 程式完成,再將檔案下載到手機來測試
  • 測試完成,但畫笑臉好像有問題!
四、偵測到物體移動後,將訊號傳到手機上
  • 以上為學習課程,照著別人的講義來做,接下來偵測到物體移動(micro:bit)後,將訊號傳到手機
  • 這部分因不知如何呈現,所以學前面讀取溫度的方式來取得Accelerometer上X、Y、Z的值
  • 使用App Inventor 寫程式來讀取micro:bit上Accelerometer上X、Y、Z的內容,藍牙程式同上
  • 接下來加入讀取micro:bit Accelerometer的擴展功能 http://iot.appinventor.mit.edu/assets/com.bbc.microbit.profile.aix(同上,如果做過就不用再做一次)
  • Accelerometer
  • 作法同上,再增加三個Label來呈現X、Y、Z的值
  • 程式的部分:
  • 當藍牙連接成功後,把Accelerometer值也叫出來
  • 增加X、Y、Z三個變數
  • 顯示X、Y、Z的值
  • 這樣就可以在手機顯示X、Y、Z的值了,再看後續要做何運用,再做處理!
五、其他

亮LED燈的運算思維


  (2018/12/28)

一、前言:
無需艱澀的Java開發語法,同學已學過App inventor 手機版的積木式語言練習,
體驗過積木遊戲式程式設計,相信對程式基本結構,有初步的體驗,今天我們
來開始玩micro:bit,它也是以積木式語言來練習,我們先從模擬器來設計程式,
進而讓各位動手做micro:bit硬體接線。就先設計學習單,在構思階段如下所示
流程圖,為完成一個創客作品的過程用流程圖表現出來,希望能同學間對話時,
用此圖表做為後設思考的表徵。
基本概論講義連結

二、學習單:
以下有八個任務,分成兩張學習單
進入micro:bit 積木程式設計網頁,老師先解釋流程圖的內容。
先不發 micro:bit 給同學,直到同學能完成任務 1~6。
盡可能由同學自己想怎麼做,老師頂多只是提示,
但同學可以互相討論如何才能完成
老師給的任務,希望自己摸索。

第一張學習單:
Task 1:在模擬器上顯示你的座號
Task 2:在模擬器上顯示一個英文字母
Task 3:在模擬器上顯示一個心形圖案
Task 4:在模擬器上顯示一閃一閃的燈,
並全螢幕顯示,看看別人的作品。

       第二張學習單
       同學可利用迴圈讓LED燈從左到右亮燈,如下圖Task 5所示:
       若採用寫程式的角度來說明,剛開始同學可能不易容易理解,
       所以對於初學者還是應該從一步一步來說明~~


       Task 5:讓第一列的LED燈從左到右亮起

           
  • 同學們一開始是用這程式來學習,你聽得懂嗎?
如上的任務:讓第一列的LED燈從左到右亮起
一、解析思考一下:我們就打散重練,再往下看囉!
                  第一列代表y=0;從左到右 代表x=0到x=4
  • 一顆燈一顆燈亮起來,這是學生最容易理解的方法
  • 運算思維的第一步
二、請同學們觀察如何拆解及找【相似】的東西
  • 如何拆解:如下圖的拆解,共拆成【相似】的部份有五個
  • 折解後有何發現:拆解後,發現除了x的值依序增加外,其他都一樣
  • (運算思維的第二步)
三、利用【重複5次】的抽象積木來簡化複雜工作
  • 加入【重複5次】的積木
四、利用變數來取代X的值
  • 由於X的值不是固定,而是有規律的從0,依序增加到4,所以就用一個變數來替代
  • 先取一個變數的名稱,這邊取變數的名稱為X
  • 取完名稱後,要設定【變數X】的初始值,這邊設【變數X】的初始值為0
  • 將亮燈x後方的數值,用【變數X】來取代
  • 當燈亮一顆後,要將【變數X】的值增加1
五、變數【設為】與【改變】容易混淆
  • 同學們最常搞混
  • 所以又可將程式改為
(運算思維的第三步)
六、利用【新的抽象積木】取代前面【重複5次】的積木來更簡化複雜工作
  • 這個【新的抽象積木】是結合了【變數】與【重複】兩種功能的迴圈積木

  • 利用新積木取代上面的程式
      是否感覺精簡了很多,只需6個Block,但沒有經過上面的推演過程,
    若剛開始要同學們寫出這樣的程式,是不是比較不容易呢!
  • Task 6:按A出現LED燈從左到右亮起,B出現LED燈從右到左亮起。

         發 micro:bit 給學生,由學生自己摸索,要是都沒有人能成功。
         老師就再給一點點提示。

結論:micro:bit積木程式設計練習,本學習單以LED顯示設計為主,
             同學們透過軟硬體的設計,還有各式各樣的創意可想像。
     總之本學習單-LED燈的運算思維就是把你想做的事情用機器(micro:bit)
     聽得懂的話講給它聽,它聽了你的吩咐之後,要能做出你想要的結果。
備註:
microbit 電路板強大的音樂功能,程式就可以做收很棒的音效及音樂