本指南說明如何使用 App Prototyping agent，在 Firebase 中透過 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 設計原型」。
應用程式原型設計代理程式會根據提示生成應用程式藍圖，並傳回建議的應用程式名稱、必要功能和樣式指南。
查看藍圖。視需要進行一些變更。舉例來說，您可以透過下列任一選項，變更建議的應用程式名稱或色彩配置：
按一下「自訂」，直接編輯藍圖。進行變更，然後按一下「儲存」。
在聊天窗格的「Describe...」(說明...) 欄位中，新增說明問題和背景資訊。你也可以上傳其他圖片。
按一下「Prototype this app」(製作這個應用程式的原型)。
應用程式原型設計代理程式會開始編寫應用程式程式碼。
- 由於您的應用程式使用 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會提示您修正發生的錯誤。按一下「修正錯誤」，讓系統嘗試修正。
如果收到錯誤訊息，但系統未提示自動修正，請將錯誤訊息和任何相關內容 (例如「Can you fix this error in my Firebase initialization code?」) 複製到對話視窗，然後傳送給 Gemini。
使用自然語言測試及疊代：徹底測試應用程式，並與 App Prototyping agent 合作疊代程式碼和藍圖，直到滿意為止。
在「Prototyper view, you can also use the following features:」的旅遊建議
按一下「註解」
，直接在「預覽」視窗中繪圖。使用可用的形狀、圖片和文字工具，以及選用的文字提示，以視覺化方式說明您想讓 App Prototyping agent 變更的內容。按一下「選取」
，選取特定元素，然後輸入 App Prototyping agent 的指令。這樣就能快速鎖定特定圖示、按鈕、文字或其他元素。按一下圖片後，您也可以選擇從 Unsplash 搜尋及選取圖庫圖片。
(選用) 您可以按一下「分享預覽連結」
，透過Firebase Studio 公開測試暫時公開分享應用程式。建立 Firebase 專案：當您執行下列操作時，「應用程式原型製作」代理程式會代您佈建 Firebase 專案：
- 自動產生 Gemini API 金鑰
- 要求將應用程式連結至 Firebase 專案
- 請協助將應用程式連結至 Firebase 服務，例如 Cloud Firestore 或 Firebase Authentication
- 按一下「發布」按鈕並設定 Firebase App Hosting
如要變更連結至工作區的 Firebase 專案，請使用要改用的專案 ID 提示 App Prototyping agent。例如「Switch to Firebase project with ID
<your-project-id>.」(切換至 ID 為<your-project-id>的 Firebase 專案)。測試應用程式並驗證 Cloud Firestore 資料庫規則：在應用程式預覽窗格中，上傳顯示不同食物的圖片，測試應用程式識別食材、生成及儲存食譜的能力。
以不同使用者身分登入並產生食譜：確認已驗證的使用者可以查看私人食譜和食譜，且所有使用者都能查看公開食譜。
要求 App Prototyping agent 新增 Cloud Firestore 時，系統會為您編寫及部署 Cloud Firestore 資料庫規則。在 Firebase 控制台中查看規則。
直接在程式碼中偵錯及疊代：按一下「切換至程式碼」圖示
開啟 Code 檢視畫面，即可查看應用程式的所有檔案，並直接修改程式碼。你可以切換回 Prototyper mode at any time.在「Code」檢視畫面中，你也可以使用下列實用功能：
Firebase Studio的內建偵錯和報告功能，檢查、偵錯及稽核應用程式。
使用 Gemini 的 AI 輔助功能 在程式碼中內嵌，或使用 Gemini 互動式即時通訊 (預設皆可使用)。互動式對話可診斷問題、提供解決方案，以及執行工具，協助您更快修正應用程式。 如要存取即時通訊，請按一下工作區底部的火花圖示 Gemini。
存取 Firebase Local Emulator Suite，查看資料庫和驗證資料。如要在工作區中開啟模擬器，請按照下列步驟操作：
按一下
「切換至程式碼」，然後開啟 Firebase Studio 擴充功能 (在 Windows 上按 Ctrl+',Ctrl+'鍵，或在 macOS 上按Cmd+',Cmd+'鍵)。捲動至「後端連接埠」並展開。
在「Port 4000」(連接埠 4000) 對應的「Actions」(動作) 欄中，按一下「Open in new window」(在新視窗中開啟)。
測試及評估生成式 AI 功能的成效：您可以使用 Genkit 開發人員 UI 執行 Genkit AI 流程、測試、偵錯、與不同模型互動、調整提示等。
如要在 Genkit 開發人員 UI 中載入 Genkit 流程並開始測試，請按照下列步驟操作：
在 Firebase Studio 工作區的終端機中執行下列指令，取得 Gemini API 金鑰並啟動 Genkit 伺服器：
npm run genkit:watch按一下 Genkit 開發人員使用者介面連結。Genkit 開發人員使用者介面會在新的視窗中開啟，顯示流程、提示、嵌入器，以及各種可用的模型。
如要進一步瞭解 Genkit 開發人員 UI，請參閱 Genkit 開發人員工具。
(選用) 步驟 3：使用 App Hosting 發布應用程式
在工作區中測試應用程式並確認符合需求後，即可使用 Firebase App Hosting 將應用程式發布至網頁。
設定 App Hosting 時，Firebase Studio 會為您建立 Firebase 專案 (如果系統尚未透過自動產生 Gemini API 金鑰或其他後端服務建立專案)，並引導您連結 Cloud Billing 帳戶。
如要發布應用程式，請按照下列步驟操作：
按一下「發布」，設定 Firebase 專案並發布應用程式。畫面上會顯示「發布應用程式」窗格。
在「Firebase 專案」步驟中，App Prototyping agent 會顯示與工作區相關聯的 Firebase 專案。如果沒有現成可用的 Firebase 專案，App Prototyping agent 會為您建立新專案。按一下「Next」(下一步)繼續操作。
在「連結 Cloud Billing 帳戶」步驟中，選擇下列其中一個選項：
選取要連結至 Firebase 專案的 Cloud Billing 帳戶。
如果沒有 Cloud Billing 帳戶，或想建立新帳戶，請按一下「建立 Cloud Billing 帳戶」。系統會開啟 Google Cloud 控制台，您可以在其中建立新的自助式帳戶。Cloud Billing建立帳戶後，請返回 Firebase Studio，然後從「連結」Cloud Billing清單中選取帳戶。
點選「下一步」。Firebase Studio 將帳單帳戶連結至與工作區相關聯的專案，這個專案是在您自動產生 Gemini API 金鑰或點選「發布」時建立。
按一下「設定服務」。應用程式原型製作代理程式會開始佈建 Firebase 服務。
按一下「立即發布」。Firebase Studio 設定 Firebase 服務，然後啟動App Hosting推出作業。這項作業可能需要幾分鐘才能完成。如要進一步瞭解幕後作業，請參閱「App Hosting 建構程序」。
發布步驟完成後，系統會顯示「應用程式總覽」，其中包含網址和由 App Hosting 可觀測性技術提供的應用程式洞察資料。如要使用自訂網域 (例如 example.com 或 app.example.com) 取代 Firebase 產生的網域，請在 Firebase 控制台中新增自訂網域。
如要進一步瞭解 App Hosting，請參閱「瞭解 App Hosting 和運作方式」。
(建議採行) 步驟 4：測試已發布的應用程式
發布完成後，應用程式會部署到 Firebase，Cloud Firestore 和 Firebase Authentication 即可在正式版中進行測試。
在 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 提供支援，可讓您在本機執行這些測試，模擬正式版規則的行為。這是驗證複雜規則邏輯，以及確認各種情境涵蓋範圍的可靠方法。部署後，請仔細檢查使用模擬器的單元測試是否如預期運作，並涵蓋所有情境。