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

En los últimos días hemos estado explorando cómo crear una aplicación sencilla para Android e iOS usando NativeScript, Angular y Couchbase. Primero vimos cómo utilizar Couchbase para operaciones básicas clave-valor y entonces vimos cómo consultar Couchbase como base de datos de documentos. El capítulo final es añadir soporte de replicación a nuestra aplicación NativeScript usando Couchbase Sync Gateway.

Vamos a ampliar los dos ejemplos anteriores para sincronizar datos entre plataformas y dispositivos usando Couchbase Sync Gateway, NativeScript y Angular. Tomemos como ejemplo la siguiente imagen animada:

Cuando se añade un nuevo perfil al dispositivo iOS, éste se sincroniza con el dispositivo Android y viceversa. Esto es posible a través de muy poco código.

Requisitos

Los requisitos entre este ejemplo y los dos anteriores han cambiado un poco. Para tener éxito necesitarás lo siguiente:

NativeScript 2.0+
Pasarela de sincronización Couchbase

NativeScript, Angular, y el plugin Couchbase Lite se pueden obtener a través de la CLI de NativeScript. No vamos a sincronizar nuestros datos con Couchbase Server en este ejemplo, pero podemos hacerlo fácilmente con muy pocos cambios.

Continuar donde lo dejamos

Para tener éxito con este tutorial necesitarás haber visto parte 2 que tiene su propia dependencia de haber visto parte 1. La mayor parte del código de esas guías anteriores puede copiarse y pegarse en un proyecto.

Antes de continuar, deberías tener una aplicación NativeScript funcional de dos páginas con un diálogo modal. Los datos de esta aplicación se guardan en Couchbase y consultados mediante vistas MapReduce.

Creación de un servicio Angular para Couchbase

Debido a que la replicación de datos estará involucrada, necesitamos asegurarnos de que sólo tenemos una única instancia de Couchbase ejecutándose en nuestra aplicación. En el ejemplo anterior creamos una nueva instancia por página. No podemos hacer eso con la replicación porque podríamos terminar replicando múltiples veces, lo cual es ineficiente.

Para crear una instancia singleton de Couchbase, debemos crear un servicio Angular. Crea un archivo dentro de tu proyecto en app/couchbase.service.ts e incluye el siguiente 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() { }

}

importar { Inyectable } de "@angular/core";

importar { Couchbase } de "nativescript-couchbase";

@Inyectable()

exportar clase CouchbaseService {

privado base de datos: cualquier;

privado tire de: cualquier;

privado pulse: cualquier;

público constructor() { }

público getDatabase() { }

público startSync(pasarela: cadena, continuo: booleano) { }

público stopSync() { }

}

Este servicio será inyectable en cada página. Una única instancia de Couchbase se almacenará en el directorio base de datos y la información sobre los replicadores push y pull se almacenará en sus respectivas variables.

Dentro del constructor tenemos lo siguiente:

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 constructor() {

si(!este.base de datos) {

este.base de datos = nuevo Couchbase("datos");

este.base de datos.crearVista("perfiles", "1", función(documento, emisor) {

emisor.emite(documento._id, documento);

});

}

Antes de crear una nueva instancia de Couchbase nos aseguramos de que no tenemos ya una. Si no es así, abrimos la base de datos y creamos una vista MapReduce, que no es nada que no hayamos visto ya en los ejemplos anteriores.

public getDatabase() {
    return this.database;
}

público getDatabase() {

devolver este.base de datos;

}

A la hora de obtener esta instancia podemos devolverla a través de la función getDatabase función. Esto nos lleva a la replicación de datos.

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(pasarela: cadena, continuo: booleano) {

este.pulse = este.base de datos.createPushReplication(pasarela);

este.tire de = este.base de datos.createPullReplication(pasarela);

este.pulse.setContinuous(continuo);

este.tire de.setContinuous(continuo);

este.pulse.iniciar();

este.tire de.iniciar();

}

Para este ejemplo haremos una sincronización bidireccional contra una instancia de Sync Gateway. Tenemos la opción de sincronizar una sola vez o de forma continua mientras la aplicación esté abierta. Cuando deseemos detener la replicación podemos hacer uso de la opción stopSync que se ve a continuación:

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

público stopSync() {

este.pulse.stop();

este.tire de.stop();

}

Dado que se trata de un servicio compartido, debe inyectarse en el directorio del proyecto @NgModule bloque. Abra el archivo app/app.module.ts e incluir el siguiente 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 { }

importar { NgModule, NO_ERRORES_ESQUEMA } de "@angular/core";

importar { Módulo NativeScript } de "nativescript-angular/platform";

importar { Módulo NativeScriptForms } de "nativescript-angular/forms";

importar { NativeScriptRouterModule } de "nativescript-angular/router";

importar { ModalDialogService } de "nativescript-angular/modal-dialog";

importar { appComponents, appRoutes } de "./app.routing";

importar { AppComponent } de "./app.component";

importar { Componente modal } de "./app.modal";

importar { CouchbaseService } de "./couchbase.service";

@NgModule({

declaraciones: [AppComponent, Componente modal, ...appComponents],

entryComponents: [Componente modal],

arranque: [AppComponent],

importaciones: [

Módulo NativeScript,

Módulo NativeScriptForms,

NativeScriptRouterModule,

NativeScriptRouterModule.forRoot(appRoutes)

proveedores: [ModalDialogService, CouchbaseService],

esquemas: [NO_ERRORS_SCHEMA]

})

exportar clase AppModule { }

Lo anterior es lo que habíamos visto anteriormente, pero esta vez importamos el CouchbaseService y lo inyectó en el proveedores de la @NgModule bloque.

Ahora cada una de nuestras páginas puede ser actualizada para utilizar el nuevo servicio Angular.

Actualización de las páginas de la aplicación NativeScript

Tenemos dos páginas que necesitan ser actualizadas para reflejar nuestro servicio Angular. Abra el archivo app/components/profile-list/profile-list.ts y eliminar el código de Couchbase que se encuentra en el archivo constructor método. En su lugar o archivo debe tener el siguiente aspecto:

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"]);
    }

}

importar { Componente, OnInit, OnDestroy, NgZone } de "@angular/core";

importar { Ubicación } de "@angular/common";

importar { Router } de "@angular/router";

importar { CouchbaseService } de "../../couchbase.service";

@Componente({

selector: "lista de perfiles",

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

})

exportar clase ProfileListComponent implementa OnInit, OnDestroy {

público perfiles: Matriz;

privado base de datos: cualquier;

público constructor(privado enrutador: Router, privado ubicación: Ubicación, privado zona: NgZone, privado couchbase: CouchbaseService) {

este.base de datos = este.couchbase.getDatabase();

este.perfiles = [];

}

público ngOnInit() {

este.ubicación.suscríbase a(() => {

este.actualizar();

});

este.actualizar();

}

público actualizar() {

este.perfiles = [];

deje filas = este.base de datos.executeQuery("perfiles");

para(deje i = 0; i < filas.longitud; i++) {

este.perfiles.pulse(filas[i]);

}

público crear() {

este.enrutador.navegue por(["perfil"]);

}

Observa que hemos importado CouchbaseService y lo inyectó en el constructor junto con NgZone. En lugar de obtener la base de datos y crear una vista, sólo tenemos que llamar a la función getDatabase función de nuestro servicio.

No está tan mal hasta ahora, ¿verdad?

Ahora vamos a abrir el proyecto app/components/profile/profile.ts archivo. En este archivo, incluya el siguiente 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();
    }

}

importar { Componente, ViewContainerRef } de "@angular/core";

importar { Ubicación } de "@angular/common";

importar { ModalDialogService } de "nativescript-angular/directives/dialogs";

importar { CouchbaseService } de "../../couchbase.service";

importar { Componente modal } de "../../app.modal";

@Componente({

selector: "perfil",

templateUrl: "./componentes/perfil/perfil.html",

})

exportar clase Componente de perfil {

público perfil: cualquier;

privado base de datos: cualquier;

público constructor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef, privado ubicación: Ubicación, privado couchbase: CouchbaseService) {

este.perfil = {

foto: "~/kitten1.jpg",

nombre: "",

apellido: ""

}

este.base de datos = este.couchbase.getDatabase();

}

público showModal(pantalla completa: booleano) {

deje opciones = {

contexto: { promptMsg: "¡Elige tu avatar!" },

pantalla completa: pantalla completa,

viewContainerRef: este.vcRef

};

este.modal.showModal(Componente modal, opciones).entonces((res: cadena) => {

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

});

}

público guardar() {

este.base de datos.crearDocumento(este.perfil);

este.ubicación.volver();

}

A excepción de NgZone, hemos hecho el mismo cambio en Couchbase que en la página anterior. Veremos qué NgZone es muy pronto.

En este punto podemos proceder a configurar Sync Gateway para preparar la sincronización de datos.

Creación de la configuración de replicación de Sync Gateway

Ya deberías haber descargado Pasarela de sincronización Couchbase por ahora. Con él instalado necesitamos crear un archivo de configuración para nuestro proyecto. El siguiente es un ejemplo de una configuración muy simple:

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

{

"log":["CRUD+", "REST+", "Cambios+", "Adjuntar+"],

"bases de datos": {

"ejemplo": {

"servidor":"morsa:",

"sync":`

función (doc) {

canal (doc.canales);

}

"usuarios": {

"INVITADO": {

"desactivado": falso,

"admin_canales": ["*"]

}

La configuración anterior puede guardarse en un archivo llamado sync-gateway-config.json o similar. Esencialmente utiliza un almacenamiento en memoria llamado morsa: con un nombre de base de datos ejemplo. En nuestro ejemplo no hay permisos de lectura ni escritura. Todos los datos se sincronizarán en todas las plataformas y dispositivos.

Conectar el Sync Gateway a Couchbase Server es tan sencillo como cambiar morsa: al host de su instancia de Couchbase Server.

Para ejecutar Sync Gateway desde la línea de comandos debe ejecutar:

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

1	/ruta/a/sync_gateway /ruta/a/sincronizar-pasarela-config.json

Se creará un panel de control al que se podrá acceder desde http://localhost:4985/_admin/. A nivel de aplicación, utilizará el puerto 4984.

Incluyendo lógica de sincronización para Couchbase y NativeScript

Todo está completo para preparar la replicación de datos en nuestra aplicación. La replicación de datos nos permitirá utilizar escuchadores de cambios para actualizar nuestra interfaz de usuario según sea necesario.

Abra el archivo app/components/profile-list/profile-list.ts e incluya lo siguiente dentro del 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.ubicación.suscríbase a(() => {

este.actualizar();

});

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

este.base de datos.addDatabaseChangeListener((cambia) => {

para (deje i = 0; i < cambia.longitud; i++) { deje documento = este.base de datos.getDocument(cambia[i].getDocumentId()); este.zona.ejecute(() => {

este.perfiles.pulse(documento);

});

}

});

este.actualizar();

}

Cuando el ngOnInit iniciamos la sincronización con nuestro Sync Gateway local. Siéntase libre de establecer el nombre de host a lo que sea apropiado para usted. Después de iniciar la sincronización, configuramos nuestro oyente de cambios para empujar los cambios en nuestro perfiles array. Como se trata de un oyente, necesitamos utilizar NgZone de lo contrario no se reflejará en la interfaz de usuario.

Lo anterior es sólo un ejemplo sencillo en el que añadimos todos los cambios. En realidad, tendrá que comprobar si los datos han cambiado, se han creado o se han eliminado. Todos los escenarios vendrían a través de la addDatabaseChangeListener.

Cuando la aplicación se detiene, queremos detener la sincronización. En el ngOnDestroy método, incluya lo siguiente:

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

público ngOnDestroy() {

este.couchbase.stopSync();

}

La replicación a Couchbase Sync Gateway se detendrá cuando se llame al método Angular anterior.

Conclusión

En este tutorial has visto cómo añadir soporte de sincronización a tu aplicación móvil Angular NativeScript. Esta fue la tercera parte de tres en la serie de tutoriales. Anteriormente vimos cómo hacer operaciones básicas de Couchbase para guardar y cargar datos así como búsqueda de documentos. Data en el desarrollo de aplicaciones móviles utilizando frameworks como NativeScript y Angular debería ser fácil. Poder almacenar objetos JavaScript y datos JSON en una base de datos NoSQL y hacer que se sincronicen es un gran alivio para el desarrollador.

Nic Raboy, Defensor del Desarrollador, Couchbase

4 Comentarios

fhackenb marzo 28, 2018 a 9:32 am

Gracias por esta serie de tutoriales, es realmente genial. Yo era capaz de conseguir que funcione entre un androide y el dispositivo iOS y es bastante fluido. Para este ejemplo, yo estaba usando esencialmente la puerta de enlace de sincronización en mi mac como un intermediario que los otros dispositivos de la red se sincronizan con.

Me gustaría utilizar esta capacidad de sincronización para una aplicación móvil que tendrá varios dispositivos en la misma red y me gustaría que funcionara en modo sin conexión, por lo que tendrá que haber una función separada para muchas redes diferentes. ¿Hay alguna forma de configurar una pasarela de sincronización sólo entre dispositivos móviles de una red sin tener que configurarla en un ordenador de la red? ¿O tendré que hacer que cada red instale y configure su propio Sync Gateway con los archivos de configuración de sync-gateway que yo proporcione?

Inicia sesión para responder
1. Nic Raboy, Defensor del Desarrollador, Couchbase marzo 28, 2018 a 10:18 am
  
  Existe soporte P2P en las APIs subyacentes de Android e iOS, pero nunca fue añadido al plugin NativeScript.
  
  Couchbase Lite 2.0 llegará pronto, así que las cosas cambiarán. Si puedes, yo leería al respecto y aguantaría un poco.
  
  Inicia sesión para responder
fhackenb abril 2, 2018 a 7:14 am

Gracias por la rápida respuesta, Nic. Sabes si alguna de estas nuevas cosas P2P finalmente llegarán al plugin NativeScript?

Inicia sesión para responder
aesquivel24 mayo 24, 2018 a 11:24 pm

Hola Nic, tengo una pregunta, estoy tratando de almacenar un documento utilizando couchbase lite con nativescript, en un proyecto que estoy construyendo pero de alguna manera mi lógica no está funcionando. Me preguntaba si podrías echarle un vistazo a mi código y decirme si estoy haciendo algo mal. Este es un enlace a mi código: https://i.gyazo.com/99914e2c1c54b37ea7486ff050bc6dd0.pngGracias de antemano.

Inicia sesión para responder

Dejar una respuesta Cancelar respuesta

Lo siento, debes estar conectado para publicar un comentario.

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

Todos los mensajes

Sincronización de documentos Couchbase entre plataformas y dispositivos móviles con NativeScript y Angular

Requisitos

Continuar donde lo dejamos

Creación de un servicio Angular para Couchbase

Actualización de las páginas de la aplicación NativeScript

Creación de la configuración de replicación de Sync Gateway

Incluyendo lógica de sincronización para Couchbase y NativeScript

Conclusión

Autor

Publicado por Nic Raboy, Defensor del Desarrollador, Couchbase

4 Comentarios

Dejar una respuesta Cancelar respuesta