Syncing with Couchbase in an Ionic 2 App using PouchDB

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:

{
    "log":["CRUD+", "REST+", "Changes+", "Attach+"],
    "databases": {
        "example": {
            "server":"walrus:",
            "sync":`
                function (doc) {
                    channel (doc.channels);
                }
            `,
            "users": {
                "GUEST": {
                    "disabled": false,
                    "admin_channels": ["*"]
                }
            }
        }
    },
    "CORS": {
        "Origin": ["http://localhost:8100"],
        "LoginOrigin": ["http://localhost:8100"],
        "Headers": ["Content-Type"],
        "MaxAge": 17280000
    }
}

{

"log":["CRUD+", "REST+", "Mudanças+", "Anexar+"],

"bancos de dados": {

"exemplo": {

"servidor":"walrus:",

"sync":`

função (doc) {

canal (doc.canais);

}

"usuários": {

"CONVIDADO": {

"desativado": falso,

"admin_channels": ["*"]

}

"CORS": {

"Origem": ["http://localhost:8100"],

"LoginOrigin": ["http://localhost:8100"],

"Headers" (Cabeçalhos): ["Content-Type"],

"MaxAge": 17280000

}

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.

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):

ionic start PouchDBProject blank --v2
cd PouchDBProject
ionic platform add ios
ionic platform add android

iônico iniciar Projeto PouchDB em branco --v2

cd Projeto PouchDB

iônico plataforma adicionar ios

iônico plataforma adicionar androide

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:

npm install pouchdb --save

1	npm instalar bolsadb --salvar

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:

npm install @type/node --save

1	npm instalar @tipo/nó --salvar

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:

npm install uuid @type/uuid --save

1	npm instalar uuid @tipo/uuid --salvar

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:

ionic g provider pouchdb-provider

1	iônico g provedor bolsadb-provedor

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:

import { Injectable, EventEmitter } from '@angular/core';
var PouchDB = require("pouchdb");

@Injectable()
export class PouchDBProvider {

    private isInstantiated: boolean;
    private database: any;
    private listener: EventEmitter = new EventEmitter();

    public constructor() { }

    public fetch() { }

    public get(id: string) { }

    public put(document: any, id: string) { }

    public sync(remote: string) { }

    public getChangeListener() { }

}

importação { Injetável, Emissor de eventos } de '@angular/core';

var PouchDB = exigir("pouchdb");

@Injetável()

exportação classe Provedor PouchDB {

privado isInstantiated: booleano;

privado banco de dados: qualquer;

privado ouvinte: Emissor de eventos = novo Emissor de eventos();

público construtor() { }

público buscar() { }

público obter(id: string) { }

público colocar(documento: qualquer, id: string) { }

público sincronização(remoto: string) { }

público getChangeListener() { }

}

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:

public constructor() {
    if(!this.isInstantiated) {
        this.database = new PouchDB("nraboy");
        this.isInstantiated = true;
    }
}

público construtor() {

se(!este.isInstantiated) {

este.banco de dados = novo PouchDB("nraboy");

este.isInstantiated = verdadeiro;

}

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.

public fetch() {
    return this.database.allDocs({include_docs: true});
}

público buscar() {

retorno este.banco de dados.todos os documentos({incluir_docs: verdadeiro});

}

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.

public get(id: string) {
    return this.database.get(id);
}

público obter(id: string) {

retorno este.banco de dados.obter(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:

public put(document: any, id: string) {
    document._id = id;
    return this.get(id).then(result =&gt; {
        document._rev = result._rev;
        return this.database.put(document);
    }, error =&gt; {
        if(error.status == "404") {
            return this.database.put(document);
        } else {
            return new Promise((resolve, reject) =&gt; {
                reject(error);
            });
        }
    });
}

público colocar(documento: qualquer, id: string) {

documento._id = id;

retorno este.obter(id).então(resultado => {

documento._rev = resultado._rev;

retorno este.banco de dados.colocar(documento);

}, erro => {

se(erro.status == "404") {

retorno este.banco de dados.colocar(documento);

} mais {

retorno novo Promessa((resolver, rejeitar) => {

rejeitar(erro);

});

}

});

}

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.

public sync(remote: string) {
    let remoteDatabase = new PouchDB(remote);
    this.database.sync(remoteDatabase, {
        live: true
    }).on('change', change =&gt; {
        this.listener.emit(change);
    }).on('error', error =&gt; {
        console.error(JSON.stringify(error));
    });
}

público sincronização(remoto: string) {

deixar banco de dados remoto = novo PouchDB(remoto);

este.banco de dados.sincronização(banco de dados remoto, {

ao vivo: verdadeiro

}).em("mudança, mudança => {

este.ouvinte.emitir(mudança);

}).em('erro', erro => {

console.erro(JSON.stringify(erro));

});

}

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.

public getChangeListener() {
    return this.listener;
}

público getChangeListener() {

retorno este.ouvinte;

}

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:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PouchDBProvider } from "../providers/pouchdb-provider";

@NgModule({
    declarations: [
        MyApp,
        HomePage
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage
    ],
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, PouchDBProvider]
})
export class AppModule {}

importação { NgModule, Manipulador de erros } de '@angular/core';

importação { IonicApp, IonicModule, IonicErrorHandler } de "iônico-angular;

importação { Meu aplicativo } de './app.component';

importação { Página inicial } de '../pages/home/home';

importação { Provedor PouchDB } de "../providers/pouchdb-provider";

@NgModule({

declarações: [

Meu aplicativo,

Página inicial

importações: [

IonicModule.forRoot(Meu aplicativo)

bootstrap: [IonicApp],

entryComponents: [

Meu aplicativo,

Página inicial

provedores: [{fornecer: Manipulador de erros, useClass: IonicErrorHandler}, Provedor PouchDB]

})

exportação classe AppModule {}

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:

import { Component, NgZone } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { PouchDBProvider } from "../../providers/pouchdb-provider";
import * as Uuid from "uuid";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    public items: Array;

    public constructor(public navCtrl: NavController, public alertCtrl: AlertController, private database: PouchDBProvider, private zone: NgZone) {
        this.items = [];
    }

    public ionViewDidEnter() { }

    public insert() { }

}

importação { Componente, NgZone } de '@angular/core';

importação { NavController, AlertController } de "iônico-angular;

importação { Provedor PouchDB } de "../../providers/pouchdb-provider";

importar * como Uuid de "uuid";

@Componente({

seletor: 'page-home',

templateUrl: 'home.html'

})

exportação classe Página inicial {

público itens: Matriz;

público construtor(público navCtrl: NavController, público alertCtrl: AlertController, privado banco de dados: Provedor PouchDB, privado zona: NgZone) {

este.itens = [];

}

público ionViewDidEnter() { }

público inserir() { }

}

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:

public ionViewDidEnter() {
    this.database.sync("http://192.168.57.1:4984/example");
    this.database.getChangeListener().subscribe(data =&gt; {
        for(let i = 0; i &lt; data.change.docs.length; i++) { this.zone.run(() =&gt; {
                this.items.push(data.change.docs[i]);
            });
        }
    });
    this.database.fetch().then(result =&gt; {
        this.items = [];
        for(let i = 0; i &lt; result.rows.length; i++) { this.items.push(result.rows[i].doc); } }, error =&gt; {
        console.error(error);
    });
}

público ionViewDidEnter() {

este.banco de dados.sincronização("http://192.168.57.1:4984/example");

este.banco de dados.getChangeListener().assinar(dados => {

para(deixar i = 0; i < dados.mudança.documentos.comprimento; i++) { este.zona.executar(() => {

este.itens.empurrar(dados.mudança.documentos[i]);

});

}

});

este.banco de dados.buscar().então(resultado => {

este.itens = [];

para(deixar i = 0; i < resultado.linhas.comprimento; i++) { este.itens.empurrar(resultado.linhas[i].doc); } }, erro => {

console.erro(erro);

});

}

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:

public insert() {
    let prompt = this.alertCtrl.create({
        title: 'Todo Items',
        message: "Add a new item to the todo list",
        inputs: [
            {
                name: 'title',
                placeholder: 'Title'
            },
        ],
        buttons: [
            {
                text: 'Cancel',
                handler: data =&gt; {}
            },
            {
                text: 'Save',
                handler: data =&gt; {
                    this.database.put({type: "list", title: data.title}, Uuid.v4());
                }
            }
        ]
    });
    prompt.present();
}

público inserir() {

deixar imediato = este.alertCtrl.criar({

título: 'Todo Items',

mensagem: "Adicionar um novo item à lista de tarefas",

insumos: [

{

nome: 'título',

espaço reservado: "Título

botões: [

{

texto: 'Cancelar',

manipulador: dados => {}

{

texto: 'Salvar',

manipulador: dados => {

este.banco de dados.colocar({tipo: "lista", título: dados.título}, Uuid.v4());

}

]

});

imediato.presente();

}

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:

&lt;ion-header&gt;
    &lt;ion-navbar&gt;
        &lt;ion-title&gt;
            PouchDB w/ Ionic 2
        &lt;/ion-title&gt;
        &lt;ion-buttons end&gt;
            &lt;button ion-button icon-only (click)="insert()"&gt;
                &lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;
            &lt;/button&gt;
        &lt;/ion-buttons&gt;
    &lt;/ion-navbar&gt;
&lt;/ion-header&gt;

&lt;ion-content padding&gt;
    &lt;ion-list&gt;
        &lt;ion-item *ngFor="let item of items"&gt;
            {{ item.title }}
        &lt;/ion-item&gt;
    &lt;/ion-list&gt;
&lt;/ion-content&gt;

<íon-cabeçalho>

<íon-barra de navegação>

<íon-título>

PouchDB w/ Iônico 2

</íon-título>

<íon-botões final>

<botão íon-botão ícone-somente (clique)="insert()">

<íon-ícone nome="adicionar"></íon-ícone>

</botão>

</íon-botões>

</íon-barra de navegação>

</íon-cabeçalho>

<íon-conteúdo acolchoamento>

<íon-lista>

<íon-item *ngFor="let item of items">

</íon-item>

</íon-lista>

</íon-conteúdo>

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:

npm install
ionic state restore

1 2	npm instalar iônico estado restaurar

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.

Nic Raboy, defensor dos desenvolvedores, Couchbase

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Todas as publicações

Sincronização com o Couchbase em um aplicativo Ionic 2 usando o PouchDB