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

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

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

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

เอเจนต์การเขียนโค้ด AI มักประสบปัญหาในการกำหนดค่าโปรเจ็กต์ที่เฉพาะเจาะจงหรือข้อมูลที่ล้าสมัย ชุดเครื่องมือนี้ช่วยลดช่องว่างดังกล่าวด้วยการรวมคำแนะนำเฉพาะทาง (ทักษะเอเจนต์) เข้ากับเครื่องมือการดำเนินการของเอเจนต์ 2 ประเภทที่ทำงานร่วมกันได้ (CLI และเซิร์ฟเวอร์ MCP) ดังนี้

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

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

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

บริการ Firebase ที่เกี่ยวข้อง

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

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

หากต้องการดูรายการทั้งหมดที่มีอยู่ ให้เรียกดู รายการทักษะเอเจนต์ Firebase ทั้งหมด

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

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

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

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

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

npx skills add firebase/agent-skills

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

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

วิธีการที่มีการใช้งาน AI

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

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

{
  "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
    }
  }
}

"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 ตั้งค่า Cloud Firestore, Firebase Authentication, และ Firebase Hosting ได้

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

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

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

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

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

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

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

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

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

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

เอเจนต์การเขียนโค้ด AI ไม่ค่อยสร้างโค้ดที่สมบูรณ์แบบตั้งแต่ครั้งแรกสำหรับงานที่ซับซ้อน หากคำตอบยังไม่ถูกต้องนัก ให้สนทนาต่อไปโดยทำดังนี้

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

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

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

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

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

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

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

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

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