Firebase และ Arduino ตอนที่ 1

บทความนี้ ตอนที่ 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