ใช้งาน Firebase Realtime Database ร่วมกับ Vue.js แบบไม่ต้องง้อ vuefire

ในการเขียนโปรแกรมด้วย Vue.js เพื่อใช้งาน Firebase Realtime Database นั้น นักพัฒนาอาจจะนิยมใช้ npm Package ที่ชื่อว่า vuefire ซึ่งเป็น Official Package ของ Vue.js ที่ใช้งานง่ายและสะดวก แต่เพื่อการเรียนรู้เราจะมาลอง Integrate Vue.js และ Firebase Realtime Database โดยใช้การสร้าง Subscription ใน Lifecycle Hooks ของ Vue.js โดยไม่ต้องง้อเจ้า vuefire กันนะครับ

ข้อจำกัดการใช้งาน Firebase Realtime Database แบบฟรี

Firebase Account

เราสามารถใช้ Google Account เพื่อสมัคร Firebase Account และสร้าง Firebase Project ได้ที่ https://console.firebase.google.com

หลังจากสร้าง Firebase Project ก็สามารถดูค่า Configuration เพื่อใช้สำหรับการตั้งค่าในขั้นตอนต่อไป ได้จากการคลิ๊กตามลำดับที่ 1.และ2.

เตรียมไฟล์สำหรับเขียนโปรแกรม

Path

+-src
|   |-Counter.vue
|   |-firebase.js

พิมพ์คำสั่งที่ Terminal

# ติดตั้ง package
npm install @firebase/app --save
npm install @firebase/database --save

Counter Component

เริ่มต้นด้วยการโค้ด Counter Component ซึ่งจะทำการแสดงค่า Reactive State ชื่อ counter พร้อมกับปุ่มที่ทำการ Increment ค่า counter ไปเรื่อยๆ

ใน Flow การทำงานของ Vue.js เมื่อเราต้องการ Update State เราก็จะกระทำกับตัว State นั้นโดยตรง ส่วนอื่นๆ ก็จะเกิดการ Reactive ตามมาเองครับ

ไฟล์ src/Counter.vue

::: v-pre

<p>Counter: {{ counter }}</p>
<button @click="updateCounter">Update</button>

:::

export default {
    data() {
        return {
            counter: 1
        }
    },

    methods: {
        updateCounter() {
            this.counter ++
        }
    }
}

Module สำหรับ Firebase Application

เพื่อความสะดวกในการเรียกใช้ Instance ของ Firebase Application จากไฟล์ Component แต่ละไฟล์ เราจึงแยกเขียน โค้ดในส่วนนี้ออกเป็น Module ซะเลย

ไฟล์ src/firebase.js

import firebase from '@firebase/app'
import '@firebase/database'

// ค่า minimum configuration คือ `apiKey` และ `databaseURL`
const config = {
  apiKey: 'AIzaSyBEqQBxMg3M...',
  databaseURL: 'https://...'
}

// คืนค่า firebase application ที่อาจถูก instantiate แล้วหรือ instantiate ใหม่
export default firebase.apps[0] || firebase.initializeApp(config)

Integrate Firebase กับ Vue.js Component

Component ที่ต้องการใช้งาน Instance ของ Firebase Application เราก็จะทำการ Import Module และจะใช้ตัว Instance ดังกล่าวในการสร้างตัวแปรเพื่อเข้าถึง Collection ชื่อ users ตามลำดับ

เพื่อความง่ายเราจะเชื่อมต่อกับ Root Node โดยกำหนดชื่อว่า counter ครับ

ไฟล์ src/Counter.vue

import firebaseApp from './firebase'

export default {
    created() {
        // สร้าง reference ไปยัง counter ซึ่งเป็น root node ของ reatime database
        this.dbRef = firebaseApp.database().ref('counter')
    },

    mounted() {
        // สร้าง subscription สำหรับติดตามการเปลี่ยนแปลงของข้อมูล
        this.dbRef.on('value', ss => {
            console.log(ss.val())
        })
    },

    beforeDestroy() {
        // ยกเลิก subsciption เมื่อ component ถูกถอดจาก dom
        this.dbRef.off()
    }
}

Update Realtime Database

ใน Flow การทำงานของ Firebase เมื่อเราต้องการ Update State เราจะใช้วิธี Update ไปยังตัว Realtime Database เมื่อ Realtime Database เกิดการเปลี่ยนแปลง จะเกิด Callback มาที่ Method ที่เป็น Argument ของ .on('value') เราจึงเพิ่มโค้ดเพื่อ Update State ที่ Method นี้แทน

ในขั้นตอนสุดท้ายเพี่ยงแค่ปรับโค้ดตามตัวอย่างด้านล่างก็เป็นอันเสร็จพิธีครับ

ไฟล์ src/Counter.vue

export default {
    methods: {
        updateCounter() {
            // this.counter ++
            this.dbRef.set(this.counter + 1)
        }
    },

    mounted() {
        this.dbRef.on('value', ss => {
            // console.log(ss.val())
            this.counter = ss.val()
        })
    }
}

つづく