หน้านี้ได้รับการแปลโดย Cloud Translation API

Firebase MCP ใน Firebase Studio

1. ภาพรวม

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

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

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

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

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

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

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

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

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

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

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

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

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

เป้าหมายที่ 1: เพิ่ม Firebase ไปยังแอป

เปลี่ยนไปใช้ Prototyper ในอินเทอร์เฟซแชท ให้ขอให้ตัวแทนสร้างโปรเจ็กต์ Firebase
```
Create a Firebase project.
```
ข้ามขั้นตอนนี้หากคุณสร้างโปรเจ็กต์ Firebase ไว้แล้วขณะใช้ตัวเลือกสร้างอัตโนมัติเพื่อรับคีย์ API ของ Gemini รหัสโปรเจ็กต์ควรปรากฏข้างชื่อพื้นที่ทำงานที่มุมซ้ายบนของหน้าจอ หรือขอให้ตัวแทนแสดงรายการโปรเจ็กต์ของคุณและจดโปรเจ็กต์ที่คุณต้องการใช้
```
List my Firebase projects.
```
โปรดรอให้ตัวแทนโทรหาเครื่องมือ MCP ของ Firebase firebase_list_projects
ขอให้ตัวแทนใช้โปรเจ็กต์ Firebase สำหรับการพัฒนาในเครื่อง
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
ตรวจสอบว่าคุณเห็นไฟล์ .firebaserc ที่ตั้งค่าโปรเจ็กต์ Firebase เริ่มต้น ไฟล์นี้จะบอก 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.
```
โดยปกติแล้วเอเจนต์จะใส่คีย์ API และการกำหนดค่าอื่นๆ ไว้ใน src/lib/firebase.ts โดยตรง ขอให้ย้ายข้อมูลดังกล่าวออกจากโค้ดแอปพลิเคชันเพื่อรักษาความปลอดภัยของแอป
```
Secure my code by moving my Firebase config to my `.env` file.
```

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

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

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

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

แอปใน Studio และ Console

5. บทสรุป

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