FlagMaker
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Write
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Engagement control Commenting, Suggest edit, Emoji Reply
    • Invite by email
      Invitee

      This note has no invitees

    • Publish Note

      Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

      Your note will be visible on your profile and discoverable by anyone.
      Your note is now live.
      This note is visible on your profile and discoverable online.
      Everyone on the web can find and read all notes of this public team.
      See published notes
      Unpublish note
      Please check the box to agree to the Community Guidelines.
      View profile
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Emoji Reply
    • Enable
    • Versions and GitHub Sync
    • Note settings
    • Note Insights
    • Engagement control
    • Transfer ownership
    • Delete this note
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Versions and GitHub Sync Note Insights Sharing URL Help
Menu
Options
Engagement control Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Owners
  • Owners
  • Signed-in users
  • Everyone
Owners Signed-in users Everyone
Write
Owners
  • Owners
  • Signed-in users
  • Everyone
Owners Signed-in users Everyone
Engagement control Commenting, Suggest edit, Emoji Reply
  • Invite by email
    Invitee

    This note has no invitees

  • Publish Note

    Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

    Your note will be visible on your profile and discoverable by anyone.
    Your note is now live.
    This note is visible on your profile and discoverable online.
    Everyone on the web can find and read all notes of this public team.
    See published notes
    Unpublish note
    Please check the box to agree to the Community Guidelines.
    View profile
    Engagement control
    Commenting
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Suggest edit
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    Emoji Reply
    Enable
    Import from Dropbox Google Drive Gist Clipboard
       owned this note    owned this note      
    Published Linked with GitHub
    Subscribed
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    Subscribe
    ###### 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)

    Import from clipboard

    Paste your markdown or webpage here...

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lose their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template has been removed or transferred.
    Upgrade
    All
    • All
    • Team
    No template.

    Create a template

    Upgrade

    Delete template

    Do you really want to delete this template?
    Turn this template into a regular note and keep its content, versions, and comments.

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password

    or

    By clicking below, you agree to our terms of service.

    Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
    Wallet ( )
    Connect another wallet

    New to HackMD? Sign up

    Help

    • English
    • 中文
    • Français
    • Deutsch
    • 日本語
    • Español
    • Català
    • Ελληνικά
    • Português
    • italiano
    • Türkçe
    • Русский
    • Nederlands
    • hrvatski jezik
    • język polski
    • Українська
    • हिन्दी
    • svenska
    • Esperanto
    • dansk

    Documents

    Help & Tutorial

    How to use Book mode

    Slide Example

    API Docs

    Edit in VSCode

    Install browser extension

    Contacts

    Feedback

    Discord

    Send us email

    Resources

    Releases

    Pricing

    Blog

    Policy

    Terms

    Privacy

    Cheatsheet

    Syntax Example Reference
    # Header Header 基本排版
    - Unordered List
    • Unordered List
    1. Ordered List
    1. Ordered List
    - [ ] Todo List
    • Todo List
    > Blockquote
    Blockquote
    **Bold font** Bold font
    *Italics font* Italics font
    ~~Strikethrough~~ Strikethrough
    19^th^ 19th
    H~2~O H2O
    ++Inserted text++ Inserted text
    ==Marked text== Marked text
    [link text](https:// "title") Link
    ![image alt](https:// "title") Image
    `Code` Code 在筆記中貼入程式碼
    ```javascript
    var i = 0;
    ```
    var i = 0;
    :smile: :smile: Emoji list
    {%youtube youtube_id %} Externals
    $L^aT_eX$ LaTeX
    :::info
    This is a alert area.
    :::

    This is a alert area.

    Versions and GitHub Sync
    Get Full History Access

    • Edit version name
    • Delete

    revision author avatar     named on  

    More Less

    Note content is identical to the latest version.
    Compare
      Choose a version
      No search result
      Version not found
    Sign in to link this note to GitHub
    Learn more
    This note is not linked with GitHub
     

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub
        • Please sign in to GitHub and install the HackMD app on your GitHub repo.
        • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
        Learn more  Sign in to GitHub

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions
        Include title and tags
        Available push count

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch
        Available push count

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully