Syncing Couchbase Documents Between Mobile Platforms and Devices with NativeScript and Angular

Nos últimos dias, exploramos como criar um aplicativo simples para Android e iOS usando NativeScript, Angular e Couchbase. Primeiro, vimos como usar o Couchbase para operações básicas de valor-chave e então vimos como consultar o Couchbase como um banco de dados de documentos. O capítulo final é adicionar suporte de replicação ao nosso aplicativo NativeScript usando o Couchbase Sync Gateway.

Vamos expandir os dois exemplos anteriores para sincronizar dados entre plataformas e dispositivos usando o Couchbase Sync Gateway, NativeScript e Angular. Veja a seguinte imagem animada, por exemplo:

Quando um novo perfil é adicionado ao dispositivo iOS, ele é sincronizado com o dispositivo Android e, da mesma forma, na direção oposta. Isso é possível com muito pouco código.

Os requisitos

Os requisitos entre este exemplo e os dois anteriores mudaram um pouco. Para ter sucesso, você precisará do seguinte:

NativeScript 2.0+
Gateway de sincronização do Couchbase

O NativeScript, o Angular e o plug-in do Couchbase Lite podem ser obtidos por meio da CLI do NativeScript. Não sincronizaremos nossos dados com o Couchbase Server neste exemplo, mas podemos fazer isso facilmente com poucas alterações.

Continuando de onde paramos

Para ter sucesso com este tutorial, você precisará ter visto Parte 2 que tem sua própria dependência de ter visualizado Parte 1. A maior parte do código desses guias anteriores pode ser copiada e colada em um projeto.

Antes de continuar, você deverá ter um aplicativo NativeScript funcional de duas páginas com uma caixa de diálogo modal. Os dados desse aplicativo são salvos em Couchbase e consultados usando exibições do MapReduce.

Criação de um serviço Angular para o Couchbase

Como a replicação de dados estará envolvida, precisamos nos certificar de que temos apenas uma única instância do Couchbase em execução no nosso aplicativo. No exemplo anterior, criamos uma nova instância por página. Não podemos fazer isso com a replicação porque podemos acabar replicando várias vezes, o que é ineficiente.

Para criar uma instância singleton do Couchbase, devemos criar um serviço Angular. Crie um arquivo em seu projeto em app/couchbase.service.ts e inclua o seguinte código TypeScript:

import { Injectable } from "@angular/core";
import { Couchbase } from "nativescript-couchbase";

@Injectable()
export class CouchbaseService {

    private database: any;
    private pull: any;
    private push: any;

    public constructor() { }

    public getDatabase() { }

    public startSync(gateway: string, continuous: boolean) { }

    public stopSync() { }

}

importação { Injetável } de "@angular/core";

importação { Couchbase } de "nativescript-couchbase";

@Injetável()

exportação classe CouchbaseService {

privado banco de dados: qualquer;

privado puxar: qualquer;

privado empurrar: qualquer;

público construtor() { }

público getDatabase() { }

público startSync(portal: string, contínuo: booleano) { }

público stopSync() { }

}

Esse serviço poderá ser injetado em todas as páginas. Uma única instância do Couchbase será armazenada no diretório banco de dados e as informações sobre os replicadores push e pull serão armazenadas em suas respectivas variáveis.

Dentro do construtor temos o seguinte:

public constructor() {
    if(!this.database) {
        this.database = new Couchbase("data");
        this.database.createView("profiles", "1", function(document, emitter) {
            emitter.emit(document._id, document);
        });
    }
}

público construtor() {

se(!este.banco de dados) {

este.banco de dados = novo Couchbase("dados");

este.banco de dados.createView("perfis", "1", função(documento, emissor) {

emissor.emitir(documento._id, documento);

});

}

Antes de criar uma nova instância do Couchbase, verificamos se já não temos uma. Caso contrário, abrimos o banco de dados e criamos uma visualização MapReduce, que não é nada que já não tenhamos visto nos exemplos anteriores.

public getDatabase() {
    return this.database;
}

público getDatabase() {

retorno este.banco de dados;

}

Quando chegar a hora de obter essa instância, podemos retorná-la por meio do getDatabase função. Isso nos leva à replicação de dados.

public startSync(gateway: string, continuous: boolean) {
    this.push = this.database.createPushReplication(gateway);
    this.pull = this.database.createPullReplication(gateway);

    this.push.setContinuous(continuous);
    this.pull.setContinuous(continuous);

    this.push.start();
    this.pull.start();
}

público startSync(portal: string, contínuo: booleano) {

este.empurrar = este.banco de dados.createPushReplication(portal);

este.puxar = este.banco de dados.createPullReplication(portal);

este.empurrar.setContinuous(contínuo);

este.puxar.setContinuous(contínuo);

este.empurrar.iniciar();

este.puxar.iniciar();

}

Para este exemplo, faremos uma sincronização bidirecional com uma instância do Sync Gateway. Temos a opção de sincronizar uma vez ou continuamente enquanto o aplicativo estiver aberto. Quando quisermos interromper a replicação, podemos usar a opção stopSync vista abaixo:

public stopSync() {
    this.push.stop();
    this.pull.stop();
}

público stopSync() {

este.empurrar.parar();

este.puxar.parar();

}

Como esse será um serviço compartilhado, ele precisa ser injetado no @NgModule bloco. Abra a seção app/app.module.ts e inclua o seguinte TypeScript:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ModalDialogService } from "nativescript-angular/modal-dialog";

import { appComponents, appRoutes } from "./app.routing";
import { AppComponent } from "./app.component";
import { ModalComponent } from "./app.modal";
import { CouchbaseService } from "./couchbase.service";

@NgModule({
    declarations: [AppComponent, ModalComponent, ...appComponents],
    entryComponents: [ModalComponent],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [ModalDialogService, CouchbaseService],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

importação { NgModule, NÃO_ERROS_ESQUEMA } de "@angular/core";

importação { NativeScriptModule } de "nativescript-angular/platform";

importação { NativeScriptFormsModule } de "nativescript-angular/forms";

importação { NativeScriptRouterModule } de "nativescript-angular/router";

importação { ModalDialogService } de "nativescript-angular/modal-dialog";

importação { Componentes do aplicativo, Rotas de aplicativos } de "./app.routing";

importação { Componente de aplicativo } de "./app.component";

importação { Componente Modal } de "./app.modal";

importação { CouchbaseService } de "./couchbase.service";

@NgModule({

declarações: [Componente de aplicativo, Componente Modal, ...Componentes do aplicativo],

entryComponents: [Componente Modal],

bootstrap: [Componente de aplicativo],

importações: [

NativeScriptModule,

NativeScriptFormsModule,

NativeScriptRouterModule,

NativeScriptRouterModule.forRoot(Rotas de aplicativos)

provedores: [ModalDialogService, CouchbaseService],

esquemas: [NO_ERRORS_SCHEMA]

})

exportação classe AppModule { }

O exemplo acima é o que vimos anteriormente, mas desta vez importamos o CouchbaseService e o injetou no provedores matriz do @NgModule bloco.

Agora, cada uma de nossas páginas pode ser atualizada para usar o novo serviço do Angular.

Atualização das páginas do aplicativo NativeScript

Temos duas páginas que precisam ser atualizadas para refletir nosso serviço do Angular. Abra a seção app/components/profile-list/profile-list.ts e remova o código do Couchbase encontrado no arquivo construtor método. Em vez disso, o arquivo deve se parecer com o seguinte:

import { Component, OnInit, OnDestroy, NgZone } from "@angular/core";
import { Location } from "@angular/common";
import { Router } from "@angular/router";
import { CouchbaseService } from "../../couchbase.service";

@Component({
    selector: "profile-list",
    templateUrl: "./components/profile-list/profile-list.html",
})
export class ProfileListComponent implements OnInit, OnDestroy {

    public profiles: Array;
    private database: any;

    public constructor(private router: Router, private location: Location, private zone: NgZone, private couchbase: CouchbaseService) {
        this.database = this.couchbase.getDatabase();
        this.profiles = [];
    }

    public ngOnInit() {
        this.location.subscribe(() =&gt; {
            this.refresh();
        });
        this.refresh();
    }

    public refresh() {
        this.profiles = [];
        let rows = this.database.executeQuery("profiles");
        for(let i = 0; i &lt; rows.length; i++) {
            this.profiles.push(rows[i]);
        }
    }

    public create() {
        this.router.navigate(["profile"]);
    }

}

importação { Componente, OnInit, OnDestroy, NgZone } de "@angular/core";

importação { Localização } de "@angular/common";

importação { Roteador } de "@angular/router";

importação { CouchbaseService } de "../../couchbase.service";

@Componente({

seletor: "profile-list" (lista de perfis),

templateUrl: "./components/profile-list/profile-list.html",

})

exportação classe Componente ProfileList implementa OnInit, OnDestroy {

público perfis: Matriz;

privado banco de dados: qualquer;

público construtor(privado roteador: Roteador, privado localização: Localização, privado zona: NgZone, privado couchbase: CouchbaseService) {

este.banco de dados = este.couchbase.getDatabase();

este.perfis = [];

}

público ngOnInit() {

este.localização.assinar(() => {

este.atualizar();

});

este.atualizar();

}

público atualizar() {

este.perfis = [];

deixar linhas = este.banco de dados.executeQuery("perfis");

para(deixar i = 0; i < linhas.comprimento; i++) {

este.perfis.empurrar(linhas[i]);

}

público criar() {

este.roteador.navegar(["profile" (perfil)]);

}

Observe no exemplo acima que importamos CouchbaseService e o injetou no construtor juntamente com o método NgZone. Em vez de obter o banco de dados e criar uma exibição, precisamos apenas chamar o comando getDatabase função do nosso serviço.

Até agora, nada de ruim, certo?

Agora vamos abrir o arquivo app/components/profile/profile.ts arquivo. Nesse arquivo, inclua o seguinte código:

import { Component, ViewContainerRef } from "@angular/core";
import { Location } from "@angular/common";
import { ModalDialogService } from "nativescript-angular/directives/dialogs";
import { CouchbaseService } from "../../couchbase.service";
import { ModalComponent } from "../../app.modal";

@Component({
    selector: "profile",
    templateUrl: "./components/profile/profile.html",
})
export class ProfileComponent {

    public profile: any;
    private database: any;

    public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private location: Location, private couchbase: CouchbaseService) {
        this.profile = {
            photo: "~/kitten1.jpg",
            firstname: "",
            lastname: ""
        }
        this.database = this.couchbase.getDatabase();
    }

    public showModal(fullscreen: boolean) {
        let options = {
            context: { promptMsg: "Pick your avatar!" },
            fullscreen: fullscreen,
            viewContainerRef: this.vcRef
        };
        this.modal.showModal(ModalComponent, options).then((res: string) =&gt; {
            this.profile.photo = res || "~/kitten1.jpg";
        });
    }

    public save() {
        this.database.createDocument(this.profile);
        this.location.back();
    }

}

importação { Componente, ViewContainerRef } de "@angular/core";

importação { Localização } de "@angular/common";

importação { ModalDialogService } de "nativescript-angular/directives/dialogs";

importação { CouchbaseService } de "../../couchbase.service";

importação { Componente Modal } de "../../app.modal";

@Componente({

seletor: "profile" (perfil),

templateUrl: "./components/profile/profile.html",

})

exportação classe ProfileComponent {

público perfil: qualquer;

privado banco de dados: qualquer;

público construtor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef, privado localização: Localização, privado couchbase: CouchbaseService) {

este.perfil = {

foto: "~/kitten1.jpg",

primeiro nome: "",

sobrenome: ""

}

este.banco de dados = este.couchbase.getDatabase();

}

público showModal(tela cheia: booleano) {

deixar opções = {

contexto: { promptMsg: "Escolha seu avatar!" },

tela cheia: tela cheia,

viewContainerRef: este.vcRef

};

este.modal.showModal(Componente Modal, opções).então((res: string) => {

este.perfil.foto = res || "~/kitten1.jpg";

});

}

público salvar() {

este.banco de dados.createDocument(este.perfil);

este.localização.voltar();

}

Com exceção de NgZoneNa página anterior, fizemos a mesma alteração no Couchbase que fizemos na página anterior. Veremos o que NgZone em breve.

Nesse ponto, podemos prosseguir com a configuração do Sync Gateway para preparar a sincronização de dados.

Criação da configuração de replicação do Sync Gateway

Você já deve ter feito o download de Gateway de sincronização do Couchbase até agora. Com ele instalado, precisamos criar um arquivo de configuração para o nosso projeto. A seguir, um exemplo de uma configuração muito simples:

{
    "log":["CRUD+", "REST+", "Changes+", "Attach+"],
    "databases": {
        "example": {
            "server":"walrus:",
            "sync":`
                function (doc) {
                    channel (doc.channels);
                }
            `,
            "users": {
                "GUEST": {
                    "disabled": false,
                    "admin_channels": ["*"]
                }
            }
        }
    }
}

{

"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": ["*"]

}

A configuração acima pode ser salva em um arquivo chamado sync-gateway-config.json ou similar. Essencialmente, ele usa um armazenamento na memória chamado morsa: com um nome de banco de dados de exemplo. Não há permissões de leitura ou gravação em nosso exemplo. Todos os dados serão sincronizados em todas as plataformas e dispositivos.

Conectar o Sync Gateway ao Couchbase Server é tão simples quanto alterar morsa: para o host de sua instância do Couchbase Server.

Para executar o Sync Gateway a partir da linha de comando, você deve executar:

/path/to/sync_gateway /path/to/sync-gateway-config.json

1	/caminho/para/portais de sincronização /caminho/para/sincronização-portal-configuração.json

Ele criará um painel que pode ser acessado em http://localhost:4985/_admin/. No nível do aplicativo, ele usará a porta 4984.

Incluindo a lógica de sincronização para Couchbase e NativeScript

Tudo está completo na preparação da replicação de dados em nosso aplicativo. A replicação de dados nos permitirá usar ouvintes de alterações para atualizar nossa interface do usuário conforme necessário.

Abra o arquivo app/components/profile-list/profile-list.ts e inclua o seguinte no ngOnInit método:

public ngOnInit() {
    this.location.subscribe(() =&gt; {
        this.refresh();
    });
    this.couchbase.startSync("http://192.168.57.1:4984/example", true);
    this.database.addDatabaseChangeListener((changes) =&gt; {
        for (let i = 0; i &lt; changes.length; i++) { let document = this.database.getDocument(changes[i].getDocumentId()); this.zone.run(() =&gt; {
                this.profiles.push(document);
            });
        }
    });
    this.refresh();
}

público ngOnInit() {

este.localização.assinar(() => {

este.atualizar();

});

este.couchbase.startSync("http://192.168.57.1:4984/example", verdadeiro);

este.banco de dados.addDatabaseChangeListener((mudanças) => {

para (deixar i = 0; i < mudanças.comprimento; i++) { deixar documento = este.banco de dados.getDocument(mudanças[i].getDocumentId()); este.zona.executar(() => {

este.perfis.empurrar(documento);

});

}

});

este.atualizar();

}

Quando o ngOnInit iniciamos a sincronização com nosso Sync Gateway em execução local. Sinta-se à vontade para definir o nome do host para o que for mais adequado para você. Depois de iniciarmos a sincronização, configuramos nosso ouvinte de alterações para enviar as alterações para o nosso perfis array. Como se trata de um ouvinte, precisamos usar NgZone caso contrário, ele não será refletido na interface do usuário.

O exemplo acima é apenas um exemplo simples em que adicionamos todas as alterações. Na realidade, você precisará verificar se os dados foram alterados, criados ou excluídos. Todos os cenários viriam por meio da função addDatabaseChangeListener.

Quando o aplicativo for interrompido, queremos interromper a sincronização de forma graciosa. Na seção ngOnDestroy inclua o seguinte:

public ngOnDestroy() {
    this.couchbase.stopSync();
}

público ngOnDestroy() {

este.couchbase.stopSync();

}

A replicação para o Couchbase Sync Gateway será interrompida quando o método Angular acima for chamado.

Conclusão

Neste tutorial, você viu como adicionar suporte de sincronização ao seu aplicativo móvel Angular NativeScript. Essa foi a terceira parte de três da série de tutoriais. Anteriormente, vimos como fazer operações básicas do Couchbase para salvar e carregar dados bem como consulta de documentos. Data no desenvolvimento de aplicativos móveis usando estruturas como NativeScript e o Angular devem ser fáceis. Ser capaz de armazenar objetos JavaScript e dados JSON em um banco de dados NoSQL e sincronizá-los é um grande fardo para o desenvolvedor.

Nic Raboy, defensor dos desenvolvedores, Couchbase

4 Comentários

fhackenb março 28, 2018 em 9:32 am

Obrigado por essa série de tutoriais, ela é muito boa. Consegui fazer com que ela funcionasse entre um dispositivo Android e iOS e é muito simples. Neste exemplo, eu estava basicamente usando o Sync Gateway no meu Mac como um intermediário com o qual os outros dispositivos da rede estão sincronizando.

Gostaria de usar esse recurso de sincronização para um aplicativo móvel que terá vários dispositivos na mesma rede e gostaria que ele funcionasse no modo off-line, portanto, será necessário ter uma função separada para várias redes diferentes. Existe uma maneira de configurar um Sync Gateway apenas entre dispositivos móveis em uma rede sem precisar configurá-lo em um computador na rede? Ou precisarei fazer com que cada rede instale e configure seu próprio Sync Gateway com os arquivos de configuração do sync-gateway que eu fornecer?

Acesse para responder
1. Nic Raboy, defensor dos desenvolvedores, Couchbase março 28, 2018 em 10:18 am
  
  Há suporte a P2P nas APIs subjacentes do Android e do iOS, mas ele nunca foi adicionado ao plug-in do NativeScript.
  
  O Couchbase Lite 2.0 será lançado em breve, portanto, as coisas estarão mudando. Se você puder, leia sobre o assunto e aguarde um pouco.
  
  Acesse para responder
fhackenb abril 2, 2018 em 7:14 am

Obrigado pela resposta rápida, Nic. Você sabe se algum desses novos recursos de P2P será incorporado ao plug-in do NativeScript?

Acesse para responder
aesquivel24 maio 24, 2018 em 11:24 pm

Olá Nic, tenho uma pergunta: estou tentando armazenar um documento usando o couchbase lite com nativescript em um projeto que estou criando, mas, de alguma forma, minha lógica não está funcionando. Gostaria de saber se você poderia dar uma olhada no meu código e me informar se estou fazendo algo errado. Este é um link para meu código: https://i.gyazo.com/99914e2c1c54b37ea7486ff050bc6dd0.pngObrigado desde já.

Acesse para responder

Deixar uma resposta Cancelar resposta

Você precisa fazer o login para publicar um comentário.

Faça login com sua ID social

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 de documentos do Couchbase entre plataformas e dispositivos móveis com NativeScript e Angular

Os requisitos

Continuando de onde paramos

Criação de um serviço Angular para o Couchbase

Atualização das páginas do aplicativo NativeScript

Criação da configuração de replicação do Sync Gateway

Incluindo a lógica de sincronização para Couchbase e NativeScript

Conclusão

Autor

Postado por Nic Raboy, defensor dos desenvolvedores, Couchbase

4 Comentários

Deixar uma resposta Cancelar resposta