งานครั้งที่ 43 [iot#18 Firebase] บันทึกค่าบน Firebase แสดงผลบน Fireboard
งาน 2 ครั้งที่ผ่านมาเป็นการส่งค่าขึ้น Firebase โดยค่าที่ส่งล่าสุดจะไปทับตำแหน่งค่าที่ส่งไปก่อนหน้านั้น เหตุที่เป็นเช่นนี้เนื่องจากใช้ฟังก์ชั่นการส่งเป็น setInt, SetFloat ในกรณีที่ผู้ใช้งานต้องการบันทึกค่าเก็บไว้ดูโดยยังคงค่าเก่าที่เคยส่งขึ้นไป อาจเพื่อนำไปวิเคราะห์ค่าต่าง ๆ ตามความต้องการ Firebase สามารถทำได้เช่นกันเพียงแต่เปลี่ยนมาใช้ฟังก์ชั่น push แทน ซึ่งงานครั้งนี้จะส่งค่าขึ้นบันทึกบน Firebase จำนวน 4 ค่าด้วยกันได้แก่
- ค่าที่อ่านได้จากพอร์ตแอนะล็อก
- ค่าอุณหภูมิ
- ค่าความชื้น
- ค่าเวลาที่ทำการวัด ซึ่งเป็นเวลาที่อ่านจากเซิร์ฟเวอร์นาฬิกาสากล
ซึ่งการเขียนโค้ดที่บอร์ดควบคุมจำเป็นต้องมีไลบรารี่สำหรับอ่านค่าจากโมดูลอ่านค่าอุณหภูมิและความชื้น ท่านใดยังไม่ได้ดำเนินการให้ศึกษาขั้นตอนได้ในงานครั้งที่ 8 การเขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT11 เบื้องต้น (http://www.praphas.com/forum/index.php?topic=311.0)
คอนเซ็ปต์หลักของงาน
บอร์ดส่งค่าข้อมูลทั้ง 4 อย่างขึ้นบันทึกบน Firebase แล้วนำค่าไปแสดงผลที่ Fireboard
[ขั้นตอนการดำเนินการ]
-สร้างโปรเจคงานใน Firebase
-นำรหัสลับของโปรเจคงานใน Firebase มาใส่ในโค้ดโปรแกรม
-นำค่าโฮสต์ของโปรเจคมาใส่ในโปรแกรม
-เขียนโค้ดเพื่อใช้งาน
-สร้างหน้าต่างแสดงผลที่ Fireboard
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/1.png)
2. ผลที่ต้องการในงานครั้งนี้เป็นการนำค่าที่ได้บันทึกลง Firebase มาแสดงผลบน Fireboard
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/18.png)
ส่วนจัดการ Firebase
1. เริ่มขั้นตอนสร้างโปรเจค โดยเข้าไปที่ https://firebase.google.com
(1) ล็อกอินด้วยอีเมล์ gmail (หากไม่มีให้สมัครใช้งาน gmail ก่อน)
(2) คลิกที่ปุ่ม "ไปที่คอนโซล"
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/2.png)
2. การใช้งานโปรเจค มี 2 ทางเลือกสำหรับผู้ที่เคยสร้างโปรเจคมาแล้ว
(1) โดยคลิกที่คำว่า "เพิ่มโครงการ" สำหรับผู้ที่ต้องการสร้างโปรเจคงานใหม่
(2) คลิกเลือกชื่อโปรเจคสำหรับผู้ที่ต้องการใช้โปรเจคเก่าที่เคยสร้างมาแล้ว
*งานนี้ใช้โปรเจคเก่าที่เคยสร้างมาแล้ว สำหรับท่านใดที่ต้องการสร้างโปรเจคใหม้ให้ย้อนกลับไปดูวิธีการในงานครั้งที่ 41
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/3.png)
3. ขั้นตอนไปหา รหัสลับ โดยเริ่มจาก
(1) คลิกที่รูปเฟือง
(2) คลิก "การตั้งค่าโครงการ"
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/4.png)
4. ดำเนินการต่อโดย
(1) คลิกที่แท็ป "บัญชีบริการ"
(2) คลิกที่ "ข้อมูลลับฐานข้อมูล"
(3) เลื่อนเมาส์มาลอย ๆ ในส่วนท้ายข้อความที่เป็น ........ แล้วคลิกที่คำว่า "แสดง" ทำการคลิกที่รูปสี่เหลี่ยมเพื่อคัดลอกนำไปใช้งาน
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/5.png)
5. คัดลอกตำแหน่งโฮสต์ โดยคลิกที่ (1) Database แล้วคลุมดำที่ตำแหน่งโฮสต์ (2) คัดลอกเอาเฉพาะข้อความที่อยู่หลัง // และอยู่ก่อน /
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/6.png)
โค้ดโปรแกรม
#include <ESP8266WiFi.h>
#include <time.h>
#include <FirebaseArduino.h>
#include <DHT.h>
#define DHTPIN D1 //pin connect DHT
#define DHTTYPE DHT11 //DHT11, DHT22 type of Sensor
#define WIFI_SSID "wifi_name"
#define WIFI_PASSWORD "wifi_password"
#define FIREBASE_HOST "host_firebase"
#define FIREBASE_AUTH "secret_code"
char ntp_server1[20] = "pool.ntp.org";
char ntp_server2[20] = "time.nist.gov";
char ntp_server3[20] = "time.uni.net.th";
int timezone = 7*3600;
int dst = 0;
DHT dht(DHTPIN, DHTTYPE);
void setup() {
Serial.begin(115200);
Serial.println();
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println(WiFi.localIP());
Serial.println("");
configTime(timezone, dst, ntp_server1, ntp_server2, ntp_server3);
Serial.println("\nWaiting for time");
while (!time(nullptr)) {
Serial.print(".");
delay(1000);
}
Serial.println("");
dht.begin();
Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
}
void loop() {
Serial.println(NowTime());
delay(1000);
float h = dht.readHumidity();
float t = dht.readTemperature();
int adc=analogRead(A0);
if (isnan(t) || isnan(h))
{
Serial.println("Error reading DHT!");
delay(1000);
return;
}
digitalWrite(D0,LOW);
Serial.print("Analog value: ");
Serial.print(adc);
Serial.print("\t");
Serial.print("Humidity: ");
Serial.print(h);
Serial.print("\t");
Serial.print("Temp: ");
Serial.println(t);
Serial.println("...............................");
StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
root["analog"] = adc;
root["temperature"] = t;
root["humidity"] = h;
root["time"] = NowTime();
String name = Firebase.push("logDevice01", root);
if (Firebase.failed()) {
Serial.print("pushing /logs failed:");
Serial.println(Firebase.error());
return;
}
Serial.print("pushed: /logDevice01/");
Serial.println(name);
delay(30000);
}
String NowTime() {
time_t now = time(nullptr);
struct tm* p_tm=localtime(&now);
String timeNow = "";
timeNow += String(p_tm->tm_hour);
timeNow += ":";
timeNow += String(p_tm->tm_min);
timeNow += ":";
timeNow += String(p_tm->tm_sec);
timeNow += " ";
timeNow += String(p_tm->tm_mday);
timeNow += "-";
timeNow += String(p_tm->tm_mon + 1);
timeNow += "-";
timeNow += String(p_tm->tm_year + 1900);
return timeNow;
}
6. เนื่องจากมีข้อมูลจำนวนหลายตัวที่ต้องการส่ง เพื่อให้สามารถส่งขึ้นได้ในครั้งเดียวจึงใช้วิธีผนวกตัวข้อมูลให้อยู่ในรูปแบบของ JSON ฟังก์ชั่นหลัก ๆที่ใช้งานดังนี้
(1) ผนวกข้อมูลทั้งหมดในรูปแบบ JSON
(2) บันทึกข้อมูลบน Firebase
(3) ตรวจสอบว่าหากบันทึกล้มเหลวให้กลับไปเริ่มใหม่
(4) แสดงชื่อชุดข้อมูลที่ Firebase ตั้งขึ้นเพื่อใช้ในการบันทึก
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/7.png)
ทดสอบการทำงาน
7. อัพโหลด เปิดดูผลที่ Serial monitor
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/8.png)
8. หลังจากการ upload โค้ด สังเกตผลที่เกิดขึ้นที่เวป firebase โดยเข้าไปดูใน Database จะเห็นการบันทึกข้อมูลเป็นชุด ๆ
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/9.png)
9. นำข้อมูลที่บันทึกบน Firebase สามารถแสดงค่าบน Fireboard (เป็นเวปไซต์ที่พัฒนาขึ้นโดย www.ioxhop.com สามารถใช้งานได้ฟรี) โดยเข้าไปที่ https://fireboard.xyz/ ลงชื่อเข้าใช้ด้วยบัญชี gmail
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/10.png)
10. เริ่มสร้างบอร์ดเพื่อแสดงผลคลิกตามรูป
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/11.png)
11. จะปรากฏตั้งค่าบอร์ดโดยจะต้องนำค่าทั้ง 2 ค่าจาก Firebase มาใส่
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/12.png)
12. เข้ายังเวปไซต์ Firebase คลิกตามลำดับ (1), (2)ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/13.png)
13. ปรากฏหน้าต่างที่บรรจุค่าที่ต้องนำไปใส่ใน Fireboard ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/14.png)
14. คัดลอกค่าทั้ง 2 จาก Firebase ไปกำหนดค่าใน Fireboard ดังรูป (คลิกที่แท็ปทั่วไปตั้งค่าบอร์ดตามต้องการ)
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/15.png)
15. ทำการเพิ่มโมดูลการแสดงผล
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/16.png)
16. ตัวอย่างต้องการแสดงผล "อุณหภูมิ" โดยแสดงผลเป็นกราฟ การกำหนดค่าข้อมูลจะใช้ชื่อข้อมูลจาก Firebase เพื่อนำส่วนข้อมูลที่ต้องการมาแสดงผล
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/17.png)
17. ตัวอย่างการเพิ่มโมดูลแสดงผลที่เป็นกราฟแสดง อุณหภมิ ความชื้น และแสดงข้อมูลทั้งหมดเป็นแบบตาราง
(http://www.praphas.com/PhotoForum/iot/Lab-43-FireBasePushData/18.png)