Webduino 學習手冊網站即將改版,提供您更好的閱讀體驗!

搶先試用

溫濕度 ( Firebase 紀錄 )

當我們會使用溫濕度傳感器獲取環境溫濕度之後,下一步一定是想要把溫濕度的數值儲存起來,這時候我們就要使用資料庫來記錄,但資料庫也不是每個人都會的,所以這邊我們將會使用 Google 的雲端資料庫服務:Firebase,透過 Webduino Blockly,我們就可以非常輕鬆的將溫濕度數值,存入雲端資料庫。

基礎教學:溫濕度偵測

範例影片展示

接線與實作

溫濕度傳感器有四隻針腳,第一隻針腳為 v ( 接 3.3V ),第二隻為 data ( 接 11 ),第三隻沒有作用,為 N/C,第四隻為 GND,可以直接將溫濕度傳感器接在馬克 1 號上,或利用麵包板接線出來。

由於 Webduino 支援開發板種類只會越來越多,接線圖先使用馬克一號與 Fly 示範,對於其他開發板來說,只要把溫濕度的訊號腳接數位腳,仍會有一樣的效果

溫濕度傳感器

馬克一號接線示意圖:

馬克一號接線溫濕度

Fly 接線示意圖:

Fly 接線溫濕度

註冊 Firebase

要使用 Firebase 就要先進行註冊,因為 Firebase 已經是 Google 的服務,有 Google 帳號的就可以直接登入,或註冊一個新的 Google 帳號登入。

Firebase:https://firebase.google.com/

註冊 Firebase

註冊完成登入後,我們就可以建立專案,這裏的專案就是我們的資料庫,每個資料庫都會有自己的網址。

建立 Firebase 專案

新增專案之後,就可以進入專案的管理頁面,進入畫面後可以藉由畫面提供的基礎教學了解相關用法,因為我們在這個範例中只會用到資料庫的部分,所以點選左方選單 Database 進入。

Firebase 資料庫

進入 Database,可以看到一串提示文字「預設安全性規則要求使用者進行驗證」,因為 Firebase 資料庫預設需要使用者的帳號密碼,不過這個設定可以點選上方選單「規則」進行修改。

Firebas 相關設定

把規則的設定值,填入下方這段程式碼,填完之後按下「發佈」按鈕。

{
    "rules": {
        ".read": true,
        ".write": true
    }
}

填入 rules 程式碼

發佈之後,就可以在「知道資料庫」網址的情況下,寫入或讀取資料,到這一步已經完成了 Firebase 的基本設定,從畫面中也可以看到資料庫的網址,透過這個網址,我們就能透過溫濕度傳感器讀取數值、並且存入資料庫。

因為如果要透過帳號密碼管控,還必須有一些額外的安全性設定,為了這個範例實作方便,先採用最基本可以存資料的方式。

取得資料庫網址

操作解析

打開 Webduino Blockly 編輯工具 ( https://blockly.webduino.io ),因為這個範例除了用 Firebase 記錄溫濕度之外,還會用網頁「顯示文字」來顯示溫度或濕度,所以要先點選右上方「網頁互動測試」的按鈕,打開內嵌測試的網頁,用下拉選單選擇「顯示文字」。

網頁互動測試

把開發板放到編輯畫面裡,填入對應的 Webduino 開發板名稱,開發板內放入溫濕度積木,名稱設定為 dht,腳位設定為 11。

溫濕度的積木在「環境偵測 > 溫濕度」目錄下。

溫濕度傳感器積木

接著放入載入 Firebase 模組的積木,模組名稱為 myFirebase,把剛剛資料庫的網址貼在裡面,然後在下面放入每 1000 毫秒 ( 1 秒 ) 偵測溫濕度的積木。

注意不要把載入 Firebase 模組的積木放到裡面,不然就會變成每一秒載入一次模組。


Firebase 的積木在「資料庫 > Firebase」目錄下。

加入 Firebase 模組積木

在每一秒偵測溫濕度的區塊裡,先放入顯示溫濕度數值的積木,後面使用建立字串的積木,讓溫濕度可同時以顯示在右邊的網頁,用藍色小齒輪增加五個欄位缺口。

建立字串的積木在「基本功能 > 文字」目錄下,顯示文字積木在「顯示文字」目錄下。

加入字串積木

分別將溫度、濕度以及顯示的標題文字放入缺口當中,可透過<br/>換行。

顯示偵測數值

最後放入 myFirebase 寫入資料的積木,一樣可以透過藍色小齒輪增加缺口,第一個欄位命名為 time,後面接上現在的時間,第二個欄位命名 t,後面接著偵測到的溫度,第三個欄位命名 h,後面放入偵測到的濕度。

時間的積木在「進階功能 > 控制台」目錄下。

Firebase 寫入積木

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,就可以看到網頁裡顯示溫濕度,同時 Firebase 資料庫也會開始記錄溫溼度了。

範例解答:https://goo.gl/KICZlJ

Firebase 記錄溫濕度資料

相關參考