20230317文山國小

主題：當Web:Bit遇上凱比

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

時間：2023.03.17(五)13:30~16:30

地點：文山國小三樓電腦教室

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

一、認識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的WIFI設定，使用線上版及安裝版均可設定WIFI，並把Device ID複製下來

• 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 平台相似

    • 增加了法蘭斯積木，最後再做介紹

二、認識凱比機器人

• 凱比機器人是由女媧公司所生產的，官網：https://www.nuwarobotics.com/zh-hant/ 

• 目前使用的為第二代 Kebbi Air S

• • 凱比的基本使用：

    • 開機：長按頭上開關

      • 軟體更新：若久沒更新，會花不少時間來更新

    • 開啟APP選單：

      • 可下拉出功能表來，由螢幕上方往下方拉動即可，可在此調整聲音、亮度，常用的【設定】、【Wifi設定】就在此

    • 連上網路：

      • 凱比就相當於一台Android手機或平板，如果不能上網，功能會大大降低，所以第一步就是要上網！

      • 如果要常移動可直接利用自己的手機熱點來讓凱比連線（註：無法連上利用IPhone手機分享的熱點）

    • 與凱比聊聊天

      • 與凱比互動的口令：Hello Kebbi (Hello 凱比))

      • 也可以觸摸凱比肚子上的感應燈來喚醒他

      • 肚子感應燈亮橘燈時可直接對話，亮藍燈後才用口令來互動。

    • 頭上開關

      • 短按開關：會回到凱比表情畫面，在表情模式下再短按開關則會進入【勿擾模式】

      • 長按開關：勿擾模式(相當於關機，但再短按開關即可回喚醒)、重新開機、關機。

  • Webduino的web:bit X Kebbi 平台

    • • 凱比機器人要有裝【物聯網教室】(南部人的玩法)；北部人玩女媧的【程式實驗室】

      • 從物聯網教室取得【Device ID】(相當於凱比的身份證字號)

      • 平台網址：https://kebbi.webduino.io/login

  • 凱比積木

    • 一共有移動、肢體、燈光、表情、聲音、動畫表演及感應等7個項目。

      • 肢體部份

        • 頭部

        • 肩膀

          • 內轉0度在最外面

          • 內轉90度在最裡面

          • 上抬0度：手在下方偏後

          • 上抬240度：手在正上方

        • 手臂

          • 手臂側抬0度是手臂自然垂下

          • 手臂側抬90度是抬到水平方向

        • 手肘

          • 手肘上抬0度是手肘自然垂下

          • 手肘上抬75度是手肘鈎起

      • 說話+動作

        • 說話完後才動作

        • 說話與動作同時(要打勾【背景執行】)

      • 播放音樂

        • 播放音樂積木都屬於背景執行，本身不占時間，馬上執行下一個積木

三、基本測試

• 按Web:Bit的A鍵凱比向前走、按Web:Bit的B鍵凱比向後走

  • 在Web:Bit X Kebbi平台，Web:Bit只能用Wi-Fi連接才會有【部署到機器人】的功能 (程式如下)

• • 如果Web:Bit 在Web:Bit教育版平台，就要利用【廣播】來互動

    • 這時不管【模擬器】、【USB連線】或【Wi-Fi連線】都可以使用

    • Web:Bit在教育版平台：https://webbit.webduino.io/blockly/#b3Gj4r1Nw8QqA 

• • • 凱比在web:Bit x 凱比的平台

      • 程式：https://kebbi-iot.webduino.io/webbit/#Eqdn14GVQBey6

• 這些都是透過MQTT的機制來互動的

  • MQTT的架構：

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

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

  • 官方MQTT Broker資料：

    • 採用 Websocket ：

      • ws://mqtt1.webduino.io/mqtt (預設80port)

      • wss://mqtt1.webduino.io/mqtt(預設443port)

      • Username： webduino

      • Passeord： webduino

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

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

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

• • 利用網路廣播來互動

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

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

    • 一對多【群控】的測試，凱比程式如下：https://kebbiiot.webduino.io/webbit/#wqaWr5gPzNZyY  

三、LINE的應用

• 教學請參閱：04 LINE的應用

• 使用 LINE 的聊天(chat)控制

  • • 顯示加入好友的【行動條碼】

    • 輸入id，取得頻道名稱

    • 修改上面的程式，改用LINE來進行遠端控制

• 使用LINE Notify通傳

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

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

    • 程式：https://kebbi-iot.webduino.io/webbit/#JyeOQoGAOA0qV

四、無人看守的是非題問答機【改用Google試算表來出題】

• 使用【陣列】出題：https://kebbi-iot.webduino.io/webbit/#rybbrVYL0Emyk

• 使用【Google試算表】出題：https://kebbi-iot.webduino.io/webbit/#VRmX1vkPEejy2

  • • 開啟 【Google試算表】

    • 設定共用權限：知道連結的人均可以【檢視】，並複製該連結(只有取資料，沒有寫入，如果寫入就要用知道連結的人均可以【編輯】)

五、英語會話【Google試算表】

• 先擴充【英語會話】積木

• 到【教學】內有詳細使用介紹，真的很簡單好用

  • 教學：https://webbit.webduino.io/tutorials/doc/zh-tw/kebbi/english/spread-sheet.html

  • 修改英語會話 Google 試算表模板  (先登入 Google 雲端硬碟)

  • 更改參數、對話內容及圖片 https://kebbi-iot.webduino.io/webbit/#Qq70dxAkzlE3B  

六、聲控

• 聲控時，右上方會出現【麥克風】的圖示，都沒聲音後大概3~5秒才會消失

• 前進、後退的聲控 https://kebbi-iot.webduino.io/webbit/#Jyg9Qzgm2Ddq4 

• 
  

• 開燈、關燈，使用MQTT控制遠方的家電

  • • 利用Web:Bit模擬器的屏幕全亮代表開燈

    • 利用Web:Bit模擬器的屏幕全暗代表關燈

七、影像辨識

• 有沒有戴口罩

  • • 擴充【影像分類】積木

    • 內容請參考：https://sites.google.com/site/wenyuwebbit/08-%E5%87%B1%E6%AF%94%E6%A9%9F%E5%99%A8%E4%BA%BA/18-%E5%BD%B1%E5%83%8F%E8%A8%93%E7%B7%B4?authuser=0

    • 建立3個分類來組成一個模型

      • 有戴口罩

      • 沒戴口罩

      • 無人時(純背景)

    • 檔案：https://kebbi-iot.webduino.io/webbit/#Jy1aKemjDo0yl

八、法蘭斯積木

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

  • 增加了法蘭斯積木，新增法蘭斯積木的方法，如下

    • 可一次新增1種積木或全部新增

    • 也可一次移除1種積木或全部移除，或取消【外部擴充】就會全部移除了

• 法蘭斯積木的使用

• • Web:Bit工具箱：https://ap10.egame.kh.edu.tw/webbit/ 

  • 法蘭斯老師的研習教材：

    • Web:Bit工具箱：https://drive.google.com/drive/folders/1iV7l6UiC1YXu9SWJt4OV5iEqADVZyHre?fbclid=IwAR1kgNDZYtAGNnt3_WgyZCnkH-h8FFuJNpfZOkdhPMoTfbs0R9sK0KeXr6Q 

    • 凱比機器人：https://drive.google.com/drive/folders/14zi4JMHVsA4K4SkJJacO__DH2uHyorUp?fbclid=IwAR1kgNDZYtAGNnt3_WgyZCnkH-h8FFuJNpfZOkdhPMoTfbs0R9sK0KeXr6Q
      
      

  • 可利用臉部表情來控制凱比的動作

    • https://ap10.egame.kh.edu.tw/webbit/#ARzvblG67WVR2 

• OpenAI

  • • chatGPT相關網站：

      • 官網：https://openai.com/ 

      • ChatGPT註冊頁：https://openai.com/blog/chatgpt/  (建議直接用Google帳號註冊，會利用手機號碼進行認證)

      • 對話頁：https://chat.openai.com/chat 

      • 取得API的頁面：https://platform.openai.com/account/api-keys 

    • 取得API ：                       sk-xTwbTeBEBGYi9aTP78bzT3BlbkFJXq2kvrkigIzIjO9QhIm11

    • 範例

      • 語音互動：https://ap10.egame.kh.edu.tw/webbit/#r344KbkrArj3d 

      • 生成圖片：https://ap10.egame.kh.edu.tw/webbit/#rybbMGvrLQnyk  

  • 網頁元素-表單查詢

    • https://ap10.egame.kh.edu.tw/webbit/#Eqdn1GXV7ZBy6  

  • 法蘭斯老師的研習教材中還有很多程式，可供參考練習