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

Artigo
05/05/2021

Nota

Este produto está desativado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca datasync do Kit de Ferramentas da Comunidade .

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 — exibindo, adicionando ou modificando dados — mesmo quando não há nenhuma conexão de rede. As alterações são armazenadas em um banco de dados local. Depois que 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 odo Tutorial de Início Rápido do Apache Cordova, 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 nos Aplicativos Móveis do Azure.

Atualizar o aplicativo para dar suporte à 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 repositório SQlite offline. O repositório SQlite é fornecido pelo plug-in do Apache Cordova cordova-sqlite-storage.

Nota

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 arquivo 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 no repositório offline com o repositório online:

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

Compilar 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

Testar no Visual Studio Code

Você pode usar o depurador no Visual Studio Code se tiver a extensão ferramentas Cordova instalada. Clique no depurador e crie um arquivo launch.json. Quando solicitado, selecione Cordova e, 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á iniciado em seu emulador de escolha. No entanto, agora você poderá ver a saída de depuração no console de depuração.

Testar o aplicativo

Nesta seção, teste o comportamento com WiFi ativado e, em seguida, 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 no modo avião.
Adicione alguns itens Todo ou marque alguns itens como concluídos.
Encerre o dispositivo ou simulador (ou feche o aplicativo à força) e reinicie o aplicativo.
Verifique se as alterações foram mantidas no dispositivo.
Exiba o conteúdo da tabela todoItem do Azure. Use uma ferramenta SQL como do SQL Server Management Studio ou um cliente REST Curl. Verifique se os novos itens não foram sincronizados com o servidor
Ative o WiFi no dispositivo ou simulador.
Atualize os dados, "efetuar pull para atualizar" ou pressionando o ícone de atualização.
Examine os dados da tabela TodoItem novamente. Os itens novos e alterados agora devem aparecer.

Próximas etapas

Continue implementando de autenticação.

Compartilhar via