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 con la generación de esquemas asistida por IA en la console de Firebase y, luego, impleméntala.
  • Aprovisiona una instancia de Cloud SQL para tu app.
  • Con Gemini en Firebase, completa tu base de datos con datos de muestra.
  • Crea consultas y mutaciones con la generación de operaciones asistida por IA, que puedes implementar y usar para desarrollar código de cliente de forma local.

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.
  • Genera SDKs con tipado estricto y úsalo en tu app.

Flujo de consola: Usa la asistencia de IA para diseñar 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 la consola: Usa la asistencia de IA para crear operaciones para tus clientes

Una vez que se implemente tu esquema, puedes dar los primeros pasos para que estos datos estén disponibles y se puedan acceder a ellos desde tus apps de cliente. Para ello, crea un conector de consultas y mutaciones para implementar en el backend y, luego, llama desde los clientes.

Nuestras herramientas de asistencia con IA están aquí para ayudarte.

  1. Cuando se te solicite, haz clic en el botón Generate operations with Gemini.

  2. Después de unos momentos, en el panel de flujo de trabajo Generate your operations que aparece, revisa la lista de consultas y mutaciones que proporciona Gemini según tu esquema.

  3. Haz clic en cada fila de operación para revisar el código de GraphQL que define esa operación. Si es necesario, usa el control de papelera para borrar las operaciones que no necesites.

  4. Para agregar operaciones, haz clic en el botón + Agregar. Luego, haz lo siguiente:

    1. Describe tu operación en lenguaje natural.

      Por ejemplo:

      List all products

    2. Revisa el GraphQL generado.

    3. Si la operación es aceptable, haz clic en Insertar para agregarla a tu lista de operaciones.

  5. Sigue quitando y agregando operaciones hasta que el conjunto de operaciones sea aceptable.

  6. Para implementar esta lista de operaciones como un conjunto de conectores que se puedan llamar desde el cliente, elige el nombre del conector y, luego, haz clic en Implementar.

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

Cuando completaste los pasos anteriores, 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 y que implementaste un conector, 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, incluidas extensiones precompiladas 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 y conector en el entorno local

El paso firebase init de la sección anterior sincroniza los recursos con tu entorno de desarrollo local:

  • Sincroniza el esquema que implementaste.
    • Busca tu esquema: se encuentra en el directorio de tu proyecto de Firebase, en el archivo /dataconnect/schema/schema.gql.
  • Sincroniza las consultas y mutaciones en el conector que implementaste
    • Busca tu conector: las operaciones se encuentran en el directorio del proyecto de Firebase, en el directorio /dataconnect/connector/.

Flujo local: Comprende 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 administrará esta relación 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 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 fijos 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, haz lo siguiente:

  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: Genera SDKs

Tus operaciones de esquema y conector se sincronizan de forma local. Ahora puedes usar herramientas locales para generar SDKs de cliente y comenzar a implementar llamadas a consultas y mutaciones en apps para iOS, Android, la Web y Flutter.

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

  2. En el diálogo que aparece, selecciona un directorio que contenga código para 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: 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

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

Swift

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

Kotlin para Android

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

Flutter

  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: