Firebase Studio 中的 Firebase MCP

1. 總覽

在本程式碼研究室中,您將練習使用應用程式原型設計代理,以及 Firebase Studio 中的 Firebase MCP 伺服器,建立使用 Firestore 的全端網頁應用程式。

最終應用程式的 GIF 動畫

課程內容

  • 使用 App Prototyping 代理程式產生靜態網頁應用程式
  • 設定 Firebase MCP 伺服器
  • 使用 Firebase MCP 新增 Firestore

事前準備

  • 你選擇的瀏覽器,例如 Google Chrome
  • 用於建立及管理 Firebase 專案的 Google 帳戶

2. 使用 App Prototyping 代理程式生成應用程式

應用程式原型製作代理程式會使用 Gemini in Firebase 建構應用程式。即使使用相同的提示,結果也可能有所不同。如果您遇到困難,我們提供了一組檔案,可新增至工作區,以便在整個程式碼研究室的幾個檢查點繼續進行實驗室。

  1. 登入 Google 帳戶、加入 Google 開發人員計畫,然後開啟 Firebase Studio
  2. 在「Prototype an app with AI」(運用 AI 設計應用程式原型) 欄位中,輸入應用程式的說明:
    An app for a picker wheel that allows custom input.
    
  3. 按一下「改善提示」。查看改良後的提示。
  4. 按一下「Prototype with AI」(使用 AI 製作原型)
  5. 查看建議的應用程式藍圖。按一下「自訂」自訂 codicon 編輯的圖示即可編輯。
  6. 按一下 [儲存]
  7. 藍圖完成更新後,請按一下「Prototype this App」(製作這個應用程式的原型)應用程式藍圖
  8. 如果藍圖包含 AI 元素,代理程式會提示您輸入 Gemini Gemini 金鑰。新增自己的 Gemini API 金鑰,或按一下「自動產生」產生 Gemini API 金鑰。按一下「自動產生」,Firebase Studio 就會建立 Firebase 專案,並為您產生 Gemini API 金鑰。
  9. App Prototyping 代理程式會使用藍圖建立應用程式的第一個版本。完成後,應用程式的預覽畫面會與 Gemini 即時通訊介面一起顯示。請花點時間檢查及測試應用程式。如果發生錯誤,請在對話中按一下「修正錯誤」,讓代理程式自行修正錯誤。

3. 在 Firebase Studio 中設定 Firebase MCP

Firebase MCP 伺服器提供代理程式可呼叫的工具,用於設定、管理及從 Firebase 服務 (包括 Firebase Authentication、Cloud Firestore 和 Firebase Data Connect) 擷取資料,藉此擴充應用程式原型設計代理程式的功能。設定方式如下。

  1. 在 Firebase Studio 中,按一下「切換至程式碼」Studio 程式碼檢視畫面圖示,開啟程式碼檢視畫面。
  2. 在終端機 (Shift+Ctrl+C) 中執行下列指令,按照畫面上的指示登入 Firebase 帳戶,並保留所有預設選項:
    firebase login --no-localhost
    
  3. 在「檔案總管」中 (Ctrl+Shift+E),對 .idx 資料夾按一下滑鼠右鍵,然後選取「New file」。將檔案命名為 mcp.json,然後按下 Enter 鍵。
  4. 將伺服器設定新增至 .idx/mcp.json
    {
        "mcpServers": {
            "firebase": {
                "command": "npx",
                "args": [
                    "-y",
                    "firebase-tools@latest",
                    "experimental:mcp"
                ]
            }
        }
    }
    
    確認您已連線至 Firebase MCP 伺服器。在「輸出」面板中,您應該會看到類似的記錄項目,且「Gemini」已選取為正確的管道。Gemini 記錄中的 MCPManager

4. 使用 Firebase MCP 新增 Firestore

目標 1:將 Firebase 新增至應用程式

  1. 切換至 Prototyper。在對話介面中,要求代理程式建立 Firebase 專案。
    Create a Firebase project.
    
    如果您已使用自動產生選項取得 Gemini API 金鑰,並建立 Firebase 專案,請略過這個步驟。專案 ID 應會顯示在畫面左上角的工作區名稱旁。或者,請專員列出您的專案,並記下要使用的專案。
    List my Firebase projects.
    
    預期代理程式會呼叫 Firebase MCP 工具 firebase_list_projects
  2. 請代理程式使用您的 Firebase 專案進行本機開發。
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    
    請確認您看到設定預設 Firebase 專案的 .firebaserc 檔案。這個檔案會告知 Firebase CLI 要使用的 Firebase 專案。如果找不到該檔案,請再次要求。
  3. 請專員在 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

  1. 切換至「程式碼」。在即時通訊介面中,要求代理程式在應用程式中使用 Firestore。
    Use Firestore for user entries. Give anyone read and write access.
    
    預期代理程式會更新您的原始碼,改用 Firestore 儲存使用者輸入內容,而非本機儲存空間,並建立 Firestore 安全性規則。請注意,這項工具可能會呼叫 Firebase MCP 工具 firebase_init,或提示您在終端機中執行 firebase init 指令,以初始化 Firestore。無論如何,請先確認您看到 firestore.rules 檔案,且檔案內容如下,再繼續操作。
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write: if true;
        }
      }
    }
    
    在這裡,您可以授予所有使用者資料庫的讀取和寫入權限。在本程式碼研究室以外,您應一律保護資料庫安全。如要進一步瞭解這個主題,請參閱說明文件
  2. 在終端機 (Shift+Ctrl+C) 中,初始化 Firestore (如果代理程式先前未提示您這麼做)。
    firebase init firestore
    
    按照畫面上的指示操作,並保留預設選項。請勿覆寫上一個步驟的安全性規則,然後為資料庫執行個體部署安全性規則。
    firebase deploy --only firestore
    
    系統會為您佈建 Firestore 資料庫執行個體。

目標 3:測試

  1. 重新載入應用程式,在選擇器輪盤上建立及刪除項目,並在 Firebase 控制台的 Firestore 頁面上查看這些更新。

Studio 和 Play 管理中心的應用程式

5. 結論

恭喜!您已成功使用 App Prototyping 代理程式和 Firebase MCP 建立全端網頁應用程式。歡迎試用 Firebase MCP 伺服器提供的其他工具,擴充應用程式的功能。

瞭解詳情