使用 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 的網頁應用程式。

Friendly Conference 的員工決定運用 AI 技術，為與會者提供令人滿意的個人化體驗。完成的會議應用程式會為與會者提供對話式 AI 聊天機器人，這項服務採用多模態生成式 AI 模型 (也稱為大型語言模型或 LLM)，可根據會議時間表和主題，回答一般主題的問題。聊天機器人具備歷史背景資訊，並瞭解目前日期/時間、Friendly Conf 主題和時間表，因此回覆內容可納入所有這些背景資訊。

5364a56a230ff075.png

Firebase 服務

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

Service

使用原因

Firebase 驗證

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

Cloud Firestore

您將文字資料儲存在 Cloud Firestore 中，再由 Firebase 擴充功能處理。

Cloud Storage for Firebase

您可以讀取及寫入 Cloud Storage，在網路應用程式中顯示圖片庫。

Firebase 安全性規則

您會部署安全性規則，以便保護 Firebase 服務的存取權。

Firebase Extensions

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

額外資訊：Firebase 本機模擬器套件

您可以選擇使用本機模擬器套件在本機執行應用程式，而非連線至雲端中的許多即時 Firebase 服務。

額外獎勵：Firebase 代管

您可以選擇使用 Firebase 代管功能來提供網頁應用程式 (不需 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. 如果您沒有 Node.js 20.0.0 以上版本，請下載並安裝最新的 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)。
    請記下系統自動指派給 Firebase 專案的專案 ID (或按一下「編輯」圖示，設定您偏好的專案 ID)。您稍後會需要這個 ID，才能在 Firebase CLI 中識別 Firebase 專案。如果忘記 ID，之後隨時可以前往「專案設定」查看。
  3. 按一下「繼續」。
  4. 如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
  5. 在本程式碼研究室中，您不需要 Google Analytics，因此請關閉 Google Analytics 選項。
  6. 按一下「建立專案」，等待專案佈建完成，然後點選「繼續」。

升級 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 專案中的「專案總覽」畫面，然後按一下「Web」af10a034ec77938d.png。Firebase 專案頂端的「Web」按鈕
  2. 在「App nickname」文字方塊中輸入容易記住的應用程式暱稱，例如 My AI Extensions
  3. 依序點選「註冊應用程式」>「下一步」>「下一步」>「前往主控台」。
    您可以略過 Web 應用程式流程中的所有「代管」相關步驟，因為您稍後會在本程式碼研究室中選擇設定代管服務。

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

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

設定 Firebase 驗證

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

37e54f32f8133be3.png

設定 Cloud Firestore

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

設定 Cloud Storage for Firebase

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

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

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

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

  1. 前往「透過 Gemini API 打造聊天機器人」擴充功能。
  2. 按一下「在 Firebase 控制台中安裝」。
  3. 選取 Firebase 專案，然後按一下「下一步」。
  4. 在「查看已啟用的 API 和建立的資源」部分，點選任何建議服務旁邊的「啟用」，然後點選「下一步」。8e58e717da8182a2.png
  5. 針對系統建議的任何權限，請選取「授予」，然後點選「下一步」。269e1c3c4123425c.png
  6. 設定擴充功能：
    1. 在「Gemini API 供應商」選單中，選取要使用 Google AI 還是 Vertex AI 的 Gemini API。如果開發人員使用 Firebase，建議使用 Vertex AI。
    2. 在「Firestore 集合路徑」文字方塊中輸入：users/{uid}/messages。
      在本程式碼研究室的後續步驟中，將文件新增至這個集合會觸發擴充功能呼叫 Gemini API。
    3. 在「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. 在「收集 ID」文字方塊中輸入 users，然後按一下「下一步」。
  3. 在「文件 ID」文字方塊中，按一下「自動 ID」，然後點選「儲存」。
  4. 在 users 集合中，按一下「開始集合」dec3188dd2d1aa02.png。在 Firestore 中開始新的集合
  5. 在「收集 ID」文字方塊中輸入 messages，然後按一下「下一步」。
    1. 在「Document ID」文字方塊中，按一下「Auto-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」文字方塊中，按一下「Auto-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 常數。
  2. 將 Firebase 設定新增至網頁應用程式的程式碼集：
    1. 在程式碼編輯器中開啟 src/app/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. 向下捲動，然後將第 77 行或附近標示為 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.

聊天機器人會回覆歷史知識。由於對話記錄現在是情境的一部分，因此聊天機器人可以理解後續問題。

額外資訊：使用 Firebase 本機模擬器套件執行網頁應用程式

Firebase 本機模擬器套件可讓您在本機測試網頁應用程式的大部分功能。

  1. 在終端機中，確認您位於網路應用程式的根目錄。
  2. 執行下列指令，安裝並執行 Firebase 本機模擬器套件：
    firebase init emulators
firebase emulators:start

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

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

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

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

  1. 前往「透過 Gemini API 執行多模態工作」擴充功能。
  2. 按一下「在 Firebase 控制台中安裝」。
  3. 選取 Firebase 專案。
  4. 依序點選「Next」>「Next」>「Next」，直到看到「Configure extension」部分。
    1. 在「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
    5. 在「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 專案中的「Storage」。
  2. 按一下「建立資料夾」。17eeb1712828b84f.png
  3. 在「資料夾名稱」文字方塊中輸入 galleryba63b07a7a04f055.png。
  4. 按一下 [Add folder]。
  5. 在 gallery 資料夾中，按一下「上傳檔案」。
  6. 選取要上傳的 JPEG 圖片檔案。

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

  1. 前往 Firebase 專案中的 Firestore
  2. 按一下第一欄中的 63873f95ceaf00ac.png「啟動集合」。
  3. 在「收集 ID」文字方塊中輸入 gallery，然後按一下「下一步」。
  4. 將文件新增至珍藏內容：
    1. 在「文件 ID」文字方塊中，按一下「自動 ID」。
    2. 在「欄位」文字方塊中輸入：image。在「Value」方塊中，輸入剛才上傳圖片的「Storage location」uri。3af50c4266c2a735.png
  5. 按一下「新增欄位」。
  6. 在「欄位」文字方塊中輸入：published。在「Type」方塊中，選取「boolean」。在「Value」方塊中選取 true。9cacd855ff370a9f.png
  7. 按一下「儲存」，然後稍候幾秒鐘。

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

  1. 在瀏覽器中，返回當地執行 Friendly Conf 網路應用程式的分頁。
  2. 按一下「圖片庫」導覽分頁標籤。
  3. 您會看到上傳圖片的圖庫，以及 AI 生成的說明。這應該是先前上傳至 Storage 值區 gallery 資料夾的圖片。
  4. 按一下「上傳」按鈕，然後選取其他 JPEG 圖片。
  5. 請稍候幾秒，讓圖片顯示在相片庫中。幾秒後，系統也會顯示 AI 為新上傳圖片生成的說明。

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

8. 額外內容：部署應用程式

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

  • 選項 1：Firebase 代管 - 如果您決定不建立自己的 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. 執行下列指令，將您的網站應用程式部署至代管服務：
    firebase deploy --only hosting

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

方法 2：使用 Firebase App Hosting 部署

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

  1. 將變更內容提交至 GitHub。
  2. 在 Firebase 主控台中，前往 Firebase 專案中的「應用程式代管」頁面。
  3. 依序按一下「立即開始」 >「連結至 GitHub」。
  4. 選取「GitHub 帳戶」和「存放區」。按一下 [Next] (下一步)。
  5. 在「部署設定」>「根目錄」中，輸入原始碼所在資料夾的名稱 (如果 package.json 不在存放區的根目錄中)。
  6. 如要設定「Live 分支版本」，請選取 GitHub 存放區的「main」分支版本。按一下 [Next] (下一步)。
  7. 輸入後端 ID (例如 chatbot)。
  8. 按一下「完成並部署」。

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

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

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」擴充功能，自動產生上傳圖片的圖片說明。

後續步驟