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 mithilfe von Schema Assist ein Schema für eine App in der Firebase Console und stellen Sie es bereit.
  • Stellen Sie eine Cloud SQL-Instanz für Ihre App bereit.
  • Mit Gemini Code Assist können Sie Ihre Datenbank mit Beispieldaten füllen.

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.
  • Mithilfe von Erweiterungstools können Sie eine Abfrage implementieren, die in Ihrer App verwendet wird.
  • Erstellen Sie streng typisierte SDKs und verwenden Sie sie in Ihrer App.
  • Bereitstellen Sie das endgültige Schema, die Abfrage und die Daten in der Cloud.

Console-Ablauf: Schema entwerfen und 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.

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

Im vorherigen Schritt 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.

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 haben, können Sie die Entwicklung Ihres Schemas und Ihrer Verbindungen 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 einer vorinstallierten VS Code-Erweiterung, 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 in der lokalen Umgebung finden

Im Schritt firebase init im vorherigen Abschnitt wurde das Schema, das Sie über die Konsole bereitgestellt haben, mit Ihrer lokalen Entwicklungsumgebung synchronisiert.

Suchen Sie das Schema: Es befindet sich im Firebase-Projektverzeichnis in der Datei /dataconnect/schema/schema.gql.

Lokaler Ablauf: Mit dem Schema arbeiten

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 im /dataconnect/schema/schema.gql CodeLens-Schaltflächen über den GraphQL-Typen 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 <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: Abfrage definieren

Jetzt kommt der spaßige Teil: Abfragen. Als Entwickler sind Sie es gewohnt, SQL-Abfragen anstelle von GraphQL-Abfragen zu schreiben. Das kann sich also anfangs etwas anders anfühlen. GraphQL ist jedoch viel prägnanter und typsicherer als reines SQL. Unsere VS Code-Erweiterung erleichtert die Entwicklung.

Sie können eine mit unserem CodeLens generierte Abfrage anpassen, um sie zu implementieren:

  1. Klicken Sie in /dataconnect/schema/schema.gql über einem Typ (Movie, Product, Account usw.) auf die CodeLens-Schaltfläche Daten lesen.
  2. Testen Sie die Abfrage in der resultierenden <type>_read.gql-Datei, indem Sie auf die Schaltfläche Ausführen (Produktion) klicken.
  3. Kopieren Sie die funktionierende Abfrage in /dataconnect/connector/queries.gql.

  4. Damit diese Abfrage bereitgestellt werden kann, müssen Sie einen eindeutigen Namen dafür angeben.

    Im folgenden generischen Beispiel könnte query_name beispielsweise ListMovies, ListProducts oder ListAccounts sein.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

Führen Sie die Abfrage mit der CodeLens-Schaltfläche aus.

Weitere Informationen zu Data Connect-Abfragen finden Sie in der Dokumentation.

Lokaler Ablauf: SDKs generieren

  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: Schema und Abfrage für die Produktion bereitstellen

Sie haben eine Entwicklungsiteration durchlaufen. Jetzt können Sie Ihr Schema und Ihre Abfragen mit der Benutzeroberfläche der Firebase-Erweiterung oder der Firebase-Befehlszeile auf dem Server bereitstellen, genau wie Sie es mit Ihrem Schema getan haben.

Klicken Sie im IDE-Fenster in der VS Code-Erweiterungs-Benutzeroberfläche auf die Schaltfläche In Produktion bereitstellen.

Rufen Sie nach der Bereitstellung die Firebase-Konsole auf, um zu prüfen, ob die Schemaupdates (falls zutreffend) und die Vorgänge in die Cloud hochgeladen wurden. Sie sollten das Schema sehen und Ihre Vorgänge auch in der Konsole ausführen können. Die Cloud SQL for PostgreSQL-Instanz wird mit dem endgültig bereitgestellten generierten Schema und den Daten aktualisiert.

Weitere Informationen zur Verwendung des Data Connect-Emulators finden Sie in der Dokumentation.

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

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

  2. In der Hauptdatei Ihrer React-App:

    • Ihr 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 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:

    • Ihr 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 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:

    • Ihr 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 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:
    • Ihr 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 Ihrer Datenbank Daten hinzufügen, Ihre Schemas prüfen und ändern sowie Ihren Data Connect-Dienst in der Firebase-Konsole überwachen.

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