Adición de la sincronización de datos sin conexión a la aplicación MAUI de .NET

  • Artículo

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 .NET MAUI. La sincronización sin conexión permite a los usuarios finales interactuar con una aplicación móvil 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 .NET MAUI , 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, leerá y escribirá desde un IRemoteTable<T>. Al usar la sincronización sin conexión, lee y escribe desde un IOfflineTable<T> en su lugar. El IOfflineTable está respaldado por una base de datos SQLite en el dispositivo y sincronizada con la base de datos back-end.

En Visual Studio:

  1. Haga clic con el botón derecho en la solución TodoApp y seleccione Administrar paquetes NuGet para la solución....

  2. En la nueva pestaña, seleccione Examinary escriba Microsoft.Datasync.Client en el cuadro de búsqueda.

    Captura de pantalla de la adición de NuGet sin conexión en Visual Studio.

  3. Seleccione el paquete Microsoft.Datasync.Client.SQLiteStore.

  4. En el panel derecho, seleccione todos los proyectos de cliente (excepto el proyecto de TodoAppService.NET6).

  5. Seleccione Instalar.

  6. Acepte el contrato de licencia cuando se le solicite.

Actualización del cliente de servicio remoto

Abra el proyecto de TodoApp.Data y busque la clase RemoteTodoService.cs (en el directorio Services). Actualice la clase de la siguiente manera:

  1. Agregue la siguiente instrucción using en la parte superior del archivo:

    using Microsoft.Datasync.Client.SQLiteStore;

  2. Cambie la definición de _table para que sea una IOfflineTable<TodoItem>:

    /// <summary>
/// Reference to the table used for datasync operations.
/// </summary>
private IOfflineTable<TodoItem> _table = null;

  3. Agregue una nueva propiedad para almacenar la ubicación de la base de datos sin conexión:

    /// <summary>
/// The path to the offline database
/// </summary>
public string OfflineDb { get; set; }

  4. Actualice el método InitializeAsync para definir la base de datos sin conexión:

    // Create the offline store definition
var connectionString = new UriBuilder { Scheme = "file", Path = OfflineDb, Query = "?mode=rwc" }.Uri.ToString();
var store = new OfflineSQLiteStore(connectionString);
store.DefineTable<TodoItem>();
var options = new DatasyncClientOptions
{
    OfflineStore = store,
    HttpPipeline = new HttpMessageHandler[] { new LoggingHandler() }
};

// Create the datasync client.
_client = TokenRequestor == null 
    ? new DatasyncClient(Constants.ServiceUri, options)
    : new DatasyncClient(Constants.ServiceUri, new GenericAuthenticationProvider(TokenRequestor), options);

// Initialize the database
await _client.InitializeOfflineStoreAsync();

// Get a reference to the offline table.
_table = _client.GetOfflineTable<TodoItem>();

// Set _initialized to true to prevent duplication of locking.
_initialized = true;

  5. Actualice el RefreshItemsAsync() para realizar la sincronización sin conexión:

    /// <summary>
/// Refreshes the TodoItems list manually.
/// </summary>
/// <returns>A task that completes when the refresh is done.</returns>
public async Task RefreshItemsAsync()
{
    await InitializeAsync();

    // First, push all the items in the table.
    await _table.PushItemsAsync();

    // Then, pull all the items in the table.
    await _table.PullItemsAsync();

    return;
}

Establecimiento de la ubicación de la base de datos sin conexión

En el proyecto TodoApp.MAUI, edite el archivo MainPage.xaml.cs. Cambie la definición del RemoteTodoService de la manera siguiente:

TodoService = new RemoteTodoService(GetAuthenticationToken)
{
    OfflineDb = FileSystem.CacheDirectory + "/offline.db"
};

Si no ha completado el tutorial de autenticación de , la definición debería tener este aspecto en su lugar:

TodoService = new RemoteTodoService()
{
    OfflineDb = FileSystem.CacheDirectory + "/offline.db"
};

Prueba de la aplicación

La aplicación no se sincroniza con el back-end hasta que se presiona el icono de actualización. Para probar:

  1. Abra elAzure Portal.

  2. Abra el grupo de recursos que contiene los recursos del inicio rápido.

  3. Seleccione la base de datos quickstart.

  4. Seleccione el editor de consultas de (versión preliminar).

  5. Inicie sesión con la autenticación de SQL Server con las mismas credenciales que configuró para la base de datos.

    • Si es necesario, se le pedirá que permita el acceso a la dirección IP. Seleccione el vínculo para actualizar la lista de permitidos y presione Aceptar para reintentar el inicio de sesión.

  6. En el editor de consultas, escriba SELECT * FROM [dbo].[TodoItems]. A continuación, seleccione Ejecutar.

Se mostrará una lista de todoItems actuales.

Captura de pantalla de los resultados en el editor de consultas S Q L.

Ahora, realice algunos cambios a través de la aplicación. NO PRESIONE ACTUALIZAR (todavía).

Repita la instrucción SQL en Azure Portal y compruebe que no se han realizado cambios en los datos de la base de datos.

Seleccione el icono actualizar de la aplicación para insertar los datos en cola en el servicio back-end. Verá que las transacciones HTTP se producen en la ventana Depuración de salida.

Repita la instrucción SQL en Azure Portal y compruebe que los cambios se han insertado en el servicio remoto.

Limpieza de recursos

A menos que realice otro tutorial de inicio rápido, puede eliminar los recursos asociados al servicio back-end ahora.

  1. Abra elAzure Portal.
  2. Seleccione el grupo de recursos que contiene los recursos de inicio rápido.
  3. Seleccione Eliminar grupo de recursos.
  4. Siga las instrucciones para confirmar la eliminación.

También puede usar la CLI de Azure:

az group delete -g quickstart

Si usó la CLI para desarrolladores de Azure para implementar recursos, puede usar el comando azd down en su lugar.

La eliminación tardará unos minutos en completarse.

Pasos siguientes