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, integra los métodos de este SDK en la lógica de tu cliente.

Como ya mencionamos en otro lugar, es importante tener en cuenta que el código del cliente no envía las consultas ni las mutaciones, sino que se ejecutan en el servidor.Data Connect 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 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 del cliente?

Si seguiste la sección Comienza ahora, se te presentó 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:

  3. Inicializa tu código de 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

Al igual que con la mayoría de los proyectos de Firebase, el trabajo en el código del cliente de Firebase Data Connect se realiza en un directorio del proyecto local. Tanto la extensión Data Connect de VS Code como la CLI de Firebase son herramientas locales importantes para generar y administrar código de cliente.

Las opciones de generación del SDK se basan en varias entradas del archivo dataconnect.yaml que se generó cuando inicializaste tu proyecto.

Inicializa la generación del SDK

En tu connector.yaml, agrega tu outputDir, package y (para el SDK web) packageJsonDir. 
connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir especifica dónde se debe generar el SDK. Esta ruta de acceso es relativa al directorio que contiene el archivo connector.yaml. De manera opcional, puedes proporcionar una ruta de acceso absoluta a tu outputDir.

package especifica el nombre del paquete.

Actualiza los SDKs mientras creas prototipos

Si prototipas de forma interactiva con la extensión Data Connect de VS Code y su emulador Data Connect, los archivos fuente del SDK se generan y actualizan automáticamente mientras modificas los archivos .gql que definen esquemas, consultas y mutaciones. Esta puede ser una función útil en los flujos de trabajo de recarga en caliente.

En otros casos, si usas el emulador Data Connect desde la CLI de Firebase, puedes establecer un monitoreo de las actualizaciones de .gql y también hacer que las fuentes del SDK se actualicen automáticamente.

Como alternativa, puedes usar la CLI para volver a generar los SDKs cada vez que se cambien los archivos .gql:

firebase dataconnect:sdk:generate --watch

Genera SDKs para la integración y para las versiones de producción

En algunos casos, como cuando preparas fuentes de proyectos para enviarlas a pruebas de CI, puedes llamar a la CLI de Firebase para realizar una actualización por lotes.

En estos casos, usa 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 la información está disponible en la pestaña Data Connect de la consola de Firebase).

Importa las bibliotecas

Se necesitan dos conjuntos de importaciones para inicializar tu código de 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().then(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`

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

Tipo de conexión de datos Dart
Marca de tiempo firebase_data_connect.Timestamp
Int (32 bits) int
Fecha DateTime
UUID string
Int64 int
Número de punto flotante double
Booleano bool
Cualquiera firebase_data_connect.AnyValue