20230323鼎金國中

主題：Webduino開發板教學經驗分享與實作

教材講義：http://gg.gg/0323dj

講師：黃文玉老師 (shspswenyu@gmail.com)

• 高雄市新上國小電腦老師

• 高雄市SCRATCH推廣教師

• 教育部中小學教師運算思維增能研習種子教師

• Facebook S4A社團管理員之一

• 第一屆聯發科 2022 STEM造課師 

• 致力Scratch、Arduino、micro:bit、Web:Bit、凱比機器人等程式教育及創客教育的推廣(分享一系列的文章)

一、認識Web:Bit

• Web:Bit官方(Webduino)資料

  • Web:Bit教學手冊：https://webbit.webduino.io/tutorials/doc/zh-tw/education/index.html 

  • Web:Bit教育版

    •  線上版網址：https://webbit.webduino.io/blockly/?demo=default  (免註冊登入)

    • 安裝版下載：https://ota.webduino.io/WebBitInstaller/WebBitSetup.exe 

    • 根據學校老師上課發現，線上版同時近30人上線會有lag現象，所以大班上課時，還是建議採用【安裝版】

    • 程式並沒有真正寫到開發板內，所以斷電程式就不見了

  • Web:Bit的另類玩法

• • 因Web:Bit開發板的核心是ESP32晶片，所以可以用玩ESP32晶片的玩法來玩它

  • BlockDuino F2：https://sites.google.com/site/wenyunotify/03-webbit%E9%9B%A2%E7%B7%9A%E7%89%88

  • microBlock IDE：https://sites.google.com/site/wenyunotify/24-microblock/06-webbit%E7%9A%84%E4%BD%BF%E7%94%A8

  • E-GAME島嶼樂園【智慧島】的【Web:Bit工具箱】

    • E-GAME島嶼樂園：https://www.egame.kh.edu.tw/login 

    • Web:Bit工具箱：https://ap10.egame.kh.edu.tw/webbit/  (好像不用登入島嶼樂園也可用) 

    • 與官方的 web:bit x Kebbi 平台相似

    • 增加了法蘭斯積木 

• • 程式的基本結構

    • 循序結構

    • 重複結構

    • 選擇結構

二、韌體更新及WIFI設定

• 安裝版  https://webbit.webduino.io/blockly/?demo=default

• 線上版

• 只有安裝版有【回復原廠韌體】功能

三、內建元件及感測器的使用

• • • 屏幕顯示：

      • 顯示文字數字跑馬燈

      • 心臟噗通噗通跳 (循序結構及重複結構)

• • • 量測光線亮度、溫度：

      • 量測光線亮度及溫度

        • 亮度值介於0(最暗)~1000(最亮)

      • 天黑請開燈 (選擇結構)

• • • • 光影魔術手(手從左邊往右邊移動)

• • • 按鍵的使用

      • 剪刀石頭布 遊戲(指定出拳)

• • • 九軸感測器的使用

      • V1版才有此功能、V2版沒有此功能了

      • 先擴充【九軸體感偵測】積木

      • 剪刀石頭布 遊戲(隨機出拳)

        • https://webbit.webduino.io/blockly/#nqnoXQ4XPeJ3Z 

• • • 蜂鳴器的使用

      • 播放全家的歡迎音樂

        • 簡譜：3 1 5(低音) 1  /  2 5~ 2  /   3 2 5(低音) 1

        • https://webbit.webduino.io/blockly/#6RLrxv97n9v3V 

四、物聯網的應用

• • • 氣象資訊 (爬蟲、opendata)

      • 空污旗：https://webbit.webduino.io/blockly/#VRmXPWk2zWEy2 

• • • Google試算表

      • 參考資料：https://sites.google.com/site/wenyuwebbit/05-%E7%B6%B2%E8%B7%AF%E6%87%89%E7%94%A8%E7%AF%87/01-google%E8%A9%A6%E7%AE%97%E8%A1%A8 

      • 把溫度及亮度值上傳到Google試算表

        • https://webbit.webduino.io/blockly/#rybbMaWJ8JKyk 

• • • • 使用LINE Notify通傳 

        • 打開 LINE Notify 的網站 ( https://notify-bot.line.me/zh_TW/ )，使用自己的 LINE 帳號登入。

        • 取得權杖 ，要記好，以後無法再查得此權杖     tGqLQU8Ygka25DTDFIcCNaq93TxI988Okp3nTld3L6EE

      • 心情傳送器

        • 程式：https://webbit.webduino.io/blockly/#kRvQ06K2GO4yQ 

      • 簡易保全系統

• • • 網路廣播

      • 是透過MQTT的機制來互動的

        • MQTT的架構：

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

          • 相當於youtube的訂閱機制(youtuber為【發布者】、youtube網站為【Broker】、你我為【訂閱者】)

        • 虛實互動：https://webbit.webduino.io/blockly/#xqVMDLKK8p1R7 

          • 打開2個線上版

• 另外，可使用下面的網頁界面來互動

  • 法蘭斯Webduino MQTT：https://fustyles.github.io/webduino/webduino_mqtt.html 

  • 萬用遙控器：https://www.oxxostudio.tw/webduino-remote/ 

• 利用網路廣播來互動

  • 可利用網路廣播進行一對多、多對一、虛實互動...

  • 廣播積木的【頻道】就是MQTT的【主題】

  • 一對多【群控】的測試 

五、登月小車

• • • 先設定WIFI連線方式，並製複Device ID

    • 簡單車子運動：https://webbit.webduino.io/blockly/#ayxAxkDeLkQRM 

• • • 避障小車：https://webbit.webduino.io/blockly/#JyeOMkDW4pjqV 

• • • 遙控小車

      • 利用【紅外線遙控器】來遙控小車 (就不做了)

      • 利用【另一塊Web:Bit】來遙控小車

        • 使用【網路廣播】來互動

        • Web:Bit程式：https://webbit.webduino.io/blockly/#7RprP5DEm4z3r

        • 小車程式：https://webbit.webduino.io/blockly/#7qZrwWgamkpqO 

• • • • 利用【萬用遙控器】來遙控小車

        • https://www.oxxostudio.tw/webduino-remote/#-NR73urRhL5i9GbYylTE