1. 總覽
在本程式碼研究室中,您將練習使用應用程式原型設計代理,以及 Firebase Studio 中的 Firebase MCP 伺服器,建立使用 Firestore 的全端網頁應用程式。
課程內容
- 使用 App Prototyping 代理程式產生靜態網頁應用程式
- 設定 Firebase MCP 伺服器
- 使用 Firebase MCP 新增 Firestore
事前準備
- 你選擇的瀏覽器,例如 Google Chrome
- 用於建立及管理 Firebase 專案的 Google 帳戶
2. 使用 App Prototyping 代理程式生成應用程式
應用程式原型製作代理程式會使用 Gemini in Firebase 建構應用程式。即使使用相同的提示,結果也可能有所不同。如果您遇到困難,我們提供了一組檔案,可新增至工作區,以便在整個程式碼研究室的幾個檢查點繼續進行實驗室。
- 登入 Google 帳戶、加入 Google 開發人員計畫,然後開啟 Firebase Studio。
- 在「Prototype an app with AI」(運用 AI 設計應用程式原型) 欄位中,輸入應用程式的說明:
An app for a picker wheel that allows custom input.
- 按一下「改善提示」。查看改良後的提示。
- 按一下「Prototype with AI」(使用 AI 製作原型)。
- 查看建議的應用程式藍圖。按一下「自訂」
即可編輯。
- 按一下 [儲存]。
- 藍圖完成更新後,請按一下「Prototype this App」(製作這個應用程式的原型)。
- 如果藍圖包含 AI 元素,代理程式會提示您輸入 Gemini Gemini 金鑰。新增自己的 Gemini API 金鑰,或按一下「自動產生」產生 Gemini API 金鑰。按一下「自動產生」,Firebase Studio 就會建立 Firebase 專案,並為您產生 Gemini API 金鑰。
- App Prototyping 代理程式會使用藍圖建立應用程式的第一個版本。完成後,應用程式的預覽畫面會與 Gemini 即時通訊介面一起顯示。請花點時間檢查及測試應用程式。如果發生錯誤,請在對話中按一下「修正錯誤」,讓代理程式自行修正錯誤。
3. 在 Firebase Studio 中設定 Firebase MCP
Firebase MCP 伺服器提供代理程式可呼叫的工具,用於設定、管理及從 Firebase 服務 (包括 Firebase Authentication、Cloud Firestore 和 Firebase Data Connect) 擷取資料,藉此擴充應用程式原型設計代理程式的功能。設定方式如下。
- 在 Firebase Studio 中,按一下「切換至程式碼」
,開啟程式碼檢視畫面。
- 在終端機 (
Shift
+Ctrl
+C
) 中執行下列指令,按照畫面上的指示登入 Firebase 帳戶,並保留所有預設選項:firebase login --no-localhost
- 在「檔案總管」中 (
Ctrl+Shift+E
),對 .idx 資料夾按一下滑鼠右鍵,然後選取「New file」。將檔案命名為mcp.json
,然後按下 Enter 鍵。 - 將伺服器設定新增至
.idx/mcp.json
。 確認您已連線至 Firebase MCP 伺服器。在「輸出」面板中,您應該會看到類似的記錄項目,且「Gemini」已選取為正確的管道。{ "mcpServers": { "firebase": { "command": "npx", "args": [ "-y", "firebase-tools@latest", "experimental:mcp" ] } } }
4. 使用 Firebase MCP 新增 Firestore
目標 1:將 Firebase 新增至應用程式
- 切換至 Prototyper。在對話介面中,要求代理程式建立 Firebase 專案。
如果您已使用自動產生選項取得 Gemini API 金鑰,並建立 Firebase 專案,請略過這個步驟。專案 ID 應會顯示在畫面左上角的工作區名稱旁。或者,請專員列出您的專案,並記下要使用的專案。Create a Firebase project.
預期代理程式會呼叫 Firebase MCP 工具List my Firebase projects.
firebase_list_projects
。 - 請代理程式使用您的 Firebase 專案進行本機開發。
請確認您看到設定預設 Firebase 專案的Use `spinsync-3y3c6` as my Firebase project in my local environment.
.firebaserc
檔案。這個檔案會告知 Firebase CLI 要使用的 Firebase 專案。如果找不到該檔案,請再次要求。 - 請專員在 Firebase 專案中建立網頁應用程式。
預期代理程式會呼叫工具Create a web app in my Firebase project.
firebase_create_app
。如果代理程式無法完成這項操作,請重試,或按照這些操作說明在 Firebase 控制台中完成這個步驟。代理程式可能會繼續呼叫工具firebase_get_sdk_config
,並建立必要檔案,將專案連結至 Firebase 網頁應用程式。如果沒有,請提示代理程式這麼做。 代理程式通常會直接在Add my Firebase SDK configuration to my app.
src/lib/firebase.ts
中放入 API 金鑰和其他設定。請他將這些金鑰移出應用程式程式碼,確保應用程式安全無虞。Secure my code by moving my Firebase config to my `.env` file.
目標 2:新增 Firestore
- 切換至「程式碼」。在即時通訊介面中,要求代理程式在應用程式中使用 Firestore。
預期代理程式會更新您的原始碼,改用 Firestore 儲存使用者輸入內容,而非本機儲存空間,並建立 Firestore 安全性規則。請注意,這項工具可能會呼叫 Firebase MCP 工具Use Firestore for user entries. Give anyone read and write access.
firebase_init
,或提示您在終端機中執行firebase init
指令,以初始化 Firestore。無論如何,請先確認您看到firestore.rules
檔案,且檔案內容如下,再繼續操作。 在這裡,您可以授予所有使用者資料庫的讀取和寫入權限。在本程式碼研究室以外,您應一律保護資料庫安全。如要進一步瞭解這個主題,請參閱說明文件。rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } }
- 在終端機 (
Shift
+Ctrl
+C
) 中,初始化 Firestore (如果代理程式先前未提示您這麼做)。 按照畫面上的指示操作,並保留預設選項。請勿覆寫上一個步驟的安全性規則,然後為資料庫執行個體部署安全性規則。firebase init firestore
系統會為您佈建 Firestore 資料庫執行個體。firebase deploy --only firestore
目標 3:測試
- 重新載入應用程式,在選擇器輪盤上建立及刪除項目,並在 Firebase 控制台的 Firestore 頁面上查看這些更新。
5. 結論
恭喜!您已成功使用 App Prototyping 代理程式和 Firebase MCP 建立全端網頁應用程式。歡迎試用 Firebase MCP 伺服器提供的其他工具,擴充應用程式的功能。