Comienza a usar Firebase Data Connect de forma local

En esta guía de inicio rápido, aprenderás a compilar Firebase Data Connect en tu aplicación de forma local sin configurar una instancia de SQL de producción.

  • 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 local.
  • Luego, te mostraremos cómo hacer lo siguiente:
    • Crea un esquema para una app de películas
    • Define las consultas y mutaciones que se usarán en tu app
    • Prueba tus consultas y mutaciones con datos de muestra en un emulador local.
    • Genera SDKs con tipos fuertemente definidos y úsalo en tu app
    • Implementa tu esquema, tus consultas y tus datos finales en la nube (opcional, se necesita un plan de Blaze).

Requisitos previos

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

Configura el entorno de desarrollo

Necesitarás Visual Studio Code para administrar el esquema y definir las consultas que se usarán en tu aplicación. Además, se generará automáticamente un SDK fuertemente tipado:

  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.

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

  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. Haz clic en el botón Start emulators.

Crea un esquema

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

Película

En Data Connect, los campos de GraphQL se asignan a columnas. La película tiene id, title, imageUrl y genre. Data Connect reconoce tipos de datos primitivos: String y UUID.

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

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

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

Agrega datos a tus tablas

En el panel del editor de VS Code, verás que los botones de CodeLens aparecen sobre los tipos de GraphQL en /dataconnect/schema/schema.gql. Puedes usar los botones Agregar datos y Ejecutar (local) para agregar datos a tu base de datos local.

Para agregar registros a las tablas Movie y MovieMetadata, 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.
    Botón Agregar datos de Code Lens para Firebase Data Connect
  2. En el archivo Movie_insert.gql que se genera, codifica los datos de los tres campos.
  3. Haz clic en el botón Run (Local).
    Botón Run de Code Lens para Firebase Data Connect
  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 (Local) 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: definamos las consultas que necesitarás en tu aplicación. Como desarrollador, estás acostumbrado a escribir consultas SQL en lugar de consultas de GraphQL, por lo que esto puede parecer un poco diferente al principio. Sin embargo, GraphQL es mucho más conciso y seguro de tipo que 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.

Una función muy interesante aquí es la capacidad de tratar las relaciones de la base de datos como un gráfico. Dado que un MovieMetadata tiene un campo movie que hace referencia a una película, puedes anidar en el campo y obtener información sobre la película. Intenta agregar el tipo generado movieMetadata_on_movie a la consulta ListMovies.

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

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

Genera SDKs y úsalo en tu app

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

  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 se guardará el código del SDK.

  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

Una vez que tengas la configuración local en tu app, podrás implementar tu esquema, datos y consultas en la nube. Necesitarás el plan Blaze para configurar una instancia de Cloud SQL.

  1. Navega a la sección Data Connect de la consola de Firebase y crea una instancia de Cloud SQL de prueba gratuita.

  2. En la Terminal integrada de VS Code, ejecuta firebase init dataconnect y selecciona el ID de región o servicio que acabas de crear en la consola.

  3. Selecciona "Y" cuando se te solicite "File dataconnect/dataconnect.yaml already exists, Overwrite?".

  4. En la IU de la extensión de VS Code de Data Connect, haz clic en el botón Deploy to production.

  5. 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á.

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 la consola de Firebase.

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: