Mit Firebase Data Connect entwickeln (Android)

1. Übersicht

In diesem Codelab binden Sie Firebase Data Connect in eine Cloud SQL-Datenbank ein, um eine Android-App für Filmrezensionen zu erstellen. Sie lernen Folgendes:

• GraphQL-Schema für Firebase Data Connect schreiben
• Abfragen und Mutationen schreiben
• Nutzerauthentifizierung implementieren, um Daten zu schützen

Vorbereitung

• Die aktuelle Version von Android Studio
• Android-Emulator mit API‑Level 23 oder höher

Lerninhalte

• Firebase Data Connect mit lokalen Emulatoren einrichten
• So entwerfen Sie ein Datenschema mit Data Connect und GraphQL.
• So schreiben Sie Abfragen und Mutationen für eine App für Filmrezensionen.
• So generieren Sie das Kotlin SDK und verwenden es in einer Android-App.
• (Optional) So stellen Sie einen Data Connect-Dienst in der Produktion bereit.

2. Beispielprojekt einrichten

Firebase-Projekt erstellen

1. Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. Movie Review).
   
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Code herunterladen

Führen Sie den folgenden Befehl aus, um den Beispielcode für dieses Codelab zu klonen. Dadurch wird auf Ihrem Computer ein Verzeichnis mit dem Namen codelab-dataconnect-android erstellt:

git clone https://github.com/firebaseextended/codelab-dataconnect-android.git

Wenn Sie Git nicht auf Ihrem Computer installiert haben, können Sie den Code auch direkt von GitHub herunterladen.

Firebase-Konfiguration hinzufügen

1. Wählen Sie in der Firebase Console im linken Navigationsbereich „Projektübersicht“ aus. Klicken Sie auf die Android-Schaltfläche, um die Plattform auszuwählen. Wenn Sie nach einem Paketnamen gefragt werden, verwenden Sie com.google.firebase.example.dataconnect.
2. Klicken Sie auf „App registrieren“ und folgen Sie der Anleitung, um die Datei google-services.json herunterzuladen und in das Verzeichnis app/ des gerade heruntergeladenen Codes zu verschieben. Klicken Sie auf „Weiter“.

3. Data Connect einrichten

Installation

Automatische Installation

Führen Sie den folgenden Befehl im Verzeichnis codelab-dataconnect-android aus:

curl -sL https://firebase.tools/dataconnect | bash

Dieses Skript versucht, die Entwicklungsumgebung für Sie einzurichten und eine browserbasierte IDE zu starten. Diese IDE bietet Tools, einschließlich einer vorab gebündelten VS Code-Erweiterung, mit denen Sie Ihr Schema verwalten, Abfragen und Mutationen für Ihre Anwendung definieren und stark typisierte SDKs generieren können.

Nachdem Sie das Skript ausgeführt haben, sollte VS Code automatisch geöffnet werden.

Hinweis: Wenn Sie die Desktopversion von VS Code bereits installiert haben, sollte sie durch das Skript automatisch geöffnet werden. Wenn das Skript fehlschlägt, führen Sie die manuellen Installationsschritte unten aus.

Manuelle Installation

1. Visual Studio Code installieren
2. Installieren Sie Node.js.
3. Öffnen Sie in VS Code das Verzeichnis codelab-dataconnect-android.
4. Installieren Sie die Firebase Data Connect-Erweiterung über den Visual Studio Code Marketplace.

Data Connect im Projekt initialisieren

Klicken Sie 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. Ein Browserfenster wird geöffnet. Folgen Sie der Anleitung, um sich mit Ihrem Google-Konto in der Erweiterung anzumelden. 
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.

Klicken Sie auf die Schaltfläche firebase init ausführen und folgen Sie der Anleitung im integrierten Terminal.

SDK-Generierung konfigurieren

Wenn Sie auf die Schaltfläche „firebase init“ klicken, sollte die Firebase Data Connect-Erweiterung ein dataconnect/-Verzeichnis für Sie initialisieren.

Öffnen Sie in VS Code die Datei dataconnect/connector/connector.yaml. Dort finden Sie die Standardkonfiguration. Damit die Codeerstellung in diesem Codelab leichter nachzuvollziehen ist, ändern Sie die connectorId in movies und das Paket in com.google.firebase.example.dataconnect.generated:

connectorId: movies
generate:
  kotlinSdk:
    outputDir: ../../app/src/main/java
    package: com.google.firebase.example.dataconnect.generated

Das bedeuten die einzelnen Begriffe:

• connectorId: Ein eindeutiger Name für diesen Connector.
• outputDir: Pfad, in dem das generierte Data Connect SDK gespeichert wird. Dieser Pfad ist relativ zum Verzeichnis, das die Datei „connector.yaml“ enthält.
• package: Der Paketname, der im generierten SDK verwendet werden soll.

Firebase-Emulatoren starten

Klicken Sie in VS Code auf die Schaltfläche Emulatoren starten.

Der Emulator sollte im integrierten Terminal gestartet werden. Wenn der Dienst korrekt gestartet wird, sollte die Ausgabe so aussehen:

Android-App für die Verwendung des lokalen Emulators konfigurieren

1. Öffnen Sie Android Studio.
2. Klicken Sie auf dem Startbildschirm von Android Studio auf die Schaltfläche „Open“ (Öffnen) und wählen Sie das Verzeichnis codelab-dataconnect-android aus. Warten Sie, bis Gradle synchronisiert wurde.
3. Wenn die Gradle-Synchronisierung abgeschlossen ist, öffnen Sie die Datei app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt und rufen Sie useEmulator() auf:

import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.instance

class MainActivity : ComponentActivity() {
  ...

  // Initialize Firebase Data Connect
  MoviesConnector.instance.dataConnect.useEmulator("10.0.2.2", 9399)

  ...
}

4. Schema definieren und Datenbank vorab mit Daten füllen

In diesem Abschnitt definieren Sie die Struktur und die Beziehungen zwischen den wichtigsten Einheiten in der Filmanwendung in einem Schema. Entitäten wie Movie, User und Review werden Datenbanktabellen zugeordnet. Beziehungen werden mit Firebase Data Connect und GraphQL-Schemaanweisungen hergestellt.

Wichtige Entitäten und Beziehungen

Der Typ Movie enthält wichtige Details wie Titel, Genre und Tags, die von der App für Suchanfragen und Filmprofile verwendet werden. Mit dem Typ User werden Nutzerinteraktionen wie Rezensionen und Favoriten erfasst. Review verbindet Nutzer mit Filmen und ermöglicht es der App, von Nutzern erstellte Bewertungen und Feedback anzuzeigen.

Tabelle „Nutzer“

Der Nutzertyp definiert eine Nutzerentität, die mit Filmen interagiert, indem sie Rezensionen schreibt oder Filme als Favoriten markiert.

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und heben Sie die Auskommentierung der Tabellendefinition User auf (oder fügen Sie sie hinzu):

# Users
# Suppose a user can leave reviews for movies
# user  -> reviews is a one to many relationship,
# movie -> reviews is a one to many relationship
# movie <-> user is a many to many relationship
type User @table {
  id: String! @col(name: "user_auth")
  username: String! @col(name: "username", dataType: "varchar(50)")
  # The following are generated by the user: User! field in the Review table
  # reviews_on_user 
  # movies_via_Review
}

Filmtabelle

Der Typ „Movie“ definiert die Hauptstruktur für eine Filmentität, einschließlich Feldern wie „title“, „genre“, „releaseYear“ und „rating“.

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und heben Sie die Auskommentierung der Tabellendefinition Movie auf (oder fügen Sie sie hinzu):

# Movies
type Movie @table {
  # The below parameter values are generated by default with @table, and can be edited manually.
  # implies directive `@col(name: "movie_id")`, generating a column name
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

Tabelle „MovieMetadata“

Der Typ „MovieMetadata“ hat eine 1:1-Beziehung zum Typ „Movie“. Sie enthält zusätzliche Daten wie den Regisseur des Films.

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und heben Sie die Auskommentierung der Tabellendefinition MovieMetadata auf (oder fügen Sie sie hinzu):

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # @unique indicates a 1-1 relationship
  movie: Movie! @unique 
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

Tabelle mit Rezensionen

Der Rezensionstyp stellt die Rezensionseinheit dar und verknüpft die Typen „User“ und „Movie“ in einer n:n-Beziehung (ein Nutzer kann viele Rezensionen hinterlassen und jeder Film kann viele Rezensionen haben).

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und heben Sie die Auskommentierung der Tabellendefinition Review auf (oder fügen Sie sie hinzu):

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

Automatisch generierte Felder und Standardwerte

Im Schema werden Ausdrücke wie @default(expr: "uuidV4()") verwendet, um automatisch eindeutige IDs und Zeitstempel zu generieren. Das Feld „id“ in den Typen „Movie“ und „Review“ wird beispielsweise automatisch mit einer UUID gefüllt, wenn ein neuer Datensatz erstellt wird.

Scheindaten einfügen

Nachdem Sie das Schema definiert haben, können Sie die Datenbank jetzt mit Scheindaten für Tests vorab befüllen.

1. Öffnen Sie in VS Code dataconnect/moviedata_insert.gql. Prüfen Sie, ob die Emulatoren in der Firebase Data Connect-Erweiterung ausgeführt werden.
2. Oben in der Datei sollte die Schaltfläche „Lokal ausführen“ angezeigt werden. Klicken Sie darauf, um die Testfilmdaten in Ihre Datenbank einzufügen.

3. Prüfen Sie im Terminal für die Data Connect-Ausführung, ob die Daten erfolgreich hinzugefügt wurden.

Nachdem Sie die Daten eingerichtet haben, fahren Sie mit dem nächsten Schritt fort, um zu erfahren, wie Sie Abfragen in Data Connect erstellen.

5. Abfrage zum Auflisten von Filmen erstellen

Erstellen Sie zuerst eine Abfrage, um Filme aufzulisten. Für jeden Film werden die ID, der Titel, die Bild-URL und das Genre abgerufen.

Abfrage definieren

Öffnen Sie in VS Code die Datei dataconnect/connector/queries.gql und entfernen Sie die Kommentarzeichen für die ListMovies-Abfrage (oder fügen Sie sie hinzu):

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Wenn Sie die neue Abfrage testen möchten, klicken Sie auf die Schaltfläche „Lokal ausführen“, um die Abfrage für Ihre lokale Datenbank auszuführen. Die Liste der Filme aus der Datenbank sollte im Bereich „Ergebnis“ des Data Connect Execution-Terminals angezeigt werden.

Über die Android-App aufrufen

Nachdem Sie die Abfrage im Data Connect-Emulator getestet haben, können Sie sie der App hinzufügen.

Öffnen Sie in Android Studio die Datei app/src/main/java/com/google/firebase/example/dataconnect/MoviesScreen.kt und fügen Sie den folgenden Code hinzu, um die Liste der Filme in einem Rasterformat anzuzeigen:

import com.google.firebase.example.dataconnect.generated.ListMoviesQuery
import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.execute
import com.google.firebase.example.dataconnect.generated.instance

@Composable
fun MoviesScreen(
    onMovieClicked: (id: String) -> Unit
) {
    var movies by remember { mutableStateOf(emptyList<ListMoviesQuery.Data.MoviesItem>()) }
    LaunchedEffect(Unit) {
        // Queries need to be executed in a coroutine context
        try {
          movies = MoviesConnector.instance.listMovies.execute().data.movies
        } catch (e: Exception) {
          // Will be done at a later step
        }
    }
    LazyVerticalGrid(GridCells.Adaptive(150.dp)) {
        items(movies) { movie ->
            MovieCard(
                movieId = movie.id.toString(),
                movieTitle = movie.title,
                movieImageUrl = movie.imageUrl,
                movieGenre = movie.genre,
                onMovieClicked = {
                    onMovieClicked(movie.id.toString())
                }
            )
        }
    }
}

Anwendung ausführen

Klicken Sie in Android Studio auf die Schaltfläche „Run“ (Ausführen), um die App im Android-Emulator zu starten.

Nach dem Start der App sollte ein Bildschirm wie dieser angezeigt werden:

6. Abfrage für Filmdetails erstellen

Nachdem die App Filme auflisten kann, erstellen wir jetzt eine Abfrage, um die Details für jeden Film anzuzeigen.

Abfrage definieren

Öffnen Sie in VS Code die Datei dataconnect/connector/queries.gql und entfernen Sie die Kommentarzeichen für die GetMovieById-Abfrage (oder fügen Sie sie hinzu):

# Get movie by id
query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
  movie(id: $id) {
    id
    title
    imageUrl
    genre
    metadata: movieMetadata_on_movie {
      rating
      releaseYear
      description
    }
    reviews: reviews_on_movie {
      id
      reviewText
      reviewDate
      rating
      user {
        id
        username
      }
    }
  }
}

Über die Android-App aufrufen

Öffnen Sie in Android Studio die Datei app/src/main/java/com/google/firebase/example/dataconnect/MovieDetailScreen.kt und fügen Sie den folgenden Code ein:

importcom.google.firebase.example.dataconnect.generated.GetMovieByIdQuery
importcom.google.firebase.example.dataconnect.generated.MoviesConnector
importcom.google.firebase.example.dataconnect.generated.execute
importcom.google.firebase.example.dataconnect.generated.instance

@Composable
fun MovieDetailScreen(
    movieId: String
) {
    var movie by remember { mutableStateOf<GetMovieByIdQuery.Data.Movie?>(null) }
    LaunchedEffect(Unit) {
        movie = MoviesConnector.instance.getMovieById.execute(
            UUID.fromString(movieId)
        ).data.movie
    }
    if (movie == null) {
        LoadingScreen()
    } else {
        MovieDetails(
            movieTitle = movie!!.title,
            movieImageUrl = movie!!.imageUrl,
            movieGenre = movie!!.genre,
            movieRating = movie!!.metadata?.rating,
            movieReleaseYear = movie!!.metadata?.releaseYear,
            movieDescription = movie!!.metadata?.description,
        )
    }
}

Anwendung ausführen

Klicken Sie in Android Studio auf die Schaltfläche „Run“ (Ausführen), um die App im Android-Emulator zu starten.

7. Mutation zum Einfügen von Nutzern erstellen

Nachdem die App Daten anzeigen kann, ist es an der Zeit, neue Daten über die App hinzuzufügen. Um dies sicher zu tun, sollten Sie Firebase Authentication verwenden.

In diesem Codelab wird die anonyme Authentifizierung verwendet, um Nutzer anzumelden. Für eine sicherere App sollten Sie jedoch eine andere Authentifizierungsmethode wie die Authentifizierung mit E‑Mail-Adresse und Passwort oder einen föderierten Identitätsanbieter verwenden.

Mutation definieren

Öffnen Sie in VS Code die Datei dataconnect/connector/mutations.gql und entfernen Sie die Kommentarzeichen für die UpsertUser-Abfrage (oder fügen Sie sie hinzu):

# Upsert (update or insert) a user's username based on their auth.uid
mutation UpsertUser($username: String!) @auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
    }
  )
}

Über die Android-App aufrufen

Öffnen Sie in Android Studio die Datei app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt und rufen Sie die Mutation auf:

import com.google.firebase.example.dataconnect.generated.execute

LaunchedEffect(Unit) {
  // If there's no user signed in, sign in an anonymous user
  if (firebaseAuth.currentUser == null) {
    firebaseAuth.signInAnonymously().await()
    val newUsername = getRandomUsername()
    MoviesConnector.instance.upsertUser.execute(newUsername)
  }
}

Anwendung ausführen

Klicken Sie in Android Studio auf die Schaltfläche „Run“ (Ausführen), um die App im Android-Emulator zu starten.

8. Glückwunsch

Herzlichen Glückwunsch, Sie haben Firebase Data Connect erfolgreich zu einer Android-App hinzugefügt.

Sie kennen nun die wichtigsten Schritte, die zum Einrichten von Data Connect, zum Erstellen von Abfragen und Mutationen sowie zum Verarbeiten der Nutzerauthentifizierung erforderlich sind.

Weitere Informationen

• Weitere Informationen zu Preisen
• Weitere Informationen zum Sichern von Vorgängen
• Für die Produktion bereitstellen (nächster Abschnitt)
• Informationen zum Ausführen einer Vektorähnlichkeitssuche

Optional: In der Produktion bereitstellen

Bisher wurden in dieser App nur die Firebase-Emulatoren verwendet. Wenn Sie wissen möchten, wie Sie diese App in einem echten Firebase-Projekt bereitstellen, fahren Sie mit dem nächsten Schritt fort.

9. (Optional) Anwendung bereitstellen

Bisher war diese App vollständig lokal. Alle Daten sind in der Firebase Emulator Suite enthalten. In diesem Abschnitt erfahren Sie, wie Sie Ihr Firebase-Projekt so konfigurieren, dass diese App in der Produktion funktioniert.

Firebase Authentication aktivieren

Rufen Sie in der Firebase Console den Abschnitt „Authentifizierung“ auf und klicken Sie auf „Jetzt starten“. Rufen Sie den Tab „Anmeldemethode“ auf und wählen Sie die Option „Anonyme Anmeldung“ aus.

Aktivieren Sie die anonyme Anmeldung und klicken Sie auf „Speichern“.

Firebase Data Connect-Schema bereitstellen

Wichtig: Wenn Sie zum ersten Mal ein Schema in Ihrem Projekt bereitstellen, wird bei diesem Vorgang eine Cloud SQL for PostgreSQL-Instanz erstellt. Das kann etwa 15 Minuten dauern. Sie können die Funktion erst bereitstellen, wenn die Cloud SQL-Instanz bereit und in Firebase Data Connect eingebunden ist.

1. Klicken Sie in der Benutzeroberfläche der VS Code-Erweiterung „Firebase Data Connect“ auf Deploy to production (In Produktion bereitstellen).
2. Möglicherweise müssen Sie Schemaänderungen überprüfen und potenziell destruktive Änderungen genehmigen. Sie werden aufgefordert, Folgendes zu tun:
   • Schemaänderungen mit firebase dataconnect:sql:diff prüfen
   • Wenn Sie mit den Änderungen zufrieden sind, übernehmen Sie sie mit dem von firebase dataconnect:sql:migrate gestarteten Ablauf.

Ihre Cloud SQL for PostgreSQL-Instanz wird mit dem endgültigen bereitgestellten Schema und den endgültigen bereitgestellten Daten aktualisiert. Sie können den Status in der Firebase Console überwachen.

Klicken Sie nun im Bereich „Firebase Data Connect“ auf „Ausführen (Produktion)“, um Daten in die Produktionsumgebung einzufügen.