Erste Schritte mit Firebase Data Connect

In dieser Kurzanleitung erfahren Sie, wie Sie Firebase Data Connect in Ihrer Anwendung mit einer Produktions-SQL-Instanz erstellen.

In der Firebase-Konsole haben Sie folgende Möglichkeiten:

  • Fügen Sie Firebase Data Connect Ihrem Firebase-Projekt hinzu.
  • Erstellen Sie in der Firebase-Konsole ein Schema für eine App mit KI-gestützter Schemagenerierung und stellen Sie es bereit.
  • Stellen Sie eine Cloud SQL-Instanz für Ihre App bereit.
  • Füllen Sie Ihre Datenbank mit Beispieldaten aus.Firebase
  • Mit der KI-gestützten Vorgangsgenerierung können Sie Abfragen und Mutationen erstellen, die Sie lokal bereitstellen und zum Entwickeln von Clientcode verwenden können.

Führen Sie dann in Ihrer lokalen Entwicklungsumgebung die folgenden Schritte aus:

  • Richten Sie Entwicklungstools ein, einschließlich einer Visual Studio Code-Erweiterung, die mit Ihrer Produktionsinstanz funktioniert.
  • Synchronisieren Sie Ihre lokale Umgebung mit den Assets, die Sie in der Konsole erstellt haben.
  • Erstellen Sie streng typisierte SDKs und verwenden Sie sie in Ihrer App.

Console-Ablauf: Mithilfe von KI-Unterstützung ein Schema entwerfen und dann in der Datenbank bereitstellen

  1. Erstellen Sie ein Firebase-Projekt, falls noch nicht geschehen.
    1. Klicken Sie in der Firebase Console auf Projekt hinzufügen und folgen Sie der Anleitung auf dem Bildschirm.
  2. Rufen Sie in der Firebase-Konsole den Bereich Data Connect auf.
  3. Klicken Sie auf die Schaltfläche Gemini ausprobieren.
  4. Beschreiben Sie im angezeigten Workflow-Steuerfeld Schema Generator eine App, damit Gemini Ihnen beim Erstellen eines GraphQL-Schemas helfen kann.
  5. Prüfen Sie das GraphQL-Schema und klicken Sie dann auf Aktualisieren und bereitstellen.

  6. Führen Sie für Ihr Projekt ein Upgrade auf den Tarif „Blaze“ durch. So können Sie eine Cloud SQL for PostgreSQL-Instanz erstellen.

  7. Wählen Sie Neue Cloud SQL-Instanz erstellen aus. Wählen Sie im angezeigten Dialogfeld einen Speicherort und einen Namen für Ihre Cloud SQL for PostgreSQL-Datenbank aus.

    Ihr App-Schema wird zusammen mit einer PostgreSQL-Datenbank bereitgestellt, die diesem Schema entspricht.

Konsolenvorgang: Mit KI-Unterstützung Vorgänge für Ihre Kunden erstellen

Sobald Ihr Schema bereitgestellt wurde, können Sie die ersten Schritte unternehmen, um diese Daten für Ihre Client-Apps verfügbar zu machen. Erstellen Sie dazu einen Connector mit Abfragen und Mutationen, der im Backend bereitgestellt und später von Clients aufgerufen wird.

Unsere KI-gestützten Tools unterstützen Sie dabei.

  1. Klicken Sie auf die Schaltfläche Vorgänge mit Gemini generieren.

  2. Nach einigen Augenblicken wird im Workflowbereich Generate your operations (Vorgänge generieren) die Liste der Abfragen und Mutationen angezeigt, die Gemini basierend auf Ihrem Schema bereitgestellt hat.

  3. Klicken Sie auf die einzelnen Zeilen der Vorgänge, um den GraphQL-Code anzusehen, der den jeweiligen Vorgang definiert. Verwenden Sie bei Bedarf den Papierkorb, um nicht benötigte Vorgänge zu löschen.

  4. Klicken Sie auf die Schaltfläche + Hinzufügen, um Vorgänge hinzuzufügen. Gehen Sie anschließend so vor:

    1. Beschreiben Sie Ihre Operation in natürlicher Sprache.

      Beispiel:

      List all products

    2. Sehen Sie sich die generierte GraphQL-Anfrage an.

    3. Wenn der Vorgang in Ordnung ist, klicken Sie auf Einfügen, um ihn der Liste der Vorgänge hinzuzufügen.

  5. Entfernen und fügen Sie weiterhin Vorgänge hinzu, bis die Gruppe der Vorgänge akzeptabel ist.

  6. Wenn Sie diese Liste von Vorgängen als clientseitig aufrufbares Connector-Set bereitstellen möchten, wählen Sie den Namen des Connectors aus und klicken Sie dann auf Bereitstellen.

Console-Ablauf: Mit Gemini in Firebase eine Mutation erstellen und die Datenbank füllen

In den vorherigen Schritten haben Sie ein Data Connect Schema mit relevanten Entitätstypen erstellt und in der Produktion bereitgestellt. Das bedeutet, dass auch eine PostgreSQL-Datenbank mit den entsprechenden Tabellen erstellt und bereitgestellt wurde.

Sie können Gemini in Firebase verwenden, um Ihre Datenbank mithilfe von Eingaben in natürlicher Sprache zu füllen. So können Sie eine GraphQL-Mutation zum Aktualisieren einer Ihrer Tabellen und eine Abfrage zum Bestätigen der Aktualisierungen definieren.

  1. Öffnen Sie den Tab Daten.

  2. Klicken Sie auf das Symbol Hilfe beim Verfassen von GraphQL pen_spark und geben Sie Ihre Eingabe in das angezeigte Feld ein.

    Beispiel:

    Add data for three sample products to my app.

  3. Klicken Sie auf Erstellen. Die Mutation wird zurückgegeben.

  4. Sehen Sie sich die Ausgabe an. Klicken Sie bei Bedarf auf Bearbeiten, um den Prompt zu verfeinern, und dann auf Neu generieren.

  5. Klicken Sie dann auf Einfügen, um die Mutation in den Dateneditor einzufügen.

  6. Klicken Sie auf Ausführen.

Wenn Sie die Mutation ausführen, werden die Daten in die entsprechende Tabelle in Ihrer PostgreSQL-Datenbank geschrieben. Sie können in der Console eine Abfrage erstellen, um die gespeicherten Daten aufzurufen:

  1. Wiederholen Sie die vorherigen Schritte und verwenden Sie Hilfe beim Verfassen von GraphQL pen_spark, um eine Abfrage zu erstellen.

  2. Geben Sie Ihre Eingabe in das angezeigte Feld ein.

    Beispiel:

    Query data for all sample products in my app.

  3. Klicken Sie auf Generieren und dann auf Ausführen.

Lokaler Ablauf: Entwicklungstools auswählen

Nachdem Sie Daten in Ihrer bereitgestellten Datenbank und einen Connector bereitgestellt haben, können Sie die Entwicklung Ihres Schemas und Ihrer Connectors in Ihrer lokalen Entwicklungsumgebung fortsetzen.

Zuerst müssen Sie eine lokale Umgebung einrichten. Data Connect bietet zwei Möglichkeiten, Entwicklungstools zu installieren.

Lokaler Ablauf: Entwicklungsumgebung einrichten

  1. Erstellen Sie ein neues Verzeichnis für Ihr lokales Projekt.

  2. Führen Sie den folgenden Befehl im neu erstellten Verzeichnis aus.

      curl -sL https://firebase.tools/dataconnect | bash

    Dieses Script versucht, die Entwicklungsumgebung für Sie einzurichten und eine browserbasierte IDE zu starten. Diese IDE bietet Tools, einschließlich vorkonfigurierter VS Code-Erweiterungen, mit denen Sie Ihr Schema verwalten, Abfragen und Mutationen für Ihre Anwendung definieren und stark typisierte SDKs generieren können.

  alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

Lokaler Ablauf: Projektverzeichnis einrichten

Um Ihr lokales Projekt einzurichten, müssen Sie das Projektverzeichnis initialisieren. Klicken Sie im IDE-Fenster im linken Bereich auf das Firebase-Symbol, um die Benutzeroberfläche der Data Connect-VS Code-Erweiterung zu öffnen:

  1. Klicken Sie auf die Schaltfläche Über Google anmelden.
  2. Klicken Sie auf die Schaltfläche Firebase-Projekt verknüpfen und wählen Sie das Projekt aus, das Sie zuvor in der Console erstellt haben.

  3. Klicken Sie auf die Schaltfläche firebase init ausführen und führen Sie den Vorgang aus.

  4. Klicken Sie auf die Schaltfläche Emulatoren starten.

Lokaler Ablauf: Schema und Connector in der lokalen Umgebung finden

Im Schritt firebase init im vorherigen Abschnitt werden Assets mit Ihrer lokalen Entwicklungsumgebung synchronisiert:

  • Es synchronisiert das von Ihnen bereitgestellte Schema.
    • Suchen Sie das Schema: Es befindet sich im Firebase-Projektverzeichnis in der Datei /dataconnect/schema/schema.gql.
  • Es werden die Abfragen und Mutationen im von Ihnen bereitgestellten Connector synchronisiert.
    • Verbinden Sie den Connector: Die Vorgänge befinden sich im Verzeichnis Ihres Firebase-Projekts im Verzeichnis /dataconnect/connector/.

Lokaler Ablauf: Schema verstehen

Schemabeispiel: Film

In Data Connect werden GraphQL-Felder Spalten zugeordnet. Ein Movie-Typ hat wahrscheinlich id, title, imageUrl und genre. Data Connect erkennt die primitiven Datentypen String und UUID.

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

Schemabeispiel für eine 1:1-Tabelle: MovieMetadata

Bei Filmen können Sie Filmmetadaten modellieren.

Sie können beispielsweise in schema.gql das folgende Snippet oder den von Gemini generierten Code einfügen.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

Das Feld movie ist einem Typ von Movie zugeordnet. Data Connect ist sich bewusst, dass es sich um eine Beziehung zwischen Movie und MovieMetadata handelt, und verwaltet diese Beziehung für Sie.

Weitere Informationen zu Data Connect-Schemas in der Dokumentation

Lokaler Datenfluss: Tabellen mehr Daten hinzufügen

Im Bereich „IDE-Editor“ werden CodeLens-Schaltflächen über den GraphQL-Typen in /dataconnect/schema/schema.gql angezeigt. Genau wie in der Console können Sie eine Mutation erstellen, um Ihrer Produktionsdatenbank Daten hinzuzufügen.

So fügen Sie einer Tabelle lokal Daten hinzu:

  1. Klicken Sie in schema.gql über der Erklärung für einen Ihrer Typen (z. B. Movie, Product oder Account, je nach Art Ihrer App) auf die Schaltfläche Daten hinzufügen.
    Code Lens-Schaltfläche „Daten hinzufügen“ für Firebase Data Connect
  2. Ihrem Arbeitsverzeichnis wird eine neue Datei namens <type>_insert.qgl hinzugefügt, z. B. Movie_insert.gql oder Product_insert.gql. Daten für diesen Typ in den Feldern hartcodieren.
  3. Klicken Sie auf die Schaltfläche Ausführen (Produktion).
    Code Lens-Schaltfläche „Ausführen“ für Firebase Data Connect
  4. Wiederholen Sie die vorherigen Schritte, um anderen Tabellen einen Datensatz hinzuzufügen.

So prüfen Sie schnell, ob Daten hinzugefügt wurden:

  1. Klicken Sie in schema.gql über der Typdeklaration auf die Schaltfläche Daten lesen.
  2. Klicken Sie in der resultierenden <type>_read.gql-Datei, z. B. Product_read.gql, auf die Schaltfläche Ausführen (Produktion), um die Abfrage auszuführen.

Weitere Informationen zu Data Connect-Mutationen in der Dokumentation

Lokaler Ablauf: SDKs generieren

Schema- und Connector-Vorgänge werden lokal synchronisiert. Jetzt können Sie mit lokalen Tools Client SDKs generieren, um Aufrufe von Abfragen und Mutationen in iOS-, Android-, Web- und Flutter-Apps zu implementieren.

  1. Klicken Sie auf die Schaltfläche SDK zur App hinzufügen.

  2. Wählen Sie im angezeigten Dialogfeld ein Verzeichnis mit Code für Ihre App aus. Data Connect Der SDK-Code wird dort generiert und gespeichert.

  3. Wählen Sie Ihre App-Plattform aus. Der SDK-Code wird dann sofort im ausgewählten Verzeichnis generiert.

Lokaler Ablauf: Mit den SDKs Ihre Abfrage über eine App aufrufen

Nachdem Ihr aktualisiertes Schema (falls zutreffend) und Ihre Abfrage in der Produktion bereitgestellt wurden, können Sie das von Data Connect generierte SDK verwenden, um einen Aufruf Ihrer ListMovies-Abfrage zu implementieren.

Web Swift Kotlin Android Flutter
  1. Fügen Sie Firebase Ihrer Web-App hinzu.

  2. In der Hauptdatei Ihrer React-App:

    • Generiertes SDK importieren
    • Data Connect-Methoden aufrufen.
    import React from 'react';
import ReactDOM from 'react-dom/client';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

function App() {
  const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
  useEffect(() => {
    listMovies.then(res => setMovies(res.data));
  }, []);
  return (
    movies.map(movie => <h1>{movie.title}</h1>);
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
  1. Fügen Sie Firebase Ihrer iOS-App hinzu.

  2. Wenn Sie das generierte SDK verwenden möchten, konfigurieren Sie es in Xcode als Abhängigkeit.

    Wählen Sie in der oberen Navigationsleiste von Xcode File > Add Package Dependencies > Add Local (Datei > Paketabhängigkeiten hinzufügen > Lokal hinzufügen) aus und wählen Sie den Ordner mit der generierten Package.swift aus.

  3. Im Hauptdelegierten Ihrer App:

    • Generiertes SDK importieren
    • Data Connect-Methoden aufrufen.
    import SwiftUI

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

struct ListMovieView: View {
@StateObject private var queryRef = connector.listMovies.ref()

    var body: some View {
        VStack {
            Button {
                Task {
                    do {
                        try await refresh()
                    } catch {
                        print("Failed to refresh: \(error)")
                    }
                }
            } label: {
                Text("Refresh")
            }

            // use the query results in a view
            ForEach(queryRef.data?.movies ?? []) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}
  1. Fügen Sie Firebase Ihrer Android-App hinzu.

  2. Wenn Sie das generierte SDK verwenden möchten, konfigurieren Sie Data Connect in Gradle als Abhängigkeit.

    Aktualisieren Sie plugins und dependencies in Ihrer app/build.gradle.kts.

    plugins {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest as of March 14, 2025.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.9.0"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.10"
  kotlin("android") version kotlinVersion
  kotlin("plugin.serialization") version kotlinVersion
}

dependencies {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest versions as of March 14, 2025.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")

  // These dependencies are not strictly required, but will very likely be used
  // when writing modern Android applications.
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
  implementation("androidx.appcompat:appcompat:1.7.0")
  implementation("androidx.activity:activity-ktx:1.10.1")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

  3. In der Hauptaktivität Ihrer App:

    • Generiertes SDK importieren
    • Data Connect-Methoden aufrufen.
    import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import kotlinx.coroutines.launch


private val connector = com.myapplication.MoviesConnector.instance

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val textView: TextView = findViewById(R.id.text_view)

    lifecycleScope.launch {
      lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        
        val result = connector.listMovies.runCatching { execute { } }
        
        val newTextViewText = result.fold(
          onSuccess = {
            val titles = it.data.movies.map { it.title }
            "${titles.size} movies: " + titles.joinToString(", ")
          },
          onFailure = { "ERROR: ${it.message}" }
        )
        textView.text = newTextViewText
      }
    }
  }
}
  1. Fügen Sie Firebase Ihrer Flutter-App hinzu.
  2. Installieren Sie die FlutterFire-Befehlszeile dart pub global activate flutterfire_cli.
  3. Führen Sie flutterfire configure aus.
  4. In der Hauptfunktion Ihrer App:
    • Generiertes SDK importieren
    • Data Connect-Methoden aufrufen.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemBuilder: (context, index) => Card(
                      child: Text(
                    snapshot.data!.data.movies[index].title,
                  )),
                  itemCount: snapshot.data!.data.movies.length,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

Nächste Schritte

Sehen Sie sich Ihr bereitgestelltes Projekt an und entdecken Sie weitere Tools:

  • In der Firebase-Konsole können Sie Ihrer Datenbank Daten hinzufügen, Ihre Schemas prüfen und ändern sowie Ihren Data Connect-Dienst überwachen.

Weitere Informationen finden Sie in der Dokumentation. Wenn Sie beispielsweise den Schnellstart abgeschlossen haben: