Activación de la sincronización sin conexión para la aplicación de WindowsEnable offline sync for your Windows app

Nota

Visual Studio App Center admite servicios integrados de un extremo a otro fundamentales para el desarrollo de aplicaciones móviles.Visual Studio App Center supports end to end and integrated services central to mobile app development. Los desarrolladores pueden usar los servicios de compilación, prueba y distribución para configurar la canalización de integración y entrega continuas.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Una vez que se ha implementado la aplicación, los desarrolladores pueden supervisar el estado y el uso de su aplicación con los servicios de análisis y diagnóstico, e interactuar con los usuarios que utilizan el servicio de Push (inserción).Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Además, los desarrolladores pueden aprovechar Auth para autenticar a los usuarios y el servicio de datos para almacenar y sincronizar los datos de la aplicación en la nube.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Si está pensando en integrar Cloud Services en una aplicación móvil, regístrese en App Center App Center hoy mismo.If you are looking to integrate cloud services in your mobile application, sign up with App Center App Center today.

Información generalOverview

Este tutorial muestra cómo agregar compatibilidad sin conexión a una aplicación de la Plataforma universal de Windows (UWP) mediante un back-end de aplicación móvil de Azure.This tutorial shows you how to add offline support to a Universal Windows Platform (UWP) app using an Azure Mobile App backend. 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 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 back-end remoto.Once the device is back online, these changes are synced with the remote backend.

En este tutorial, actualizará el proyecto de aplicación de UWP del tutorial Creación de una aplicación para Windows a fin de conseguir compatibilidad con las características sin conexión de Azure Mobile Apps.In this tutorial, you update the UWP app project from the tutorial Create a Windows app to support the offline features of Azure Mobile Apps. Si no usa el proyecto de servidor de inicio rápido descargado, debe agregar paquetes de extensión de acceso de datos al proyecto.If you do not use the downloaded quick start server project, you must add the data access extension packages to your project. Para obtener más información acerca de los paquetes de extensión de servidor, consulte Trabajar con el SDK del servidor back-end de .NET para Aplicaciones móviles de Azure.For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

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.

RequisitosRequirements

Este tutorial requiere los siguientes requisitos previos:This tutorial requires the following pre-requisites:

Actualización de la aplicación cliente para que admita características sin conexiónUpdate the client app to support offline features

Las características sin conexión de Aplicaciones móviles de Azure permiten interactuar con una base de datos local cuando el usuario se encuentra en un escenario sin conexión.Azure Mobile App offline features allow you to interact with a local database when you are in an offline scenario. Para usar estas características en una aplicación, inicialice una interfaz de SyncContext to a local store. Then reference your table through the IMobileServiceSyncTable.To use these features in your app, you initialize a SyncContext to a local store. Then reference your table through the IMobileServiceSyncTable interface. SQLite se utiliza como almacén local en el dispositivo.SQLite is used as the local store on the device.

  1. Instale el entorno en tiempo de ejecución de SQLite para la plataforma universal de Windows.Install the SQLite runtime for the Universal Windows Platform.

  2. En Visual Studio, abra el Administrador de paquetes NuGet en el proyecto de aplicación de UWP que completó en el tutorial Creación de una aplicación para Windows.In Visual Studio, open the NuGet package manager for the UWP app project that you completed in the Create a Windows app tutorial. Busque e instale el paquete NuGet Microsoft.Azure.Mobile.Client.SQLiteStore.Search for and install the Microsoft.Azure.Mobile.Client.SQLiteStore NuGet package.

  3. En el Explorador de soluciones, haga clic con el botón derecho en Referencias > Agregar referencia... >Universal de Windows>Extensiones y después habilite tanto SQLite para la Plataforma universal de Windows como Tiempo de ejecución de Visual C++ 2015 para Aplicaciones de la Plataforma universal de Windows.In Solution Explorer, right-click References > Add Reference... > Universal Windows > Extensions, then enable both SQLite for Universal Windows Platform and Visual C++ 2015 Runtime for Universal Windows Platform apps.

    Incorporación de referencia de SQLite UWP

  4. Abra el archivo MainPage.xaml.cs y quite la definición #define OFFLINE_SYNC_ENABLED.Open the MainPage.xaml.cs file and uncomment the #define OFFLINE_SYNC_ENABLED definition.

  5. En Visual Studio, presione la tecla F5 para volver a compilar y ejecutar la aplicación cliente.In Visual Studio, press the F5 key to rebuild and run the client app. La aplicación funciona igual que lo hacía antes de habilitar la sincronización sin conexión. Sin embargo, la base de datos se rellena con datos que pueden utilizarse en un escenario sin conexión.The app works the same as it did before you enabled offline sync. However, the local database is now populated with data that can be used in an offline scenario.

Actualización de la aplicación para desconectarla del back-endUpdate the app to disconnect from the backend

En esta sección, se interrumpe la conexión con el back-end de aplicación móvil para simular un escenario sin conexión.In this section, you break the connection to your Mobile App backend to simulate an offline situation. Al agregar elementos de datos, el controlador de excepciones le indicará que la aplicación está en modo sin conexión.When you add data items, your exception handler tells you that the app is in offline mode. En este estado, se agregan nuevos elementos al almacén local y se sincronizarán con el back-end de aplicación móvil cuando se vuelva a ejecutar la inserción en estado conectado.In this state, new items added in the local store and will be synced to the mobile app backend when push is next run in a connected state.

  1. Edite App.xaml.cs en el proyecto compartido.Edit App.xaml.cs in the shared project. Convierta en comentario la inicialización de MobileServiceClient y agregue las siguientes líneas, que usan una dirección URL de una aplicación móvil no válida:Comment out the initialization of the MobileServiceClient and add the following line, which uses an invalid mobile app URL:

      public static MobileServiceClient MobileService = new MobileServiceClient("https://your-service.azurewebsites.fail");
    

    Además, puede mostrar el comportamiento sin conexión deshabilitando las redes Wi-Fi y móvil en el dispositivo o usar el modo avión.You can also demonstrate offline behavior by disabling wifi and cellular networks on the device or use airplane mode.

  2. Presione F5 para compilar y ejecutar la aplicación.Press F5 to build and run the app. Observe que la sincronización no se pudo actualizar cuando se inició la aplicación.Notice your sync failed on refresh when the app launched.

  3. Escriba nuevos elementos y observe que la operación de inserción produce un error con un estado de CancelledByNetworkError cada vez que hace clic en Guardar.Enter new items and notice that push fails with a CancelledByNetworkError status each time you click Save. No obstante, los nuevos elementos Todo están en el almacén local hasta que se puedan insertar en el back-end de aplicación móvil.However, the new todo items exist in the local store until they can be pushed to the mobile app backend. En una aplicación de producción, si suprime estas excepciones, la aplicación cliente se comporta como si aún estuviera conectada al back-end de aplicación móvil.In a production app, if you suppress these exceptions the client app behaves as if it's still connected to the mobile app 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) En Visual Studio, abra el Explorador de servidores.(Optional) 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. Compruebe que no han cambiado los datos de la base de datos back-end.Verify that the data in the backend database has not changed.

  6. (Opcional) Use una herramienta REST como Fiddler o Postman para consultar el back-end móvil mediante una consulta GET con la forma https://<your-mobile-app-backend-name>.azurewebsites.net/tables/TodoItem.(Optional) Use a REST tool such as Fiddler or Postman to query your mobile backend, using a GET query in the form https://<your-mobile-app-backend-name>.azurewebsites.net/tables/TodoItem.

Actualización de la aplicación para volver a conectar el back-end de la aplicación móvilUpdate the app to reconnect your Mobile App backend

En esta sección se vuelve a conectar la aplicación al back-end de aplicación móvil.In this section, you reconnect the app to the mobile app backend. Estos cambios simulan una reconexión de red en la aplicación.These changes simulate a network reconnection on the app.

La primera vez que se ejecuta la aplicación, el controlador de eventos OnNavigatedTo llama a InitLocalStoreAsync.When you first run the application, the OnNavigatedTo event handler calls InitLocalStoreAsync. Este método, a su vez, llama a SyncAsync para sincronizar el almacén local con la base de datos back-end.This method in turn calls SyncAsync to sync your local store with the backend database. La aplicación intenta sincronizar al inicio.The app attempts to sync on startup.

  1. Abra App.xaml.cs en el proyecto compartido y quite la marca de comentario a la inicialización anterior de MobileServiceClient para usar la dirección URL de aplicación móvil correcta.Open App.xaml.cs in the shared project, and uncomment your previous initialization of MobileServiceClient to use the correct the mobile app URL.

  2. Presione la tecla F5 para volver a compilar y ejecutar el proyecto.Press the F5 key to rebuild and run the app. La aplicación sincroniza los cambios locales con el back-end de Azure Mobile App mediante las operaciones de inserción y extracción una vez que se ejecuta el controlador de eventos OnNavigatedTo.The app syncs your local changes with the Azure Mobile App backend using push and pull operations when the OnNavigatedTo event handler executes.

  3. (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 del back-end de la aplicación móvil de Azure y el almacén local.Notice the data has been synchronized between the Azure Mobile App backend database and the local store.

  4. En la aplicación, haga clic en la casilla situada junto a algunos elementos para completarlos en el almacén local.In the app, click the check box beside a few items to complete them in the local store.

    UpdateCheckedTodoItem llama a SyncAsync para sincronizar cada elemento completado con el back-end de Mobile App.UpdateCheckedTodoItem calls SyncAsync to sync each completed item with the Mobile App backend. SyncAsync llama a las operaciones de inserción y extracción.SyncAsync calls both push and pull. Sin embargo, cada vez que se ejecuta una incorporación de cambios en una tabla en la que el cliente ha realizado cambios, siempre se ejecuta automáticamente una inserción .However, whenever you execute a pull against a table that the client has made changes to, a push is always executed automatically. De este modo se garantiza la coherencia de todas las tablas del almacén local, junto con sus relaciones.This behavior ensures all tables in the local store along with relationships remain consistent. Este comportamiento puede provocar una inserción inesperada.This behavior may result in an unexpected push. Para obtener más información sobre este comportamiento, consulte Sincronización de datos sin conexión en Aplicaciones móviles de Azure.For more information on this behavior, see Offline Data Sync in Azure Mobile Apps.

Resumen de la APIAPI Summary

Para admitir las características sin conexión de Mobile Services, se usa la interfaz IMobileServiceSyncTable y se inicializa MobileServiceClient.SyncContext con una base de datos SQLite local.To support the offline features of mobile services, we used the IMobileServiceSyncTable interface and initialized MobileServiceClient.SyncContext with a local SQLite database. En el modo sin conexión, las operaciones CRUD normales para Mobile Apps funcionan como si la aplicación siguiera conectada y todas las operaciones se producen en el almacén local.When offline, the normal CRUD operations for Mobile Apps work as if the app is still connected while the operations occur against the local store. Cuando se quiera sincronizar el almacén local con el servidor, se usan los métodos siguientes:The following methods are used to synchronize the local store with the server:

  • PushAsync : como este método es miembro de IMobileServicesSyncContext, los cambios de todas las tablas se insertan en el back-end.PushAsync Because this method is a member of IMobileServicesSyncContext, changes across all tables are pushed to the backend. Solo se envían al servidor los registros con cambios locales.Only records with local changes are sent to the server.
  • PullAsync : se inicia una extracción desde IMobileServiceSyncTable.PullAsync A pull is started from a IMobileServiceSyncTable. Cuando haya cambios marcados en la tabla, se ejecuta una inserción implícita para asegurarse de que todas las tablas del almacén local junto con las relaciones siguen siendo coherentes.When there are tracked changes in the table, an implicit push is run to make sure that all tables in the local store along with relationships remain consistent. El parámetro pushOtherTables controla si se insertan otras tablas del contexto en una inserción implícita.The pushOtherTables parameter controls whether other tables in the context are pushed in an implicit push. El parámetro query toma la cadena de consulta de OData o IMobileServiceTableQuery<T> para filtrar los datos devueltos.The query parameter takes an IMobileServiceTableQuery<T> or OData query string to filter the returned data. El parámetro queryId se utiliza para definir la sincronización incremental. Para más información, consulte Sincronización de datos sin conexión en Azure Mobile Apps.The queryId parameter is used to define incremental sync. For more information, see Offline Data Sync in Azure Mobile Apps.
  • PurgeAsync : su aplicación debe llamar periódicamente a este método para purgar datos obsoletos del almacén local.PurgeAsync Your app should periodically call this method to purge stale data from the local store. Utilice el parámetro force cuando necesite purgar todos los cambios que aún no se hayan sincronizado.Use the force parameter when you need to purge any changes that have not yet been synced.

Para obtener más información sobre estos conceptos, consulte Sincronización de datos sin conexión en Azure Mobile Apps.For more information about these concepts, see Offline Data Sync in Azure Mobile Apps.

Más informaciónMore info

En los temas siguientes se ofrece información de fondo adicional sobre la característica de sincronización sin conexión de Mobile Apps:The following topics provide additional background information on the offline sync feature of Mobile Apps: