Premiers pas avec Firebase Data Connect en local

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 du 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 localement sans configurer une instance SQL de production.

Remarque : Suivez ce guide de démarrage rapide local si vous souhaitez essayer Data Connect avec un projet de plan Spark. Dans ce guide, vous allez : prototype en local avec un émulateur et une base de données locale. Si vous êtes prêt, pour ajouter Data Connect à un projet de la formule Blaze et configurer un service et la base de données Cloud SQL, essayez de lancer la production.

• Ajoutez Firebase Data Connect à votre projet Firebase.
• Configurez un environnement de développement comprenant une extension Visual Studio Code pour travailler avec une instance locale.
• Nous vous montrerons ensuite comment :
  • Créer un schéma pour une application de films
  • Définir les requêtes et les mutations qui seront utilisées dans votre application
  • Tester vos requêtes et vos mutations avec des exemples de données sur un émulateur local
  • Générer des SDK fortement typés et les utiliser dans votre application
  • Déployez votre schéma, vos requêtes et vos données finaux dans le cloud (facultatif, abonnement Blaze requis).

Prérequis

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

• Linux, macOS ou Windows
• Visual Studio Code
• Installez Node.js avec nvm-windows pour Windows ou nvm pour macOS ou Linux.
• Si vous ne l'avez pas déjà fait, créez un projet Firebase dans le Console Firebase.

Configurer l'environnement de développement

Vous aurez besoin de Visual Studio Code pour gérer le schéma et définir des requêtes. qui sera utilisé dans votre application, et un SDK fortement typé généré automatiquement pour vous:

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 à partir de la Visual Studio Code Marketplace.

Configurer le répertoire de votre projet

Pour configurer votre projet local, initialisez le répertoire de votre projet. Dans VS Code dans le panneau de gauche, cliquez sur l'icône Firebase Interface utilisateur de l'extension Data Connect VS Code:

1. Cliquez sur le bouton Se connecter avec Google.
2. Cliquez sur le bouton Connect a Firebase project (Associer un projet Firebase), puis sélectionnez le projet que vous créé précédemment dans la console.
3. Cliquez sur le bouton Run firebase init (Exécuter firebase init).

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

   Remarque :Dans le terminal intégré, vérifiez que vos émulateurs configurés démarrer. Une fois qu'ils sont en cours d'exécution, l'interface utilisateur 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 pour les films.

Film

Dans Data Connect, les champs GraphQL sont mappés sur des colonnes. Le film contient id, title, imageUrl et genre. Data Connect reconnaît les types de données primitifs : String et UUID.

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

# 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

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

Ajouter des données à vos tableaux

Dans le panneau de l'éditeur VS Code, les boutons CodeLens s'affichent au-dessus des types GraphQL dans /dataconnect/schema/schema.gql. Vous pouvez utiliser les boutons Ajouter des données et Exécuter (local) pour ajouter des données à votre base de données locale.

Pour ajouter des enregistrements aux tables Movie et MovieMetadata:

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

Pour vérifier rapidement les données, procédez comme suit:

1. De retour dans schema.gql, cliquez sur le bouton Lire les données.
2. Dans le fichier Movie_read.gql généré, cliquez sur le bouton Run (Local) (Exécuter (local)) 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 amusante : définissons les requêtes dont vous aurez besoin dans votre application. 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 code SQL brut. Notre extension VS Code facilite l'expérience de développement.

Commencez à modifier le fichier /dataconnect/connector/queries.gql. Si vous voulez pour 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 à proximité.

Une fonctionnalité très intéressante est la possibilité de traiter les relations de la base de données comme un graphique. Étant donné qu'un MovieMetadata possède un champ movie qui fait référence à un film, vous pouvez imbriquer le champ et obtenir des informations sur les informations du film. Essayez d'ajouter le type généré movieMetadata_on_movie au ListMovies.

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

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

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

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

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 que vous y avez enregistrés.

   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 la plate-forme de votre application, puis 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

Une fois la configuration locale de votre application terminée, vous pouvez déployer votre schéma, vos données et vos requêtes dans le cloud. Vous aurez besoin de la formule Blaze pour configurer Instance Cloud SQL.

1. Accéder à la section Data Connect de la console Firebase et créer une instance Cloud SQL en essai sans frais.

   Remarque :Le provisionnement de votre instance Cloud SQL pour PostgreSQL peut prendre jusqu'à 15 minutes. Vous ne pourrez effectuer le déploiement que lorsque votre instance sera prête.

2. Dans le terminal intégré de VS Code, exécutez firebase init dataconnect, puis sélectionnez la région/l'ID de service que vous venez de créer dans la console.

3. Sélectionnez "Y" lorsque le message "File dataconnect/dataconnect.yaml already exists, Overwrite?" (Le fichier dataconnect/dataconnect.yaml existe déjà. Écraser ?) s'affiche.

4. Dans l'interface utilisateur de Data Connect VS Code, cliquez sur Deploy to production (Déployer en production). .

5. 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. Toi doit pouvoir afficher le schéma et exécuter vos opérations sur la console en tant que bien. L'instance Cloud SQL pour PostgreSQL sera mise à jour avec son un schéma et des données générés déployés.

É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, surveillez votre Service Data Connect dans la console Firebase.

Pour en savoir plus, consultez la documentation. Par exemple, puisque vous avez 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.