Comienza a usar Firebase Data Connect

En esta guía de inicio rápido, se explica cómo comenzar a usar Firebase Data Connect para conectar tus apps para dispositivos móviles y web a una base de datos de PostgreSQL. Harás lo siguiente:

• Configurarás tu directorio de proyecto local de Firebase Data Connect con VS Code y Firebase CLI.
• Generarás Data Connect esquemas, consultas y mutaciones basados en tus ideas de apps en lenguaje natural.
• Usarás los SDKs con seguridad de tipos en tus apps para ejecutar Data Connect consultas y mutaciones.
• Aprovisionarás una instancia de Cloud SQL para PostgreSQL, un esquema Data Connect, consultas y mutaciones.

Configura el directorio del proyecto local

Puedes instalar herramientas de desarrollo local para Data Connect de dos maneras.

Instalación automática (macOS o Linux) Instalación manual (Windows)

1. En un directorio de proyecto, ejecuta el siguiente comando:

   La secuencia de comandos instala Firebase CLI y la extensión de Data Connect VS Code, y te guía por firebase init dataconnect para configurar tu proyecto. Si no tienes instalado VS Code para computadoras, la secuencia de comandos lo abrirá en un navegador.

   curl -sL https://firebase.tools/init/dataconnect | editor=true bash

2. Para abrir la pantalla de la extensión de Data Connect VS Code, haz clic en el ícono de Firebase en el panel izquierdo de Visual Studio Code.

3. Haz clic en Iniciar emuladores para ejecutar el emulador con una base de datos local de PGlite.

Revisa el esquema

Firebase Data Connect usa GraphQL para definir tu modelo de datos. La @table directiva asigna un tipo de GraphQL a una tabla de PostgreSQL. Los campos del tipo se asignan a las columnas de PostgreSQL. Puedes definir relaciones entre tablas con campos que hagan referencia a otros tipos de @table, incluidas las relaciones de varios a varios con tablas de unión con claves primarias compuestas.

En la configuración predeterminada, puedes encontrar los archivos de esquema Data Connect en el directorio dataconnect/schema/. A continuación, se muestran dos tablas de ejemplo del esquema de plantilla de película. Tu esquema puede ser diferente si usaste Gemini para generarlo.

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

Obtén más información sobre los esquemasData Connect

Desarrolla consultas y mutaciones

Firebase Data Connect usa GraphQL para consultas y mutaciones. Los defines en archivos .gql y los llamas por su nombre desde tu app. La sintaxis de GraphQL proporciona SDKs con seguridad de tipos y una API flexible para recuperar los datos exactos que necesita tu app.

Propaga datos en tu base de datos

Con el emulador en ejecución, puedes propagarlo con datos iniciales. Puedes usar el archivo dataconnect/seed_data.gql proporcionado o escribir tus propias mutaciones.

Usa el botón Ejecutar (local) de Code Lens en VS Code para ejecutar las mutaciones y propagar tu base de datos local de PGlite.

Revisa las consultas y mutaciones

En la configuración predeterminada, puedes encontrar las consultas y mutaciones de Data Connect en dataconnect/example/ directorio.

Puedes consultar datos relacionales con precisión con consultas anidadas.

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 te ayuda a compilar consultas y mutaciones seguras con Firebase Authentication.

Para mantener la seguridad de tu app, las apps para dispositivos móviles y web solo pueden acceder a Data Connect consultas y mutaciones con @auth directivas. Las consultas y mutaciones pueden acceder de forma segura al UID de Firebase Authentication con una expresión como {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
    }
  )
}

Obtén más información sobre las consultas de Data Connect Obtén más información sobre las mutaciones de Data Connect Obtén más información sobre la autenticación de Data Connect

Genera consultas y mutaciones

No necesitas ser un experto en GraphQL para usar Data Connect de manera eficaz. Puedes generar consultas y mutaciones a partir de descripciones en lenguaje natural.Data Connect

En cualquier archivo .gql, escribe # para iniciar un comentario y describir una consulta o mutación. Luego, usa el botón Generar/Refinar operación de Code Lens para generar la operación de GraphQL.

**Nota:** La generación de operaciones también está disponible en Firebase console y en el servidor de MCP de Firebase.

Usa el SDK generado en tu app

firebase init dataconnect configura automáticamente SDKs con seguridad de tipos para las apps de tu proyecto. Si es necesario, puedes agregar el SDK de forma manual con el botón Agregar SDK a la app en la extensión de Data Connect VS Code o ejecutando firebase init dataconnect:sdk.

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:

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

   • Instrumenta tu app para conectarte al Data Connect emulador:

   import { connectDataConnectEmulator } from 'firebase/data-connect';
   
   const dataConnect = getDataConnect(connectorConfig);
   connectDataConnectEmulator(dataConnect, 'localhost', 9399);
   

   • Llama a los métodos de 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 />);
   

   Nota: En este ejemplo, la app de React llama a tu consulta con el SDK de Firebase JavaScript. Data Connect también proporciona vinculaciones especiales para trabajar con Data Connect de forma asíncrona en React.

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 archivo Package.swift generado.

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

   • Importa el SDK Data Connect y el SDK generado:

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

   • Instrumenta tu app para conectarte al Data Connect emulador:

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

   • Llama a los métodos: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

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

   • Obtén una instancia de conector del SDK generado:

   private val connector = com.myapplication.MoviesConnector.instance
   

   • Instrumenta tu app para conectarte al Data Connect emulador:

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

   • Llama a los métodos de 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

1. Agrega Firebase a tu Flutter app.
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:

   // Generated queries.
   // Update as needed with the path to your generated SDK
   
   import 'movies_connector/movies.dart';
   

   • Instrumenta tu app para conectarte al Data Connect emulador:

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

   • Llama a los métodos de 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();
               }),
         )
       ])));
     }
   }
   

Implementar en producción

Para implementar tu esquema, consultas y mutaciones en producción, haz lo siguiente:

1. Revisa la información sobre los precios y la prueba sin costo en la página Precios. Es posible que tu proyecto cumpla con los requisitos para una de las Firebase Data Connect opciones de prueba.

2. Haz clic en el botón Implementar en producción en la extensión de Data Connect VS Code o ejecuta lo siguiente en una terminal:

   firebase deploy --only dataconnect
   

   Después de la implementación, visita el Firebase console para ver tu esquema y ejecutar consultas y mutaciones.

   Nota: Puedes configurar la región de Cloud SQL, el nombre de la instancia y el nombre de la base de datos de PostgreSQL en dataconnect.yaml antes de la implementación.

Obtén más información sobre dataconnect.yaml Obtén más información sobre cómo funciona Data Connect con Cloud SQL

Próximos pasos

Ahora que completaste la guía de inicio rápido, estos son algunos pasos que puedes seguir:

• Explora un repositorio de apps de inicio rápido y compila una app con todas las funciones Data Connect siguiendo nuestro codelab para la Web, codelab para iOS, o codelab para Android.
• Agrega datos a tu base de datos, inspecciona tus esquemas y supervisa tu servicio de Data Connect en la Firebase consola.
• Configura el servidor de MCP de Firebase con herramientas de desarrollo potenciadas por IA, como Gemini Code Assist.
• Obtén más información sobre el desarrollo de esquemas, consultas y mutaciones.
• Obtén más información sobre cómo Data Connect administra el esquema de PostgreSQL.
• Obtén más información sobre los SDKs de cliente para la Web, Android, iOS y Flutter, así como los SDKs de Admin para Node.js.