本指南說明如何使用 App Prototyping agent，在 Gemini 的協助下快速開發及發布全端應用程式。您將使用自然語言提示生成 Next.js 應用程式，該應用程式會從已登入使用者提供的圖片或瀏覽器內相機辨識食品，並生成包含已辨識食材的食譜。使用者可以選擇將食譜儲存在可搜尋的資料庫中。
接著，您將修正及改善應用程式，最後發布至 Firebase App Hosting。
本指南還會用到其他技術，包括：
- Firebase Studio 工作區
- Firebase 專案
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
步驟 1：生成應用程式
登入 Google 帳戶並開啟 Firebase Studio。
在「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.你也可以上傳圖片，搭配提示詞使用。舉例來說，您可以上傳包含應用程式所需色彩配置的圖片，並指示 Firebase Studio 使用該圖片。圖片必須小於 3 MiB。
按一下「運用 AI 設計原型」。
App Prototyping agent 會根據提示生成應用程式藍圖，並傳回建議的應用程式名稱、必要功能和樣式指南。
查看藍圖。視需要進行調整。舉例來說，您可以使用下列任一選項，變更建議的應用程式名稱或色彩配置：
按一下「 Customize」(自訂)，然後直接編輯藍圖。進行修改後點選「儲存」。
在對話窗格的「Describe...」(說明...) 欄位中，新增釐清問題和背景資訊。你也可以上傳其他圖片。
點按「設計這個應用程式的原型」。
App Prototyping agent會開始編寫應用程式。
- 由於應用程式使用 AI，系統會提示您新增或產生 Gemini API 金鑰。如果點選「自動產生」，App Prototyping agent 會為您佈建 Firebase 專案和 Gemini API 金鑰。
步驟 2：測試、修正、偵錯及反覆調整
生成初始應用程式後，您可以測試、調整、偵錯及疊代。
查看應用程式並與其互動：程式碼生成完畢後，系統會顯示應用程式預覽畫面。您可以直接與預覽畫面互動，測試效果。詳情請參閱「預覽應用程式」。
新增 Cloud Firestore 和 Firebase Authentication：在疊代階段，您可以要求 App Prototyping agent 使用 Cloud Firestore 和 Firebase Authentication 新增使用者驗證和資料庫。舉例來說，您可以透過類似下方的提示，讓使用者儲存及下載食譜：
Add user authentication to the app. Authenticated users can: - Download the recipe and its generated image as a PDF (Print). - Save the recipe as public or private and make accessible to a search feature. For now, just save the text, not the image, to the database. Important: Only authenticated users can download the PDF.修正發生的錯誤：在多數情況下，App Prototyping agent 會提示您修正發生的錯誤。按一下「Fix Error」，讓系統嘗試修正錯誤。
如果收到錯誤訊息，但系統未提示您自動修正，請將錯誤訊息和任何相關內容 (例如「您可以修正 Firebase 初始化程式碼中的這個錯誤嗎？」) 複製到對話視窗，然後傳送給 Gemini。
使用自然語言測試及疊代：全面測試應用程式，並與 App Prototyping agent 合作，反覆調整程式碼和藍圖，直到滿意為止。
在 Prototyper 檢視畫面中，您也可以使用下列功能：
按一下「
註解」，即可直接在「預覽」視窗中繪圖。使用可用的形狀、圖片和文字工具，並視需要輸入文字提示詞，以視覺方式描述您希望 App Prototyping agent 變更的內容。按一下「
選取」，選取特定元素並輸入 App Prototyping agent 的操作說明。這樣一來，您就能快速指定特定圖示、按鈕、文字片段或其他元素。點選圖片後，您也可以選擇從 Unsplash 搜尋及選取圖庫圖片。
您也可以點選
「Share preview link」(分享預覽連結)，使用Firebase Studio公開預覽功能，暫時公開分享應用程式。建立 Firebase 專案：當您執行下列操作時，App Prototyping agent會代您佈建 Firebase 專案：
- 自動生成 Gemini API 金鑰
- 要求將應用程式連結至 Firebase 專案
- 詢問如何將應用程式連結至 Firebase 服務，例如 Cloud Firestore 或 Firebase Authentication
- 按一下「發布」按鈕，然後設定 Firebase App Hosting
如要變更連結至工作區的 Firebase 專案，請提示 App Prototyping agent，並提供要改用的專案 ID。例如「切換至 ID 為
<your-project-id>的 Firebase 專案」。測試應用程式並驗證 Cloud Firestore 資料庫規則：在應用程式預覽窗格中，上傳顯示不同食物的圖片，測試應用程式能否辨識食材，以及生成和儲存食譜。
以不同使用者身分登入並產生食譜：確認已驗證的使用者可以查看私人食譜和食譜，且所有使用者都能查看公開食譜。
當您要求 App Prototyping agent 新增 Cloud Firestore 時，系統會為您編寫及部署 Cloud Firestore 資料庫規則。在 Firebase 控制台中查看規則。
直接在程式碼中偵錯及疊代：點選「Switch to Code」
開啟 Code 檢視畫面，即可查看所有應用程式檔案，並直接修改程式碼。你隨時可以切換回Prototyper模式。在Code檢視畫面中，您也可以使用下列實用功能：
Firebase Studio 的內建偵錯和報告功能，檢查、偵錯及稽核應用程式。
使用 Gemini 的 AI 輔助功能： 在程式碼中內嵌，或使用 Gemini 互動式對話 (預設皆可使用)。互動式對話可診斷問題、提供解決方案，以及執行工具，協助您更快修正應用程式。如要使用對話功能，請按一下工作區底部的星形圖示 Gemini。
存取 Firebase Local Emulator Suite，查看資料庫和驗證資料。如要在工作區中開啟模擬器，請按照下列步驟操作：
按一下
「Switch to Code」，然後開啟 Firebase Studio 擴充功能 (Ctrl+',Ctrl+'，或在 MacOS 上按Cmd+',Cmd+')。捲動至「後端通訊埠」並展開。
在「Port 4000」(通訊埠 4000) 對應的「Actions」(動作) 欄中，按一下「Open in new window」(在新視窗中開啟)。
測試及評估生成式 AI 功能成效：您可以使用 Genkit Developer UI 執行 Genkit AI 流程、測試、偵錯、與不同模型互動、調整提示等。
如要在Genkit Developer UI中載入Genkit流程並開始測試，請按照下列步驟操作：
在 Firebase Studio 工作區的終端機中，執行下列指令來取得 Gemini API 金鑰，並啟動 Genkit 伺服器：
npm run genkit:watch按一下「Genkit Developer UI」連結。Genkit Developer UI 會在新視窗中開啟，顯示流程、提示、嵌入器和各種可用模型。
如要進一步瞭解 Genkit Developer UI，請參閱「Genkit 開發人員工具」。
(選用) 步驟 3：使用 App Hosting 發布應用程式
在工作區測試應用程式，確認滿意後，即可使用 Firebase App Hosting 將應用程式發布至網路。
設定 App Hosting 時，Firebase Studio 會為您建立 Firebase 專案 (如果尚未透過自動生成 Gemini API 金鑰或其他後端服務建立)，並引導您連結 Cloud Billing 帳戶。
如要發布應用程式，請按照下列步驟操作：
按一下「Publish」(發布)，設定 Firebase 專案並發布應用程式。系統會顯示「Publish your app」(發布應用程式) 窗格。
在「Firebase project」(Firebase 專案) 步驟中，App Prototyping agent 會顯示與工作區相關聯的 Firebase 專案。如果 Firebase 專案不存在，App Prototyping agent會為您建立新專案。點選「Next」(下一步) 繼續操作。
在「連結 Cloud Billing 帳戶」步驟中，選擇下列其中一個選項：
選取要連結至 Firebase 專案的 Cloud Billing 帳戶。
如果沒有 Cloud Billing 帳戶或想建立新帳戶， 請按一下「Create a Cloud Billing account」(建立 帳戶)。Google Cloud 控制台隨即開啟，您可以在其中建立新的自助式 Cloud Billing 帳戶。建立帳戶後，返回 Firebase Studio，然後從「Link Cloud Billing」(連結) 清單中 選取帳戶。
點選「下一步」。Firebase Studio 會將帳單帳戶連結至與工作區相關聯的專案，該專案是在您自動生成 Gemini API 金鑰或點選「Publish」(發布) 時建立。
按一下「設定服務」。App Prototyping agent 會開始佈建 Firebase 服務。
按一下「立即發布」。Firebase Studio 設定 Firebase 服務，然後啟動 App Hosting 推出作業。這項作業可能需要幾分鐘才能完成。如要進一步瞭解幕後運作情形，請參閱「App Hosting 建構程序」。
發布步驟完成後，系統會顯示「App overview」(應用程式總覽)，其中包含網址和由 App Hosting 觀測能力提供的應用程式洞察資料。如要使用自訂網域 (例如 example.com 或 app.example.com)，而非 Firebase 產生的網域，可以在 Firebase 控制台中新增自訂網域。
如要進一步瞭解 App Hosting，請參閱「瞭解 App Hosting 及其運作方式」。
(建議採行) 步驟 4：測試已發布的應用程式
發布完成且應用程式部署至 Firebase 後，Cloud Firestore 和 Firebase Authentication 即可在正式環境中測試。
為 Cloud Firestore 資料庫產生索引
將應用程式部署至 Cloud Firestore 時，系統不會自動產生索引。也就是說，發布後，您可能需要為查詢產生索引。
這類錯誤可能會顯示在錯誤訊息或瀏覽器的開發人員控制台中。
如要在發布後產生索引，請按照下列步驟操作：
從已發布的應用程式：在「App overview」(應用程式總覽) 窗格中 (如果未顯示，請按一下「Publish」(發布))，找出並點選「Visit your app」(造訪應用程式) 連結。
在 Firebase Studio 預覽畫面中：開啟瀏覽器的開發人員控制台，找出 Cloud Firestore 產生的錯誤 200 訊息。
測試應用程式中的所有流程。系統可能會顯示錯誤訊息，例如「載入食譜時發生錯誤。查詢需要索引。You can create it here:"，並附上 Firebase 控制台的連結。
點選連結前往 Firebase 控制台，系統會顯示建議的索引。
按一下「儲存」，接受建議的索引。
返回應用程式，然後重新載入頁面。
繼續測試應用程式中的所有流程，視需要新增索引。
詳情請參閱「在 Cloud Firestore 中管理索引」。
在 Firebase 控制台查看 Cloud Firestore 和 Firebase Authentication 資料
發布後，您可以在 Firebase 控制台中查看應用程式的即時資料。
如要查看即時 Cloud Firestore 資料庫，請開啟 Firebase 控制台，然後在導覽選單中依序選擇「Build」>「Firestore Database」。
您可以在這裡檢查儲存的資料、查看及測試安全性規則，以及建立索引。詳情請參閱 Cloud Firestore。
如要查看即時 Firebase Authentication 資料，請開啟 Firebase 控制台，然後在導覽選單中依序選擇「Build」>「Authentication」。
您可以在這裡檢查驗證設定和應用程式使用者。詳情請參閱 Firebase Authentication。
在正式環境中測試 Cloud Firestore 規則
發布應用程式後，請在正式環境中再次測試 Cloud Firestore 安全性規則。這有助於確保授權使用者可以存取資料，並防止未經授權的存取。
您可以使用下列所有方法測試規則：
應用程式測試：與部署的應用程式互動，執行會觸發各種資料存取模式 (讀取、寫入、刪除) 的作業，適用於不同使用者角色或狀態。這項實際測試有助於確認規則在實際環境中是否正確執行。
規則模擬工具：如要進行指定檢查，請使用 Firebase 控制台中的規則模擬工具。這項工具可讓您使用實際工作環境規則，模擬對 Cloud Firestore 資料庫的要求 (讀取、寫入、刪除)。您可以指定使用者驗證狀態、資料路徑和作業類型，確認規則是否按照預期允許或拒絕存取。
單元測試：如要進行更全面的測試，可以為安全性規則編寫單元測試。Firebase Studio 預先發布版後端由 Firebase Local Emulator Suite 提供技術支援，可讓您在本機執行這些測試，模擬實際工作環境規則的行為。這是驗證複雜規則邏輯，並確認各種情境涵蓋範圍的可靠方法。部署完成後，請務必仔細檢查使用模擬器的單元測試是否正常運作，並涵蓋所有情境。