Firebase MCP ใน Firebase Studio

1. ภาพรวม

เวอร์ชันตัวอย่าง: Firebase Studio และ Firebase MCP อยู่ในเวอร์ชันตัวอย่าง ซึ่งหมายความว่าไม่ขึ้นอยู่กับ SLA หรือนโยบายการเลิกใช้งานใดๆ และอาจมีการเปลี่ยนแปลงในแบบที่เข้ากันไม่ได้กับเวอร์ชันก่อน

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

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

• สร้างเว็บแอปแบบคงที่โดยใช้เอเจนต์การสร้างต้นแบบแอป
• ตั้งค่าเซิร์ฟเวอร์ MCP ของ Firebase
• เพิ่มฐานข้อมูลเรียลไทม์ของ Firebase โดยใช้ 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. ตรวจสอบพิมพ์เขียวของแอปที่แนะนำ คลิกปรับแต่งเพื่อแก้ไข
6. คลิกบันทึก
7. เมื่อพิมพ์เขียวรวมการอัปเดตของคุณเสร็จแล้ว ให้คลิกสร้างต้นแบบแอปนี้
8. หากพิมพ์เขียวมีองค์ประกอบ AI เอเจนต์จะแจ้งให้คุณขอคีย์ Gemini เพิ่มคีย์ Gemini API ของคุณเอง หรือคลิกสร้างอัตโนมัติเพื่อสร้างคีย์ Gemini API หากคลิกสร้างอัตโนมัติ Firebase Studio จะสร้างโปรเจ็กต์ Firebase และสร้างคีย์ API ของ Gemini ให้คุณ
9. เอเจนต์การสร้างต้นแบบแอปจะใช้พิมพ์เขียวเพื่อสร้างแอปเวอร์ชันแรก เมื่อเสร็จแล้ว ตัวอย่างแอปจะปรากฏข้างอินเทอร์เฟซแชทของ Gemini โปรดสละเวลาสักครู่เพื่อตรวจสอบและทดสอบแอป หากพบข้อผิดพลาด ให้คลิกแก้ไขข้อผิดพลาดในแชทเพื่อให้ตัวแทนแก้ไขข้อผิดพลาดของตัวเอง

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

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

1. ใน Firebase 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" เป็นช่องที่ถูกต้อง

4. เพิ่มฐานข้อมูลเรียลไทม์ของ Firebase โดยใช้ Firebase MCP

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

1. เปลี่ยนไปใช้ Prototyper ในอินเทอร์เฟซแชท ให้ขอให้ตัวแทนสร้างโปรเจ็กต์

   Create a Firebase project for my app.
   

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

   List my Firebase projects
   

   โปรดรอให้ตัวแทนโทรหาเครื่องมือ MCP ของ Firebase firebase_list_projects
2. ขอให้ตัวแทนเชื่อมต่อกับโปรเจ็กต์นี้

   Connect my app to my project `spinsync-3y3c6`.
   

   ตรวจสอบว่าคุณเห็นไฟล์ .firebaserc ที่ตั้งค่าโปรเจ็กต์ที่ใช้งานอยู่ หากไม่ ให้ขอให้ตัวแทนอัปเดตสภาพแวดล้อม Firebase

   Update my Firebase environment to use this project.
   

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

   Show me my current Firebase environment.
   

   โปรดรอให้ตัวแทนโทรหาเครื่องมือ MCP ของ Firebase firebase_get_environment
3. ขอให้ตัวแทนสร้างเว็บแอปในโปรเจ็กต์ Firebase

   Create a web app in my active Firebase project.
   

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

   Use the App ID to get the SDK configuration and add to my app.
   

   คาดหวังว่าเอเจนต์จะเรียกใช้เครื่องมือ firebase_get_sdk_config และอัปเดตโค้ดด้วยการกำหนดค่า Firebase หากคีย์ API และการกำหนดค่าอื่นๆ ปรากฏใน src/lib/firebase.ts หลังจากที่เอเจนต์ประกาศว่าทำงานเสร็จแล้ว ให้ขอให้เอเจนต์ย้ายคีย์ API และการกำหนดค่าอื่นๆ ออกเพื่อรักษาความปลอดภัยของแอป

   Secure my code by moving my Firebase config to the `.env` file.
   

เป้าหมายที่ 2: เพิ่มฐานข้อมูลเรียลไทม์ของ Firebase

1. ใช้ต่อไปหรือเปลี่ยนไปใช้ Prototyper ในอินเทอร์เฟซแชท ให้ขอให้ตัวแทนตั้งค่าฐานข้อมูลเรียลไทม์ของ Firebase ในโปรเจ็กต์

   Set up Firebase Realtime Database in my active project. Give anyone
   read and write access.
   

   คาดว่าเอเจนต์จะเรียกใช้เครื่องมือ Firebase MCP firebase_init และสร้างกฎความปลอดภัยใน database.rules.json ซึ่งเป็นส่วนหนึ่งของการเปลี่ยนแปลงไฟล์เมื่อสิ้นสุดการสนทนานี้

   {
       "rules": {
           ".read": true,
           ".write": true
       }
   }
   

   ในส่วนนี้ คุณจะให้สิทธิ์การอ่านและการเขียนแก่ทุกคนในฐานข้อมูล นอกเหนือจาก CodeLab นี้ คุณควรรักษาความปลอดภัยของฐานข้อมูลเสมอ ดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้ได้ในเอกสารประกอบ
2. เปลี่ยนไปใช้ Code ในเทอร์มินัล (Shift+Ctrl+C) ให้เริ่มต้นฐานข้อมูลเรียลไทม์ของ Firebase

   firebase init database
   

   ทำตามวิธีการบนหน้าจอและปล่อยให้ตัวเลือกเริ่มต้น จากนั้นจึงนำกฎความปลอดภัยไปใช้กับอินสแตนซ์ฐานข้อมูล

   firebase deploy --only database
   

3. เปลี่ยนไปใช้ Prototyper ขอให้ตัวแทนใช้อินสแตนซ์ฐานข้อมูลเริ่มต้นสำหรับรายการผู้ใช้

   Use my default Realtime Database instance for user entries.
   

   คาดว่า Agent จะอัปเดตซอร์สโค้ดที่เหลือเพื่อเชื่อมต่อแอปกับอินสแตนซ์ฐานข้อมูล

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

1. สร้างรายการใหม่ 2-3 รายการสำหรับวงล้อตัวเลือก แล้วดูรายการเหล่านั้นปรากฏในหน้าฐานข้อมูลเรียลไทม์ของ Firebase ใน Firebase Console

5. บทสรุป

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

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

• Firebase MCP บน GitHub
• เคล็ดลับและคำแนะนำเกี่ยวกับ Firebase 2
• ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่ทำงาน Firebase Studio