Webduino Smart 雲端物聯網 x LINE 應用育樂營上課講義 By:泰山高中 電子科 陳致中 109/07/15 1. Webduino Smart 優點：體積小、價格便宜，內 建 Wi-Fi 晶片，適於長時期環境物聯網 IoT 監 控，內建單顆全彩 LED，可以練習類比輸出， 單顆按鈕開關，可以練習數位輸入，光敏電阻 可以練習類比輸入，同時提供 3.3V/5V 兩種電 源輸出。 註：『數位 Digital』是指 0 與 1 或亮與不亮兩 種狀態，屬於『不連續型』。而『類比 Analog』 是指 0~1 之間還存在許多數字，如 0.1、0.5、 0.25….，屬於『連續型』，所以變化種類較多，可用於馬達轉速或是不同 LED 亮度控制。 2. Webduino Smart 缺點：類比輸出僅 P12~、P13~、P15~，類比輸入僅光敏電阻 A0 腳位，若欲使用類 比輸入，必須將光敏電阻用黑色膠帶遮住，此時讀值趨近於 1，然後並接於 A0 腳位即可(如土壤濕 度感測器就是屬於類比輸入)，每個 Google 帳號僅提供20個專案供儲存連結，超過 20 個專案改用 其他 Google 帳號即可，反正申請 Google 帳號是免費。 3. 初 始 化 目 的 是 要 將 使 用 者 無 線 連 線 環 境 相 關 設 定 到 Smart 裡 面 ， 預 設 位 置 是 192.168.4.1，當可以對外連線時，按下按鈕不放重開機，才可跟官方取得裝置的 Device ID(※很重要)，必須韌體更新之後，方可設定三組 SSID，詳細操作請自行參閱官方網 站教學，或掃描右側 QR code，正常起動會先閃紅燈，代表偵測 Wi-Fi 中，接著亮綠 色，代表已連接到 Wi-Fi，若是藍色，代表有韌體要更新(※按下按鈕不放重開機)，最後 LED 熄滅。 註：若不會設定 smart，較快方式是設定手機基地台分享名稱為 ipoe 、 TSSH、TSSH2，密碼均為 12345678，所有的 ID 都是獨一無二，因此 Smart 具有跨網域控制能力，個人的 ID 需要熟記，建議 不要公開，避免被駭入，如果 Smart 是小明，任何知道小明的 ID，都可以在網路世界呼叫牠做事情。 4. 利 用 https://cloud.webduino.io/ 進入網頁，Smart 要點選左上 角 圖 示 ， 然 後 直 接 按 登入。 註：微軟 IE 無法進入，必需使 Smart 線上編輯 Smart 更新
認證方式： → → 認證後方可更新。 當認證後，勾選取某一開發板之後，按 更新韌體，重啟動當綠燈熄滅時表示韌體更新成功。 → →最後按『關閉』，若又按更新則又重做。 6. Smart 採用 Google 雲端管理方式，不用特別按儲存，因為每一個操作步驟都記錄在雲端，當下次 開啟時就會自動回到最後一次的編輯畫面，若欲分享連結或切換其他程式專案，請點選左上角 圖示，透過專案管理介面， 表示已經使用 7 個專案，按 新增專案， 每個帳號固定 20 個，除非花錢購買兌換卷增加，勾選某個專案，按下 重新命名， 建立副本 (適於內容相似，先建立副本再透過修改部分內容變成另一個專案程式)，按下 分享連結，該分 享的網址固定不變，當任何人用其他 Google 帳號點選該連結，就可以開啟並自行再修改內容使用， 或是利用左側『公開的檔案』，利用搜尋關鍵字，找到後若有做任何修改動作，則會看到專案裡面增 加 xxx 副本的專案，屆時再利用修改名稱即可，雲端部署須花錢購買兌換卷，可讓程式永遠執行。
7. Smart 工具列 ，由左到右依序『產生即時預覽 QR code』(用手機掃描即 可啟動程式)、『打開程式編輯(不常用)』、『檢查裝置狀態』(輸入 ID 看到綠色代表連線中，紅色是未 連線)、『載入範例積木』(如左下圖所示，小心不要蓋掉原本寫好的程式)、『網頁互動區域』(如右下 圖所示)、『刪除所有積木』(要小心)、『執行程式』(當後者執行，會讓前者已經連線強制退出離開)， 當程式停止執行，Smart 就無法動作，因為程式碼並非寫入到 Smart，除非購買雲端部署兌換卷，才 可讓程式永遠執行。 8. 積木全部種類如下圖：
9. 左下圖為麵包板，橙色虛線代表內部已經接通，其他常用硬體包括 4.5V 電池盒、LED 燈*3、DHT11 溫溼度感測、Buzzer 蜂鳴器、SR04+超音波，排針與 8 條跳線先依左下圖連接，讓上下正負接通。 註：由於 WiFi 蠻耗電的，因為要不斷偵測，所以使用電池時，建議僅在測試執行前再接上電源。 10. 硬體測試先將 4.5V 電池盒紅線接+，黑線接-，觀察 Smart 是否紅燈 閃爍一段時間後，然後亮一下綠燈就熄滅，代表已經連到網路世界 需使用 Chrome 瀏覽器測試，底下網址?問號後面需填入獨一無二 ID https://fustyles.github.io/webduino/MyFirmata_smart.html?10dk5LGV， 看到『Webduino Smart isn't connected.』表示尚未連線，看到『Webduino Smart is connected.』表示已經連線成功，如右圖所示，LED 長腳接 於 P2、P0、P4、P5，短腳接 GND(-)，選擇項目(2)數位寫入的腳位 編號，High 代表高電位，按下 Write 寫入，則對應 LED 點亮，選擇 Low 代表低電位，按下 Write 寫入，則對應 LED 熄滅，項目(3)類比 寫入的腳位編號只限 P12~、P13~、P15~，LED 變化較多，項目(4)是
Read 讀取光敏電阻值 0~1，不妨用手稍微遮住，並再按 Read，以觀察讀值變化，項目(5)是 Read 讀 取 P4 的按鈕開關狀態，項目(6)是設定全彩 LED 顏色狀態，按下 Write 寫入顏色才會改變。 11. 按 新增專案 1，名稱自訂，進入程式編輯視窗，上方輸入獨一無二 ID，大小寫並不相同，應出
現綠色箭頭，表示有連到網路，確認無誤再利用『載入範例積木→LED』，修改內容如下，然後直接
執行，以及用手機掃描 QR code 執行，兩種都試試看，開發板選擇 Smart，連線至後面是填入 ID。
註：瀏覽器網址即檔案在雲端的位置，可透過該網址分享，若要儲存到主機，按左下 →匯出。
動動腦：如何同時控制三顆 LED(長腳為 + 端，接控制端；短腳為 – 端，接 GND)
12. 按 新增專案 2，利用互動網頁的『按鈕行為』，按鈕 1 第一顆亮，按鈕 2 第二顆亮，按鈕 3 第三 顆亮，按鈕 4 全亮，按鈕 5 全部熄滅，轉成 QR code 用手機掃描，試試多人控制時，會發生甚麼情 況，如果希望多人『同時』控制，要先停止執行，勾選『協同控制』，重新轉成 QR code 再測試， 若要有更多開關選擇，網頁互動區的互動方式要選擇『遙控器』。 動動腦：實際生活應用，如何改成控制 110V 家電用品，同時可以進行跨網域遠端遙控？ 課外補充 繼電器又稱為 Relay，通常應用於自動控制電路中，是一種可以用較小的電壓控制較 大電壓或電流的一種「自動開關」，搭配 Webduino Smart 控制繼電器，就可以非常簡 單的做出利用網頁控制的智慧插座或自動開關。繼電器內部構造裡面有一片可動電
樞，在平時不通電時，共接點(COM)會連到常閉 NC(Normal Close)端。當輸入 3V 時，繼電器內部 線圈通電而產生磁力，將 COM 腳的可動電樞從原本 NC 端「吸附」到常開 NO(Normal Open)端。
13. 按 新增專案 3，製作智慧夜燈，讀取內建的光敏電阻讀值，介於 0~1 之間，數值越小代表越『暗』， 當較暗時，三色 LED 亮白燈，當有足夠光源，則 LED 關閉，觀察互動視窗的讀值，自行調整靈敏 度數值，光敏電阻接腳固定在 A0，A 代表 Analog 類比。
動動腦 1：網頁互動區域如何僅顯示亮度到小數點第 2 位即可(進階功能→數值轉換)。 動動腦 2：結合上一個實作，當全暗是亮 3 顆 LED，很亮時，全部 LED 熄滅。
14. 按 新增專案 4，製作語音控制 LED，但不支援 iOS，若電腦沒有麥克風，請產生 QR code，用 手機掃描執行，手機音量要開啟，每當聽到 Bi 一聲再下達語音指令，其餘時間喊破喉嚨也沒用。
動動腦：修改上述程式，再新增 LED 語音控制，至少一顆 LED。
15. 按 新增專案 5，製作緊急按鈕 LINE 通知，本範例是利用自訂積木，若要完成其他 LINE 程式， 建議利用『建立副本』，每個人的 Line Notify Token 都是獨一無二，切勿外流，也不要直接用我的範 例，否則老師的手機會響不停，拜託！三筆內容雖然同時傳送，但接收順序不一定。
註：取得上述 Line Notify Token 步驟如下： (註：Notify 是通知、Token 是權杖的意思) 1. 進入https://notify-bot.Line.me/zh_TW/ 官方網站，按下右上方『登入』按鈕，輸入登入的帳號與 密碼，登入個人 Line 帳號，倘若帳密若忘記請不要問老師。 2. 右上方顯示帳號名稱，選擇名字旁邊的下拉式選單，選擇『個人頁面』。 3.請選擇最下方『發行權杖』，第一個權杖名稱一定要填，未來在通知時，會出現【…】告知發話人 是誰或通知用途，內容最多 20 個字，第二個是選擇通知的對象可以是『1 對 1』，也可以直接選擇任 意一個群組，若要選擇群組，記得要將 Line Notify 加到該組群裡面，當兩個欄位都設定後，方可 按下底下『發行』按鈕。 4.此時 LINE 帳號就會收到連動通知。 5.不同的權杖名稱，都會隨機產生一組獨一無二的通行識別碼，如左下圖，當按下『複製』按鈕會
16. 按 新增專案 6，讀取DHT11的溫溼度數值，連接方式如下圖，腳位順序沒有統一，標示『S=Source 來源』或『DATA 資料』連接 P05，標示『-』即 GND，用手握住 DHT11，則溫度↑，若對著 DHT11 哈氣，則濕度↑，沒有看到溫溼度結果，那是因為 DHT11 沒有接好，但也有可能是跳線壞掉。 17. 按 新增專案 7，搭配網頁按鈕讓 Buzzer 蜂敏器發出各種聲響。教學 網頁 https://tutorials.webduino.io/zh-tw/docs/smart/component/buzzer.html， 發音積木按右鍵，都有提供『小工具』功能，輸入 Device ID 後按下『設 定』，連線之後方可錄音，若一直連不上，請將安全性重新設定即可。 註：Buzzer 蜂敏器分成有源與無源，無源蜂鳴器是沒有正負之分的，類似於喇叭，需要 在兩個腳位加載不同的頻率的電信號，才可以發聲，不同頻率所發出的聲音是不一樣的。 而有源蜂鳴器是有正負(長+短-)之分，只需要在腳位加上電壓信號就會發出聲音。
18. 按 新增專案 8，讀取超音波距離，並顯示於網頁互動區域，當距離越接近，Buzzer 聲音變得 越急促，教學網址https://tutorials.webduino.io/zh-tw/docs/smart/component/ultrasonic.html
19. 按 新增專案 9，讀取光敏電阻的讀值，並增加將 0~1 轉換成 0~100 百分比格式，並定時傳送資 料到免費Google 雲端的試算表，未來透過瀏覽網頁就可隨時監測環境的變化。 註 1：新增雲端 Google 試算表方式，先登入 Google 帳號，按右上方 → 雲端硬碟 → 新 增 → Google 試算表 → 變更左上角檔案名稱 → 分別輸入三個欄位標題 → 按右上 按 鈕 → 點擊右上『開啟連結共用設定』 → 更多 → 修改權限為『任何知道連結均可編輯共用權限』 → 完成，否則後台服務主機無權限寫入資料，此時右上圖示變更為 ，代表權限已經解鎖。 註 2：為避免權限太高，任何人都可以亂改資料，解決方式是在 Google 試算表按『檔案 → 發佈到 網路 → 選擇網頁格式』，僅公告使用者此共用連結即可，但預設是每 5 分鐘才會更新資料，所謂 5 分鐘是指雲端主機每隔 5 分鐘全部自動更新資料，更新後必須按F5重新整理，即可看到最新資料。
20. 按 新增專案 10，讀取光敏電阻的讀值，並定時傳送到免費 ThingSpeak雲端，未來透過網頁
或手機 APP 就可隨時監測環境的變化，ThingSpeak 申請設定使用較複雜，請參閱老師網頁資料。
小型麵包板補充 研習套件包括 1.5V 電池*3(凸起為正端)、4.5V 電池盒(紅+黑-)、麵包板、排針(自行折斷)、杜邦線 (公對公與公對母)、發光二極體 LED*3、DHT11 溫濕度感測元件、有源蜂鳴器、HC-SR04 超音波。 排針 杜邦線 LED 溫濕度感測 蜂鳴器 Bz SR04 超音波 依據下圖插入排針到指定位置(電池盒正電為紅色)，由於無 Vcc 與 GND 橫向導通接點，須善用 5 點 垂直導通與兩條『公對公』杜邦線搭配連接使用(→、→)，此時與均為負電 端，而與均為正電端。 ← 將 4.5V 電池盒電源接到 Smart 端 使用方式可用『公(接麵包板)對母(接元件腳位)』杜邦線直接連接使用，也可以善用麵包板 5 點垂直 導通性，減少杜邦線使用數目，但是底下哪種接法是對的呢？
