Premiers pas avec Firebase Data Connect

Remarque :Firebase Data Connect est en version Preview publique. Data Connect sera soumis aux "Conditions des offres de pré-DG" de la section Conditions spécifiques au service des conditions d'utilisation de Google Cloud Platform. Les fonctionnalités pré-DG sont disponibles "en l'état" et peuvent avoir une prise en charge limitée. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Dans ce guide de démarrage rapide, vous allez apprendre à créer Firebase Data Connect dans votre application.

Remarque :Suivez ce guide de démarrage rapide si vous souhaitez ajouter Data Connect à l'un de vos projets Firebase avec la formule Blaze, créer un service Data Connect et provisionner une base de données Cloud SQL pour votre prototypage. Si vous préférez utiliser le forfait Spark et créer un prototype en local avec un émulateur et une base de données locale, essayez le démarrage du développement local.

• Ajoutez Firebase Data Connect à votre projet Firebase.
• Configurez un environnement de développement incluant une extension Visual Studio Code pour utiliser une instance de production.
• Nous vous montrerons ensuite comment :
  • Créez un schéma pour une application d'avis sur les films et déployez-le en production.
  • Définissez des requêtes et des mutations pour votre schéma.
  • Générer des SDK fortement typés et les utiliser dans votre application
  • Déployez votre schéma, votre requête et vos données finaux en production.

Prérequis

Pour suivre ce guide de démarrage rapide dans votre environnement local, vous avez besoin des éléments suivants :

• Linux, macOS ou Windows
• Visual Studio Code

Associer votre projet Firebase

1. Si vous ne l'avez pas déjà fait, créez un projet Firebase.
   1. Dans la console Firebase, cliquez sur Ajouter un projet, puis suivez les instructions à l'écran.
2. Accédez à la section Data Connect de la console Firebase et suivez la procédure de configuration du produit.

3. Passez à la formule Blaze pour votre projet. Vous pouvez ainsi créer une instance Cloud SQL pour PostgreSQL.

   Remarque :Bien que vous ayez configuré la facturation dans votre mise à niveau vers Blaze, vous ne serez pas facturé pour l'utilisation de Data Connect ou de la configuration par défaut de Cloud SQL pour PostgreSQL pendant la phase preview.

4. Sélectionnez un emplacement pour votre base de données Cloud SQL pour PostgreSQL.

5. Notez les noms et les ID du projet, du service et de la base de données pour les confirmer plus tard.

6. Suivez le reste de la procédure de configuration, puis cliquez sur OK.

   Remarque :Le provisionnement de votre instance Cloud SQL pour PostgreSQL peut prendre jusqu'à 15 minutes. Vous pouvez vérifier que le flux de configuration de Data Connect, y compris le provisionnement de la base de données, est terminé à l'aide de la console Google Cloud.

Choisir et configurer un environnement de développement

Data Connect est compatible avec deux expériences de développement:

• Si vous êtes développeur Kotlin Android, iOS, Flutter ou Web, vous pouvez utiliser le développement VS Code pour concevoir et tester des schémas et des opérations localement lorsque vous vous connectez à votre instance Cloud SQL pour PostgreSQL.
• Si vous êtes développeur Web, vous pouvez utiliser IDX Development pour créer un prototype dans un espace de travail IDX à l'aide d'un modèle IDX préconfiguré avec PostgreSQL, d'une extension VS Code avec l'émulateur Data Connect et d'un code client de démarrage rapide configuré pour vous. Pour en savoir plus, consultez le site Project IDX.

Ce guide de démarrage rapide porte sur le flux de développement des extensions VS Code. Pour continuer:

1. Créez un répertoire pour votre projet local.
2. Ouvrez VS Code dans le nouveau répertoire.

3. Installez l'extension Firebase Data Connect depuis Visual Studio Code Marketplace.

   Remarque :L'extension inclut l'extension de mise en surbrillance de la syntaxe GraphQL de la place de marché. Les autres extensions GraphQL que vous installez peuvent entrer en conflit avec la prise en charge de GraphQL incluse dans l'extension Firebase Data Connect.

Configurer votre projet local

Remarque :Si vous n'utilisez pas IDX, suivez les étapes de cette section.

Installez la CLI en suivant les instructions normales. Si npm est déjà installé, exécutez la commande suivante:

npm install -g firebase-tools

Remarque :Si vous utilisez une installation CLI existante, veillez à passer à la dernière version.

Configurer le répertoire de votre projet

Pour configurer votre projet local, initialisez son répertoire.

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

1. Cliquez sur le bouton Se connecter avec Google.
2. Cliquez sur le bouton Connecter un projet Firebase, puis sélectionnez le projet que vous avez créé précédemment dans la console.
3. Cliquez sur le bouton Run firebase init (Exécuter firebase init).
4. Si votre projet est associé au forfait Blaze, répondez Oui à l'invite Voulez-vous configurer vos ressources backend maintenant ?

5. Cliquez sur le bouton Start emulators (Démarrer les émulateurs).

   Remarque :Dans le terminal intégré, vérifiez que vos émulateurs configurés démarrent. Une fois qu'ils sont en cours d'exécution, l'UI de l'extension devrait être mise à jour avec des informations sur l'émulateur.

Créer un schéma

Dans le répertoire de votre projet Firebase, dans le fichier /dataconnect/schema/schema.gql, commencez à définir un schéma GraphQL qui inclut des films.

Film

Dans Data Connect, les champs GraphQL sont mappés à des colonnes. Le type Movie comporte id, title, imageUrl et genre. Data Connect reconnaît les types de données primitifs String et UUID.

Copiez l'extrait suivant ou annulez la mise en commentaire des lignes correspondantes dans le fichier.

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

Métadonnées du film

Maintenant que vous avez des films, vous pouvez modéliser leurs métadonnées.

Copiez l'extrait suivant ou annulez la mise en commentaire des lignes correspondantes dans le fichier.

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

Notez que le champ movie est mappé à un type de Movie. Data Connect comprend qu'il s'agit d'une relation entre Movie et MovieMetadata, et gérera cette relation pour vous.

En savoir plus sur les schémas Data Connect dans la documentation

Déployer votre schéma en production

Si vous utilisez l'extension Firebase VS Code pour travailler avec votre base de données de production, vous devez déployer votre schéma avant de continuer. Une fois votre schéma déployé dans votre base de données de production, vous devriez pouvoir l'afficher dans la console.

Remarque :Le provisionnement de votre instance Cloud SQL pour PostgreSQL peut prendre jusqu'à 15 minutes. Vous ne pourrez pas effectuer de déploiement tant que votre instance ne sera pas prête. Avant de déployer votre schéma, vérifiez que le flux de configuration de Data Connect, y compris le provisionnement de la base de données, est terminé à l'aide de la console Google Cloud.

1. Vous pouvez utiliser l'extension VS Code Data Connect pour le déploiement.
   • Dans l'interface utilisateur de l'extension, sous le panneau Firebase Data Connect, cliquez sur Déployer en production.
2. 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
   • Lorsque les modifications vous conviennent, appliquez-les à l'aide du flux démarré par firebase dataconnect:sql:migrate.

Ajouter des données à vos tableaux

Dans le panneau de l'éditeur VS Code, vous pouvez voir des boutons CodeLens apparaître sur les types GraphQL dans /dataconnect/schema/schema.gql. Comme vous avez déployé votre schéma en production, vous pouvez utiliser les boutons Ajouter des données et Exécuter (Production) pour ajouter des données à votre base de données côté backend.

Pour ajouter des enregistrements au tableau Movie:

1. Dans schema.gql, cliquez sur le bouton Add data (Ajouter des données) au-dessus de la déclaration de type Movie.
   
2. Dans le fichier Movie_insert.gql généré, codez en dur les données pour les quatre champs.
3. Cliquez sur le bouton Run (Production) (Exécuter (Production)).
   
4. Répétez les étapes précédentes pour ajouter un enregistrement au tableau MovieMetadata, en fournissant l'id de votre film dans le champ movieId, comme indiqué dans la mutation MovieMetadata_insert générée.

Pour vérifier rapidement que des données ont été ajoutées:

1. De retour dans schema.gql, cliquez sur le bouton Lire les données au-dessus de la déclaration de type Movie.
2. Dans le fichier Movie_read.gql généré, cliquez sur le bouton Run (Production) (Exécuter (production)) pour exécuter la requête.

En savoir plus sur les mutations Data Connect dans la documentation

Définir votre requête

Passons maintenant à la partie la plus amusante : les requêtes. En tant que développeur, vous êtes habitué à écrire des requêtes SQL plutôt que des requêtes GraphQL. Cela peut donc sembler un peu différent au début. Toutefois, GraphQL est beaucoup plus concis et sécurisé que le langage SQL brut. Notre extension VS Code facilite l'expérience de développement.

Commencez à modifier le fichier /dataconnect/connector/queries.gql. Si vous souhaitez obtenir tous les films, utilisez une requête comme celle-ci.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Exécutez la requête à l'aide du bouton CodeLens situé à proximité.

Conseil : Vous pouvez utiliser Gemini dans Firebase pour créer et tester des requêtes GraphQL dans la console Firebase. Pour en savoir plus, consultez Utiliser l'assistance de l'IA pour les requêtes et les mutations.

En savoir plus sur les requêtes Data Connect dans la documentation

Générer des SDK et les utiliser dans votre application

1. Cliquez sur le bouton Ajouter le SDK à l'application.

2. Dans la boîte de dialogue qui s'affiche, sélectionnez un répertoire contenant le code de votre application. Data Connect. Le code du SDK sera généré et enregistré ici.

   Remarque : Si vous ne disposez pas encore d'un répertoire d'applications, vous pouvez créer et sélectionner un répertoire pour le code du SDK pour le moment, puis l'associer à votre application plus tard.

3. Sélectionnez votre plate-forme d'applications. Notez que le code du SDK est immédiatement généré dans le répertoire sélectionné.

Découvrez comment utiliser le SDK généré pour appeler des requêtes et des mutations à partir d'applications clientes (Web, Android, iOS, Flutter).

Déployer votre schéma et votre requête en production

Vous avez suivi une itération de développement. Vous pouvez désormais déployer votre schéma, vos données et vos requêtes sur le serveur à l'aide de l'interface utilisateur de l'extension Firebase ou de la CLI Firebase, comme vous l'avez fait avec votre schéma.

Si vous utilisez l'extension Firebase VS Code pour le déploiement, cliquez sur le bouton Déployer en production.

Une fois le déploiement effectué, accédez à la console Firebase pour vérifier que le schéma, les opérations et les données ont été importés dans le cloud. Vous devriez pouvoir afficher le schéma et exécuter vos opérations dans la console. L'instance Cloud SQL pour PostgreSQL sera mise à jour avec son schéma et ses données générés et déployés.

En savoir plus sur l'utilisation de l'émulateur Data Connect dans la documentation

Étapes suivantes

Examinez votre projet déployé et découvrez d'autres outils:

• Ajoutez des données à votre base de données, inspectez et modifiez vos schémas, et surveillez votre service Data Connect dans la console Firebase. Pour en savoir plus, consultez la documentation. Par exemple, puisque vous avez terminé le guide de démarrage rapide:

• En savoir plus sur le développement de schémas, de requêtes et de mutations

• Découvrez comment générer des SDK client et appeler des requêtes et des mutations à partir du code client pour le Web, Android, iOS et Flutter.