20211119文山國小(2)

主題：Web:Bit(ESP32)的IoT初體驗

教材講義：http://gg.gg/1119ws

一、使用軟體：BlocklyDuino

• • • 聯發科公司針對Linkit 7697所推出的積木程式(目前好像已停止更新了)

    • 經過法蘭斯、劉正吉、ICSHOP幾位大神加以改良及增加很多積木讓功能更加完善

    • 所以，這兩次研習，我們會以BlocklyDuino來做為我們主要的軟體(積木很多，有時像在逛迷宮一樣，小心迷路)

    • BlocklyDuino下載：

      • 先下載Blocklyduino V3：https://github.com/MediaTek-Labs/BlocklyDuino-for-LinkIt/releases/tag/3.0.312b?fbclid=IwAR2RDvEFnyUv_J-0VFGn1mogC1fm4e-OkYzY2JWh59rnxFkY5Si4wB-WO2c

      • 再下載法蘭斯BlocklyDuino F1版：https://drive.google.com/drive/folders/1BleacNvHvj1HDJ7srcNTexv9JQnM6QhK?fbclid=IwAR1-mEKhNH5Yi8ckgXkX8dRJZWF1p_fSCuhhgqe0IfsDLBa_QWDPwg9khRg

      • 再進行吉哥積木、法蘭斯積木及ICSHOP積木的安裝

      • 吉哥積木安裝說明：https://sites.google.com/jes.mlc.edu.tw/ljj/linkit7697/%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E5%90%89%E5%93%A5%E8%87%AA%E8%A3%BD%E7%A9%8D%E6%9C%A8

      • 我已先完成了上述環境的整合，下載如下：https://educase.kh.edu.tw/navigate/s/F1328AE4FB094045AB5811BDA92735CCAUY

      • 下載，解壓縮後，建議直接放在C槽或D槽的根目錄下

二、使用硬體：Web:Bit

• 回復Web:Bit原廠韌體

  • 要使用Web:Bit教育版的安裝版

  • 回復原廠韌體後，Device ID會變成【長ID】(有18碼)

三、認識IoT(Internet of Things)物聯網

• 連上網路：說到物聯網當然第一件事就是要連上網路

  • 有兩個連上WIFI的積木

    • 系統內建的積木

    • 法蘭斯積木

• 其他物聯網相關積木

  • 法蘭斯積木：

  • 吉哥積木：

  • 有些功能採用吉哥積木；有些功能採用法蘭斯積木

• LINE通知

  • 當按一下A鍵時，會傳出一則LINE通傳

    • 這邊先以按A鍵來測試，下次再按需要來調整，如什麼被觸發了，就傳LINE告知

  • LINE權杖的申請：網址：https://notify-bot.line.me/zh_TW/，可參閱04 LINE的應用

  • 參考資料：吉哥的分享

  • 程式：(使用法蘭斯積木，因為法蘭斯積木比吉哥積木多了圖檔上傳)

• 目前那些表情包的代碼及相對應的圖已失連，再請有此檔者提供，謝謝

• 彩蛋：上傳圖片網站(OpenDrive) https://www.opendrive.com/ ，好用！！

  • https://od.lk/s/ODRfNTkyMjU1MDhf/01%E6%A3%92%E7%90%83.jpg

  • https://od.lk/s/ODRfNTkyMjU1MDRf/05%E9%81%8A%E6%88%B2.jpg

  • https://od.lk/s/ODRfNTkyMjU0OTZf/10%E5%96%9C%E6%82%85.jpg

• ThingSpeak收集資料

  • 利用Thingspaek收集左上、右上光線亮度值及溫度值

    • Thingspaek免費帳號，上傳資料的間隔時間至少15秒

  • Thingspeak官網：https://thingspeak.com/

  • 參考資料

  • 先上Thingspeak建立一個new channel，內含三個field

  • 程式：

• 上面程式測試後，發現吉哥積木居然沒有成功！！

• Google試算表收集資料

  • 利用Google試算表收集左上、右上光線亮度值及溫度值

  • 先新增一個空白的google試算表，並去【共用】，設成【知道連結的使用者都可以【編輯】】

  • 參考資料：吉哥的分享

  • 程式：(使用吉哥積木，因為法蘭斯好像沒有提供此積木)

四、認識MQTT

• MQTT介紹：

  • 用B站解释MQTT协议

  • MQTT由三種角色構成，分別是Publisher(發布者)、 Broker(代理人)和Subscriber(訂閱者)

  • MQTT的主題（Topic）名稱：MQTT主題名稱是UTF-8（萬國碼）編碼的字串，我們可以自行決定主題名稱，例如，傳送溫度的訊息主題可命名成「溫度」、傳送亮度的訊息主題叫做「照度」…等等。主題名稱也支援類似檔案路徑的階層式命名方式 ，如： wenyu/home/1f/led

  • 免費的Broker資料

    • HiveMQ：broker.hivemq.com 、TCP Port：1883

    • EMQX：broker.emqx.io、TCP Port：1883 / 8883(TLS)

  • 參考資料：吉哥的分享

• 作品一：先讓Web:Bit當訂閱者

  • 當發送者發送【red】時，Web:Bit屏幕亮紅燈

  • 當發送者發送【green】時，Web:Bit屏幕亮綠燈

  • 當發送者發送【藍燈】時，Web:Bit屏幕亮藍燈 (payload用中文也可以)

  • 當發送者發送【0】時，Web:Bit屏幕全關燈

  • 程式如下：

• 發送者：利用多個平台當發送端

  • HIVEMQ網頁：http://www.hivemq.com/demos/websocket-client/

• MQTTBox

  • 電腦程式：在網址列輸入MQTTBOX，直接使用【Chrome線上應用程式商店】來安裝

  • 簡單操作：broker.hivemq.com:1883

• 手機APP

  • Android手機：MQTT Dash或IoT MQTT Panel

  • iPhone手機：

  • 簡單操作：MQTT Dash當範例

• 作品二：Web:Bit除了當訂閱者，也可以當發布者

  • 當按A鍵會發送【red】訊號

  • 當按B鍵會發送【藍燈】訊號

  • 當按A+B鍵會發送【0】訊號

• 作品三：將Web:Bit的亮度、溫度發布出去，利用MQTT Dash來接收

  • 將溫度、亮度顯示在MQTT Dash面板上

• 上面MQTT檔案下載

• 用最簡單的方式自架MQTT Broker

  • 參考資料

  • 大陸軟體

  • 不是很穩定

  • 如果沒有實體IP，Web:Bit要與電腦同一網段