###### tags: `Blynk` `FM609A` # \[Blynk 新版\]《物聯網感測器大應用》Lab05 由於 Blynk 改版, 因此《[物聯網感測器大應用](https://www.flag.com.tw/maker/FM609A)》中Lab05 使用到 Blynk 的實驗操作也要隨之更改, 本文就說明如何使用 Blynk 新版實作同樣的實驗。 ## Blynk 新版本說明 [Blynk](https://blynk.io/) 已經於日前改版[公開上線](https://blynk.io/blog/meet-the-new-blynk-platform), 舊版的 App 現在稱為 [Blynk (legacy)](https://play.google.com/store/apps/details?id=cc.blynk&hl=zh_TW&gl=US), 新版本的 App 則稱為 [Blynk IoT](https://play.google.com/store/apps/details?id=cloud.blynk&hl=zh_TW&gl=US)。舊版的 App 仍可使用, 目前並沒有公布停用時間, 不過舊版的 App 現在已經[不接受新使用者註冊帳號](https://blynk.io/blog/what-will-happen-to-the-legacy-blynk-platform), 只要你之前沒有註冊過 Blynk 帳號, 現在就一定要使用新版本。即使你有註冊過舊版本, 但新版本並不能使用舊版本的帳號, 所以在新版本中還是要註冊新的帳號。 :::info 新版本與舊版本比較, 最大的差別是以下幾項: 1. 新版本除了**手機介面 (稱為 Mobile Dashboard)** 的設計外, 其餘操作都可以在網頁上操作, 而且在網頁上比較容易操作, 比舊版只能在手機上操作方便許多。 2. 新版本提供網頁式的 **Web Dashboard**, 除了可用手機 App 當使用者介面外, 也可以使用網頁當成使用者介面, 不過可用的元件種類較少。 3. 新版本**不再使用 Widget 元件的點數計價**, 而是改以**裝置 (device) 數**, 也就是與 Blynk 連線的外部裝置數量計價, [免費帳號](https://blynk.io/pricing)的使用者僅能使用 1 個裝置。 4. 新版本提供有 **https API** (舊版僅提供 **http** 沒有 s 的 API), 方便各種平台或是程式語言在沒有 Blynk 程式庫支援的情況下, 與 Blynk 溝通合作。 ::: ## Blynk 基本概念 Blynk 主要提供兩大功能: - 在網路上扮演**中介的角色**, 讓你的**硬體裝置**和你的**手機或電腦**之間可以互相傳遞資料, 免除兩者要直接連線傳送資料時必須解決像是防火牆、路由器、外網內網轉換等問題, 只要裝置和手機、電腦可以連網, 就可以透過 Blynk 當中介轉換站傳遞資料。 - 提供簡單易用的**跨平台網頁與 App**, 快速設計出監控裝置所需的**使用者介面**, 免除自行設計網頁或是 App 的功夫。 舉例來說, 如果想用手機遙控檯燈, 只要使用可連網的控制板做好開關檯燈的功能, 再透過 Blynk 當中介傳輸指令, 並在 Blynk App 上設計好遙控介面, 就可以快速完成。在這個過程中, 我們只需要專注在如何開關檯燈, 剩下的部分都可以由 Blynk 幫我們快速解決。 ### Blynk 的虛擬腳位 Blynk 的使用方式是將 Blynk 本身當成是一塊**虛擬的控制板**, 這個虛擬的控制板有多達 **256 隻虛擬的腳位**, 這些虛擬腳位就是實體裝置的控制板與 Blynk 間**傳遞資料時的通道**。Blynk 可以從虛擬腳位讀取實體裝置傳送出來的資料, 也可以寫入資料到虛擬腳位傳送到實體裝置。 ### 註冊帳號 要使用 Blynk, 首先需要註冊帳號: 1. 請開啟瀏覽器連線至 [Blynk 網站](https://blynk.io): ![](https://i.imgur.com/eG9rTQ3.png) 按一下 **START HERE**。 1. 填入你的 email 並勾選同意授權條款後按 **Sign Up**: ![](https://i.imgur.com/ri52HZ2.png) 1. 系統會寄一封確認信到您剛剛填入的信箱: ![](https://i.imgur.com/s0xIc69.png) 1. 你會收到像是以下這樣內容的確認信: ![](https://i.imgur.com/tKuYsG9.png) 請按 **Create Password** 進入設定密碼的步驟。 1. 填入你想使用的密碼, 密碼至少需要 8 個字元: ![](https://i.imgur.com/mOW6oeO.png) 按 **Next** 後接著填入你的名字, 再按 **Done**: ![](https://i.imgur.com/yKAe1ow.png) 1. 註冊完成會看到這個 **快速導覽** 頁面, 這裡我們會直接帶大家操作, 請按 **Cancel** 離開: ![](https://i.imgur.com/1lzPfMk.png) ## 新增 Blynk 樣板 由於實際物聯網應用的情境可能會需要在多個點佈建相同功能的裝置, 例如前面舉例的遙控檯燈, 就可能會佈建在書房以及各個臥室, 因此 Blynk 的設計方法是先針對功能面設計好通用的**樣板 (template)**, 再使用樣板去建立個別的**裝置 (device)**。 ### 建立樣板 本實驗要建立的樣板內含 2 個資料流, 分別用來從 Blynk 傳送控制抽水馬達的開關指令以及從控制板傳送土壤濕度感測值到 Blynk: 1. 按一下左側 **𓃑** 圓圈的 **Templates** 鈕切換到樣板頁次, 按 **+ New Template** 新增樣板: ![](https://i.imgur.com/9fBI2fp.png) 1. 如下設定後按 **Done**: ![](https://i.imgur.com/VAHOuZH.png) ### 設定資料流 (Datastream) 所謂的 **Datastream** 就是用來設定裝置要透過哪些虛擬腳位與 Blynk 傳送資料我們稱 datastream 為**資料流**: 1. 切到 **Datastreams** 頁面, 按 **+New Datastream** 後選 **Virtual Pin**: ![](https://i.imgur.com/HdXVsd8.png) 請如下設定從 Blynk 傳送開關指令到控制板的資料流後按 **Create**: ![](https://i.imgur.com/wu7UDo5.png) 1. 重複相同操作再新增一個使用虛擬腳位的資料流: ![](https://i.imgur.com/GBRxDGV.png) 請如下設定從控制板傳送土壤濕度感測值的資料流後按 **Create**: ![](https://i.imgur.com/kwbgvT6.png) 1. 確認無誤後按上方的 **Save** 儲存樣板: ![](https://i.imgur.com/OzWZAiA.png) ## 建立 BLynk 裝置 設計好樣板後, 就來建立代表控制板的裝置: 1. 請按左側放大鏡圖示按鈕後切到 **My Devices** 頁次按 **New Device**: ![](https://i.imgur.com/gs8LzrT.png) :::info 由於免費帳號的 Blynk 只能擁有 2 個裝置, 因此若您已經建立過 2 個裝置, 就必須先移除 1 個裝置才能建立新的裝置。 1. 勾選現有的裝置後按 **Actions** 欄位的 ... 按鈕後選『**Delete**』: ![](https://i.imgur.com/vQ7t2vp.png) 1. 在確認交談窗中再按一下 **Delete** 刪除裝置: ![](https://i.imgur.com/XmH9AU6.png) ::: 1. 按一下 **From template** 從樣板建立裝置: ![](https://i.imgur.com/jctOZj2.png) 1. 選取剛剛設計的樣板後按 **Create**: ![](https://i.imgur.com/V2S0jCJ.png) 1. 按一下右上方的 **×** 關閉提示交談窗: ![](https://i.imgur.com/xcsf1Ie.png) 切換到 **Device Info** 頁次即可在下方看到裝置的認證權杖, 按右側的鈕可以複製到剪貼簿: ![](https://i.imgur.com/rfPJq2X.png) 請保留此頁不要關閉, 稍後撰寫程式會需要用認證權杖。 ## 設計 Blynk App 畫面 ### 安裝 App 接下來的操作要使用手機 App, 請先安裝 App。 1. 請在手機商店上搜尋 Blynk IoT: ![](https://i.imgur.com/DyBFdUG.png =360x800) :::warning 記得前面提過, Blynk 有新舊版分別, 請不要安裝到以下所示的舊版: ![](https://i.imgur.com/nq8aXp5.png =360x800) ::: 1. 按一下 **Log In** 進入登入畫面: ![](https://i.imgur.com/POm9xFM.png =360x800) 登入剛剛註冊的帳號: ![](https://i.imgur.com/YKreeaj.png =360x800) ### 設計畫面 建立裝置後下一步就是設計 Blynk App 上使用者的畫面: 1. 進入 Blynk App 就會看到剛剛建立的裝置, 請按一下裝置進入設計畫面: ![](https://i.imgur.com/wVyCHE9.png =360x800) 1. 它會提示你尚未設計畫面, 按 **Setup Dashboard** 進入: ![](https://i.imgur.com/deE3Det.png =360x800) 1. 按一下右上角的 **☰** 開啟元件清單: ![](https://i.imgur.com/nSHT4o3.png =360x800) 往下捲加入 **Gauge** 元件: ![](https://i.imgur.com/tG7niQj.png =360x800) 按一下新增的元件進入設定頁面: ![](https://i.imgur.com/WXsJnhi.png =360x800) 如下設定後按左上角的 **←** 返回設計畫面: ![](https://i.imgur.com/QrYUwB1.png =360x800) 1. 依照相同步驟再加入 **Button** 元件: ![](https://i.imgur.com/XqfvOMB.png =360x800) 按一下新增的元件進入設定頁面: ![](https://i.imgur.com/2RdOgLI.png =360x800) 請如下設定後按一下左上角的 **←** 返回設計畫面: ![](https://i.imgur.com/zkPHTBP.png =360x800) 1. 請如下調整元件位置極大小後按左上角逃生門圖示進入執行畫面: ![](https://i.imgur.com/Rpdh4AE.png =360x800) 1. 回到裝置執行畫面, 等稍後撰寫好程式即可透過此畫面與控制板互動: ![](https://i.imgur.com/iiWP57F.png =360x800) ## 撰寫積木程式 ### 下載新版的 FlagsBlock 軟體 新版的 Blynk 需要搭配 v1.3.11 以上的 FlagsBlock 才能運作, 並且提供相關的積木, 請先到這裡[下載新版本 FlagsBlcok](https://mega.nz/file/GZFXSIRY#U0TwDQ9xD4wX-dxhl9xefZvVBeTIzGVPOFxey4iKwQE)。 ### 撰寫程式 最後就是透過程式與 Blynk 互動: 1. 加入『流程/SETUP 設定』與『ESP8266 物聯網/使用...啟用 Blynk 服務』積木組合如下: ![](https://i.imgur.com/3EBa2tr.png) 1. 加入『腳位輸出/設定...為高電位』積木, 將『高電位』改為『低電位』後組合如下, 讓抽水馬達一開始是不啟動的: ![](https://i.imgur.com/HhPnuHp.png) 1. 加入『ESP8266 物聯網/Blynk 虛擬腳位讀到新資料』積木與『設定...為高電位積木』組合如下, 並將『高電位』積木移除, 替換成『ESP8266 物聯網/將 Blynk ... 參數以整數傳回』積木: ![](https://i.imgur.com/gvQNPm1.png) 即可用 Blynk 按鈕的開關裝置控制抽水馬達開關。 1. 加入『函式/定義函式』積木, 並更名為『土壤濕度』: ![](https://i.imgur.com/UQe0PnQ.png) 在其內置入『ESP8266 物聯網/從...送出給 Blynk』積木, 腳位選用 **V5** 並將其中的『0』積木替換成『腳位輸入/讀取...的 ADC 值』。 1. 加入『ESP8266 物聯網/使用...函式每 5 秒更新 Blynk』積木: ![](https://i.imgur.com/1uwpYIa.png) 確認第一個欄位選取的是剛剛設計的『土壤濕度』函式。 1. 在『SETUP 設定』中加入『ESP8266/處理 Blynk 請求』積木以便能即時接收到 BLynk 傳來的指令, 再加入『ESP8266 物聯網/處理 Blynk 計時器』讓剛剛的定期更新 Blynk 的積木生效: ![](https://i.imgur.com/LR1Vntv.png) 1. 完成後請上傳程式。 ## 測試程式 上傳成功後就會與 Blynk 連線, 手機畫面會每 5 秒更新一次土壤濕度感測值, 你也可以使用按鈕控制抽水馬達開關: ![](https://i.imgur.com/8baJiOD.png =360x800) ![](https://i.imgur.com/wlKBQHe.png =360x800)