DAY 12 施展地獄業火的魔法 - Firebase (1) Firestore Database - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 12

自我挑戰組

請問這是魔法嗎？前端轉職菜雞的修煉之路！系列第 12 篇

DAY 12 施展地獄業火的魔法 - Firebase (1) Firestore Database

17th鐵人賽

niniweb

2025-09-26 23:11:09

28 瀏覽

分享至

原本還在猶豫要不要發布這篇文章的，原因是這篇發下去，從今天開始，文章內可能會夾雜許多怨氣XD這篇文章執筆的當下是2024/11/30，專案原本還用已經在今年二月正式淘汰的 Create React App呢！所以文章內的示範會更換成 Next.js。回頭看看自己，覺得那時真的好菜，但就因為這樣，代表現在的我有所長進吧！真的很感謝當時的我，在爛公司裡還是選擇自強不息，選擇不盲目跟從爛主管的指示，真想回去抱抱當初每天上班都在生氣的自己嗚嗚QQ

施展地獄業火的魔法和 Firebase有什麼關係？
喔這一切都要從我的主管和我在這間公司的第一個專案說起：）

入職的第一天，主管就把我拉到會議室，劈頭就問：「前端能不能直接 fetch 資料庫？」
當下的我直接當機，難以理解這個問題背後的動機，以致於開始懷疑自己是不是學得不夠深？老師們怎麼都沒特別提過這件事？阿不是前後端基本上都分離了嗎？這樣不是有資安上的疑慮嗎？
我努力跳出這個自問漩渦，用力吐出幾個字：「基本上沒、沒有人會這樣做。」

過了幾天，他突然又問了一個問題，或是說，幾乎是肯定句：「一個心理測驗你可以多久寫出來？四天？最多四天。」
我不太懂自己到底是出於害怕還是生氣，用近乎發抖的語氣說：「蛤？沒有素材耶，我甚至不知道有幾題，你們有要搜集資料嗎？有的話是不是就需要後端跟資料庫？」

總之，配合設計師，我們在五天內趕完七個前端頁面，剩下的就是把資料存進資料庫中，但主管並沒有撥後端和資料庫給我啊！最終，我把腦子動到結訓前同學們就已經開始吹捧的 Firebase 上。

當時，我的同學們正在串接 Google 的第三方登入的 API，我以為功能僅僅如此，但自己接觸 Firebase 之後，才知道原來不只有第三方登入，還有 Firestore database、託管等等的服務，根本真真正正的孤身前端救世主。廢話不多說，快點使用 Firestore database 的功能吧～

施展地獄業火的魔法第一步：申請 Firebase 帳號
打開 Firebase 官網，點擊右上角的 Go to console 按鈕，然後使用某個 Google 帳戶登入。（喔不用懷疑，我就是用自己的 Google 帳號，用在公司專案：））
施展地獄業火的魔法第二步：建立專案
建立專案，將專案取個名字，我自己偏向取和專案一樣的名字，比較好辨識和管理。預設會將 Google Analytics 的功能打開，不需要也能關起來，然後點擊繼續。有使用 Google Analytics 的功能的話，需要再指定或建立一個 Google Analytics 的帳戶。最後點擊建立專案的按鈕。

施展地獄業火的魔法第三步：新增 Firebase SDK
進入專案後，先新增應用程式，我這邊選擇網頁，點擊</>按鈕

接著為應用取一個名稱，我一樣會取跟專案一樣的名字，然後點擊註冊應用程式。在這裡可以先點選要使用託管服務，但這裡我先跳過。接下來，回到專案，在終端機中輸入：

npm install firebase

在 lib 資料夾下建立 firebase.js，並將剛剛在 Firebase 上出現的一段配置代碼，如 API 金鑰和專案 ID，複製進 firebase.js 中，再進行一些改寫，加上初始化 Firestore：

import { initializeApp, getApps, getApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: '***************************',
  authDomain: '***************************',
  projectId: '***************************',
  storageBucket: '***************************',
  messagingSenderId: '***************************',
  appId: '*****************************',
  measurementId: '***************',
}

// 這行保證不會重複初始化 Firebase App
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp()

//初始化 Firestore
const db = getFirestore(app);

export { db }

施展地獄業火的魔法第四步：安全性規則
前往控制台，點擊左欄的建構欄位，再點擊底下的 Firestore Database。進入後，點擊建立資料庫的按鈕，選擇區域：多區域的 nam5 (United State)，也可以選擇其他的單一區域。接下來處理比較麻煩的安全性規則：
- 簡單的話，可以選擇測試模式，在這個模式下，所有人都能讀取和寫入資料，比較方便設置，但比較不推薦正式環境，而且這個效期只有 30 天，之後每 30 天都樣更新一次安全性規則。
- 最好選擇正式版模式，那就要自己書寫安全性規則，依照這個專案的需求，我的心理測驗是想要給所有使用者寫入，讀取、修改、刪除的功能皆不具備：
```
rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {

     // 允許未認證的使用者（即所有人）提交資料
     allow create: if true;

     // 禁止所有人讀取、修改、刪除
     allow read, update, delete: if false;  
    }
  }
}
```
更多的安全性規則可以多看看官方文件。

施展地獄業火的魔法第五步：初始化，並在專案中使用 Firestore Database

剛剛在第三步已經在 firebase.js 加上這幾行來進行初始化

//初始化 Firestore
const db = getFirestore(app);

export { db }

在要加上寫入功能的頁面加入 db 和其他需要的工具

"use client";

import { useState } from "react";
import { db } from "@/lib/firebase";
import { collection, addDoc } from "firebase/firestore";

export default function HomePage() {
const [newData, setNewData] = useState("");

const handleAddData = async () => {
  try {
    await addDoc(collection(db, "yourCollectionName"), {
      field: newData,
    });
    console.log("Document successfully written!");
    setNewData(""); // 清空輸入框
  } catch (e) {
    console.error("Error adding document: ", e);
  }
};

return (
  <main className="p-6">
    <h1 className="text-xl font-bold">Firebase Example</h1>
    <input
      type="text"
      value={newData}
      onChange={(e) => setNewData(e.target.value)}
      className="border p-2 mr-2"
    />
    <button
      onClick={handleAddData}
      className="bg-blue-500 text-white px-4 py-2 rounded"
    >
      Add Data
    </button>
  </main>
);
}

這樣大概就完成了，可以試試看資料是不是有真的寫入 Firestore 中。

剛完成串接 Firestore Database 的我，心中有股說不出的感謝、得意與憤怒 (?)，感謝有這項服務的存在，得意我的學習能力可以讓我一天搞定這一切，憤怒我主管前面的種種。但一切都算結束了吧？我懷著這個想法把專案交出去，萬萬沒想到真正讓我憤怒到不行的事還在後頭。