1. 事前準備
在本程式碼研究室中，您將瞭解如何將 Firebase 與名為 Friendly 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 應用程式路由器和伺服器端算繪使用 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 資料夾複製到您自己的存放區：
- 使用終端機在電腦上建立新資料夾，然後切換至新目錄：
mkdir codelab-friendlyeats-web cd codelab-friendlyeats-web - 使用 giget npm 套件，只擷取
nextjs-start資料夾：npx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install - 使用 Git 在本機追蹤變更：
git init git commit -a -m "codelab starting point" git branch -M main - 建立新的 GitHub 存放區：https://github.com/new。命名方式。
- GitHub 會提供新的存放區網址，類似
https://github.com/或/ .git git@github.com:。請複製這個網址。/ .git
- GitHub 會提供新的存放區網址，類似
- 將本機變更推送至新的 GitHub 存放區。執行下列指令，將
git remote add origin <your-repository-url> git push -u origin main - 您現在應該會在 GitHub 存放區中看到範例程式碼。
安裝或更新 Firebase CLI
執行下列指令，確認您已安裝 Firebase CLI，且版本為 v13.9.0 以上版本：
firebase --version
如果顯示的版本較舊，或是您尚未安裝 Firebase CLI，請執行安裝指令：
npm install -g firebase-tools@latest
如果您因為權限錯誤而無法安裝 Firebase CLI，請參閱 npm 說明文件或使用其他安裝選項。
登入 Firebase
- 執行下列指令，登入 Firebase CLI：
firebase login
- 視您是否要讓 Firebase 收集資料，輸入
Y或N。 - 在瀏覽器中選取 Google 帳戶，然後按一下「允許」。
3. 設定 Firebase 專案
在本節中，您將設定 Firebase 專案，並將 Firebase 網頁應用程式與該專案建立關聯。您也需要設定範例網頁應用程式使用的 Firebase 服務。
建立 Firebase 專案
- 在 Firebase 控制台，按一下「新增專案」。
- 在「輸入專案名稱」文字方塊中，輸入
FriendlyEats Codelab(或您選擇的專案名稱)，然後按一下「繼續」。 - 在「確認 Firebase 計費方案」彈出式視窗中，確認方案為 Blaze，然後按一下「確認方案」。
- 這個程式碼研究室不需要 Google Analytics，因此請關閉「啟用這項專案的 Google Analytics」選項。
- 按一下 [Create Project]。
- 等待專案佈建完成，然後按一下「Continue」。
- 在 Firebase 專案中前往「專案設定」。記下專案 ID，後續步驟將會用到。這個專屬 ID 是系統識別專案的方式，例如在 Firebase CLI 中。
升級 Firebase 定價方案
如要使用 Firebase 應用程式代管和 Firebase 雲端儲存空間，您的 Firebase 專案必須採用即付即用 (Blaze) 定價方案，也就是說必須連結至 Cloud Billing 帳戶。
- Cloud Billing 帳戶需要付款方式，例如信用卡。
- 如果您是 Firebase 和 Google Cloud 的新手，請確認您是否符合 $300 美元的抵免額和免費試用 Cloud Billing 帳戶的資格。
- 如果您在活動中納入本程式碼研究室，請詢問發起人是否有任何可用的 Cloud 抵免額。
如要將專案升級至 Blaze 方案，請按照下列步驟操作：
- 在 Firebase 控制台中，選取「升級方案」。
- 選取 Blaze 方案。請按照畫面上的指示將 Cloud Billing 帳戶連結至專案。
如果您需要在此次升級中建立 Cloud Billing 帳戶，可能需要返回 Firebase 控制台的升級流程，才能完成升級。
將網頁應用程式新增至 Firebase 專案
- 前往 Firebase 專案中的「專案總覽」，然後按一下
「網路」。
如果專案中已註冊應用程式，請按一下「新增應用程式」查看網頁圖示。 - 在「應用程式暱稱」文字方塊中，輸入好記的應用程式暱稱，例如
My Next.js app。 - 取消勾選「一併為這個應用程式設定 Firebase 託管」核取方塊。
- 依序點選「Register app」>「Next」>「Next」>「Continue to console」。
在 Firebase 控制台中設定 Firebase 服務
設定驗證
- 在 Firebase 控制台中前往「驗證」。
- 按一下「開始使用」。
- 在「其他供應商」欄中，依序按一下「Google」>「啟用」。
- 在「專案的公開名稱」文字方塊中，輸入容易記住的名稱，例如
My Next.js app。 - 在「專案的支援電子郵件地址」下拉式選單中，選取您的電子郵件地址。
- 按一下 [儲存]。
設定 Cloud Firestore
- 在 Firebase 控制台的左側面板中，展開「Build」，然後選取 「Firestore database」。
- 按一下 [Create database] (建立資料庫)。
- 將「資料庫 ID」設為
(default)。 - 選取資料庫位置，然後點選「下一步」。
如果是實際的應用程式，建議您選擇靠近使用者的位置。 - 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
在本程式碼研究室中，您將新增安全性規則來保護資料。請勿在未新增資料庫安全性規則的情況下公開發行或發布應用程式。 - 按一下「建立」。
設定 Cloud Storage for Firebase
- 在 Firebase 主控台的左側面板中，展開「Build」，然後選取「Storage」。
- 按一下「開始使用」。
- 選取預設 Storage 值區的位置。
US-WEST1、US-CENTRAL1和US-EAST1中的值區可以利用 Google Cloud Storage 的「一律免費」方案。所有其他位置的值區皆遵循 Google Cloud Storage 定價與用量。 - 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
在本程式碼研究室中，您將新增安全性規則來保護資料。請勿在未新增 Storage 值區的安全性規則的情況下公開發行或發布應用程式。 - 按一下「建立」。
4. 查看範例程式碼集
在本節中，您將查看應用程式範例程式碼庫的幾個部分，並在本程式碼研究室中新增功能。
資料夾和檔案結構
下表概略說明應用程式的資料夾和檔案結構：
資料夾和檔案 | 說明 |
| 回應篩選器、標題、餐廳詳細資料和評論的元件 |
| 不一定會綁定至 React 或 Next.js 的實用工具函式 |
| Firebase 專屬程式碼和 Firebase 設定 |
| 網頁應用程式中的靜態素材資源，例如圖示 |
| 使用 Next.js 應用程式路由器進行轉送 |
| API 路徑處理常式 |
| 使用 npm 管理專案依附元件 |
| Next.js 專屬設定 (已啟用伺服器動作) |
| 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 的安全性規則組合。部署安全規則後，資料庫和儲存體中的資料就能獲得更完善的保護，避免遭到濫用。
- 在終端機中，將 CLI 設為使用先前建立的 Firebase 專案：
firebase use --add
friendlyeats-codelab。 - 如要部署這些安全規則，請在終端機中執行下列指令：
firebase deploy --only firestore:rules,storage
- 如果系統詢問「
"Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"」，請按下Enter選取「是」。
在網頁應用程式的程式碼中加入 Firebase 設定
- 在 Firebase 主控台中，前往專案設定。
- 在「SDK 設定和配置」窗格中，按一下「新增應用程式」，然後點選程式碼括號圖示
即可註冊新的網頁應用程式。 - 網頁應用程式建立流程結束時，請複製
firebaseConfig變數，並複製其屬性和值。 - 在程式碼編輯器中開啟
apphosting.yaml檔案，然後使用 Firebase 控制台的設定值填入環境變數值。 - 將檔案中現有的屬性替換成您複製的屬性。
- 儲存檔案。
建立後端
- 前往 Firebase 控制台的 App Hosting 頁面：
- 按一下「開始使用」即可開始後端建立流程。請按照下列方式設定後端：
- 按照第一個步驟的提示，連結您先前建立的 GitHub 存放區。
- 進行部署作業設定：
- 將根目錄保留為
/ - 將上線分支設為
main - 啟用自動推出功能
- 將根目錄保留為
- 為後端
friendlyeats-codelab命名。 - 在「建立或連結 Firebase 網頁應用程式」中，從「選取現有的 Firebase 網頁應用程式」下拉式選單中，選取先前設定的網頁應用程式。
- 按一下「完成並部署」。稍後系統會將您導向新頁面，您可以在此查看新 App Hosting 後端的狀態！
- 推出完成後，請按一下「網域」下方的免費網域。由於 DNS 傳播，這項作業可能需要幾分鐘才會開始運作。
您已成功部署初始網頁應用程式！每次將新修訂版本推送至 GitHub 存放區的 main 分支版本時，Firebase 控制台中就會顯示新的版本與推出作業，並在推出完成後自動更新您的網站。
6. 為網頁應用程式新增驗證機制
在本節中，您會為網頁應用程式新增驗證機制，以便登入應用程式。
實作登入與登出函式
- 在
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 | 說明 |
建立 Google 驗證供應商執行個體。 | |
啟動對話方塊式驗證流程。 | |
將使用者登出。 |
在 src/components/Header.jsx 檔案中，程式碼已叫用 signInWithGoogle 和 signOut 函式。
- 建立含有修訂訊息「Add Google Authentication」的修訂版本，並推送至 GitHub 存放區。1. 在 Firebase 控制台中開啟「App Hosting」頁面，等待新版本推出作業完成。
- 在網頁應用程式中，重新整理頁面，然後按一下「使用 Google 帳戶登入」。網頁應用程式不會更新，因此不確定登入是否成功。
將驗證狀態傳送至伺服器
為了將驗證狀態傳遞至伺服器，我們會使用服務工作者。將 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 };
}
訂閱驗證變更
如要訂閱驗證機制變更，請按照下列步驟操作：
- 前往
src/components/Header.jsx檔案。 - 將
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 狀態鉤子更新使用者。
驗證變更
src/app/layout.js 檔案中的根版面配置會轉譯標頭，並傳入使用者 (如果有的話) 做為提案。
<Header initialUser={currentUser?.toJSON()} />
也就是說，<Header> 元件會在伺服器執行期間轉譯使用者資料 (如有)。如果在初始網頁載入後的網頁生命週期中，有任何驗證更新，onAuthStateChanged 處理常式會處理這些更新。
接下來，您可以推出新的版本，並驗證您建構的內容。
- 建立修訂版本，並設定「Show signin state」修訂訊息，然後將其推送至 GitHub 存放區。
- 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
- 驗證新的驗證行為：
- 使用瀏覽器重新整理網頁應用程式，你的顯示名稱會顯示在標頭中。
- 請先登出再登入。頁面會即時更新，無須重新整理。您可以針對不同的使用者重複執行這個步驟。
- 選用：在網頁應用程式上按一下滑鼠右鍵，選取「查看網頁原始碼」，然後搜尋顯示名稱。會顯示在伺服器傳回的原始 HTML 原始碼中。
7. 查看餐廳資訊
網頁應用程式包含餐廳和評論的模擬資料。
新增一或多個餐廳
如要將模擬餐廳資料插入本機 Cloud Firestore 資料庫，請按照下列步驟操作：
- 在網頁應用程式中，依序選取
>「新增示例餐廳」。 - 在 Firebase 控制台的「Firestore 資料庫」頁面中，選取「餐廳」。您會在餐廳集合中查看頂層文件，每個文件都代表一間餐廳。
- 按一下幾份文件，即可探索餐廳文件的性質。
顯示餐廳清單
您的 Cloud Firestore 資料庫現在已有 Next.js 網頁應用程式可顯示的餐廳。
如要定義資料擷取程式碼，請按照下列步驟操作：
- 在
src/app/page.js檔案中，找出<Home />伺服器元件，並查看對getRestaurants函式的呼叫，該函式會在伺服器執行期間擷取餐廳清單。您會在下列步驟中實作getRestaurants函式。 - 在
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(),
};
});
}
- 建立修訂版本，並在修訂版本訊息中加入「Read the list of restaurants from Firestore」(從 Firestore 讀取餐廳清單)，然後推送至 GitHub 存放區。
- 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
- 在網頁應用程式中，重新整理網頁。餐廳的圖片會以圖塊的形式顯示在頁面上。
確認餐廳商家資訊在伺服器執行階段載入
如果使用 Next.js 架構，可能並不容易在伺服器執行階段或用戶端執行時間載入資料。
如要驗證餐廳商家資訊會在伺服器執行階段載入，請按照下列步驟操作：
- 在網頁應用程式中開啟開發人員工具，然後停用 JavaScript。
- 重新整理網頁應用程式。系統仍會載入餐廳商家資訊。餐廳資訊會在伺服器回應中傳回。啟用 JavaScript 後，系統會透過用戶端 JavaScript 程式碼重新整理餐廳資訊。
- 在開發人員工具中，重新啟用 JavaScript。
使用 Cloud Firestore 快照事件監聽器監聽餐廳更新
在上一節中，您已瞭解如何從 src/app/page.js 檔案載入初始餐廳集合。src/app/page.js 檔案是伺服器元件，會在伺服器上算繪，包括 Firebase 資料擷取程式碼。
src/components/RestaurantListings.jsx 檔案是用戶端元件，可設為補充伺服器轉譯標記。
如要將 src/components/RestaurantListings.jsx 檔案設為補充伺服器轉譯的標記，請按照下列步驟操作：
- 在
src/components/RestaurantListings.jsx檔案中，觀察已為您編寫的程式碼：
useEffect(() => {
const unsubscribe = getRestaurantsSnapshot(data => {
setRestaurants(data);
}, filters);
return () => {
unsubscribe();
};
}, [filters]);
此程式碼會叫用 getRestaurantsSnapshot() 函式，該函式類似於您在先前步驟中實作的 getRestaurants() 函式。但這個快照函式提供回呼機制，因此每當餐廳的集合發生變更時，就會叫用回呼。
- 在
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 資料庫頁面所做的變更，現在會即時顯示在網頁應用程式中。
>「新增示例餐廳」。如果您的快照功能正確執行，餐廳不需重新整理頁面就會即時顯示餐廳。8. 從網頁應用程式儲存使用者提交的評論
- 在
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 文件，提供評分次數和平均計算評分的最新數據。
- 使用下列程式碼取代
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 伺服器動作處理審查表單提交作業，請按照下列步驟操作：
- 在
src/components/ReviewDialog.jsx檔案中，找出<form>元素中的action屬性。
<form action={handleReviewFormSubmission}>
action 屬性值是指您在下一個步驟中實作的函式。
- 在
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，請按照下列步驟操作：
- 建立修訂版本，並在修訂版本訊息中加入「允許使用者提交餐廳評論」這句話，然後將修訂版本推送至 GitHub 存放區。
- 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
- 重新整理網頁應用程式，然後從首頁選取餐廳。
- 在餐廳頁面中，按一下
。 - 選取星級評等。
- 撰寫評論。
- 按一下 [提交]。你的評論會顯示在評論清單頂端。
- 在 Cloud Firestore 中，搜尋「新增文件」窗格中所需餐廳的文件，然後選取該文件。
- 在「開始收集資料」窗格中，選取「評分」。
- 在「新增文件」窗格中，找出要審查的文件，確認是否已正確插入。
9. 從網路應用程式儲存使用者上傳的檔案
在本節中，您可以新增功能，以便在登入後取代與餐廳相關聯的圖片。您可以將圖片上傳至 Firebase Storage，並在代表餐廳的 Cloud Firestore 文件中更新圖片網址。
如要從 webapp 儲存使用者上傳的檔案，請按照下列步驟操作：
- 在
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() 函式的行為。
- 在
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 中現有的餐廳文件。
確認圖片上傳功能
如要確認圖片上傳是否如預期，請按照下列步驟操作：
- 建立修訂版本，並在修訂版本訊息中加入「允許使用者變更每間餐廳的相片」這句話，然後推送至 GitHub 存放區。
- 在 Firebase 控制台中開啟「應用程式託管」頁面，等待新版本推出作業完成。
- 在網頁版應用程式中，確認你已登入帳戶並選取餐廳。
- 按一下
，然後從檔案系統上傳圖片。映像檔會離開本機環境，並上傳至 Cloud Storage。上傳圖片後，系統就會立即顯示圖片。 - 前往 Cloud Storage for Firebase。
- 前往代表餐廳的資料夾。你上傳的圖片位於資料夾中。
10. 使用生成式 AI 產生餐廳評論摘要
在本節中，你可以新增評論摘要功能，讓使用者不必閱讀每篇評論，就能快速掌握使用者對餐廳的看法。
在 Cloud Secret Manager 中儲存 Gemini API 金鑰
- 如要使用 Gemini API，您必須具備 API 金鑰。在 Google AI Studio 中建立金鑰。
- 應用程式代管服務與 Cloud Secret Manager 整合，可讓您安全地儲存 API 金鑰等機密值：
- 在終端機中執行下列指令來建立新密鑰：
firebase apphosting:secrets:set gemini-api-key- 系統提示您輸入密鑰值時，請從 Google AI Studio 複製並貼上 Gemini API 金鑰。
- 系統詢問是否要將新機密金鑰新增至
apphosting.yaml時，請輸入Y來接受。
Gemini API 金鑰現在已安全地儲存在 Cloud Secret Manager 中，且可供應用程式代管後端存取。
實作評論摘要元件
- 在
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>; } } - 建立修訂版本，並在修訂版本訊息中加入「使用 AI 摘要評論」這句話，然後推送至 GitHub 存放區。
- 在 Firebase 控制台中開啟 App Hosting 頁面，等待新推出作業完成。
- 開啟餐廳的頁面。畫面頂端會顯示一句話的摘要，代表該頁面的所有評論。
- 新增評論並重新整理頁面。您應該會看到摘要變更。
11. 結論
恭喜！您已瞭解如何使用 Firebase 為 Next.js 應用程式新增功能。具體來說，您使用了以下項目：
- Firebase App Hosting 可在您每次推送至已設定的分支版本時，自動建構及部署 Next.js 程式碼。
- Firebase 驗證：啟用登入和登出功能。
- Cloud Firestore：餐廳資料和餐廳評論資料。
- Cloud Storage for Firebase (適用於餐廳圖片)。