今天是組裝頁面的一天，也將 Firestore Database 的 CURD 先從文件學習到在 console 控制台中練習一遍。

溫馨提醒：以下內容看到的 showNotify 是我個人封裝使用的提示彈窗，並不是 Firebase 的功能。有需要的話，可以放入自己需要的內容或執行其他處理。

讀取資料

遵循著資料表的結構，依序是集合、文件與欄位。也就是說資料表裡面會有無數個文件(document)，當一調用collection 的時候就需要建立 Reference。 在 collection 的的部分則必須打上 Firestore Database 的集合名稱，這麼說有點抽象，可以看以下程式碼與文字說明。

1. 首先需引入 Firebase 的資料庫引用與讀取的函式
   在文件中有特別提到，引用這個動作無論資料是否存在都可以呼叫，即使呼叫也不會執行任何網路操作，因為實際上這個動作只是指向資料庫中的某個位置。

import { collection, getDoc, getDocs } from "firebase/firestore";
import { db } from "../firebase";

2. 在頁面渲染時就先呼叫讀取資料的函式

useEffect(() => {
    async function fetchListings() {
      try {
        // get reference
        const categoriesRef = collection(db, "categories");
      } catch (error) {
        console.log(error);
      }
    }
}, []);

3. 為讀取資料添加一些篩選值
   大部分時候，我們都不需要一次撈取大量的值，這時候我們可以在呼叫時就先定義一些預設的篩選值，讓資料呈現更加符合我們的期待。當然，要先引用篩選所需的函式：

import { limit, where, orderBy } from "firebase/firestore";
import { db } from "../firebase";

再進到讀取成功的 function 中呼叫篩選功能。

useEffect(() => {
    async function fetchListings() {
      try {
        // get reference
        const categoriesRef = collection(db, "categories");
        
        // create the query
        const data = query(
          categoriesRef,
          where("offer", "==", true),
          orderBy("timestamp", "desc"),
          limit(10)
        );
      } catch (error) {
        console.log(error);
      }
    }
}, []);

新增資料

添加數據到 Cloud Firebase 資料庫

1. 首先需引入 Firebase 的資料庫引用與新增函式

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

2. 新增要寫入資料時的 function，呼叫 addDoc 函式

async function onSubmit(e) {
    e.preventDefault();
    try {
      const docRef = await addDoc(collection(db, "資料表(集合)名稱"), 要新增的資料);
      console.log("Document written with ID => ", docRef.id);
      showNotify("success", "新增成功");
    } catch (error) {
      console.log("error => ", error);
    }
 };

3. 執行新增的函式成功後，除了在終端機可以看到變化，回到 console 控制台也可以看到該筆資料

刪除資料

1. 首先需引入 Firebase 的資料庫引用與刪除函式

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

2. 新增要寫入資料時的 function，呼叫 deleteDoc 函式

async function onSubmit(e) {
    e.preventDefault();
    try {
      const docRef = await deleteDoc(doc(db, "資料表(集合)名稱", 要刪除的資料ID));
      showNotify("success", "刪除成功");
    } catch (error) {
      console.log("error => ", error);
    }
};

小結

目前畫面實作先放上一小部分截圖如下圖。關於資料更新的方式今天尚未學習完成，明天會再持續測試！