Cette page a été traduite par l'API Cloud Translation.

Créer avec Firebase Data Connect (Android)

1. Présentation

Dans cet atelier de programmation, vous allez intégrer Firebase Data Connect à une base de données Cloud SQL pour créer une application Android d'avis sur les films. Vous allez apprendre à:

Écrire un schéma GraphQL pour Firebase Data Connect
Écrire des requêtes et des mutations
Implémenter l'authentification des utilisateurs pour sécuriser vos données

Prérequis

La dernière version d'Android Studio
Émulateur Android avec le niveau d'API 23 ou supérieur

Points abordés

Configurer Firebase Data Connect avec des émulateurs locaux
Concevoir un schéma de données à l'aide de Data Connect et de GraphQL
Écrire des requêtes et des mutations pour une application d'avis sur les films
Générer le SDK Kotlin et l'utiliser dans une application Android
(Facultatif) Déployer un service Data Connect en production

2. Configurer l'exemple de projet

Créer un projet Firebase

Connectez-vous à la console Firebase avec votre compte Google.
Dans la console Firebase, cliquez sur "Ajouter un projet".
Nommez votre projet Firebase (par exemple, "Critique de film"), puis cliquez sur "Continuer".
Vous serez peut-être invité à activer Google Analytics. Pour les besoins de cet atelier de programmation, votre choix n'a pas d'importance.
Au bout d'une minute environ, votre projet Firebase sera prêt. Cliquez sur "Continuer".

Télécharger le code

Exécutez la commande suivante pour cloner l'exemple de code de cet atelier de programmation. Un répertoire nommé codelab-dataconnect-android est alors créé sur votre machine:

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

Si vous ne disposez pas de git sur votre ordinateur, vous pouvez également télécharger le code directement depuis GitHub.

Ajouter la configuration Firebase

Dans la console Firebase, sélectionnez "Vue d'ensemble du projet" dans le menu de navigation de gauche. Cliquez sur le bouton Android pour sélectionner la plate-forme. Lorsque vous êtes invité à saisir un nom de package, utilisez com.google.firebase.example.dataconnect.
Cliquez sur "Enregistrer l'application", puis suivez les instructions pour télécharger le fichier google-services.json et le déplacer dans le répertoire app/ du code que vous venez de télécharger. Cliquez ensuite sur "Suivant".

3. Configurer Data Connect

Installation

Installation automatique

Exécutez la commande suivante dans le répertoire codelab-dataconnect-android :

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

Ce script tente de configurer l'environnement de développement pour vous et de lancer un IDE intégré au navigateur. Cet IDE fournit des outils, y compris une extension VS Code préemballée, pour vous aider à gérer votre schéma, à définir les requêtes et les mutations à utiliser dans votre application, et à générer des SDK fortement typés.

Une fois le script exécuté, VS Code devrait s'ouvrir automatiquement.

Remarque: Si vous avez déjà installé la version pour ordinateur de bureau de VS Code, le script devrait l'ouvrir automatiquement. Si le script échoue, suivez la procédure d'installation manuelle ci-dessous.

Installation manuelle

Installer Visual Studio Code
Installez Node.js.
Dans VS Code, ouvrez le répertoire codelab-dataconnect-android.
Installez l'extension Firebase Data Connect depuis Visual Studio Code Marketplace.

Initialiser Data Connect dans le projet

Dans le panneau de gauche, cliquez sur l'icône Firebase pour ouvrir l'interface utilisateur de l'extension Data Connect pour VS Code:

Cliquez sur le bouton Se connecter avec Google. Une fenêtre de navigateur s'ouvre. Suivez les instructions pour vous connecter à l'extension avec votre compte Google.
Cliquez sur le bouton Connecter un projet Firebase, puis sélectionnez le projet que vous avez créé précédemment dans la console.

Cliquez sur le bouton Run firebase init (Exécuter firebase init), puis suivez les étapes dans le terminal intégré.

Configurer la génération du SDK

Une fois que vous avez cliqué sur le bouton "Run firebase init" (Exécuter l'initialisation de Firebase), l'extension Firebase Data Connect doit initialiser un répertoire dataconnect/ pour vous.

Dans VS Code, ouvrez le fichier dataconnect/connector/connector.yaml pour afficher la configuration par défaut. Pour faciliter la visualisation de la génération de code dans cet atelier de programmation, remplacez le connecteurId par movies et le package par com.google.firebase.example.dataconnect.generated:

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

Pour comprendre ce que chacun de ces éléments signifie:

connectorId : nom unique de ce connecteur.
outputDir : chemin d'accès où le SDK Data Connect généré sera stocké. Ce chemin d'accès est relatif au répertoire contenant le fichier connector.yaml.
package : nom du package à utiliser dans le SDK généré.

Démarrer les émulateurs Firebase

Dans VS Code, cliquez sur le bouton Start emulators (Démarrer les émulateurs).

L'émulateur devrait démarrer dans le terminal intégré. Si le démarrage est correct, vous devriez obtenir un résultat semblable à ceci:

Configurer l'application Android pour utiliser l'émulateur local

Ouvrez Android Studio.
Sur l'écran d'accueil d'Android Studio, cliquez sur le bouton "Open" (Ouvrir) et sélectionnez le répertoire codelab-dataconnect-android. Attendez que Gradle se synchronise.
Une fois la synchronisation Gradle terminée, ouvrez le fichier app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt et appelez useEmulator():

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. Définir le schéma et préremplir la base de données

Dans cette section, vous allez définir la structure et les relations entre les principales entités de l'application de films dans un schéma. Les entités telles que Movie, User et Review sont mappées sur des tables de base de données, et des relations sont établies à l'aide de directives de schéma Firebase Data Connect et GraphQL.

Entités et relations principales

Le type Movie contient des informations clés telles que le titre, le genre et les tags, que l'application utilise pour les recherches et les profils de films. Le type User permet de suivre les interactions des utilisateurs, comme les avis et les favoris. Review met en relation les utilisateurs avec des films, ce qui permet à l'application d'afficher les notes et les commentaires générés par les utilisateurs.

Tableau des utilisateurs

Le type d'utilisateur définit une entité utilisateur qui interagit avec des films en laissant des avis ou en les ajoutant à ses favoris.

Dans VS Code, ouvrez le fichier dataconnect/schema/schema.gql et supprimez le commentaire (ou ajoutez-le) de la définition de la table User:

# 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
}

Tableau des films

Le type "Movie" définit la structure principale d'une entité de film, y compris des champs tels que "title", "genre", "releaseYear" et "rating".

Dans VS Code, ouvrez le fichier dataconnect/schema/schema.gql et supprimez le commentaire (ou ajoutez-le) de la définition de la table Movie:

# 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
}

Table MovieMetadata

Le type MovieMetadata établit une relation individuelle avec le type Movie. Elle inclut des données supplémentaires telles que le réalisateur du film.

Dans VS Code, ouvrez le fichier dataconnect/schema/schema.gql et supprimez le commentaire (ou ajoutez-le) de la définition de la table MovieMetadata:

# 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
}

Tableau d'examen

Le type "Review" représente l'entité "Review" et lie les types "User" et "Movie" dans une relation de plusieurs à plusieurs (un utilisateur peut laisser plusieurs avis, et chaque film peut avoir plusieurs avis).

Dans VS Code, ouvrez le fichier dataconnect/schema/schema.gql et supprimez le commentaire (ou ajoutez-le) de la définition de la table Review:

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

Champs et valeurs par défaut générés automatiquement

Le schéma utilise des expressions telles que @default(expr: "uuidV4()") pour générer automatiquement des ID et des codes temporels uniques. Par exemple, le champ d'ID des types "Film" et "Avis" est automatiquement renseigné par un UUID lorsqu'un nouvel enregistrement est créé.

Insérer des données fictives

Une fois le schéma défini, vous pouvez préremplir la base de données avec des données fictives à des fins de test.

Dans VS Code, ouvrez dataconnect/moviedata_insert.gql. Assurez-vous que les émulateurs de l'extension Firebase Data Connect sont en cours d'exécution.
Un bouton "Run (local)" (Exécuter (local)) devrait s'afficher en haut du fichier. Cliquez dessus pour insérer les données fictives sur les films dans votre base de données.

Vérifiez dans le terminal d'exécution de Data Connect que les données ont bien été ajoutées.

Une fois les données en place, passez à l'étape suivante pour découvrir comment créer des requêtes dans Data Connect.

5. Créer une requête pour lister des films

Commencez par créer une requête pour lister les films. Pour chaque film, vous récupérerez l'ID, le titre, l'image et le genre.

Définir la requête

Dans VS Code, ouvrez le fichier dataconnect/connector/queries.gql et annulez la mise en commentaire (ou ajoutez) la requête ListMovies:

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

Pour tester la nouvelle requête, cliquez sur le bouton "Run (local)" (Exécuter (local)) pour l'exécuter sur votre base de données locale. La liste des films de la base de données doit s'afficher dans la section "Résultat" du terminal d'exécution Data Connect.

Appeler l'application depuis l'application Android

Maintenant que vous avez testé la requête dans l'émulateur Data Connect, il est temps de l'ajouter à l'application.

Dans Android Studio, ouvrez le fichier app/src/main/java/com/google/firebase/example/dataconnect/MoviesScreen.kt et ajoutez le code suivant pour afficher la liste des films au format grille:

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

Exécuter l'application

Dans Android Studio, cliquez sur le bouton "Run" (Exécuter) pour lancer l'application dans l'émulateur Android.

Une fois l'application lancée, un écran semblable à celui-ci s'affiche:

6. Créer la requête d'informations sur le film

Maintenant que l'application peut lister des films, créons une requête pour afficher les détails de chaque film.

Définir la requête

Dans VS Code, ouvrez le fichier dataconnect/connector/queries.gql et annulez la mise en commentaire (ou ajoutez) la requête GetMovieById:

# 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
      }
    }
  }
}

Appeler depuis l'application Android

Dans Android Studio, ouvrez le fichier app/src/main/java/com/google/firebase/example/dataconnect/MovieDetailScreen.kt et ajoutez le code suivant:

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

Exécuter l'application

Dans Android Studio, cliquez sur le bouton "Run" (Exécuter) pour lancer l'application dans l'émulateur Android.

7. Créer une mutation pour insérer des utilisateurs

Maintenant que l'application peut afficher des données, il est temps d'en ajouter à partir de l'application. Pour ce faire de manière sécurisée, vous devez utiliser Firebase Authentication.

Pour les besoins de cet atelier de programmation, l'application utilise l'authentification anonyme pour connecter les utilisateurs. Toutefois, pour une application plus sécurisée, envisagez d'utiliser une autre méthode d'authentification, telle que l'authentification par e-mail/mot de passe ou un fournisseur d'identité fédéré.

Définir la mutation

Dans VS Code, ouvrez le fichier dataconnect/connector/mutations.gql et annulez la mise en commentaire (ou ajoutez) la requête UpsertUser:

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

Appeler depuis l'application Android

Dans Android Studio, ouvrez le fichier app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt et appelez la mutation:

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

Exécuter l'application

Dans Android Studio, cliquez sur le bouton "Run" (Exécuter) pour lancer l'application dans l'émulateur Android.

8. Félicitations

Félicitations, vous avez ajouté Firebase Data Connect à une application Android.

Vous connaissez maintenant les étapes clés requises pour configurer Data Connect, créer des requêtes et des mutations, et gérer l'authentification des utilisateurs.

Étape suivante

En savoir plus sur la tarification
En savoir plus sur la sécurisation des opérations
Déployer en production (section suivante)
Découvrez comment effectuer une recherche de similarité vectorielle.

(Facultatif) Déployer en production

Jusqu'à présent, cette application n'a utilisé que les émulateurs Firebase. Si vous souhaitez découvrir comment déployer cette application dans un véritable projet Firebase, passez à l'étape suivante.

9. (Facultatif) Déployer votre application

Jusqu'à présent, cette application était entièrement locale. Toutes les données sont contenues dans la suite d'émulateurs Firebase. Dans cette section, vous allez apprendre à configurer votre projet Firebase pour que cette application fonctionne en production.

Activer Firebase Authentication

Dans la console Firebase, accédez à la section "Authentification", puis cliquez sur "Commencer". Accédez à l'onglet "Mode de connexion", puis sélectionnez l'option "Connexion anonyme" dans la section "Fournisseurs".

Activez la méthode de connexion anonyme, puis cliquez sur "Enregistrer".

Déployer le schéma Firebase Data Connect

Important: Si vous déployez un schéma pour la première fois dans votre projet, ce processus crée une instance PostgreSQL Cloud SQL, ce qui peut prendre environ 15 minutes. Vous ne pourrez pas effectuer de déploiement tant que l'instance Cloud SQL n'est pas prête et intégrée à Firebase Data Connect.

Dans l'interface utilisateur de l'extension VS Code Firebase Data Connect, cliquez sur Deploy to production (Déployer en production).
Vous devrez peut-être examiner les modifications de schéma et approuver les modifications potentiellement destructrices. Vous serez invité à:
- Examiner les modifications apportées au schéma à l'aide de firebase dataconnect:sql:diff
- Une fois que les modifications vous conviennent, appliquez-les à l'aide du flux démarré par firebase dataconnect:sql:migrate.

Votre instance Cloud SQL pour PostgreSQL sera mise à jour avec le schéma et les données déployés. Vous pouvez surveiller l'état dans la console Firebase.

Vous pouvez maintenant cliquer sur "Exécuter (Production)" dans le panneau Firebase Data Connect, comme vous l'avez fait avec les émulateurs locaux, pour ajouter des données à l'environnement de production.