Realtime App ง่ายขนาดนี้เลยเหรอ — NuxtJS + Firebase : ตอน 2 Coding
จากความเดิมที่ได้ทำการ set up project เริ่มต้นไปแล้ว คราวนี้จะยกตัวอย่าง Coding เพื่อใช้ในการศึกษาต่อยอด…สูดลมหายใจ เข้า ออก ๆ ๆ ๆ ถ้าพร้อมแล้วเริ่มเลยครับ
Concept : มีการทำงานกับ Firebase 2 แบบโดยจะแยกโครงสร้างข้อมูลเป็น 2 Collection คือ
1. ส่วนของ Input ต่าง ๆ จะทำงานโดย Update ค่าข้อมูลเดิม
2. ส่วนที่เป็น Input Text จะเก็บข้อมูลเพิ่มขึ้นเรื่อย ๆ (ในส่วนการแสดงผลจะแยกเป็น component ต่อไป)
- สร้างหน้าจอโดยใช้ Component ของ Vuetify (install ไปแล้วตอนสร้างโปรเจค Choose UI Framework) ในที่นี้ขอเขียน code ทับที่หน้า index ไปเลย
[pages]/index.vueพร้อมกับทำ Form Input Bindingsv-modelมี input = text, checkbox, radio, toggle switch, rating, slider, button …+action method เมื่อ submit form แล้วไปทำงานที่ addData()
2. Config การเชื่อมโยง Web app + Firebase โดยสร้างไฟล์ firebaseConfig.js ไว้ใน folder[plugins] ซึ่งค่าที่ใช้ในการ config จะได้มากจากตอนที่ 1 ข้อที่ 1 ซึ่งมีการเพิ่มเงื่อนไขตรวจสอบการประกาศค่าซ้ำ if(){...}และในบรรทัดสุดท้ายจะทำการ export const ออกไปใช้ร่วมกับ component อื่น ๆ ได้ export const db = firebase.firestore()
3. เพิ่มข้อมูล — กำหนดการทำงานให้กับ ปุ่มตกลง : binding ค่าตัวแปร → เก็บค่าตัวแปรเข้า Cloud Firestore ลองมาดู document ที่ firebase ให้มาก่อน
// === Example Document form Firebase ===
// Add a new document in collection "cities"
db.collection("cities").doc("LA").set({
name: "Los Angeles",
state: "CA",
country: "USA"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});เราจะปรับอะไรบ้างหล่ะ? ถ้าสังเกตดูจะเห็นว่า Code การเพิ่มข้อมูลสั้นมาก !!!db.collection("...").doc("...").set({..object..}) ดังนั้นสิ่งที่จะปรับคือชื่อโครงสร้างของ collection, doc และค่าของ object ที่มาจาก Form Input :)
การทำงานจะแบ่งเป็น 2 ขั้นตอนหลักคือ 1.เก็บข้อมูลจาก Input ต่าง ๆ และ 2.เก็บข้อมูล เฉพาะ Text + Server Timestamp แยกเป็น 2 Collection
!!! อ่ อย่าลืม import firebaseConfig.js และ firebase/app เข้ามาใช้งานด้วย
import {db} from ‘~/plugins/firebaseConfig.js’
import firebase from 'firebase/app'3.1 ทดสอบการเพิ่มข้อมูลได้เลย $ npm run dev ตอนนี้ได้ข้อมูลได้ 2 Collection และเมื่อกรอกข้อมูลเข้าไปใหม่ MyForm จะมีการ update ค่าข้อมูล ส่วน MyText จะมีการเพิ่ม Document ใหม่ไปเรื่อย ๆ



4. แสดงผล Realtime ก็อ่าน document อีกเช่นกัน ตัวอย่าง
// === Example Document form Firebase ===
db.collection("cities").doc("SF")
.onSnapshot(function(doc) {
console.log("Current data: ", doc.data());
});!!! อ่านข้อมูล Realtime มี Code ทำงานแค่ ===3=== บรรทัด OMG. !!!
เราจะปรับอะไรบ้างหล่ะ? ชื่อโครงสร้างของ collection, doc และค่าของ object เช่นเดิม +ปรับ function ให้เป็น Arrow Function => เพื่อให้เข้าถึงตัวแปรที่ประกาศ binding ไว้ได้
4.1 แสดงผลส่วนของ Form Input ต่าง ๆ โดยจะทำเป็น method แล้วเรียกใช้ตอน created(){ }
4.2 แสดงผลส่วนของ Input Text โดยจะแยกทำเป็น Component [components]/CollectionText.vue ซึ่งจัดการ เรียงลำดับข้อมูลตาม Timestamp
แล้วนำมาประกอบใช้งานใน index.vue (วาง code ให้ถูกที่นะครับ)
//...in template.......
<CollectionText />//...in script.......
import CollectionText from ‘~/components/CollectionText.vue’//...in export default.......
components: {
CollectionText
},
5. Run $ npm run dev โดยเปิด Chrome, Safari, Firefox พร้อมกันเลย :)

Concept การทำงานประมานนี้ สามารถนำไปต่อยอดได้อีกหลากหลายรูปแบบ เพียงแต่ในการทำงานระบบใหญ่ ๆ อาจจะเพิ่มเติมเรื่อง Coding Standard, Perfomance, Load, Security,…