2018Webduino Smart 上課講義 (By:泰山高中 電子科 陳致中)
1. Webduino bit 與 Smart 開發板外觀不同
P5、P14、P16 可做數位寫入/讀取
2. Webduino bit 與 Smart 開發板優缺點比較
A. Smart 優點：體積小、價格低、耗電量低，適於長時期環境物聯網監控，內建單顆全彩 LED， 可以練習類比輸出，單顆按鈕開關，可以練習數位輸入，光敏電阻可以練習類比輸入，同時提 供 3.3V/5V 兩種電源輸出，可應用的感測器與擴充套件積木較多，增加資料庫積木。 B. Smart 缺點：擴充 GPIO 腳位少，類比輸出僅 P12、P13、P15，類比輸入僅光敏電阻腳位，無 專用積木，若欲使用建議將光敏電阻遮住，此時讀值趨近於 1，並接於 AD 腳位即可(如土壤濕 度感測器就是屬於類比輸入)，模擬器和程式撰寫視窗分開，每個 Google 帳號僅提供 20 個專 案供儲存連結，若超過 20 個專案，改用其他 Google 帳號可，反正申請 Google 帳號是免費。 C. Webduino bit 優點：內建 25 顆全彩 LED，直接輸出結果，新增九軸感測器、溫度感測器，兩組
3. 兩者都是利用 https://cloud.webduino.io/ 進入網頁，Smart 點選左上角圖示，Webduino bit 點選左下 角圖示，然後按 登入。 (註：IE 無法進入，需用 Chrome 瀏覽器)
註 1：首頁右下模擬器只有 Smart 有，但 Webduino bit 沒有，因為已經整合。
註 2：右上方『裝置管理』目前暫不包括 Webduino bit，按 + 添加開發板，管理主要目的方便即時 知道所有裝置連線狀態，適於老師授課管理，認證後就可以一次勾選多台裝置同時做韌體更新。 回主頁 用於 Smart 用於 Weduino bit 韌體更新
認證方式→ → → 認證後方可更新 認證後，當選取某一開發板之後，按 更新韌體 更新最後會看到紅燈閃爍，當熄滅時表示韌體更新成功。 4. 工具列區與儲存方式不同。 A. Smart： ，沒有『模擬器區域』圖示，也沒有『儲存並產生連結』圖 示，因為 Smart 採用 Google 雲端管理方式，不用特別按儲存，因為每一個操作步驟都記錄在 雲端，當下次開啟時就會自動回到最後一次的編輯畫面，若欲分享連結點選左上角 圖示，透過專案管理介面， 表示已經使用 7 個專案，點選某個專案， 按下 重新命名， 建立副本(適於內容相似，先建立副本再透過修改部分內容變成另一個 應用)，按下 分享連結，該分享的網址固定不變，當任何人用其他 Google 帳號點選該連結， 就可以開啟並自行再修改使用，或是利用左側『公開的檔案』，利用搜尋關鍵字，找到後須有 做任何修改動作，則會看到專案裡面增加 xxxz 副本，屆時再利用修改名稱即可。 更新成功後，按關閉離開，不要又按更新
5. 積木種類以 Smart 較多，如左下圖。
6. 內建範例不同，應用範圍也不盡相同，由於 Smart 低耗電，適於長期監控，而 Webduino bit 內建 25 顆 LED，搭配模擬器視窗，所以十分適於學習程式語言常用的迴圈與判斷，若有讀值欲顯示， 也不一定要透過網頁互動區域顯示文字。
V.S.
8. 兩者在部分積木按右鍵，都有提供『小工具』功能，輸入 Device ID 後按下『設定』，連線之後方可 錄音，若一直連不上，請將安全性重新設定即可。
(Webduino bit 無支援點矩陣小工具)
9. 利用自訂積木 https://fustyles.github.io/webduino/LineBot_20181027/blockly.json，微型按鈕開關 +LINE 通知實作，例如當成緊急按鈕通知、定時吃藥通知。
註：取得上述 Line Notify Token 步驟如下： (註：Notify 是通知、Token 是權杖的意思) 1. 進入https://notify-bot.Line.me/zh_TW/ 官方網站，按下右上方『登入』按鈕，輸入登入的帳號與 密碼，登入個人 Line 帳號。
2. 右上方顯示帳號名稱，選擇名字旁邊的下拉式選單，選擇『個人頁面』。 3.請選擇最下方『發行權杖』，第一個權杖名稱一定要填，未來在通知時，會出現【…】告知發話人 是誰或通知用途，內容最多 20 個字，第二個是選擇通知的對象可以是『1 對 1』，也可以直接選擇 任意一個群組，若要選擇群組，記得要將 Line Notify 加到該組群裡面，當兩個欄位都設定後，方 可按下底下『發行』按鈕。 4.此時 LINE 帳號會收到連動通知。 5.不同的權杖名稱，都會隨機產生一組獨一無二的通行識別碼，按下『複製』按鈕會自動將 token 紀 錄起來，記得要立即貼到自訂積木裡面，因為當離開此視窗，將不再提供。
10. 如果上述 token 外流，遇到有心人士亂傳一大堆資料，只能回到首頁按『解除』，然後再重新建立 新的 token，程式碼也要同步更新，所以盡量注意個人隱私勿外流。
11. 兩者初始化不同，Smart 在出廠時沒有給 Device ID，是在進行第一次韌體更新後配發，一旦配發後 就無法修改，Device ID 長度較短，如 10dLn7nV，而 Webduino bit 在出廠時就設定，Device ID 長 度較長，如 8NafA8TBRiw8tByH3E，除非透過韌體更新時，按 重新取的較短 Device ID， 如 bitbebe9 ，所有的 ID 都是獨一無二，也因此兩者都有跨網域控制能力。 12. Smart 初始化步驟如下： A. 將 Smart 插上 5V 電源，因為開發板尚未連線至區域網路，所以全彩 LED 會一直做紅燈閃爍。 B. 使用手機的設定 → 開啟 Wi-Fi搜尋 → 找到 Smart AP 名稱，點選後輸入預設密碼 12345678， 進行連線。 C. 連線後打開 Chrome 瀏覽器，網址列輸入 192.168.4.1，就可以連線到 Smart 開發板的設定 畫面，上面除了「一定要」設定的所在場所的 Wi-Fi SSID 與 PWD，若是學校上課電腦非無 線上網，可用手機行動無線基地台 AP 分享，接著也可以設定裝置在 Wi-Fi 搜尋中所顯示的名 稱和密碼，避免別人用 12345678 也可以連結到你的裝置，Device ID 的部分會在進行第一次 韌體更新後配發，每塊 Smart 會配發獨一無二的 ID，無法填寫與修改。
D. 設定完成後，按下 SUBMIT 提交儲存，出現 SAVE OK 的字樣表示儲存成功，如下圖所示， 此時 Smart 開發板會重新啟動，請注意此時 Device ID 尚未取得，也不可自行輸入。 E. 將手機 4G 行動數據開啟，並開放行動無線基地台 AP 分享，此時 Wi-Fi 會強制關閉，將 Smart 開發板電源拔除再開機，因為裝置無 Reset 重新啟動按鈕。 F. Smart 開機會並先閃爍紅燈，代表在偵測網路，當紅燈熄滅，且綠燈亮起後，表示 Smart 開發 板已經成功連結上環境內的 Wi-Fi 基地台或手機動無線基地台 AP， 若紅燈持續閃爍或恆亮， 請移除電源，重新操作上述步驟。 G. 在電腦或行動裝置的 Wi-Fi 搜尋裡，看到「我們自訂的名稱_192.168.XXX.XXX 」，以下方的 例子來說就是「COOL_192.168.0.230」，記下後面這個 IP 數字，透過這個 IP 我們就可以用 WebSocket 來連線控制了。
註：未來若有變更 SSID 連接位置或要查詢 Device ID，記得要先將手機 Wi-Fi 連到這個 AP， 透過區域網路方能利用 Chrome 瀏覽器輸入 192.168.xxx.xxx 查詢或重新設定。
H. 進入 http://blockly.webduino.io，如果是使用 WebSocket 連線，網址開頭必須為 http 不能是
https，要特別注意！，放入開發板的積木，種類選擇 Smart，連線方式選擇 WebSocket，然後
填入剛剛的 IP，接著放入三色 LED 燈的積木 ( 使用三色共陰 )，紅色設定 15，綠色 12，藍 色 13，並設定三色 LED 燈的顏色為紅色，若欲使用 Device ID 控制 Smart 請看底下步驟。
13. 使用 WebSocket 連線反應較快，也不用 Device ID，但僅限於『區域網路』控制，如果要使用 Wi-Fi 連線控制，就一定要取得 Device ID 同時透過網路更新韌體，相關步驟如下：
A. 將 Smart 開發板電源拔除再重插上開機，在紅燈閃爍期間，務必按住 Micro USB 旁的微型按 鈕開關不放(Webduino bit 是按住 A 鍵 )。
註：如果先按住按鈕，再接電源，會讓 Smart 回復出廠設定，如果回復出廠設定，Wi-Fi 的 SSID 和密碼都必須重新設定。
B. 按按鈕更新韌體，只是讓基本功能的更新與提升開發板效能更為便利，如果要取得最新版本的 韌體，必須透過雲端平台進行更新。
C. 按住直到綠燈亮起後，再放開按鈕開關，此時藍色燈會亮起 ，表示開始下載更新檔，下載完 成後完成後藍色燈會熄滅，開始進行更新，約 5~10 秒，更新完成後紅色燈會亮起，接著會閃 紅燈進行連線，連線成功後綠色燈會亮起，當綠燈熄滅，表示我們可以重新開始控制開發板。 註：進行更新的 5~10 秒請勿移除電源，否則可能會造成更新失敗而無法啟用開發板的狀況。 D. 此時 Smart 和手機已經連線，手機應可看到連接的裝置，記住動態分到的 IP 編碼，透過 192.168.xxx.xxx 進入設定頁面，就可以看到版本號已經更新，同時也應該出現 Device ID 了。
E. 當我們取得 Device ID，如果不想用 WebSocket 操控，亦可用這組 Device ID 來控制，控制的 方法是選擇 Wi-Fi，填入 Deivce ID 就可以操控，記得這是跨網域控制。
14. 雲端打卡系統實作，LED+RFID+8x8 單色點矩陣+Google 試算表綜合應用，RFID 是用 3.3V。
綠燈亮，紅燈滅，表示是班級學生 都亮表示有偵測到 RFID
註 1：Google 試算表必須設為『任何知道連結均可編輯共用權限』，否則後台服務主機無權限寫入 資料，為避免權限太高，學生可以亂改資料，解決方式是在 Google 試算表按『檔案→發佈到網路 →選擇網頁格式』，僅公告家長與學生此共用連結即可，但預設是每 5 分鐘更新資料，所謂 5 分鐘 不是 RFID 刷卡後 5 分鐘，而是主機每隔 5 分鐘全部自動更新資料，更新後必須按 F5 重新整理，方 可看到最新資料。 註 2：如果希望新增的資料放到最上面，可避免資料太多要找許久，技巧就是再新增一個工作表， 假設名稱改為 SORT，在 A1 位置輸入=query('工作表 1'!A:D,"SELECT A,B,C,D ORDER BY A DESC,B
DESC")，將工作表 1 四個欄位資料排列由 Z 到 A 遞減(DESC)，重按『檔案→發佈到網路→選擇網
頁格式』，整份文件改為 SORT，將此 URL 連結公告即可解決。
註 3：建議不要將此專案分享，因為別人可以根據積木內容，開啟共用的試算表，因為只要知道連 結的人都可以編輯，實際就遇到有人故意刪除試算表，所以未來分享的時候要特別留意。
Smart 官網範例 ： 基礎操作
1. LED
2. 全彩 LED (Smart 內建的全彩 LED 為共陰，跟範例積木不同，且只有 P12、P13、P15 有 PWM)。
3. 蜂鳴器 buzzer (同 Webduino bit，善用右鍵『小工具』)
4. 伺服馬達 (同 Webduino bit)
5. LED 點矩陣 (須使用5V，Webduino bit 沒有，因已經內建，善用小工具) 動畫亦可當成 3→2→1 倒數使用。 Smart 官網範例 : 傳感器應用 1. 超音波偵測距離 (同 Webduino bit) 2. 偵測環境溫濕度 (同 Webduino bit) 3. 偵測聲音 (同 Webduino bit)
4. 偵測人體紅外線 PIR (Webduino bit 沒有，因為要用 5V)
5. 偵測環境光線 (同 Webduino bit)
6. 偵測土壤濕度 (同 Webduino bit)
7. 偵測三軸加速度 (Webduino bit 內建九軸感測，均為 I2C 連接)
Smart 官網範例 : I/O 腳位
1. 操控兩顆 LED (同 Webduino bit)
2. 操控全彩 LED (預設是共陽，內建單顆 LED 是共陰，兩者積木不同)
Smart 官網範例 : Youtube 應用
2. 按鈕開關控制播放 (同 Webduino bit)
Smart 官網範例 :進階應用
1. 網頁虛擬遙控器 (同 Webduino bit)
2. 聲控電燈(同 Webduino bit)
4. 倒車雷達 (同 Webduino bit，而 Webduino bit 的 Buzzer 已經內建)
6. 自走車(虛擬遙控器)
7. 資料庫紀錄溫濕度
8. RFID 簡易門禁系統
10. 鬧鐘(蜂鳴器+點矩陣)
Smart 官網範例 :開發板連動
1. 土壤濕度+LED (串聯要勾選，同 Webduino bit)
實作:聲控全彩 LED(用手機掃描 QR code，但不支援蘋果手機，聽到 Bi 再開口說話測試)
實作：智慧夜燈 請比較底下兩種程式的差異，功能均相同
底下程式設計技巧不可使用在 Webduino bit
實作：超音波測距離 請比較底下兩種程式的差異，功能均相同 ↓ 即時偵測 剛剛我們透過每 0.5 秒偵測一次距離的積木做偵測，接下來我們將使用「迴圈」+「偵測」的積木，實 現即時偵測的效果，剛剛所使用的 0.5 秒偵測一次，代表的是每 0.5 秒會發送一次超音波出去，而透 過即時偵測方法，可以在距離發生改變的時候，就再度送出超音波。 把先前的積木改良一下，把 0.5 秒偵測一次的積木，換成「重複直到」，裡面第一塊積木放入「ultrasonic 擷取距離」，第二塊積木就是將擷取的距離顯示在網頁裡。
Smart 要接 I2C 協定 SCL 接 5，SDA 接 4，而且韌體要更新，包括 OLED 、LCD、顏色感測器 Smart 尚需要請教學習 1. 列表的介紹，範例說明裡面積木的應用時機? 2. 甚麼是 Firebase 資料庫，與 Google 試算表優缺點比較 3. 將 Google 試算表內容顯示於互動網頁視窗範例? 4. 左邊積木有哪些不適於 Smart 開發板 5. 開發板控制→資料傳輸，範例說明裡面積木的應用時機? 6. 無線感應→LORA 是啥?使用時機 7. 簡易自訂積木如何設計?
