ผสานรวมบริการ Firebase โดยใช้ความช่วยเหลือจาก AI

เพิ่มประสิทธิภาพการตั้งค่า Firebase สำหรับเว็บแอปโดยใช้เครื่องมือพัฒนาที่ทำงานด้วยระบบ AI เช่น Antigravity, Claude Code, Codex และ Cursor การใช้ทักษะของเอเจนต์ Firebase ร่วมกับ Firebase CLI และเซิร์ฟเวอร์ Firebase MCP จะช่วยเปลี่ยนเอเจนต์การเขียนโค้ด AI ให้เป็นผู้เชี่ยวชาญ Firebase ที่เขียนโค้ด กำหนดค่า Firebase Security Rules และจัดการทรัพยากรที่ใช้งานจริงได้

คู่มือนี้ครอบคลุมการใช้เอเจนต์การเขียนโค้ด AI เพื่อช่วยตั้งค่า Cloud Firestore, Authentication และ Firebase Hosting สำหรับเว็บแอป โปรดกลับมาดูข้อมูลเกี่ยวกับแอป iOS, Android และ Flutter เร็วๆ นี้

เหตุใดจึงควรใช้ทักษะและเครื่องมือเอเจนต์ Firebase

โมเดล AI ทั่วไปมักมีปัญหาในการกำหนดค่าโปรเจ็กต์ที่เฉพาะเจาะจงหรือ ข้อมูลที่ล้าสมัย ชุดเครื่องมือนี้ช่วยเชื่อมช่องว่างดังกล่าวได้

• ทักษะเอเจนต์ Firebase: ทักษะ ช่วยให้เอเจนต์เขียนโค้ดมีความเชี่ยวชาญเฉพาะด้าน โดยจะจัดเตรียมเอกสารประกอบล่าสุดและเวิร์กโฟลว์ที่เหมาะสมเพื่อให้เอเจนต์ทราบวิธีที่ถูกต้องและวิธีที่ Firebase แนะนำในการจัดโครงสร้างสถาปัตยกรรม
• เซิร์ฟเวอร์ MCP ของ Firebase: เซิร์ฟเวอร์ MCP ให้บริบทและการเข้าถึงแก่ Agent การเขียนโค้ด ซึ่งจะสร้างโปรโตคอลมาตรฐาน สำหรับ Agent เพื่อตรวจสอบทรัพยากร โปรเจ็กต์ที่ใช้งานอยู่ ไฟล์ในเครื่อง และการกำหนดค่าโดยอัตโนมัติ
• Firebase CLI: อินเทอร์เฟซบรรทัดคำสั่งช่วยให้เอเจนต์การเขียนโค้ดมีอำนาจที่นำไปใช้ได้จริง ซึ่งเป็นเครื่องมือการดำเนินการที่เอเจนต์ ใช้เพื่อทำงานที่ซับซ้อน เช่น การเริ่มต้นฐานข้อมูล การจัดการ การกำหนดค่าการตรวจสอบสิทธิ์ของผู้ใช้ และการติดตั้งใช้งานโค้ดในนามของคุณ

การใช้ทักษะของเอเจนต์ Firebase ควบคู่ไปกับ Firebase CLI และเซิร์ฟเวอร์ Firebase MCP จะช่วยให้เอเจนต์การเขียนโค้ด AI มีความสามารถเพิ่มเติมดังนี้

• ดำเนินการ: ทำมากกว่าแค่เขียนโค้ด เอเจนต์สามารถเริ่มต้นบริการ จัดการAuthenticationผู้ใช้ ติดตั้งใช้งานFirebase Security Rulesใหม่ และทำงานกับข้อมูลCloud Firestoreของคุณได้โดยตรง
• ติดตามข่าวสารล่าสุด: ใช้พรอมต์อย่างเป็นทางการที่รับรู้เวอร์ชันเพื่อแนะนํา Agent ในงานการตั้งค่า
• ปรับปรุงความแม่นยำ: เข้าถึงสภาพแวดล้อมและสคีมาของโปรเจ็กต์เพื่อมอบความช่วยเหลือที่เกี่ยวข้องและแม่นยำมากขึ้น
• ลดต้นทุนโทเค็น: ทักษะของเอเจนต์จะโหลดเอกสารประกอบแบบละเอียดเฉพาะเมื่อ งานที่เฉพาะเจาะจงกำหนดไว้เท่านั้น ซึ่งจะช่วยลดค่าใช้จ่ายในการดำเนินการของเซสชัน

ทักษะและเครื่องมือของเอเจนต์ช่วยในบริการ Firebase ใดได้บ้าง

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

• Cloud Firestore: จัดสรรฐานข้อมูล NoSQL
• Authentication: ตั้งค่าการลงชื่อเข้าใช้ของผู้ใช้ที่ปลอดภัย
• Firebase Security Rules: สร้างและปรับแต่ง Security Rules สำหรับแอป
• Firebase Hosting: ตั้งค่าโปรเจ็กต์สำหรับการติดตั้งใช้งานเว็บแอปแบบคงที่

ดูรายการทั้งหมดของสิ่งที่พร้อมใช้งานได้ที่รายการทั้งหมดของทักษะของตัวแทน Firebase

เวิร์กโฟลว์ทั่วไป

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

ขั้นตอนที่ 1: ติดตั้งทักษะเอเจนต์ Firebase

ในกรณีส่วนใหญ่ คุณจะติดตั้งทักษะเอเจนต์ Firebase ในโปรแกรมแก้ไขที่ต้องการได้ ด้วยพรอมต์เดียว

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

npx skills add firebase/agent-skills

ขั้นตอนที่ 2: เชื่อมต่อกับเซิร์ฟเวอร์ MCP ของ Firebase

แม้ว่าทักษะของเอเจนต์ Firebase หลายอย่างจะใช้ FirebaseCLI สำหรับงานต่างๆ แต่เราขอแนะนำให้เชื่อมต่อเอเจนต์การเขียนโค้ด AI กับเซิร์ฟเวอร์ MCP ของ Firebase การเชื่อมต่อนี้ช่วยเพิ่มความสามารถของเอเจนต์ในการโต้ตอบกับสภาพแวดล้อม Firebase ซึ่งช่วยให้การผสานรวมและการเข้าถึงมีความลึกซึ้งยิ่งขึ้น

วิธีการที่ใช้ AI ช่วย

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

วิธีการด้วยตนเอง

{
  "mcpServers": {
    "firebase-mcp-server": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"],
      "disabled": false
    }
  }
}

"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

ขั้นตอนที่ 3: เริ่มต้นบริการ Firebase

เมื่อตั้งค่าทักษะและเครื่องมือของเอเจนต์แล้ว ตอนนี้คุณสามารถใช้ภาษาธรรมชาติ เพื่อให้ AI Coding Agent ตั้งค่า Cloud Firestore, Authentication และ Firebase Hosting ได้แล้ว

1. ขอให้ตัวแทนตั้งค่าบริการ เช่น คุณสามารถใช้พรอมต์ ต่อไปนี้ได้

   • ตั้งค่า Cloud Firestore เป็นฐานข้อมูลสำหรับแอปนี้
   • สร้างหน้าเข้าสู่ระบบโดยใช้ Authentication และอัปเดต Security Rules เพื่อ ให้แน่ใจว่ามีเพียงผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่อ่านและเขียนข้อมูลของตนเองได้
   • ตั้งค่า Firebase Hosting และติดตั้งใช้งานแอปในเวอร์ชันที่ใช้งานจริง

2. ตรวจสอบข้อมูลและทำตามขั้นตอนที่แนะนำซึ่ง Agent อาจ ระบุ เช่น

   1. แผน: เอเจนต์จะเสนอแนะกลยุทธ์โดยอิงตามโค้ดเบสที่มีอยู่
   2. เชื่อมต่อ: ตัวแทนจะลิงก์โค้ดในเครื่องกับโปรเจ็กต์ Firebase ที่มีอยู่ หรือช่วยคุณสร้างโปรเจ็กต์ Firebase ใหม่
   3. เริ่มต้นทรัพยากร: เอเจนต์จะเพิ่มไลบรารีและการกำหนดค่า Firebase ที่จำเป็นลงในฐานของโค้ด
   4. อัปเดตไฟล์: เอเจนต์จะสร้างและอัปเดตไฟล์ที่จำเป็น เช่น firestore.rules (เพื่อกำหนดว่าใครอ่าน เขียน หรือค้นหาข้อมูล ในฐานข้อมูลได้) หรือ firebase.json (เพื่อแจ้งให้ Firebase CLI ทราบว่าจะติดตั้งใช้งานบริการใดและวิธีกำหนดค่า)
   5. ดำเนินการ: ตัวแทนจะแนะนำขั้นตอนการกำหนดค่าหรือการติดตั้งใช้งานเพิ่มเติมให้คุณ

เคล็ดลับทั่วไปในการป้อนพรอมต์ให้ Agent การเขียนโค้ด AI

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

ระบุให้ชัดเจนและให้บริบท

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

• คลุมเครือ: "แก้ไขข้อผิดพลาดของฐานข้อมูล"
• เฉพาะเจาะจง: "ฉันได้รับข้อผิดพลาด "ปฏิเสธการเข้าถึง" เมื่อพยายามเขียนไปยังคอลเล็กชัน "users" ใน Cloud Firestore โปรดตรวจสอบ firestore.rules และ แนะนำวิธีแก้ไขที่อนุญาตให้ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์เขียนเอกสารของตนเองได้"

ทำซ้ำและปรับแต่ง

AI Coding Agent มักไม่สร้างโค้ดที่สมบูรณ์แบบได้ตั้งแต่ครั้งแรกสำหรับงานที่ซับซ้อน หากคำตอบยังไม่ถูกต้องนัก ให้พูดคุยต่อโดยทำดังนี้

• ระบุข้อความแสดงข้อผิดพลาด: วางข้อผิดพลาดของเทอร์มินัลหรือบันทึกคอนโซลกลับ ไปในแชท
• ขอให้ปรับ: "โค้ดนั้นใช้ SDK v8 เวอร์ชันเก่า เขียนใหม่ โดยใช้ Firebase Modular SDK เวอร์ชัน 9"
• ขอคำอธิบาย: "อธิบายว่า Firebase Security Rules ปกป้องข้อมูลผู้ใช้ อย่างไร"

ยืนยันก่อนดำเนินการ

เอเจนต์การเขียนโค้ด AI มีประสิทธิภาพ แต่ก็อาจทำผิดพลาดหรือ "หลอน" ได้ (สร้างฟังก์ชันหรือบริการที่มีชื่อไม่ถูกต้อง)

• ตรวจสอบโค้ด: อ่านโค้ดที่สร้างขึ้นเสมอ โดยเฉพาะFirebase Security Rules และไฟล์การกำหนดค่า (เช่น firebase.json) ก่อนที่จะนำไปใช้ใน การผลิต
• ทดสอบในเครื่อง: ทุกครั้งที่เป็นไปได้ ให้ขอให้ตัวแทนช่วยทดสอบการเปลี่ยนแปลงในเครื่องก่อนที่จะเผยแพร่

ใช้การเชื่อมต่อ MCP

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

• ตัวอย่าง: "ดูไฟล์ src/web/index.html ของฉันและบอกฉันว่าควรเพิ่ม สคริปต์การเริ่มต้น Firebase มาตรฐานที่ใด"

ขั้นตอนถัดไป

• เรียกดูรายการทักษะของเอเจนต์ Firebase ทั้งหมดที่พร้อมใช้งาน
• เรียกดูรายการพรอมต์ เครื่องมือ และแหล่งข้อมูลทั้งหมดที่พร้อมใช้งานซึ่งเซิร์ฟเวอร์ MCP ของ Firebase มีให้
• ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือที่ Firebase CLI มีให้