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

Nota

Este producto se retira. Para obtener un reemplazo de proyectos con .NET 8 o posterior, consulte la biblioteca datasync de Community Toolkit.

En este tutorial se describe 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 vuelve a estar en línea, 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 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.

Actualización de la aplicación para admitir la sincronización sin conexión

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

Nota

La sincronización sin conexión solo está disponible para Android e iOS. No funcionará 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 en el almacén sin conexión por la tienda en línea:

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

Compilación de la aplicación

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

cordova clean android
cordova build android

Puede ejecutar la aplicación:

cordova run android

Prueba en Visual Studio Code

Puede usar el depurador en Visual Studio Code si tiene instalada la extensión Cordova Tools. Haga clic en el depurador y, a continuación, cree un archivo launch.json. Cuando se le solicite, seleccione cordovay, a continuación, seleccione las configuraciones (por ejemplo, Ejecutar Android en el emulador). Una vez que haya creado una configuración de inicio, puede ejecutar la aplicación en el depurador. Se iniciará en el emulador que prefiera. Sin embargo, ahora podrá ver la salida de depuración en la consola de depuración.

Prueba de la aplicación

En esta sección, pruebe el comportamiento con WiFi activado y, a continuación, desactive WiFi 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 "extraer para actualizar".

1. Coloque el dispositivo o simulador en modo avión.
2. Agregue algunos elementos Todo o marque algunos elementos como completos.
3. Salga del dispositivo o simulador (o cierre forzadamente la aplicación) y reinicie la aplicación.
4. Compruebe que los cambios se han conservado en el dispositivo.
5. Vea el contenido de la tabla todoItem de Azure . Use una herramienta SQL como SQL Server Management Studioo un cliente REST, como Curl. Compruebe que los nuevos elementos no se han sincronizado con el servidor
6. Active WiFi en el dispositivo o el simulador.
7. Actualice los datos, ya sea mediante "extracción para actualizar" o presionando el icono de actualización.
8. Vuelva a revisar los datos de la tabla TodoItem. Ahora deberían aparecer los elementos nuevos y modificados.

Pasos siguientes

Continúe para implementar autenticación.