บทความนี้ ตอนที่ 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
ภาพที่ 1 สร้างไดเรกทอรีขึ้นมาเองชื่อ myFirebase รัน firebase-tools-instant-win.exe
ในขั้นตอน setup ครั้งแรก เราสร้างไดเรกทอรีชื่อ nodemcu
จะมีคำถามว่าจะสร้าง project ใหม่ หรือ ใช้ที่มีอยู่ ผมมีอยู่แล้ว ดังรูป
ภาพที่ 2 Firebase setup และถัดไป
ภาพที่ 3 Firebase setup เสร็จจะได้ C:\myFirebase\nodemcu\public ไว้เขียนโปรแกรม เราจะเขียนโปรแกรมภาษา JavaScript ไว้ที่เรา setup ไว้ ไฟล์แรกที่เราจะเขียนคือ index.html และเมื่อเสร็จเราก็รัน firebase-tools-instant-win.exe กลับเข้ามา และทดสอบโดยคำสั่ง firebase serve
ภาพที่ 4 ย้ายเข้าไปในที่ที่เรากำหนดเป็น project ของเรา และรันคำสั่งเพื่อทดสอบ และเมื่อโปรแกรมเริ่มใช้งานได้แล้ว ก็นำไปไว้บน Firebase hosting ด้วยคำสั่ง firebase deploy ดังรูป
ภาพที่ 5 คำสั่ง firebase deploy –only hosting คือเอาเฉพาะที่อยู่ในไดเรกทอรี public ผลลัพธ์ของโปรแกรม
ภาพที่ 6 เว็บเพจ firstapp-iot.web.app หน้านี้ใช้ index.html เมื่อเราใส่ email ที่อนุญาต ก็จะเข้าสู่หน้าต่อไปที่จะทดสอบการอัปเดตค่าข้อมูลใน Firebase Realtime Database ของ project ชื่อ Firstapp-IoT ดังรูป
ภาพที่ 7 เว็บเพจหน้านี้ใช้ setled.html เมื่อคลิกที่ SET LED ON ได้ผลลัพธ์แบบนี้
ภาพที่ 8 ที่ Firebase มีการอัปเดตข้อมูล สำหรับเว็บเพจ setled.html เป็นการทดสอบให้เห็นว่า เราสามารถตั้งค่า Firebase authentication ด้วย email แล้วอนุญาตให้แก้ไขข้อมูลใน Firebase Realtime Database ได้ โดยต้องไปตั้งค่า Rules ให้ดี
ถัดไป คลิกที่ Goto NodeMCU ESP8266 Project ผมจะสาธิตการควบคุม Arduino NodeMCU ESP8266 ให้เปิด/ปิด LED ตรงนี้เชื่อมต่อผ่านเน็ต Wi-Fi 802.1x
ภาพที่ 9 เว็บเพจ setledcolor.html ทดสอบคลิก Set LED On และเลือก GREEN
ภาพที่ 10 ที่ Firebase จะมีการอัปเดตข้อมูลตามที่เราเลือก และดูผลลัพธ์ที่อุปกรณ์ ดังรูป
ภาพที่ 11 Arduino เปิด LED และเปลี่ยนสีเขียว ถัดไปลองอีกตัวอย่าง คลิก Set LED Off และเลือก BLUE
ภาพที่ 12 ที่ Firebase จะมีการอัปเดตข้อมูลตามที่เราเลือก และดูผลลัพธ์ที่อุปกรณ์ ดังรูป
ภาพที่ 13 Arduino ปิด LED และเปลี่ยนสีฟ้า จบการทดสอบ จากรูปเราต่อวงจรตามตำราที่เล่าขานกันในอินเทอร์เน็ต ตรงนี้หาอ่านกันเอาเองนะครับ สังเกตเราจะใช้ก้อนถ่านพร้อมราง แต่เราก็สามารถเลือกใช้สายชาร์ตจ่ายไฟได้ ดังรูป
ภาพที่ 14 ใช้สายชาร์ตแบตมือถือนำไปเสียบปลั๊กไฟเพื่อจ่ายไฟแทนก้อนแบตก็ได้ ต่อไปมาดูส่วนโปรแกรมกันบ้าง
ภาพที่ 15 แสดงไดเรกทอรีที่เราทำขั้นตอน firebase setup คลิกเข้าไปในไดเรกทอรี public จะเห็นดังรูป
ภาพที่ 16 แสดงไดเรกทอรีที่เราเขียนโปรแกรมเอาไว้ แจกโค๊ดให้ครับ เข้าไปที่ github ตาม link นี้ https://github.com/woonpsu/firstapp-iot
ถัดไปเรามาดูส่วนที่เราต้องมีใน Firebase
ภาพที่ 17 ส่วนของ Web App ที่เราจะต้อง set up แล้วเราจะได้ firebaseConfig นำไปใส่ในโค๊ดที่แจก ในการทดสอบโปรแกรม เราจะต้องเปิด Developer tools ดังรูป
ภาพที่ 18 เว็บเบราว์เซอร์ Google Chrome เปิด Developer tools เราใช้คำสั่ง console.log() เพื่อ debug ดูว่าโปรแกรม error มั้ย
ภาพที่ 19 แสดงผลการ debug ของคำสั่ง console.log(‘Success!’); ถัดไปมาดูส่วนที่เราจะต้องมีใน Firebase
ภาพที่ 20 แสดงการ set up Firebase Authentication ให้ใช้ Sign-in method เฉพาะ Email/Password สร้าง User ได้ในแท็บ Users และ Firebase Authentication Built-In Sign-In อนุญาตให้สร้างเพิ่มจากหน้า Sign-In หากยังไม่มีชื่อ User ที่ป้อน ตรงนี้เราต้องจัดการลบทิ้ง หรือ setup Firebase API ควบคุม หรือ เขียนส่วน Sign-In ใหม่เองครับ
ภาพที่ 21 แสดงตัวอย่าง User ที่จะได้ Unique User UID ใช้ในการอนุญาต ถัดไปมาดู Rules ที่เราใช้ใน Project นี้
ภาพที่ 22 แสดง Rules ที่กำหนดว่า อนุญาตให้ Read และ อนุญาตให้ Write ได้อย่างไรบ้าง ในตัวอย่าง 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 ดังรูป
ภาพที่ 23 แสดง Hosting ของ Project firstapp-iot และเห็น Current release และ Deployed ซึ่งเป็นอันก่อนหน้า ในบทความต่อไปจะเป็น Arduino เชื่อมต่อเน็ต Wi-Fi 802.1x ตอนที่ 2
