Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit Firebase Data Connect lokal

In dieser Kurzanleitung erfahren Sie, wie Sie Firebase Data Connect lokal in Ihre Anwendung einbinden, ohne eine SQL-Produktionsinstanz einzurichten. Sie werden Folgendes tun:

Fügen Sie Ihrem Firebase-Projekt Firebase Data Connect hinzu.
Richten Sie eine Entwicklungsumgebung ein, die Visual Studio Code-Erweiterungen für die Arbeit mit einer lokalen Instanz enthält.
Anschließend zeigen wir Ihnen, wie Sie Folgendes tun können:
- Mit den VS Code-Erweiterungstools und Gemini Code Assist haben Sie folgende Möglichkeiten:
  - Schema für eine App erstellen
  - Administrative Abfragen und Mutationen erstellen, um Ihre lokale Datenbank zu füllen
  - Unterstützung bei der Implementierung von Abfragen und Mutationen für Ihre App in einem bereitstellbaren Connector
- Abfragen und Mutationen mit Beispieldaten in einem lokalen Emulator testen
- Stark typisierte SDKs generieren und in Ihrer App verwenden
- Stellen Sie Ihr endgültiges Schema und Ihren Connector in der Cloud bereit (optional, mit einem Blaze-Tarif-Upgrade).

Lokalen Entwicklungsablauf auswählen

Data Connect bietet Ihnen 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 keinen erstellt haben, tun Sie dies in der Firebase-Konsole.

Entwicklungsumgebung einrichten

Erstellen Sie ein neues Verzeichnis für Ihr lokales Projekt.
Führen Sie den folgenden Befehl im neu erstellten Verzeichnis aus, um eine Data Connect-Entwicklungsumgebung und eine browserbasierte IDE einzurichten.
```
curl -sL https://firebase.tools/dataconnect | 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.

Projektverzeichnis 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:

Klicken Sie auf die Schaltfläche Über Google anmelden.
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.
Klicken Sie auf die Schaltfläche Run firebase init (firebase init ausführen).
Klicken Sie auf die Schaltfläche Emulatoren starten.

Hinweis :Prüfen Sie im integrierten Terminal, ob die konfigurierten Emulatoren gestartet werden. Sobald sie ausgeführt werden, sollte die Benutzeroberfläche der Erweiterung mit den Emulatordetails aktualisiert werden.

Schema erstellen

Beginnen Sie in Ihrem Firebase-Projektverzeichnis in der Datei /dataconnect/schema/schema.gql mit der Definition eines GraphQL-Schemas, z. B. für Filmbesprechungen.

Schema mit Gemini Code Assist erstellen

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

Klicken Sie auf das Symbol der VS Code-Erweiterung „Data Connect“, um die zugehörige Seitenleiste zu öffnen.
Klicken Sie auf Gemini mit @FirebaseDataConnect ausprobieren. Das Chatfenster Gemini Code Assist wird geöffnet.
Klicken Sie auf die Chatoberfläche und geben Sie @FirebaseDataConnect ein, um relevante Befehle zu filtern.
Wählen Sie den Befehl /generate_schema aus und geben Sie an der Eingabeaufforderung den Befehl ein, mit dem Sie Gemini bitten, ein Schema für die App zu erstellen, die Sie entwickeln.

Beispiel:
```
@FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
```
Nach einigen Augenblicken wird ein empfohlenes Schema angezeigt. Überprüfen Sie das Schema.

Hinweis :Wenn Sie das ursprüngliche Schema ändern möchten, können Sie einen neuen @FirebaseDataConnect /generate_schema-Befehl ausführen und Gemini beispielsweise bitten, einen Typ aus Ihrem Schema zu entfernen oder einem Typ bestimmte Felder hinzuzufügen.
So fügen Sie den Code zu schema.gql hinzu:
1. Klicken Sie auf die Schaltfläche Insert to bottom of file (Am Ende der Datei 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 die primitiven 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 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

Daten zu Tabellen hinzufügen

Im IDE-Editorbereich werden CodeLens-Schaltflächen über den GraphQL-Typen in /dataconnect/schema/schema.gql angezeigt. Mit den Schaltflächen Daten hinzufügen und Ausführen (lokal) können Sie Daten in Ihre lokale Datenbank einfügen.

So fügen Sie den Tabellen Movie und MovieMetadata Datensätze hinzu:

Klicken Sie in schema.gql über der Typdeklaration Movie auf die Schaltfläche Daten hinzufügen.
Codieren Sie in der generierten Datei Movie_insert.gql Daten für die drei Felder fest.
Klicken Sie auf die Schaltfläche Run (Local) (Lokal ausführen).
Wiederholen Sie die vorherigen Schritte, um der Tabelle MovieMetadata einen Eintrag hinzuzufügen. Geben Sie dabei die id Ihres Films in das Feld movieId ein, wie in der generierten MovieMetadata_insert-Mutation aufgefordert.

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

Klicken Sie in schema.gql über der Typdeklaration Movie auf die Schaltfläche Daten lesen.
Klicken Sie in der resultierenden Movie_read.gql-Datei auf die Schaltfläche Lokal ausführen, um die Abfrage auszuführen.

Weitere Informationen zu Data Connect-Mutationen in der Dokumentation

Abfrage definieren

Nun können Sie die Abfragen definieren, die Sie in Ihrer Anwendung benötigen. Als Entwickler sind Sie es gewohnt, SQL-Abfragen anstelle von GraphQL-Abfragen zu schreiben. Das kann sich anfangs etwas anders anfühlen.

GraphQL ist jedoch viel prägnanter und typsicherer als reines SQL. Unsere VS Code-Erweiterung erleichtert die Entwicklung sowohl für Abfragen als auch für Mutationen.

So erstellen Sie eine Abfrage mit Gemini Code Assist:

Klicken Sie auf das Symbol der VS Code-Erweiterung „Data Connect“, um die zugehörige Seitenleiste zu öffnen.
Klicken Sie auf Gemini mit @FirebaseDataConnect ausprobieren. Das Chatfenster Gemini Code Assist wird geöffnet.
Klicken Sie auf die Chatoberfläche und geben Sie @FirebaseDataConnect ein, um relevante Befehle zu filtern.
Wählen Sie den Befehl /generate_operation aus und vervollständigen Sie ihn, indem Sie Gemini auffordern, eine Abfrage zu erstellen.

Beispiel:
```
@FirebaseDataConnect /generate_operation List all movies with titles start with "A".
```
Nach einigen Augenblicken wird eine empfohlene Anfrage angezeigt. Überprüfen Sie die Abfrage.

Hinweis :Wenn Sie die ursprüngliche Anfrage ändern möchten, können Sie einen neuen @FirebaseDataConnect /generate_operation-Befehl ausführen und Gemini beispielsweise bitten, Titel zu filtern, die mit Ziffern beginnen. Oder Sie bitten die KI, mehrere Mutationen zu erstellen, z. B. mit der Anweisung „Generiere eine Mutation für alle meine Schematypen“.
So fügen Sie den Code zu queries.gql hinzu:
1. Klicken Sie auf die Schaltfläche Insert to bottom of file (Am Ende der Datei 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 in der Nähe aus.

Weitere Informationen zu Data Connect-Abfragen in der Dokumentation

SDKs generieren und in Ihrer App verwenden

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

Klicken Sie auf die Schaltfläche SDK zur App hinzufügen.
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.

Hinweis :Wenn Sie noch kein App-Verzeichnis haben, können Sie jetzt ein neues Verzeichnis für den SDK-Code erstellen und auswählen und es später mit Ihrer App verknüpfen.
Wählen Sie Ihre App-Plattform aus. Der SDK-Code wird dann sofort in Ihrem ausgewählten Verzeichnis generiert.

SDKs verwenden, um Ihre Abfrage aus einer App aufzurufen

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

Web

Fügen Sie Ihrer Web-App Firebase hinzu.

In der Hauptdatei Ihrer React-App:

Generiertes SDK importieren
App für die Verbindung zum 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

Fügen Sie Ihrer iOS-App Firebase hinzu.
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.

Im Haupt-Delegate Ihrer App:

Generiertes SDK importieren
App für die Verbindung zum 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

Fügen Sie Ihrer Android-App Firebase hinzu.

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")
}

In der Hauptaktivität Ihrer App:

Generiertes SDK importieren
App für die Verbindung zum 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

Fügen Sie Ihrer Flutter-App Firebase hinzu.
Installieren Sie die FlutterFire-Befehlszeile dart pub global activate flutterfire_cli.
Führen Sie flutterfire configure aus.
In der Hauptfunktion Ihrer App:
- Generiertes SDK importieren
- App für die Verbindung zum 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 Ihrer App abgeschlossen haben, können Sie Ihr Schema und Ihren Connector in der Cloud bereitstellen. Sie benötigen ein Projekt mit Blaze-Tarif, um eine Cloud SQL-Instanz einzurichten.

Rufen Sie in der Firebase-Konsole den Bereich „Data Connect“ auf und erstellen Sie eine Cloud SQL-Instanz für den kostenlosen Testzeitraum.

Hinweis :Die Bereitstellung Ihrer Cloud SQL for PostgreSQL-Instanz kann bis zu 15 Minuten dauern. Sie können die Bereitstellung erst starten, wenn die Instanz bereit ist.
Hinweis :Wenn Sie vom Kunden verwaltete Verschlüsselungsschlüssel (Customer-Managed Encryption Keys, CMEKs) verwenden möchten, wählen Sie Vorhandene Cloud SQL-Instanz verwenden aus und wählen Sie eine vorhandene Cloud SQL-Datenbank mit CMEK aus.
Führen Sie im in die IDE integrierten Terminal den Befehl firebase init dataconnect aus und wählen Sie die Region/Service-ID aus, die Sie gerade in der Konsole erstellt haben.
Wählen Sie Y aus, wenn Sie aufgefordert werden, die Datei dataconnect/dataconnect.yaml zu überschreiben.
Klicken Sie im IDE-Fenster in der VS Code-Erweiterung auf die Schaltfläche In Produktion bereitstellen.
Rufen Sie nach der Bereitstellung die Firebase-Konsole 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ültigen bereitgestellten generierten Schema und den Daten aktualisiert.

Nächste Schritte

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

Sie können Ihrer Datenbank Daten hinzufü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:

Hier finden Sie weitere KI-Tools und Anleitungen, die Ihnen beim Generieren von Schemas, Abfragen und Mutationen helfen. Im Leitfaden zur KI-Unterstützung erfahren Sie, wie Sie unseren MCP-Server mit Ihren IDEs einrichten und verwenden und Best Practices zum Schreiben von Prompts.
Weitere Informationen zur Entwicklung von Schemas, Abfragen und Mutationen
Hier erfahren Sie, wie Sie Client-SDKs generieren und Abfragen und Mutationen aus Clientcode für Webanwendungen, Android, iOS und Flutter aufrufen.