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

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

Firebase Studio

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

步驟 1：產生應用程式

登入 Google 帳戶並開啟 Firebase Studio。
在「Prototype an app with AI」欄位中，輸入要建構的應用程式說明。針對這個解決方案，也就是建立以圖像為主的食譜應用程式，您可以使用以下提示，為使用相機和生成式 AI 的應用程式製作原型：
```
Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.
```
提示： 您也可以上傳圖片，搭配提示訊息使用。舉例來說，您可以上傳包含應用程式所需色彩配置的圖片，並告知 Firebase Studio 使用該色彩配置。圖片大小不得超過 3 MiB。
按一下「使用 AI 技術製作原型」。

Gemini 會根據提示產生應用程式藍圖，並傳回建議的應用程式名稱、必要功能和樣式規範。
查看藍圖並進行一些變更。舉例來說，您可以使用下列任一選項變更建議的應用程式名稱或色彩配置：
- 按一下「自訂」，直接編輯藍圖。進行修改後，按一下「儲存」。
- 在聊天窗格中的「描述...」欄位中，新增釐清問題和背景資訊。你也可以上傳其他圖片。
按一下「Prototype this app」。Gemini 開始編寫應用程式程式碼。由於應用程式說明描述了需要生成式 AI 的功能，Gemini 會提示您輸入 Gemini API 鍵。
新增您自己的 Gemini API 金鑰，或按一下「自動產生」來產生 Gemini API 金鑰。

重要事項： 如果您選擇「自動產生」，App Prototyping agent 會代表您建立Firebase 專案，前置字串會與 Firebase Studio 工作區名稱相符，並在專案中建立新的 Gemini API 鍵。並將金鑰儲存在 .env 檔案中的 Firebase Studio 工作區中。如要隨時存取新專案，請按一下頁面頂端的專案名稱。如要存取 Gemini API 金鑰以便日後複製或刪除，請使用 Google Cloud 主控台。

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

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

查看應用程式並與其互動：程式碼產生完成後，應用程式預覽畫面就會顯示。您可以直接與預覽畫面互動，進行測試。
應用程式迭代：繼續使用聊天介面，要求 Gemini 新增功能並改善應用程式。或者，您也可以按一下「切換至程式碼」來開啟 Code 檢視畫面，直接在 Firebase Studio 工作區中編輯程式碼。
測試應用程式：在應用程式預覽窗格中，上傳顯示不同食物的圖片，測試應用程式是否能識別食材並提供食譜。您也可以使用 Code 檢視畫面，透過 Firebase Studio 公開測試版分享應用程式。
偵錯應用程式：按一下「切換至程式碼」即可開啟 Code 檢視畫面，您可以使用 Firebase Studio 的內建偵錯和回報功能檢查、偵錯及稽核應用程式。您隨時可以切換回 App Prototyping agent。Code

提示： 在 Code 檢視畫面中，您可以在互動式即時通訊和內嵌模式中使用 Gemini。互動式即時通訊功能可診斷問題、提供解決方案，並執行工具，協助您更快修正應用程式。如要啟用互動式即時通訊，請按一下底部工作區選單中的「火花」圖示。如要啟用內文協助功能，請按一下工作區選單頂端的 spark。詳情請參閱「AI 協助功能在 Firebase Studio」
。
重複執行：如果應用程式無法如預期運作，請調整提示，使用聊天窗格要求 Gemini 調整應用程式，或直接編輯程式碼 Code。

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

測試應用程式並感到滿意後，您可以使用 Firebase App Hosting 將應用程式發布到網路。

設定 App Hosting 時，Firebase Studio 會為您建立 Firebase 專案，並引導您連結 Cloud Billing 帳戶。

如要將應用程式發布至 Firebase App Hosting，請按照下列步驟操作：

按一下「發布」，建立新的 Firebase 專案，並開始App Hosting設定。系統隨即會顯示「發布應用程式」窗格。

重要事項： 如果您沒有自動產生 Gemini API 金鑰，Firebase Studio 會在您點選「發布」時為您佈建 Firebase 專案。您可以按一下頁面頂端的專案名稱，存取 Firebase 專案。
在「Firebase 專案」步驟中，請記下系統為您建立的 Firebase 專案名稱，然後按一下「下一步」。
在「連結 Cloud Billing 帳戶」步驟中，選擇下列其中一個選項：
- 選取要連結至 Firebase 專案的 Cloud Billing 帳戶。
- 如果您沒有 Cloud Billing 帳戶，或想要建立新帳戶，請按一下「建立 Cloud Billing 帳戶」。系統會開啟 Google Cloud 控制台，您可以在其中建立新的自助 Cloud Billing 帳戶。建立帳戶後，請返回 Firebase Studio，然後從「Link Cloud Billing」清單中選取帳戶。
點選「下一步」。Firebase Studio 會將帳單帳戶連結至與工作區相關聯的專案，該專案是在您自動產生 Gemini API 金鑰或點選「發布」時建立。接著，App Hosting 會在 Google Cloud 中為應用程式設定全代管環境。

重要事項： 連結付款帳戶後，專案會從免付費的 Spark 定價方案升級為即付即用 Blaze 定價方案。如要進一步瞭解，請參閱「Firebase Studio 定價」
。
按一下「建立第一個推出計畫」。Firebase Studio 會啟動 App Hosting 的推出作業。這項作業最多可能需要十分鐘才能完成。如要進一步瞭解幕後運作情形，請參閱「App Hosting 建構程序」。

提示： 如果您不想立即建立推行計畫，可以點選「稍後建立推行計畫」。
推出完成後，系統會顯示「應用程式總覽」，其中包含網址和由 App Hosting 可觀察性提供的應用程式深入分析。如要使用自訂網域 (例如 example.com 或 app.example.com) 而非 Firebase 產生的網域，您可以在 Firebase 控制台中新增自訂網域。

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

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

App Hosting「應用程式總覽」面板會提供應用程式的重點指標和相關資訊，讓您使用 App Hosting 內建的可觀察性工具監控網頁應用程式的效能。網站推出後，您可以按一下「發布」，查看總覽。您可以透過這個面板執行下列操作：

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

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

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

(選用) 步驟 5：回復部署作業

如果您已將應用程式的後續版本部署至 App Hosting，可以將其還原為其中一個舊版。你也可以移除該擴充功能。

如要還原已發布的網站，請按照下列步驟操作：
1. 在 Firebase 控制台中開啟 App Hosting。
2. 找出應用程式的後端，按一下「View」(查看)，然後點選「Rollouts」(發布)。
3. 在要回溯的部署作業旁邊，按一下「更多」圖示，然後選擇「回溯至此版本」，並確認。
詳情請參閱「管理推播和發布」。
如何從網路上移除 App Hosting 網域：
1. 在 Firebase 控制台中開啟 App Hosting，然後按一下 Firebase Studio 應用程式專區中的「查看」。
2. 在「後端資訊」部分，按一下「管理」。系統會載入「Domains」頁面。
3. 在網域旁邊，按一下「更多」圖示，然後選擇「停用網域」，並確認。
這樣做會從網路上移除你的網域。如要完全移除 App Hosting 後端，請按照「刪除後端」一節的操作說明進行。

(選用) 步驟 6：針對已部署的功能使用 Genkit Monitoring

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

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

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

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

如果您尚未在 Code 檢視畫面中，請按一下「切換至程式碼」開啟。
檢查 package.json，確認已安裝的 Genkit 版本。
開啟終端機 (Ctrl-Shift-C，或在 macOS 中為 Cmd-Shift-C)。
按一下終端機內的按鈕，然後使用與 package.json 檔案相符的版本安裝 Firebase 外掛程式。舉例來說，如果 package.json 中的 Genkit 套件為 1.0.4，您應執行下列指令來安裝外掛程式：
```
npm i --save @genkit-ai/firebase@1.0.4
```
在「Explorer」中展開 src > ai > flows。flows 資料夾中會顯示一或多個包含 Genkit 流程的 TypeScript 檔案。
按一下其中一個流程即可開啟。

提示： 請注意檔案的 prompt 部分：您可以手動編輯這部分，以精進 Gemini 的回應。
在檔案的匯入項目部分底部，新增下列程式碼來匯入及啟用 FirebaseTelemetry：
```
import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();
```
提示： 如要進一步瞭解 Genkit 中的進階遙測選項，請參閱「進階設定」。

步驟 2：設定權限

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

如要設定權限，請按照下列步驟操作：

開啟 Google Cloud IAM 控制台，選取專案，然後將下列角色授予 App Hosting 服務帳戶：
- Monitoring 指標寫入者 (roles/monitoring.metricWriter)
- Cloud Trace Agent (roles/cloudtrace.agent)
- Logs Writer (roles/logging.logWriter)
重新發布應用程式至 App Hosting。
發布完成後，請載入應用程式並開始使用。五分鐘後，應用程式應會開始記錄遙測資料。

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

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

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

五分鐘後，請在 Firebase 控制台中開啟 Genkit，並查看 Genkit 的提示和回應。

Genkit 會編譯下列穩定性指標：
- 請求總數：流程收到的請求總數。
- 成功率：成功處理的要求百分比。
- 第 95 個百分位數的延遲時間：流程的第 95 個百分位數延遲時間，也就是處理 95% 要求所需的時間。
- 權杖用途：
  - 輸入符記：在提示中傳送至模型的符記數量。
  - 輸出符號：模型在回覆中產生的符號數量。
- 圖片使用權：
  - 輸入圖片：在提示中傳送至模型的圖片數量。
  - 輸出圖片：模型在回應中產生的圖片數量。
展開穩定性指標後，您可以查看詳細圖表：
- 要求量隨時間變化。
- 成功率隨時間變化。
- 輸入和輸出符記隨時間變化。
- 延遲時間 (第 95 和 50 個百分位數) 隨時間變化。

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

後續步驟

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