ESP8266 ESP8285 บันทึกอุณหภูมิและความชื้นเข้า Firebase แสดงผลบนหน้าเว็บ

* ปัจจุบันผู้เขียนไม่แนะนำให้ใช้งาน Firebase เนื่องจาก API เปลี่ยนไปมา และการเปลี่ยนแต่ละครั้งจะทำให้อุปกรณ์เก่าใช้งานไม่ได้ ต้องนำมาอัพเดทเฟิร์มแวร์ใหม่

ในบทความที่แล้ว ESP8266 ESP8285 กับการใช้งาน Firebase ระบบฐานข้อมูลเรียลไทม์จาก Google เราได้ทดลองนำค่าอุณหภูมิขึ้นไปเก็บบน Firebase แล้ว ในบทความนี้เราจะมาลองเอาค่าอุณหภูมิที่อยู่ใน Firebase มาแสดงผลบนหน้าเว็บไซต์กันครับ ส่วนท่านที่ยังไม่ได้อ่านบทความที่แล้ว แนะนำให้อ่านก่อน เนื่องจากบทความนี้จะต้องใช้ข้อมูลที่ได้จากบทความที่แล้วมาแก้ไขโค้ดให้ทำงานได้ครับ

ในการแสดงผลบนหน้าเว็บ ผมได้เขียนโค้ดไว้ค่อนข้างจะสำเร็จรูปแล้ว มีการแสดงผลอุณหภูมิและความชื้นล่าสุด อัพเดทอัตโนมัติกับ Firebase (ไม่ต้องรีเฟสหน้าเว็บ) และมีการแสดงแบบเป็นกราฟ แต่เนื่องจากการแสดงกราฟนั้นต้องมีแกน x และแกน y ในแกน y จะแสดงอุณหภูมิและความชิ้น ส่วนในแกน x จะแสดงเวลาที่ตรวจวัด

ดังนั้นจึงมีการเปลี่ยนแปลงโค้ดจากในบทความที่แล้ว โดยมีโค้ดส่วนของการดึงเวลามาจาก NTP Server เพื่อ push ข้อมูลวันเวลาไปพร้อม ๆ กับการ push ค่าอุณหภูมิ และค่าความชิ้น

มาเริ่มกันเลยดีกว่า

ก่อนอื่นเลย ที่ ESP8266 ESP8285 ให้ต่อวงจรตามรูปด้านล่างนี้ (วงจรเดียวกับในบทความที่แล้ว) แต่ครั้งนี้ผมเปลี่ยนมาใช้ DHT22 เพื่อให้วัดอุณหภูมิเป็นจุดทศนิยมได้

เมื่อต่อวงจรเสร็จแล้ว ให้อัพโค้ดด้านล่างนี้ลงไป โดยแก้ไข FIREBASE_HOST, FIREBASE_AUTH, WIFI_SSID และ WIFI_PASSWORD ก่อน (ดูวิธีการแก้ไขได้ในบทความที่แล้ว)

ลองเปิดมอนิเตอร์ดูผล รอเชื่อมต่อ WiFi ซักครู่ หากต่อวงจรถูก แก้ไข FIREBASE_HOST, FIREBASE_AUTH ถูก จะขึ้นประมาณดังรูป

เมื่อเข้าไปดูที่หน้าคอนโซลของ Firebase ก็จะพบข้อมูลปรากฏขึ้นมาแล้ว

การนำไปแสดงผลบนหน้าเว็บไซต์

ที่คอนโซลของ Firebase กดไปที่รูปบ้าน หรือชื่อโปรเจค

คลิกที่ไอค่อน Add Firebase to your web app

คัดลอกตั้งแต่ var config { ไปจนถึง }; ดังรูป

ดาว์นโหลดไฟล์ที่ลิ้ง https://github.com/ioxhop/Firebase-Temperature-Humidity-Dashboard/archive/master.zip คลายไฟล์ออกมาวางไว้ แล้วเข้าไปแก้ไขไฟล์ index.html โดยใช้โปรแกรม Notepad++ หรือโปรแกรม Text Editer ตัวอื่น

เลื่อนลงไปที่บรรทัด 36 นำส่วนที่คัดลอกไว้ มาทับ

บันทึกให้เรียบร้อย (กด Ctrl + S) แล้วปิดหน้าต่างไป

กลับไปที่โฟลเดอร์ เปิดไฟล์ index.html ด้วย Google Chrome

รอซักครู่ จะมีการดึงข้อมูลล่าสุดจาก Firebase มาแสดง และเมื่อ EPS8266 ESP8285 มีการส่งข้อมูลเข้า Firebase ที่หน้าเว็บก็จะมีการอัพเดทข้อมูลทันที

เมื่อคลิปไปที่เมนู History ก็จะพบกับกราฟแสดงผลเป็นช่วงเวลา โดยจะดึงมาแสดงเฉพาะข้อมูลที่เพิ่มเข้าไปในวันนี้

สรุปทิ้งท้าย

จะเห็นได้ว่า Firebase ไม่ใช่เพียงตัวกลางในรับ-ส่งข้อมูล แต่ยังเป็นฐานข้อมูล ทำให้สามารถเก็บข้อมูลระหว่างรับ-ส่งได้ด้วย อย่างในบทความนี้จะเห็นว่าเรานำข้อมูลที่เก็บไว้มาแสดงผลเป็นกราฟได้ ทำให้เห็นได้ว่าช่วงเวลาไหนมีโอกาศฝนตก มีอากาศหนาวเย็น ซึ่งสามารถนำไปใช้ในการวางแผนในวันถัดไปได้

ตัวเว็บที่แสดงผลอยู่นี้ยังอยู่แค่บนเครื่องของเรา ท่านสามารถนำไฟล์ไปอัพขึ้นโฮสติ้งได้เลย หรือจะใช้บริการ GitHub Pages ก็ได้เช่นกันครับ

ส่วนท่านที่ Error ตรง DHT.h เกิดจากท่านยังไม่ได้ลงไลบารี่ ให้กดไปที่เมนู Sketch > Include Library > Manage Libraries...

เลือกติดตั้งที่เป็นของ Adafruit เมื่อติดตั้งเสร็จแล้ว ลองอัพโหลดเข้า ESP8266 อีกครั้งดูครับ