Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Firebase Data Connect entwickeln (Android)

1. Übersicht

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

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

Vorbereitung

Neueste 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.
Abfragen und Mutationen für eine Filmrezensions-App schreiben
So generieren Sie das Kotlin SDK und verwenden es in einer Android-App.
(Optional) Informationen zum Bereitstellen eines Data Connect-Dienstes in der Produktion.

2. Beispielprojekt einrichten

Firebase-Projekt erstellen

Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
Klicken Sie in der Firebase Console auf „Projekt hinzufügen“.
Geben Sie einen Namen für Ihr Firebase-Projekt ein (z. B. „Filmrezension“) und klicken Sie auf „Weiter“.
Möglicherweise werden Sie aufgefordert, Google Analytics zu aktivieren. Für dieses Codelab spielt Ihre Auswahl keine Rolle.
Nach etwa einer Minute ist Ihr Firebase-Projekt bereit. Klicken Sie 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 haben, können Sie den Code auch direkt von GitHub herunterladen.

Firebase-Konfiguration hinzufügen

Wählen Sie in der Firebase Console im linken Navigationsbereich die Option „Projektübersicht“ aus. Klicken Sie auf die Schaltfläche „Android“, um die Plattform auszuwählen. Geben Sie bei der Aufforderung nach einem Paketnamen com.google.firebase.example.dataconnect ein.
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 dann 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 Script versucht, die Entwicklungsumgebung für Sie einzurichten und eine browserbasierte IDE zu starten. Diese IDE bietet Tools, einschließlich einer vorkonfigurierten VS Code-Erweiterung, mit denen Sie Ihr Schema verwalten, Abfragen und Mutationen für Ihre Anwendung definieren und stark typisierte SDKs generieren können.

Nach dem Ausführen des Scripts sollte VS Code automatisch geöffnet werden.

Hinweis: Wenn Sie die Desktopversion von VS Code bereits installiert haben, sollte sie durch das Script automatisch geöffnet werden. Wenn das Script fehlschlägt, folgen Sie der Anleitung unten, um das Tag manuell zu installieren.

Manuelle Installation

Visual Studio Code installieren
Installieren Sie Node.js.
Öffnen Sie in VS Code das Verzeichnis codelab-dataconnect-android.
Installieren Sie die Firebase Data Connect-Erweiterung aus dem 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:

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.
Klicken Sie auf die Schaltfläche Firebase-Projekt verbinden 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 ausführen“ 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 Codegenerierung in diesem Codelab leichter visualisiert werden kann, ändern Sie die „connectorId“ in „movies“ und das „package“ 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 diese Status:

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 richtig gestartet wird, sollte die Ausgabe in etwa so aussehen:

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

Öffnen Sie Android Studio.
Klicken Sie auf dem Begrüßungsbildschirm von Android Studio auf die Schaltfläche „Öffnen“ und wählen Sie das Verzeichnis codelab-dataconnect-android aus. Warten Sie, bis Gradle synchronisiert ist.
Öffnen Sie nach Abschluss der Gradle-Synchronisierung 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 befüllen

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

Wichtige Entitäten und Beziehungen

Der Typ Movie enthält wichtige Details wie Titel, Genre und Tags, die in der App für Suchanfragen und Filmprofile verwendet werden. Der Typ User erfasst Nutzerinteraktionen wie Rezensionen und Favoriten. 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 verfasst oder Filme zu ihren Favoriten hinzufügt.

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und entfernen Sie den Kommentar bzw. fügen Sie die Tabellendefinition User 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 Filmtyp definiert die Hauptstruktur einer Filmentität, einschließlich Feldern wie „Titel“, „Genre“, „Jahr der Veröffentlichung“ und „Altersfreigabe“.

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und entfernen Sie die Anmerkungen zur Tabellendefinition Movie 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“ stellt eine Eins-zu-eins-Beziehung zum Typ „Movie“ her. Sie enthält zusätzliche Daten wie den Regisseur des Films.

Öffnen Sie in VS Code die Datei dataconnect/schema/schema.gql und entfernen Sie den Kommentar bzw. fügen Sie die Tabellendefinition MovieMetadata 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 für die Überprüfung

Der Rezensionstyp stellt die Rezensions-Entität dar und verknüpft die Typen „Nutzer“ und „Film“ in einer n:m-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 entfernen Sie den Kommentar bzw. fügen Sie die Tabellendefinition Review 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. Beispielsweise wird das Feld „id“ in den Typen „Film“ und „Rezension“ automatisch mit einer UUID ausgefüllt, wenn ein neuer Datensatz erstellt wird.

Mock-Daten einfügen

Nachdem Sie das Schema definiert haben, können Sie die Datenbank jetzt mit Testdaten füllen.

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

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

Nachdem Sie die Daten importiert 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 vor der ListMovies-Abfrage oder fügen Sie sie hinzu:

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

Klicken Sie zum Testen der neuen Abfrage auf die Schaltfläche „Ausführen (lokal)“, um die Abfrage in Ihrer lokalen 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 anrufen

Nachdem Sie die Abfrage im Data Connect-Emulator getestet haben, fügen Sie sie der App hinzu.

Ö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 im 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 „Ausführen“, um die App im Android-Emulator zu starten.

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

6. Abfrage für Filmdetails erstellen

Die App kann jetzt Filme auflisten. Erstellen Sie nun eine Abfrage, um die Details zu jedem Film anzuzeigen.

Abfrage definieren

Öffnen Sie in VS Code die Datei dataconnect/connector/queries.gql und entfernen Sie die Kommentarzeichen vor der 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 anrufen

Ö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 hinzu:

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 „Ausführen“, um die App im Android-Emulator zu starten.

7. Mutation zum Einfügen von Nutzern erstellen

Nachdem die App jetzt Daten anzeigen kann, ist es an der Zeit, neue Daten aus der App hinzuzufügen. Verwenden Sie dazu Firebase Authentication, um die Daten sicher zu übertragen.

In diesem Codelab wird für die Anmeldung der Nutzer die anonyme Authentifizierung verwendet. Für eine sicherere App sollten Sie jedoch eine andere Authentifizierungsmethode wie die E-Mail-/Passwort-Authentifizierung 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 vor der 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 anrufen

Ö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 „Ausführen“, um die App im Android-Emulator zu starten.

8. Glückwunsch

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

Sie wissen jetzt, wie Sie Data Connect einrichten, Abfragen und Mutationen erstellen und die Nutzerauthentifizierung verarbeiten.

Weitere Informationen

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

Optional: Für Produktion bereitstellen

Bisher wurden für diese 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 und alle Daten befinden sich in der Firebase Emulator Suite. In diesem Abschnitt erfahren Sie, wie Sie Ihr Firebase-Projekt so konfigurieren, dass diese App in der Produktion funktioniert.

Firebase Authentication aktivieren

Klicken Sie in der Firebase Console im Bereich „Authentifizierung“ auf „Jetzt starten“. Rufen Sie den Tab „Anmeldemethode“ auf und wählen Sie unter „Anbieter“ 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 dabei eine Cloud SQL-PostgreSQL-Instanz erstellt. Das kann etwa 15 Minuten dauern. Sie können erst dann eine Bereitstellung vornehmen, wenn die Cloud SQL-Instanz bereit ist und mit Firebase Data Connect verknüpft wurde.

Klicken Sie in der Benutzeroberfläche der VS Code-Erweiterung für Firebase Data Connect auf In Produktion bereitstellen.
Möglicherweise müssen Sie Schemaänderungen prüfen und potenziell schädliche Änderungen genehmigen. Sie werden aufgefordert, Folgendes zu tun:
- Schemaänderungen mit firebase dataconnect:sql:diff überprüfen
- Wenn Sie mit den Änderungen zufrieden sind, wenden Sie sie mit dem Ablauf an, der von firebase dataconnect:sql:migrate gestartet wurde.

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

Klicken Sie jetzt im Bereich „Firebase Data Connect“ auf „Ausführen (Produktion)“, genau wie bei den lokalen Emulatoren, um der Produktionsumgebung Daten hinzuzufügen.