Activación de la sincronización sin conexión para una aplicación móvil CordovaEnable offline sync for your Cordova mobile app

Este tutorial presenta la característica de sincronización sin conexión de Azure Mobile Apps para Cordova.This tutorial introduces the offline sync feature of Azure Mobile Apps for Cordova. La sincronización sin conexión permite a los usuarios finales interactuar con una aplicación móvil —ver, agregar o modificar datos— aun cuando no haya conexión de red.Offline sync allows end users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection. Los cambios se almacenan en una base de datos local.Changes are stored in a local database. Una vez que el dispositivo se vuelve a conectar, estos cambios se sincronizan con el servicio remoto.Once the device is back online, these changes are synced with the remote service.

Este tutorial se basa en la solución de inicio rápido de Cordova para Mobile Apps que crea al completar el tutorial Inicio rápido de Apache Cordova.This tutorial is based on the Cordova quickstart solution for Mobile Apps that you create when you complete the tutorial Apache Cordova quick start. En este tutorial, actualizará la solución de inicio rápido para agregar las características sin conexión de Azure Mobile Apps.In this tutorial, you update the quickstart solution to add offline features of Azure Mobile Apps. También nos centraremos en el código sin conexión específico de la aplicación.We also highlight the offline-specific code in the app.

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.To learn more about the offline sync feature, see the topic Offline Data Sync in Azure Mobile Apps. Para obtener detalles de uso de la API, consulte la documentación de la API.For details of API usage, see the API documentation.

Adición de sincronización sin conexión a la solución de inicio rápidoAdd offline sync to the quickstart solution

El código de sincronización sin conexión debe agregarse a la aplicación.The offline sync code must be added to the app. La sincronización sin conexión requiere el complemento cordova-sqlite-storage, que se agrega automáticamente a la aplicación cuando el complemento Azure Mobile Apps se incluye en el proyecto.Offline sync requires the cordova-sqlite-storage plugin, which automatically gets added to your app when the Azure Mobile Apps plugin is included in the project. El proyecto de inicio rápido incluye ambos complementos.The Quickstart project includes both of these plugins.

  1. En el Explorador de soluciones de Visual Studio, abra index.js y reemplace el código siguienteIn Visual Studio's Solution Explorer, open index.js and replace the following code

     var client,            // Connection to the Azure Mobile App backend
        todoItemTable;      // Reference to a table endpoint on backend
    

    por este otro:with this code:

     var client,            // Connection to the Azure Mobile App backend
        todoItemTable,      // Reference to a table endpoint on backend
        syncContext;        // Reference to offline data sync context
    
  2. Luego, reemplace el siguiente código:Next, replace the following code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
    

    por este otro:with this code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');
     var store = new WindowsAzure.MobileServiceSqliteStore('store.db');
    
     store.defineTable({
       name: 'todoitem',
       columnDefinitions: {
           id: 'string',
           text: 'string',
           complete: 'boolean',
           version: 'string'
       }
     });
    
     // Get the sync context from the client
     syncContext = client.getSyncContext();
    

    Las adiciones de los códigos anteriores inicializan el almacén local y definen una tabla local que coincide con los valores de columna utilizados en el back-end de Azure.The preceding code additions initialize the local store and define a local table that matches the column values used in your Azure back end. (No hace falta incluir todos los valores de columna en este código.) El campo version se mantiene mediante el back-end móvil y se usa para la resolución de conflictos.(You don't need to include all column values in this code.) The version field is maintained by the mobile backend and is used for conflict resolution.

    Para obtener una referencia al contexto de sincronización, llame a getSyncContext.You get a reference to the sync context by calling getSyncContext. El contexto de sincronización ayuda a mantener las relaciones entre tablas mediante el seguimiento y la inserción de los cambios en todas las tablas modificadas por una aplicación cliente cuando se llama a .push() .The sync context helps preserve table relationships by tracking and pushing changes in all tables a client app has modified when .push() is called.

  3. Actualice la dirección URL de la aplicación a la de la aplicación móvil.Update the application URL to your Mobile App application URL.

  4. Ahora, reemplace este código:Next, replace this code:

     todoItemTable = client.getTable('todoitem'); // todoitem is the table name
    

    por este otro:with this code:

     // Initialize the sync context with the store
     syncContext.initialize(store).then(function () {
    
     // Get the local table reference.
     todoItemTable = client.getSyncTable('todoitem');
    
     syncContext.pushHandler = {
         onConflict: function (pushError) {
             // Handle the conflict.
             console.log("Sync conflict! " + pushError.getError().message);
             // Update failed, revert to server's copy.
             pushError.cancelAndDiscard();
           },
           onError: function (pushError) {
               // Handle the error
               // In the simulated offline state, you get "Sync error! Unexpected connection failure."
               console.log("Sync error! " + pushError.getError().message);
           }
     };
    
     // Call a function to perform the actual sync
     syncBackend();
    
     // Refresh the todoItems
     refreshDisplay();
    
     // Wire up the UI Event Handler for the Add Item
     $('#add-item').submit(addItemHandler);
     $('#refresh').on('click', refreshDisplay);
    

    El código anterior inicializa el contexto de sincronización y, después, llama a getSyncTable (en lugar de getTable) para obtener una referencia a la tabla local.The preceding code initializes the sync context and then calls getSyncTable (instead of getTable) to get a reference to the local table.

    Este código usa la base de datos local para todas las operaciones de creación, lectura, actualización y eliminación (CRUD) de tablas.This code uses the local database for all create, read, update, and delete (CRUD) table operations.

    En este ejemplo se realiza un control de errores simple en los conflictos de sincronización.This sample performs simple error handling on sync conflicts. Una aplicación real controlaría los diversos errores, como los problemas en la red, los conflictos del servidor, etc.A real application would handle the various errors like network conditions, server conflicts, and others. Para obtener ejemplos de código, vea el ejemplo de sincronización sin conexión.For code examples, see the offline sync sample.

  5. A continuación, agregue esta función para realizar la sincronización real.Next, add this function to perform the actual sync.

     function syncBackend() {
    
       // Sync local store to Azure table when app loads, or when login complete.
       syncContext.push().then(function () {
           // Push completed
    
       });
    
       // Pull items from the Azure table after syncing to Azure.
       syncContext.pull(new WindowsAzure.Query('todoitem'));
     }
    

    Decida cuándo se deben insertar los cambios en el back-end de Mobile App mediante la llamada a syncContext.push().You decide when to push changes to the Mobile App backend by calling syncContext.push(). Por ejemplo, podría llamar a syncBackend en un controlador de eventos de botón asociado a un botón de sincronización.For example, you could call syncBackend in a button event handler tied to a sync button.

Consideraciones sobre la sincronización sin conexiónOffline sync considerations

En el ejemplo, el método push de syncContext solo se llama en el inicio de la aplicación en la función de devolución de llamada del inicio de sesión.In the sample, the push method of syncContext is only called on app startup in the callback function for login. En una aplicación real, también puede hacer que esta funcionalidad de sincronización se desencadene manualmente cuando cambia el estado de la red.In a real-world application, you could also make this sync functionality triggered manually or when the network state changes.

Si se ejecuta una extracción en una tabla que tiene actualizaciones locales pendientes rastreadas por el contexto, la operación de extracción desencadenará de forma automática una inserción.When a pull is executed against a table that has pending local updates tracked by the context, that pull operation automatically triggers a push. Al actualizar, agregar y completar elementos en este ejemplo, se puede omitir la llamada explícita a push, ya que puede ser redundante.When refreshing, adding, and completing items in this sample, you can omit the explicit push call, since it may be redundant.

En el código proporcionado, se consultan todos los registros de la tabla todoItem remota, pero también es posible filtrar registros pasando un identificador de consulta y una consulta a push.In the provided code, all records in the remote todoItem table are queried, but it is also possible to filter records by passing a query id and query to push. Para más información, consulte la sección Sincronización incremental en Sincronización de datos sin conexión en Aplicaciones móviles de Azure.For more information, see the section Incremental Sync in Offline Data Sync in Azure Mobile Apps.

(Opcional) Deshabilitación de la autenticación(Optional) Disable authentication

Si no quiere configurar la autenticación antes de probar la sincronización sin conexión, convierta en comentario la función de devolución de llamada del inicio de sesión, pero deje el código de la función de devolución de llamada sin comentarios.If you don't want to set up authentication before testing offline sync, comment out the callback function for login, but leave the code inside the callback function uncommented. Después de convertir en comentario las líneas de inicio, sigue el código:After commenting out the login lines, the code follows:

  // Login to the service.
  // client.login('twitter')
  //    .then(function () {
    syncContext.initialize(store).then(function () {
      // Leave the rest of the code in this callback function  uncommented.
            ...
    });
  // }, handleError);

Ahora, la aplicación, cuando se ejecuta, se sincroniza con el back-end de Azure.Now, the app syncs with the Azure backend when you run the app.

Ejecución de la aplicación clienteRun the client app

Con la sincronización sin conexión ahora habilitada, puede ejecutar la aplicación cliente al menos una vez en cada plataforma para rellenar la base de datos del almacén local.With offline sync now enabled, you can run the client application at least once on each platform to populate the local store database. Después, simulará un escenario sin conexión y modificará los datos del almacén local mientras la aplicación está sin conexión.Later, simulate an offline scenario and modify the data in the local store while the app is offline.

(Opcional) Prueba del comportamiento de la sincronización(Optional) Test the sync behavior

En esta sección, modificará el proyecto de cliente para simular un escenario sin conexión usando una dirección URL de aplicación no válida para el back-end.In this section, you modify the client project to simulate an offline scenario by using an invalid application URL for your backend. Al agregar o cambiar elementos de datos, estos cambios se conservan en el almacén local, pero no se sincronizan con el almacén de datos de back-end hasta que se restablece la conexión.When you add or change data items, these changes are held in the local store, but are not synced to the backend data store until the connection is re-established.

  1. En el Explorador de soluciones, abra el archivo de proyecto index.js y cambie la dirección URL de la aplicación para que apunte a una dirección URL no válida como la siguiente:In the Solution Explorer, open the index.js project file and change the application URL to point to an invalid URL, like the following code:

     client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');
    
  2. En index.html, actualice el elemento <meta> de CSP con la misma dirección URL no válida.In index.html, update the CSP <meta> element with the same invalid URL.

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">
    
  3. Compile y ejecute la aplicación cliente, y observe que se registra una excepción en la consola cuando la aplicación intenta sincronizarse con el back-end después del inicio de sesión.Build and run the client app and notice that an exception is logged in the console when the app attempts to sync with the backend after login. Los nuevos elementos que agrega solo existirán en el almacén local hasta que se puedan insertar en el back-end móvil.Any new items you add exist only in the local store until they are pushed to the mobile backend. La aplicación cliente se comporta como si estuviera conectada al back-end.The client app behaves as if it is connected to the backend.

  4. Cierre la aplicación y reiníciela para comprobar que los nuevos elementos que creó se mantienen en el almacén local.Close the app and restart it to verify that the new items you created are persisted to the local store.

  5. (Opcional) Use Visual Studio para ver la tabla de su base de datos de Azure SQL y observe que los datos de la base de datos de back-end no han cambiado.(Optional) Use Visual Studio to view your Azure SQL Database table to see that the data in the backend database has not changed.

    En Visual Studio, abra el Explorador de servidores.In Visual Studio, open Server Explorer. Vaya a la base de datos en Azure->SQL Databases.Navigate to your database in Azure->SQL Databases. Haga clic con el botón derecho en la base de datos y seleccione Abrir en el Explorador de objetos de SQL Server.Right-click your database and select Open in SQL Server Object Explorer. Ahora puede buscar la tabla de base de datos SQL y su contenido.Now you can browse to your SQL database table and its contents.

(Opcional) Prueba de la reconexión a un back-end móvil(Optional) Test the reconnection to your mobile backend

En esta sección se volverá a conectar la aplicación al back-end móvil, que simula que la aplicación vuelve a un estado en línea.In this section, you reconnect the app to the mobile backend, which simulates the app coming back to an online state. Cuando inicia sesión, los datos se sincronizan con el back-end móvil.When you log in, data is synced to your mobile backend.

  1. Vuelva a abrir index.js y restaure la dirección URL de la aplicación.Reopen index.js and restore the application URL.

  2. Vuelva a abrir index.html y corrija la dirección URL de la aplicación en el elemento <meta> de CSP.Reopen index.html and correct the application URL in the CSP <meta> element.

  3. Vuelva a compilar la aplicación cliente y ejecútela.Rebuild and run the client app. La aplicación intenta sincronizarse con el back-end de la aplicación móvil después del inicio de sesión.The app attempts to sync with the mobile app backend after login. Compruebe que no hay excepciones registradas en la consola de depuración.Verify that no exceptions are logged in the debug console.

  4. (Opcional) Vea los datos actualizados mediante el Explorador de objetos de SQL Server o una herramienta REST como Fiddler.(Optional) View the updated data using either SQL Server Object Explorer or a REST tool like Fiddler. Observe que los datos se han sincronizado entre la base de datos back-end y el almacén local.Notice the data has been synchronized between the backend database and the local store.

    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.Notice the data has been synchronized between the database and the local store and contains the items you added while your app was disconnected.

Recursos adicionalesAdditional resources

Pasos siguientesNext steps