【ESP32專欄】上傳資料到ThingSpeak 製作雲端監看圖表

Posted By 尤濬哲 on 1 月 16, 2021 in ESP32, 教學文 | 0 comments

作者：尤濬哲

上一個主題是利用HTTPClient在網路「下載」空氣品質資訊（用ESP32做出WiFi即時PM2.5顯示器），那麼如果我們要將ESP32所收集到的資料「上傳」到雲端儲存應該怎麼做？例如前幾章我們練習的DHT11溫濕度、振動感測、火焰感測、MQ2有害氣體感測等等，就可以在雲端監控這些數值的變化，了解環境的變化並提出警告，例如LINE通知。

在商業上，有很多案例都已經結合LINE通知，例如筆者自己的研究案就是利用ESP32監控客戶機器的運作狀態例如電壓、電流、溫度等，可以在雲端查看是否異常，當機器發生故障需要維修，也會直接發送LINE通知到管理員，能立即處理避免損失擴大。

雲端監控機器運作狀態（溫度及電流）

但這應該怎麼做呢？

其實是一樣的，就是使用HTTPClinet抓取資料的同時，也可以順便把資料加在網址內發送，這也是我們稱為HTTP GET的參數傳遞方式，舉例而言，當我們在Google查詢輸入關鍵字「空氣品質」時，其網址可以簡化如下：

https://www.google.com/search?q=空氣品質

分析上述的網址，前方的www.google.com，代表網站位置，而search代表取用的功能，「?」代表參數傳遞開始，後方的「q=空氣品質」，則是說有一個名稱為q的參數，內容為「空氣品質」，當Google接收到這行網址後，便會解析出需要的參數q，並將內容「空氣品質」送到資料庫後，進行適當的動作，將結果顯示出來。

上述的過程在說明，我們只要在網址後方加入「?參數=資訊內容」即可讓伺服器收到要傳輸的資訊，這也就是HTTP GET法，網路上還有另外一種更常見的POST，使用上較為複雜，但功能更強，安全性較高，將會在下一部份說明。

了解HTTP GET原理之後，接下來我就利用這種方式結合雲端免費的工具，來製作雲端監看圖表吧！

1. ThingSpeak雲端圖表

ThingSpeak是目前物聯網最受歡迎的資料庫，它是由MATLAB公司所提供的免費空間，每一個註冊帳號可以免費取得4個頻道(channels)，這裡的頻道可以當作資料庫database來使用，每1個頻道可提供8個自訂欄位（field），最重要的是它提供非常直覺的圖表製作的功能，可以快速將資料轉換成圖表，因此非常受到網友的推薦，算是雲端資料庫入門的第一步。

本節我們先到ThingSpeak註冊帳號，並建立一個頻道，然後手動測試一下，了解ThingSpeak資料上傳的方式，接下來第二節我們再用ESP32將DHT11的溫濕度資料上傳到這個頻道，顯示在圖表上。本節的步驟如下：

(1) 註冊帳號：利用自己的MAIL註冊一個免費ThingSpeak帳號
(2) 設定頻道：先設定一個頻道，後續接收溫濕度資料
(3) 傳輸測試：手動將資料送上雲端

(1) 註冊帳號

首先利用我們到ThingSpeak首頁：https://thingspeak.com/，ThingSpeak註冊過程比較特別，在建立帳號時並沒有密碼欄位，而是經過eMAIL確認後，才會要使用者輸入註冊欄位。這過程經常搞的大家摸不清頭緒，因此請大家依照以下流程進行註冊。

進入ThingSpeak首頁後，點選下方的綠色按鈕Get Started For Free。

接下來會出現的一個輸入Email的地方，但是因為我們還沒註冊，所以要先點選下方的Create one!。

接著輸入相關資訊，包括註冊的Mail帳號、地點、姓名等等，不過要注意姓名必須輸入英文，除了Mail必須是正確的之外，其他讀者可隨意輸入即可，完成後按下Continue按鈕。

在這一步需要在Mail下方的check處點選打勾，代表要使用這個Mail做為個人帳號，完成後按”Continue”繼續下一步。

接下來這個畫面很重要，這是等候Mail驗證畫面，系統正在完成Mail確認，所以暫時不要點選下一步，而是到你的信箱查看是否有註冊確認信。

查看Mail信箱是否有收到註冊確認信，若沒有，可能要去垃圾箱或垃圾郵件中找找，找到後，直接點選藍色的「Verify your email」按鈕即可完成Email確認。

點選後，會到ThingSpeak頁面，要我們選擇合適網站語言，我們可以點選預設值為United States美國即可，讀者也可以依據需求點選合適的語言（例如簡體中文）。

最後我們就可看到Your profile was verified，最後我們再回到剛剛等候驗證的畫面，點選”Continue”，就會出現密碼視窗。

在密碼視窗中輸入自己喜歡的密碼，但是必須符合密碼複雜性規則，最少八碼並為大小寫數字的組合，並勾選下方的同意後，再點選Continue，即可完成註冊。

註冊完成視窗，點選OK後，會出現一個問卷，確認你不是做商業用途。讀者可以選擇最後一個，學生使用，並按OK即可。

(2) 設定頻道

在ThingSpeak中的頻道可視為資料庫，一個頻道有8個基礎欄位可用，這次我們要收集溫濕度共兩個欄位，若您需要收集更多資料，只須在後方打勾，並輸入該欄位的名稱即可。

首先我們點選New Channel，以新增一個頻道。

並輸入Channel的名稱(Name)，名稱可以用教室名稱Class205之類，並勾選欄位(Field)1及欄位2，輸入欄位名稱，以本例而言，稍後我們要存入的是DHT11的溫濕度資料，因此在欄位1輸入溫度、欄位2輸入濕度。

下方的欄位可都先省略，使用者可以自行決定是否輸入，例如Show Channel Location，是可以在地圖上標示位置，地點的經緯度可從Google Map上查詢。

完成設定後，會立即出現圖表，不過目前還沒有任何資料，因此圖表都是空的。

(3) 傳輸測試

完成設定後，在使用ESP32傳輸之前，可以先手動傳值測試，以了解ThingSpeak是如何接收網路資料。
我們點選頻道上方的「API Keys」的功能。本功能區是提供你資料庫的存取密碼（Key），請您妥善保管，避免被其他人竄改，ThingSpeak的密碼分為兩Write API及Read API，Write是寫入資料庫用，而Read則是讀取資料庫用，我們會先利用到Write密碼。

不過ThingSpeak已經很貼心的把資料寫入的方式寫好放在左側「API Requests」的「Write a Channel Feed」欄位內。

我們將欄位內資料的網址部份複製起來，不包含前方的「GET」，內容會像是：

https://api.thingspeak.com/update?api_key=XXXXXXX….&field1=0

其中api_key＝XXXXXXX….的亂碼是讀者自己寫入該資料庫的密碼，而field1則是要傳入資料庫的欄位，中間有「＆」符號是作為參數串接用途，每一個參數之間必須有＆符號做區隔，對於上面的內容我們再修改兩個地方，以利練習：

最前方的https改成http，主要是等等使用ESP32傳輸時，將會用不加密的http協定會比較簡單。
最後方的參數「field1=0」改為「field1=25&field2=65」，代表要傳入的測試值是「溫度＝25、濕度＝65」，因此網址變成：

http://api.thingspeak.com/update?api_key=XXXX&field1=25&field2=65

完成上面的網址修改後，在瀏覽器中開啟一個新頁籤，將上述的網址輸入到新頁籤中並按Enter執行，就會出現數字1，代表這是資料庫的第1筆，往後每次收到新的值就會+1，但若出現0則代表資料接收失敗，原因可能是傳輸太頻繁，使用免費帳號每次間隔須超過15秒。

此時回到頻道圖表Private View的地方就會發現，已經有第一點資料（下圖中間紅點處）進來了，若沒有資料，請自行使用重新整理(F5)。

此時我們再修改一下網址，將溫度改為30，濕度改為60，則網址變成：

http://api.thingspeak.com/update?api_key=XXXXX&field1=30&field2=60

再送出網址一次，即可加上第二點，而連成一條線。讀者可自行增加多個點進行測試，查看傳入的狀況是否正常。

根據上面的測試，我們可以了解，更新ThingSpeak資料庫的方式就是瀏覽一個固定的網址，並將欄位值放在最後的field1=溫度值&field2=濕度值的方式即可，因此下一步就是讓ESP32讀取DHT11的數值後，補到網址後方後，再定時自動去瀏覽網址即可更新雲端圖表的內容。

2. ESP32自動更新圖表

本節我們先連接ESP32與DHT11，再加上前一章的內容抓取即時空氣品質，改掉要瀏覽的網址即可，請讀者依照以下步驟。

(1) 先完成ESP32與DHT11溫濕度感測實驗

本部份接線與程式請參考「ESP32 溫濕度液晶螢幕」的內容，完成接線及程式測試，並確定能讀取到溫濕度的數值。

(2) ESP32 WiFi抓取資料空氣品質實驗

本部份程式請參考「抓取即時空氣品質」的內容，完成程式測試，並確定能抓取資料。

(3) 自動上傳雲端圖表

接下來則是將「ESP32與DHT11溫濕度感測」與「ESP32 WiFi抓取資料」的程式碼合併，並將原本空氣品質的網址修改為ThingSpeak寫入Channel的網址即可，修改後的程式碼為：

#include
#include
#include
//請修改以下參數--------------------------------------------
char ssid[] = "SSID";
char password[] = "SSIDpassword";
//請修改為你自己的API Key，並將https改為http
String url = "http://api.thingspeak.com/update?api_key=換成你的APIKey";
int pinDHT11 = 4;//修改腳位為4
//---------------------------------------------------------
SimpleDHT11 dht11(pinDHT11);//宣告SimpleDHT11物件
void setup()
{
Serial.begin(115200);
Serial.print("開始連線到無線網路SSID:");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(1000);
}
Serial.println("連線完成");
}
void loop()
{
//start working...
Serial.println("=============");
byte temperature = 0;
byte humidity = 0;
int err = SimpleDHTErrSuccess;
if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
Serial.print("溫度計讀取失敗，錯誤碼="); Serial.println(err); delay(1000);
return;
}
//讀取成功，將溫濕度顯示在序列視窗
Serial.print("溫度計讀取成功: ");
Serial.print((int)temperature); Serial.print(" *C, ");
Serial.print((int)humidity); Serial.println(" H");
//開始傳送到thingspeak
Serial.println("啟動網頁連線");
HTTPClient http;
//將溫度及濕度以HTTP Get參數方式補入網址後方
String url1 = url + "&field1=" + (int)temperature + "&field2=" + (int)humidity;
//http client取得網頁內容
http.begin(url1);
int httpCode = http.GET();
if (httpCode == HTTP_CODE_OK) {
//讀取網頁內容到payload
String payload = http.getString();
//將內容顯示出來
Serial.print("網頁內容=");
Serial.println(payload);
} else {
//讀取失敗
Serial.println("網路傳送失敗");
}
http.end();
delay(20000);//休息20秒
}

網路若沒問題，應該會把資料不停的送到ThingSpeak內，歷次傳入的溫濕度就可以顯示在圖表上了。

(4) 圖表格式設定

若讀者覺得圖表格式不符合需求，這時可以透過設定來變更，點選圖表右上方的筆的符號可以開啟設定視窗。

圖表格式設定

Title：圖表標題
X(Y)-Axis：X(Y)軸標題
Color：線條顏色（請用色碼）
Background：背景顏色（請用色碼）
Type：圖形樣式，有折線(Line)、水平直條圖(Bar)、垂直直條圖(column)、spline(曲線圖)、階梯圖(Step)五種圖形可選，折線、曲線、階梯功能類似，只是折線的樣式不同，使用者可以選一個自己順眼的，筆者選擇spline曲線圖
Dynamic：自動更新
Days：最多能顯示幾天的資料
Results：最多能顯示幾個點（Days與Results兩者只能選一使用），顯示方式共有四種，擇一使用
– Timescale：每n分鐘內取第一點
– Avreage：每n分鐘內取平均
– Median：每n分鐘內取中位數
– Sum：每n分鐘內取總和
Rounding：四捨五入到第幾位
Data Min-Max：最大值最小值，超過的值會被忽略，可以篩選資料
Y-Axis Min-Max：Y軸最大最小範圍