Comienza a usar Firebase Data Connect

En esta guía de inicio rápido, aprenderás a realizar las siguientes tareas:

• Agrega Firebase Data Connect a tu proyecto de Firebase.
• Configurar un entorno de desarrollo que incluya un Visual Studio Extensión de código para trabajar con una instancia de producción.
• A continuación, te mostraremos cómo hacer lo siguiente:
  • Crea un esquema para una app de correo electrónico y, luego, impleméntalo en producción.
  • Define las consultas y mutaciones para tu esquema.
  • Implementa tu esquema, consulta y datos finales en producción.

Requisitos previos

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

• Linux, macOS o Windows
• Visual Studio Code

Conéctate a tu proyecto de Firebase

1. Si aún no lo has hecho, crea un proyecto de Firebase.
   1. En la consola de Firebase, haz clic en Haz clic en Agregar proyecto y sigue las instrucciones en pantalla.

2. Actualiza tu proyecto al plan Blaze. Esto te permite crear una instancia para una instancia de PostgreSQL.

3. Navega a la sección Data Connect de la consola de Firebase y sigue el flujo de trabajo de configuración del producto.

4. Selecciona una ubicación para tu base de datos de Cloud SQL 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.

Elige y configura un entorno de desarrollo

Data Connect admite dos experiencias de desarrollo para el prototipado:

• Si eres desarrollador de Kotlin para Android, iOS o la Web, puedes usar Desarrollo de VS Code para diseñar y probar esquemas y operaciones de forma local mientras conectarte a tu instancia de Cloud SQL para PostgreSQL.
• Si eres desarrollador web, puedes usar IDX Development para desarrollar 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 de la guía de inicio rápido configurado por ti. Encontrarás más información en el Sitio de Project IDX.

Esta guía de inicio rápido se centra en el flujo de desarrollo de la extensión 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. Descarga la extensión, incluida como un paquete VSIX, desde Firebase Storage.

4. En VS Code, en el menú View, selecciona Extensions.

5. En la barra de título del panel Extensions, haz clic en el ícono de menú. more_horiz y, luego, sigue Instalar desde VSIX...

De manera opcional, puedes instalar una base de datos de PostgreSQL local para el desarrollo local con el emulador de Data Connect. Esta configuración se explica al final de esta guía de inicio rápido.

Configura tu proyecto local

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

npm install -g firebase-tools

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.

En la IU de la extensión de Firebase, haz lo siguiente:

1. Asegúrate de que accediste a tu cuenta.
2. Haz clic en el botón Run firebase init.
3. Consulta la pestaña Terminal en el panel inferior de VS Code para ver las instrucciones.
4. Selecciona Data Connect como la función que deseas usar en este directorio.
5. Cuando se te solicite, proporciona los IDs del proyecto, el servicio y la base de datos del proyecto Data Connect que creaste antes en la consola.

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 usuarios y correos electrónicos.

Usuario

En Data Connect, los campos de GraphQL se asignan a columnas. Los usuarios tienen un uid, un name y un correo electrónico address. Data Connect reconoce varios tipos de datos primitivos: String y Date.

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

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

De forma predeterminada, Firebase Data Connect agregará una clave id de UUID si no se proporciona ninguna. Sin embargo, en este caso, deseas que mi uid sea la clave primaria, lo que puedes hacer a través de la directiva @table(key: "uid").

Correo electrónico

Ahora que tienes usuarios, puedes modelar correos electrónicos. Aquí puedes agregar los campos (o columnas) típicos para los datos de correo electrónico. Esta vez, omitimos agregar una clave primaria porque puedes usar Data Connect para administrarla.

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

Ten en cuenta que el campo from está asignado a un tipo de User. Data Connect entiende que esta es una relación entre Email y User, y administrará esta relación por ti.

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 del implementa tu esquema en tu base de datos de producción, deberías poder ver el esquema en la consola.

1. Puedes usar la extensión de Firebase VS Code para la implementación.
   • En la IU de la extensión, en el panel Firebase Data Connect, haz clic en Implementación.
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 usando el flujo iniciado por 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 las tablas User y Email, haz lo siguiente:

1. En schema.gql, haz clic en el botón Agregar datos que se encuentra sobre la declaración de tipo User.
   
2. En el archivo User_insert.gql que se genera, codifica los datos codificados para el tres campos.
3. Haz clic en el botón Run (Production).
   
4. Repite los pasos anteriores para agregar un registro a la tabla Email y proporciona el uid de tu usuario en el campo fromUid, como se solicita en la mutación Email_insert generada.

Define tu consulta

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

Comienza a editar el archivo /dataconnect/connector/queries.gql. Si quieres Para obtener todos los correos electrónicos, usa una consulta como esta.

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

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

Ejecuta la consulta con el botón cercano de CodeLens.

Una función muy interesante aquí es la capacidad de tratar las relaciones de la base de datos como un gráfico. Como un correo electrónico tiene un campo from que hace referencia a un Usuario, puede anidar en el campo y obtener información sobre el usuario.

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 Firebase CLI, tal como lo hiciste con tu esquema (#deploy-schema).

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

Una vez implementado, deberías poder ver y ejecutar tus operaciones en la consola a tus conjuntos de datos. Tu servicio Data Connect estará listo para procesar operaciones de los clientes. La instancia de Cloud SQL para PostgreSQL se actualizará con su esquema y datos generados y, luego, se implementará.

Instala PostgreSQL de forma local (opcional)

Instalar PostgreSQL de forma local y, luego, integrarlo con el emulador te permite crear prototipos en un entorno de desarrollo completamente local.

Puedes instalar una instancia nueva de PostgreSQL o usar una existente.

Instala PostgreSQL

Instala la versión 15.x de PostgreSQL siguiendo las instrucciones para tu plataforma.

• macOS Descarga e instala Postgres.app.
• Windows: Usa el instalador de EDB de la página de descargas de PostgreSQL.
• Docker: extrae y ejecuta el pgvector/pgvector:pg15 imagen, que incluye PostgreSQL 15.x y compatibilidad con vectores.
• Linux: Te recomendamos que uses Docker con la imagen anterior, pero también puedes seguir las instrucciones alternativas para distribuciones populares.

Anota el nombre de host, el puerto, el nombre de usuario y la contraseña, y los parámetros relacionados que se muestran durante la secuencia de instalación.

Para conectarse a tu instancia de PostgreSQL, el emulador necesita lo siguiente:

• Estos parámetros de configuración
• El nombre de la base de datos de tu dataconnect.yaml y una base de datos con el nombre correspondiente inicializada en tu instancia local

Usa tu instancia de PostgreSQL local

Puedes usar una instancia de PostgreSQL local existente actualizando el Configuración del emulador de Data Connect.

firebase setup:emulators:dataconnect

Cuando se te solicite, ingresa la cadena de conexión de PostgreSQL en este formato: postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable

Para obtener más información sobre la cadena de conexión, consulta la Documentación de PostgreSQL.

Conéctate a tu instancia local de PostgreSQL

Una vez que hayas realizado esta configuración, sigue estos pasos para conectarte a tu base de datos local:

1. En VS Code, en el panel izquierdo, haz clic en el ícono de Firebase para abrir la IU de la extensión de VS Code de Firebase.
2. Haz clic en el botón Connect to Local PostgreSQL.

Próximos pasos