Usa SDKs de Flutter generados

Los SDKs cliente de Firebase Data Connect te permiten llamar a tus consultas y mutaciones del servidor directamente desde una app de Firebase. Generas un SDK cliente personalizado en paralelo a medida que diseñas los esquemas, las consultas y las mutaciones que implementas en tu servicio de Data Connect. Luego, integras métodos de este SDK en la lógica de tu cliente.

Como mencionamos en otro lugar, es importante tener en cuenta que el código del cliente no envía consultas ni mutaciones, y que estas no se ejecutan en el servidor.Data Connect En cambio, cuando se implementan, las operaciones de Data Connect se almacenan en el servidor, como Cloud Functions. Esto significa que debes implementar los cambios correspondientes del cliente para evitar que se interrumpa la experiencia de los usuarios existentes (por ejemplo, en versiones anteriores de la app).

Por eso, Data Connect te proporciona un entorno de desarrollo y herramientas que te permiten crear prototipos de tus esquemas, consultas y mutaciones implementados en el servidor. También genera automáticamente SDKs del cliente mientras creas prototipos.

Cuando hayas iterado las actualizaciones de tus apps de servicio y cliente, las actualizaciones del servidor y del cliente estarán listas para implementarse.

¿Cuál es el flujo de trabajo de desarrollo de clientes?

Si seguiste la sección Comienza ahora, conociste el flujo de desarrollo general de Data Connect. En esta guía, encontrarás información más detallada para generar SDKs de Flutter a partir de tu esquema y trabajar con consultas y mutaciones de clientes.

En resumen, para usar los SDKs de Flutter generados en tus apps cliente, deberás seguir estos pasos previos:

1. Agrega Firebase a tu app de Flutter.
2. Instala la CLI de FlutterFire dart pub global activate flutterfire_cli.
3. Ejecuta flutterfire configure.

Luego, haz lo siguiente:

1. Desarrolla el esquema de tu app.

2. Configura la generación del SDK:

   • Con el botón Add SDK to app en nuestra extensión Data Connect de VS Code
   • Actualiza tu connector.yaml.

3. Inicializa tu código cliente y bibliotecas de importación.

4. Implementa llamadas a consultas y mutaciones.

5. Configura y usa el emulador de Data Connect y realiza iteraciones.

Genera tu SDK de Flutter

Usa la CLI de Firebase para configurar los SDKs generados por Data Connect en tus apps. El comando init debería detectar todas las apps en la carpeta actual y, luego, instalar los SDKs generados automáticamente.

firebase init dataconnect:sdk

Actualiza los SDKs durante la creación de prototipos

Si tienes instalada la extensión de Data Connect para VS Code, siempre mantendrá actualizados los SDKs generados.

Si no usas la extensión de Data Connect para VS Code, puedes usar la CLI de Firebase para mantener actualizados los SDKs generados.

firebase dataconnect:sdk:generate --watch

Genera SDKs en canalizaciones de compilación

Puedes usar Firebase CLI para generar SDKs de Data Connect en los procesos de compilación de CI/CD.

firebase dataconnect:sdk:generate

Configura el código del cliente

Inicializa tu app de Data Connect

Primero, inicializa tu app con las instrucciones de configuración estándar de Firebase.

Luego, instala el complemento Data Connect:

flutter pub add firebase_data_connect

Inicializa el SDK de Flutter Data Connect

Inicializa tu instancia de Data Connect con la información que usaste para configurar Data Connect (toda disponible en la pestaña Data Connect de la consola de Firebase).

Importa las bibliotecas

Se necesitan dos conjuntos de importaciones para inicializar el código del cliente: importaciones generales de Data Connect e importaciones específicas del SDK generado.

// general imports
import 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

Usa consultas en el cliente

El código generado ya incluirá referencias de consulta predefinidas. Lo único que debes hacer es importar y llamar a execute en ellos.

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

Llama a los métodos de consulta del SDK

A continuación, se muestra un ejemplo en el que se usan estas funciones de acceso directo a acciones:

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().the>n(data = showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

Campos opcionales

Algunas búsquedas pueden tener campos opcionales. En estos casos, el SDK de Flutter expone un método de compilador y se tendrá que configurar por separado.

Por ejemplo, el campo rating es opcional cuando se llama a createMovie, por lo que debes proporcionarlo en la función del compilador.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

Suscríbete a los cambios

Puedes suscribirte a los cambios (que se actualizarán cada vez que ejecutes una búsqueda).

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // will update the subscription above`

Cómo controlar los cambios en los campos de enumeración

El esquema de una app puede contener enumeraciones, a las que pueden acceder tus consultas de GraphQL.

A medida que cambia el diseño de una app, es posible que agregues nuevos valores admitidos de enumeración. Por ejemplo, imagina que, más adelante en el ciclo de vida de tu aplicación, decides agregar un valor FULLSCREEN al enum AspectRatio.

En el flujo de trabajo de Data Connect, puedes usar herramientas de desarrollo locales para actualizar tus consultas y SDKs.

Sin embargo, antes de lanzar una versión actualizada de tus clientes, es posible que los clientes implementados más antiguos dejen de funcionar.

Ejemplo de implementación resistente

El SDK generado obliga a controlar los valores desconocidos. Es decir, el código del cliente debe desenvolver el objeto EnumValue en Known o Unknown.

final result = await MoviesConnector.instance.listMovies().execute();

if (result.data != null && result.data!.isNotEmpty) {
  handleEnumValue(result.data![0].aspectratio);
}

void handleEnumValue(EnumValue<AspectRatio> aspectValue) {
  if (aspectValue.value != null) {
    switch(aspectValue.value!) {
      case AspectRatio.ACADEMY:
        print("This movie is in Academy aspect");
        break;
      case AspectRatio.WIDESCREEN:
        print("This movie is in Widescreen aspect");
        break;
      case AspectRatio.ANAMORPHIC:
        print("This movie is in Anamorphic aspect");
        break;
      case AspectRatio.IMAX:
        print("This movie is in IMAX aspect");
    }
  } else {
    print("Unknown aspect ratio detected: ${aspectValue.stringValue}");
  }
}

Habilita el almacenamiento en caché del cliente

Data Connect tiene una función de almacenamiento en caché opcional del cliente, que puedes habilitar editando el archivo connector.yaml. Cuando esta función está habilitada, los SDKs de cliente generados almacenan en caché de forma local las respuestas a las consultas, lo que puede reducir la cantidad de solicitudes de bases de datos que realiza tu app y permite que las partes de tu app que dependen de la base de datos funcionen cuando se interrumpe la disponibilidad de la red.

Para habilitar el almacenamiento en caché del cliente, agrega una configuración de almacenamiento en caché del cliente a la configuración del conector:

generate:
  javascriptSdk:
    outputDir: ../dart/
    package: "dataconnect_generated"
    clientCache:
      maxAge: 5s
      storage: memory

Esta configuración tiene dos parámetros, ambos opcionales:

• maxAge: Es la antigüedad máxima que puede tener una respuesta almacenada en caché antes de que el SDK del cliente recupere valores nuevos. Ejemplos: "0", "30s", "1h30m".

  El valor predeterminado de maxAge es 0, lo que significa que las respuestas se almacenan en caché, pero el SDK del cliente siempre recuperará valores nuevos. Los valores almacenados en caché solo se usarán cuando CACHE_ONLY se especifique como execute() y el resultado inicial se devuelva desde subscribe().

• storage: El SDK cliente se puede configurar para almacenar en caché las respuestas en el almacenamiento de persistent o en memory. Los resultados almacenados en caché en el almacenamiento de persistent persistirán entre los reinicios de la app. Cuando se segmenta para Android o iOS, el valor predeterminado es persistent. Cuando segmentas anuncios para navegadores web, solo se admite el almacenamiento de memory.

Después de actualizar la configuración de almacenamiento en caché del conector, vuelve a generar los SDKs del cliente y a compilar la app. Una vez que lo hagas, execute() y subscribe() almacenarán en caché las respuestas y usarán los valores almacenados en caché según la política que configuraste. Por lo general, esto sucede automáticamente, sin que debas realizar ningún paso adicional. Sin embargo, ten en cuenta lo siguiente:

• El comportamiento predeterminado de execute() es el que se describió anteriormente: si se almacena en caché un resultado para una búsqueda y el valor almacenado en caché no es más antiguo que execute(), se usa el valor almacenado en caché.maxAge Este comportamiento predeterminado se denomina política de PREFER_CACHE.

  También puedes especificar para las invocaciones individuales de execute() que solo se publiquen valores almacenados en caché (CACHE_ONLY) o que se recuperen de forma incondicional valores nuevos del servidor (SERVER_ONLY).

  await queryRef.execute(fetchPolicy: QueryFetchPolicy.cacheOnly);
  

  await queryRef.execute(fetchPolicy: QueryFetchPolicy.serverOnly);
  

• Cuando llamas a subscribe(), siempre se muestra de inmediato el contenido almacenado en caché, si existe, independientemente de la configuración de maxAge. Las llamadas posteriores a execute() notificarán a los objetos de escucha según el maxAge configurado.

Usa mutaciones en el cliente

Se puede acceder a las mutaciones de la misma manera que a las consultas.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

Crea prototipos y prueba tus apps de Flutter

Instrumenta clientes para usar un emulador local

Puedes usar el emulador de Data Connect, ya sea desde la extensión de Data Connect para VS Code o desde la CLI.

La instrumentación de la app para conectarse al emulador es la misma en ambos casos.

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make call<s from your app
Quer>yRefListMoviesData, void ref = MoviesConnector.instance.listMovies.ref();

Para cambiar a los recursos de producción, comenta las líneas para conectarte al emulador.

Tipos de datos en el SDK de Dart

El servidor Data Connect representa los tipos de datos comunes de GraphQL. Estos se representan en el SDK de la siguiente manera.