開始使用應用程式原型設計代理程式

Firebase Studio 包含網路介面，可讓您使用多模態提示 (包括自然語言、圖像和繪圖工具) 快速製作原型，並產生 AI 前端網頁應用程式。這個服務代理程式支援 Next.js 應用程式，日後還會支援其他平台和架構。

應用程式原型製作服務代理程式是簡化的無程式碼開發流程，可利用生成式 AI 開發、測試、迭代及發布全堆疊的代理網頁應用程式。您可以使用自然語言和選用的圖片描述應用程式構想，服務代理程式就會產生應用程式藍圖、程式碼和網頁預覽畫面。為協助您開發及發布完整堆疊應用程式，Firebase Studio 可自動為您佈建以下服務：

  • 如果您的應用程式使用 AI： Firebase Studio 會將 Gemini Developer API 新增至您的應用程式，並利用 Genkit 流程的強大功能與 Gemini 搭配運作。您可以使用自己的 Gemini API 金鑰，也可以讓 Firebase Studio 為您配置 Firebase 專案和 Gemini API 金鑰。
  • 如要將應用程式發布至網路： Firebase Studio 會建立專案，並提供快速方法，讓您使用 Firebase App Hosting 發布應用程式。

您可以使用自然語言、圖片和繪圖工具精進應用程式，直接編輯程式碼、還原變更、發布應用程式，以及監控其效能，所有這些操作都可以在 Firebase Studio 中完成。

開始使用

如要開始使用 App Prototyping agent，請按照下列步驟操作：

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

  2. 在「使用 AI 建構應用程式原型」欄位中，用自然語言描述您的應用程式構想。

    您可以視需要在提示中加入圖片。這可以是應用程式理想使用者流程的圖表，或是您希望 Firebase Studio 遵循的色彩配置。圖片的大小不得超過 3 MiB。

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

    應用程式原型製作代理程式會傳回應用程式藍圖，其中提供建議的應用程式名稱、核心功能和樣式指南。

  4. 查看藍圖。您可以要求 Gemini 進行改善和變更，並直接編輯藍圖：

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

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

  5. 核准藍圖後，請按一下「製作應用程式原型」。

    Gemini 會根據藍圖產生程式碼，並傳回網頁預覽畫面供您查看。

  6. 如果您的應用程式使用 AI，系統會提示您新增或產生 Gemini API 金鑰。如果您點選「自動產生」，Firebase Studio 系統就會為您佈建 Firebase 專案和 Gemini API 金鑰。

建立初始應用程式後，您可以：

  • 測試並重複執行：仔細測試應用程式，並使用 App Prototyping agent 重複執行程式碼和藍圖，直到滿意為止。您也可以按一下 </> 進入程式碼檢視畫面，然後在 Firebase Studio 工作區中編輯程式碼。

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

  • 偵錯應用程式：按一下 程式碼切換圖示「Switch to Code」，開啟 Code 檢視畫面，您可以使用 Firebase Studio 的內建偵錯和回報功能檢查、偵錯及稽核應用程式。切換回 Prototyper mode at any time.

    。

  • 透過 Firebase App Hosting 發布應用程式：按一下「發布」，即可將應用程式發布至 App Hosting。

  • 監控及最佳化應用程式和 AI 功能：透過 App Hosting 中的可觀測性監控網頁應用程式的效能和用量，以及透過 Genkit 中的 Firebase 追蹤記錄監控生成式 AI 流程。請參閱「監控網頁應用程式」一文，進一步瞭解相關資訊。

後續步驟