Adicionar sincronização de dados offline ao seu aplicativo Apache Cordova

Artigo
05/05/2021

Observação

Este produto foi retirado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca Community Toolkit Datasync.

Este tutorial aborda o recurso de sincronização offline dos Aplicativos Móveis do Azure para o aplicativo de início rápido Apache Cordova. A sincronização offline permite que os usuários finais interajam com um aplicativo móvel, visualizando, adicionando ou modificando dados, mesmo quando não há conexão de rede. As alterações são armazenadas em um banco de dados local. Quando o dispositivo estiver online novamente, essas alterações serão sincronizadas com o back-end remoto.

Antes de iniciar este tutorial, você deve ter concluído o Apache Cordova Quickstart Tutorial, que inclui a criação de um serviço de back-end adequado.

Para saber mais sobre o recurso de sincronização offline, consulte o tópico Sincronização de Dados Offline em Aplicativos Móveis do Azure.

Atualizar a aplicação para suportar a sincronização offline

Na operação online, você usa getTable() para obter uma referência à tabela online. Ao implementar recursos offline, você usa getSyncTable() para obter uma referência ao armazenamento SQlite offline. A loja SQlite é fornecida pelo plugin Apache Cordova cordova-sqlite-storage.

Observação

A sincronização offline só está disponível para Android e iOS. Ele não funcionará dentro da especificação da plataforma do navegador.

No ficheiro www/js/index.js:

Atualize o método initializeStore() para inicializar o banco de dados SQlite local:

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);
}

Atualize o método setup() para usar a versão offline da tabela:

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

Substitua o método syncLocalTable() que sincronizará os dados na loja offline com a loja online:

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

Crie o aplicativo

Execute os seguintes comandos para criar o aplicativo Android:

cordova clean android
cordova build android

Você pode executar o aplicativo:

cordova run android

Teste no Visual Studio Code

Você pode usar o depurador no Visual Studio Code se tiver a extensão Cordova Tools instalada. Clique no depurador e, em seguida, crie um ficheiro launch.json. Quando solicitado, selecione Cordovae, em seguida, selecione as configurações (como Executar Android no emulador). Depois de criar uma configuração de inicialização, você pode executar o aplicativo no depurador. Ele será lançado em seu emulador de escolha. No entanto, agora você poderá ver a saída de depuração em seu console de depuração.

Testar a aplicação

Nesta seção, teste o comportamento com o WiFi ativado e desative o WiFi para criar um cenário offline.

Os itens na lista todo são armazenados em um banco de dados SQLite no dispositivo. Quando você atualiza os dados, as alterações são enviadas para o serviço (push). Em seguida, o aplicativo solicita novos itens (pull). No tutorial, a atualização é selecionada pressionando um ícone ou usando "pull to refresh".

Coloque o dispositivo ou simulador em Modo Avião.
Adicione alguns itens Todo ou marque alguns itens como concluídos.
Feche o dispositivo ou simulador (ou feche o aplicativo à força) e reinicie o aplicativo.
Verifique se as alterações foram persistentes no dispositivo.
Exiba o conteúdo da tabela de do Azure TodoItem. Use uma ferramenta SQL, como SQL Server Management Studio, ou um cliente REST, Curl. Verifique se os novos itens não foram sincronizados com o servidor
Ligue o Wi-Fi no dispositivo ou simulador.
Atualize os dados, seja "puxando para atualizar" ou pressionando o ícone de atualização.
Revise os dados da tabela TodoItem novamente. Os itens novos e alterados devem aparecer agora.

Próximos passos

Continue a implementar autenticação.

Partilhar via