Erste Schritte mit Firebase Data Connect

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

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

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

In Ihrer lokalen Entwicklungsumgebung führen Sie dann folgende Schritte aus:

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

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

  1. Erstellen Sie ein Firebase-Projekt, wenn nicht bereits 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 Arbeitsbereichsfeld 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 eine Namenskonvention für Ihre Cloud SQL for PostgreSQL-Datenbank aus.

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

    bestätigen.

Console-Ablauf: KI-Unterstützung zum Erstellen von Vorgängen für Ihre Kunden nutzen

Sobald Ihr Schema bereitgestellt wurde, können Sie die ersten Schritte unternehmen, um diese Daten über Ihre Client-Apps zugänglich zu machen. Dazu erstellen Sie einen Connector mit Abfragen und Mutationen, die Sie im Backend bereitstellen und später von Clients aufrufen können.

Unsere KI-Tools können Ihnen dabei helfen.

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

  2. Sehen Sie sich nach einigen Augenblicken im Workflow-Bereich Vorgänge generieren, der angezeigt wird, die Liste der Abfragen und Mutationen an, die von Gemini basierend auf Ihrem Schema bereitgestellt werden.

  3. Klicken Sie auf die einzelnen Vorgangszeilen, um den GraphQL-Code zu prüfen, mit dem der jeweilige Vorgang definiert wird. Verwenden Sie bei Bedarf das Papierkorbsymbol, um Vorgänge zu löschen, die Sie nicht benötigen.

  4. Klicken Sie zum Hinzufügen von Vorgängen auf die Schaltfläche + Hinzufügen. Gehen Sie anschließend so vor:

    1. Beschreiben Sie den Vorgang in natürlicher Sprache.

      Beispiel:

      List all products

    2. Sehen Sie sich das generierte GraphQL an.

    3. Wenn der Vorgang akzeptabel ist, klicken Sie auf Einfügen, um ihn Ihrer Liste mit Vorgängen hinzuzufügen.

  5. Entfernen und fügen Sie weiterhin Vorgänge hinzu, bis Ihr Vorgangssatz akzeptabel ist.

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

Konsolenablauf: 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 entsprechenden Tabellen erstellt und bereitgestellt wurde.

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

  1. Öffnen Sie den Tab Daten.

  2. Klicken Sie auf das Symbol Hilfe beim Verfassen von GraphQL-Abfragen 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 optimieren, 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 Daten in die entsprechende Tabelle in Ihrer PostgreSQL-Datenbank geschrieben. Sie können eine Abfrage in der Konsole erstellen, um die gespeicherten Daten anzusehen:

  1. Wiederholen Sie die vorherigen Schritte und verwenden Sie Hilfe beim Verfassen von GraphQL-Abfragen 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 Ihre bereitgestellte Datenbank geladen 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 Ihnen 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 in dem neu erstellten Verzeichnis aus, um eine Data Connect-Entwicklungsumgebung und eine browserbasierte IDE einzurichten und Client-SDKs zu generieren.

      curl -sL https://firebase.tools/init/dataconnect | editor=true bash

    Mit diesem Skript wird die Installation versucht. Die installierte IDE bietet Tools, einschließlich vorab gebündelter VS Code-Erweiterungen, mit denen Sie Ihr Schema verwalten und Abfragen und Mutationen definieren können, die in Ihrer Anwendung verwendet werden sollen, und stark typisierte SDKs generieren können.

    Das Skript synchronisiert auch Assets, die Sie in der Firebase-Konsole erstellt haben, mit Ihrem lokalen Verzeichnis und generiert Client-SDKs für alle Apps, die Sie für Ihr Projekt registriert haben.

Lokaler Ablauf: Lokales Projekt einrichten

Um Ihr lokales Projekt einzurichten, initialisieren Sie Ihr Projektverzeichnis. 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 Emulatoren starten.

Lokaler Ablauf: Schema und Connector in der lokalen Umgebung suchen

Die Option zur automatischen Installation für macOS oder Linux, die Sie zum Synchronisieren von Assets mit einem vorhandenen Projekt verwendet haben, hat die folgenden Auswirkungen:
  • Es synchronisiert das Schema, das Sie bereitgestellt haben.
    • Suchen Sie Ihr Schema: Es befindet sich im Verzeichnis Ihres Firebase-Projekts in der Datei /dataconnect/schema/schema.gql.
  • Sie synchronisiert die Abfragen und Mutationen im Connector, den Sie bereitgestellt haben.
    • Suchen Sie nach dem 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 hätte 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
}

Schema-Beispiel für 1:1-Tabelle: MovieMetadata

Bei Filmen können Sie Filmmetadaten modellieren.

In schema.gql können Sie beispielsweise das folgende Snippet hinzufügen oder von Gemini generierten Code überprüfen.

# 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 weiß, dass es sich hierbei um eine Beziehung zwischen Movie und MovieMetadata handelt, und wird diese Beziehung für Sie verwalten.

Weitere Informationen zu Data Connect-Schemas in der Dokumentation

Lokaler Ablauf: Tabellen weitere Daten hinzufügen

Im IDE-Editorbereich werden CodeLens-Schaltflächen über den GraphQL-Typen in /dataconnect/schema/schema.gql angezeigt. Wie in der Konsole können Sie eine Mutation erstellen, um Daten in Ihre Produktionsdatenbank einzufü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, <type>_insert.qgl, hinzugefügt, z. B. Movie_insert.gql oder Product_insert.gql. Daten in den Feldern für diesen Typ hartcodieren.
  3. Klicken Sie auf die Schaltfläche Ausführen (Produktion).
    Schaltfläche „Ausführen“ für Code Lens für Firebase Data Connect
  4. Wiederholen Sie die vorherigen Schritte, um einer anderen Tabelle einen Datensatz hinzuzufügen.

So können Sie schnell prüfen, 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

Ihr Schema und Ihre Connector-Vorgänge werden lokal synchronisiert.

Jetzt können Sie die VS Code-Erweiterung verwenden, um Client-SDKs zu generieren und mit der Implementierung von Aufrufen für Abfragen und Mutationen in iOS-, Android-, Web- und Flutter-Apps zu beginnen.

  1. Klicken Sie in der Erweiterungsoberfläche 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. Dort wird der Data Connect-SDK-Code generiert und gespeichert.

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

Lokaler Ablauf: SDKs verwenden, um Ihre Anfrage aus einer App aufzurufen

Sie haben Ihr Schema und Ihre Vorgänge bereits in der Firebase-Konsole bereitgestellt. Wenn Sie Vorgänge aus Ihrer App aufrufen möchten, können Sie das SDK verwenden, das von Data Connect generiert wurde, um einen Aufruf Ihrer ListMovies-Abfrage zu implementieren.

Web

  1. Fügen Sie Ihrer Web-App Firebase 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 />);

Swift

  1. Fügen Sie Ihrer iOS-App Firebase hinzu.

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

    Wählen Sie in der oberen Navigationsleiste von Xcode File > Add Package Dependencies > Add Local aus und wählen Sie den Ordner mit der generierten Package.swift aus.

  3. Im Haupt-Delegate 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()
    }
}

Kotlin Android

  1. Fügen Sie Ihrer Android-App Firebase hinzu.

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

    Aktualisieren Sie plugins und dependencies in Ihrem 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
      }
    }
  }
}

Flutter

  1. Fügen Sie Ihrer Flutter-App Firebase 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:

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

Weitere Informationen finden Sie in der Dokumentation. Da Sie die Kurzanleitung abgeschlossen haben, gilt beispielsweise Folgendes: