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 無法進入，必需使用 Chrome 瀏覽器。 5. 啟動過程看到藍色，代表韌體要更新，則按右上方『裝置管理』，按 + 添加開發板，管理主要目 的方便即時知道所有裝置連線狀態，適於老師授課管理，認證後還可以勾選多台裝置同時做韌體 更新。 認證方式： → → 認證後方可更新。 當認證後，勾選取某一開發板之後，按 更新韌體，重啟動當綠燈熄滅時表示韌體更新成功。 → →最後按『關閉』，若又按更新則又重做。 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.不同的權杖名稱，都會隨機產生一組獨一無二的通行識別碼，如左下圖，當按下『複製』按鈕會 自動將 token 紀錄起來，記得要立即貼到自訂積木裡面，因為當離開此視窗，將不再提供。如果 上述 token 外流，遇到有心人士亂傳一大堆資料，只能回到首頁按『解除』，如右下圖，然後再 重新建立新的 token，程式碼也要同步更新，所以盡量注意個人隱私勿外流。
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 聲音變得越
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 點垂 直導通性，減少杜邦線使用數目，但是底下哪種接法是對的呢？
