บทความนี้ ตอนที่ 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
รัน firebase-tools-instant-win.exe
ในขั้นตอน setup ครั้งแรก เราสร้างไดเรกทอรีชื่อ nodemcu
จะมีคำถามว่าจะสร้าง project ใหม่ หรือ ใช้ที่มีอยู่ ผมมีอยู่แล้ว ดังรูป
และถัดไป
เราจะเขียนโปรแกรมภาษา JavaScript ไว้ที่เรา setup ไว้ ไฟล์แรกที่เราจะเขียนคือ index.html และเมื่อเสร็จเราก็รัน firebase-tools-instant-win.exe กลับเข้ามา และทดสอบโดยคำสั่ง firebase serve
และเมื่อโปรแกรมเริ่มใช้งานได้แล้ว ก็นำไปไว้บน Firebase hosting ด้วยคำสั่ง firebase deploy ดังรูป
ผลลัพธ์ของโปรแกรม
เมื่อเราใส่ email ที่อนุญาต ก็จะเข้าสู่หน้าต่อไปที่จะทดสอบการอัปเดตค่าข้อมูลใน Firebase Realtime Database ของ project ชื่อ Firstapp-IoT ดังรูป
เมื่อคลิกที่ SET LED ON ได้ผลลัพธ์แบบนี้
สำหรับเว็บเพจ setled.html เป็นการทดสอบให้เห็นว่า เราสามารถตั้งค่า Firebase authentication ด้วย email แล้วอนุญาตให้แก้ไขข้อมูลใน Firebase Realtime Database ได้ โดยต้องไปตั้งค่า Rules ให้ดี
ถัดไป คลิกที่ Goto NodeMCU ESP8266 Project ผมจะสาธิตการควบคุม Arduino NodeMCU ESP8266 ให้เปิด/ปิด LED ตรงนี้เชื่อมต่อผ่านเน็ต Wi-Fi 802.1x
ทดสอบคลิก Set LED On และเลือก GREEN
และดูผลลัพธ์ที่อุปกรณ์ ดังรูป
ถัดไปลองอีกตัวอย่าง คลิก Set LED Off และเลือก BLUE
และดูผลลัพธ์ที่อุปกรณ์ ดังรูป
จบการทดสอบ จากรูปเราต่อวงจรตามตำราที่เล่าขานกันในอินเทอร์เน็ต ตรงนี้หาอ่านกันเอาเองนะครับ สังเกตเราจะใช้ก้อนถ่านพร้อมราง แต่เราก็สามารถเลือกใช้สายชาร์ตจ่ายไฟได้ ดังรูป
ต่อไปมาดูส่วนโปรแกรมกันบ้าง
คลิกเข้าไปในไดเรกทอรี public จะเห็นดังรูป
แจกโค๊ดให้ครับ เข้าไปที่ github ตาม link นี้ https://github.com/woonpsu/firstapp-iot
ถัดไปเรามาดูส่วนที่เราต้องมีใน Firebase
ในการทดสอบโปรแกรม เราจะต้องเปิด Developer tools ดังรูป
เราใช้คำสั่ง console.log() เพื่อ debug ดูว่าโปรแกรม error มั้ย
ถัดไปมาดูส่วนที่เราจะต้องมีใน Firebase
สร้าง User ได้ในแท็บ Users และ Firebase Authentication Built-In Sign-In อนุญาตให้สร้างเพิ่มจากหน้า Sign-In หากยังไม่มีชื่อ User ที่ป้อน ตรงนี้เราต้องจัดการลบทิ้ง หรือ setup Firebase API ควบคุม หรือ เขียนส่วน Sign-In ใหม่เองครับ
ถัดไปมาดู Rules ที่เราใช้ใน Project นี้
ในตัวอย่าง 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 ดังรูป
ในบทความต่อไปจะเป็น Arduino เชื่อมต่อเน็ต Wi-Fi 802.1x ตอนที่ 2
