บทความนี้ ตอนที่ 1 จะพูดถึง (แจกโค๊ด) Firebase Realtime Database และ ตอนที่ 2 จะพูดถึง Arduino โดยที่ในตอนที่ 1 จะเป็นโปรแกรมให้เห็นว่า นำข้อมูลใส่เข้าใน Firebase Realtime Database ได้อย่างไร แล้วในตอนที่ 2 เราจะโปรแกรม Arduino ให้เชื่อมต่อเน็ตผ่าน Wi-Fi 802.1x แล้วหลอด LED จะถูกเปิด/ปิด หรือ เปลี่ยนสี เมื่อมีการสั่งจากโปรแกรม JavaScript ในตอนที่ 1
ในขั้นตอนการติดตั้ง Firebase สมัครใช้งาน สร้าง Database ลองหาอ่านกันเอาเองนะครับ มันง่าย ๆ ครับ เรามาเริ่มต้นที่มี Database ชื่อว่า Firstapp-IoT ที่ผมสร้างไว้แล้ว ขั้นตอนมาเราจะโปรแกรม JavaScript โดยการเขียนโปรแกรมไว้ใน local folder เครื่องของผมใช้ Windows 10 ผมก็สร้างไว้ที่ C:\myFirebase และก็ไปดาวน์โหลด firebase-tools-instant-win.exe เพื่อใช้ในการทดสอบแบบ localhost ด้วยคำสั่ง firebase serve แล้วทำการทดสอบโปรแกรมผ่านเว็บเบราว์เซอร์ที่ localhost:5000 และเมื่อโปรแกรมพร้อมใช้ก็นำขึ้นไปไว้ใน Firebase hosting ด้วยคำสั่ง firebase deploy –only hosting แล้วก็สามารถใช้โปรแกรมผ่านทางเว็บเบราว์เซอร์ที่ firstapp-iot.web.app
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-00.jpg)
รัน firebase-tools-instant-win.exe
ในขั้นตอน setup ครั้งแรก เราสร้างไดเรกทอรีชื่อ nodemcu
จะมีคำถามว่าจะสร้าง project ใหม่ หรือ ใช้ที่มีอยู่ ผมมีอยู่แล้ว ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-setup-1-1024x583.jpg)
และถัดไป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-setup-2-1024x394.jpg)
เราจะเขียนโปรแกรมภาษา JavaScript ไว้ที่เรา setup ไว้ ไฟล์แรกที่เราจะเขียนคือ index.html และเมื่อเสร็จเราก็รัน firebase-tools-instant-win.exe กลับเข้ามา และทดสอบโดยคำสั่ง firebase serve
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-01-1024x581.jpg)
และเมื่อโปรแกรมเริ่มใช้งานได้แล้ว ก็นำไปไว้บน Firebase hosting ด้วยคำสั่ง firebase deploy ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-02-1024x581.jpg)
ผลลัพธ์ของโปรแกรม
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-03.jpg)
เมื่อเราใส่ email ที่อนุญาต ก็จะเข้าสู่หน้าต่อไปที่จะทดสอบการอัปเดตค่าข้อมูลใน Firebase Realtime Database ของ project ชื่อ Firstapp-IoT ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-04.jpg)
เมื่อคลิกที่ SET LED ON ได้ผลลัพธ์แบบนี้
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-04_2-1024x691.jpg)
สำหรับเว็บเพจ setled.html เป็นการทดสอบให้เห็นว่า เราสามารถตั้งค่า Firebase authentication ด้วย email แล้วอนุญาตให้แก้ไขข้อมูลใน Firebase Realtime Database ได้ โดยต้องไปตั้งค่า Rules ให้ดี
ถัดไป คลิกที่ Goto NodeMCU ESP8266 Project ผมจะสาธิตการควบคุม Arduino NodeMCU ESP8266 ให้เปิด/ปิด LED ตรงนี้เชื่อมต่อผ่านเน็ต Wi-Fi 802.1x
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-05.jpg)
ทดสอบคลิก Set LED On และเลือก GREEN
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-06-1024x680.jpg)
และดูผลลัพธ์ที่อุปกรณ์ ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-07-1024x767.jpg)
ถัดไปลองอีกตัวอย่าง คลิก Set LED Off และเลือก BLUE
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-08-1024x671.jpg)
และดูผลลัพธ์ที่อุปกรณ์ ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-09-1024x767.jpg)
จบการทดสอบ จากรูปเราต่อวงจรตามตำราที่เล่าขานกันในอินเทอร์เน็ต ตรงนี้หาอ่านกันเอาเองนะครับ สังเกตเราจะใช้ก้อนถ่านพร้อมราง แต่เราก็สามารถเลือกใช้สายชาร์ตจ่ายไฟได้ ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-10-1024x766.jpg)
ต่อไปมาดูส่วนโปรแกรมกันบ้าง
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-11.jpg)
คลิกเข้าไปในไดเรกทอรี public จะเห็นดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-12.jpg)
แจกโค๊ดให้ครับ เข้าไปที่ github ตาม link นี้ https://github.com/woonpsu/firstapp-iot
ถัดไปเรามาดูส่วนที่เราต้องมีใน Firebase
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-13-1024x546.jpg)
ในการทดสอบโปรแกรม เราจะต้องเปิด Developer tools ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-14-1024x690.jpg)
เราใช้คำสั่ง console.log() เพื่อ debug ดูว่าโปรแกรม error มั้ย
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-15-1024x520.jpg)
ถัดไปมาดูส่วนที่เราจะต้องมีใน Firebase
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-16-1024x370.jpg)
สร้าง User ได้ในแท็บ Users และ Firebase Authentication Built-In Sign-In อนุญาตให้สร้างเพิ่มจากหน้า Sign-In หากยังไม่มีชื่อ User ที่ป้อน ตรงนี้เราต้องจัดการลบทิ้ง หรือ setup Firebase API ควบคุม หรือ เขียนส่วน Sign-In ใหม่เองครับ
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-17-1024x328.jpg)
ถัดไปมาดู Rules ที่เราใช้ใน Project นี้
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-18-1024x701.jpg)
ในตัวอย่าง setled.html แสดงตัวอย่างการใช้ rules แบบ “.read”: true และ “.write”: “$uid === auth.uid” โดยมี path เริ่มต้นที่ “$uid”
ในตัวอย่าง setledcolor.html แสดงตัวอย่างการใช้ rules แบบ “.read”: true และ “.write”: true เนื่องจาก FirebaseArduino Library ไม่รองรับคำสั่ง Firebase Authentication ด้วย User
และเมื่อเราใช้ Firebase cli ในการ deploy เราก็จะได้ Firebase Hosting ดังรูป
![](https://sysadmin.psu.ac.th/wp-content/uploads/2021/06/firebasecli-19-1024x562.jpg)
ในบทความต่อไปจะเป็น Arduino เชื่อมต่อเน็ต Wi-Fi 802.1x ตอนที่ 2