使用 Gemini API 適用的 Firebase Extensions 建構 AI 技術輔助網頁應用程式

1. 事前準備

Firebase Extensions 可讓您以最少的程式碼，將預先封裝的功能 (甚至是 AI 輔助功能) 新增至應用程式。本程式碼研究室將說明如何在網頁應用程式中整合兩項 Firebase 擴充功能，以便運用 Gemini API 根據提供的內容和使用者輸入內容，生成圖片說明、摘要，甚至是個人化建議。

在本程式碼研究室中，您將學習如何建構 AI 輔助的網頁應用程式，並透過 Firebase Extensions 提供引人入勝的使用者體驗。

事前準備

  • 熟悉 Node.js、Next.js 和 TypeScript。

課程內容

  • 瞭解如何使用 Gemini API 的 Firebase 擴充功能處理語言。
  • 如何使用 Cloud Functions for Firebase，為語言模型撰寫擴增背景資訊。
  • 如何使用 JavaScript 存取 Firebase Extensions 產生的輸出內容。

事前準備

  • 你選擇的瀏覽器，例如 Google Chrome
  • 開發環境，內含程式碼編輯器和終端機
  • 用於建立及管理 Firebase 專案的 Google 帳戶

2. 檢查網頁應用程式、Firebase 服務和擴充功能

在本節中，您將查看本程式碼研究室要建構的網路應用程式，並瞭解您會使用的 Firebase 服務和 Firebase 擴充功能。

網頁應用程式

在本程式碼研究室中，您將建構名為「Friendly Conf」的網頁應用程式。

友善會議的工作人員決定使用 AI，為與會者打造令人愉悅的個人化體驗。完成的會議應用程式會提供由多模態生成式 AI 模型 (也稱為大型語言模型或 LLM) 支援的對話式 AI 聊天機器人，可回答一般主題的問題，並根據會議行程和主題提供量身打造的回覆。聊天機器人具備歷史背景資訊，並瞭解目前日期/時間、Friendly Conf 主題和時間表，因此回覆內容會考量所有這些背景資訊。

5364a56a230ff075.png

Firebase 服務

在本程式碼研究室中，您會使用許多 Firebase 服務和功能，而且大部分的範例程式碼都會提供給您。下表列出您會使用的服務，以及使用原因。

服務

使用原因

Firebase 驗證

您使用網頁應用程式的「使用 Google 帳戶登入」功能。

Cloud Firestore

您將文字資料儲存在 Cloud Firestore 中，然後由 Firebase Extensions 處理。

Cloud Storage for Firebase

您會從 Cloud Storage 讀取及寫入資料，在網頁應用程式中顯示圖片庫。

Firebase 安全性規則

部署安全性規則，有助於確保 Firebase 服務的存取安全。

Firebase Extensions

您可設定及安裝與 AI 相關的 Firebase Extensions，並在網頁應用程式中顯示結果。

加碼：Firebase Hosting

您也可以選擇使用 Firebase Hosting 提供網頁應用程式 (不需 GitHub 存放區)。

加碼：Firebase App Hosting

您也可以選擇使用全新的 Firebase App Hosting 簡化版，提供動態 Next.js 網頁應用程式 (已連結至 GitHub 存放區)。

Firebase Extensions

您在本程式碼研究室中使用的 Firebase 擴充功能包括：

擴充功能會對 Firebase 專案中發生的事件做出反應，因此非常實用。本程式碼研究室使用的擴充功能都會在您於 Cloud Firestore 中預先設定的集合建立新文件時做出回應。

3. 設定開發環境

確認 Node.js 版本

  1. 在終端機中，確認您已安裝 Node.js 20.0.0 以上版本：
    node -v
  2. 如果沒有 20.0.0 以上版本的 Node.js，請下載並安裝最新 LTS 版本。

取得程式碼研究室的原始碼

如果您有 GitHub 帳戶：

  1. 使用 github.com/FirebaseExtended/codelab-gemini-api-extensions65ef006167d600ab.png 的範本建立新的存放區
  2. 複製您剛建立的程式碼研究室 GitHub 存放區：
    git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions

如果沒有安裝 Git，或不想建立新的存放區：

將 GitHub 存放區下載為 ZIP 檔案。

查看資料夾結構

根資料夾包含 README.md 檔案，提供簡化指令，讓您快速啟動網頁應用程式。不過，如果您是初學者，建議完成本程式碼研究室 (而非快速入門)，因為程式碼研究室包含最詳盡的操作說明。

如果您不確定是否已按照本程式碼研究室的指示正確套用程式碼，可以在 end Git 分支中找到解決方案程式碼。

安裝 Firebase CLI

  1. 確認您已安裝 Firebase CLI，且版本為 13.6 以上：
    firebase --version
  2. 如果已安裝 Firebase CLI，但版本不是 13.6 以上，請更新：
    npm update -g firebase-tools
  3. 如果尚未安裝 Firebase CLI，請安裝：
    npm install -g firebase-tools

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

登入 Firebase

  1. 在終端機中前往 codelab-gemini-api-extensions 資料夾，然後登入 Firebase：
    cd codelab-gemini-api-extensions
firebase login
    如果終端機顯示您已登入 Firebase，請跳至本程式碼研究室的「設定 Firebase 專案」一節。
  2. 在終端機中，視您是否要讓 Firebase 收集資料，輸入 Y 或 N。(任一選項都適用於本程式碼研究室)
  3. 在瀏覽器中選取 Google 帳戶，然後按一下「允許」。

4. 設定 Firebase 專案

在本節中，您將設定 Firebase 專案，並在其中註冊 Firebase 網頁應用程式。在本程式碼研究室的後續步驟中，您也會啟用範例網頁應用程式使用的幾項 Firebase 服務。

本節的所有步驟都是在 Firebase 主控台中完成。

建立 Firebase 專案

  1. 使用上一個步驟中使用的 Google 帳戶登入 Firebase 控制台。
  2. 按一下按鈕建立新專案，然後輸入專案名稱 (例如 AI Extensions Codelab)。
  3. 按一下「繼續」。
  4. 如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
  5. (選用) 在 Firebase 控制台中啟用 AI 輔助功能 (稱為「Gemini in Firebase」)。
  6. 本程式碼研究室不需要 Google Analytics，因此請關閉 Google Analytics 選項。
  7. 按一下「建立專案」，等待專案佈建完成，然後按一下「繼續」。

升級 Firebase 定價方案

如要使用 Firebase Extensions (和其基礎雲端服務) 以及 Cloud Storage for Firebase，Firebase 專案必須採用即付即用 (Blaze) 定價方案，也就是連結至 Cloud Billing 帳戶。

  • Cloud Billing 帳戶需要付款方式，例如信用卡。
  • 如果您剛開始使用 Firebase 和 Google Cloud，請確認是否符合 $300 美元抵免額和免費試用 Cloud Billing 帳戶的資格。
  • 如果您是在活動中進行這項程式碼研究室，請詢問主辦單位是否有可用的 Cloud 抵免額。

另請注意，在 Firebase 專案中啟用帳單後，擴充功能對 Gemini API 的呼叫都會產生費用 (無論您選擇 Google AI 或 Vertex AI)。進一步瞭解 Google AI 和 Vertex AI 的定價。

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

  1. 在 Firebase 控制台中，選取「升級方案」。
  2. 選取 Blaze 方案。按照畫面上的指示，將 Cloud Billing 帳戶連結至專案。
    如果你在升級過程中需要建立 Cloud Billing 帳戶，可能需要返回 Firebase 控制台的升級流程，才能完成升級。

將網頁應用程式新增至 Firebase 專案

  1. 前往 Firebase 專案的「專案總覽」畫面，然後按一下「網頁」af10a034ec77938d.png。Firebase 專案頂端的「網站」按鈕
  2. 在「應用程式暱稱」文字方塊中，輸入容易記住的應用程式暱稱，例如 My AI Extensions
  3. 依序點選「Register app」>「Next」>「Next」>「Continue to console」。
    您可以略過 Web 應用程式流程中與「代管」相關的所有步驟，因為您稍後會在程式碼研究室中選擇性設定代管服務。

在 Firebase 專案中建立的網頁應用程式

太好了！您已在新 Firebase 專案中註冊網頁應用程式。

設定 Firebase 驗證

  1. 使用左側導覽窗格前往「驗證」。
  2. 按一下「開始使用」。
  3. 在「其他供應商」欄中，依序點選「Google」>「啟用」。232b8f0336c25585.png
  4. 在「專案的公開名稱」文字方塊中，輸入實用名稱，例如 My AI Extensions Codelab。
  5. 在「專案支援電子郵件」選單中，選取您的電子郵件地址。
  6. 按一下 [儲存]。

37e54f32f8133be3.png

設定 Cloud Firestore

  1. 在 Firebase 控制台的左側面板中，展開「Build」，然後選取「Firestore database」。
  2. 按一下 [Create database] (建立資料庫)。
  3. 將「資料庫 ID」保留為 (default)。
  4. 選取資料庫位置，然後按一下「下一步」。
    如果是實際應用程式，請選擇離使用者較近的位置。
  5. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室的後續步驟中，您將新增安全性規則，確保資料安全。請勿在未為資料庫新增安全性規則的情況下，公開發布或公開應用程式。
  6. 點選「建立」。

設定 Cloud Storage for Firebase

  1. 在 Firebase 主控台的左側面板中，展開「Build」，然後選取「Storage」。
  2. 按一下「開始使用」。
  3. 選取預設 Storage bucket 的位置。
    位於 US-WEST1、US-CENTRAL1 和 US-EAST1 的 bucket 可享有 Google Cloud Storage 的「永久免費」方案。其他所有位置的值區均適用 Google Cloud Storage 定價和用量。
  4. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室的後續步驟中，您將新增安全性規則來保護資料。請勿在未為 Storage 值區新增安全規則的情況下，公開發布或公開應用程式。
  5. 點選「建立」。

在本程式碼研究室的下一節中，您將安裝並設定兩個 Firebase 擴充功能，並在本程式碼研究室中用於網頁應用程式。

5. 設定「透過 Gemini API 打造聊天機器人」擴充功能

安裝「透過 Gemini API 打造聊天機器人」擴充功能

  1. 前往「透過 Gemini API 打造聊天機器人」擴充功能。
  2. 按一下「在 Firebase 控制台中安裝」。
  3. 選取 Firebase 專案，然後按一下「下一步」。
  4. 在「Review APIs enabled and resources created」(查看已啟用的 API 和建立的資源) 專區中，按一下系統建議的任何服務旁邊的「啟用」，然後按一下「下一步」。8e58e717da8182a2.png
  5. 針對系統建議的權限，選取「授予」，然後按一下「下一步」。269e1c3c4123425c.png
  6. 設定擴充功能：
    1. 在「Gemini API Provider」(Gemini API 提供者) 選單中，選取要使用 Google AI 或 Vertex AI 的 Gemini API。如果開發人員使用 Firebase，建議使用 Vertex AI。
    2. 在「Firestore Collection Path」(Firestore 集合路徑) 文字方塊中輸入：users/{uid}/messages。
      在本程式碼研究室的後續步驟中，將文件新增至這個集合會觸發擴充功能呼叫 Gemini API。
    3. 在「Cloud Functions location」(Cloud Functions 位置) 選單中，選取偏好的位置 (例如 Iowa (us-central1) 或先前為 Firestore 資料庫指定的位置)。
    4. 其他值則保留預設狀態。
  7. 按一下「安裝擴充功能」，然後等待擴充功能安裝完成。

試用「透過 Gemini API 打造聊天機器人」擴充功能

本程式碼研究室的目標是透過網頁應用程式與「透過 Gemini API 打造聊天機器人」擴充功能互動，但建議您先在 Firebase 控制台中試用擴充功能，瞭解其運作方式。

只要在 users/{uid}/discussion/{discussionId}/messages 集合下建立 Firestore 文件 (可在 Firebase 控制台中進行)，就會觸發擴充功能。

  1. 在 Firebase 控制台中，前往 Firestore，然後按一下第一欄中的「開始集合」63873f95ceaf00ac.png。
  2. 在「Collection ID」文字方塊中輸入 users，然後點選「Next」。
  3. 在「Document ID」(文件 ID) 文字方塊中，按一下「Auto-ID」(自動 ID)，然後按一下「Save」(儲存)。
  4. 在 users 集合中，按一下「啟動集合」dec3188dd2d1aa02.png。在 Firestore 中啟動新集合
  5. 在「Collection ID」(集合 ID) 文字方塊中輸入 messages，然後點選「Next」(下一步)。
    1. 在「Document ID」(文件 ID) 文字方塊中，按一下「Auto-ID」(自動 ID)。
    2. 在「欄位」文字方塊中輸入 prompt。
    3. 在「Value」(值) 文字方塊中輸入 Tell me 5 random fruits。
  6. 按一下「儲存」，然後稍等幾秒鐘。

新增這份文件後，擴充功能會呼叫 Gemini API。您剛才新增至 messages 集合的文件，現在不僅包含您的 prompt，還包含模型的 response。

Firestore 文件中的語言模型回覆

將其他文件新增至 messages 集合，再次觸發擴充功能：

  1. 在 messages 集合中，按一下「新增文件」dec3188dd2d1aa02.png。
  2. 在「Document ID」(文件 ID) 文字方塊中，按一下「Auto-ID」(自動 ID)。
  3. 在「欄位」文字方塊中輸入 prompt。
  4. 在「Value」(值) 文字方塊中輸入 And now, vegetables。
  5. 按一下「儲存」，然後稍等幾秒鐘。您剛才新增至 messages 集合的文件現在會包含查詢的 response。

    生成這項回覆時，底層的 Gemini 模型會使用先前查詢的歷史知識。

6. 設定網頁應用程式

如要執行網頁應用程式，您需要在終端機中執行指令，並在程式碼編輯器中加入程式碼。

設定 Firebase CLI，以便針對 Firebase 專案執行

在終端機中執行下列指令，告知 CLI 使用您的 Firebase 專案：

firebase use YOUR_PROJECT_ID

部署 Firestore 和 Cloud Storage 的安全性規則

本程式碼研究室的程式碼庫已為您編寫一組 Firestore 安全性規則和 Cloud Storage 安全性規則。部署這些安全性規則後，Firebase 專案中的 Firebase 服務就能獲得更完善的保護，避免遭到濫用。

  1. 如要部署安全規則，請在終端機中執行下列指令：
    firebase deploy --only firestore:rules,storage
  2. 系統詢問是否要授予 Cloud Storage IAM 角色，以使用跨服務規則時，請輸入 Y 或 N。(任一選項都適用於本程式碼研究室)

將網頁應用程式連結至 Firebase 專案

網頁應用程式的程式碼集需要知道應使用哪個 Firebase 專案的資料庫、儲存空間等。如要達成這個目的，請將 Firebase 設定新增至應用程式的程式碼集。

  1. 取得 Firebase 設定：
    1. 在 Firebase 主控台中，前往 Firebase 專案的「專案設定」。
    2. 向下捲動至「你的應用程式」部分，然後選取已註冊的網頁應用程式。
    3. 在「SDK 設定和配置」窗格中，複製完整的 initializeApp 程式碼，包括 firebaseConfig const。
  2. 將 Firebase 設定新增至網頁應用程式的程式碼集：
    1. 在程式碼編輯器中開啟 src/lib/firebase/firebase.config.js 檔案。
    2. 選取檔案中的所有內容，然後貼上複製的程式碼。
    3. 儲存檔案。

在瀏覽器中預覽網頁應用程式

  1. 在終端機中安裝依附元件，然後執行網頁應用程式：
    npm install
npm run dev
  2. 在瀏覽器中前往本機代管的代管網址，即可查看網頁應用程式。舉例來說，在大多數情況下，網址為 http://localhost:3000/ 或類似網址。

使用網頁應用程式的聊天機器人

  1. 在瀏覽器中，返回執行本機 Friendly Conf 網頁應用程式的分頁。
  2. 按一下「使用 Google 帳戶登入」，然後選取 Google 帳戶 (如有需要)。
  3. 登入後，你會看到空白的對話視窗。
  4. 輸入問候語 (例如 hi)，然後按一下「傳送」。
  5. 稍候幾秒鐘，等待聊天機器人回覆。

應用程式中的聊天機器人會提供一般回覆。

1929b9f465053ae7.png

為應用程式打造專屬聊天機器人

當模型為應用程式使用者生成回覆時，您需要讓網路應用程式聊天機器人使用的基礎 Gemini 模型瞭解會議的具體詳細資料。控制及引導這些回覆的方式有很多種，在本程式碼研究室的子章節中，我們將展示一種非常基本的方式，也就是在初始提示中提供「背景資訊」(而非僅提供網路應用程式使用者的輸入內容)。

  1. 在瀏覽器的網頁應用程式中，按一下紅色「x」按鈕 (位於對話記錄中的訊息旁)，即可清除對話。
  2. 在程式碼編輯器中開啟 src/app/page.tsx 檔案。
  3. 向下捲動，然後將第 93 行附近顯示 prompt: userMsg 的程式碼替換為以下程式碼：
    prompt: preparePrompt(userMsg, messages),
  4. 儲存檔案。
  5. 返回瀏覽器中執行的網路應用程式。
  6. 再次輸入問候語 (例如 hi)，然後按一下「傳送」。
  7. 稍候幾秒鐘，等待聊天機器人回覆。

6fbe972296fcb4d8.png

聊天機器人會根據 src/app/lib/context.md 中提供的脈絡，回覆相關知識。即使您未輸入特定要求，底層的 Gemini 模型也會根據這個脈絡和目前的日期/時間，生成個人化建議。現在你可以指定後續問題，深入瞭解相關資訊。

這項擴充情境對聊天機器人很重要，但不應向網頁應用程式使用者顯示。以下說明如何隱藏這項資訊：

  1. 在程式碼編輯器中開啟 src/app/page.tsx 檔案。
  2. 向下捲動，然後將第 56 行附近顯示 ...doc.data(), 的程式碼替換為以下程式碼：
    ...prepareMessage(doc.data()),
  3. 儲存檔案。
  4. 返回瀏覽器中執行的網路應用程式。
  5. 請重新載入頁面。

你也可以試試與聊天機器人對話，並提供歷史脈絡：

  1. 在「輸入訊息」文字方塊中提出問題，例如：Any other interesting talks about AI?聊天機器人會回覆。
  2. 在「輸入訊息」文字方塊中，提出與上一個問題相關的後續問題：Give me a few more details about the last one.

聊天機器人會根據過往知識回覆。由於對話記錄現在是脈絡的一部分，聊天機器人可以理解後續問題。

7. 設定「透過 Gemini API 執行多模態工作」擴充功能

「Multimodal Tasks with the Gemini API」擴充功能會使用多模態提示呼叫 Gemini API，其中包含文字提示，以及支援的檔案網址或 Cloud Storage 網址 (請注意，即使是 Google AI Gemini API，也是使用 Cloud Storage 網址做為基礎檔案網址基礎架構)。擴充功能也支援 Handlebars 變數，可從 Cloud Firestore 文件中替換值，自訂文字提示。

在應用程式中，每當您將圖片上傳至 Cloud Storage 值區時，都可以產生網址，並將該網址新增至新的 Cloud Firestore 文件，藉此觸發擴充功能建立多模態提示並呼叫 Gemini API。在本程式碼研究室的原始碼中，我們已提供上傳圖片的程式碼，並將網址寫入 Firestore 文件。

安裝「透過 Gemini API 執行多模態工作」擴充功能

  1. 前往「透過 Gemini API 執行多模態工作」擴充功能。
  2. 按一下「在 Firebase 控制台中安裝」。
  3. 選取 Firebase 專案。
  4. 依序點選「下一步」>「下一步」>「下一步」，直到進入「設定擴充功能」部分。
    1. 在「Gemini API Provider」(Gemini API 提供者) 選單中，選取要使用 Google AI 或 Vertex AI 的 Gemini API。如果開發人員使用 Firebase，建議使用 Vertex AI。
    2. 在「Firestore Collection Path」(Firestore 集合路徑) 文字方塊中輸入：gallery
    3. 在「提示」文字方塊中輸入：Please describe the provided image; if there is no image, say "no image"
    4. 在「Image field」(圖片欄位) 文字方塊中輸入：image
    5. 在「Cloud Functions location」(Cloud Functions 位置) 選單中，選取偏好的位置 (例如 Iowa (us-central1) 或先前為 Firestore 資料庫指定的位置)。
    6. 其他值則保留預設狀態。
  5. 按一下「安裝擴充功能」，然後等待擴充功能安裝完成。

試用「透過 Gemini API 執行多模態工作」擴充功能

本程式碼研究室的目標是透過網頁應用程式與「Multimodal Tasks with the Gemini API」擴充功能互動，但建議您先在 Firebase 控制台中試用，瞭解擴充功能的運作方式。

只要在 users/{uid}/gallery 集合下建立 Firestore 文件 (可在 Firebase 控制台中進行)，就會觸發擴充功能。接著，擴充功能會擷取 Cloud Firestore 文件中的 Cloud Storage 圖片網址，並在呼叫 Gemini API 時，將該網址做為多模態提示的一部分傳遞。

首先，將圖片上傳至 Cloud Storage 值區：

  1. 在 Firebase 專案中前往「儲存空間」。
  2. 按一下「建立資料夾」17eeb1712828b84f.png。
  3. 在「Folder name」(資料夾名稱) 文字方塊中，輸入 galleryba63b07a7a04f055.png
  4. 按一下 [Add folder]。
  5. 在 gallery 資料夾中，按一下「上傳檔案」。
  6. 選取要上傳的 JPEG 圖片檔案。

接著，將圖片的 Cloud Storage 網址新增至 Firestore 文件 (這是擴充功能的觸發條件)：

  1. 在 Firebase 專案中前往 Firestore
  2. 按一下第一欄中的「啟動集合」63873f95ceaf00ac.png。
  3. 在「Collection ID」文字方塊中輸入：gallery，然後點選「Next」。
  4. 將文件新增至集合：
    1. 在「Document ID」(文件 ID) 文字方塊中，按一下「Auto-ID」(自動 ID)。
    2. 在「欄位」文字方塊中輸入：image。在「Value」(值) 方塊中，輸入剛上傳圖片的「Storage location」(儲存位置) URI。3af50c4266c2a735.png
  5. 按一下「新增欄位」。
  6. 在「欄位」文字方塊中輸入：published。在「Type」(類型) 方塊中選取「boolean」(布林值)。在「值」方塊中選取 true。9cacd855ff370a9f.png
  7. 按一下「儲存」，然後稍等幾秒鐘。

gallery 集合現在包含一份文件，其中含有查詢的回覆。

  1. 在瀏覽器中，返回執行本機 Friendly Conf 網頁應用程式的分頁。
  2. 按一下「圖庫」導覽分頁標籤。
  3. 系統會顯示上傳圖片和 AI 生成說明的圖庫。當中應包含您先前上傳至 Storage bucket 中 gallery 資料夾的圖片。
  4. 按一下「上傳」按鈕，然後選取其他 JPEG 圖片。
  5. 等待幾秒，圖片就會顯示在圖片庫中。稍後，系統也會顯示 AI 生成的新上傳圖片說明。

如要瞭解實作方式的程式碼，請參閱網頁應用程式程式碼集中的 src/app/gallery/page.tsx。

8. 加分題：部署應用程式

Firebase 提供多種網頁應用程式部署方式。在本程式碼研究室中，請選擇下列其中一個選項：

  • 選項 1：Firebase Hosting - 如果您決定不建立自己的 GitHub 存放區 (且只在本機電腦上儲存原始碼)，請使用這個選項。
  • 選項 2：Firebase App Hosting - 如果您希望每當將變更推送至自己的 GitHub 存放區時，系統都會自動部署，請使用這個選項。這項全新的 Firebase 服務專為動態 Next.js 和 Angular 應用程式的需求量身打造。

方法 1：使用 Firebase 託管部署

如果您決定不建立自己的 GitHub 存放區 (且只在本機電腦上儲存原始碼)，請使用這個選項。

  1. 在終端機中執行下列指令，初始化 Firebase 託管：
    firebase experiments:enable webframeworks
firebase init hosting
  2. 如要查看提示：Detected an existing Next.js codebase in your current directory, should we use this?，請按 Y。
  3. 在提示 In which region would you like to host server-side content, if applicable? 中，選取預設位置或您在本程式碼研究室稍早使用的位置。然後按下 Enter 鍵 (或 macOS 上的 return 鍵)。
  4. 如要查看提示：Set up automatic builds and deploys with GitHub?，請按 N。
  5. 執行下列指令，將網頁應用程式部署至 Hosting：
    firebase deploy --only hosting

大功告成！如果您更新應用程式並想部署新版本，只要重新執行 firebase deploy --only hosting，Firebase Hosting 就會建構並重新部署應用程式。

方法 2：使用 Firebase App Hosting 部署

如果您希望每次將變更推送到自己的 GitHub 存放區時，系統都能自動部署，請使用這個選項。

  1. 將變更修訂到 GitHub。
  2. 在 Firebase 主控台中，前往 Firebase 專案中的「App Hosting」。
  3. 依序點選「開始使用」 >「連結至 GitHub」。
  4. 選取 GitHub 帳戶和存放區。按一下 [Next] (下一步)。
  5. 在「部署設定」>「根目錄」中，輸入含有原始碼的資料夾名稱 (如果 package.json 不在存放區的根目錄中)。
  6. 在「Live branch」中，選取 GitHub 存放區的「main」分支版本。按一下 [Next] (下一步)。
  7. 輸入後端 ID (例如 chatbot)。
  8. 按一下「完成並部署」。

新的部署作業可能需要幾分鐘才能準備就緒。您可以在 Firebase 控制台的「應用程式代管」部分查看部署狀態。

從現在開始，每當您將變更推送至 GitHub 存放區時，Firebase 應用程式代管服務就會自動建構及部署應用程式。

9. 結論

恭喜！您在本程式碼研究室中學到許多內容！

安裝及設定擴充功能

您已使用 Firebase 控制台設定及安裝各種使用生成式 AI 的 Firebase 擴充功能。使用 Firebase 擴充功能很方便，因為您不需要學習及編寫大量樣板程式碼，即可處理 Google Cloud 服務的驗證，或後端 Cloud Functions 邏輯，以監聽及與 Firestore 和 Google Cloud 服務及 API 互動。

使用 Firebase 控制台試用擴充功能

您並未直接開始編寫程式碼，而是花時間瞭解這些 GenAI 擴充功能如何根據您透過 Firestore 或 Cloud Storage 提供的輸入內容運作。這在偵錯擴充功能輸出內容時特別有用。

建構 AI 輔助的網頁應用程式

您建構的 AI 輔助網頁應用程式使用 Firebase Extensions，存取 Gemini 模型的部分功能。

在網頁應用程式中，您可以使用「Chatbot with Gemini API」擴充功能，為使用者提供互動式對話介面，其中包含對話中的應用程式專屬和歷來脈絡，且每則訊息都會儲存在特定使用者的 Firestore 文件中。

此外，網頁應用程式也使用「Multimodal Tasks with the Gemini API」擴充功能，自動為上傳的圖片生成說明文字。

後續步驟