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

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

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

เหตุใดจึงควรใช้ความสามารถและเครื่องมือของ Agent Firebase

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

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

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

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

ความสามารถและเครื่องมือของ Agent สามารถช่วยในบริการใดของ Firebase ได้บ้าง

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

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

หากต้องการดูรายการทั้งหมดที่พร้อมใช้งาน ให้เรียกดู รายการความสามารถทั้งหมดของ Agent Firebase

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

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

ขั้นตอนที่ 1: ติดตั้งความสามารถของ Agent Firebase

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

Antigravity

ความสามารถของ Agent Firebase รวมอยู่ในชุดการผสานรวม Build with Google สำหรับ Antigravity คุณสามารถเปิดใช้ชุดนี้สำหรับการเข้าถึงระดับโลกได้ 2 จุด ดังนี้

  • ระหว่างการเริ่มต้นใช้งาน: เลือกช่องทำเครื่องหมายสำหรับสแต็ก Firebase
  • ในการตั้งค่า: ไปที่การตั้งค่า > การปรับแต่ง ในส่วน ปลั๊กอิน Build with Google ให้คลิก ปรับแต่ง แล้วคลิก ดาวน์โหลด สำหรับการผสานรวม Firebase

หากต้องการเข้าถึงระดับโปรเจ็กต์ ให้เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีของโปรเจ็กต์

npx skills add firebase/agent-skills --agent=antigravity

Claude Code 

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

Codex 

npx skills add firebase/agent-skills --agent=codex

Cursor

คุณสามารถติดตั้งความสามารถของ Agent Firebase ได้โดยตรงจาก Cursor Marketplace หรือ โดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

npx skills add firebase/agent-skills --agent=cursor

Agent อื่นๆ 

npx skills add firebase/agent-skills

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

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

วิธีการที่ทำงานด้วยระบบ AI

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

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

Antigravity

วิธีกำหนดค่า Antigravity ให้ใช้เซิร์ฟเวอร์ Firebase MCP

  1. ใน Antigravity ให้คลิกเมนู ในบานหน้าต่าง Agent > เซิร์ฟเวอร์ MCP
  2. เลือก Firebase > ติดตั้ง

วิธีนี้จะอัปเดตไฟล์ mcp_config.json โดยอัตโนมัติ ซึ่งคุณสามารถดูได้โดย คลิก จัดการเซิร์ฟเวอร์ MCP ที่ด้านบนของบานหน้าต่าง MCP Store > ดูการกำหนดค่าดิบ โดยมีเนื้อหาดังนี้

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

Firebase Studio

หากต้องการกำหนดค่า Firebase Studio ให้ใช้เซิร์ฟเวอร์ Firebase MCP ให้แก้ไขหรือสร้างไฟล์การกำหนดค่า .idx/mcp.json

หากไฟล์ยังไม่มีอยู่ ให้สร้างไฟล์โดยคลิกขวาที่ไดเรกทอรีหลัก แล้วเลือกไฟล์ใหม่ จากนั้นเพิ่มเนื้อหาต่อไปนี้ลงในไฟล์

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

Claude

Claude Code

  • ตัวเลือกที่ 1: ติดตั้งผ่านปลั๊กอิน (แนะนำ)

    วิธีที่ง่ายที่สุดในการตั้งค่าเซิร์ฟเวอร์ Firebase MCP ใน Claude Code คือการติดตั้งปลั๊กอิน Firebase อย่างเป็นทางการ โดยทำดังนี้

    1. เพิ่ม Firebase Marketplace สำหรับปลั๊กอิน Claude

      claude plugin marketplace add firebase/firebase-tools

    2. ติดตั้งปลั๊กอิน Claude สำหรับ Firebase

      claude plugin install firebase@firebase

    3. ยืนยันการติดตั้ง

      claude plugin marketplace list

  • ตัวเลือกที่ 2: กำหนดค่าเซิร์ฟเวอร์ MCP ด้วยตนเอง

    หรือคุณจะกำหนดค่าเซิร์ฟเวอร์ Firebase MCP ด้วยตนเองก็ได้ โดยทำดังนี้

    1. เรียกใช้คำสั่งต่อไปนี้ในโฟลเดอร์แอป

      claude mcp add firebase npx -- -y firebase-tools@latest mcp

    2. ยืนยันการติดตั้ง

      claude mcp list

      ระบบควรแสดงผลลัพธ์ดังนี้

      firebase: npx -y firebase-tools@latest mcp - ✓ Connected

Claude Desktop

หากต้องการกำหนดค่า Claude Desktop ให้ใช้เซิร์ฟเวอร์ Firebase MCP ให้แก้ไขไฟล์ claude_desktop_config.json คุณสามารถเปิดหรือสร้างไฟล์นี้ได้จากเมนู Claude > Settings เลือกแท็บนักพัฒนาซอฟต์แวร์ แล้วคลิกแก้ไขการกำหนดค่า

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

Cline

หากต้องการกำหนดค่า Cline ให้ใช้เซิร์ฟเวอร์ Firebase MCP ให้แก้ไขไฟล์ cline_mcp_settings.json คุณสามารถเปิดหรือสร้างไฟล์นี้ได้โดยคลิกไอคอนเซิร์ฟเวอร์ MCP ที่ด้านบนของบานหน้าต่าง Cline แล้วคลิกปุ่มกำหนดค่าเซิร์ฟเวอร์ MCP

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

Cursor

ตัวเลือกที่ 1: ปลั๊กอิน Marketplace (แนะนำ)

ติดตั้งปลั๊กอิน Firebase จาก Cursor Marketplace วิธีนี้จะกำหนดค่าเซิร์ฟเวอร์ MCP โดยอัตโนมัติและให้สิทธิ์เข้าถึง ความสามารถของ Agent Firebase

ตัวเลือกที่ 2: การตั้งค่า MCP ด้วยคลิกเดียว

หากต้องการเพิ่มเซิร์ฟเวอร์ MCP ลงในการกำหนดค่าส่วนกลางเท่านั้น ให้คลิกปุ่มต่อไปนี้

ติดตั้งเซิร์ฟเวอร์ MCP

ตัวเลือกที่ 3: การกำหนดค่าด้วยตนเอง

หากต้องการกำหนดค่าเซิร์ฟเวอร์สำหรับโปรเจ็กต์ที่เฉพาะเจาะจงหรือต้องการแก้ไขการตั้งค่าด้วยตนเอง ให้อัปเดตไฟล์ mcp.json โดยทำดังนี้

  • สำหรับโปรเจ็กต์ที่เฉพาะเจาะจง ให้แก้ไข .cursor/mcp.json
  • สำหรับโปรเจ็กต์ทั้งหมด (ส่วนกลาง) ให้แก้ไข ~/.cursor/mcp.json
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

VS Code Copilot

หากต้องการกำหนดค่าโปรเจ็กต์เดียว ให้แก้ไขไฟล์ .vscode/mcp.json ในพื้นที่ทำงาน

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

วินด์เซิร์ฟ

หากต้องการกำหนดค่า Windsurf Editor ให้แก้ไขไฟล์ ~/.codeium/windsurf/mcp_config.json โดยทำดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตรวจสอบก่อนดำเนินการ

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

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

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

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

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

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