Criar Aplicativos da Web Offline em Dispositivos Móveis e Estacionários com o CouchDB

Um dos maiores desafios de aplicativos remotos é a sincronicidade de dados. Uma solução interessante para o problema é utilizar o CouchDB do banco de dados de NoSQL. O CouchDB, um banco de dados orientado a documentos, é uma alternativa aos bancos de dados de SQL. Com ele, é possível utilizar funções em nuvem em dispositivos móveis, trabalhar offline com um aplicativo implementado localmente em um armazenamento de dados local e compartilhar dados com o resto da nuvem quando voltar a ficar online. Neste artigo, conheça os conceitos do CouchDB criando e implementando um aplicativo de amostra.

Dietmar Krueger, IT Architect, IBM

Photo of Dietmar KruegerDietmar Krueger trabalha para o Application Innovation Services, uma Linha de Serviço do IBM Global Business Services. Desenvolveu softwares orientados a objetos por 17 anos. Dietmar é apaixonado pelo desenvolvimento de softwares ágeis, arquiteturas leves e linguagens de programação de tipo dinâmico.



01/Out/2012

Introdução

Um mecanismo de sincronicidade de SQL baseado em bancos de dados distribuídos, como aquele integrado em navegadores HTML5, resulta em esforços complexos. O Apache CouchDB possui uma base de sincronização inerente. (Consulte Recursos para obter mais informações sobre a sincronização do CouchDB.) Neste artigo, conheça os conceitos e detalhes técnicos do CouchDB ao percorrer um cenário de uso típico. Um protótipo de um aplicativo de gerenciamento de inventário simples será criado e implementado.

Um aplicativo semelhante, baseado nos conceitos do HTML5, foi apresentado em meu artigo anterior do developerWorks, "Criar Aplicativos da Web Offline em Dispositivos Móveis com o HTML5", mas a sincronização não foi abordada. Para este artigo, migrei o aplicativo utilizando os recursos de sincronização padrão e de armazenamento do ambiente do CouchDB. É possível efetuar o download do código fonte utilizado neste artigo a partir da tabela Download abaixo.

Visão geral

A Figura 1 mostra uma visão geral dos principais componentes da arquitetura do aplicativo de amostra do CouchDB e a solução HTML5/SQL do artigo anterior. As duas soluções contêm HTML, JavaScript, armazenamento de dados local e armazenamento de dados remoto.

Figura 1. Principais elementos de um aplicativo offline do CouchDB
Principais elementos de um aplicativo offline do CouchDB
Página HTML
O núcleo do aplicativo HTML5 e CouchDB. Possui a função modelo e contém os dados exibidos e as informações de renderização (padrão). Os elementos HTML da página são organizados em uma hierarquia da árvore do Modelo de Objeto de Documento do HTML.

Eventos inicializados no usuário causam um ciclo convencional de resposta à solicitação com um carregamento de página e a execução das funções JavaScript associadas. Notavelmente, esses aplicativos consistem em uma única página HTML sem a necessidade de carregar mais páginas por meio de ciclos de resposta à solicitação. Toda a ação encontra-se em uma página.

JavaScript
Contém as funções de controlador do aplicativo HTML5 e CouchDB. Os elementos HTML são ligados a funções JavaScript por manipuladores de evento. O JavaScript pode acessar a árvore de DOM do HTML do aplicativo com todos os elementos da interface com o usuário e pode utilizá-la como entrada de dados para cálculo. Os resultados do processamento podem ser apresentados ao usuário modificando a página HTML.
Armazenamento de dados local
O banco de dados de SQL do aplicativo HTML5 baseia-se em um esquema e utiliza as junções para combinar dados de diversas tabelas. O armazenamento de dados de um aplicativo CouchDB não possui nenhum esquema — os documentos são armazenados e recuperados como documentos do JSON. Não há necessidade de reunir dados utilizando junções.

Para gerenciar dados, o banco de dados de SQL utiliza consultas de SQL. O CouchDB possui uma abordagem RESTful: Todo documento é um recurso RESTful com métodos de HTTP utilizados para solicitações.

Armazenamentos de dados remotos
A infraestrutura do aplicativo consiste em uma rede de nós de armazenamento de dados que replicam entre si. No mundo de banco de dados relacionais de SQL, é necessário compor ou gerenciar uma infraestrutura de replicação complicada.

Na arquitetura do CouchDB de NoSQL, uma estrutura de replicação padrão é fornecida. Na verdade, a execução da mesclagem de documentos conflitantes é uma função específica do aplicativo (consulte Recursos). Esse é um dos recursos mais eficientes do CouchDB.

Aplicativo de exemplo

Esta seção fornece uma visão geral do aplicativo de amostra MyHomeStuff, que oferece gerenciamento de inventário simples para manter o controle dos itens possuídos. É funcionalmente equivalente à versão HTML5. A Figura 2 mostra o aplicativo em um navegador Firefox® no Windows®.

Figura 2. Sistema de gerenciamento de inventário em um navegador Firefox no Windows
Sistema de gerenciamento de inventário em um navegador Firefox no Windows

O aplicativo em um navegador da web do Android™ é mostrado abaixo.

Figura 3. Sistema de gerenciamento de inventário no Android
Sistema de gerenciamento de inventário no Android

O aplicativo permite o manter o controle dos itens possuídos. A lista da parte superior da tela fornece uma visão geral de todos os itens inseridos, como livros. Ao selecionar um item na lista, os detalhes (Qty e Name) do item são exibidos no meio do formulário. Eles podem ser alterados utilizando o botão Update ou o item selecionado pode ser excluído do aplicativo com o botão Delete. Novos itens podem ser criados inserindo sua quantidade e nome no formulário e selecionando Create.

O usuário pode iniciar um processo de replicação na parte inferior da tela. O processo é operado inserindo a URL do CouchDB de origem e de destino e ativando o botão Replicate. O CouchDB de destino pode ser um banco de dados local ou remoto existente.

Detalhes do HTML

A página HTML contém declarações, referências aos arquivos JavaScript externos e elementos HTML essenciais, que formam a estrutura básica do aplicativo. A Listagem 1 mostra o código.

Listagem 1. Código HTML
<!DOCTYPE html>
<html>
  <head>
  	<title>MyHomeStuff2</title>
  	<script src="/_utils/script/jquery.js"></script>
  	<script src="/_utils/script/jquery.couch.js"></script>
  	<script src="script.js"></script>
  </head>
  <body>
  
    <h3>Overview</h3>
    <ul id="itemData" ></ul>

    <h3>Details</h3>
    <form name="itemForm">
        <input type="hidden" name="id" id="idId" />
        <input type="hidden" name="rev" id="revId"/>
        <label for="amount">Qty: </label>
        <input type="text" name="amount" id="amountId" size = 3/>
        <label for="name">Name: </label>
        <input type="text" name="name" id="nameId" size=12 />
        <br><br>
        <input type="button" id="createId" value="create" />
        <input type="button" id="updateId" value="update" />
        <input type="button" id="deleteId" value="delete" />
    </form>
   
    <h3>Replicate</h3>
    <form>
        <label for="sourceDBId">Source: </label>
        <input id="sourceDBId" type="text"></input>
        <br><br>
        <label for="targetDBId">Target: </label>
        <input id="targetDBId" type="text"></input>
        <br><br>
        <input id="replicateId" type="button" value="replicate"></input>
   </form>
   
  </body>
</html>

Como a biblioteca jQuery é utilizada na parte do JavaScript, a página HTML não contém nenhum atributo do manipulador de eventos. Os manipuladores de eventos (de clique) são ligados a partir do código JavaScript às ações do formulário HTML.

A Biblioteca jquery.couch.js do JavaScript é utilizada para interagir com CouchDBs. Ela simplifica a comunicação utilizando o JavaScript direto. Por exemplo, db.saveDoc(aTask) é utilizado, em vez de ter que desenvolver comunicações para ações CRUD de RESTful (por exemplo, PUT /tutorial/task/4 ...).

Para o desenvolvimento de aplicativos mais avançados, é preciso utilizar a estrutura do CouchApp. O CouchApp consiste em um conjunto de scripts que simplifica o desenvolvimento de aplicativos do CouchDB (consulte Recursos para obter informações adicionais).

Detalhes do JavaScript

O código do JavaScript consiste em três blocos principais:

  • Funções de inicialização
  • Funções db (crud) e de atualização da visualização
  • Função de replicação

O primeiro bloco contém o código de inicialização para o armazenamento de dados e a visualização, como mostra a Listagem 2.

Listagem 2. Código refreshItems do JavaScript
var db = $.couch.db(getCurrentDBName());

function getCurrentDBName() {
    return window.location.pathname.split("/")[1];
}

$(document).ready(function() {
    //1. init stuff
    refreshItems();
    $('#sourceDBId').val(db.name);
    $('#targetDBId').val(db.name + "-copy");
    
    //2. event handler crud stuff
    ...
});

function refreshItems() {
    $("ul#itemData").empty();
      
    db.view("myDesign/myView", {
        success: function(data){
            data.rows.map(function(row) {
            $('ul#itemData').append('<li id="'+row.value._id+'">'
                +row.value.amount
                +" x "
                +row.value.name
                +'</li>');
                     
            $('#'+row.value._id).click(function() {
                $('#idId').val(row.value._id);
                $('#revId').val(row.value._rev);
                $('#amountId').val(row.value.amount);
                $('#nameId').val(row.value.name);
                return false;
            });
            });
        },
        error: function(req, textStatus, errorThrown){alert('Error '+ textStatus);}
        });
}

No código acima:

  • Uma instância do CouchDB é criada. O nome do banco de dados é extraído da URL atual.
  • A função ready do documento é chamada depois do DOM ter sido inicializado. No entanto, primeiro, ela chama a função refreshItems e preenche os campos do formulário de replicação com os nomes dos bancos de dados de origem e de destino.
  • A função refreshItems consulta os registros existentes e preenche a página HTML com os dados, como segue:
    • Os dados antigos são removidos da árvore de DOM.
    • O CouchDB é consultado. A ferramenta primária para consultar e relatar o CouchDB são as visualizações.

      A consulta é executada com um manipulador de sucesso e uma função de manipulador de erros. A função de visualização executa uma consulta de RESTful utilizando um GET HTTP. A visualização consiste em uma função de mapa que transforma cada documento com campos de nome e quantidade em pares de valores de chave com o ID como chave e documento como valor (consulte a seção Implementação para a função de mapa da Visualização myView).

    • O manipulador de sucesso cria um elemento da lista de HTML para cada valor e anexa-o à lista. Um manipulador de clique de eventos é incluído a cada elemento da lista para responder em um clique preenchendo os campos com a seleção.
    • O manipulador de erros exibe problemas com o diálogo de alertas.

Os manipuladores de eventos estão na segunda parte da função refreshItems , que contém o manipulador de eventos para a barra de botões e a lista com update, delete e create. A Listagem 3 mostra o código para update. (Create e delete possuem uma estrutura semelhante, portanto, não são mostrados aqui. É possível efetuar o download de todo o código fonte para o aplicativo de exemplo a partir da tabela Download abaixo.)

Listagem 3. Código update do JavaScript
...
    //event handler crud stuff
...
    $('input#updateId').click(function(e) {
         
       if ($('#idId').val().length == 0) {
           return;
       }
       
       var aTask = {
           _id: $('#idId').val(),
           _rev: $('#revId').val(),
           amount: $('#amountId').val(),
           name:$('#nameId').val()
       }
       db.saveDoc(aTask, { success: function(resp) {
           refreshItems();
       }});
    });
...

No código acima:

  • Os valores do campo do formulário estão prontos e validados.
  • Se os valores forem válidos, um objeto JSON é criado e a chamada de atualização será executada utilizando PUT HTTP para a atualização.
  • O resultado da consulta é exibido na página HTML atualizada por meio do manipulador de sucesso.

O código para as funções de replicação é bastante denso, como mostra a Listagem 4.

Listagem 4. Código de replicação do JavaScript
$('#replicateId').click(function() {
    var sourceDB = $('#sourceDBId').val();
    var targetDB = $('#targetDBId').val();
    $.couch.replicate(sourceDB, targetDB, {
        success: function(data){alert('Replication was performed');},
        error: function(req, textStatus, errorThrown){alert('Error '+ textStatus);}
    });
});

No código acima:

  • Os valores do campo do formulário de replicação estão prontos.
  • A chamada de replicação será executada.
  • O resultado das replicações são mostrados como uma caixa de alerta, ativada por meio do manipulador de sucesso ou de erros.

Implementação

Se o CouchDB estiver instalado em seu computador, é possível executar o exemplo. O CouchDB possui instaladores diferentes para o Linux®, Windows, Mac® e Android (2.1 ou superior; no momento da composição deste artigo, a porta do Android estava na versão alfa 0.50, portanto, tenha cautela). Alternativamente, é possível utilizar um serviço de hosting. Testei o hosting gratuito do CouchOne com sucesso (consulte Recursos).

Após a instalação do CouchDB, o recipiente está pronto para inserir o aplicativo baixado em algumas etapas.

  1. Crie o banco de dados para o aplicativo e os dados.
    • Clique em Create Database...
    • No diálogo Create New Database, preencha o campo Database Name (por exemplo, stuff_db) e clique em Create.
  2. Crie um documento com dados (para fins de teste).
    • Clique em New Document.
    • Clique em Add Field.
    • Insira name em Field e table em Value.

      Confirme com a marca de seleção verde ou com a tecla tab.

    • Clique em Add Field.
    • Insira amount em Field e 3 em Value. Confirme.
    • Clique em Save Document.

      Agora, os primeiros dados estão prontos para uma consulta.

  3. Crie uma Visualização e salve-a como Documento de Design.
    • Selecione Overview --> stuff_db.
    • Selecione View: Temporary view... (a partir da lista suspensa no canto superior esquerdo).
    • Insira a função Mapear:
      function(doc) {
        if (doc.name && doc.amount)
        {
          emit(doc._id, doc);
        }}

      Para cada documento no banco de dados que possui os campos Name e Amount com valores não nulos, uma linha de resultado é criada na visualização. A chave da linha é o ID do documento; o valor é o próprio documento.

    • Clique em Run para fins de teste. O resultado é o par de valores chave do documento inserido.
    • Clique em Save As...
    • No diálogo Save View As..., preencha o campo Design Document com _design/myDesign, o campo View Name: com myView e clique em Save.

      Agora, há um documento de design no qual o aplicativo do CouchDB pode ser armazenado.

  4. Consulte a visualização.
    • Insira no navegador:
      http://127.0.0.1:5984/stuff_db/_design/myDesign/_view/myView
    • Ele responde com os dados inseridos, que se parecem com:
      {"total_rows":1,"offset":0,"rows":[
      {"id":"c9938dc172b31a34ef4f0d7f3f000d5d",
      "key":"c9938dc172b31a34ef4f0d7f3f000d5d",
      "value":{"_id":"c9938dc172b31a34ef4f0d7f3f000d5d",
      "_rev":"3-d107f491d254b01c0135fd1e8dd13e0a",
      "table":null,"name":"table","amount":3}}
      ]}

      (Linhas quebradas artificialmente para fins de formatação.)

  5. Abra o novo Documento de Design com
    http://127.0.0.1:5984/_utils/document.html?stuff_db/_design/myDesign

    e faça o upload dos Anexos para o Documento de Design (para incluir as funções do aplicativo).
    • Selecione Upload Attachment com File, index.html e clique em Upload.
    • Selecione Upload Attachment com File, script.js e clique em Upload.
    • Clique em Save Document.
  6. Abra o aplicativo selecionando o Valor index.html no Campo _attachments do Documento de Design com
    http://127.0.0.1:5984/stuff_db/_design/myDesign/index.html
  7. Insira e altere alguns dados no aplicativo.

Após instalar o aplicativo de forma bem-sucedida, é possível implementá-lo em um banco de dados CouchDB diferente utilizando o mecanismo de replicação.

  1. Para simplificar, crie um novo banco de dados no mesmo nó do CouchDB (por exemplo, new-stuff-db).
  2. Insira as URLs dos bancos de dados CouchDB existentes. No campo Source, insira o nome do banco de dados de origem (stuff_db); e no campo Target, insira a URL de destino (new-stuff-db).
  3. Clique em replicate. Todo o banco de dados e o código de programação será replicado.

    Dados recém-inseridos podem ser simplesmente transferidos da replicação de volta ao banco de dados original da mesma forma.

  4. Tente replicar o banco de dados CouchDB para um nó do CouchDB mais remoto.

    Por exemplo, se você registrar o Hosting do CouchOne com um subdomínio, mysubdomain e criar um banco de dados denominado mydatabase, a URL de destino utilizada será:

    http://mysubdomain.couchone.com/mydatabase

Resumo

Neste artigo, vimos o ponto de vista técnico para aplicativos offline com o CouchDB. Um protótipo de um aplicativo de gerenciamento de inventário simples demonstrou a tecnologia do CouchDB com os recursos de sincronização padrão e armazenamento do JSON.


Download

DescriçãoNomeTamanho
Source code for this articleOfflineCouchDBAppSrc.zip3KB

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Desenvolvimento móvel
ArticleID=837943
ArticleTitle=Criar Aplicativos da Web Offline em Dispositivos Móveis e Estacionários com o CouchDB
publish-date=10012012