###### tags: `Blynk` `FM609A` `FM617A` `FM628A` # 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 可以從虛擬腳位讀取實體裝置傳送出來的資料, 也可以寫入資料到虛擬腳位傳送到實體裝置。 接著, 我們就以採用 ESP8266 晶片的 D1 mini 控制板, 以及 MicroPython 程式語言為例, 說明如何使用 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) ## 建立裝置的樣板 (template) 由於實際物聯網應用的情境可能會需要在多個點佈建相同功能的裝置, 例如前面舉例的遙控檯燈, 就可能會佈建在書房以及各個臥室, 因此 Blynk 的設計方法是先針對功能面設計好通用的**樣板 (template)**, 再使用樣板去建立個別的**裝置 (device)**。 現在我們就來設計這個遙控檯燈, 除了可以透過手機遙控檯燈開關外, 這個遙控檯燈也會將它啟動至今的秒數回報給手機端的 Blynk App, 方便我們確認這個遙控檯燈是否仍在正常運作。 ### 建立樣板 根據上述, 我們的第一個步驟就是設計遙控檯燈的**樣板**: 1. Blynk 登入後的畫面稱為 **Blynk Console**, 請按一下左下角人形按鈕: ![](https://i.imgur.com/HXuBhMP.png) 請確認下方的 **Developer Mode** 有開啟。 1. 按一下左側 **𓃑** 圓圈的 **Templates** 鈕切換到樣板頁次, 它會提示你建立第一個樣板, 請按 **New Template**: ![](https://i.imgur.com/e1bs1nJ.png) 1. 請填入自選的樣板**名稱 (NAME)**, 這裡我們簡單填入 "test": ![](https://i.imgur.com/inc6ShQ.png) 同時選取實體裝置採用的**硬體 (HARDWARE)**, 這裡我們使用 D1 mini, 因此選取 **ESP8266**。**連接類型 (CONNECTION TYPE)** 請保留預設的 **WiFi** 不變。 ### 建立資料流 (Datastream) 所謂的 **Datastream** 就是用來設定裝置要透過哪些虛擬腳位與 Blynk 傳送資料, 我們稱 datastream 為**資料流**: 1. 接著會進入樣板的編輯畫面, 請切換到 **Datastreams** 頁次: ![](https://i.imgur.com/947Pb25.png) 請按一下下方的 **+New Datastream** 鈕選取 **Virtual Pin** 代表要使用虛擬腳位。 :::info Blynk 也可以直接讀取或是設定控制板的實體腳位, 不過這會讓你的樣板與特定控制板綁死, 失去彈性, 如果以後要更換使用不同的控制板, 就可能因為用到的實體腳位而必須重新修改樣板, 因此我們會建議使用虛擬腳位。 ::: 1. 我們先來設計使用 0 號虛擬腳位的資料流, 控制板會透過這個腳位傳送啟用秒數給 Blynk: ![](https://i.imgur.com/2xsAeZc.png) - 請在 **名稱 (NAME)** 和**別名 (ALIAS)** 欄位填入自選的名字, 這裡我們填入 "uptime" 表示裝置啟動至今的秒數。 - **腳位 (PIN)** 欄位請選用 **V0** 表示 0 號虛擬腳位。 - 由於是秒數, 所以 **資料類型 (DATA TYPE)** 請選 **Integre** 表示整數。 - **單位 (UINTS)** 選取代表秒數的 **Second(s)** - **最小 (MIN)** 與**最大 (MAX)** 值分別填入 0 與 10000 - 最後按下 **Create** 完成設定。 1. 我們還需要建立一個讓手機可以傳送指令控制檯燈開關的資料流, 請按右側的 **+New Datastream** 後選取 **Virtual Pin**: ![](https://i.imgur.com/G9XIud1.png) 1. 依照以下畫面設定個別欄位: ![](https://i.imgur.com/F056RvG.png) 由於開關只需要兩個值, 所以最小與最大值設為 0 與 1, 方便後續搭配撰寫程式。 1. 完成後按 **Save** 儲存設定: ![](https://i.imgur.com/g21S1c5.png) 接著我們就要設計手機 App 上的操作畫面, 這個步驟無法在網頁上進行, 必須使用 App 才能操作, 而且在操作之前, 必須先依照樣板建立裝置。 ## 建立裝置 (device) 建立裝置的程序一樣是在網頁上進行: :::info 若要再手機 App 上依據樣板建立裝置, 必須[升級成付費方案](https://community.blynk.cc/t/how-do-i-create-a-device-from-template-on-the-app/56149/2?u=11159)。 ::: 1. 按一下左側放大鏡圖示的**尋找 (Search)** 鈕後按選取 **My Devices**: ![](https://i.imgur.com/NihKVEF.png) 再按一下頁面上的 **+ New Device** 鈕建立新的裝置。 1. 按一下 **From template** 表示要依照設計好的樣板建立裝置: ![](https://i.imgur.com/5rtw32z.png) 1. 在 **樣板 (TEMPLATE)** 欄位選取剛剛設計好的 **test** 樣板: ![](https://i.imgur.com/iUlog9U.png) 並在下方 **DEVICE NAME** 欄位填入自選的裝置名稱後按 **Create**。 1. 按一下右上角的 **×** 關閉提示畫面: ![](https://i.imgur.com/T4MJvWp.png) 1. 切換到 **裝置資訊 (Device info)** 頁次: ![](https://i.imgur.com/01izXTR.png) 紅線框起處是這個裝案專屬的**認證權杖 (Authorization Token)**, 實體裝置上的程式必須透過這個認證權杖才能與 Blynk 連線傳遞資料。 ## 安裝 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) 1. 預設畫面就是目前的裝置清單, 請按一下剛剛建立的 test 裝置: ![](https://i.imgur.com/cUIC5At.png =360x800) 1. 由於還未設計手機端的使用者介面 (稱為 **Mobile Dashboard**), 會提醒要設定介面, 請按 **Setup Dashboard**: ![](https://i.imgur.com/jFaKmS3.jpg =360x800) 1. 會先顯示說明頁面, 請按右上角的**⊗**關閉頁面: ![](https://i.imgur.com/EBADXkC.png =360x800) 1. 出現空白設計畫面, 請按右上角 **≡** 鈕: ![](https://i.imgur.com/76wzYFo.png =360x800) 1. 在元件清單 (Widget box) 中往下捲按一下 **Value Display** ![](https://i.imgur.com/ZhqZT0m.png =360x800) 編輯區左上角會出現一個空白的元件, 我們會把裝置的啟動秒數顯示在這裡, 請按一下這個空白元件進入設定畫面: ![](https://i.imgur.com/sYZI4uI.png =360x800) 在設定畫面中先按一下 **Select Data Stream** 顯示資料流清單: ![](https://i.imgur.com/JQpk5pi.png =360x800) 請從清單中選取 **uptime** 表示要從這個資料流讀取資料顯示在元件上: ![](https://i.imgur.com/57bNfX3.png =360x800) 最後更改元件標題為『啟用時間』: ![](https://i.imgur.com/5kYXzfs.png =360x800) 然後按左上角的 **←** 鈕回到設計畫面。 1. 按住元件大概兩秒後放開, 會出現可調整元件大小的框線與控制點: ![](https://i.imgur.com/PYjSzVH.png =360x800) 請利用控制點將元件調整到以下位置及大小: ![](https://i.imgur.com/dNDFqYp.png =360x800) 1. 一樣按右上角的 **≡** 鈕後從元件清單中按一下 **Button** 新增按鈕元件: ![](https://i.imgur.com/CMtO8vt.png =360x800) 新元件會自動出現在右側: ![](https://i.imgur.com/p4BR9Uv.png =360x800) 請按住元件不放拖曳至下方位置, 放開元件後會自動出現調整大小的框線與控制點: ![](https://i.imgur.com/U4eMiwp.png =360x800) 請調整成以下大小: ![](https://i.imgur.com/5yDgyCR.png =360x800) 再按一下按鈕元件進入設定畫面: ![](https://i.imgur.com/s18mpyQ.png =360x800) 請如上畫面設定: - 標題改為『燈』。 - **DATASTREAM** 欄位選取之前設定好的 led 資料流, 表示要將按鈕狀態的變更透過此資料流送出給裝置。 - **MODE** 改為 **SWITCH** 模式, 這會讓按鈕每按一下放開後在開/關之間切換;若是 **PUSH** 模式, 就會按住不放是開、放開按鈕是關。 - 其他欄位保留預設值。 1. 按一下左上角的 **←** 鈕回到設計畫面: ![](https://i.imgur.com/MqlsZP3.png =360x800) 這樣就設計完手機端的使用者介面了。 :::info 如果加錯元件, 可以按住元件不放, 右上角就會出現資源回收桶的圖示, 只要將元件拖到資源回收桶放掉, 就可以刪除元件: ![](https://i.imgur.com/0BztcLw.png =360x800) ::: ## 撰寫實體裝置的程式 要使用 MicroPython 連接 Blynk, 必須使用 [Python client for Blynk IoT](https://github.com/vshymanskyy/blynk-library-python) 程式庫。 :::info 由於新版本的 Blynk 程式庫跟 MicroPython v1.12 不相容, 若您依照以下步驟操作, 程式執行後會當掉, 可以依照《[燒錄 MicroPython 韌體](/Rnn9Neh0RXSBO0FWi1DN9A)》這一篇說明, 將 MicroPython 韌體更新至 v1.17。 ::: ### 安裝程式庫 你可以直接[下載檔案](https://github.com/vshymanskyy/blynk-library-python/archive/refs/heads/master.zip)後解開, 然後在 Thonny 中將程式庫檔案上傳到控制板中: ![](https://i.imgur.com/sWqn0bQ.png) 記得 BlynkLib<span/>.py 以及 BlynkTimer<span/>.py 兩個檔案都要上傳。 ### MicroPython 程式碼 以下就是搭配我們剛剛建立的樣板與裝置運作的程式碼: ```python= from machine import Pin import BlynkLib import network from BlynkTimer import BlynkTimer sta_if = network.WLAN(network.STA_IF) # 取得無線網路介面 sta_if.active(True) # 取用無線網路 sta_if.connect('FLAG-SCHOOL', '12345678') # 連結無線網路 while not sta_if.isconnected(): # 等待連上無線網路 pass print("Wifi已連上") # 顯示連上網路的訊息 token = 'pQprAWfvP1_6aY3b64GWSEE-ijcPYov7' # Blynk 寄給你的權杖 blynk = BlynkLib.Blynk(token) # 取得 Blynk 物件 led = Pin(2, Pin.OUT, value = 1) # 控制內建在 D4 腳位 (GPIO2)的 LED def v1_handler(value): # 從 V1 虛擬腳位讀取手機按鈕狀態 led.value(1 - int(value[0])) # 內建 LED 是低電位點亮 blynk.on("V1", v1_handler) # 註冊由 v1_handler 回應 V1 虛擬腳位 uptime = 0 # 累計秒數 def v0_handler(): # 回應 Blynk 讀取 V0 虛擬腳位的函式 global uptime uptime = uptime + 1 # 遞增秒數 blynk.virtual_write(0, uptime) # 從 V0 虛擬腳位送出秒數給 Blynk timer = BlynkTimer() # 建立計時器管理物件 timer.set_interval(1, v0_handler) # 建立每一秒觸發的計時器 while True: blynk.run() # 檢查是否有收到 Blynk 送來的指令 timer.run() # 檢查計時區間 ``` 1. 前 4 列匯入必要的模組, 要搭配 Blynk 運作, 需要匯入 BlynkLib 模組。 2. 要使用 Blynk, 一定要連網, 第 6~11 列就是連上指定的無線網路, 請改成連你自己的無線網路。 3. 第 13 列的 token 指的就是前面[建立裝置](#建立裝置-device)時取得的**認證權杖**, 請改成你自己的認證權杖。 4. 第 14 列就以指定的認證權杖連上 Blynk。 5. 本例為簡化線路, 使用 D1 mini 上內建的藍燈代表檯燈, 第 16 列就是建立控制該 LED 的 GPIO2(D4) 腳位物件, 並預設輸出高電位讓該 LED 熄滅。 :::info 由於 D1 mini 內建的線路, 這個 LED 是在 GPIO2 輸出低電位時才亮。 ::: 7. 第 18 列是用來接收手機介面上按鈕開關變化時的值, value 會是一個串列, 開關變化只會傳遞單一個值, 因此要從 value[0] 取得代表開與關的 1 和 0。由於內建 LED 是高電位熄滅、低電位亮, 這裡我們用簡單的算式把 1 或是 0 轉換成相反的 0 與 1。 8. 第 20 列就是設定程式庫在接收到 Blynk 送來關於 V1 虛擬腳位的資料時, 自動叫用剛剛寫好的 v1_handler 函式。 9. 第 22 列是用來記錄啟用至今秒數的變數, 我們希望每秒叫用一次 23 列的 v0_handler 函式, 這個函式會遞增 uptime 紀錄的秒數, 並且在第 26 列將更新後的秒數值透過 V0 虛擬腳位傳送回 Blynk。 10. Blynk 並沒有自動週期性從虛擬腳位讀值的功能, 因此在第 4 列匯入了程式庫中的 BlynkTimer 模組提供的 BlynkTimer 類別, 在 28 列建立可以管理計時器的物件, 並在 29 列建立每秒觸發 1 次的週期性計時器, 以及觸發時執行 v0_handler 函式。 11. 最後記得要讓上述正確運作, 一定要有一個無窮迴圈, 不斷地叫用 blynk.run 以及 timer.run, 這樣才能持續檢查是否有收到從 Blynk 送來的資料, 以及維持計時器可以在正確的時間觸發。 ## 測試執行結果 程式執行後會看到以下的輸出: ``` >>> %Run -c $EDITOR_CONTENT ___ __ __ / _ )/ /_ _____ / /__ / _ / / // / _ \/ '_/ /____/_/\_, /_//_/_/\_\ /___/ for Python v1.0.0 (esp8266) Wifi已連上 Connecting to blynk.cloud:443... ``` 一開始的 Blynk 字樣是匯入程式庫時顯示的, 它同時會顯示程式庫的版本編號 (此例是 v1.0.0) 以及執行的平台 (此例為 esp8266)。接著的『WiFi 已連上』是程式在連上無線網路後顯示的。最後的那一列訊息則是程式中第 14 列連接 Blynk 時顯示的訊息, 如果連線有問題, 會顯示錯誤訊息。 接著, 就可以來測試看看手機 App 究竟是否可以和裝置端連動: 1. 請在剛剛完成設計的手機畫面按一下左上角逃生門圖示的按鈕回到裝置畫面: ![](https://i.imgur.com/G68PQR4.png =360x800) 1. 如果有正常運作, 首先會看到畫面上的啟用時間會自動每秒更新: ![](https://i.imgur.com/D6GIplv.png =360x800) 你也可以使用下方的按鈕控制板子上內建 LED 的亮滅。 這樣就完成基本 Blynk 的使用了。 ## 免費帳號只能使用 2 個裝置 前面有提過免費帳號只能使用 2 個裝置, 如果已經建立 2 個裝置, 回到裝置清單頁面再按 **+ New Device**: ![](https://i.imgur.com/uwqXg7o.png) 就會出現付費方案頁面: ![](https://i.imgur.com/uDMVxu1.png) 你可以自行斟酌是否需要使用付費方案?如果沒有付費, 就要先刪除 1 個既有的裝置, 刪除的步驟如下: 1. 在裝置清單頁面中勾選要刪除的裝置: ![](https://i.imgur.com/eobgEzd.png) 在 **Actions** 欄位的 ... 按鈕展開功能表, 就可以執行 **Delete** 指令。 2. 它會再跟你確認是否要刪除: ![](https://i.imgur.com/PaAk3XM.png) 再按一次 **Delete** 就會刪除了。 1. 這時就可以再按 **+ New Device** 新增裝置: ![](https://i.imgur.com/ojHUSF8.png) 要特別留意的是, 刪除裝置後, 它的**認證權杖也就失效**了, 裝置端的程式以後若要搭配新增的裝置執行, 就要修改程式中的認證權杖。