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

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

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

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

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

• Cloud Firestore: จัดเตรียมฐานข้อมูล NoSQL
• 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
    }
  }
}

"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 ตั้งค่า Cloud Firestore, 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 จะให้บริบทที่สำคัญเกี่ยวกับโปรเจ็กต์แก่เอเจนต์ แต่พรอมต์ภาษาที่เป็นธรรมชาติที่ชัดเจนและเฉพาะเจาะจงจะให้ผลลัพธ์ที่ดีที่สุด หลีกเลี่ยงคำขอที่คลุมเครือ

• คลุมเครือ: "แก้ไขข้อผิดพลาดของฐานข้อมูล"
• เฉพาะเจาะจง: "ฉันได้รับข้อผิดพลาด 'permission denied' เมื่อพยายามเขียนลงใน คอลเล็กชัน '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 มีให้