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

Premiers pas avec Firebase Data Connect

Ce guide de démarrage rapide vous permet de vous familiariser avec Firebase Data Connect pour connecter vos applications Web et mobiles à une base de données PostgreSQL. Vous découvrirez comment :

Configurez votre répertoire de projet Firebase Data Connect local avec VS Code et la CLI Firebase.
Générez des schémas, des requêtes et des mutations Data Connect en fonction de vos idées d'applications en langage naturel.
Utilisez les SDK à typage fort dans vos applications pour exécuter des requêtes et des mutations Data Connect.
Provisionnez une instance Cloud SQL pour PostgreSQL, un schéma Data Connect, des requêtes et des mutations (nécessite un forfait Blaze).

Configurer le répertoire de projet en local

Vous pouvez installer des outils de développement local pour Data Connect de deux manières.

Installez les composants requis suivants :
- Visual Studio Code
- Node.js, en utilisant nvm-windows pour Windows ou nvm pour macOS ou Linux.
- La CLI Firebase
Créez un répertoire de projet et ouvrez-le dans Visual Studio Code.
Installez l'extension Firebase Data Connect depuis le VS Code Marketplace.
Cliquez sur le bouton Se connecter avec Google.
Cliquez sur le bouton Associer un projet Firebase.
Cliquez sur le bouton Run firebase init (Exécuter firebase init).
Cliquez sur le bouton Démarrer les émulateurs pour exécuter l'émulateur Data Connect avec une base de données PGlite locale.

Schéma d'avis

Firebase Data Connect utilise GraphQL pour définir votre modèle de données. La directive @table mappe un type GraphQL à une table PostgreSQL. Les champs du mappage de type correspondent aux colonnes PostgreSQL. Vous pouvez définir des relations entre les tables à l'aide de champs qui font référence à d'autres types @table, y compris des relations de type plusieurs à plusieurs à l'aide de tables de jointure avec des clés primaires composites.

Dans la configuration par défaut, vous trouverez les fichiers de schéma Data Connect dans le répertoire dataconnect/schema/. Voici deux exemples de tableaux issus du schéma de modèle de film. Votre schéma peut être différent si vous l'avez généré avec Gemini.

type Movie @table {
  # Every table has an implicit primary key field that looks something like:
  #  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

type Review @table(key: ["movie", "user"]) {
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

En savoir plus sur les schémas Data Connect

Développer des requêtes et des mutations

Firebase Data Connect utilise GraphQL pour les requêtes et les mutations. Vous les définissez dans des fichiers .gql et les appelez par leur nom depuis votre application. La syntaxe GraphQL fournit des SDK fortement typés et une API flexible pour extraire les données exactes dont votre application a besoin.

Insérer des données dans votre base de données

Une fois l'émulateur en cours d'exécution, vous pouvez l'amorcer avec des données initiales. Vous pouvez utiliser le fichier dataconnect/seed_data.gql fourni ou écrire vos propres mutations.

Utilisez le bouton Run (local) (Exécuter (local)) CodeLens dans VS Code pour exécuter les mutations et remplir votre base de données PGlite locale.

Bouton "Exécuter" CodeLens pour Firebase Data Connect

Examiner les requêtes et les mutations

Dans la configuration par défaut, vous trouverez les requêtes et mutations Data Connect dans le répertoire dataconnect/example/.

Vous pouvez interroger précisément les données relationnelles à l'aide de requêtes imbriquées.

query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
  movies {
    title imageUrl genre
    reviews_on_movie {
      rating reviewDate
      user { username }
    }
  }
}

Data Connect vous aide à créer des requêtes et des mutations sécurisées avec Firebase Auth.

Pour sécuriser votre application, les applications Web et mobiles ne peuvent accéder qu'aux requêtes et mutations Data Connect avec des directives @auth. Les requêtes et les mutations peuvent accéder de manière sécurisée à l'UID Firebase Auth à l'aide d'une expression telle que {field}_expr: "auth.uid".

mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
  review_upsert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
    }
  )
}

En savoir plus sur les requêtes Data Connect En savoir plus sur les mutations Data Connect En savoir plus sur l'authentification Data Connect

Générer des requêtes et des mutations

Vous n'avez pas besoin d'être un expert GraphQL pour utiliser Data Connect efficacement. Vous pouvez générer des requêtes et des mutations Data Connect à partir de descriptions en langage naturel.

Dans n'importe quel fichier .gql, saisissez # pour commencer un commentaire et décrire une requête ou une mutation. Ensuite, utilisez le bouton Generate/Refine Operation (Générer/Affiner l'opération) de Code Lens pour générer l'opération GraphQL.

Bouton "Générer" CodeLens pour Firebase Data Connect

Utiliser le SDK généré dans votre application

firebase init dataconnect configure automatiquement des SDK avec sûreté du typage pour les applications de votre projet. Si nécessaire, vous pouvez ajouter le SDK manuellement à l'aide du bouton Add SDK to app (Ajouter le SDK à l'application) dans l'extension VS Code ou en exécutant firebase init dataconnect:sdk.

Web

Ajoutez Firebase à votre application Web.

Dans le fichier principal de votre application React :

Importez le SDK généré :

// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@dataconnect/generated';

Instrumentez votre application pour qu'elle se connecte à l'émulateur Data Connect :

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

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

Appelez les méthodes Data Connect.

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 :

Importez le SDK Data Connect et le SDK que vous avez généré :

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

let connector = DataConnect.moviesConnector

Instrumentez votre application pour qu'elle se connecte à l'émulateur Data Connect :

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

Appelez les méthodes Data Connect :

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 :

Obtenez une instance de connecteur à partir du SDK que vous avez généré :

private val connector = com.myapplication.MoviesConnector.instance

Instrumentez votre application pour qu'elle se connecte à l'émulateur Data Connect :

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

Appelez les méthodes Data Connect.

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 :

Importez le SDK généré :

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

import 'movies_connector/movies.dart';

Instrumentez votre application pour qu'elle se connecte à l'émulateur Data Connect :

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  runApp(const MyApp());
}

Appelez les méthodes Data Connect.

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 en production

Pour déployer votre schéma, vos requêtes et vos mutations en production :

Mettez à niveau le projet Firebase pour utiliser la formule Blaze.
Cliquez sur le bouton Déployer en production dans l'extension VS Code Data Connect ou exécutez la commande suivante dans un terminal :
```
firebase deploy --only dataconnect
```
Une fois le déploiement effectué, accédez à la console Firebase pour afficher votre schéma, exécuter des requêtes et des mutations.

Conseil : Vous pouvez configurer la région Cloud SQL, le nom de l'instance et le nom de la base de données PostgreSQL dans dataconnect.yaml avant le déploiement.
Conseil : Chaque projet peut bénéficier d'une instance Cloud SQL en essai sans frais pendant trois mois. Consultez ses limites.

En savoir plus sur dataconnect.yaml En savoir plus sur le fonctionnement de Data Connect avec Cloud SQL

Étapes suivantes

Maintenant que vous avez terminé le guide de démarrage rapide, voici quelques étapes à suivre :

Explorez un dépôt d'applications de démarrage rapide et créez une application Data Connect complète en suivant notre atelier de programmation pour le Web, notre atelier de programmation pour iOS ou notre atelier de programmation pour Android.
Ajoutez des données à votre base de données, inspectez vos schémas et surveillez votre service Data Connect dans la console Firebase.
Configurez le serveur MCP Firebase avec des outils de développement optimisés par l'IA, comme Gemini Code Assist.
En savoir plus sur le développement de schémas, de requêtes et de mutations
Découvrez comment Data Connect gère le schéma PostgreSQL.
En savoir plus sur les SDK client pour Web, Android, iOS et Flutter, ainsi que sur les SDK Admin pour Node.js