引言

很高興竟然來到第十二天！

在這一章節中
我們可以將書籍信息內容添加到我們的Firebase中
這是書單系統的關鍵功能
我們可以記錄下這些精彩的書籍名稱資訊跟閱後心得
能夠隨時查看和管理

無論是想要增加一本引人入勝的小說
一本啟發人心的自助書籍
或是一本充滿知識的技術手冊
這個功能都能輕鬆滿足我們的需求

讓我們逐步瞭解如何使用TypeScript 和 Vue 3 來實現這項功能
開始吧

關鍵字 addDoc

回到firebase.ts
引入Firebase的方法addDoc,doc

import { initializeApp } from "firebase/app";
import {
  getFirestore,
  collection,
  addDoc,
  doc,
} from "firebase/firestore";

底下再把方法包起來

export const createBookInfo = (info: any) => {
  return addDoc(bookRef, 
    info,
  );
};

建立元件表單

touch BookForm.vue

且引入我們前一步驟包好的方法並且呼叫它

<script setup lang="ts">

import { createBookInfo } from '../../src/firebase'

const bookInfo = {
    "bookTitle": "書籍資訊",
    "author": "Sunny Wu",
    "publisher": "Sunny Publishing",
    "publicationDate": "2023-09-26"
  };

createBookInfo(bookInfo);

再來看看我們的firebase有沒有成功收到資料

看來是成功的囉^___^
下一步就剩前端的事囉
切一個可以提交的表單HTML 還有UnoCSS