Comienza a usar Firebase Data Connect

Nota: Firebase Data Connect está en versión preliminar pública. Data Connect estará sujeto a las “Condiciones de la oferta de la fase previa a la DG” en la sección Condiciones específicas del servicio de las Condiciones del Servicio de Google Cloud Platform. Las funciones de la fase previa a la DG están disponibles “tal cual” y pueden tener asistencia limitada. Para obtener más información, consulta las descripciones de la etapa de lanzamiento.

En esta guía de inicio rápido, aprenderás a compilar Firebase Data Connect en tu aplicación.

Nota: Sigue esta guía de inicio rápido si deseas agregar Data Connect a uno de tus proyectos de Firebase en el plan Blaze, crear un servicio Data Connect y aprovisionar una base de datos de Cloud SQL para tu prototipado. Si prefieres usar el plan Spark y crear prototipos de forma local con un emulador y una base de datos local, prueba la guía de introducción al desarrollo local.

• Agrega Firebase Data Connect a tu proyecto de Firebase.
• Configura un entorno de desarrollo que incluya una extensión de Visual Studio Code para trabajar con una instancia de producción.
• Luego, te mostraremos cómo hacer lo siguiente:
  • Crea un esquema para una app de opiniones sobre películas y, luego, impleméntalo en producción.
  • Define las consultas y mutaciones para tu esquema.
  • Genera SDKs fuertemente tipificados y úsalo en tu app
  • Implementa tu esquema, consulta y datos finales en producción.

Encuentra un repositorio de apps de guía de inicio rápido y compila una app de Data Connect con todas las funciones siguiendo nuestro codelab para la Web. Próximamente, lanzaremos codelabs para Android y iOS.

Requisitos previos

Para usar esta guía de inicio rápido en tu entorno local, necesitarás lo siguiente:

• Linux, macOS o Windows
• Visual Studio Code

Cómo conectarte a tu proyecto de Firebase

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. Ve a la sección Data Connect de Firebase console y sigue el flujo de trabajo de configuración del producto.

3. 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á el uso de Data Connect ni la configuración predeterminada de Cloud SQL para PostgreSQL durante la versión preliminar.

4. Selecciona una ubicación para tu base de datos de CloudSQL para PostgreSQL.

5. Anota los nombres y los IDs del proyecto, el servicio y la base de datos para confirmarlos más adelante.

6. Sigue el flujo de configuración restante y, luego, haz clic en Listo.

   Nota: El aprovisionamiento de tu instancia de Cloud SQL para PostgreSQL puede tardar hasta 15 minutos en completarse. 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.

Elige y configura un entorno de desarrollo

Data Connect admite dos experiencias de desarrollo:

• Si eres desarrollador de Kotlin para Android, iOS, Flutter o Web, puedes usar el desarrollo de VS Code para diseñar y probar esquemas y operaciones de forma local mientras te conectas a tu instancia de Cloud SQL para PostgreSQL.
• Si eres desarrollador web, puedes usar IDX Development para crear prototipos en un espacio de trabajo de IDX con una plantilla de IDX preconfigurada con PostgreSQL, la extensión de VS Code con el emulador de Data Connect y el código del cliente de la guía de inicio rápido configurado por ti. Encontrarás más información en el sitio de IDX del proyecto.

Esta guía de inicio rápido se enfoca en el flujo de desarrollo de extensiones de VS Code. Para continuar, haz lo siguiente:

1. Crea un directorio nuevo para tu proyecto local.
2. Abre VS Code en el directorio nuevo.

3. Instala la extensión de Firebase Data Connect desde Visual Studio Code Marketplace.

   Nota: La extensión incluye la extensión de mercado GraphQL Syntax Highlighting. Es posible que otras extensiones de GraphQL que instales entren en conflicto con la compatibilidad con GraphQL que se incluye en la extensión de Firebase Data Connect.

Configura tu proyecto local

Nota: Si no usas IDX, sigue los pasos que se indican en esta sección.

Instala la CLI siguiendo las instrucciones normales. Si ya tienes instalado npm, ejecuta el siguiente comando:

npm install -g firebase-tools

Nota: Si usas una instalación de CLI existente, asegúrate de actualizarla a la versión más reciente.

Configura el directorio de tu proyecto

Para configurar tu proyecto local, inicializa el directorio del proyecto.

En el panel izquierdo de VS Code, haz clic en el ícono de Firebase para abrir la IU de la extensión de VS Code de Firebase.

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.
4. Si tu proyecto está en el plan Blaze, cuando se te solicite "¿Deseas configurar tus recursos de backend ahora?", responde "Sí".

5. Haz clic en el botón Start emulators.

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

Crea un esquema

En el directorio de tu proyecto de Firebase, en el archivo /dataconnect/schema/schema.gql, comienza a definir un esquema de GraphQL que incluya películas.

Película

En Data Connect, los campos de GraphQL se asignan a columnas. El tipo Movie tiene id, title, imageUrl y genre. Data Connect reconoce los tipos de datos primitivos String y UUID.

Copia el siguiente fragmento o quita los comentarios de las líneas correspondientes en el archivo.

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

MovieMetadata

Ahora que tienes películas, puedes modelar los metadatos de las películas.

Copia el siguiente fragmento o quita los comentarios de las líneas correspondientes en el archivo.

# 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 la administrará por ti.

Obtén más información sobre los esquemas de Data Connect en la documentación

Implementa tu esquema en producción

Si usas la extensión de VS Code de Firebase para trabajar con tu base de datos de producción, debes implementar tu esquema antes de continuar. Después de implementar el esquema en la base de datos de producción, deberías poder ver el esquema en la consola.

Nota: El aprovisionamiento de tu instancia de Cloud SQL para PostgreSQL puede tardar hasta 15 minutos. No podrás realizar la implementación hasta que la instancia esté lista. Antes de implementar tu esquema, confirma que el flujo de configuración de Data Connect, incluido el aprovisionamiento de la base de datos, se haya completado con la consola de Google Cloud.

1. Puedes usar la extensión de VS Code de Data Connect para realizar la implementación.
   • En la IU de la extensión, en el panel Firebase Data Connect, haz clic en Deploy to production.
2. Es posible que debas revisar los cambios en el esquema y aprobar las modificaciones potencialmente destructivas. Se te pedirá que hagas lo siguiente:
   • Revisa los cambios de esquema con firebase dataconnect:sql:diff
   • Cuando estés conforme con los cambios, aplícalos con el flujo que inició firebase dataconnect:sql:migrate.

Agrega datos a tus tablas

En el panel del editor de VS Code, puedes ver que los botones de CodeLens aparecen sobre los tipos de GraphQL en /dataconnect/schema/schema.gql. Como implementaste tu esquema en producción, puedes usar los botones Agregar datos y Ejecutar (producción) para agregar datos a tu base de datos en el backend.

Para agregar registros a la tabla Movie, haz lo siguiente:

1. En schema.gql, haz clic en el botón Agregar datos que se encuentra sobre la declaración de tipo Movie.
   
2. En el archivo Movie_insert.gql que se genera, codifica los datos de los cuatro campos.
3. Haz clic en el botón Run (Production).
   
4. Repite los pasos anteriores para agregar un registro a la tabla MovieMetadata y proporcionar el id de tu película en el campo movieId, como se indica en la mutación MovieMetadata_insert generada.

Para verificar rápidamente si se agregaron los datos, sigue estos pasos:

1. En schema.gql, haz clic en el botón Read data sobre la declaración de tipo Movie.
2. En el archivo Movie_read.gql resultante, 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

Define tu consulta

Ahora viene la parte divertida: las consultas. Como desarrollador, estás acostumbrado a escribir consultas SQL en lugar de consultas GraphQL, por lo que esto puede parecer un poco diferente al principio. Sin embargo, GraphQL es mucho más conciso y seguro para el tipo que el SQL sin procesar. Además, nuestra extensión de VS Code facilita la experiencia de desarrollo.

Empieza a editar el archivo /dataconnect/connector/queries.gql. Si quieres obtener todas las películas, usa una consulta como esta.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Ejecuta la consulta con el botón CodeLens cercano.

Nota: Puedes usar Gemini en Firebase para crear y probar consultas de GraphQL en la consola de Firebase. Obtén más información en Usa la asistencia de IA para las consultas y mutaciones.

Obtén más información sobre las consultas de Data Connect en la documentación

Genera SDKs y úsalo en tu app

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. Data Connect. Allí se generará y guardará el código del SDK.

   Nota: Si aún no tienes un directorio de apps, puedes crear y seleccionar un directorio nuevo para el código del SDK por ahora y vincularlo a tu app más adelante.

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.

Obtén información para usar el SDK generado y llamar a consultas y mutaciones desde apps cliente (Web, Android, iOS, Flutter).

Implementa tu esquema y consulta en producción

Completaste una iteración de desarrollo. Ahora puedes implementar tu esquema, datos y consultas en el servidor con la IU de la extensión de Firebase o la CLI de Firebase, tal como lo hiciste con tu esquema.

Si usas la extensión de VS Code de Firebase para la implementación, haz clic en el botón Implementar en producción.

Una vez que se implemente, ve a la consola de Firebase para verificar que el esquema, las operaciones y los datos se hayan subido a la nube. Debes poder ver el esquema y ejecutar tus operaciones en la consola. La instancia de Cloud SQL para PostgreSQL se actualizará con su esquema y datos generados y, luego, se implementará.

Obtén más información sobre el uso del emulador de Data Connect en la documentación

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 Firebase console. 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:

• 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 código cliente para la Web, Android, iOS y Flutter.