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

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 à l'aide de la génération de schémas assistée par l'IA dans la console Firebase, puis déployez-le.
Provisionnez une instance Cloud SQL pour votre application.
Avec Gemini dans Firebase, insérez des exemples de données dans votre base de données.
Créez des requêtes et des mutations avec la génération d'opérations assistée par l'IA, que vous pouvez déployer et utiliser pour développer du code client en local.

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 éléments que vous avez créés dans la console.
Générez des SDK à typage fort et utilisez-les dans votre application.

Flux de la console : utilisez l'assistance IA pour concevoir votre schéma, puis déployez-le dans votre base de données.

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.
Accédez à la section Data Connect de la console Firebase.
Cliquez sur le bouton Premiers pas avec Gemini.
Dans le panneau du workflow Générateur de schéma qui s'affiche, décrivez une application pour que Gemini puisse vous aider à créer un schéma GraphQL.
Examinez le schéma GraphQL, puis cliquez sur Mettre à niveau et déployer.
Mettez à niveau votre projet pour passer à la formule Blaze. Cela vous permet de créer une instance Cloud SQL pour PostgreSQL.

Remarque : Bien que vous ayez configuré la facturation lors de la mise à niveau vers Blaze, l'utilisation de Data Connect ou de la configuration Cloud SQL pour PostgreSQL par défaut ne vous sera pas facturée pendant l'essai.
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é, ainsi qu'une base de données PostgreSQL correspondant à ce schéma.

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.
Remarque : L'approvisionnement de votre instance Cloud SQL pour PostgreSQL peut prendre jusqu'à 15 minutes. Vous pouvez vérifier que le processus de configuration de Data Connect, y compris le provisionnement de la base de données, est terminé à l'aide de la console Google Cloud.

Flux de la console : utiliser l'assistance IA pour créer des opérations pour vos clients

Une fois votre schéma déployé, vous pouvez commencer à rendre ces données accessibles depuis vos applications clientes en créant un connecteur de requêtes et de mutations à déployer sur le backend, puis à appeler depuis les clients.

Nos outils d'assistance IA sont là pour vous aider.

Lorsque vous y êtes invité, cliquez sur le bouton Générer des opérations avec Gemini.
Après quelques instants, dans le panneau du workflow Générer vos opérations qui s'affiche, examinez la liste des requêtes et des mutations fournies par Gemini en fonction de votre schéma.
Cliquez sur chaque ligne d'opération pour examiner le code GraphQL qui définit cette opération. Si nécessaire, utilisez la corbeille pour supprimer les opérations dont vous n'avez pas besoin.
Pour ajouter des opérations, cliquez sur le bouton + Ajouter. Puis :
1. Décrivez votre opération en langage naturel.
  
  Exemple :
```
List all products
```
2. Examinez le code GraphQL généré.
3. Si l'opération est acceptable, cliquez sur Insérer pour l'ajouter à votre liste d'opérations.
Continuez à supprimer et à ajouter des opérations jusqu'à ce que votre ensemble d'opérations soit acceptable.
Pour déployer cette liste d'opérations en tant qu'ensemble de connecteurs appelables par le client, choisissez le nom du connecteur, puis cliquez sur Déployer.

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

En suivant les étapes précédentes, vous avez créé un schéma Data Connect composé de types d'entités pertinents et vous 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 remplir votre base de données, vous pouvez utiliser Gemini dans Firebase pour vous aider à définir une mutation GraphQL à partir de vos entrées en langage naturel afin de mettre à jour l'une de vos tables, ainsi qu'une requête pour confirmer vos modifications.

Ouvrez l'onglet Données.
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.

Remarque : Choisissez une entité simple et de base, comme Product ou Account, à remplir avec des données.

Exemple :
```
Add data for three sample products to my app.
```
Cliquez sur Générer. La mutation est renvoyée.
Examinez le résultat. Si nécessaire, cliquez sur Modifier pour affiner la requête, puis sur Régénérer.
Cliquez ensuite sur Insérer pour insérer la mutation dans l'éditeur de données.
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 :

Répétez les étapes précédentes en utilisant M'aider à écrire des requêtes GraphQL pen_spark pour créer une requête.
Dans la boîte de dialogue qui s'affiche, saisissez votre entrée.

Exemple :
```
Query data for all sample products in my app.
```
Cliquez sur Générer, puis sur Exécuter.

Flux local : choisir les outils de développement

Maintenant que vous avez des données dans votre base de données déployée et que vous avez déployé un connecteur, vous pouvez continuer à développer votre schéma et vos connecteurs dans votre environnement de développement local.

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

Flux local : configurer l'environnement de développement

Créez un répertoire pour votre projet local.
Pour configurer un environnement de développement Data Connect et un IDE basé sur un navigateur, et générer des SDK clients, exécutez la commande suivante dans le nouveau répertoire que vous avez créé.
```
  curl -sL https://firebase.tools/init/dataconnect | editor=true bash
```
Ce script tente d'effectuer l'installation. L'IDE installé fournit des outils, y compris des extensions VS Code pré-intégrées, 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.

Le script synchronise également les composants que vous avez créés dans la console Firebase avec votre répertoire local et génère des SDK client pour toutes les applications que vous avez enregistrées pour votre projet.

Flux local : configurer votre projet local

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

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

L'option d'installation automatique pour macOS ou Linux que vous avez utilisée pour synchroniser les éléments avec un projet existant a les effets suivants :

Il synchronise le schéma que vous avez déployé.
- Recherchez votre schéma : il se trouve dans le fichier /dataconnect/schema/schema.gql du répertoire de votre projet Firebase.
Il synchronise les requêtes et les mutations dans le connecteur que vous avez déployé.
- Recherchez votre connecteur : les opérations se trouvent dans le répertoire de votre projet Firebase, dans le répertoire /dataconnect/connector/.

Flux local : comprendre votre schéma

Exemple de schéma : film

Dans Data Connect, les champs GraphQL sont mappés aux colonnes. Un type Movie comporterait 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 de table 1:1 : MovieMetadata

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

Par exemple, dans schema.gql, vous pouvez ajouter l'extrait 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é à 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

Flux local : ajouter des données à vos tables

Dans le panneau de l'éditeur de l'IDE, vous pouvez voir des boutons CodeLens apparaître au-dessus des types GraphQL dans /dataconnect/schema/schema.gql. Comme 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 :

Dans schema.gql, cliquez sur le bouton Ajouter des données au-dessus de la déclaration pour l'un de vos types (comme Movie, Product ou Account, selon la nature de votre application).
Un nouveau fichier, <type>_insert.qgl, est ajouté à votre répertoire de travail, tel que Movie_insert.gql ou Product_insert.gql. Ajoutez des données en dur dans les champs pour ce type.
Cliquez sur le bouton Exécuter (production).
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 :

De retour dans schema.gql, cliquez sur le bouton Read data (Lire les données) au-dessus de la déclaration de type.
Dans le fichier <type>_read.gql obtenu, comme Product_read.gql, cliquez sur le bouton Exécuter (production) pour exécuter la requête.

En savoir plus sur les mutations Data Connect dans la documentation

Flux local : générer des SDK

Vos opérations de schéma et de connecteur sont synchronisées localement.

Vous pouvez désormais utiliser l'extension VS Code pour générer des SDK client et commencer à implémenter des appels à des requêtes et des mutations dans les applications iOS, Android, Web et Flutter.

Dans l'interface utilisateur de l'extension, cliquez sur le bouton Add SDK to app (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é.

Flux local : utiliser les SDK pour appeler votre requête depuis une application

Vous avez déjà déployé votre schéma et vos opérations dans la console Firebase. Pour appeler des opérations depuis votre application, vous pouvez utiliser le SDK que Data Connect a généré pour implémenter un appel à votre requête ListMovies.

Web

Ajoutez Firebase à votre application Web.

Dans le fichier principal de votre application React :

importer votre SDK généré ;
appeler 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 />);

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

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

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é ;
- 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,
  );
  
  
  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 :

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.