Se usó la API de Cloud Translation para traducir esta página.

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 consola de Firebase y, luego, impleméntalo.
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 herramientas 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 escritura segura y úsalos en tu app.

Flujo de la consola: Usa la asistencia de IA para diseñar tu esquema y, luego, implementarlo en tu base de datos

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.
Navega a la sección Data Connect de la consola de Firebase.
Haz clic en el botón Comenzar a usar Gemini.
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.
Revisa el esquema de GraphQL y, luego, haz clic en Upgrade and deploy.
Actualiza tu proyecto al plan Blaze. Esto te permite crear una instancia de Cloud SQL para PostgreSQL.

Nota: Aunque configures la facturación en tu actualización a Blaze, no se te cobrará por el uso de Data Connect ni por la configuración predeterminada de Cloud SQL para PostgreSQL durante la prueba.
Selecciona Crear una instancia nueva de Cloud SQL. En el 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.

Nota: Si deseas usar claves de encriptación administradas por el cliente (CMEK), asegúrate de elegir Usar una instancia de Cloud SQL existente y selecciona una base de datos de Cloud SQL existente con CMEK.
Nota: Es posible que la instancia de Cloud SQL para PostgreSQL tarde hasta 15 minutos en aprovisionarse. Puedes confirmar que el flujo de configuración de Data Connect, incluido el aprovisionamiento de la base de datos, se completó con la consola de Google Cloud.

Flujo de la consola: Usa la asistencia de IA para crear operaciones para tus clientes

Una vez que se implementa tu esquema, puedes seguir los primeros pasos para que tus apps cliente puedan acceder a estos datos. 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.

Cuando se te solicite, haz clic en el botón Generar operaciones con Gemini.
Después de unos momentos, en el panel del flujo de trabajo Genera tus operaciones que aparece, revisa la lista de consultas y mutaciones que proporciona Gemini según tu esquema.
Haz clic en cada fila de operación para revisar el código GraphQL que define esa operación. Si es necesario, usa el control de la papelera para borrar las operaciones que no necesites.
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.
Sigue quitando y agregando operaciones hasta que tu conjunto de operaciones sea aceptable.
Para implementar esta lista de operaciones como un conjunto de conectores a los que se puede llamar desde el cliente, elige el nombre del conector y, luego, haz clic en Implementar.

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

Si 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ó y se implementó una base de datos de PostgreSQL con las tablas correspondientes.

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

Abre la pestaña Datos.
Haz clic en el ícono Ayúdame a escribir GraphQL pen_spark y, en el cuadro que aparece, escribe tu entrada.

Nota: Elige una entidad simple y básica, como Product o Account, para completar con datos.

Por ejemplo:
```
Add data for three sample products to my app.
```
Haz clic en Generar. Se devuelve la mutación.
Revise el resultado. Si es necesario, haz clic en Editar para definir mejor la instrucción y, luego, en Volver a generar.
Luego, haz clic en Insertar para insertar la mutación en el editor de datos.
Haz clic en Ejecutar.

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

Repite los pasos anteriores con Ayúdame a escribir GraphQL pen_spark para crear una consulta.
En el cuadro que aparece, escribe tu entrada.

Por ejemplo:
```
Query data for all sample products in my app.
```
Haz clic en Generar y, luego, en Ejecutar.

Flujo local: Elige herramientas de desarrollo

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

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

Requisitos previos

Para usar esta guía de inicio rápido, necesitarás lo siguiente.

Visual Studio Code
Una instalación de Node.js con nvm-windows para Windows o nvm para macOS o Linux
Un proyecto de Firebase Si aún no creaste uno, hazlo en la Firebase console.

Flujo local: Configura el entorno de desarrollo

Crea un directorio nuevo para tu proyecto local.
Abre VS Code en el directorio nuevo.
Instala la extensión de Firebase Data Connect desde Visual Studio Code Marketplace.

Flujo local: Configura tu proyecto local

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

Haz clic en el botón Acceder con Google.
Haz clic en el botón Conectar un proyecto de Firebase y selecciona el proyecto que creaste anteriormente en la consola.
Haz clic en el botón Run firebase init y completa el flujo.

Nota: firebase init sincronizará tu proyecto local con los recursos implementados en la consola de Firebase. Es importante destacar que el esquema de GraphQL y el código del conector (consultas y mutaciones) se descargarán en tu proyecto local para que puedas continuar con el desarrollo.

Haz clic en el botón Start emulators.

Nota: En la terminal integrada, verifica que se inicien los emuladores configurados. Una vez que se ejecuten, deberías ver que la IU de la extensión se actualiza con los detalles del emulador.

Flujo local: Busca tu esquema y conector en el entorno local

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

Sincroniza el esquema que implementaste.
- Busca tu esquema, que se encuentra en el directorio de tu proyecto de Firebase, en el archivo /dataconnect/schema/schema.gql.
Sincroniza las consultas y las mutaciones en el conector que implementaste.
- Busca tu conector: Las operaciones se encuentran en el directorio de tu 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. Un tipo Movie probablemente tendría 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 generado por 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 se asigna 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 aparecen botones de CodeLens sobre los tipos de GraphQL en /dataconnect/schema/schema.gql. Al igual que en la consola, puedes crear una mutación para agregar datos a tu base de datos de producción.

Para agregar datos a una tabla de forma local, haz lo siguiente:

En schema.gql, haz clic en el botón Agregar datos que se encuentra sobre la declaración de uno de tus tipos (como Movie, Product o Account, según la naturaleza de tu app).
Se agrega un archivo nuevo, <type>_insert.qgl, a tu directorio de trabajo, como Movie_insert.gql o Product_insert.gql. Codifica de forma fija los datos en los campos para ese tipo.
Haz clic en el botón Ejecutar (producción).
Repite los pasos anteriores para agregar un registro a otras tablas.

Para verificar rápidamente que se agregaron los datos, haz lo siguiente:

De vuelta en schema.gql, haz clic en el botón Read data que se encuentra sobre la declaración de tipo.
En el archivo <type>_read.gql resultante, como Product_read.gql, haz clic en el botón Ejecutar (producción) 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 la extensión de VS Code para generar SDKs cliente y comenzar a implementar llamadas a consultas y mutaciones en apps para iOS, Android, la Web y Flutter.

En la IU de la extensión, haz clic en el botón Add SDK to app.
En el diálogo que aparece, selecciona un directorio que contenga el código de tu app. Allí se generará y guardará el código del SDK de Data Connect.

Nota: Si aún no tienes un directorio de la app, puedes crear y seleccionar uno nuevo para el código del SDK por ahora, y vincularlo a tu app más adelante.
Selecciona la plataforma de tu app y, luego, observa que el código del SDK se genera de inmediato en el directorio seleccionado.

Flujo local: Usa los SDKs para llamar a tu búsqueda desde una app

Anteriormente, implementaste tu esquema y tus operaciones en la consola de Firebase. Para llamar a operaciones desde tu app, puedes usar el SDK que Data Connect generó para implementar una llamada a tu consulta de ListMovies.

Web

Agrega Firebase a tu app web.

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

Agrega Firebase a tu app para iOS.
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.

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 Android

Agrega Firebase a tu app para Android.

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

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

Agrega Firebase a tu app de Flutter.
Instala la CLI de FlutterFire dart pub global activate flutterfire_cli.
Ejecuta flutterfire configure.
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:

Descubre más herramientas de asistencia de IA y orientación para ayudarte a generar esquemas, consultas y mutaciones. La guía de asistencia de IA explica cómo configurar y usar nuestro servidor de MCP con tus IDE y las prácticas recomendadas para escribir instrucciones.
Obtén más información sobre el desarrollo de esquemas, consultas y mutaciones
Obtén información para generar SDKs cliente y llamar a consultas y mutaciones desde el código cliente para Web, Android, iOS y Flutter.