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

Premiers pas avec Firebase Data Connect en local

Dans ce guide de démarrage rapide, vous allez apprendre à créer Firebase Data Connect dans votre application en local sans configurer d'instance SQL de production. Vous découvrirez comment :

Ajoutez Firebase Data Connect à votre projet Firebase.
Configurez un environnement de développement incluant les extensions Visual Studio Code pour travailler avec une instance locale.
Nous vous montrerons ensuite comment :
- Utilisez les outils d'extension VS Code avec Gemini Code Assist pour :
  - Créer un schéma pour une application
  - Créez des requêtes et des mutations administratives pour remplir votre base de données locale.
  - Vous aider à implémenter des requêtes et des mutations pour votre application dans un connecteur déployable
- Testez vos requêtes et mutations avec des exemples de données sur un émulateur local.
- Générez des SDK à typage fort et utilisez-les dans votre application.
- Déployez votre schéma et votre connecteur finaux dans le cloud (facultatif, avec un forfait Blaze).

Choisir un workflow de développement local

Data Connect vous propose deux façons d'installer des outils de développement et de travailler en local.

Prérequis

Pour utiliser ce guide de démarrage rapide, vous aurez besoin des éléments suivants.

Visual Studio Code.
Une installation Node.js, à l'aide de nvm-windows pour Windows ou de nvm pour macOS ou Linux.
Un projet Firebase. Si vous n'en avez pas encore créé, faites-le dans la console Firebase.

Configurer l'environnement de développement

Créez un répertoire pour votre projet local.
Ouvrez VS Code dans le nouveau répertoire.
Installez l'extension Firebase Data Connect depuis le Visual Studio Code Marketplace.

Configurer le répertoire de votre projet

Pour configurer votre projet local, initialisez le répertoire de votre projet. 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 :

Cliquez sur le bouton Se connecter avec Google.
Cliquez sur le bouton Connect a Firebase project (Associer 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).
Cliquez sur le bouton Start emulators (Démarrer les émulateurs).

Remarque : Dans le terminal intégré, vérifiez que les émulateurs que vous avez configurés démarrent. Une fois qu'ils sont en cours d'exécution, l'interface utilisateur de votre extension devrait se mettre à jour avec les détails de 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 sur, par exemple, les critiques de films.

Utiliser Gemini Code Assist pour créer un schéma

Pour créer un schéma d'application d'avis sur les films à l'aide de Gemini Code Assist :

Cliquez sur l'icône de l'extension Data Connect VS Code pour ouvrir sa barre latérale.
Cliquez sur Essayer Gemini avec @FirebaseDataConnect. La fenêtre de chat Gemini Code Assist s'ouvre.
Cliquez sur l'interface de chat et commencez à saisir @FirebaseDataConnect pour filtrer les commandes pertinentes.
Sélectionnez la commande /generate_schema et, à l'invite, complétez la commande en demandant à Gemini de créer un schéma pour l'application que vous développez.

Exemple :
```
@FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
```
Après quelques instants, un schéma recommandé s'affiche. Examinez le schéma.

Remarque Si vous souhaitez modifier le schéma initial, vous pouvez exécuter une nouvelle commande @FirebaseDataConnect /generate_schema et demander à Gemini, par exemple, de supprimer un type de votre schéma ou d'ajouter des champs spécifiques à un type.
Pour ajouter le code à schema.gql :
1. Cliquez sur le bouton Insérer à la fin du fichier.
2. Vous pouvez également insérer le code à la position de votre curseur en cliquant sur le bouton + en haut de la réponse du chat.

Film

Dans Data Connect, les champs GraphQL sont mappés aux colonnes. Le film 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.

# 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 Movie. Data Connect comprend qu'il s'agit d'une relation entre Movie et MovieMetadata, et la gérera 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 de l'IDE, des 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 :

Dans schema.gql, cliquez sur le bouton Ajouter des données au-dessus de la déclaration de type Movie.
Dans le fichier Movie_insert.gql généré, codez en dur les données des trois champs.
Cliquez sur le bouton Run (Local) (Exécuter (localement)).
Répétez les étapes précédentes pour ajouter un enregistrement à la table MovieMetadata, en fournissant le 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 :

De retour dans schema.gql, cliquez sur le bouton Read data (Lire les données) au-dessus de la déclaration de type Movie.
Dans le fichier Movie_read.gql qui s'affiche, cliquez sur le bouton Exécuter (local) pour exécuter la requête.

En savoir plus sur les mutations Data Connect dans la documentation

Définir une requête

Passons maintenant à la partie la plus amusante : définissez les requêtes dont vous aurez besoin dans votre application. En tant que développeur, vous avez l'habitude d'écrire des requêtes SQL plutôt que des requêtes GraphQL. Cela peut donc vous sembler un peu différent au début.

Toutefois, GraphQL est beaucoup plus concis et sûr en termes de types que le langage SQL brut. De plus, notre extension VS Code facilite l'expérience de développement, à la fois pour les requêtes et les mutations.

Pour créer une requête à l'aide de Gemini Code Assist :

Cliquez sur l'icône de l'extension Data Connect VS Code pour ouvrir sa barre latérale.
Cliquez sur Essayer Gemini avec @FirebaseDataConnect. La fenêtre de chat Gemini Code Assist s'ouvre.
Cliquez sur l'interface de chat et commencez à saisir @FirebaseDataConnect pour filtrer les commandes pertinentes.
Sélectionnez la commande /generate_operation et, à l'invite, complétez la commande en demandant à Gemini de créer une requête.

Exemple :
```
@FirebaseDataConnect /generate_operation List all movies with titles start with "A".
```
Au bout de quelques instants, une requête recommandée s'affiche. Examinez la requête.

Remarque : Si vous souhaitez modifier la requête initiale, vous pouvez exécuter une nouvelle commande @FirebaseDataConnect /generate_operation et demander à Gemini, par exemple, de filtrer les titres commençant par des chiffres. Vous pouvez également lui demander de créer plusieurs mutations avec une instruction telle que "Génère une mutation pour tous mes types de schéma".
Pour ajouter le code à queries.gql :
1. Cliquez sur le bouton Insérer à la fin du fichier.
2. Vous pouvez également insérer le code à la position de votre curseur en cliquant sur le bouton + en haut de la réponse du chat.

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

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 l'IDE, cliquez sur l'icône Firebase pour ouvrir l'interface utilisateur de l'extension VS Code Data Connect :

Cliquez sur le bouton Ajouter le SDK à l'application.
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.

Remarque : Si vous n'avez pas encore de répertoire d'application, vous pouvez en créer un et le sélectionner pour le code du SDK pour le moment, puis l'associer à votre application ultérieurement.
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é.

Utiliser les SDK pour appeler votre requête depuis une application

Vous pouvez utiliser le SDK généré par Data Connect pour implémenter un appel à votre requête ListMovies. Vous pouvez ensuite exécuter cette requête en local à l'aide de l'émulateur Data Connect.

Web

Ajoutez Firebase à votre application Web.

Dans le fichier principal de votre application React :

importer votre SDK généré ;
instrumenter votre application pour qu'elle se connecte à l'émulateur Data Connect ;
appeler les méthodes Data Connect ;

import React from 'react';
import ReactDOM from 'react-dom/client';

import { connectDataConnectEmulator } from 'firebase/data-connect';

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

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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 />);

Swift

Ajoutez Firebase à votre application iOS.
Pour utiliser le SDK généré, configurez-le comme dépendance dans Xcode.

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

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

importer votre SDK généré ;
instrumenter votre application pour qu'elle se connecte à l'émulateur Data Connect ;
appeler 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

// Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

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

Kotlin Android

Ajoutez Firebase à votre application Android.

Pour utiliser le SDK généré, configurez Data Connect comme 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")
}

Dans l'activité principale de votre application :

importer votre SDK généré ;
instrumenter votre application pour qu'elle se connecte à l'émulateur Data Connect ;
appeler 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
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }


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

Flutter

Ajoutez Firebase à votre application Flutter.
Installez la CLI flutterfire dart pub global activate flutterfire_cli.
Exécutez flutterfire configure.
Dans la fonction principale de votre application :
- importer votre SDK généré ;
- instrumenter votre application pour qu'elle se connecte à l'émulateur Data Connect ;
- appeler 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

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

Une fois la configuration locale de votre application effectuée, vous pouvez déployer votre schéma et votre connecteur dans le cloud. Vous avez besoin d'un projet avec forfait Blaze pour configurer une instance Cloud SQL.

Accédez à la section "Connecter des données" de la console Firebase et créez une instance Cloud SQL sans frais.

Remarque : Le provisionnement de votre instance Cloud SQL pour PostgreSQL peut prendre jusqu'à 15 minutes. Vous ne pourrez pas déployer votre instance tant qu'elle ne sera pas prête.
Remarque : Si vous souhaitez utiliser des clés de chiffrement gérées par le client (CMEK), assurez-vous de sélectionner Utiliser une instance Cloud SQL existante et de choisir une base de données Cloud SQL existante avec CMEK.
Dans le Terminal intégré à l'IDE, exécutez firebase init dataconnect et sélectionnez l'ID de région/service que vous venez de créer dans la console.
Sélectionnez Y lorsque le message File dataconnect/dataconnect.yaml already exists, Overwrite? (Le fichier dataconnect/dataconnect.yaml existe déjà. Voulez-vous l'écraser ?) s'affiche.
Dans la fenêtre de l'IDE, dans l'interface utilisateur de l'extension VS Code, cliquez sur le bouton Deploy to production (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 sur 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.

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

Découvrez d'autres outils d'assistance IA et des conseils pour vous aider à générer des schémas, des requêtes et des mutations. Le guide d'assistance IA explique comment configurer et utiliser notre serveur MCP avec vos IDE et présente les bonnes pratiques pour rédiger des requêtes.
En savoir plus sur le développement de schémas, de requêtes et de mutations
Découvrez comment générer des SDK clients et appeler des requêtes et des mutations à partir du code client pour Web, Android, iOS et Flutter.