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

本指南說明如何使用App Prototyping agent，在 Firebase 中透過 Gemini 的協助，快速開發及發布全堆疊應用程式。您將使用自然語言提示產生 Next.js 應用程式，該應用程式可從相片或瀏覽器內建相機辨識食物項目，並產生含有已識別食材的食譜。

您在本指南中會用到的其他技術包括：

Firebase Studio

步驟 1：產生應用程式

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

  2. 在「使用 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 MB。

  4. 按一下「使用 AI 技術製作原型」。

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

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

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

    • 在聊天窗格中的「描述...」欄位中，新增釐清問題和背景資訊。你也可以上傳其他圖片。

  6. 按一下「製作此應用程式原型」。

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

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

步驟 2：測試、精進、偵錯及重複執行

產生初始應用程式後，您可以進行測試、調整、偵錯和重複執行。

  • 查看並與應用程式互動：程式碼產生完成後，系統會顯示應用程式的預覽畫面。您可以直接與預覽畫面互動，進行測試。如需進一步瞭解，請參閱「預覽應用程式」。

  • 修正任何錯誤：在多數情況下，App Prototyping agent 會提示您修正任何錯誤。按一下「Fix Error」，讓系統嘗試修正錯誤。

    如果您收到錯誤，但系統不會自動提示您修正，請將錯誤和任何相關背景資訊 (例如「您能否修正我的 Firebase 初始化程式碼中的這個錯誤？」) 複製到即時通訊視窗，然後傳送給 Gemini。

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

    在 Prototyper mode, you can also use the following features: 中

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

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

    您也可以按一下 連結圖示「分享預覽連結」，使用 Firebase Studio「公開測試」功能，將應用程式公開測試。

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

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

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

    • 在 Firebase 中使用 Gemini 提供 AI 協助，可在程式碼內嵌或透過互動式即時通訊 (預設可使用這兩種方式)。互動式即時通訊功能可診斷問題、提供解決方案，並執行工具，協助您更快修正應用程式。如要使用即時通訊功能，請按一下工作區底部的「火花」圖示 Gemini。

    • 存取 Firebase Local Emulator Suite 以查看資料庫和驗證資料。如何在工作區中開啟模擬器：

      1. 按一下 程式碼切換圖示「Switch to Code」，然後開啟 Firebase Studio 擴充功能 (Ctrl+',Ctrl+'，或在 macOS 上為 Cmd+',Cmd+')。

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

      3. 在對應於「Port 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 開發人員 UI 連結。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 會顯示與工作區相關聯的 Firebase。如果系統在產生 Gemini API 金鑰時未建立專案，就會為您建立新專案。點選「下一步」繼續操作。

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

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

    • 如果您沒有 Cloud Billing 帳戶，或想要建立新帳戶，請按一下「建立 Cloud Billing 帳戶」。系統會開啟 Google Cloud 控制台，您可以在其中建立新的自助 Cloud Billing 帳戶。建立帳戶後，請返回 Firebase Studio，然後從「Link 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 新增至公開發布的任何應用程式，以免後端資源遭到濫用。

本節將引導您在 Firebase Studio 中設定 App Check，並使用 reCAPTCHA Enterprise 為 App Prototyping agent 建立的網頁應用程式，但您也可以在任何實作 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. 接受預設的「網頁」「應用程式類型」鍵。

  6. 按一下「新增網域」，然後新增網域。您需要新增 App Hosting 網域 (例如 studio--PROJECT_ID.REGION.hosted.app)，以及您在應用程式中使用或計畫使用任何自訂網域。

  7. 點選「下一步」。

  8. 不要勾選「您會使用驗證問題嗎？」。

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

  10. 複製並儲存Key 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 將 App Check 與 reCAPTCHA Enterprise 新增至應用程式 (請務必指定「reCAPTCHA Enterprise」，並確實進行二次檢查！)，或是按照「初始化 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. 找出應用程式的後端，按一下「View」(查看)，然後點選「Rollouts」(推出)。

    3. 在要回溯的部署作業旁邊，按一下「更多」圖示 ，然後選擇「回溯至此版本」，並確認。

    詳情請參閱「管理推播和發布」。

  • 如何從網路上移除 App Hosting 網域：

    1. 在 Firebase 控制台中開啟 App Hosting，然後按一下 Firebase Studio 應用程式專區中的「查看」。

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

    3. 在網域旁邊，按一下「更多」圖示 ，然後選擇「停用網域」，並確認。

    這樣做會從網路上移除你的網域。如要完全移除 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。flows 資料夾中會顯示一或多個包含 Genkit 流程的 TypeScript 檔案。

  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 Agent (roles/cloudtrace.agent)
    • Logs Writer (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。

後續步驟