Premiers pas avec Firebase Data Connect

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

Dans la console Firebase, vous allez:

  • Ajoutez Firebase Data Connect à votre projet Firebase.
  • Créez un schéma pour une application dans la console Firebase à l'aide de Schema Assist, puis déployez-le.
  • Provisionnez une instance Cloud SQL pour votre application.
  • Avec Gemini Code Assist, remplissez votre base de données avec des exemples de données.

Ensuite, dans votre environnement de développement local, vous allez:

  • Configurez un outil de développement, y compris une extension Visual Studio Code, pour travailler avec votre instance de production.
  • Synchronisez votre environnement local avec les composants que vous avez créés dans la console.
  • Utilisez les outils d'extension pour vous aider à implémenter une requête qui sera utilisée dans votre application.
  • Générez des SDK fortement typés et utilisez-les dans votre application.
  • Déployez votre schéma, votre requête et vos données finaux dans le cloud.

Flux de la console: concevoir votre schéma et le déployer dans votre base de données

  1. Si ce n'est 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.
  3. Cliquez sur le bouton Premiers pas avec Gemini.
  4. Dans le panneau de workflow Générateur de schémas qui s'affiche, décrivez une application pour que Gemini puisse vous aider à créer un schéma GraphQL.
  5. Examinez le schéma GraphQL, puis cliquez sur Mettre à niveau et déployer.

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

  7. Sélectionnez Créer une instance Cloud SQL. Dans la boîte de dialogue qui s'affiche, sélectionnez un emplacement et un nom pour votre base de données Cloud SQL pour PostgreSQL.

    Le schéma de votre application est déployé, avec une base de données PostgreSQL correspondant à ce schéma.

Flux de console: utiliser Gemini dans Firebase pour créer une mutation et renseigner votre base de données

En effectuant l'étape précédente, vous avez créé un schéma Data Connect composé de types d'entités pertinents et l'avez déployé en production. Cela signifie qu'une base de données PostgreSQL avec les tables correspondantes a également été créée et déployée.

Pour renseigner votre base de données, vous pouvez utiliser Gemini dans Firebase pour vous aider à utiliser vos entrées en langage naturel afin de définir une mutation GraphQL pour mettre à jour l'une de vos tables et une requête pour confirmer vos mises à jour.

  1. Ouvrez l'onglet Données.

  2. Cliquez sur l'icône M'aider à écrire des requêtes GraphQL pen_spark, puis saisissez votre requête dans la zone qui s'affiche.

    Exemple :

    Add data for three sample products to my app.

  3. Cliquez sur Générer. La mutation est renvoyée.

  4. Examinez le résultat. Si nécessaire, cliquez sur Modifier pour affiner l'invite, puis sur Générer à nouveau.

  5. Cliquez ensuite sur Insérer pour insérer la mutation dans l'éditeur de données.

  6. Cliquez sur Exécuter.

Lorsque vous exécutez la mutation, les données sont écrites dans la table applicable de votre base de données PostgreSQL. Vous pouvez créer une requête dans la console pour afficher les données stockées:

  1. Répétez les étapes précédentes à l'aide de M'aider à écrire des requêtes GraphQL pen_spark pour créer une requête.

  2. Dans la zone de saisie qui s'affiche, saisissez votre réponse.

    Exemple :

    Query data for all sample products in my app.

  3. Cliquez sur Générer, puis sur Exécuter.

Parcours local: choisir les outils de développement

Maintenant que vous avez des données dans votre base de données déployée, vous pouvez poursuivre le développement de votre schéma et de vos connecteurs dans votre environnement de développement local.

Vous devez d'abord configurer un environnement local. Data Connect vous propose deux façons d'installer des outils de développement.

Flux local: configurer l'environnement de développement

  1. Créez un répertoire pour votre projet local.

  2. Exécutez la commande suivante dans le nouveau répertoire que vous avez créé.

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

    Ce script tente de configurer l'environnement de développement pour vous et de lancer un IDE basé sur un 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.

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

Flux local: configurer le répertoire de votre projet

Pour configurer votre projet local, initialisez son répertoire. Dans la fenêtre de l'IDE, dans le panneau de gauche, cliquez sur l'icône Firebase pour ouvrir l'interface utilisateur de l'extension VS Code Data Connect:

  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), puis suivez la procédure.

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

Flux local: trouver votre schéma dans l'environnement local

L'étape firebase init de la section précédente a synchronisé le schéma que vous avez déployé à partir de la console avec votre environnement de développement local.

Recherchez votre schéma: il se trouve dans le fichier /dataconnect/schema/schema.gql du répertoire de votre projet Firebase.

Flux local: travailler avec votre schéma

Exemple de schéma: Film

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

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

Exemple de schéma : table 1:1 : MovieMetadata

Avec les films, vous pouvez modéliser les métadonnées des films.

Par exemple, dans schema.gql, vous pouvez ajouter l'extrait de code suivant ou examiner le code généré par Gemini.

# 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é sur un type 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

Flux local: ajouter des données à vos tables

Dans le panneau de l'éditeur IDE, vous pouvez voir les boutons CodeLens apparaître au-dessus des types GraphQL dans /dataconnect/schema/schema.gql. Tout comme vous l'avez fait dans la console, vous pouvez créer une mutation pour ajouter des données à votre base de données de production.

Pour ajouter des données à une table en local:

  1. Dans schema.gql, cliquez sur le bouton Ajouter des données au-dessus de la déclaration de l'un de vos types (par exemple, Movie, Product ou Account, en fonction de la nature de votre application).
    Bouton &quot;Ajouter des données&quot; de l&#39;outil Code Lens pour Firebase Data Connect
  2. Un nouveau fichier, <type>_insert.qgl, est ajouté à votre répertoire de travail, tel que Movie_insert.gql ou Product_insert.gql. Codez en dur les données dans les champs de ce type.
  3. Cliquez sur le bouton Run (Production) (Exécuter (production)).
    Bouton d&#39;exécution de la loupe de code pour Firebase Data Connect
  4. Répétez les étapes précédentes pour ajouter un enregistrement à d'autres tables.

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.
  2. Dans le fichier <type>_read.gql généré, comme Product_read.gql, 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

Flux local: 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 code SQL brut. Notre extension VS Code facilite l'expérience de développement.

Pour implémenter une requête, vous pouvez en adapter une générée avec notre CodeLens:

  1. Dans /dataconnect/schema/schema.gql, au-dessus d'un type (Movie, Product, Account, etc.), cliquez sur le bouton CodeLens Lire les données.
  2. Dans le fichier <type>_read.gql généré, testez la requête en cliquant sur le bouton Run (Production) (Exécuter (production)).
  3. Copiez la requête fonctionnelle dans /dataconnect/connector/queries.gql.

  4. Pour que cette requête puisse être déployée, déclarez-lui un nom unique.

    Par exemple, dans l'exemple générique suivant, query_name peut être ListMovies, ListProducts ou ListAccounts.

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

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

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

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

Flux local: générer des SDK

  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. Le code du SDK Data Connect sera généré et enregistré à cet emplacement.

  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é.

Flux local: déployer votre schéma et votre requête en production

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

Dans la fenêtre de l'IDE, dans l'UI de l'extension VS Code, cliquez sur le bouton Déployer en production.

Une fois le déploiement effectué, accédez à la console Firebase pour vérifier que les mises à jour du schéma (le cas échéant) et les opérations ont été importées 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 le schéma et les données générés et déployés.

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

Flux local: utilisez les SDK pour appeler votre requête à partir d'une application

Maintenant que votre schéma mis à jour (le cas échéant) et votre requête sont déployés en production, vous pouvez utiliser le SDK généré par Data Connect pour implémenter un appel à votre requête ListMovies.

Web Swift Kotlin Android Flutter
  1. Ajoutez Firebase à votre application Web.

  2. Dans le fichier principal de votre application React:

    • importer le SDK généré ;
    • Appelez les méthodes Data Connect.
    import React from 'react';
import ReactDOM from 'react-dom/client';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

function App() {
  const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
  useEffect(() => {
    listMovies.then(res => setMovies(res.data));
  }, []);
  return (
    movies.map(movie => <h1>{movie.title}</h1>);
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
  1. Ajoutez Firebase à votre application iOS.

  2. Pour utiliser le SDK généré, configurez-le en tant que dépendance dans Xcode.

    Dans la barre de navigation supérieure de Xcode, sélectionnez File > Add Package Dependencies > Add Local (Fichier > Ajouter des dépendances de package > Ajouter local), puis choisissez le dossier contenant le Package.swift généré.

  3. Dans le délégué principal de votre application:

    • importer le SDK généré ;
    • Appelez les méthodes Data Connect.
    import SwiftUI

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

struct ListMovieView: View {
@StateObject private var queryRef = connector.listMovies.ref()

    var body: some View {
        VStack {
            Button {
                Task {
                    do {
                        try await refresh()
                    } catch {
                        print("Failed to refresh: \(error)")
                    }
                }
            } label: {
                Text("Refresh")
            }

            // use the query results in a view
            ForEach(queryRef.data?.movies ?? []) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}
  1. Ajoutez Firebase à votre application Android.

  2. Pour utiliser le SDK généré, configurez Data Connect en tant que dépendance dans Gradle.

    Mettez à jour plugins et dependencies dans votre app/build.gradle.kts.

    plugins {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest as of March 14, 2025.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.9.0"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.10"
  kotlin("android") version kotlinVersion
  kotlin("plugin.serialization") version kotlinVersion
}

dependencies {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest versions as of March 14, 2025.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")

  // These dependencies are not strictly required, but will very likely be used
  // when writing modern Android applications.
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
  implementation("androidx.appcompat:appcompat:1.7.0")
  implementation("androidx.activity:activity-ktx:1.10.1")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

  3. Dans l'activité principale de votre application:

    • importer le SDK généré ;
    • Appelez les méthodes Data Connect.
    import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import kotlinx.coroutines.launch


private val connector = com.myapplication.MoviesConnector.instance

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val textView: TextView = findViewById(R.id.text_view)

    lifecycleScope.launch {
      lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        
        val result = connector.listMovies.runCatching { execute { } }
        
        val newTextViewText = result.fold(
          onSuccess = {
            val titles = it.data.movies.map { it.title }
            "${titles.size} movies: " + titles.joinToString(", ")
          },
          onFailure = { "ERROR: ${it.message}" }
        )
        textView.text = newTextViewText
      }
    }
  }
}
  1. Ajoutez Firebase à votre application Flutter.
  2. Installez la CLI flutterfire dart pub global activate flutterfire_cli.
  3. Exécutez flutterfire configure.
  4. Dans la fonction principale de votre application :
    • importer le SDK généré ;
    • Appelez les méthodes Data Connect.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemBuilder: (context, index) => Card(
                      child: Text(
                    snapshot.data!.data.movies[index].title,
                  )),
                  itemCount: snapshot.data!.data.movies.length,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

É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: