Vue 2 + Firebase Realtime Database ฉบับ 101

Vue 2 + Firebase สำหรับมือใหม่โดยเฉพาะ

อันดับแรกก่อนสร้าง Project ต้องติดตั้งอะไรบ้าง

• Node.js เอาไว้รัน js
• Visual Studio Code เอาไว้เขียนโค้ด

จากนั้นก็ติดตั้ง สิ่งสำคัญที่ใช้ขึ้น Project Vue

npm install -g yarn 
npm install -g vue-cli

จากนั้น สร้าง project ด้วยคำสั่ง

vue init webpack <ชื่อโปรเจค> //ตัวอย่างเช่น vue init webpack my-project

จะมีขึ้นให้เราใส่ข้อมูลต่างๆ แต่ถ้าเราไม่ใส่อะไรเลยก็ Enter รัวๆไปเลย

cd my-project               // เข้าไปที่โปรเจค
code .                      // เปิด editor ขึ้นมา
yarn add firebase           // เพิ่ม firebase เข้ามาใน project
yarn dev                    // รัน project

จากนั้นไปสร้างโปรเจค firebase ไว้รอเลย

ไปที่เว็บของ firebase แล้วสร้างโปรเจคขึ้นมา

เมื่อสร้างเสร็จแล้วไปเปิดใช้งานของ Realtime Database กันเลย

เพื่อให้เราสามารถใช้งาน database ได้โดยไม่ติด Authorize ใดๆ เราต้องไปกำหนด Rules หรือ กฏของการใช้งานก่อน โดยแก้ให้เป็นดังต่อไปนี้

{
  "rules": {
    ".read": true,
    ".write": true 
  }
}

เสร็จแล้ว พร้อมไป Coding กันเลย

ลุยๆ Code

ไปที่ ไฟล์ src/App.vue แล้วลบบางส่วนออกไปให้เหลือดังนี้

งานใหญ่รอเราอยู่ที่ไฟล์ src/components/HelloWorld.Vue โดยโจทย์ที่จะลองทำเป็นการทำ สมุดโทรศัพท์แบบง่ายกันนะ

อันดับแรกต้อง import firebase เข้ามาใน project ก่อนเลย

import * as firebase from 'firebase'
var config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',      
  projectId: '',
  storageBucket: ',
  messagingSenderId: ''
}
firebase.initializeApp(config)

แล้วเอา key จาก firebase มาใช้

จากนั้นเราก็ สร้าง Reference ให้ออนไลน์ต่อกับ firebase

var database = firebase.database()
var contactRef = database.ref('/contacts')

อันนี้แค่ สร้าง Ref ไว้ แต่ยังไม่ให้มันเป็น realtime

การทำ realtime ต้องมีตัวแปรมารองรับก่อนว่าเมื่อ data เปลี่ยนแล้วจะให้เอา ข้อมูลจาก db ไปไว้ที่ไหน

data () {
  return {
    contacts: {},
  }
},

จากนั้นก็ทำให้ db นั้น realtime โดยเอาไว้ใน mounted ซึ่ง mounted จะทำงานก็ต่อเมื่อ DOM สร้างเสร็จสิ้น

mounted () {
  contactRef.on('value', (snapshot) => {
    this.contacts = snapshot.val()
  })
}

ตรง ‘value’ นี้คือการบอกว่าเมื่อ db ส่วนที่ ref ไว้ หรือ key contacts มีการ insert ,update หรือ delete จะให้มา trigger ที่ function นี้ และ เอาผลลัพธ์ ที่ ได้ ไปเก็บไว้ที่ ตัวแปร contacts ใน data ที่สร้างมาก่อนหน้า (ต้อง เป็น snapshot.val() ด้วยนะ ตรงนี้สำคัญ)

เย้ realtime แล้ว มาทำ insert data กันเถอะ

เขียนส่วนการแสดงผล ไว้ใน template

<div>
  <input type="text" v-model="name" placeholder="NAME">
  <input type="text" v-model="tel" placeholder="TEL">
  <button @click="insertToContact(tel, name)">Add</button>
</div>

“v-model” คือ การเอาค่า จาก input ไปผูกไว้กับตัวแปร เช่น name และ tel ตามตัวอย่าง

“@click” คือ เป็นการรับ click event แล้วไปเรียก method insertToContact และส่งค่า tel กับ name ไปที่ method

ต้องเพิ่มตัวแปรใน data ตามที่ v-model ใช้อีก 2 ตัว คือ name และ tel ดังนี้

data () {
  return {
    contacts: {},
    tel: '',
    name: '',
  }
},

method นั้นเขียนดังนี้

insertToContact (tel, name) {
  let data = {
    tel: tel,
    name: name
  }
  contactRef.push(data)
  this.tel = ''
  this.name = ''
}

ส่วนของ contactRef.push(data) คือการ insert เข้า DB ส่วน this.tel = ‘’ this.name = ‘’ คือการ ล้างค่าไปหลังจาก insert เสร็จแล้ว

แล้วเราจะรู้ได้ไงว่าค่าเข้า db แล้ว ง่ายๆก็คือเข้าเว็บ firebase แล้วดู หรือ เขียน code ซะ

<ul :key="key" v-for="(contact, key) in contacts">
  <li>
    {{contact.name}} : {{contact.tel}}
  </li>
</ul>

v-for คือการวน loop แสดงผล ซึ่งสามารถ loop ได้ทั้ง array และ object เช่น v-for=”(contact, key) in contacts” ซึ่งประกอบด้วยกัน 2 ส่วนคือ(contact, key) และ contacts ที่ขั้นด้วย in

ส่วนแรกคือตั้งชื่อตัวแปรที่จะเอามาใช้ในแต่ละ loop โดย contact คือชื่อใหม่ ตั้งว่าอะไรก็ได้ แต่ key คือ ถ้า data เป็น array ค่าที่ได้จะเป็น index ของ array นั้น แต่ถ้า data เป็น object ค่าที่ได้ จะเป็น key ของ object นั้น

ส่วนที่ 2 คือ ตัวแปรที่เราจะเอามา วน loop นั่นเอง

เหนื่อยยัง? ถ้ายัง ต่อเลย

ทีนี้เราก็แสดงผลได้แล้ว แล้วถ้าเราอยากลบข้อมูลล่ะ ทำไงดี ไม่ยากๆ ตาม code ต่อไปนี้

<ul :key="key" v-for="(contact, key) in contacts">
  <li>
    {{contact.name}} : {{contact.tel}}
    <button @click="deleteContact(key)">Delete</button>
  </li>
</ul>

เพิ่ม ปุ่ม Delete เข้าไป แล้วเมื่อ click ให้เรียก method deleteContact โดยส่ง key เข้าไปใน method ด้วย

deleteContact (key) {
    contactRef.child(key).remove()
}

contactRef.child(key) คือการเลือกที่จะกระทำใดๆ ที่ data ตัวนั้น เนื่องจาก data ที่ push เข้าไปใน db จะเป็นรูปแบบ key: value เมื่อเลือก child ที่จะกระทำแล้วก็ remove ได้เลย แค่นั้นเสร็จสิ้น

Insert ได้ Remove ได้ เหลือ แค่ แก้ไขแล้วนะ

อันนี้จะยากหน่อย เพราะจะต้องเอาค่าเก่ามาใช้ และ แก้ไข ไปที่ child เดิมจึงทำเพิ่มจากเดิมอีกเยอะเลยตาม code ข้างล่างนี้

<ul :key="key" v-for="(contact, key) in contacts">
  <li v-if="updateKey === key">
    <input type="text" v-model="updateName" placeholder="NAME">
    <input type="text" v-model="updateTel" placeholder="TEL">
    <button @click="updateContact(updateTel, updateName)">Save</button>
  </li>
  <li v-else>
    {{contact.name}} : {{contact.tel}}
    <button @click="setUpdateContact(key, contact)">Update</button>
    <button @click="deleteContact(key)">Delete</button>
  </li>
</ul>

ในนี้มีการสร้างการแสดงผล 2 ชุด โดยมี เงื่อนไข v-if เป็นสิ่งที่คอยเลือกว่าจะทำงานอันไหน โดยเงื่อนไขว่า ถ้า updateKey เท่ากับ key จะให้แสดงผลที่ li แรก โดย li ที่มี v-else จะไม่ทำงาน โดย updateKey จะถูกเปลี่ยน เมื่อ clickปุ่ม update และส่ง key เข้าไป กำหนดค่า updateKey นั่นเอง

และมีตัวแปรต่างๆเพิ่มเข้ามาอีกเพียบเลยดังนี้

data () {
  return {
    contacts: {},
    tel: '',
    name: '',
    updateTel: '',
    updateName: '',
    updateKey: ''
  }
},

แถมยังเพิ่ม method มาอีก 2 อันตามต่อไปนี้

setUpdateContact (key, contact) {
  this.updateKey = key
  this.updateTel = contact.tel
  this.updateName = contact.name
},
updateContact (tel, name) {
  contactRef.child(this.updateKey).update({
    tel: tel,
    name: name
  })
  this.updateKey = ''
  this.updateTel = ''
  this.updateName = ''
},

methods setUpdateContact เป็นการเตรียม data มาเพื่อที่จะแก้ไข

ส่วน updateContact คือการนำ data ที่ได้จากการ แก้ไขไป update ที่ database และการทำงานจะเหมือนกับการลบเลย เพียงแต่จะมีการ เพิ่ม data ที่จะแก้ไขเข้าไปด้วย และหาก data ที่มีอยู่มีมากกว่า key tel และ name เช่น

{
  tel: 0805554444,
  name: ttt,
  address: BKK
}

การแก้ไขที่ส่งไปตามตัวอย่างจะทำงาน update แค่ key ที่ส่งไปเท่านั้น จะไม่มีการยุ่งเกี่ยวกับ address เลย

แต่จะมีการแก้ไขข้อมูลอีกอย่างคือการ set() วิธีนี้จะเป็นการ แก้ไข ทุกอย่างในนี้ให้เป็นไปตามค่าใหม่ที่ส่ง

จบแล้ววว insert update remove กับ firebase realtime database