Comienza a usar Firebase SQL Connect

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

  • Configura tu directorio de proyecto local de Firebase SQL Connect con VS Code y la CLI de Firebase.
  • Genera esquemas, consultas y mutaciones de SQL Connect basados en tus ideas de apps en lenguaje natural.
  • Usa los SDKs con escritura segura en tus apps para ejecutar consultas y mutaciones de SQL Connect.
  • Aprovisiona una instancia de Cloud SQL para PostgreSQL, un esquema de SQL Connect, consultas y mutaciones.

Configura el directorio del proyecto local

Puedes instalar herramientas de desarrollo locales para SQL Connect de dos maneras.

  1. En un directorio del proyecto, ejecuta el siguiente comando.

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

    curl -sL https://firebase.tools/init/dataconnect | editor=true bash
  2. Haz clic en el ícono de Firebase en el panel izquierdo de Visual Studio Code para abrir la pantalla de la extensión SQL Connect de VS Code.

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

Revisa el esquema

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

En la configuración predeterminada, puedes encontrar los archivos de esquema SQL Connect en el directorio dataconnect/schema/. A continuación, se muestran dos tablas de ejemplo del esquema de la plantilla de películas. 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")
}

Más información sobre los esquemas de SQL Connect

Desarrolla consultas y mutaciones

Firebase SQL Connect usa GraphQL para las consultas y mutaciones. Estos se definen en archivos .gql y se llaman por su nombre desde tu app. La sintaxis de GraphQL proporciona SDKs con escritura segura 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 de Code Lens Run (local) en VS Code para ejecutar las mutaciones y completar tu base de datos local de PGlite.

Botón Ejecutar de CodeLens para Firebase SQL Connect

Revisa las consultas y mutaciones

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

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

SQL Connect te ayuda a crear consultas y mutaciones seguras con Firebase Authentication.

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

Más información sobre las consultas de SQL Connect Más información sobre las mutaciones de SQL Connect Más información sobre la autenticación de SQL Connect

Genera consultas y mutaciones

No es necesario que seas experto en GraphQL para usar SQL Connect de manera eficaz. Puedes generar consultas y mutaciones de SQL Connect a partir de descripciones en lenguaje natural.

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

Botón Generate de CodeLens para Firebase SQL Connect

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 Add SDK to app en la extensión SQL Connect de 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 que se conecte al emulador de SQL Connect:
    import { connectDataConnectEmulator } from 'firebase/data-connect';
    
    const dataConnect = getDataConnect(connectorConfig);
    connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    
    • Llama a los métodos SQL 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

  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 la app, haz lo siguiente:

    • Importa el SDK de SQL Connect y el SDK que generaste:

      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 que se conecte al emulador de SQL 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)
      
    • Llama a los métodos SQL 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 SQL 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:

    • Obtén una instancia del conector desde el SDK que generaste:
    private val connector = com.myapplication.MoviesConnector.instance
    
    • Instrumenta tu app para que se conecte al emulador de SQL 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)
      }
    
    • Llama a los métodos SQL 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 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:
    // Generated queries.
    // Update as needed with the path to your generated SDK
    
    import 'movies_connector/movies.dart';
    
    • Instrumenta tu app para que se conecte al emulador de SQL 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());
    }
    
    • Llama a los métodos SQL 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, sigue estos pasos:

  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 opciones de prueba de Firebase SQL Connect.

  2. Haz clic en el botón Deploy to production en la extensión SQL Connect de VS Code o ejecuta el siguiente comando en una terminal:

    firebase deploy --only dataconnect
    

    Después de la implementación, puedes ver tu esquema y ejecutar consultas y mutaciones en la consola de Firebase (ve a Bases de datos y almacenamiento > SQL Connect).

Más información sobre dataconnect.yaml Más información sobre cómo funciona SQL Connect con Cloud SQL

Próximos pasos

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