Realtime App ง่ายขนาดนี้เลยเหรอ — NuxtJS + Firebase : ตอน 2 Coding

Attawit Chang
Nov 1 · 3 min read
Photo by Simon Rae on Unsplash

จากความเดิมที่ได้ทำการ set up project เริ่มต้นไปแล้ว คราวนี้จะยกตัวอย่าง Coding เพื่อใช้ในการศึกษาต่อยอด…สูดลมหายใจ เข้า ออก ๆ ๆ ๆ ถ้าพร้อมแล้วเริ่มเลยครับ

Concept : มีการทำงานกับ Firebase 2 แบบโดยจะแยกโครงสร้างข้อมูลเป็น 2 Collection คือ
1. ส่วนของ Input ต่าง ๆ จะทำงานโดย Update ค่าข้อมูลเดิม
2. ส่วนที่เป็น Input Text จะเก็บข้อมูลเพิ่มขึ้นเรื่อย ๆ (ในส่วนการแสดงผลจะแยกเป็น component ต่อไป)

  1. สร้างหน้าจอโดยใช้ Component ของ Vuetify (install ไปแล้วตอนสร้างโปรเจค Choose UI Framework) ในที่นี้ขอเขียน code ทับที่หน้า index ไปเลย [pages]/index.vue พร้อมกับทำ Form Input Bindings v-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 ให้มาก่อน

เราจะปรับอะไรบ้างหล่ะ? ถ้าสังเกตดูจะเห็นว่า 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 เข้ามาใช้งานด้วย

3.1 ทดสอบการเพิ่มข้อมูลได้เลย $ npm run dev ตอนนี้ได้ข้อมูลได้ 2 Collection และเมื่อกรอกข้อมูลเข้าไปใหม่ MyForm จะมีการ update ค่าข้อมูล ส่วน MyText จะมีการเพิ่ม Document ใหม่ไปเรื่อย ๆ

4. แสดงผล Realtime ก็อ่าน document อีกเช่นกัน ตัวอย่าง

!!! อ่านข้อมูล 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 ให้ถูกที่นะครับ)

5. Run $ npm run dev โดยเปิด Chrome, Safari, Firefox พร้อมกันเลย :)

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

Photo by Nghia Le on Unsplash

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade