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 para dispositivos móviles y web a una base de datos de PostgreSQL. Harás lo siguiente:

  • Configurar el directorio local del proyecto Firebase SQL Connect con VS Code y Firebase CLI.
  • Generar esquemas, consultas y mutaciones de SQL Connect basados en las ideas de tu app en lenguaje natural
  • Usar los SDKs con seguridad de tipos en tus apps para ejecutar SQL Connect consultas y mutaciones.
  • Aprovisionar 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 local para SQL Connect de dos maneras.

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

    La secuencia de comandos instala Firebase CLI y la extensión de SQL 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 SQL 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 SQL 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 @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 SQL 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 esquemasSQL Connect

Desarrolla consultas y mutaciones

Firebase SQL Connect usa GraphQL para las consultas y mutaciones. Las defines en archivos .gql y las 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 los 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.

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

SQL Connect te ayuda a crear 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 SQL 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 SQL Connect Obtén más información sobre las mutaciones de SQL Connect Obtén más información sobre la autenticación de SQL Connect

Genera consultas y mutaciones

No necesitas ser 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 Generar/Refinar operación de Code Lens 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 Agregar SDK a la app en la extensión de SQL 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 emulador de SQL Connect:
    import { connectDataConnectEmulator } from 'firebase/data-connect';
    
    const dataConnect = getDataConnect(connectorConfig);
    connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    
    • Llama a los métodos de 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 archivo Package.swift generado.

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

    • Importa el SDK SQL 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 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 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 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 de 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 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 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 de 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, haz lo siguiente:

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

  2. Haz clic en el botón Implementar en producción en la extensión de SQL 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.

Obtén más información sobre dataconnect.yaml Obtén 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: