Erste Schritte mit Firebase Data Connect lokal

In dieser Kurzanleitung erfahren Sie, wie Sie Firebase Data Connect verwenden, um Ihre Web- und Mobilanwendungen mit einer PostgreSQL-Datenbank zu verbinden. Sie werden Folgendes tun:

  • Richten Sie Ihr lokales Firebase Data Connect-Projektverzeichnis mit VS Code und der Firebase CLI ein.
  • Data Connect-Schemas, ‑Abfragen und ‑Mutationen basierend auf Ihren App-Ideen in natürlicher Sprache generieren.
  • Verwenden Sie die stark typisierten SDKs in Ihren Apps, um Data Connect-Abfragen und ‑Mutationen auszuführen.
  • Stellen Sie eine Cloud SQL for PostgreSQL-Instanz, ein Data Connect-Schema, Abfragen und Mutationen bereit (erfordert ein Blaze-Abo).

Lokales Projektverzeichnis einrichten

Sie haben zwei Möglichkeiten, lokale Entwicklungstools für Data Connect zu installieren.

  1. Führen Sie in einem Projektverzeichnis den folgenden Befehl aus.

    Das Script installiert die Firebase CLI und die VS Code-Erweiterung „Data Connect“ und führt Sie durch firebase init dataconnect, um Ihr Projekt einzurichten. Wenn Sie VS Code Desktop nicht installiert haben, wird das Skript in einem Browser geöffnet.

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

  2. Öffnen Sie den Bildschirm der Data Connect VS Code-Erweiterung, indem Sie in der linken Seitenleiste von Visual Studio Code auf das Firebase-Symbol klicken.

  3. Klicken Sie auf Emulatoren starten, um den Emulator mit einer lokalen PGlite-Datenbank auszuführen.

Schema für Rezensionen

Firebase Data Connect verwendet GraphQL, um Ihr Datenmodell zu definieren. Mit der Direktive @table wird ein GraphQL-Typ einer PostgreSQL-Tabelle zugeordnet. Felder in der Typzuordnung werden PostgreSQL-Spalten zugeordnet. Sie können Beziehungen zwischen Tabellen mithilfe von Feldern definieren, die auf andere @table-Typen verweisen. Dazu gehören auch m:n-Beziehungen mit Join-Tabellen mit zusammengesetzten Primärschlüsseln.

In der Standardkonfiguration finden Sie die Data Connect-Schemadateien im Verzeichnis dataconnect/schema/. Hier sind zwei Beispieltabellen aus dem Schemas für Filmvorlagen. Ihr Schema kann abweichen, wenn Sie es mit Gemini generiert haben.

type Movie @table {
  # Every table has an implicit primary key field that looks something like:
  #  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

type Review @table(key: ["movie", "user"]) {
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Weitere Informationen zu Data Connect-Schemas

Abfragen und Mutationen entwickeln

Firebase Data Connect verwendet GraphQL für Abfragen und Mutationen. Sie definieren diese in .gql-Dateien und rufen sie über den Namen in Ihrer App auf. Die GraphQL-Syntax bietet stark typisierte SDKs und eine flexible API, um genau die Daten abzurufen, die Ihre App benötigt.

Daten in Ihre Datenbank einlesen

Wenn der Emulator ausgeführt wird, können Sie ihn mit Startdaten füllen. Sie können die bereitgestellte dataconnect/seed_data.gql-Datei verwenden oder eigene Mutationen schreiben.

Verwenden Sie in VS Code die Schaltfläche Run (local) (Lokal ausführen) in Code Lens, um die Mutationen auszuführen und Ihre lokale PGlite-Datenbank zu füllen.

CodeLens-Schaltfläche „Ausführen“ für Firebase Data Connect

Abfragen und Mutationen überprüfen

In der Standardkonfiguration finden Sie die Data Connect-Abfragen und ‑Mutationen im Verzeichnis dataconnect/example/.

Mit verschachtelten Abfragen können Sie relationale Daten präzise abfragen.

query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
  movies {
    title imageUrl genre
    reviews_on_movie {
      rating reviewDate
      user { username }
    }
  }
}

Data Connect hilft Ihnen, sichere Abfragen und Mutationen mit Firebase Auth zu erstellen.

Zum Schutz Ihrer App können Web- und mobile Apps nur auf Data Connect-Abfragen und ‑Mutationen mit @auth-Direktiven zugreifen. Über einen Ausdruck wie {field}_expr: "auth.uid" kann sicher auf die Firebase Auth-UID zugegriffen werden.

mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
  review_upsert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
    }
  )
}

Weitere Informationen zu Data Connect-Abfragen Weitere Informationen zu Data Connect-Mutationen Weitere Informationen zur Data Connect-Authentifizierung

Abfragen und Mutationen generieren

Sie müssen kein GraphQL-Experte sein, um Data Connect effektiv zu nutzen. Sie können Data Connect-Abfragen und ‑Mutationen aus Beschreibungen in natürlicher Sprache generieren.

Geben Sie in einer beliebigen .gql-Datei # ein, um einen Kommentar zu beginnen und eine Abfrage oder Mutation zu beschreiben. Klicken Sie dann auf die Code Lens-Schaltfläche Generate/Refine Operation (Vorgang generieren/optimieren), um den GraphQL-Vorgang zu generieren.

CodeLens-Schaltfläche „Generieren“ für Firebase Data Connect

Generiertes SDK in Ihrer App verwenden

Mit firebase init dataconnect werden automatisch typsichere SDKs für Apps in Ihrem Projekt eingerichtet. Bei Bedarf können Sie das SDK manuell mit der Schaltfläche SDK zur App hinzufügen in der VS Code-Erweiterung oder durch Ausführen von firebase init dataconnect:sdk hinzufügen.

Web

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

  2. In der Hauptdatei Ihrer React-App:

    • Importieren Sie das generierte SDK:
    // Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@dataconnect/generated';
    • Instrumentieren Sie Ihre App, um eine Verbindung zum Data Connect-Emulator herzustellen:
    import { connectDataConnectEmulator } from 'firebase/data-connect';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    • Data Connect-Methoden aufrufen
    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:

    • Importieren Sie das Data Connect SDK und das generierte SDK:

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

let connector = DataConnect.moviesConnector

    • Instrumentieren Sie Ihre App, um eine Verbindung zum Data Connect-Emulator herzustellen:

      // Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

    • Data Connect-Methoden aufrufen:

      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:

    • Rufen Sie eine Connector-Instanz aus dem generierten SDK ab:
    private val connector = com.myapplication.MoviesConnector.instance
    • Instrumentieren Sie Ihre App, um eine Verbindung zum Data Connect-Emulator herzustellen:
    private val connector = com.myapplication.MoviesConnector.instance
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }
    • Data Connect-Methoden aufrufen
    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:

    • Importieren Sie das generierte SDK:
    // Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';
    • Instrumentieren Sie Ihre App, um eine Verbindung zum Data Connect-Emulator herzustellen:
    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  runApp(const MyApp());
}
    • Data Connect-Methoden aufrufen
    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();
            }),
      )
    ])));
  }
}

Für die Produktion bereitstellen

So stellen Sie Ihr Schema, Ihre Abfragen und Mutationen in der Produktion bereit:

  1. Führen Sie ein Upgrade des Firebase-Projekts auf den Blaze-Tarif durch.

  2. Klicken Sie in der Data Connect VS Code-Erweiterung auf die Schaltfläche In der Produktion bereitstellen oder führen Sie im Terminal folgenden Befehl aus:

    firebase deploy --only dataconnect

    Rufen Sie nach der Bereitstellung die Firebase-Konsole auf, um Ihr Schema anzusehen und Abfragen und Mutationen auszuführen.

Weitere Informationen zu dataconnect.yaml Weitere Informationen zur Verwendung von Data Connect mit Cloud SQL

Nächste Schritte

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