Não faz muito tempo, escrevi sobre o uso de Couchbase em um aplicativo Ionic 2. No exemplo anterior, vimos como usar o Couchbase Lite e a API RESTful para salvar dados e trabalhar com o Couchbase Sync Gateway. Embora essa seja a abordagem preferida, ela não é a única.

Há uma excelente biblioteca JavaScript chamada PouchDB que pode realmente se conectar ao Couchbase Sync Gateway, tirando o Couchbase Lite da equação. Isso significa que o PouchDB pode ser usado com o Ionic 2 para sincronizar dados entre o Couchbase Server e qualquer aplicativo que tenha sido criado.

Então, como podemos fazer isso acontecer?

Os requisitos

Se você viu o tutorial anterior, os requisitos aqui não serão diferentes. Eles são os seguintes:

  • Node.js 4.0+
  • Estrutura iônica 2.0
  • Gateway de sincronização do Couchbase
  • Android SDK para Android e Xcode para iOS

A CLI do Ionic Framework 2.0 é usada para criar e desenvolver aplicativos. Ele usa o Node Package Manager (NPM) encontrado com o Node.js para baixar todas as dependências. Não sincronizaremos com o Couchbase Server neste exemplo, mas ainda usaremos o Couchbase Sync Gateway. O plano aqui é usar a opção na memória que o Sync Gateway tem para prototipagem. Incluir o Couchbase Server não é difícil depois disso.

Preparando o Couchbase Sync Gateway

O Couchbase Sync Gateway lida com toda a orquestração de dados entre dispositivos, plataformas e o Couchbase Server. Isso inclui todas as permissões de leitura e gravação. Por isso, ele precisa ter sua própria configuração com base nas necessidades de seu aplicativo.

Veja a configuração a seguir, por exemplo:

A configuração acima cria um banco de dados chamado exemplo sem regras em termos de canalização de dados. Isso significa que todos os dispositivos poderão ler e gravar. Suas necessidades podem ser diferentes.

Na parte inferior da configuração, há informações sobre o compartilhamento de recursos entre origens (CORS). A parte inferior não é necessária, a menos que você planeje usar recursos como serviço iônico. A tentativa de acessar o Sync Gateway a partir do mesmo host, mas de uma porta diferente, gerará erros de JavaScript. A adição do CORS evitará isso. Mais uma vez, isso ocorre somente se você desejar servir o aplicativo em seu navegador da Web. A execução do aplicativo em seu dispositivo não apresentará problemas.

Criação de um aplicativo Ionic Framework com PouchDB

O aplicativo que criaremos será semelhante ao que criamos anteriormente com o Couchbase Lite e o Ionic 2. Criaremos um aplicativo simples de lista de tarefas que sincroniza os itens entre dispositivos.

Couchbase with Ionic 2 and PouchDB

Este é um aplicativo de página única, mas abrange todas as práticas recomendadas necessárias do Ionic 2 e do Angular 2. Para criar esse projeto, execute o seguinte em seu prompt de comando (Windows) ou terminal (Mac e Linux):

Os comandos acima criarão um novo projeto Ionic 2 que usa Angular 2 e TypeScript. Embora eu tenha adicionado as plataformas de compilação Android e iOS, você não poderá compilar para iOS a menos que esteja usando um Mac com o Xcode instalado.

Como este projeto usará PouchDBele precisa ser instalado em nosso projeto. Isso pode ser feito executando o seguinte comando:

O PouchDB é um projeto JavaScript e não tem suporte adequado para TypeScript. Isso não é um problema, pois podemos contornar o obstáculo da falta de definições de tipos. No entanto, precisaremos obter definições de tipo para outra biblioteca que carregará o plug-in.

Na linha de comando, execute o seguinte:

A instalação das definições de tipo do Node.js nos permitirá usar o exigir que é essencial ao importar dependências de JavaScript.

Há mais uma dependência de JavaScript para o nosso projeto, mas, desta vez, não precisamos nos preocupar com o fato de as definições de tipo não existirem. Precisamos instalar uma biblioteca para gerar valores de identificação exclusivos que representarão nossas chaves de documento. Essa biblioteca pode ser instalada por meio do seguinte comando:

O comando acima instalará a biblioteca e suas definições de tipo para o TypeScript.

Neste ponto, podemos nos concentrar no desenvolvimento do nosso aplicativo!

Desenvolvendo o provedor compartilhado do Angular 2

É uma boa prática em qualquer aplicativo Angular 2 manter a atividade relacionada ao banco de dados separada no que é conhecido como provedor compartilhado ou serviço compartilhado. Isso nos permite ter uma instância de banco de dados única e manter nosso código de banco de dados fora da lógica da página.

Para criar um provedor no Ionic 2, execute o seguinte comando:

O comando acima deve criar um arquivo em src/providers/pouchdb-provider.ts com o qual podemos trabalhar. Abra esse novo arquivo e inclua o seguinte código:

Antes de começarmos a preencher cada um dos métodos, vamos detalhar o que temos até o momento.

Esse provedor poderá ser injetado em cada uma das páginas que desejamos usar. Como o PouchDB nos permite sincronizar alterações, queremos poder emitir essas alterações e assiná-las, por isso a necessidade do provedor Emissor de eventos importar. A biblioteca do PouchDB é importada como o JavaScript padrão.

Queremos manter apenas uma instância do banco de dados aberta e podemos fazer isso usando um isInstantiated variável. Isso é feito na variável construtor método assim:

Com um banco de dados aberto, queremos poder trabalhar com os dados. O PouchDB tem suas próprias APIs para trabalhar com dados, mas, como se trata de JavaScript básico, algumas coisas devem ser aprimoradas em nosso provedor para torná-lo mais amigável ao Angular 2.

A obtenção de todos os dados pode ser feita usando o todos os documentos no PouchDB. Ao incluir o método incluir_docs os dados do documento são incluídos em vez de apenas os valores de id.

Se você souber o ID do documento que está procurando, poderá fazer uma pesquisa diretamente em vez de consultar todos os documentos. O salvamento de documentos é o ponto em que as coisas podem ficar um pouco confusas:

No exemplo acima colocar temos uma maneira de criar ou atualizar um documento. Os documentos que não têm revisão são criados, caso contrário, são atualizados. Isso é possível fazendo primeiro uma pesquisa em um documento pelo seu ID. Se o documento existir, use a revisão e atualize-o; caso contrário, crie-o.

Sem a sincronização, você não está tecnicamente usando o Couchbase em sua pilha. Além disso, há soluções muito melhores para dados do que o PouchDB se você estiver procurando apenas um banco de dados local. Dito isso, as informações acima sincronização permitirá que você se conecte a um banco de dados remoto. Nosso banco de dados remoto é, na verdade, uma instância do Sync Gateway em execução. Estamos optando por fazer uma sincronização bidirecional com o Sync Gateway e emitindo as alterações para a instância Emissor de eventos no Angular 2.

Quando quisermos assinar essas alterações, devemos primeiro obter uma cópia do ouvinte que as está emitindo.

Neste ponto, o provedor do Angular 2 está completo, mas não está pronto para ser usado. Ele precisa ser adicionado à seção @NgModule encontrado no bloco src/app/app.module.ts arquivo. O arquivo seria parecido com o seguinte:

Observe como o provedor foi importado e, em seguida, adicionado ao provedores array. Agora ele pode ser usado em cada página do nosso aplicativo.

Adição da lógica do PouchDB para salvar e sincronizar

O restante do nosso aplicativo é, na verdade, bastante simples, agora que estabelecemos a base para o nosso camada de dados. Lembre-se de que este é um aplicativo muito simples, mas altamente orientado por dados.

Abra o arquivo src/pages/home/home.ts e inclua o seguinte código:

No código acima, estamos importando vários componentes do Ionic e do Angular 2, bem como nosso provedor PouchDB e a biblioteca UUID. Muitos desses componentes são injetados na seção construtor método. O construtor também inicializa nossa matriz pública que será vinculada à interface do usuário. Essa matriz conterá os dados que sincronizamos com o PouchDB.

Embora possamos inicializar nossas variáveis no construtor nunca é uma boa ideia carregar dados neles no método construtor método. Em vez disso, devemos usar o método Ionic ionViewDidEnter método:

No exemplo acima ionViewDidEnter estamos iniciando a sincronização bidirecional com o PouchDB e o Couchbase Sync Gateway. O nome do host é o da minha instância do Couchbase Sync Gateway em execução no momento. O banco de dados não precisa corresponder ao meu banco de dados local.

Quando estivermos sincronizando, também assinaremos o ouvinte de alterações. Este é um aplicativo simples, portanto, não nos preocuparemos em alterar ou excluir dados, apenas em adicionar dados. Os ouvintes podem ser um pouco duvidosos no Angular 2, pois há uma desconexão entre a interface do usuário e os dados. Essa desconexão pode ser corrigida adicionando os dados do listener em um zone.run método.

Com o aplicativo assinando as alterações, precisamos fazer uma primeira consulta dos dados quando o aplicativo for aberto. Queremos buscar todos os dados e adicioná-los à nossa matriz pública.

O último método que temos é o inserir e é principalmente orientado pelo Ionic:

Aqui criamos um pop-up de prompt. Quando o botão Salvar é pressionado, o texto no formulário é salvo no PouchDB. O ID do documento é gerado exclusivamente com a biblioteca UUID.

Então, qual é a aparência de nossa interface do usuário?

Criação de uma interface de usuário simples com HTML

A interface do usuário é a parte mais fácil porque o aplicativo é muito simples. Abra a seção src/pages/home/home.html e inclua a seguinte marcação HTML:

A interface do usuário tem uma barra de ação com um botão que, quando pressionado, aciona o inserir encontrado em nosso TypeScript. O conteúdo principal da interface do usuário é uma lista que percorre a matriz pública imprimindo cada item na tela.

Execução do projeto para teste

Passamos por muitos conceitos e muito código. Para facilitar a vida, eu fez o upload de um projeto funcional no GitHub, que você pode baixar e testar por si mesmo.

Com o download do projeto, execute os seguintes comandos para restaurar as dependências, os plug-ins e as plataformas:

Desde que você não se esqueça de atualizar o sincronização encontrado no método src/pages/home/home.ts com o host do Sync Gateway, o projeto deve poder ser executado.

Conclusão

Você acabou de ver como criar um aplicativo para Android e iOS que sincroniza usando o Ionic 2, o PouchDB e o Couchbase. Esse é um método alternativo ao método guia anterior que escrevi e que usa o Couchbase Lite.

Autor

Postado por Nic Raboy, defensor dos desenvolvedores, Couchbase

Nic Raboy é um defensor das modernas tecnologias de desenvolvimento móvel e da Web. Ele tem experiência em Java, JavaScript, Golang e uma variedade de estruturas, como Angular, NativeScript e Apache Cordova. Nic escreve sobre suas experiências de desenvolvimento relacionadas a tornar o desenvolvimento móvel e da Web mais fácil de entender.

Deixar uma resposta