Firebase MCP ใน Firebase Studio

1. ภาพรวม

ในโค้ดแล็บนี้ คุณจะได้ฝึกใช้เอเจนต์การสร้างต้นแบบแอปพร้อมกับเซิร์ฟเวอร์ MCP ของ Firebase ใน Firebase Studio เพื่อสร้างเว็บแอปแบบฟูลสแต็กที่ใช้ Firestore

GIF แบบเคลื่อนไหวของแอปสุดท้าย

สิ่งที่คุณจะได้เรียนรู้

  • สร้างเว็บแอปแบบคงที่โดยใช้เอเจนต์การสร้างต้นแบบแอป
  • เชื่อมต่อกับโปรเจ็กต์ Firebase
  • ตั้งค่าเซิร์ฟเวอร์ MCP ของ Firebase
  • เพิ่ม Firestore โดยใช้ Firebase MCP

สิ่งที่ต้องมี

  • เบราว์เซอร์ที่คุณเลือก เช่น Google Chrome
  • บัญชี Google สำหรับการสร้างและการจัดการโปรเจ็กต์ Firebase

2. สร้างแอปโดยใช้เอเจนต์การสร้างต้นแบบแอป

เอเจนต์การสร้างต้นแบบแอปจะใช้ Gemini ใน Firebase เพื่อสร้างแอป แม้จะใช้พรอมต์ที่เหมือนกัน ผลลัพธ์ก็อาจแตกต่างกัน

  1. เข้าสู่ระบบบัญชี Google เข้าร่วมโปรแกรมนักพัฒนาแอป Google แล้วเปิด Firebase Studio
  2. ในช่องสร้างต้นแบบแอปด้วย AI ให้ป้อนคำอธิบายของแอป
    An app for a picker wheel that allows custom input.
  3. คลิกปรับปรุงพรอมต์ ตรวจสอบพรอมต์ที่ปรับปรุงแล้ว
  4. คลิกสร้างต้นแบบด้วย AI
  5. ตรวจสอบพิมพ์เขียวของแอปที่แนะนำ คลิกไอคอนปรับแต่งสำหรับแก้ไข Codiconปรับแต่งเพื่อแก้ไข
  6. คลิกบันทึก
  7. เมื่อพิมพ์เขียวรวมการอัปเดตของคุณเสร็จแล้ว ให้คลิกสร้างต้นแบบแอปนี้พิมพ์เขียวสำหรับแอป
  8. หากพิมพ์เขียวมีองค์ประกอบ AI เอเจนต์จะแจ้งให้คุณขอคีย์ Gemini เพิ่มคีย์ Gemini API ของคุณเอง หรือคลิกสร้างอัตโนมัติเพื่อสร้างคีย์ Gemini API หากคลิกสร้างอัตโนมัติ Firebase Studio จะสร้างโปรเจ็กต์ Firebase และสร้างคีย์ API ของ Gemini ให้คุณ
  9. เอเจนต์การสร้างต้นแบบแอปจะใช้พิมพ์เขียวเพื่อสร้างแอปเวอร์ชันแรก เมื่อเสร็จแล้ว ตัวอย่างแอปจะปรากฏข้างอินเทอร์เฟซแชทของ Gemini โปรดสละเวลาสักครู่เพื่อตรวจสอบและทดสอบแอป หากพบข้อผิดพลาด ให้คลิกแก้ไขข้อผิดพลาดในแชทเพื่อให้ตัวแทนแก้ไขข้อผิดพลาดของตัวเอง

3. (ไม่บังคับ) รับรหัส

หากติดขัด ให้ใช้ไฟล์ตัวอย่างเพื่อทำตามแอปตัวอย่างอย่างใกล้ชิดยิ่งขึ้นนับจากนี้

  1. ดาวน์โหลดไฟล์ในโฟลเดอร์
  2. ใน Firebase Studio ให้คลิก ไอคอนมุมมองโค้ด เปลี่ยนเป็นโค้ดเพื่อเปิดมุมมองโค้ด
  3. ลากไฟล์ที่ดาวน์โหลดไปยังแผง Explorer ของ Firebase Studio อนุญาตให้ไฟล์แทนที่ไฟล์ที่มีอยู่
  4. ในเทอร์มินัล (Shift+Ctrl+C) ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งแพ็กเกจ
    npm install
  5. เปิดแผงการควบคุมแหล่งที่มาของ Firebase Studio พิมพ์ข้อความเพื่ออธิบายการเปลี่ยนแปลงโค้ด เช่น "นำเข้าโค้ดจาก GitHub" แล้วกดคอมมิต
  6. คลิกเปลี่ยนไปใช้ Prototyper เพื่อทำ Codelab ต่อโดยใช้แอปเวอร์ชันตัวอย่าง

4. เชื่อมต่อกับโปรเจ็กต์ Firebase

ยินดีด้วย แอปของคุณทำงานในเครื่อง หากต้องการให้มีแบ็กเอนด์ คุณจะต้องเชื่อมต่อกับโปรเจ็กต์ Firebase ในขั้นตอนถัดไป

  1. ขอให้ตัวแทน App Prototyping เชื่อมต่อกับโปรเจ็กต์ Firebase
    Connect to a Firebase project.
    คาดว่าเอเจนต์จะสร้างโปรเจ็กต์ใหม่หรือเชื่อมต่อกับโปรเจ็กต์ที่มีอยู่ (หากคุณใช้ตัวเลือกสร้างอัตโนมัติเพื่อรับคีย์ API ของ Gemini ก่อนหน้านี้ โปรเจ็กต์ของคุณควรปรากฏข้างชื่อพื้นที่ทํางานที่มุมซ้ายบนของหน้าจอ) จากนั้นสร้างการกําหนดค่า Firebase ที่จําเป็นและผสานรวมเข้ากับแอปผ่าน src/lib/firebase.ts (ดังที่แสดง)
    import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  "projectId": "foo-bar-baz",
  "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
  "storageBucket": "foo-bar-baz.firebasestorage.app",
  "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
  "authDomain": "foo-bar-baz.firebaseapp.com",
  "measurementId": "",
  "messagingSenderId": "630673270654"
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;
    โปรดสอบถามตัวแทนอีกครั้งหากพรอมต์ข้างต้นทำงานไม่สำเร็จในครั้งเดียว แบ่งขั้นตอนหากจำเป็น
    Create a new Firebase project.

5. ตั้งค่า Firebase MCP ใน Firebase Studio

เซิร์ฟเวอร์ MCP ของ Firebase จะขยายความสามารถของเอเจนต์การสร้างต้นแบบแอปโดยการจัดหาเครื่องมือที่เอเจนต์สามารถเรียกใช้เพื่อตั้งค่า จัดการ และดึงข้อมูลจากบริการ Firebase ซึ่งรวมถึงการตรวจสอบสิทธิ์ Firebase, Cloud Firestore และ Firebase Data Connect วิธีการตั้งค่ามีดังนี้

  1. คลิกไอคอนมุมมองโค้ดของ Studioเปลี่ยนเป็นโค้ดเพื่อเปิดมุมมองโค้ด
  2. ในเทอร์มินัล (Shift+Ctrl+C) ให้เรียกใช้คำสั่งต่อไปนี้เพื่อลงชื่อเข้าใช้บัญชี Firebase โดยทำตามวิธีการบนหน้าจอและปล่อยให้ตัวเลือกทั้งหมดเป็นค่าเริ่มต้น
    firebase login --no-localhost
  3. จาก Explorer (Ctrl+Shift+E) ให้คลิกขวาที่โฟลเดอร์ .idx แล้วเลือกไฟล์ใหม่ ตั้งชื่อไฟล์เป็น mcp.json แล้วกด Enter
  4. เพิ่มการกำหนดค่าเซิร์ฟเวอร์ลงใน .idx/mcp.json
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    ตรวจสอบว่าคุณเชื่อมต่อกับเซิร์ฟเวอร์ MCP ของ Firebase แล้ว คุณควรเห็นรายการบันทึกที่คล้ายกันในแผงเอาต์พุต โดยเลือก "Gemini" เป็นช่องที่ถูกต้องMCPManager จากบันทึกของ Gemini

6. เพิ่ม Firestore โดยใช้ Firebase MCP

เป้าหมายที่ 1: เพิ่ม Firestore

  1. เปลี่ยนไปใช้ Prototyper ในอินเทอร์เฟซแชท ให้ขอให้ตัวแทนใช้ Firestore ในแอปของคุณ
    Use Firestore for user entries. Give anyone read and write access.
    คาดหวังให้ตัวแทนทำสิ่งต่อไปนี้
    • เริ่มต้น Firestore โดยเรียกใช้เครื่องมือ Firebase MCP firebase_init ซึ่งจะสร้างกฎ Firestore (ตามที่แสดง) และจัดทำดัชนีไฟล์ รวมถึงการเปลี่ยนแปลงการกำหนดค่าอื่นๆ
    • อัปเดตโค้ดแอปพลิเคชันเพื่อใช้ Firestore แทนที่เก็บข้อมูลในเครื่อง
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    ในส่วนนี้ คุณจะให้สิทธิ์การอ่านและการเขียนแก่ทุกคนในฐานข้อมูล นอกเหนือจาก Codelab นี้ คุณควรทำให้ฐานข้อมูลปลอดภัยอยู่เสมอ ดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้ได้ในเอกสารประกอบ
  2. เปลี่ยนไปใช้ Code ในเทอร์มินัล (Shift+Ctrl+C) ให้เริ่มต้น Firestore หากคุณไม่เคยเปิดใช้ Firestore API ในโปรเจ็กต์ Firebase ปัจจุบัน
    firebase init firestore
    ทำตามวิธีการบนหน้าจอและปล่อยให้ตัวเลือกเป็นค่าเริ่มต้น อย่าเขียนทับกฎความปลอดภัยจากขั้นตอนก่อนหน้า จากนั้นให้ทําการติดตั้งใช้งานกฎความปลอดภัยสําหรับอินสแตนซ์ฐานข้อมูล
    firebase deploy --only firestore
    การดำเนินการนี้จะจัดสรรอินสแตนซ์ฐานข้อมูล Firestore ให้คุณ

เป้าหมายที่ 2: ทดสอบ

  1. โหลดแอปซ้ำ สร้างและลบรายการในวงล้อตัวเลือก แล้วดูการอัปเดตเหล่านี้ในหน้า Firestore ใน Firebase Console

แอปใน Studio และ Console

  1. นอกจากนี้ คุณยังแชทกับ Firestore เพื่อค้นหาฐานข้อมูลได้ด้วย
    List my Firestore collections.
    Gemini จะเรียกใช้เครื่องมือ MCP ของ Firebase firestore_list_collections

แชทกับ Firestore

7. บทสรุป

ยินดีด้วย คุณสร้างเว็บแอปแบบฟูลสแต็กโดยใช้เอเจนต์การสร้างต้นแบบแอปกับ Firebase MCP ได้สำเร็จแล้ว คุณสามารถลองใช้เครื่องมืออื่นๆ ที่เซิร์ฟเวอร์ MCP ของ Firebase มีให้และขยายสิ่งที่แอปทำได้

ดูข้อมูลเพิ่มเติม