Skip to main content

การใช้งาน Firebase Realtime Database ด้วย ReactJs

สวัสดีครับ ในบทความนี้จะเป็นบทความแรกที่เขียนเกี่ยวกับ ReactJs  และ Firebase ครับ เนื่องจากบทความที่ผ่าน ๆ มาจะเกี่ยวกับการใช้งาน JQuery หรือ PHP เป็นส่วนใหญ่ครับ

ในบทความนี้จะเป็นการแนะนำตัวอย่างการใช้งานเบื้องต้น จะไม่ได้อธิบายถึง  คำสั่ง หรือ หลักการทำงานต่าง ๆ  ของคำสั่ง เช่น state , props หรือ component ต่าง ๆ (เพราะผมก็ไม่รู้เหมือนกันครับ 555) สามารถหาดูเพิ่มเติมใด้จากเว็บอื่น ๆ เนื่องจากมีท่านอื่น ๆ อธิบายใว้ดีมากแล้วครับ

1.ติดตั้ง Node Js

ไปที่ https://nodejs.org/en/  โหลดตัวที่เป็น LTS  ก็ได้ครับ จากนั้นติดตั้งให้เรียบร้อยครับ

2.เมื่อติดตั้ง Node Js เรียบร้อยแล้ว

เปิด Command Prompt แล้วพิมพ์ คำสั่ง npm install -g create-react-app เพื่อติดตั้ง React

เมื่อติดตั้งเรียบร้อยจากนั้นพิมพ์คำสั่ง create-react-app todo

รอสักครู่ กำลังติดตั้ง
เมื่อติดตั้งเรียบร้อย

จากนั้นพิมพ์คำสั่ง cd todo เพื่อเปลี่ยน Directory ไปยัง Folder todo ที่เราติดตั้ง React เอาไว้

พิิมพ์คำสั่ง npm install firebase –save เพื่อติดตั้ง Firebase


เมื่อติดตั้ง firebase เรียบร้อยแล้ว พิมพ์คำสั่ง npm start เพื่อ เริ่มต้นการทำงานของ React JS

หากไม่มีอะไรผิดพลาด  React จะเปิด หน้าเว็บ http://localhost:3000/ ขึ้นมาอัตโนมัติครับ ถือว่าเสร็จสิ้น
ขั้นตอนการ Install ReactJs ครับ

3.Firebase Realtime Database

ไปที่ https://console.firebase.google.com  ต้อง Login ด้วย Gmail ก่อนนะครับ

3.1 การเพิ่มโครงการ

คลิกที่เพิมโครงการ

ระบุชื่อโครงการ ตัวอย่างใช้ขื่อว่า todo

คลิกปุ่มสร้างโครงการ

3.2 คัดลอกค่า Config ของ Firebase เพื่อเชื่อมต่อกับ React Js

เมื่อสร้างโครงการ todo เรียบร้อยแล้ว ให้คลิกที่ ปุ่ม </>

ให้ทำการ คัดลอกค่า ที่อยู่ในตัวแปร var config ของ firebase  เก็บไว้ก่อนครับ (เราจะนำค่านี้ไปใส่ใน React อีกครั้งครับ)

3.3 การสร้างฐานข้อมูล Realtime Database

คลิกที่เมนู database ด้านซ้ายมือ
จากนั้น เลือนหา คำว่า Realtime database คลิกปุ่ม สร้างฐานข้อมูล

เลือก เริ่มต้นในโหมดทดสอบ

หากเรียบร้อยแล้ว firebase จะแสดง หน้า ฐานข้อมูล Realtime database ดังภาพ

เขียน Code ด้วย Visual Studio Code
หากใครยังไม่มี สามารถไป Download ได้ที่ https://code.visualstudio.com/

สร้างไฟล์ firebase.js ไว้ที่ Folder todo/src/firebase.js  แล้วให้นำค่า config ของ firebase ที่คัดลอกไว้จาก ข้อ 3.2 ด้านบน มาใส่แทนค่าตัวอย่างครับ

ต่อมาเราจะใช้ Bootstrap 4 มาช่วยในการแสดงผลให้สวยงามมากยิ่งขึ้น
ไปที่ Folder todo/public/index.html

จากนั้นเพิ่ม Script bootstrap 4  ตัวอย่าง Code หน้า index.html

จากนั้นเราจะทำการแก้ไขไฟล์ todo/src/app.js

ตัวอย่างการแสดงผล  ตอนนี้เราก็ได้สร้างหน้า Ui สำหรับแสดงผลเรียบร้อยแล้ว แต่ยังทำอะไรไม่ได้ต้องมาเขียน ส่วนของการเชื่อมต่อ Firebase กันต่อครับ

มาปรับแก้ไฟล์ App.js กันต่อแต่คราวนี้เราจะมาเพิ่มส่วนของการเชื่อมต่อกับ Firebase กัน
เพิ่ม การ import firebase

เพิ่ม function  componentDidMount

แก้ไข function handleSubmit

แก้ไข function handleUpdate  , itemUpdate และ removeItem

หากไม่มีอะไรผิดพลาด จะสามารถ เพิ่ม แก้ไข และ ลบข้อมูลได้

เมื่อมาดูที่ Firebase Console ก็จะเห็นว่ามีข้อมูลที่เราได้เพิ่มไว้เข้ามาแล้วครับ

ตัวอย่างไฟล์ App.js แบบเต็ม ๆ