整合 Firebase 與 Next.js 應用程式

1. 事前準備

在本程式碼研究室中，您將瞭解如何整合 Firebase 與名為 Visit Eats 的 Next.js 網頁應用程式，這是一個提供餐廳評論的網站。

友善飲食網頁應用程式

完整的網頁應用程式提供多項實用功能，可讓您瞭解 Firebase 如何協助您建構 Next.js 應用程式。這些功能包括：

  • 自動建構及部署：每當您推送至已設定的分支版本時，這個程式碼研究室都會使用 Firebase App Hosting 自動建構及部署 Next.js 程式碼。
  • 登入及登出：已完成的網頁應用程式可讓您使用 Google 帳戶登入及登出。完全透過 Firebase 驗證管理使用者登入與持續性。
  • 圖片：完成的網頁應用程式可讓已登入的使用者上傳餐廳圖片。圖片資產會儲存在 Cloud Storage for Firebase 中。Firebase JavaScript SDK 提供上傳圖片的公開網址。然後，系統會將這個公開網址儲存在 Cloud Firestore 中的相關餐廳文件。
  • 評論：完成的網頁應用程式可讓登入的使用者張貼包含星級評等和文字訊息的餐廳評論，評論資訊會儲存在 Cloud Firestore 中。
  • 篩選器：完成的網頁應用程式可讓已登入的使用者根據類別、位置和價格篩選餐廳清單。您也可以自訂使用的排序方法。系統會從 Cloud Firestore 存取資料，並根據使用的篩選器套用 Firestore 查詢。

事前準備

  • GitHub 帳戶
  • 瞭解 Next.js 和 JavaScript

課程內容

  • 如何搭配 Next.js App Router 使用 Firebase 和伺服器端轉譯。
  • 如何在 Cloud Storage for Firebase 中保留映像檔。
  • 如何在 Cloud Firestore 資料庫中讀取及寫入資料。
  • 如何搭配 Firebase JavaScript SDK 使用 Google 帳戶登入。

事前準備

  • Git
  • 最新的 Node.js 穩定版
  • 您選擇的瀏覽器，例如 Google Chrome
  • 使用程式碼編輯器和終端機的開發環境
  • 用於建立及管理 Firebase 專案的 Google 帳戶
  • 能將 Firebase 專案升級至 Blaze 定價方案

2. 設定開發環境和 GitHub 存放區

本程式碼研究室提供應用程式的範例程式碼集，並依賴 Firebase CLI。

建立 GitHub 存放區

如需程式碼研究室的原始碼，請前往 https://github.com/firebase/friendlyeats-web。這個存放區包含多個平台的範例專案。不過，本程式碼研究室只會使用 nextjs-start 目錄。請記下下列目錄：

* `nextjs-start`: contains the starter code upon which you build.
* `nextjs-end`: contains the solution code for the finished web app.

將 nextjs-start 資料夾複製到自己的存放區：

  1. 使用終端機，在電腦上建立新資料夾並切換至新目錄：
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. 使用 giget npm 套件僅擷取 nextjs-start 資料夾：
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install
  3. 使用 Git 在本機追蹤變更：
    git init

git commit -a -m "codelab starting point"

git branch -M main
  4. 建立新的 GitHub 存放區：https://github.com/new。自訂名稱。
    1. GitHub 將提供新的存放區網址，形式類似 https://github.com//.git 或 git@github.com:/.git。請複製這個網址。
  5. 將本機變更推送至新的 GitHub 存放區。執行下列指令，將 預留位置替換為存放區網址。
    git remote add origin <your-repository-url>

git push -u origin main
  6. 您現在應該會在 GitHub 存放區中看到範例程式碼。

安裝或更新 Firebase CLI

執行下列指令，確認您已安裝 Firebase CLI，且版本為 v13.9.0 以上版本：

firebase --version

如果看到的版本較低，或是您未安裝 Firebase CLI，請執行安裝指令：

npm install -g firebase-tools@latest

如果您因為權限錯誤而無法安裝 Firebase CLI，請參閱 npm 說明文件或使用其他安裝選項。

登入 Firebase

  1. 執行下列指令，登入 Firebase CLI：
    firebase login
  2. 根據您要 Firebase 收集的資料，輸入 Y 或 N。
  3. 在瀏覽器中選取 Google 帳戶，然後按一下「Allow」。

3. 設定 Firebase 專案

在本節中，您將設定 Firebase 專案，並將 Firebase 網頁應用程式與該應用程式建立關聯。您也需要設定範例網頁應用程式使用的 Firebase 服務。

建立 Firebase 專案

  1. 在 Firebase 控制台，按一下「新增專案」。
  2. 在「輸入專案名稱」文字方塊中，輸入 FriendlyEats Codelab (或您選擇的專案名稱)，然後按一下「繼續」。
  3. 在「確認 Firebase 計費方案」互動視窗中，確認方案為「Blaze」，然後點選「確認方案」
  4. 在本程式碼研究室中，您不需要使用 Google Analytics，因此請關閉「為這項專案啟用 Google Analytics」選項。
  5. 按一下 [Create Project]。
  6. 等待專案佈建完成，然後按一下「繼續」。
  7. 在 Firebase 專案中前往「專案設定」。請記下專案 ID，後續步驟將會用到。這個專屬 ID 是系統識別專案的方式，例如在 Firebase CLI 中。

升級 Firebase 定價方案

如要使用 App Hosting，您的 Firebase 專案必須採用 Blaze 定價方案，這代表專案已與 Cloud Billing 帳戶建立關聯。

  • Cloud Billing 帳戶需要付款方式，例如信用卡。
  • 如果您是 Firebase 和 Google Cloud 新手，請確認您是否符合取得 $300 美元的抵免額和 Cloud Billing 免費試用帳戶的資格。

如要將專案升級至 Blaze 方案，請按照下列步驟操作：

  1. 在 Firebase 控制台中，選取升級方案。
  2. 在對話方塊中選取 Blaze 方案，然後按照畫面上的指示將專案連結至 Cloud Billing 帳戶。
    如需建立 Cloud Billing 帳戶，您可能需要返回 Firebase 控制台的升級流程。

在 Firebase 專案中新增網頁應用程式

  1. 前往 Firebase 專案中的「專案總覽」，然後按一下 e41f2efdd9539c31.png「網路」。

    如果專案中已註冊應用程式，請按一下「新增應用程式」查看網頁圖示。
  2. 在「應用程式暱稱」文字方塊中，輸入好記的應用程式暱稱，例如 My Next.js app。
  3. 取消勾選「一併為這個應用程式設定 Firebase 託管」核取方塊。
  4. 按一下「註冊應用程式」>下一步 >下一步 >前往控制台
    。

在 Firebase 控制台中設定 Firebase 服務

設定驗證

  1. 在 Firebase 控制台中，前往「驗證」。
  2. 按一下「開始使用」。
  3. 在其他供應商欄中，按一下Google啟用。
  4. 在「Public-face name for project」(專案公開名稱) 文字方塊中，輸入一個好記的名稱，例如 My Next.js app。
  5. 在「專案支援電子郵件」下拉式選單中，選取您的電子郵件地址。
  6. 按一下 [儲存]。

設定 Cloud Firestore

  1. 在 Firebase 控制台中，前往「Firestore」。
  2. 按一下「建立資料庫」下一步 >以測試模式啟動 >接下來。
    在本程式碼研究室的後續部分，您將新增安全性規則來保護資料。請勿在未新增資料庫安全性規則的情況下公開發行或發布應用程式。
  3. 請使用預設位置或選取你選擇的位置。
    如果是實際的應用程式，建議你選擇靠近使用者的位置。請注意，這個位置在之後無法變更，並且會自動是預設 Cloud Storage 值區的位置 (下一步)。
  4. 按一下 [完成]。

設定 Cloud Storage for Firebase

  1. 在 Firebase 控制台中，前往「Storage」(儲存空間)。
  2. 按一下「開始使用」以測試模式啟動 >接下來。
    在本程式碼研究室的後續部分，您將新增安全性規則來保護資料。請勿在未新增 Storage 值區的安全性規則的情況下公開發行或發布應用程式。
  3. 您必須選取值區的位置 (因為上一個步驟已設定 Firestore)。
  4. 按一下 [完成]。

4. 查看範例程式碼集

在本節中，您將查看應用程式範例程式碼集中的幾個部分，您將在本程式碼研究室中新增功能。

資料夾和檔案結構

下表概略說明應用程式的資料夾和檔案結構：

資料夾和檔案

說明

src/components

回應篩選器、標題、餐廳詳細資料和評論的元件

src/lib

不一定與 React 或 Next.js 繫結的公用程式函式

src/lib/firebase

Firebase 專屬程式碼和 Firebase 設定

public

網頁應用程式中的靜態素材資源，例如圖示

src/app

使用 Next.js App Router 轉送

src/app/restaurant

API 路徑處理常式

package.json和package-lock.json

使用 npm 的專案依附元件

next.config.js

Next.js 專用設定 (已啟用伺服器動作)

jsconfig.json

JavaScript 語言服務設定

伺服器和用戶端元件

這款應用程式是使用 App Router 的 Next.js 網頁應用程式。伺服器轉譯功能會在整個應用程式中進行使用。舉例來說，src/app/page.js 檔案是負責主頁面的伺服器元件。src/components/RestaurantListings.jsx 檔案是檔案開頭的 "use client" 指令表示的用戶端元件。

匯入陳述式

您可能會注意到匯入陳述式，如下所示：

import RatingPicker from "@/src/components/RatingPicker.jsx";

應用程式使用 @ 符號避免複雜的相對匯入路徑，而可透過「路徑別名」執行。

Firebase 專屬 API

所有 Firebase API 程式碼都會包裝在 src/lib/firebase 目錄中。接著，個別 React 元件會從 src/lib/firebase 目錄匯入已包裝的函式，而不是直接匯入 Firebase 函式。

模擬資料

模擬餐廳和評論資料包含在 src/lib/randomData.js 檔案中。來自該檔案的資料會在 src/lib/fakeRestaurants.js 檔案的程式碼中組合。

5. 建立 App Hosting 後端

在本節中，您將設定 App Hosting 後端，監控 Git 存放區中的分支版本。

本節結束時，會將 App Hosting 後端連結至 GitHub 中的存放區。每當您將新的修訂版本推送至 main 分支版本時，系統就會自動重建並推出新版應用程式。

部署安全性規則

這個程式碼已有多組 Firestore 和 Cloud Storage for Firebase 的安全性規則。部署安全性規則後，您就能進一步保護資料庫和值區中的資料，避免遭到濫用。

  1. 在終端機中，將 CLI 設為使用您先前建立的 Firebase 專案：
    firebase use --add
    敬上 系統提示您輸入別名時，輸入 friendlyeats-codelab。
  2. 如要部署這些安全性規則，請在終端機中執行下列指令：
    firebase deploy --only firestore:rules,storage
  3. 當系統詢問時："Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"，按下 Enter 以選取 Yes。

在網頁應用程式的程式碼中加入 Firebase 設定

  1. 在 Firebase 控制台中，前往「專案設定」。
  2. 在「SDK 設定和設定」窗格中，按一下「新增應用程式」並按一下程式碼括號圖示 ，即可註冊新的網頁應用程式。
  3. 網頁應用程式建立流程結束時，請複製 firebaseConfig 變數，並複製其屬性和值。
  4. 在程式碼編輯器中開啟 apphosting.yaml 檔案，然後使用 Firebase 控制台的設定值填入環境變數值。
  5. 將檔案中現有的屬性替換成您複製的屬性。
  6. 儲存檔案。

建立後端

  1. 前往 Firebase 控制台的 App Hosting 頁面：

App Hosting 控制台的零狀態，顯示「Get Started」按鈕

  1. 按一下「開始使用」啟動後端建立流程請按照下列方式設定後端：
  2. 按照第一個步驟的提示，連結您先前建立的 GitHub 存放區。
  3. 進行部署作業設定：
    1. 將根目錄保留為 /
    2. 將使用中的分支版本設為「main」
    3. 啟用自動推出功能
  4. 為後端 friendlyeats-codelab 命名。
  5. 在「建立或連結 Firebase 網頁應用程式」中，從「選取現有的 Firebase 網頁應用程式」中選取先前設定的網頁應用程式。
  6. 按一下「完成並部署」。稍後系統會將您導向新頁面，您可以在此查看新 App Hosting 後端的狀態！
  7. 推出作業完成後，請在「網域」下方按一下免費網域。由於 DNS 傳播，這項作業可能需要幾分鐘才會開始運作。

您已成功部署初始網頁應用程式！每次將新修訂版本推送至 GitHub 存放區的 main 分支版本時，Firebase 控制台中就會顯示新的版本與推出作業，並在推出完成後自動更新您的網站。

6. 為網頁應用程式新增驗證機制

在本節中，您將為網頁應用程式新增驗證功能，以便登入。

實作登入與登出函式

  1. 在 src/lib/firebase/auth.js 檔案中，將 onAuthStateChanged、signInWithGoogle 和 signOut 函式替換為以下程式碼：
export function onAuthStateChanged(cb) {
	return _onAuthStateChanged(auth, cb);
}

export async function signInWithGoogle() {
  const provider = new GoogleAuthProvider();

  try {
    await signInWithPopup(auth, provider);
  } catch (error) {
    console.error("Error signing in with Google", error);
  }
}

export async function signOut() {
  try {
    return auth.signOut();
  } catch (error) {
    console.error("Error signing out with Google", error);
  }
}

這段程式碼會使用下列 Firebase API：

Firebase API

說明

GoogleAuthProvider

建立 Google 驗證供應商執行個體。

signInWithPopup

啟動對話方塊式驗證流程。

auth.signOut

將使用者登出。

在 src/components/Header.jsx 檔案中，程式碼已叫用 signInWithGoogle 和 signOut 函式。

  1. 建立含有修訂訊息「新增 Google 驗證」的修訂版本並推送至 GitHub 存放區1. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  2. 在網頁應用程式中，重新整理頁面，然後按一下「使用 Google 帳戶登入」。網頁應用程式不會更新，因此不確定登入是否成功。

將驗證狀態傳送至伺服器

為了將驗證狀態傳遞至伺服器，我們會使用 service Worker。使用下列程式碼取代 fetchWithFirebaseHeaders 和 getAuthIdToken 函式：

async function fetchWithFirebaseHeaders(request) {
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const installations = getInstallations(app);
  const headers = new Headers(request.headers);
  const [authIdToken, installationToken] = await Promise.all([
    getAuthIdToken(auth),
    getToken(installations),
  ]);
  headers.append("Firebase-Instance-ID-Token", installationToken);
  if (authIdToken) headers.append("Authorization", `Bearer ${authIdToken}`);
  const newRequest = new Request(request, { headers });
  return await fetch(newRequest);
}

async function getAuthIdToken(auth) {
  await auth.authStateReady();
  if (!auth.currentUser) return;
  return await getIdToken(auth.currentUser);
}

讀取伺服器上的驗證狀態

我們會使用 FirebaseServerApp 在伺服器上建立用戶端驗證狀態。

開啟 src/lib/firebase/serverApp.js，然後取代 getAuthenticatedAppForUser 函式：

export async function getAuthenticatedAppForUser() {
  const idToken = headers().get("Authorization")?.split("Bearer ")[1];
  console.log('firebaseConfig', JSON.stringify(firebaseConfig));
  const firebaseServerApp = initializeServerApp(
    firebaseConfig,
    idToken
      ? {
          authIdToken: idToken,
        }
      : {}
  );

  const auth = getAuth(firebaseServerApp);
  await auth.authStateReady();

  return { firebaseServerApp, currentUser: auth.currentUser };
}

訂閱驗證變更

如要訂閱驗證變更，請按照下列步驟操作：

  1. 前往 src/components/Header.jsx 檔案。
  2. 使用下列程式碼取代 useUserSession 函式：
function useUserSession(initialUser) {
	// The initialUser comes from the server via a server component
	const [user, setUser] = useState(initialUser);
	const router = useRouter();

	// Register the service worker that sends auth state back to server
	// The service worker is built with npm run build-service-worker
	useEffect(() => {
		if ("serviceWorker" in navigator) {
			const serializedFirebaseConfig = encodeURIComponent(JSON.stringify(firebaseConfig));
			const serviceWorkerUrl = `/auth-service-worker.js?firebaseConfig=${serializedFirebaseConfig}`
		
		  navigator.serviceWorker
			.register(serviceWorkerUrl)
			.then((registration) => console.log("scope is: ", registration.scope));
		}
	  }, []);

	useEffect(() => {
		const unsubscribe = onAuthStateChanged((authUser) => {
			setUser(authUser)
		})

		return () => unsubscribe()
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		onAuthStateChanged((authUser) => {
			if (user === undefined) return

			// refresh when user changed to ease testing
			if (user?.email !== authUser?.email) {
				router.refresh()
			}
		})
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [user])

	return user;
}

當 onAuthStateChanged 函式指定驗證狀態變更時，此程式碼會使用 React state 掛鉤更新使用者。

確認變更

src/app/layout.js 檔案中的根版面配置會轉譯標頭，並傳入使用者 (如果有的話) 做為提案。

<Header initialUser={currentUser?.toJSON()} />

也就是說，<Header> 元件會在伺服器執行期間轉譯使用者資料 (如有)。如果在初始頁面載入後，頁面生命週期內有任何驗證更新，onAuthStateChanged 處理常式會進行處理。

下一步是推出新版本，驗證您建構的內容。

  1. 建立含有修訂訊息「顯示登入狀態」的修訂版本並推送至 GitHub 存放區
  2. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  3. 驗證新的驗證行為：
    1. 在瀏覽器中重新整理網頁應用程式。您的顯示名稱會顯示在標題中。
    2. 先登出再登入一次。網頁會即時更新，不必重新整理頁面。您可以針對不同的使用者重複執行這個步驟。
    3. 選用：在網頁應用程式上按一下滑鼠右鍵，選取「查看網頁原始碼」，然後搜尋顯示名稱。會顯示在伺服器傳回的原始 HTML 原始碼中。

7. 查看餐廳資訊

網頁應用程式包含餐廳和評論的模擬資料。

新增一或多間餐廳

如要將模擬餐廳資料插入本機 Cloud Firestore 資料庫，請按照下列步驟操作：

  1. 在網頁應用程式中，選取 2cf67d488d8e6332.png >新增範例餐廳。
  2. 在 Firebase 控制台的「Firestore 資料庫」頁面中，選取「餐廳」。您會在餐廳集合中查看頂層文件，每個文件都代表一間餐廳。
  3. 按一下幾份文件，即可探索餐廳文件的性質。

顯示餐廳清單

您的 Cloud Firestore 資料庫現在已有 Next.js 網頁應用程式可顯示的餐廳。

如要定義資料擷取程式碼，請按照下列步驟操作：

  1. 在 src/app/page.js 檔案中找出 <Home /> 伺服器元件，然後查看對 getRestaurants 函式的呼叫，該函式會在伺服器執行階段擷取餐廳清單。您會在下列步驟中實作 getRestaurants 函式。
  2. 在 src/lib/firebase/firestore.js 檔案中，將 applyQueryFilters 和 getRestaurants 函式替換為以下程式碼：
function applyQueryFilters(q, { category, city, price, sort }) {
	if (category) {
		q = query(q, where("category", "==", category));
	}
	if (city) {
		q = query(q, where("city", "==", city));
	}
	if (price) {
		q = query(q, where("price", "==", price.length));
	}
	if (sort === "Rating" || !sort) {
		q = query(q, orderBy("avgRating", "desc"));
	} else if (sort === "Review") {
		q = query(q, orderBy("numRatings", "desc"));
	}
	return q;
}

export async function getRestaurants(db = db, filters = {}) {
	let q = query(collection(db, "restaurants"));

	q = applyQueryFilters(q, filters);
	const results = await getDocs(q);
	return results.docs.map(doc => {
		return {
			id: doc.id,
			...doc.data(),
			// Only plain objects can be passed to Client Components from Server Components
			timestamp: doc.data().timestamp.toDate(),
		};
	});
}
  1. 建立含有修訂訊息「讀取 Firestore 中的餐廳清單」的修訂版本並推送至 GitHub 存放區
  2. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  3. 在網頁應用程式中，重新整理網頁。餐廳的圖片會以圖塊的形式顯示在頁面上。

確認餐廳商家資訊在伺服器執行階段載入

如果使用 Next.js 架構，可能並不容易在伺服器執行階段或用戶端執行時間載入資料。

如要驗證餐廳商家資訊會在伺服器執行階段載入，請按照下列步驟操作：

  1. 在網頁應用程式中開啟開發人員工具，然後停用 JavaScript。

在開發人員工具中停用 JavaScipt

  1. 重新整理網頁應用程式。仍會載入餐廳商家資訊。系統會在伺服器回應中傳回餐廳資訊。啟用 JavaScript 後，系統會透過用戶端 JavaScript 程式碼補充餐廳資訊。
  2. 在開發人員工具中重新啟用 JavaScript。

透過 Cloud Firestore 快照事件監聽器監聽餐廳最新消息

在上一節中，您已瞭解從 src/app/page.js 檔案載入的第一批餐廳。src/app/page.js 檔案是伺服器元件，會在伺服器上顯示，包括 Firebase 資料擷取程式碼。

src/components/RestaurantListings.jsx 檔案是用戶端元件，可設為補充伺服器轉譯標記。

如要將 src/components/RestaurantListings.jsx 檔案設為補充伺服器轉譯的標記，請按照下列步驟操作：

  1. 在 src/components/RestaurantListings.jsx 檔案中，觀察已為您編寫的程式碼：
useEffect(() => {
        const unsubscribe = getRestaurantsSnapshot(data => {
                setRestaurants(data);
        }, filters);

        return () => {
                unsubscribe();
        };
}, [filters]);

此程式碼會叫用 getRestaurantsSnapshot() 函式，該函式類似於您在先前步驟中實作的 getRestaurants() 函式。但這個快照函式提供回呼機制，因此每當餐廳的集合發生變更時，就會叫用回呼。

  1. 在 src/lib/firebase/firestore.js 檔案中，將 getRestaurantsSnapshot() 函式替換為以下程式碼：
export function getRestaurantsSnapshot(cb, filters = {}) {
	if (typeof cb !== "function") {
		console.log("Error: The callback parameter is not a function");
		return;
	}

	let q = query(collection(db, "restaurants"));
	q = applyQueryFilters(q, filters);

	const unsubscribe = onSnapshot(q, querySnapshot => {
		const results = querySnapshot.docs.map(doc => {
			return {
				id: doc.id,
				...doc.data(),
				// Only plain objects can be passed to Client Components from Server Components
				timestamp: doc.data().timestamp.toDate(),
			};
		});

		cb(results);
	});

	return unsubscribe;
}

透過 Firestore 資料庫頁面所做的變更，現在也會即時反映在網頁應用程式中。

  1. 建立內含修訂訊息「收聽即時餐廳資訊」的修訂版本並推送至 GitHub 存放區
  2. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  3. 在網頁應用程式中，選取 27ca5d1e8ed8adfe.png >新增範例餐廳。如果您的快照功能正確執行，餐廳不需重新整理頁面就會即時顯示餐廳。

8. 從網頁應用程式儲存使用者提交的評論

  1. 在 src/lib/firebase/firestore.js 檔案中，將 updateWithRating() 函式替換為以下程式碼：
const updateWithRating = async (
	transaction,
	docRef,
	newRatingDocument,
	review
) => {
	const restaurant = await transaction.get(docRef);
	const data = restaurant.data();
	const newNumRatings = data?.numRatings ? data.numRatings + 1 : 1;
	const newSumRating = (data?.sumRating || 0) + Number(review.rating);
	const newAverage = newSumRating / newNumRatings;

	transaction.update(docRef, {
		numRatings: newNumRatings,
		sumRating: newSumRating,
		avgRating: newAverage,
	});

	transaction.set(newRatingDocument, {
		...review,
		timestamp: Timestamp.fromDate(new Date()),
	});
};

這個程式碼會插入代表新評論的新 Firestore 文件。程式碼也會更新代表餐廳的現有 Firestore 文件，提供評分次數和平均計算評分的最新數據。

  1. 使用下列程式碼取代 addReviewToRestaurant() 函式：
export async function addReviewToRestaurant(db, restaurantId, review) {
	if (!restaurantId) {
		throw new Error("No restaurant ID has been provided.");
	}

	if (!review) {
		throw new Error("A valid review has not been provided.");
	}

	try {
		const docRef = doc(collection(db, "restaurants"), restaurantId);
		const newRatingDocument = doc(
			collection(db, `restaurants/${restaurantId}/ratings`)
		);

		// corrected line
		await runTransaction(db, transaction =>
			updateWithRating(transaction, docRef, newRatingDocument, review)
		);
	} catch (error) {
		console.error(
			"There was an error adding the rating to the restaurant",
			error
		);
		throw error;
	}
}

實作 Next.js 伺服器動作

Next.js 伺服器動作提供了便利的 API，可用於存取表單資料，例如 data.get("text")，以便從表單提交酬載中取得文字值。

如要使用 Next.js 伺服器動作處理審查表單提交作業，請按照下列步驟操作：

  1. 在 src/components/ReviewDialog.jsx 檔案中，找到 <form> 元素中的 action 屬性。
<form action={handleReviewFormSubmission}>

action 屬性值是指您在下一個步驟中實作的函式。

  1. 在 src/app/actions.js 檔案中，將 handleReviewFormSubmission() 函式替換為以下程式碼：
// This is a next.js server action, which is an alpha feature, so
// use with caution.
// https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
export async function handleReviewFormSubmission(data) {
        const { app } = await getAuthenticatedAppForUser();
        const db = getFirestore(app);

        await addReviewToRestaurant(db, data.get("restaurantId"), {
                text: data.get("text"),
                rating: data.get("rating"),

                // This came from a hidden form field.
                userId: data.get("userId"),
        });
}

新增餐廳評論

現在您導入了評論提交功能的支援服務，現在您可以驗證評論是否已正確插入 Cloud Firestore。

如要新增評論，並確認評論已插入 Cloud Firestore，請按照下列步驟操作：

  1. 建立修訂版本並傳送「允許使用者提交餐廳評論」的修訂訊息並推送至 GitHub 存放區
  2. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  3. 重新整理網頁應用程式，然後從首頁選取餐廳。
  4. 在餐廳頁面中，按一下 3e19beef78bb0d0e.png。
  5. 選取星級評等。
  6. 撰寫評論。
  7. 按一下 [提交]。你的評論會顯示在評論清單頂端。
  8. 在 Cloud Firestore 中，搜尋並選取您檢查過的餐廳文件文件。
  9. 在「Start collection」窗格中，選取「ratings」。
  10. 在「新增文件」窗格中，找到供您審查的文件，確認檔案插入情形符合預期。

Firestore 模擬器中的文件

9. 儲存使用者從網頁應用程式上傳的檔案

在本節中，您可以新增功能，以便在登入後取代與餐廳相關聯的圖片。您將圖片上傳至 Firebase Storage，並在代表餐廳的 Cloud Firestore 文件中更新圖片網址。

如要儲存使用者從網頁應用程式上傳的檔案，請按照下列步驟操作：

  1. 在 src/components/Restaurant.jsx 檔案中，觀察使用者上傳檔案時執行的程式碼：
async function handleRestaurantImage(target) {
        const image = target.files ? target.files[0] : null;
        if (!image) {
                return;
        }

        const imageURL = await updateRestaurantImage(id, image);
        setRestaurant({ ...restaurant, photo: imageURL });
}

您不需要進行任何變更，但您會在下列步驟中實作 updateRestaurantImage() 函式的行為。

  1. 在 src/lib/firebase/storage.js 檔案中，將 updateRestaurantImage() 和 uploadImage() 函式替換為以下程式碼：
export async function updateRestaurantImage(restaurantId, image) {
	try {
		if (!restaurantId)
			throw new Error("No restaurant ID has been provided.");

		if (!image || !image.name)
			throw new Error("A valid image has not been provided.");

		const publicImageUrl = await uploadImage(restaurantId, image);
		await updateRestaurantImageReference(restaurantId, publicImageUrl);

		return publicImageUrl;
	} catch (error) {
		console.error("Error processing request:", error);
	}
}

async function uploadImage(restaurantId, image) {
	const filePath = `images/${restaurantId}/${image.name}`;
	const newImageRef = ref(storage, filePath);
	await uploadBytesResumable(newImageRef, image);

	return await getDownloadURL(newImageRef);
}

系統已為您實作 updateRestaurantImageReference() 函式。這個函式會使用更新的圖片網址，更新 Cloud Firestore 中現有的餐廳文件。

確認圖片上傳功能

如要驗證圖片是否可正常上傳，請按照下列步驟操作：

  1. 建立含有修訂訊息的修訂版本：「允許使用者變更每間餐廳」相片"並推送至 GitHub 存放區
  2. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  3. 在網頁應用程式中，確認您已登入並選取餐廳。
  4. 按一下 7067eb41fea41ff0.png，然後從檔案系統上傳圖片。映像檔會留在本機環境，並上傳至 Cloud Storage。圖片會在上傳後立即顯示，
  5. 前往 Firebase 適用的 Cloud Storage。
  6. 前往代表該餐廳的資料夾。您上傳的圖片存在資料夾中。

6cf3f9e2303c931c.png

10. 運用生成式 AI 歸納餐廳評論

在本節中，你可以新增評論摘要功能，讓使用者不必閱讀每篇評論，就能快速掌握使用者對餐廳的看法。

在 Cloud Secret Manager 中儲存 Gemini API 金鑰

  1. 如要使用 Gemini API，您必須具備 API 金鑰。在 Google AI Studio 中建立金鑰。
  2. App Hosting 與 Cloud Secret Manager 整合，能讓您安全地儲存 API 金鑰等機密值：
    1. 在終端機中執行下列指令來建立新密鑰：
    firebase apphosting:secrets:set gemini-api-key
    1. 當系統提示您輸入密鑰值時，請從 Google AI Studio 複製及貼上 Gemini API 金鑰。
    2. 系統詢問是否應將新密鑰新增至 apphosting.yaml 時，輸入 Y 即可接受。

您的 Gemini API 金鑰會安全地儲存在 Cloud Secret Manager，方便您存取 App Hosting 後端，

實作評論摘要元件

  1. 在 src/components/Reviews/ReviewSummary.jsx 中，將 GeminiSummary 函式替換為以下程式碼：
    export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-pro"});

    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews, 
        where each review is separated by a '${reviewSeparator}' character, 
        create a one-sentence summary of what people think of the restaurant. 

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}
  2. 建立修訂版本並傳送修訂訊息「使用 AI 產生評論摘要」並推送至 GitHub 存放區
  3. 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
  4. 開啟餐廳的頁面。畫面頂端會顯示一句話的摘要，代表該頁面的所有評論。
  5. 請新增評論並重新整理頁面。摘要應該會出現變化。

11. 結論

恭喜！您已瞭解如何使用 Firebase 為 Next.js 應用程式新增功能。具體來說，您使用了下列項目：

瞭解詳情