Mulai menggunakan Firebase SQL Connect dengan agen AI

Panduan memulai ini menunjukkan cara menggunakan Firebase SQL Connect dengan alat coding AI untuk membangun aplikasi relasional full-stack dengan cepat. Dengan melengkapi agen Anda dengan Firebase Agent Skills, Anda tidak perlu menulis kode database boilerplate atau mengonfigurasi endpoint secara manual. Anda akan mempelajari cara menyiapkan project lokal, mengonfigurasi asisten AI, dan menggunakan satu perintah untuk membuat skema PostgreSQL yang aman, operasi GraphQL, dan frontend React lengkap. Anda dapat menggunakan pengetahuan yang Anda pelajari di sini untuk membuat frontend bagi platform yang didukung Firebase SQL Connect.

Sebelum memulai

Untuk menyelesaikan panduan memulai ini, pastikan lingkungan Anda disiapkan dengan hal berikut. Jika Anda memerlukan bantuan langkah demi langkah untuk sistem operasi tertentu, lihat panduan penyiapan standar:

  • Node.js: Instal Node.js untuk menjalankan Firebase CLI dan mendukung frontend React yang dibuat.

  • Firebase CLI: Instal Firebase CLI secara global:

    npm install -g firebase-tools

  • Alat Coding AI: Instal editor modern yang didukung AI (seperti Antigravity, Android Studio, Cursor, atau Windsurf).

Menyiapkan ruang kerja Anda

Pertama, buka alat coding AI pilihan Anda dan buat direktori project baru. Buka terminal terintegrasi alat Anda dan jalankan perintah inisialisasi:

firebase init dataconnect

Perintah ini akan memandu Anda melakukan inisialisasi project. Jika diminta, pilih opsi untuk:

  • Membuat project Firebase baru
  • Melewati pembuatan skema Gemini
  • Membuat instance Cloud SQL baru
  • Membuat template React
  • Pilih Ya untuk menginstal Agent Skills for Firebase

Membuat aplikasi Anda dengan AI

Dengan Firebase Agent Skills terinstal, asisten AI Anda dapat membuat skema, operasi, dan kode frontend SQL Connect langsung dari perintah tingkat tinggi.

Salin dan tempel salah satu perintah berikut ke asisten AI Anda untuk membuat backend, hubungan database, dan frontend React:

Contoh 1: Aplikasi ulasan film

Perintah:

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.

Contoh 2: Etalase e-commerce

Perintah:

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.

Contoh 3: Blog multi-penulis

Perintah:

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.

Yang dibuat oleh Asisten AI Anda

Saat Anda menjalankan perintah ini, asisten AI Anda akan otomatis menangani tugas teknis yang berat:

  • Skema Database (dataconnect/schema/schema.gql): Menerjemahkan persyaratan Anda ke dalam tabel relasional menggunakan direktif @table, yang secara otomatis mengelola kunci asing dan kunci utama.
  • Operasi GraphQL (dataconnect/[connector_name]/*.gql): Membuat kueri dan mutasi yang tepat yang diperlukan oleh aplikasi Anda, yang diamankan oleh direktif @auth.
  • SDK yang Dibuat (src/dataconnect/): Menggunakan Firebase CLI untuk langsung membuat SDK klien yang diketik secara ketat berdasarkan skema dan operasi Anda.
  • Frontend React (src/): Menghubungkan aplikasi React lengkap dan bergaya indah yang menggunakan SDK yang dibuat untuk berkomunikasi dengan backend baru Anda.

Men-deploy ke produksi

Untuk men-deploy skema, kueri, dan mutasi ke produksi, jalankan perintah berikut di terminal:

firebase deploy --only dataconnect

Setelah men-deploy, buka Firebase console untuk melihat skema aktif dan menjalankan operasi langsung terhadap instance Cloud SQL Anda.

Langkah berikutnya

Setelah menyelesaikan panduan memulai, berikut beberapa langkah berikutnya:

  • Jelajahi repositori aplikasi panduan memulai dan buat aplikasi SQL Connect dengan mengikuti codelab kami.
  • Tambahkan data ke database Anda, dan pantau layanan SQL Connect di Firebase console.
  • Pelajari lebih lanjut pengembangan skema, kueri dan mutasi.
  • Pelajari lebih lanjut SDK klien dan Admin SDK.