Firebase is back at Cloud Next on April 9 - 11. Register now.

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. Vous découvrirez comment :

Ajoutez Firebase Data Connect à votre projet Firebase.
Provisionnez une instance Cloud SQL pour votre application.
Configurez un environnement de développement incluant une extension Visual Studio Code pour utiliser une instance de production.
Nous vous montrerons ensuite comment :
- Créer un schéma pour une application de films
- Définir les requêtes et mutations qui seront utilisées dans votre application
- Tester vos requêtes et vos mutations avec des exemples de données
- 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.

Créer un projet Firebase et une base de données Cloud SQL

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 et suivez la procédure de configuration du produit.
Passez à la formule Blaze. Vous pouvez ainsi créer une instance Cloud SQL pour PostgreSQL.

Remarque :Même si vous configurez la facturation lors de la mise à niveau de Blaze, vous ne serez pas facturé pour l'utilisation de Data Connect ni de la configuration par défaut de Cloud SQL pour PostgreSQL pendant la version Preview.
Sélectionnez un emplacement pour votre base de données Cloud SQL pour PostgreSQL.

Remarque :Si vous souhaitez utiliser des clés de chiffrement gérées par le client (CMEK), veillez à sélectionner Utiliser une instance Cloud SQL existante et à choisir une base de données Cloud SQL existante avec CMEK.
Notez les noms et les ID du projet, du service et de la base de données pour les confirmer plus tard.
Suivez les autres étapes 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 un flux de développement

Data Connect vous propose deux méthodes pour installer des outils de développement.

Configurer l'environnement de développement

Créez un répertoire pour votre projet local.
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.

Remarque:Si vous avez déjà installé la version de bureau de VS Code, le script l'ouvre automatiquement.
Remarque:Si le script échoue, suivez la procédure d'installation manuelle.

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

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:

Cliquez sur le bouton Se connecter avec Google.
Cliquez sur le bouton Connecter 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), puis suivez la procédure.
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 sur 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
}

MovieMetadata

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

Déployer votre schéma en production

Vous devez déployer votre schéma avant de continuer.

Dans l'interface utilisateur de l'extension, sous le panneau Firebase Data Connect, cliquez sur Déployer en production.

Une fois votre schéma déployé dans votre base de données de production, vous devriez pouvoir l'afficher dans la console Firebase.

Ajouter des données à vos tableaux

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

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 quatre champs.
Cliquez sur le bouton Run (Production) (Exécuter (production)).
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:

De retour dans schema.gql, cliquez sur le bouton Lire les données au-dessus de la déclaration de type Movie.
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 code 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 à proximité.

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

Générer des SDK

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

Utiliser les SDK pour appeler votre requête à partir d'une application

Maintenant que votre schéma 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

Ajoutez Firebase à votre application Web.

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

Ajoutez Firebase à votre application iOS.
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é.

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

Ajoutez Firebase à votre application Android.

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

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

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