Erste Schritte mit Firebase Data Connect lokal

In dieser Kurzanleitung erfahren Sie, wie Sie Firebase Data Connect lokal in Ihrer Anwendung erstellen, ohne eine Produktions-SQL-Instanz einzurichten. Sie werden Folgendes tun:

  • Fügen Sie Firebase Data Connect Ihrem Firebase-Projekt hinzu.
  • Richten Sie eine Entwicklungsumgebung mit Visual Studio Code-Erweiterungen ein, um mit einer lokalen Instanz zu arbeiten.
  • Anschließend zeigen wir Ihnen, wie Sie:
    • Mit den VS Code-Erweiterungstools und Gemini Code Assist können Sie Folgendes tun:
      • Schema für eine App erstellen
      • Erstellen Sie administrative Abfragen und Mutationen, um Ihre lokale Datenbank zu füllen.
      • Sie können Abfragen und Mutationen für Ihre App in einem implementierbaren Connector implementieren.
    • Abfragen und Mutationen mit Beispieldaten in einem lokalen Emulator testen
    • Stark typisierte SDKs generieren und in Ihrer App verwenden
    • Bereitstellen Sie das endgültige Schema und den Connector in der Cloud (optional, mit einem Blaze-Tarif-Upgrade).

Lokalen Entwicklungsablauf auswählen

Data Connect bietet zwei Möglichkeiten, Entwicklungstools zu installieren und lokal zu arbeiten.

Vorbereitung

Für diesen Schnellstart benötigen Sie Folgendes:

  • Ein Firebase-Projekt Falls Sie noch keine haben, erstellen Sie eine in der Firebase-Konsole.

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'

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.

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

Schema erstellen

Definieren Sie im Verzeichnis Ihres Firebase-Projekts in der Datei /dataconnect/schema/schema.gql ein GraphQL-Schema für beispielsweise Filmrezensionen.

Schema mit Gemini Code Assist erstellen

So erstellen Sie mit Gemini Code Assist ein Schema für eine Filmbewertungs-App:

  1. Klicken Sie auf das Symbol der VS Code-Erweiterung „Data Connect“, um die Seitenleiste zu öffnen.
  2. Klicken Sie auf Gemini mit @data-connect ausprobieren. Das Chatfenster Gemini Code Assist wird geöffnet.
  3. Klicke auf die Chatoberfläche und gib @data-connect ein, um relevante Befehle zu filtern.

  4. Wählen Sie den Befehl /generate_schema aus und geben Sie den Befehl ein, um Gemini zu bitten, ein Schema für die von Ihnen entwickelte App zu erstellen.

    Beispiel:

    @data-connect /generate_schema I want to build an app to track movie reviews from multiple users

  5. Nach einigen Augenblicken wird ein empfohlenes Schema angezeigt. Sehen Sie sich das Schema an.

  6. So fügen Sie den Code zu schema.gql hinzu:

    1. Klicken Sie auf die Schaltfläche Unter Text einfügen.
    2. Wenn Sie den Code an der Cursorposition einfügen möchten, klicken Sie oben in der Chatantwort auf die Schaltfläche +.

Film

In Data Connect werden GraphQL-Felder Spalten zugeordnet. Der Film hat id, title, imageUrl und genre. Data Connect erkennt primitive Datentypen: String und UUID.

Kopieren Sie das folgende Snippet oder entfernen Sie die Kommentarzeichen für die entsprechenden Zeilen in der Datei.

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

Kopieren Sie das folgende Snippet oder entfernen Sie die Kommentarzeichen für die entsprechenden Zeilen in der Datei.

# 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 hierbei um eine Beziehung zwischen Movie und MovieMetadata handelt, und verwaltet diese Beziehung für Sie.

Weitere Informationen zu Data Connect-Schemas in der Dokumentation

Tabellen Daten hinzufügen

Im Bereich „IDE-Editor“ werden im Editor von /dataconnect/schema/schema.gql CodeLens-Schaltflächen über den GraphQL-Typen angezeigt. Mit den Schaltflächen Daten hinzufügen und Ausführen (lokal) können Sie Ihrer lokalen Datenbank Daten hinzufügen.

So fügen Sie den Tabellen Movie und MovieMetadata Einträge hinzu:

  1. Klicken Sie in schema.gql über der Typdeklaration für Movie auf die Schaltfläche Daten hinzufügen.
    CodeLens-Schaltfläche „Daten hinzufügen“ für Firebase Data Connect
  2. Codieren Sie in der generierten Movie_insert.gql-Datei Daten für die drei Felder.
  3. Klicken Sie auf die Schaltfläche Ausführen (lokal).
    CodeLens-Schaltfläche „Ausführen“ für Firebase Data Connect
  4. Wiederhole die vorherigen Schritte, um der Tabelle MovieMetadata einen Datensatz hinzuzufügen. Gib dazu die id deines Films in das Feld movieId ein, wie in der generierten MovieMetadata_insert-Mutation angegeben.

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

  1. Klicken Sie in schema.gql über der Typdeklaration für Movie auf die Schaltfläche Daten lesen.
  2. Klicken Sie in der resultierenden Movie_read.gql-Datei auf die Schaltfläche Ausführen (lokal), um die Abfrage auszuführen.

Weitere Informationen zu Data Connect-Mutationen in der Dokumentation

Abfrage definieren

Jetzt wird es noch interessanter: Definieren Sie die Abfragen, die Sie in Ihrer Anwendung benötigen. 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. Außerdem erleichtert unsere VS Code-Erweiterung die Entwicklung, sowohl für Abfragen als auch für Mutationen.

So erstellen Sie eine Abfrage mit Gemini Code Assist:

  1. Klicken Sie auf das Symbol der VS Code-Erweiterung „Data Connect“, um die Seitenleiste zu öffnen.
  2. Klicken Sie auf Gemini mit @data-connect ausprobieren. Das Chatfenster Gemini Code Assist wird geöffnet.
  3. Klicke auf die Chatoberfläche und gib @data-connect ein, um relevante Befehle zu filtern.

  4. Wählen Sie den Befehl /generate_operation aus und schließen Sie den Befehl am Prompt ab, indem Sie Gemini bitten, eine Abfrage zu erstellen.

    Beispiel:

    @data-connect /generate_operation List all movies with titles start with "A".

  5. Nach einigen Augenblicken wird eine empfohlene Suchanfrage angezeigt. Überprüfen Sie die Abfrage.

  6. So fügen Sie den Code zu queries.gql hinzu:

    1. Klicken Sie auf die Schaltfläche Unter Text einfügen.
    2. Wenn Sie den Code an der Cursorposition einfügen möchten, klicken Sie oben in der Chatantwort auf die Schaltfläche +.

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

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

SDKs generieren und in Ihrer App verwenden

Klicken Sie im linken Bereich der IDE auf das Firebase-Symbol, um die Benutzeroberfläche der Data Connect-VS Code-Erweiterung zu öffnen:

  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.

Abfrage über SDKs aus einer App aufrufen

Sie können das von Data Connect generierte SDK verwenden, um einen Aufruf an Ihre ListMovies-Abfrage zu implementieren. Sie können diese Abfrage dann lokal mit dem Data Connect-Emulator ausführen.

Web

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

  2. In der Hauptdatei Ihrer React-App:

    • Ihr generiertes SDK importieren
    • Ihre App für die Verbindung mit dem Data Connect-Emulator instrumentieren
    • Data Connect-Methoden aufrufen.
    import React from 'react';
import ReactDOM from 'react-dom/client';

import { connectDataConnectEmulator } from 'firebase/data-connect';

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

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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
    • Ihre App für die Verbindung mit dem Data Connect-Emulator instrumentieren
    • 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

// 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)

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
    • Ihre App für die Verbindung mit dem Data Connect-Emulator instrumentieren
    • 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
  .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)
  }


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
    • Ihre App für die Verbindung mit dem Data Connect-Emulator instrumentieren
    • 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

Schema und Abfrage in der Produktion bereitstellen

Nachdem Sie die lokale Einrichtung in Ihrer App vorgenommen haben, können Sie Ihr Schema und Ihren Connector in der Cloud bereitstellen. Sie benötigen ein Blaze Plan-Projekt, um eine Cloud SQL-Instanz einzurichten.

  1. Rufen Sie in der Firebase-Konsole den Bereich „Data Connect“ auf und erstellen Sie eine kostenlose Testversion einer Cloud SQL-Instanz.

  2. Führen Sie im integrierten Terminal der IDE firebase init dataconnect aus und wählen Sie die Region/Dienst-ID aus, die Sie gerade in der Console erstellt haben.

  3. Wählen Sie „Ja“ aus, wenn Sie gefragt werden: „Datei dataconnect/dataconnect.yaml existiert bereits, überschreiben?“

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

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

Nächste Schritte

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

  • In der Firebase Console 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: