บันทึกค่าบน Firebase แสดงผลบน Fireboard
งาน 2 ครั้งที่ผ่านมาเป็นการส่งค่าขึ้น Firebase โดยค่าที่ส่งล่าสุดจะไปทับตำแหน่งค่าที่ส่งไปก่อนหน้านั้น เหตุที่เป็นเช่นนี้เนื่องจากใช้ฟังก์ชั่นการส่งเป็น setInt, SetFloat ในกรณีที่ผู้ใช้งานต้องการบันทึกค่าเก็บไว้ดูโดยยังคงค่าเก่าที่เคยส่งขึ้นไป อาจเพื่อนำไปวิเคราะห์ค่าต่าง ๆ ตามความต้องการ Firebase สามารถทำได้เช่นกันเพียงแต่เปลี่ยนมาใช้ฟังก์ชั่น push แทน ซึ่งงานครั้งนี้จะส่งค่าขึ้นบันทึกบน Firebase จำนวน 4 ค่าด้วยกันได้แก่
- ค่าที่อ่านได้จากพอร์ตแอนะล็อก
- ค่าอุณหภูมิ
- ค่าความชื้น
- ค่าเวลาที่ทำการวัด ซึ่งเป็นเวลาที่อ่านจากเซิร์ฟเวอร์นาฬิกาสากล
ซึ่งการเขียนโค้ดที่บอร์ดควบคุมจำเป็นต้องมีไลบรารี่สำหรับอ่านค่าจากโมดูลอ่านค่าอุณหภูมิและความชื้น ท่านใดยังไม่ได้ดำเนินการให้ศึกษาขั้นตอนได้ในงานครั้งที่ 8 การเขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT11 เบื้องต้น
คอนเซ็ปต์หลักของงาน
บอร์ดส่งค่าข้อมูลทั้ง 4 อย่างขึ้นบันทึกบน Firebase แล้วนำค่าไปแสดงผลที่ Fireboard
[ขั้นตอนการดำเนินการ]
-สร้างโปรเจคงานใน Firebase
-นำรหัสลับของโปรเจคงานใน Firebase มาใส่ในโค้ดโปรแกรม
-นำค่าโฮสต์ของโปรเจคมาใส่ในโปรแกรม
-เขียนโค้ดเพื่อใช้งาน
-สร้างหน้าต่างแสดงผลที่ Fireboard
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
2. ผลที่ต้องการในงานครั้งนี้เป็นการนำค่าที่ได้บันทึกลง Firebase มาแสดงผลบน Fireboard
ส่วนจัดการ Firebase
1. เริ่มขั้นตอนสร้างโปรเจค โดยเข้าไปที่ https://firebase.google.com
(1) ล็อกอินด้วยอีเมล์ gmail (หากไม่มีให้สมัครใช้งาน gmail ก่อน)
(2) คลิกที่ปุ่ม "ไปที่คอนโซล"
2. การใช้งานโปรเจค มี 2 ทางเลือกสำหรับผู้ที่เคยสร้างโปรเจคมาแล้ว
(1) โดยคลิกที่คำว่า "เพิ่มโครงการ" สำหรับผู้ที่ต้องการสร้างโปรเจคงานใหม่
(2) คลิกเลือกชื่อโปรเจคสำหรับผู้ที่ต้องการใช้โปรเจคเก่าที่เคยสร้างมาแล้ว
*งานนี้ใช้โปรเจคเก่าที่เคยสร้างมาแล้ว สำหรับท่านใดที่ต้องการสร้างโปรเจคใหม้ให้ย้อนกลับไปดูวิธีการในงานครั้งที่ 41
3. ขั้นตอนไปหา รหัสลับ โดยเริ่มจาก
(1) คลิกที่รูปเฟือง
(2) คลิก "การตั้งค่าโครงการ"
4. ดำเนินการต่อโดย
(1) คลิกที่แท็ป "บัญชีบริการ"
(2) คลิกที่ "ข้อมูลลับฐานข้อมูล"
(3) เลื่อนเมาส์มาลอย ๆ ในส่วนท้ายข้อความที่เป็น ........ แล้วคลิกที่คำว่า "แสดง" ทำการคลิกที่รูปสี่เหลี่ยมเพื่อคัดลอกนำไปใช้งาน
5. คัดลอกตำแหน่งโฮสต์ โดยคลิกที่ (1) Database แล้วคลุมดำที่ตำแหน่งโฮสต์ (2) คัดลอกเอาเฉพาะข้อความที่อยู่หลัง // และอยู่ก่อน /
โค้ดโปรแกรม
6. เนื่องจากมีข้อมูลจำนวนหลายตัวที่ต้องการส่ง เพื่อให้สามารถส่งขึ้นได้ในครั้งเดียวจึงใช้วิธีผนวกตัวข้อมูลให้อยู่ในรูปแบบของ JSON ฟังก์ชั่นหลัก ๆที่ใช้งานดังนี้
(1) ผนวกข้อมูลทั้งหมดในรูปแบบ JSON
(2) บันทึกข้อมูลบน Firebase
(3) ตรวจสอบว่าหากบันทึกล้มเหลวให้กลับไปเริ่มใหม่
(4) แสดงชื่อชุดข้อมูลที่ Firebase ตั้งขึ้นเพื่อใช้ในการบันทึก
ทดสอบการทำงาน
7. อัพโหลด เปิดดูผลที่ Serial monitor
8. หลังจากการ upload โค้ด สังเกตผลที่เกิดขึ้นที่เวป firebase โดยเข้าไปดูใน Database จะเห็นการบันทึกข้อมูลเป็นชุด ๆ
9. นำข้อมูลที่บันทึกบน Firebase สามารถแสดงค่าบน Fireboard (เป็นเวปไซต์ที่พัฒนาขึ้นโดย www.ioxhop.com สามารถใช้งานได้ฟรี) โดยเข้าไปที่ https://fireboard.xyz/ ลงชื่อเข้าใช้ด้วยบัญชี gmail
10. เริ่มสร้างบอร์ดเพื่อแสดงผลคลิกตามรูป
11. จะปรากฏตั้งค่าบอร์ดโดยจะต้องนำค่าทั้ง 2 ค่าจาก Firebase มาใส่
12. เข้ายังเวปไซต์ Firebase คลิกตามลำดับ (1), (2)ดังรูป
13. ปรากฏหน้าต่างที่บรรจุค่าที่ต้องนำไปใส่ใน Fireboard ดังรูป
14. คัดลอกค่าทั้ง 2 จาก Firebase ไปกำหนดค่าใน Fireboard ดังรูป (คลิกที่แท็ปทั่วไปตั้งค่าบอร์ดตามต้องการ)
15. ทำการเพิ่มโมดูลการแสดงผล
16. ตัวอย่างต้องการแสดงผล "อุณหภูมิ" โดยแสดงผลเป็นกราฟ การกำหนดค่าข้อมูลจะใช้ชื่อข้อมูลจาก Firebase เพื่อนำส่วนข้อมูลที่ต้องการมาแสดงผล
17. ตัวอย่างการเพิ่มโมดูลแสดงผลที่เป็นกราฟแสดง อุณหภมิ ความชื้น และแสดงข้อมูลทั้งหมดเป็นแบบตาราง
งาน 2 ครั้งที่ผ่านมาเป็นการส่งค่าขึ้น Firebase โดยค่าที่ส่งล่าสุดจะไปทับตำแหน่งค่าที่ส่งไปก่อนหน้านั้น เหตุที่เป็นเช่นนี้เนื่องจากใช้ฟังก์ชั่นการส่งเป็น setInt, SetFloat ในกรณีที่ผู้ใช้งานต้องการบันทึกค่าเก็บไว้ดูโดยยังคงค่าเก่าที่เคยส่งขึ้นไป อาจเพื่อนำไปวิเคราะห์ค่าต่าง ๆ ตามความต้องการ Firebase สามารถทำได้เช่นกันเพียงแต่เปลี่ยนมาใช้ฟังก์ชั่น push แทน ซึ่งงานครั้งนี้จะส่งค่าขึ้นบันทึกบน Firebase จำนวน 4 ค่าด้วยกันได้แก่
- ค่าที่อ่านได้จากพอร์ตแอนะล็อก
- ค่าอุณหภูมิ
- ค่าความชื้น
- ค่าเวลาที่ทำการวัด ซึ่งเป็นเวลาที่อ่านจากเซิร์ฟเวอร์นาฬิกาสากล
ซึ่งการเขียนโค้ดที่บอร์ดควบคุมจำเป็นต้องมีไลบรารี่สำหรับอ่านค่าจากโมดูลอ่านค่าอุณหภูมิและความชื้น ท่านใดยังไม่ได้ดำเนินการให้ศึกษาขั้นตอนได้ในงานครั้งที่ 8 การเขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT11 เบื้องต้น
คอนเซ็ปต์หลักของงาน
บอร์ดส่งค่าข้อมูลทั้ง 4 อย่างขึ้นบันทึกบน Firebase แล้วนำค่าไปแสดงผลที่ Fireboard
[ขั้นตอนการดำเนินการ]
-สร้างโปรเจคงานใน Firebase
-นำรหัสลับของโปรเจคงานใน Firebase มาใส่ในโค้ดโปรแกรม
-นำค่าโฮสต์ของโปรเจคมาใส่ในโปรแกรม
-เขียนโค้ดเพื่อใช้งาน
-สร้างหน้าต่างแสดงผลที่ Fireboard
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
2. ผลที่ต้องการในงานครั้งนี้เป็นการนำค่าที่ได้บันทึกลง Firebase มาแสดงผลบน Fireboard
ส่วนจัดการ Firebase
1. เริ่มขั้นตอนสร้างโปรเจค โดยเข้าไปที่ https://firebase.google.com
(1) ล็อกอินด้วยอีเมล์ gmail (หากไม่มีให้สมัครใช้งาน gmail ก่อน)
(2) คลิกที่ปุ่ม "ไปที่คอนโซล"
2. การใช้งานโปรเจค มี 2 ทางเลือกสำหรับผู้ที่เคยสร้างโปรเจคมาแล้ว
(1) โดยคลิกที่คำว่า "เพิ่มโครงการ" สำหรับผู้ที่ต้องการสร้างโปรเจคงานใหม่
(2) คลิกเลือกชื่อโปรเจคสำหรับผู้ที่ต้องการใช้โปรเจคเก่าที่เคยสร้างมาแล้ว
*งานนี้ใช้โปรเจคเก่าที่เคยสร้างมาแล้ว สำหรับท่านใดที่ต้องการสร้างโปรเจคใหม้ให้ย้อนกลับไปดูวิธีการในงานครั้งที่ 41
3. ขั้นตอนไปหา รหัสลับ โดยเริ่มจาก
(1) คลิกที่รูปเฟือง
(2) คลิก "การตั้งค่าโครงการ"
4. ดำเนินการต่อโดย
(1) คลิกที่แท็ป "บัญชีบริการ"
(2) คลิกที่ "ข้อมูลลับฐานข้อมูล"
(3) เลื่อนเมาส์มาลอย ๆ ในส่วนท้ายข้อความที่เป็น ........ แล้วคลิกที่คำว่า "แสดง" ทำการคลิกที่รูปสี่เหลี่ยมเพื่อคัดลอกนำไปใช้งาน
5. คัดลอกตำแหน่งโฮสต์ โดยคลิกที่ (1) Database แล้วคลุมดำที่ตำแหน่งโฮสต์ (2) คัดลอกเอาเฉพาะข้อความที่อยู่หลัง // และอยู่ก่อน /
โค้ดโปรแกรม
โค๊ด: [Select]
#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 ตั้งขึ้นเพื่อใช้ในการบันทึก
ทดสอบการทำงาน
7. อัพโหลด เปิดดูผลที่ Serial monitor
8. หลังจากการ upload โค้ด สังเกตผลที่เกิดขึ้นที่เวป firebase โดยเข้าไปดูใน Database จะเห็นการบันทึกข้อมูลเป็นชุด ๆ
9. นำข้อมูลที่บันทึกบน Firebase สามารถแสดงค่าบน Fireboard (เป็นเวปไซต์ที่พัฒนาขึ้นโดย www.ioxhop.com สามารถใช้งานได้ฟรี) โดยเข้าไปที่ https://fireboard.xyz/ ลงชื่อเข้าใช้ด้วยบัญชี gmail
10. เริ่มสร้างบอร์ดเพื่อแสดงผลคลิกตามรูป
11. จะปรากฏตั้งค่าบอร์ดโดยจะต้องนำค่าทั้ง 2 ค่าจาก Firebase มาใส่
12. เข้ายังเวปไซต์ Firebase คลิกตามลำดับ (1), (2)ดังรูป
13. ปรากฏหน้าต่างที่บรรจุค่าที่ต้องนำไปใส่ใน Fireboard ดังรูป
14. คัดลอกค่าทั้ง 2 จาก Firebase ไปกำหนดค่าใน Fireboard ดังรูป (คลิกที่แท็ปทั่วไปตั้งค่าบอร์ดตามต้องการ)
15. ทำการเพิ่มโมดูลการแสดงผล
16. ตัวอย่างต้องการแสดงผล "อุณหภูมิ" โดยแสดงผลเป็นกราฟ การกำหนดค่าข้อมูลจะใช้ชื่อข้อมูลจาก Firebase เพื่อนำส่วนข้อมูลที่ต้องการมาแสดงผล
17. ตัวอย่างการเพิ่มโมดูลแสดงผลที่เป็นกราฟแสดง อุณหภมิ ความชื้น และแสดงข้อมูลทั้งหมดเป็นแบบตาราง
ความคิดเห็น
แสดงความคิดเห็น