Adición de sincronización de datos sin conexión a la aplicación de Apache Cordova

En este tutorial se explica la característica de sincronización sin conexión de Azure Mobile Apps para la aplicación de inicio rápido de Apache Cordova. 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 se vuelve a conectar, estos cambios se sincronizan con el back-end remoto.

Antes de comenzar este tutorial, debe haber completado el tutorial de inicio rápido de Apache Cordova, que incluye la creación de un servicio back-end adecuado.

Para obtener más información acerca de la característica de sincronización sin conexión, consulte el tema Sincronización de datos sin conexión en Aplicaciones móviles de Azure.

Actualización de la aplicación para que admita la sincronización sin conexión

En el funcionamiento en línea, usará getTable() para obtener una referencia a la tabla en línea. Al implementar funcionalidades sin conexión, usará getSyncTable() para obtener una referencia al almacén de SQlite sin conexión. El almacén de SQlite se proporciona con el complemento cordova-sqlite-storage de Apache Cordova .

Nota:

La sincronización sin conexión solo está disponible para Android e iOS. No funciona dentro de la especificación de la plataforma del explorador.

En el archivo www/js/index.js:

1. Actualice el método initializeStore() para inicializar la base de datos local de SQlite:

   function initializeStore() {
       store = new WindowsAzure.MobileServiceSqliteStore();
   
       var tableDefinition = {
           name: 'todoitem',
           columnDefinitions: {
               id: 'string',
               deleted: 'boolean',
               version: 'string',
               Text: 'string',
               Complete: 'boolean'
           }
       };
   
       return store
           .defineTable(tableDefinition)
           .then(initializeSyncContext);
   }
   
   function initializeSyncContext() {
       syncContext = client.getSyncContext();
       syncContext.pushHandler = {
           onConflict: function (pushError) {
               return pushError.cancelAndDiscard();
           },
           onError: function (pushError) {
               return pushError.cancelAndDiscard();
           }
       };
       return syncContext.initialize(store);
   }
   

2. Actualice el método setup() para usar la versión sin conexión de la tabla:

   function setup() {
       todoTable = client.getSyncTable('todoitem');
       refreshDisplay();
       addItemEl.addEventListener('submit', addItemHandler);
       refreshButtonEl.addEventListener('click', refreshDisplay);
   }
   

3. Reemplace el método syncLocalTable() que sincronizará los datos del almacén sin conexión con el almacén en línea:

   function syncLocalTable() {
       return syncContext.push().then(function () {
           return syncContext.pull(new WindowsAzure.Query('todoitem'));
       });
   }
   

Compilar la aplicación

Ejecute los siguientes comandos para compilar la aplicación de Android:

cordova clean android
cordova build android

Puede ejecutar la aplicación:

cordova run android

Prueba en Visual Studio Code

Puede usar el depurador de Visual Studio Code si tiene instalada la extensión Cordova Tools. Haga clic en el depurador y, luego, cree un archivo launch.json. Cuando se le solicite, seleccione Cordova y, luego, elija las configuraciones (por ejemplo, Run Android on emulator [Ejecutar Android en el emulador]). Cuando haya creado una configuración de inicio, puede ejecutar la aplicación en el depurador. Se iniciará en el emulador de su elección. Sin embargo, ahora podrá ver la salida de depuración en la consola de depuración.

Probar la aplicación

En esta sección, probará el comportamiento con la red Wi-FI activada y, después, la desactivará para crear un escenario sin conexión.

Los elementos de la lista de tareas pendientes se almacenan en una base de datos de SQLite en el dispositivo. Al actualizar los datos, los cambios se envían al servicio (inserción). A continuación, la aplicación solicita los nuevos elementos (extracción). En el tutorial, la actualización se selecciona presionando un icono o usando "deslizar para actualizar".

1. Coloque el dispositivo o el simulador en Modo avión.
2. Agregue algunos elementos ToDo o marque algunos elementos como completados.
3. Salga del dispositivo o del simulador, o fuerce el cierre de la aplicación, y reinicie esta.
4. Compruebe que se han guardado los cambios en el dispositivo.
5. Consulte el contenido de la tabla TodoItem de Azure. Use una herramienta de SQL, como SQL Server Management Studio, o un cliente REST, como Fiddler o Postman. Compruebe que los nuevos elementos no se han sincronizado con el servidor.
6. Active la red inalámbrica en el dispositivo o el simulador.
7. Actualice los datos, ya sea mediante "deslizar para actualizar" o presionando el icono de actualización.
8. Vuelva a revisar los datos de la tabla TodoItem. Ahora aparecerán los elementos nuevos y cambiados.

Pasos siguientes

Continúe con la implementación de la autenticación.