ชื่อโปรเจกต์: สถานีตรวจอากาศ Real-time ส่วนตัว (ฉบับจัดเต็ม)

ยกเครื่องการเช็กอากาศในบ้าน: สูตรสำเร็จ NodeMCU + Firebase

ปกติสถานีวัดอากาศทั่วไปเขาก็โชว์ค่าแค่บนจอเล็กๆ หน้าเครื่องใช่ป่ะ? แต่โปรเจกต์ Private Real-time Weather Station นี้พี่จะพาน้องทำแบบล้ำๆ คือซิงค์ข้อมูลจากบ้านเราขึ้น Cloud ไปเลย โดยใช้เจ้า NodeMCU (ESP8266) ตัวเก่ง เก็บค่าความสว่าง, อุณหภูมิ และความชื้น แล้วยัดข้อมูลเข้า Database ของ Google Firebase คราวนี้จะดูผ่านมือถือหรือคอมพิวเตอร์จากมุมไหนของโลกก็ทำได้แบบไม่มีหน่วง (Zero Latency) หล่อเท่เลยงานนี้!

ตัวเชื่อมการสื่อสาร: NodeMCU ไปยัง Firebase

ทำไมต้อง NodeMCU? ก็เพราะมันมี WiFi ในตัวไงน้อง เหมาะกับงาน IoT สุดๆ:

FirebaseArduino.h Library: โปรเจกต์นี้เราใช้ Library สำเร็จรูปที่ช่วยให้ ESP8266 คุยกับ Firebase REST API ได้ง่ายขึ้น ไม่ต้องมานั่งเขียนคำสั่ง JSON เองให้ปวดกบาล แค่สั่ง Firebase.setFloat("temp", value); สั้นๆ ก็จบงาน
Instant Synchronization: ตัว "Real-time Database" ของ Firebase มันทำงานผ่าน WebSockets อยู่เบื้องหลัง พอ NodeMCU อัปเดตค่าปุ๊บ หน้าเว็บที่เราเปิดไว้ก็จะเปลี่ยนตามทันทีแบบไม่ต้องกด Refresh ให้เสียเวลา
Hosting ฟรีไม่มีจ่าย: ใช้ "Spark" plan ของ Firebase สิวัยรุ่น สาย Hobby อย่างเราใช้ฟรีสบายๆ Bandwidth เหลือเฟือสำหรับคนเข้ามาดูพร้อมกันได้ถึง 100 คน

มัดรวม Sensor แบบสั่งทำเอง

สถานีนี้ใช้ Sensor 2 ตัวหลักๆ มาฟีเจอริ่งกันเพื่อดูสภาพแวดล้อมในบ้าน:

DHT11 Digital Sensor: ตัวนี้เอาไว้วัดความชื้น (20-90%) และอุณหภูมิ (0-50°C) ถึงจะเป็น Sensor พื้นฐาน แต่โปรเจกต์นี้จะสอนให้น้องใช้ Library DHT.h เพื่อคุมเรื่องจังหวะเวลา (Timing) ในการสื่อสารแบบ Single-wire ให้เป๊ะ
LDR Light Sensor: ตัวต้านทานไวแสงแบบ Analog เอาไว้วัดความสว่างในห้อง เราจะใช้ Resistor 10k ohm มาทำวงจรแบ่งแรงดัน (Voltage Divider) เพื่อให้ขา A0 ของ NodeMCU อ่านค่าแสงออกมาเป็นเปอร์เซ็นต์ จะได้รู้ว่าตอนนี้ในบ้านสว่างหรือมืดแล้ว

สร้างหน้า Web Dashboard แบบโมเดิร์น

ส่วนสำคัญของงานนี้คือการทำ Front-End Development พี่มีแนวทางให้สร้าง Dashboard ของตัวเองด้วย HTML, CSS (Bootstrap), และ JavaScript:

Firebase SDK Integration: ในหน้าเว็บจะมีการใส่ Code JavaScript สั้นๆ (app.js) เพื่อให้เว็บมันไปดึงข้อมูลจาก Database มาโชว์
Live Data Injection: เราใช้คำสั่ง dbReflight.on('value', ...) เพื่อให้หน้าเว็บคอยดักฟังค่าที่เปลี่ยนไป แล้วยัดค่าอุณหภูมิหรือความชื้นใหม่ๆ ลงไปใน HTML โดยไม่ต้องโหลดหน้าใหม่ ได้ฟีลแบบข้อมูล Streaming สดๆ เลยน้อง
เข้าถึงได้ทุกอุปกรณ์: เพราะมันเป็น Web-based Dashboard ไงล่ะ พอได้ URL ส่วนตัวมาแล้ว น้องจะเช็กอากาศจาก Browser ตัวไหนในโลกก็ได้ จัดไปวัยรุ่น!

ในโปรเจกต์นี้เราจะสร้างสถานีตรวจอากาศส่วนตัวสำหรับใช้ในบ้านกัน เราจะใช้บอร์ดตระกูล ESP8266 นั่นก็คือ NodeMCU เพื่อดูค่าแสง, อุณหภูมิ และความชื้น โดยอุปกรณ์หลักคือ [LDR](https://s.shopee.co.th/1BHCUqb0Tt) และ [Sensor](https://s.shopee.co.th/7VBG2rX65j) DHT11

โปรเจกต์นี้แบ่งเป็น 3 ส่วนหลักๆ:

1. การเก็บค่าจาก Sensor ต่างๆ

2. การส่งข้อมูลขึ้น Database ออนไลน์ (ในที่นี้คือ Google Firebase)

3. การโชว์ข้อมูลจาก Database บน Web App ของเรา

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1. การเก็บข้อมูล

เราจะใช้ LDR เพื่อวัดค่าความสว่างของแสงในอากาศ ต่อ LDR เข้ากับขา A0 ของ NodeMCU ตามวงจรด้านล่างเลยน้อง

ต่อสายให้ถูกนะตัวนี้ ระวังช็อตล่ะ เช็กขา A0 ให้ดี

ส่วน Sensor DHT11 เราเอาไว้ใช้วัดความชื้นกับอุณหภูมิ เราจะใช้ Library DHT.h นะ ให้ต่อสายตามนี้:

Vcc ==> 3v

Gnd ==> Gnd

Data ==> D3

(Resistor 10k ohm จะใส่หรือไม่ใส่ก็ได้นะ แล้วแต่ศรัทธา)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2. การส่งข้อมูลไป Firebase

ก่อนจะอัปข้อมูลขึ้น Firebase ได้เนี่ย น้องต้องต่อเน็ตให้บอร์ดก่อนนะ แล้วค่อยเข้าไปคุยกับ Firebase โดยเราต้องใช้ Library 2 ตัวนี้:

1. ESP8266WiFi.h

2. FirebaseArduino.h

พอเชื่อมต่อ WiFi ตาม Code เสร็จแล้ว เราก็ใช้ฟังก์ชันของ FirebaseArduino.h อัปโหลดข้อมูลได้เลย

ค่าจาก Sensor จะถูกเก็บไว้ในตัวแปร light, temp และ hum ซึ่งเป็นชนิด float (เลขทศนิยม)

เราจะใช้ฟังก์ชัน setFloat() เพื่อดันค่าขึ้นไปบน Real-time Database ของ Firebase ลองดู Code ประกอบจะเข้าใจง่ายขึ้นเยอะ

Firebase.setFloat("light", light);
 // เช็ก Error หน่อย
 if (Firebase.failed()) {
     Serial.print("setting /light failed:");
     Serial.println(Firebase.error());  
     return;
 }

พอข้อมูลขึ้น Cloud แล้ว คราวนี้จะเอาไปโชว์บน Web App แบบ Real-time ที่ไหนก็ได้ในโลกแล้วน้องเอ๊ย!

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3. การโชว์ข้อมูลบน Web App

ส่วนนี้แหละที่น้องจะได้ปล่อยของ ปล่อยความคิดสร้างสรรค์ ถ้าใครพอรู้เรื่อง HTML หรือ CSS ก็จัดหน้าจอ (UI) สวยๆ ได้เลย พี่ใช้ Bootstrap ทำนะ ส่วนใครที่เป็นมือใหม่เว็บ พี่มี Code พื้นฐานให้ดู (แต่พี่ไม่ให้ Code ทั้งหมดหรอกนะ เดี๋ยวจะกลายเป็นการป้อนข้าวป้อนน้ำ พี่อยากให้เราลองงมทำ UI เอง มันสนุกกว่าเยอะ เชื่อพี่!)

ขั้นตอนที่ 1:

ก๊อป Code นี้ไปแปะใน Notepad แล้วเซฟชื่อ index.html ไว้ใน Folder ที่เราต้องการ (เช่น folder ชื่อ web)

<html>
<head>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-database.js"></script>
</head>
<body style="background-color: #4d4d4d;">
       <ul>
         <li><h1>LIGHT</h1>
         <pre id="light" style="font-size:24px;"></pre></li>
         <li><h1>TEMPERATURE</h1>
         <pre id="temp" style="font-size:24px;"></pre></li>
         <li><h1>HUMIDITY</h1>
         <pre id="hum" style="font-size:24px;"></pre></li>
       </ul>
 <script src="app.js"></script>
</body>
</html>

ขั้นตอนที่ 2:

สร้าง Database ใน Firebase ซะ ล็อกอินด้วย Gmail นั่นแหละ แล้วสร้าง Real-time Database จากนั้นดูตามรูปเพื่อไปเอา Secret Key ของเรามา

(หา Secret key ตรงนี้)

ขั้นตอนที่ 3:

ก๊อป Code ข้างล่างนี้ไปเซฟเป็นไฟล์ชื่อ app.js ไว้ใน Folder เดียวกับ index.html นะจ๊ะ

(function() {
// Initialize Firebase
var config = {
firebase.initializeApp(config);
//Get element
const prelight= document.getElementById('light');
//Create refences
const dbReflight= firebase.database().ref().child('light');
// sync logs cahnges
dbReflight.on('value', snap => {
prelight.innerText=JSON.stringify(snap.val(),null,3);
});
const pretemp= document.getElementById('temp');
//Create refences
const dbReftemp= firebase.database().ref().child('temperature');
// sync logs cahnges
dbReftemp.on('value', snap => {
pretemp.innerText=JSON.stringify(snap.val(),null,3)+"° C";
});
const prehum= document.getElementById('hum');
//Create refences
const dbRefhum= firebase.database().ref().child('moisture');
// sync logs cahnges
dbRefhum.on('value', snap => {
prehum.innerText=JSON.stringify(snap.val(),null,3)+" %";
});
}());

อย่าลืมแก้ค่าใน var config ให้ตรงกับข้อมูล Database ของน้องเองด้วยนะ

(ก๊อปค่าจากตรงนี้ไปทับใน var config ได้เลย)

เสร็จแล้วก็พร้อมลุย!

อัปโหลด Code ลง NodeMCU, ต่อวงจรให้ครบ แล้วจ่ายไฟซะ บอร์ดจะเริ่มส่งข้อมูลขึ้น Firebase ทันที

--------------------------------------------------------------------------------------

หมายเหตุ: สำคัญมาก! อย่าลืมแก้ WiFi SSID, รหัสผ่าน WiFi, Secret Code และ Host Name ในไฟล์ .ino ของน้องด้วยนะ ไม่งั้นเชื่อมต่อไม่ได้ พี่ไม่รู้ด้วยนะ!

#define FIREBASE_HOST "ลิงก์ DATABASE ของน้อง"
#define FIREBASE_AUTH "SECRET CODE ของน้อง"
#define WIFI_SSID "ชื่อไวไฟ"
#define WIFI_PASSWORD "รหัสไวไฟ"

--------------------------------------------------------------------------------------

พอเสร็จหมดแล้ว ก็แค่เปิดไฟล์ index.html ขึ้นมาดูข้อมูลแบบ Real-time ได้เลย

หวังว่าน้องๆ จะเข้าใจโปรเจกต์นี้กันนะ ขอบใจมากที่เข้ามาอ่านกัน ใครมีข้อสงสัยหรือตรงไหนทำไม่ได้ ก็ทิ้งคอมเมนต์ไว้ข้างล่างได้เลย เดี๋ยวพี่มาตอบ

สู้งานนะน้อง! โชคดี!

ยกเครื่องการเช็กอากาศในบ้าน: สูตรสำเร็จ NodeMCU + Firebase

ตัวเชื่อมการสื่อสาร: NodeMCU ไปยัง Firebase

มัดรวม Sensor แบบสั่งทำเอง

สร้างหน้า Web Dashboard แบบโมเดิร์น

1. การเก็บข้อมูล

2. การส่งข้อมูลไป Firebase

3. การโชว์ข้อมูลบน Web App

ข้อมูล Frontmatter ดั้งเดิม