Erste Schritte mit Firebase SQL Connect mithilfe von KI-Agents

In dieser Kurzanleitung erfahren Sie, wie Sie Firebase SQL Connect mit Ihrem KI-Codierungstool verwenden, um schnell relationale Full-Stack-Anwendungen zu erstellen. Wenn Sie Ihren Agent mit Firebase Agent Skills ausstatten, müssen Sie keinen Boilerplate-Datenbankcode schreiben oder Endpunkte manuell konfigurieren. Sie erfahren, wie Sie Ihr lokales Projekt einrichten, Ihren KI-Assistenten konfigurieren und mit einem einzigen Prompt ein sicheres PostgreSQL-Schema, GraphQL-Vorgänge und ein vollständiges React-Frontend generieren. Mit dem hier erworbenen Wissen können Sie Frontends für alle von Firebase SQL Connect unterstützten Plattformen erstellen.

Hinweis

Für diese Kurzanleitung muss Ihre Umgebung so eingerichtet sein, dass sie die folgenden Anforderungen erfüllt. Eine detaillierte Anleitung für Ihr Betriebssystem finden Sie im Standard-Einrichtungsleitfaden:

  • Node.js: Installieren Sie Node.js, um die Firebase CLI auszuführen und das generierte React-Frontend zu betreiben.

  • Firebase CLI: Installieren Sie die Firebase CLI global:

    npm install -g firebase-tools

  • KI-Codingtool: Installieren Sie einen modernen KI-basierten Editor wie Antigravity, Android Studio, Cursor oder Windsurf.

Arbeitsbereich einrichten

Öffnen Sie zuerst Ihr bevorzugtes KI-Codierungstool und erstellen Sie ein neues Projektverzeichnis. Öffnen Sie das integrierte Terminal Ihres Tools und führen Sie den Initialisierungsbefehl aus:

firebase init dataconnect

Dieser Befehl führt Sie durch die Initialisierung Ihres Projekts. Wählen Sie bei entsprechender Aufforderung die Optionen aus, um:

  • Neues Firebase-Projekt erstellen
  • Generierung von Gemini-Schema überspringen
  • Neue Cloud SQL-Instanz erstellen
  • React-Vorlage erstellen
  • Wählen Sie Ja aus, um Agent Skills für Firebase zu installieren.

App mit KI generieren

Wenn Firebase Agent Skills installiert ist, kann Ihr KI-Assistent Ihr SQL Connect-Schema, Ihre Vorgänge und Ihren Frontend-Code direkt aus einem allgemeinen Prompt generieren.

Kopieren Sie einen der folgenden Prompts und fügen Sie ihn in Ihren KI-Assistenten ein, um Ihr Backend, Datenbankbeziehungen und React-Frontend zu generieren:

Beispiel 1: App für Filmrezensionen

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.

Beispiel 2: E-Commerce-Schaufenster

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.

Beispiel 3: Blog mit mehreren Autoren

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.

Was Ihr KI‑Assistent erstellt

Wenn Sie diese Prompts ausführen, übernimmt Ihr KI-Assistent automatisch die technischen Aufgaben:

  • Datenbankschema (dataconnect/schema/schema.gql): Übersetzt Ihre Anforderungen mithilfe der Direktive @table in relationale Tabellen und verwaltet automatisch Fremd- und Primärschlüssel.
  • GraphQL-Vorgänge (dataconnect/[connector_name]/*.gql): Generiert die genauen Abfragen und Mutationen, die für Ihre App erforderlich sind, gesichert durch die @auth-Anweisung.
  • Generiertes SDK (src/dataconnect/): Mit der Firebase-CLI können Sie basierend auf Ihrem Schema und Ihren Vorgängen sofort ein streng typisiertes Client-SDK generieren.
  • React-Frontend (src/): Hier wird eine vollständige, ansprechend gestaltete React-Anwendung eingerichtet, die über das generierte SDK mit Ihrem neuen Backend kommuniziert.

Für die Produktion bereitstellen

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um Ihr Schema, Ihre Abfragen und Ihre Mutationen in der Produktion bereitzustellen:

firebase deploy --only dataconnect

Rufen Sie nach der Bereitstellung die Firebase Console auf, um Ihr Live-Schema anzusehen und Vorgänge direkt für Ihre Cloud SQL-Instanz auszuführen.

Nächste Schritte

Nachdem Sie die Kurzanleitung durchgearbeitet haben, können Sie Folgendes tun: