เริ่มต้นใช้งาน Firebase SQL Connect โดยใช้เอเจนต์ AI

การเริ่มต้นอย่างรวดเร็วนี้แสดงให้คุณเห็นถึงวิธีใช้ Firebase SQL Connect กับเครื่องมือเขียนโค้ด AI เพื่อสร้างแอปพลิเคชันเชิงสัมพันธ์แบบ Full-Stack ได้อย่างรวดเร็ว เมื่อติดตั้ง Firebase Agent Skills ให้กับเอเจนต์แล้ว คุณก็ไม่จำเป็นต้องเขียนโค้ดฐานข้อมูลแบบ Boilerplate หรือกำหนดค่าปลายทางด้วยตนเอง คุณจะได้เรียนรู้วิธีตั้งค่าโปรเจ็กต์ที่อยู่ในเครื่อง กำหนดค่าผู้ช่วย AI และใช้พรอมต์เดียวเพื่อสร้างสคีมา PostgreSQL ที่ปลอดภัย, การดำเนินการ GraphQL และฟรอนท์เอนด์ React ที่สมบูรณ์ คุณสามารถใช้สิ่งที่ได้เรียนรู้ที่นี่เพื่อสร้างส่วนหน้าสำหรับแพลตฟอร์มใดก็ได้ที่ Firebase SQL Connect รองรับ

ก่อนเริ่มต้น

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

  • Node.js: ติดตั้ง Node.js เพื่อเรียกใช้ Firebase CLI และขับเคลื่อนส่วนหน้า React ที่สร้างขึ้น

  • Firebase CLI: ติดตั้ง Firebase CLI ทั่วโลกด้วยคำสั่งต่อไปนี้

    npm install -g firebase-tools

  • เครื่องมือเขียนโค้ด AI: ติดตั้งโปรแกรมแก้ไขที่ทันสมัยซึ่งขับเคลื่อนด้วย AI (เช่น Antigravity, Android Studio, Cursor หรือ Windsurf)

จัดเตรียมพื้นที่ทำงาน

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

firebase init dataconnect

คำสั่งนี้จะแนะนำคุณตลอดขั้นตอนการเริ่มต้นโปรเจ็กต์ เมื่อได้รับข้อความแจ้ง ให้เลือกตัวเลือกต่อไปนี้

  • สร้างโปรเจ็กต์ Firebase ใหม่
  • ข้ามการสร้างสคีมา Gemini
  • สร้างอินสแตนซ์ Cloud SQL ใหม่
  • สร้างเทมเพลต React
  • เลือกใช่ เพื่อติดตั้ง Agent Skills สำหรับ Firebase

สร้างแอปด้วย AI

เมื่อติดตั้ง Firebase Agent Skills แล้ว ผู้ช่วย AI จะสร้างสคีมา SQL Connect, การดำเนินการ และโค้ดส่วนหน้าได้โดยตรงจากพรอมต์ระดับสูง

คัดลอกและวางพรอมต์ใดพรอมต์หนึ่งต่อไปนี้ลงในผู้ช่วย AI เพื่อสร้างแบ็กเอนด์ ความสัมพันธ์ของฐานข้อมูล และส่วนหน้า React

ตัวอย่างที่ 1: แอปรีวิวภาพยนตร์

พรอมต์:

Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.

ตัวอย่างที่ 2: หน้าร้านอีคอมเมิร์ซ

พรอมต์:

Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.

ตัวอย่างที่ 3: บล็อกที่มีผู้เขียนหลายคน

พรอมต์:

Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.

สิ่งที่ผู้ช่วย AI สร้าง

เมื่อคุณเรียกใช้พรอมต์เหล่านี้ ผู้ช่วย AI จะจัดการงานทางเทคนิคที่ซับซ้อนให้โดยอัตโนมัติ

  • สคีมาฐานข้อมูล (dataconnect/schema/schema.gql): แปลข้อกำหนดของคุณเป็นตารางเชิงสัมพันธ์โดยใช้คำสั่ง @table ซึ่งจะจัดการคีย์นอกและคีย์หลักโดยอัตโนมัติ
  • การดำเนินการ GraphQL (dataconnect/[connector_name]/*.gql): สร้างคําค้นหาและการเปลี่ยนแปลงที่แอปของคุณต้องการอย่างแม่นยำ ซึ่งได้รับการรักษาความปลอดภัยด้วยคำสั่ง @auth
  • SDK ที่สร้างขึ้น (src/dataconnect/): ใช้ Firebase CLI เพื่อสร้าง SDK ของไคลเอ็นต์ที่พิมพ์อย่างเข้มงวดตามสคีมาและการดำเนินการของคุณได้ทันที
  • ฟรอนท์เอนด์ React (src/): เชื่อมต่อแอปพลิเคชัน React ที่สมบูรณ์และมีสไตล์สวยงามซึ่งใช้ SDK ที่สร้างขึ้นเพื่อสื่อสารกับแบ็กเอนด์ใหม่

ทำให้ใช้งานได้ในเวอร์ชันที่ใช้งานจริง

หากต้องการทำให้สคีมา คำค้นหา และการเปลี่ยนแปลงใช้งานได้ในเวอร์ชันที่ใช้งานจริง ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

firebase deploy --only dataconnect

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

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

เมื่อทำตามการเริ่มต้นอย่างรวดเร็วนี้เสร็จแล้ว ขั้นตอนถัดไปที่คุณควรทำมีดังนี้

  • สำรวจที่เก็บแอปเริ่มต้นอย่างรวดเร็วและสร้างแอป SQL Connect โดยทำตาม Codelab ของเรา
  • เพิ่มข้อมูลลงในฐานข้อมูลและตรวจสอบบริการ SQL Connect ในคอนโซล Firebase
  • ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาสคีมา, คำค้นหาและ การเปลี่ยนแปลง
  • ดูข้อมูลเพิ่มเติมเกี่ยวกับ SDK ของไคลเอ็นต์ และ Admin SDK