使用應用程式原型製作代理程式，開發、發布及監控全端網頁應用程式

本指南說明如何使用 App Prototyping agent，在 Firebase 中透過 Gemini 快速開發及發布全端應用程式。您將使用自然語言提示生成 Next.js 應用程式，識別圖片或瀏覽器相機中的食物，並生成包含所識別食材的食譜。

在本指南中，您還會使用下列技術：

• Firebase Studio 工作區
• Firebase 專案
• Firebase App Hosting
• Firebase App Check

步驟 1：產生應用程式

1. 登入 Google 帳戶並開啟 Firebase Studio。

2. 在「Prototype an app with AI」(使用 AI 製作應用程式原型) 欄位中，輸入下列提示，即可建立使用瀏覽器攝影機和生成式 AI 的圖片式食譜應用程式。

   舉例來說，您可以輸入下列提示，建立食譜生成應用程式：

   Use secure coding practices to create an error-free web app that lets
   users upload a photo or take a picture with their browser
   camera. The app identifies the food in the picture and generates a
   recipe and accompanying image that includes that food.
   
   If no food product is identified, generate a random dessert recipe.
   

3. 你也可以選擇上傳圖片，搭配提示使用。舉例來說，您可以上傳包含應用程式所需色彩配置的圖片，並告知 Firebase Studio 使用該配置。圖片不得大於 3 MiB。

4. 按一下「Prototype with AI」(使用 AI 製作原型)。

   Gemini 會根據提示生成應用程式藍圖，並傳回建議的應用程式名稱、必要功能和樣式指南。

5. 查看藍圖。視需要進行一些變更。舉例來說，您可以透過下列任一選項，變更建議的應用程式名稱或色彩配置：

   • 按一下「自訂」edit，直接編輯藍圖。進行變更，然後按一下「儲存」。

   • 在對話窗格的「Describe...」(說明...) 欄位中，新增釐清問題的相關問題和背景資訊。你也可以上傳其他圖片。

6. 按一下「Prototype this app」(製作這個應用程式的原型)。

7. 應用程式原型設計代理程式會開始編寫應用程式程式碼。

   • 由於您的應用程式使用 AI，系統會提示您新增或產生 Gemini API 金鑰。按一下「自動產生」後，App Prototyping agent 會為您佈建 Firebase 專案和 Gemini API 金鑰。

步驟 2：測試、修正、偵錯及反覆運算

產生初始應用程式後，您可以測試、修正、偵錯及疊代。

• 檢查應用程式並與之互動：程式碼生成完成後，系統會顯示應用程式的預覽畫面。您可以直接與預覽畫面互動，測試效果。詳情請參閱「預覽應用程式」。

• 修正發生的錯誤：在大多數情況下，App Prototyping agent會提示您修正發生的錯誤。按一下「修正錯誤」，讓系統嘗試修正問題。

  如果收到錯誤訊息，但系統未提示自動修正，請將錯誤訊息和任何相關內容 (例如「Can you fix this error in my Firebase initialization code?」) 複製到對話視窗，然後傳送給 Gemini。

• 使用自然語言測試及疊代：徹底測試應用程式，並與 App Prototyping agent 合作疊代程式碼和藍圖，直到滿意為止。

  在「Prototyper mode, you can also use the following features:」的旅遊建議

  • 按一下「註解」，直接在「預覽」視窗中繪圖。使用可用的形狀、圖片和文字工具，以及選用的文字提示，以視覺化方式描述您希望 App Prototyping agent 變更的內容。

  • 按一下「選取」，選取特定元素，然後輸入 App Prototyping agent 的指令。這樣就能快速指定特定圖示、按鈕、文字或其他元素。按一下圖片時，您也可以選擇從 Unsplash 搜尋及選取圖庫圖片。

  (選用) 您可以按一下「分享預覽連結」，透過Firebase Studio 公開測試暫時公開分享應用程式。

• 直接在程式碼中偵錯及疊代：按一下「切換至程式碼」圖示 開啟 Code 檢視畫面，即可查看應用程式的所有檔案，並直接修改程式碼。你可以切換回 Prototyper mode at any time.

  在「Code」檢視畫面中，你也可以使用下列實用功能：

  • Firebase Studio的內建偵錯和報告功能，檢查、偵錯及稽核應用程式。

  • 在 Firebase中透過 Gemini 取得 AI 輔助， 包括在程式碼中內嵌使用，或透過互動式對話使用 (兩者預設皆可使用)。互動式對話可診斷問題、提供解決方案，以及執行工具，協助您更快修正應用程式。如要存取即時通訊，請按一下工作區底部的火花圖示 Gemini。

  • 存取 Firebase Local Emulator Suite，查看資料庫和驗證資料。如要在工作區中開啟模擬器，請按照下列步驟操作：

    1. 按一下 「切換至程式碼」，然後開啟 Firebase Studio 擴充功能 (在 Windows 上按 Ctrl+',Ctrl+' 鍵，或在 macOS 上按 Cmd+',Cmd+' 鍵)。

    2. 捲動至「後端連接埠」並展開。

    3. 在「Port 4000」(連接埠 4000) 對應的「Actions」(動作) 欄中，按一下「Open in new window」(在新視窗中開啟)。

• 測試及評估生成式 AI 功能的成效：您可以使用 Genkit 開發人員 UI 執行 Genkit AI 流程、測試、偵錯、與不同模型互動、調整提示等。

  如要在 Genkit 開發人員 UI 中載入 Genkit 流程並開始測試，請按照下列步驟操作：

  1. 在 Firebase Studio 工作區的終端機中執行下列指令，取得 Gemini API 金鑰並啟動 Genkit 伺服器：

      npm run genkit:watch
     

  2. 按一下 Genkit 開發人員使用者介面連結。Genkit 開發人員使用者介面會在新的視窗中開啟，顯示流程、提示、嵌入器，以及各種可用的模型。

  如要進一步瞭解 Genkit 開發人員 UI，請參閱 Genkit 開發人員工具。

(選用) 步驟 3：使用 App Hosting 發布應用程式

在工作區中測試應用程式並對結果感到滿意後，即可使用 Firebase App Hosting 將應用程式發布至網路。

設定 App Hosting 時，Firebase Studio 會為您建立 Firebase 專案 (如果系統尚未透過自動產生 Gemini API 金鑰建立專案)，並引導您連結 Cloud Billing 帳戶。

如要發布應用程式，請按照下列步驟操作：

1. 按一下「發布」，設定 Firebase 專案並發布應用程式。畫面上會顯示「發布應用程式」窗格。

2. 在「Firebase 專案」步驟中，App Prototyping agent 會顯示與 Workspace 相關聯的 Firebase。如果系統在Gemini API金鑰產生期間未建立專案，就會為您建立新專案。按一下「Next」(下一步)繼續操作。

3. 在「連結 Cloud Billing 帳戶」步驟中，選擇下列其中一個選項：

   • 選取要連結至 Firebase 專案的 Cloud Billing 帳戶。

   • 如果沒有 Cloud Billing 帳戶，或想建立新帳戶，請按一下「建立 Cloud Billing 帳戶」。系統會開啟 Google Cloud 控制台，您可以在其中建立新的自助式帳戶。Cloud Billing建立帳戶後，請返回 Firebase Studio，然後從「連結 Cloud Billing」清單中選取帳戶。

4. 點選「繼續」，Firebase Studio 將帳單帳戶連結至與工作區相關聯的專案，該專案是在您自動產生 Gemini API 金鑰或點選「發布」時建立。

5. 點按「設定服務」，應用程式原型製作代理程式會開始佈建 Firebase 服務。

6. 按一下「立即發布」。Firebase Studio 會設定 Firebase 服務。這項作業可能需要幾分鐘才能完成。 如要進一步瞭解幕後作業，請參閱「App Hosting 建構程序」。

7. 發布步驟完成後，系統會顯示「應用程式總覽」，其中包含網址和由 App Hosting 可觀測性技術提供的應用程式洞察資料。如要使用自訂網域 (例如 example.com 或 app.example.com) 取代 Firebase 產生的網域，可以在 Firebase 控制台中新增自訂網域。

如要進一步瞭解 App Hosting，請參閱「瞭解 App Hosting 和運作方式」。

(建議採行) 步驟 6：在應用程式中加入 Firebase App Check

如果您已將 Firebase 或 Google Cloud 服務整合至應用程式，Firebase App Check 有助於防止未經授權的用戶端存取 Firebase 資源，保護應用程式後端免於遭到濫用。這項服務可與 Google 服務 (包括 Firebase 和 Google Cloud 服務) 和您自己的自訂後端搭配使用，確保資源安全無虞。

建議您在公開發布的任何應用程式中加入 App Check，以免後端資源遭到濫用。

本節將逐步說明如何使用 reCAPTCHA Enterprise，在 App Prototyping agent 建立的 Web 應用程式中設定 App CheckFirebase Studio，但您也可以在任何實作 Firebase 服務且可實作自訂供應商的應用程式中設定 App Check。如要瞭解詳情，請前往 Firebase App Check。

ReCAPTCHA Enterprise 最多可免費提供 10,000 次評估。

步驟 1：為應用程式設定 reCAPTCHA Enterprise

1. 開啟 Google Cloud 控制台的「reCAPTCHA Enterprise」部分。

2. 在 Google Cloud 控制台專案挑選器中，選取 Firebase 專案名稱。

3. 如果系統提示您啟用 reCAPTCHA Enterprise API，請啟用。

4. 按一下「開始使用」，然後為 reCAPTCHA 網站金鑰新增「顯示名稱」。

5. 接受預設的「Web」「應用程式類型」金鑰。

6. 按一下「新增網域」並新增網域。您需要新增 App Hosting 網域 (例如 studio--PROJECT_ID.REGION.hosted.app)，以及您用於或打算用於應用程式的任何自訂網域。

7. 點選「下一步」。

8. 取消選取「您會使用驗證問題嗎？」。

9. 按一下 [Create key] (建立金鑰)。

10. 複製並儲存「金鑰 ID」，然後繼續設定 App Check。

步驟 2：設定 App Check

1. 開啟 Firebase 控制台，然後依序點選導覽選單中的「Build」 >「App Check」。

2. 依序點選「開始使用」和應用程式旁的「註冊」。

3. 按一下展開「ReCAPTCHA」，然後貼上您為 reCAPTCHA Enterprise 產生的金鑰 ID。

4. 按一下 [儲存]。

步驟 3：在程式碼中新增 App Check

1. 返回 Firebase Studio，在 Code 檢視畫面中，將產生的網站金鑰新增至 .env 檔案：

   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

2. 如果您尚未將 Firebase 設定儲存至 .env，請取得設定：

   • 在 Firebase 控制台中開啟「專案設定」，然後在對應應用程式的部分中找到該設定。

   • 從 Code 檢視畫面中的終端機：

     1. 登入 Firebase：firebase auth login
     2. 選取專案： firebase use FIREBASE_PROJECT_ID
     3. 取得 Firebase 設定：firebase apps:sdkconfig

3. 在 .env 檔案中新增設定，如下所示：

   NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

4. 在應用程式程式碼中加入 App Check。您可以要求 Gemini 在應用程式中新增 reCAPTCHA Enterprise (請務必指定「reCAPTCHA Enterprise」並仔細檢查！)，或按照「初始化App Check」一節中的步驟操作。App Check

5. 重新發布協作平台至 App Hosting。請嘗試測試 Firebase 功能，產生一些資料。

6. 開啟「Build」(建構) >「App Check」(應用程式檢查)，確認 App Check 是否在 Firebase 控制台中收到要求。

7. 按一下即可檢查 Firebase 服務。確認收到要求後，按一下「強制執行」，強制執行 App Check。

8. 針對 Firebase Authentication 重複驗證和強制執行程序。

如果您已為應用程式註冊 App Check，但想在 App Check 通常不會歸類為有效的環境中執行應用程式 (例如在本機開發期間，或從持續整合 (CI) 環境執行)，可以建立應用程式的偵錯版本，使用 App Check 偵錯供應器，而非實際的認證供應器。詳情請參閱在網頁應用程式中使用 App Check 搭配偵錯供應器。

(選用) 步驟 7：監控應用程式

Firebase Studio 的「應用程式總覽」面板會提供應用程式的重要指標和資訊，讓您使用 App Hosting 的內建可觀測性工具監控網頁應用程式的效能。網站推出後，按一下「發布」即可存取總覽。您可以在這個面板中執行下列操作：

• 按一下「發布」，發布新版應用程式。
• 分享應用程式連結，或直接在「前往您的應用程式」中開啟應用程式。
• 查看應用程式過去 7 天的成效摘要，包括請求總數和最新推出版本的狀態。按一下「查看詳細資料」，即可在 Firebase 控制台中查看更多資訊。
• 查看應用程式在過去 24 小時內收到的要求數圖表，並依 HTTP 狀態碼細分。

如果關閉「應用程式總覽」面板，隨時可以點選「發布」重新開啟。

如要進一步瞭解如何管理及監控App Hosting推出作業，請參閱「管理推出作業和發布版本」。

(選用) 步驟 8：回溯部署作業

如果您已將連續多個版本的應用程式部署至 App Hosting，可以將應用程式還原為先前的版本。你也可以移除這個擴充功能。

• 如要復原已發布的網站，請按照下列步驟操作：

  1. 在Firebase控制台中開啟 App Hosting。

  2. 找出應用程式的後端，依序點選「查看」和「推出」。

  3. 在要還原的部署作業旁邊，按一下「更多」 more_vert，然後選擇「Roll back to this build」(還原至這個版本)，並確認。

  詳情請參閱「管理推出和發布作業」。

• 如要從網頁移除 App Hosting 網域，請按照下列步驟操作：

  1. 在 Firebase 控制台中，開啟 App Hosting，然後在 Firebase Studio 應用程式部分中點選「查看」。

  2. 在「後端資訊」部分，按一下「管理」。系統會載入「網域」頁面。

  3. 在網域旁邊，依序點選「更多」more_vert「停用網域」，然後確認。

  這樣做會從網路上移除網域。如要完全移除後端，請按照「刪除後端」一文中的操作說明進行。App Hosting

(選用) 步驟 9：使用 Genkit Monitoring 監控已部署的功能

您可以為 AI 流程程式碼啟用遙測功能，監控 Genkit 功能步驟、輸入內容和輸出內容。Genkit 的遙測功能可讓你監控 AI 流程的效能和使用情況。這項資料有助於找出可改善的部分、排解問題、最佳化提示和流程，以提升效能和成本效益，以及追蹤流程的用量變化。

如要在 Genkit 中設定監控功能，請將遙測資料新增至 Genkit AI 流程，然後在 Firebase 控制台中查看結果。

步驟 1：在 Firebase Studio 中，將遙測資料新增至 Genkit 流程程式碼

如要在程式碼中設定監控功能，請按照下列步驟操作：

1. 如果尚未進入 Code 檢視畫面，請按一下 「Switch to Code」(切換至程式碼) 開啟。

2. 檢查 package.json，確認已安裝的 Genkit 版本。

3. 開啟終端機 (Ctrl-Shift-C，或 MacOS 中的 Cmd-Shift-C)。

4. 在終端機內按一下，然後使用與 package.json 檔案相符的版本，安裝 Firebase 外掛程式。舉例來說，如果 package.json 中的 Genkit 套件版本為 1.0.4，您應執行下列指令來安裝外掛程式：

   npm i --save @genkit-ai/firebase@1.0.4

5. 在「Explorer」中展開 src > ai > flows。包含 Genkit 流程的一或多個 TypeScript 檔案會顯示在 flows 資料夾中。

6. 按一下其中一個流程即可開啟。

7. 在檔案的匯入部分底部，新增下列程式碼來匯入及啟用 FirebaseTelemetry：

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

步驟 2：設定權限

Firebase Studio 在設定 Firebase 專案時，會為您啟用必要 API，但您也需要提供 App Hosting 服務帳戶的權限。

如何設定權限：

1. 開啟 Google Cloud IAM 控制台，選取專案，然後將下列角色授予 App Hosting 服務帳戶：

   • 「Monitoring 指標寫入者」 (roles/monitoring.metricWriter)
   • Cloud Trace 代理程式 (roles/cloudtrace.agent)
   • 「記錄寫入者」 (roles/logging.logWriter)

2. 重新發布應用程式至 App Hosting。

3. 發布完成後，請載入應用程式並開始使用。五分鐘後，應用程式應該會開始記錄遙測資料。

步驟 3：在 Firebase 控制台中監控生成式 AI 功能

設定遙測後，Genkit 會記錄所有流程的要求數量、成功次數和延遲時間，並為每個特定流程收集穩定性指標、顯示詳細圖表，以及記錄擷取的追蹤記錄。Genkit

如要監控使用 Genkit 實作的 AI 功能，請按照下列步驟操作：

1. 五分鐘後，開啟Firebase 控制台中的 Genkit，並查看 Genkit 的提示和回覆。

   Genkit 會編譯下列穩定性指標：

   • 要求總數：流程收到的要求總數。
   • 成功率：成功處理的要求百分比。
   • 第 95 個百分位數的延遲時間：流程的第 95 個百分位數延遲時間，也就是處理 95% 要求所需的時間。

   • 權杖用量：

     • 輸入權杖：提示中傳送給模型的權杖數量。
     • 輸出權杖：模型在回覆中生成的權杖數量。

   • 圖片使用方式：

     • 輸入圖片：提示中傳送給模型的圖片數量。
     • 輸出圖片：模型在回應中生成的圖片數量。

   展開穩定性指標後，即可查看詳細圖表：

   • 一段時間內的要求量。
   • 一段時間內的成功率。
   • 一段時間內的輸入和輸出權杖。
   • 一段時間內的延遲時間 (第 95 和第 50 個百分位數)。

如要進一步瞭解 Genkit，請前往 Genkit。

後續步驟

• 瞭解如何在 Firebase Studio 工作區中開發應用程式。
• 進一步瞭解 AI 輔助功能。Firebase Studio