Usa SDKs de Flutter generados

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

Como mencionamos en otro lugar, es importante tener en cuenta que el código de cliente no envía las Data Connect consultas y mutaciones, y que estas no se ejecutan en el servidor. En cambio, cuando se implementan, las operaciones Data Connect se almacenan en el servidor como Cloud Functions. Esto significa que debes implementar los cambios correspondientes del cliente para evitar interrumpir a 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 SDKs de cliente automáticamente mientras creas prototipos.

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

¿Cuál es el flujo de trabajo de desarrollo del cliente?

Si seguiste la sección Primeros pasos, se te presentó el flujo de desarrollo general de Data Connect. En esta guía, encontrarás información más detallada sobre cómo generar SDKs de Flutter a partir de tu esquema y trabajar con consultas y mutaciones del cliente.

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

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

Luego:

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 de Data Connect VS Code
   • Actualizando tu connector.yaml

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

4. Implementa llamadas a consultas y mutaciones.

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

Genera tu SDK de Flutter

Usa el Firebase CLI para configurar los Data Connect generados SDKs 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 mientras creas prototipos

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

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

firebase dataconnect:sdk:generate --watch

Genera SDKs en canalizaciones de compilación

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

firebase dataconnect:sdk:generate

Configura el código de cliente

Inicializa tu Data Connect app

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

Luego, instala el complemento de Data Connect:

flutter pub add firebase_data_connect

Inicializa el SDK de Flutter Data Connect

Inicializa tu Data Connect instancia con la información que usaste para configurar Data Connect (todo disponible en la Firebase console Data Connect tab).

Importa las bibliotecas

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

// 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 consultas predefinidas. Todo lo que debes hacer es importarlas y llamar a execute en ellas.

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 la acción:

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().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

Campos opcionales

Algunas consultas pueden tener campos opcionales. En estos casos, el SDK de Flutter expone un método de compilador y se deberá 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 consulta).

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`

Controla 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, puedes agregar nuevos valores compatibles con enum. Por ejemplo, imagina que, más adelante en el ciclo de vida de tu aplicación, decides agregar un valor FULLSCREEN a la enumeración AspectRatio.

En el flujo de trabajo 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 se interrumpan.

Ejemplo de implementación resistente

El SDK generado fuerza el control de valores desconocidos. Es decir, el código de 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}");
  }
}

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 Data Connect emulador, ya sea desde la extensión de Data Connect VS Code o desde la CLI.

La instrumentación de la app para conectarse al emulador es la misma para 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 calls from your app
QueryRef<ListMoviesData, 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 tipos de datos comunes de GraphQL. Estos se representan en el SDK de la siguiente manera.