Comienza a usar Firebase Data Connect

En esta guía de inicio rápido, aprenderás a compilar Firebase Data Connect en tu aplicación con una instancia de SQL de producción.

En la consola de Firebase, harás lo siguiente:

  • Agrega Firebase Data Connect a tu proyecto de Firebase.
  • Crea un esquema para una app en la consola de Firebase con Diagrama asistido y, luego, impleméntalo.
  • Aprovisiona una instancia de Cloud SQL para tu app.
  • Con Gemini Code Assist, completa tu base de datos con datos de muestra.

Luego, en tu entorno de desarrollo local, harás lo siguiente:

  • Configura una herramienta de desarrollo, incluida una extensión de Visual Studio Code, para trabajar con tu instancia de producción.
  • Sincroniza tu entorno local con los recursos que creaste en la consola.
  • Usa las herramientas de extensión para ayudarte a implementar una búsqueda que se usará en tu app.
  • Genera SDKs fuertemente tipificados y úsalo en tu app.
  • Implementa tu esquema, consulta y datos finales en la nube.

Flujo de consola: Diseña tu esquema y, luego, impleméntalo en tu base de datos

  1. Si aún no lo hiciste, crea un proyecto de Firebase.
    1. En la consola de Firebase, haz clic en Agregar proyecto y, luego, sigue las instrucciones que aparecen en pantalla.
  2. Navega a la sección Data Connect de la consola de Firebase.
  3. Haz clic en el botón Comenzar a usar Gemini.
  4. En el panel de flujo de trabajo Schema Generator que aparece, describe una app para que Gemini pueda ayudarte a crear un esquema de GraphQL.
  5. Revisa el esquema de GraphQL y, luego, haz clic en Actualizar e implementar.

  6. Actualiza tu proyecto al plan Blaze. Esto te permite crear una instancia de Cloud SQL para PostgreSQL.

  7. Selecciona Crear una nueva instancia de Cloud SQL. En el cuadro de diálogo que aparece, selecciona una ubicación y un nombre para tu base de datos de Cloud SQL para PostgreSQL.

    Se implementa el esquema de tu app, junto con una base de datos de PostgreSQL correspondiente a ese esquema.

Flujo de consola: Usa Gemini en Firebase para crear una mutación y completar tu base de datos

Cuando completaste el paso anterior, creaste un esquema Data Connect que consta de tipos de entidades relevantes y lo implementaste en producción, lo que significa que también se creó e implementó una base de datos de PostgreSQL con las tablas correspondientes.

Para propagar tu base de datos, puedes usar Gemini en Firebase para ayudarte a tomar tus entradas de lenguaje natural y definir una mutación de GraphQL para actualizar una de tus tablas y una consulta para confirmar tus actualizaciones.

  1. Abre la pestaña Datos.

  2. Haz clic en el ícono Ayúdame a escribir GraphQL pen_spark y, en el cuadro que aparece, escribe tu entrada.

    Por ejemplo:

    Add data for three sample products to my app.

  3. Haz clic en Generar. Se muestra la mutación.

  4. Revise el resultado. Si es necesario, haz clic en Editar para definir mejor la instrucción y haz clic en Volver a generar.

  5. A continuación, haz clic en Insertar para insertar la mutación en el editor de datos.

  6. Haz clic en Ejecutar.

Cuando ejecutas la mutación, los datos se escriben en la tabla aplicable de tu base de datos de PostgreSQL. Puedes crear una consulta en la consola para ver los datos almacenados:

  1. Repite los pasos anteriores y usa Ayúdame a escribir GraphQL pen_spark para crear una consulta.

  2. En el cuadro que aparece, escribe tu entrada.

    Por ejemplo:

    Query data for all sample products in my app.

  3. Haz clic en Generate y, luego, en Run.

Flujo local: Elige las herramientas de desarrollo

Ahora que tienes datos en la base de datos implementada, puedes continuar con el desarrollo de tu esquema y conectores en tu entorno de desarrollo local.

Primero, debes configurar un entorno local. Data Connect te ofrece dos maneras de instalar herramientas de desarrollo.

Flujo local: Configura el entorno de desarrollo

  1. Crea un directorio nuevo para tu proyecto local.

  2. Ejecuta el siguiente comando en el directorio nuevo que creaste.

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

    Esta secuencia de comandos intenta configurar el entorno de desarrollo por ti y, luego, iniciar un IDE basado en el navegador. Este IDE proporciona herramientas, incluida una extensión precompilada de VS Code, para ayudarte a administrar tu esquema y definir consultas y mutaciones que se usarán en tu aplicación, y generar SDKs fuertemente tipados.

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

Flujo local: Configura el directorio de tu proyecto

Para configurar tu proyecto local, inicializa el directorio del proyecto. En la ventana del IDE, en el panel izquierdo, haz clic en el ícono de Firebase para abrir la IU de la extensión de VS Code de Data Connect:

  1. Haz clic en el botón Acceder con Google.
  2. Haz clic en el botón Connect a Firebase project y selecciona el proyecto que creaste antes en la consola.

  3. Haz clic en el botón Run firebase init y completa el flujo.

  4. Haz clic en el botón Start emulators.

Flujo local: Encuentra tu esquema en el entorno local

El paso firebase init de la sección anterior sincronizó el esquema que implementaste desde la consola a tu entorno de desarrollo local.

Busca tu esquema: se encuentra en el directorio de tu proyecto de Firebase, en el archivo /dataconnect/schema/schema.gql.

Flujo local: Trabaja con tu esquema

Ejemplo de esquema: Película

En Data Connect, los campos de GraphQL se asignan a columnas. Es probable que un tipo Movie tenga id, title, imageUrl y genre. Data Connect reconoce los tipos de datos primitivos String y 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
}

Ejemplo de esquema de tabla 1:1: MovieMetadata

Con las películas, puedes modelar los metadatos de las películas.

Por ejemplo, en schema.gql, puedes agregar el siguiente fragmento o revisar el código que genera 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
}

Ten en cuenta que el campo movie está asignado a un tipo de Movie. Data Connect comprende que esta es una relación entre Movie y MovieMetadata, y la administrará por ti.

Obtén más información sobre los esquemas de Data Connect en la documentación

Flujo local: Agrega más datos a tus tablas

En el panel del editor del IDE, puedes ver que los botones de CodeLens aparecen sobre los tipos de GraphQL en /dataconnect/schema/schema.gql. Al igual que lo hiciste en la consola, puedes crear una mutación para agregar datos a tu base de datos de producción.

Cuando trabajas de forma local, para agregar datos a una tabla, sigue estos pasos:

  1. En schema.gql, haz clic en el botón Add data sobre la declaración de uno de tus tipos (como Movie, Product, Account, según la naturaleza de tu app).
    Botón para agregar datos de Code Lens para Firebase Data Connect
  2. Se agrega un archivo nuevo, <type>_insert.qgl, a tu directorio de trabajo, como Movie_insert.gql o Product_insert.gql. Codificación de datos de forma fija en los campos de ese tipo
  3. Haz clic en el botón Run (Production).
    Botón Ejecutar de Code Lens para Firebase Data Connect
  4. Repite los pasos anteriores para agregar un registro a otras tablas.

Para verificar rápidamente si se agregaron los datos, sigue estos pasos:

  1. En schema.gql, haz clic en el botón Read data sobre la declaración de tipo.
  2. En el archivo <type>_read.gql resultante, como Product_read.gql, haz clic en el botón Run (Production) para ejecutar la consulta.

Obtén más información sobre las mutaciones de Data Connect en la documentación

Flujo local: Define tu consulta

Ahora viene la parte divertida: las consultas. Como desarrollador, estás acostumbrado a escribir consultas SQL en lugar de consultas GraphQL, por lo que esto puede parecer un poco diferente al principio. Sin embargo, GraphQL es mucho más conciso y seguro de tipo que SQL sin procesar. Además, nuestra extensión de VS Code facilita la experiencia de desarrollo.

Para implementar una consulta, puedes adaptar una generada con nuestro CodeLens:

  1. En /dataconnect/schema/schema.gql, sobre un tipo (Movie, Product, Account, etcétera), haz clic en el botón CodeLens Read data.
  2. En el archivo <type>_read.gql resultante, haz clic en el botón Run (Production) para probar la consulta.
  3. Copia la consulta que funciona en /dataconnect/connector/queries.gql.

  4. Para que esta consulta se pueda implementar, declárale un nombre único.

    Por ejemplo, en el siguiente ejemplo genérico, query_name podría ser ListMovies, ListProducts o 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>
  }
}

Ejecuta la consulta con el botón CodeLens cercano.

Obtén más información sobre las consultas de Data Connect en la documentación

Flujo local: Genera SDKs

  1. Haz clic en el botón Add SDK to app.

  2. En el diálogo que aparece, selecciona un directorio que contenga el código de tu app. Se generará y guardará allí el código del SDK de Data Connect.

  3. Selecciona la plataforma de tu app y, luego, ten en cuenta que el código del SDK se genera de inmediato en el directorio que seleccionaste.

Flujo local: Implementa tu esquema y consulta en producción

Completaste una iteración de desarrollo. Ahora puedes implementar tu esquema y consultas en el servidor con la IU de la extensión de Firebase o Firebase CLI, tal como lo hiciste con tu esquema.

En la ventana del IDE, en la IU de la extensión de VS Code, haz clic en el botón Deploy to production.

Una vez que se implemente, ve a la consola de Firebase para verificar que las actualizaciones del esquema (si corresponde) y las operaciones se hayan subido a la nube. Debería poder ver el esquema y ejecutar tus operaciones también en la consola. La instancia de Cloud SQL para PostgreSQL se actualizará con el esquema y los datos generados y, luego, se implementará.

Obtén más información sobre el uso del emulador de Data Connect en la documentación

Flujo local: Usa los SDKs para llamar a tu consulta desde una app

Ahora que tu esquema actualizado (si corresponde) y tu consulta se implementaron en producción, puedes usar el SDK que generó Data Connect para implementar una llamada a tu consulta ListMovies.

Web Swift Kotlin para Android Flutter
  1. Agrega Firebase a tu app web.

  2. En el archivo principal de tu app de React, haz lo siguiente:

    • Importa el SDK generado
    • Llama a los métodos 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. Agrega Firebase a tu app para iOS.

  2. Para usar el SDK generado, configúralo como una dependencia en Xcode.

    En la barra de navegación superior de Xcode, selecciona File > Add Package Dependencies > Add Local y elige la carpeta que contiene el Package.swift generado.

  3. En el delegado principal de tu app, haz lo siguiente:

    • Importa el SDK generado
    • Llama a los métodos 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. Agrega Firebase a tu app para Android.

  2. Para usar el SDK generado, configura Data Connect como una dependencia en Gradle.

    Actualiza plugins y dependencies en tu 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. En la actividad principal de tu app, haz lo siguiente:

    • Importa el SDK generado
    • Llama a los métodos 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. Agrega Firebase a tu app de Flutter.
  2. Instala la CLI de flutterfire dart pub global activate flutterfire_cli.
  3. Ejecuta flutterfire configure.
  4. En la función principal de tu app, haz lo siguiente:
    • Importa el SDK generado
    • Llama a los métodos 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();
            }),
      )
    ])));
  }
}

Próximos pasos

Revisa tu proyecto implementado y descubre más herramientas:

  • Agrega datos a tu base de datos, inspecciona y modifica tus esquemas, y supervisa tu servicio de Data Connect en la consola de Firebase.

Accede a más información en la documentación. Por ejemplo, como completaste la guía de inicio rápido, puedes hacer lo siguiente: