Vue to do ជាមួយ google firebase

យើងបានសិក្សា Vue custom To Do App ប្រើជាមួយ Array ដើម្បីផ្ទុកទិន្ន័យ ប៉ុន្តែយើងផ្ទុកទិន្ន័យជាមួយ google firebase

បង្កើត project នៅក្នង Firebase

ដោយចូលក្នុងវែបសាយ firebase

វាមានបីសម្រាប់ឲ្យជ្រើសរើសមានដូចជា Ios, android and web ។ ដូចនេះយើងធ្វើជាមួយវែបសូមជ្រើសរើសយក web។ រួចហើយដាក់ឈ្មោះឲ្យ app យើងអាចដាក់ឈ្មោះដូចទៅនឹងឈ្មោះ project។

បន្ទាប់ពីយើងបានដាក់ឈ្មោះឲ្យវាហើយចុច register រួចហើយវាឲ្យភ្ជាប់ជាមួយ project របស់យើង (configure)

configure firebase ជាមួយ Vue

- យើង install npm

npm install firebase

បង្កើត folder មួយឈ្មោះថា firebase នៅក្នុង src ហើយបង្កើត file មួយឈ្មោះថា index.js។ បន្ទាប់មក copy code របស់ firebase ទៅកាន់ file index.js របស់យើង

សូមទៅកាន់វែបសាយ firebase វិញហើយចុច continue to console

យើងចូលមើល document ដើម្បីការណែនាំធ្វើ firestore database។

ចុចលើ buil => firestore => get started រួចហើយហូសមកក្រោម។ នៅចំណុច Set up your development environment សូមជ្រើសរើសយក web modular API ។ ដោយយើងធ្វើទៅតាមការណែនាំរបស់វា

សូម copy នៅក្រោម initializeApp នៃ vue

import { getFirestore } from "firebase/firestore";

copy Initialize ដាក់នៅក្រោម initializeApp

const db = getFirestore(app)

Create Database

ចូល buil => firestore Database => create database

ចុច next => យក start in test mode គឺសម្រាប់ឲ្យយើងធ្វើការសាកល្បង => create

វាចូលដល់ database ហើយ។ ចំណុច Start collection គឹជាការដាក់ឈ្មោះឲ្យ database

យើងបញ្ចូលទៅទិន្ន័យទៅកាន់ firebase ទៅតាម array របស់យើង

{
    id: 'id1',
    article: 'String',
     done: boolean
    }

Read data

ដោយយើងចូលទៅក្នុងវែបសាយ firebase វិញរួចហើយយក Read data => Get data រួចហើយអូសមកក្រោមដល់ Get all documents in a collection ប្រើជាមួយ vue

យើងហៅ db ពី index.js មកប្រើ

onMounted ដាក់នៅក្នុង ref ។ វាគឺជា lifecycle hook នៃ Vue សម្រប់ពពួក fetching data ឬ initialzing third-party libraries

<script setup>
 //MARK: Import
 import Card from '@/components/Card.vue';
 import { ref, onMounted } from 'vue';
 import { collection, getDocs } from "firebase/firestore";
 import {db} from '@/firebase'

យើងធ្វើការតេស onMounted ថាតើវាដើរឬក៏អត់

<script setup>
 //MARK: Import
 import Card from '@/components/Card.vue';
 import { ref, onMounted} from 'vue';
 import { collection, getDocs } from "firebase/firestore";
 import {db} from '@/firebase'


 //MARK: To Do
 const todos = ref([])

//MARK: Read data
onMounted(async ()=>{
    const querySnapshot = await getDocs(collection(db, "todos"));
    const fbTodos = []
    querySnapshot.forEach((doc) => {
    //console.log(doc.id, " => ", doc.data());
      const todo = {
        id: doc.id,
        article: doc.data().article,
        done: doc.data().done
      }
      fbTodos.push(todo)   
  })
  todos.value = fbTodos
})
</script>

ការ Get data ខាងលើនេះបានដើរហើយ ប៉ុន្តែវាមិន real-time នៅពេលយើង update ទិន្ន័យទៅកាន់ Database យើងត្រូវ refresh page ទើបវាលូតមក។ ប៉ុន្តែនៅខាងនេះ Get data ដោយ realtime

Get data real-time update

import { collection, getDocs } from "firebase/firestore"; ប្តូរមក import { collection, onSnapshot} from "firebase/firestore";

សម្រាប់ q ផ្លាស់មក collection(db, "todos")

 //MARK: Import
 import Card from '@/components/Card.vue';
 import { ref, onMounted} from 'vue';
 import { collection, onSnapshot} from "firebase/firestore";
 import {db} from '@/firebase'
 
 //MARK: To Do
 const todos = ref([])

//MARK: Get data real-time update
onMounted(async ()=>{
  onSnapshot(collection(db, "todos"), (querySnapshot) => {
  const fbTodos = []
    querySnapshot.forEach((doc) => {
            const todo = {
          id: doc.id,
          article: doc.data().article,
          done: doc.data().done
        }
        fbTodos.push(todo)
    })
    todos.value = fbTodos
  })
})
</script>

---

Add data

Add a document

import { collection, onSnapshot, addDoc} from "firebase/firestore";

//MARK: Add data
const newArticleTodo = ref()
const addTodo = ()=>{
    addDoc(collection(db, "todos"), {
      article: newArticleTodo.value,
      done: false
    }) 
    newArticleTodo.value = ''
}

ចំណាំ៖ កែពីកូដ //MARK: Add To Do

---

Delete data

import { collection, onSnapshot, addDoc, doc, deleteDoc} from "firebase/firestore";

ចំពោះ "DC" យើងប្តូរមក parameter id

//MARK: Delete data
const deleteTodo = id =>{
  deleteDoc(doc(db, "todos", id))
}

---

Mark toggle button

import { collection, onSnapshot, addDoc, doc, deleteDoc, updateDoc} from "firebase/firestore";

//MARK: Mark Done
const toggleBtn = id =>{
    const index = todos.value.findIndex(todo =>todo.id == id)
    updateDoc(doc(db, "todos", id), {
    done: !todos.value[index].done
  })
  //todos.value[index].done //REMARK: if done: true is true but done: false is false
}

---

កូដពេញ

<template>
    <div class="contain">
        <form class="form-input" @submit.prevent="addTodo">
            <input 
            v-model="newArticleTodo"
            type="text" placeholder="Add todo">
            <button 
            :disabled="!newArticleTodo"
            class="btn-gb">Add</button>
        </form>

        <!--MARK: Custom Card-->
        <card 
            v-for="todo in todos"
            :class="{sucess: todo.done}"
        >
            <div 
                :class="{line: todo.done}"
                class="txt">{{ todo.article }}</div>
            <div class="btn-box">
                <button
                    @click="toggleBtn(todo.id)"
                    :class="todo.done? 'btnSucess': 'btn-check' " 
                    class=" ">✓</button>
                <button
                @click="deleteTodo(todo.id)" 
                class="btn-cross">✗</button>
            </div>
        </card>
    </div>
</template>

<script setup>
 //MARK: Import
 import Card from '@/components/Card.vue';
 import { ref, onMounted} from 'vue';
 import { collection, onSnapshot , addDoc, doc, deleteDoc, updateDoc} from "firebase/firestore";
 import {db} from '@/firebase'

 //MARK: To Do
 const todos = ref([])

//MARK: Get data real-time update
onMounted(async ()=>{
  onSnapshot(collection(db, "todos"), (querySnapshot) => {
  const fbTodos = []
    querySnapshot.forEach((doc) => {
            const todo = {
          id: doc.id,
          article: doc.data().article,
          done: doc.data().done
        }
        fbTodos.push(todo)
    })
    todos.value = fbTodos
  })
})
//MARK: Add data
const newArticleTodo = ref()
const addTodo = ()=>{
    addDoc(collection(db, "todos"), {
      article: newArticleTodo.value,
      done: false
    }) 
    newArticleTodo.value = ''
}
//MARK: Delete data
const deleteTodo = id =>{
  deleteDoc(doc(db, "todos", id))
}
//MARK: Mark Done
const toggleBtn = id =>{
    const index = todos.value.findIndex(todo =>todo.id == id)
    updateDoc(doc(db, "todos", id), {
    done: !todos.value[index].done
  })
  //todos.value[index].done //REMARK: if done: true is true but done: false is false
}
</script>


<style>
body{
  background-color: rgba(0, 0, 0, 0.69);
}
.contain{
  width: 500px;
  margin: 0 auto;
}
.form-input{
  padding: 8px;
}
.form-input input{
  padding: 10px;
  border-radius: 8px;
  width: 79%;
  margin-right: 10px;
  border: 1px solid;
  font-size: 18px;
}
.form-input button{
  /* padding: 10px; */
  font-size: 16px;
  padding: 10px 20px 10px 20px;
  border: 0px;
  background-color: #4b7bec;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}
.btn-gb{
  background-color: red;
}
.btnSucess{
  background-color: #4834d4;
  color: white;
}
/* MARK Done */
.sucess{ /* Change BG*/
  background-color: #7ed6df;
  color: rgb(255, 255, 255);
}
.btnSucess{
  background-color: #4834d4;
  color: white;
}
.line{
  text-decoration: line-through;
  text-decoration-color: rgb(164, 176, 190);
}
</style>

មេរៀន Vue custom To Do App

github