Habilitación de la sincronización sin conexión para la aplicación móvil de Xamarin.Forms

2019-06-25

Información general

En este tutorial se presenta la característica de sincronización sin conexión de Azure Mobile Apps para Xamarin.Forms. La sincronización sin conexión permite a los usuarios finales interactuar con una aplicación móvil, ver, agregar o modificar datos, incluso cuando no hay ninguna conexión de red. Los cambios se almacenan en una base de datos local. Una vez que el dispositivo vuelve a estar en línea, estos cambios se sincronizan con el servicio remoto.

Este tutorial se basa en la solución de inicio rápido de Xamarin.Forms para Mobile Apps que se crea al completar el tutorial [Creación de una aplicación de Xamarin iOS]. La solución de inicio rápido de Xamarin.Forms contiene el código para admitir la sincronización sin conexión, que solo debe habilitarse. En este tutorial, actualizará la solución de inicio rápido para activar las características sin conexión de Azure Mobile Apps. También resaltamos el código específico del modo sin conexión en la aplicación. Si no usa la solución de inicio rápido descargada, debe agregar los paquetes de extensión de acceso a datos al proyecto. Para obtener más detalles sobre los paquetes de extensiones del servidor, consulte Uso del SDK del servidor de back-end .NET para Azure Mobile Apps.

Para más información sobre la característica de sincronización sin conexión, consulte el tema Sincronización de datos sin conexión en Azure Mobile Apps.

Habilitación de la funcionalidad de sincronización sin conexión en la solución de inicio rápido

El código de sincronización sin conexión se incluye en el proyecto mediante directivas de preprocesador de C#. Cuando se define el símbolo OFFLINE_SYNC_ENABLED, estos caminos de código se incluyen en la compilación. Para las aplicaciones de Windows, también debe instalar la plataforma SQLite.

En Visual Studio, haga clic con el botón derecho en la solución >Administrar paquetes NuGet para la solución...y busque e instale el paquete Microsoft.Azure.Mobile.Client.SQLiteStore NuGet para todos los proyectos de la solución.
En el Explorador de soluciones, abra el archivo TodoItemManager.cs desde el proyecto con Portable en el nombre, que es un proyecto de Biblioteca de Clases Portátil, y a continuación, elimine el comentario de la siguiente directiva de preprocesador:
```
 #define OFFLINE_SYNC_ENABLED
```
(Opcional) Para admitir dispositivos Windows, instale uno de los siguientes paquetes en tiempo de ejecución de SQLite:
- Windows 8.1 Runtime: Instalar SQLite para Windows 8.1.
- Windows Phone 8.1: Instalar SQLite para Windows Phone 8.1.
- Plataforma Universal de Windows Instale SQLite para la Plataforma Universal de Windows.
  
  Aunque el inicio rápido no contiene un proyecto universal de Windows, la plataforma universal de Windows se admite con Xamarin Forms.
(Opcional) En cada proyecto de aplicación de Windows, haga clic con el botón derecho en Referencias>Agregar referencia..., expanda la carpeta Windows>Extensiones. Habilite el SDK de SQLite adecuado para Windows junto con el SDK de Runtime de Visual C++ 2013 para Windows. Los nombres del SDK de SQLite varían ligeramente con cada plataforma windows.

Revisión del código de sincronización de cliente

Esta es una breve introducción a lo que ya se incluye en el código del tutorial dentro de las directivas #if OFFLINE_SYNC_ENABLED. La funcionalidad de sincronización sin conexión se encuentra en el archivo de proyecto TodoItemManager.cs en el proyecto Biblioteca de clases portable. Para obtener información general conceptual de la característica, consulte Sincronización de datos sin conexión en Azure Mobile Apps.

Antes de que se puedan realizar operaciones de tabla, se debe inicializar el almacén local. La base de datos del almacén local se inicializa en el constructor de clase TodoItemManager mediante el código siguiente:
```
  var store = new MobileServiceSQLiteStore(OfflineDbPath);
  store.DefineTable<TodoItem>();

  //Initializes the SyncContext using the default IMobileServiceSyncHandler.
  this.client.SyncContext.InitializeAsync(store);

  this.todoTable = client.GetSyncTable<TodoItem>();
```
Este código crea una nueva base de datos sqLite local mediante la clase mobileServiceSQLiteStore.

El método DefineTable crea una tabla en el almacén local que coincide con los campos del tipo proporcionado. El tipo no tiene que incluir todas las columnas que están en la base de datos remota. Es posible almacenar un subconjunto de columnas.

El campo todoTable en TodoItemManager es del tipo IMobileServiceSyncTable en lugar de IMobileServiceTable. Esta clase usa la base de datos local para todas las operaciones de tabla de creación, lectura, actualización y eliminación (CRUD). Decide cuándo se envían esos cambios al backend de la aplicación móvil llamando a PushAsync en el IMobileServiceSyncContext. El contexto de sincronización ayuda a conservar las relaciones de tabla mediante el seguimiento y la inserción de cambios en todas las tablas que una aplicación cliente ha modificado cuando se llama a pushAsync.

Se llama al siguiente método SyncAsync para sincronizar con el backend de la aplicación móvil.

  public async Task SyncAsync()
  {
      ReadOnlyCollection<MobileServiceTableOperationError> syncErrors = null;

      try
      {
          await this.client.SyncContext.PushAsync();

          await this.todoTable.PullAsync(
              "allTodoItems",
              this.todoTable.CreateQuery());
      }
      catch (MobileServicePushFailedException exc)
      {
          if (exc.PushResult != null)
          {
              syncErrors = exc.PushResult.Errors;
          }
      }

      // Simple error/conflict handling.
      if (syncErrors != null)
      {
          foreach (var error in syncErrors)
          {
              if (error.OperationKind == MobileServiceTableOperationKind.Update && error.Result != null)
              {
                  //Update failed, reverting to server's copy.
                  await error.CancelAndUpdateItemAsync(error.Result);
              }
              else
              {
                  // Discard local change.
                  await error.CancelAndDiscardItemAsync();
              }

              Debug.WriteLine(@"Error executing sync operation. Item: {0} ({1}). Operation discarded.",
                  error.TableName, error.Item["id"]);
          }
      }
  }

En este ejemplo se usa un control de errores sencillo con el controlador de sincronización predeterminado. Una aplicación real controlaría los distintos errores, como las condiciones de red y los conflictos de servidor, mediante una implementación personalizada de IMobileServiceSyncHandler.

Consideraciones de sincronización sin conexión

En el ejemplo, el método SyncAsync solo se llama al inicio y cuando se solicita una sincronización. Para iniciar una sincronización en una aplicación Android o iOS, desliza hacia abajo en la lista de elementos; para Windows, use el botón Sincronizar. En una aplicación real, también podría activar la sincronización cuando cambia el estado de la red.

Cuando se ejecuta una extracción en una tabla que tiene actualizaciones locales pendientes seguidas por el contexto, esa operación de extracción desencadena automáticamente un empuje de contexto previo. Al actualizar, agregar y completar elementos de este ejemplo, es posible omitir la llamada explícita PushAsync.

En el código proporcionado, se consultan todos los registros de la tabla TodoItem remota, pero también es posible filtrar los registros pasando un identificador de consulta y una consulta a PushAsync. Para más información, consulte la sección sincronización incremental en Sincronización de datos sin conexión en Azure Mobile Apps.

Ejecución de la aplicación cliente

Con la sincronización sin conexión ahora habilitada, ejecute la aplicación cliente al menos una vez en cada plataforma para rellenar la base de datos del almacén local. Más adelante, simula un escenario sin conexión y modifica los datos en el almacén local mientras la aplicación está sin conexión.

Actualización del comportamiento de sincronización de la aplicación cliente

En esta sección, modifique el proyecto de cliente para simular un escenario sin conexión mediante una dirección URL de aplicación no válida para el back-end. Como alternativa, puede desactivar las conexiones de red moviendo el dispositivo a "Modo avión". Al agregar o cambiar elementos de datos, estos cambios se mantienen en el almacén local, pero no se sincronizan con el almacén de datos de back-end hasta que se resttablece la conexión.

En el Explorador de soluciones, abra el archivo de proyecto de Constants.cs desde el proyecto de Portable y cambie el valor de ApplicationURL para que apunte a una dirección URL no válida:
```
 public static string ApplicationURL = @"https://your-service.azurewebsites.net/";
```
Abra el archivo TodoItemManager.cs desde el proyecto Portable, luego agregue un catch para la clase base Exception al bloque try...catch en SyncAsync. Este bloque de captura escribe el mensaje de excepción en la consola.
```
     catch (Exception ex)
     {
         Console.Error.WriteLine(@"Exception: {0}", ex.Message);
     }
```
Compile y ejecute la aplicación cliente. Agregue algunos elementos nuevos. Observe que se registra una excepción en la consola para cada intento de sincronización con el back-end. Estos nuevos elementos solo existen en el almacén local hasta que se puedan insertar en el back-end móvil. La aplicación cliente se comporta como si estuviera conectada al back-end, admitiendo todas las operaciones de creación, lectura, actualización, eliminación (CRUD).
Cierre la aplicación y reiníciela para comprobar que los nuevos elementos creados se conservan en el almacén local.
(Opcional) Use Visual Studio para ver la tabla de Azure SQL Database para ver que los datos de la base de datos back-end no han cambiado.

En Visual Studio, abra Explorador de servidores. Vaya a la base de datos en Azure>SQL Database. Haga clic con el botón derecho en la base de datos y seleccione Abrir en el Explorador de objetos de SQL Server. Ahora puede explorar la tabla de su base de datos SQL y su contenido.

Actualización de la aplicación cliente para volver a conectar el back-end móvil

En esta sección, vuelva a conectar la aplicación al back-end móvil, lo que simula que la aplicación vuelve a estar en línea. Al realizar el gesto de actualización, los datos se sincronizan con el back-end móvil.

Vuelva a abrir Constants.cs. Corrija el applicationURL para que apunte a la dirección URL correcta.
Recompile y ejecute la aplicación cliente. La aplicación intenta sincronizarse con el back-end de la aplicación móvil después de iniciarse. Compruebe que no hay excepciones registradas en la consola de depuración.
(Opcional) Vea los datos actualizados mediante el Explorador de objetos de SQL Server o una herramienta REST como Fiddler o Postman. Observe que los datos se han sincronizado entre la base de datos de back-end y el almacén local.

Observe que los datos se han sincronizado entre la base de datos y el almacén local y contienen los elementos que agregó mientras la aplicación estaba desconectada.

Compartir a través de