Inizia a utilizzare Firebase SQL Connect con gli agenti AI

Questa guida rapida mostra come utilizzare Firebase SQL Connect con lo strumento di programmazione AI per creare rapidamente applicazioni relazionali full-stack. Se doti il tuo agente delle competenze dell'agente Firebase, non dovrai scrivere codice boilerplate per il database o configurare manualmente gli endpoint. Scoprirai come configurare il tuo progetto locale, configurare l'assistente AI e utilizzare un singolo prompt per generare uno schema PostgreSQL sicuro, operazioni GraphQL e un frontend React completo. Puoi utilizzare ciò che impari qui per creare frontend per qualsiasi piattaforma supportata da Firebase SQL Connect.

Prima di iniziare

Per completare questa guida rapida, assicurati che il tuo ambiente sia configurato con quanto segue. Se hai bisogno di assistenza passo passo per il tuo sistema operativo specifico, consulta la guida alla configurazione standard:

  • Node.js: installa Node.js per eseguire l'interfaccia a riga di comando di Firebase e alimentare il frontend React generato.

  • Interfaccia a riga di comando di Firebase: installa l'interfaccia a riga di comando di Firebase a livello globale:

    npm install -g firebase-tools

  • Strumento di programmazione AI: installa un editor moderno basato sull'AI (ad esempio Antigravity, Android Studio, Cursor o Windsurf).

Configurare lo spazio di lavoro

Per prima cosa, apri il tuo strumento di programmazione AI preferito e crea una nuova directory di progetto. Apri il terminale integrato dello strumento ed esegui il comando di inizializzazione:

firebase init dataconnect

Questo comando ti guida nell'inizializzazione del progetto. Quando richiesto, scegli le opzioni per:

  • Crea un nuovo progetto Firebase
  • Salta la generazione dello schema di Gemini
  • crea una nuova istanza Cloud SQL
  • Creare un modello React
  • Seleziona Sì per installare le competenze dell'agente per Firebase.

Generare l'app con l'AI

Con le competenze dell'agente Firebase installate, l'assistente AI può generare lo schema, le operazioni e il codice frontend di SQL Connect direttamente da un prompt di alto livello.

Copia e incolla uno dei seguenti prompt nell'assistente AI per generare il backend, le relazioni del database e il frontend React:

Esempio 1: app di recensioni di film

Prompt:

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.

Esempio 2: vetrina di e-commerce

Prompt:

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.

Esempio 3: blog con più autori

Prompt:

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.

Cosa crea l'assistente AI

Quando esegui questi prompt, l'assistente AI gestisce automaticamente le attività tecniche più complesse:

  • Schema del database (dataconnect/schema/schema.gql): traduce i tuoi requisiti in tabelle relazionali utilizzando la direttiva @table, gestendo automaticamente le chiavi esterne e le chiavi primarie.
  • Operazioni GraphQL (dataconnect/[connector_name]/*.gql): genera le query e le mutazioni esatte richieste dalla tua app, protette dalla direttiva @auth.
  • SDK generato (src/dataconnect/): utilizza l'interfaccia a riga di comando di Firebase per generare istantaneamente un SDK client con controllo rigoroso dei tipi in base allo schema e alle operazioni.
  • Frontend React (src/): collega un'applicazione React completa e con uno stile accattivante che utilizza l'SDK generato per comunicare con il nuovo backend.

Distribuzione in produzione

Per eseguire il deployment di schema, query e mutazioni in produzione, esegui questo comando nel terminale:

firebase deploy --only dataconnect

Dopo il deployment, visita la console Firebase per visualizzare lo schema live ed eseguire operazioni direttamente sull'istanza Cloud SQL.

Passaggi successivi

Ora che hai completato la guida rapida, ecco alcuni passaggi successivi:

  • Esplora un repository di app di avvio rapido e crea un'app SQL Connect seguendo i nostri codelab.
  • Aggiungi dati al database e monitora il servizio SQL Connect nella console Firebase.
  • Scopri di più su schema, query e mutazione.
  • Scopri di più sugli SDK client e sugli SDK Admin.