Couchbase Mobile in a Cross platform Telerik NativeScript App

A nivel personal, soy un gran fan de Telerik NativeScript. Se trata de un marco de desarrollo multiplataforma para crear nativo aplicaciones Android e iOS utilizando un único conjunto de códigos, siendo ese conjunto de códigos JavaScript. Tuve que poner énfasis en la parte nativa porque es uno de los únicos frameworks multiplataforma que no utiliza una vista web para mostrar el contenido. Esto a su vez crea una aplicación que tiene un rendimiento increíble.

Hasta ahora no había una buena solución para almacenar datos en una aplicación NativeScript. ¡Eso es hasta ahora!

Con la ayuda de Telerik y el equipo de NativeScript, pude crear una Plugin Couchbase Lite para NativeScript que te permite aprovechar el poder de NoSQL en tu aplicación móvil. Cuando se empareja con Couchbase Sync Gateway, los datos se pueden sincronizar entre dispositivos y plataformas.

Vamos a ver qué se necesita para empezar con Couchbase Móvil en tu aplicación NativeScript.

Requisitos

Hay algunos requisitos para que esto sea posible.

NativeScript 1.7+
El SDK de Android (si se crean aplicaciones para Android)
Xcode y un Mac (si se crean aplicaciones para iOS)
Couchbase Sync Gateway (para sincronización)

No es necesario crear tanto para Android como para iOS, pero sin duda es conveniente.

Creación de un nuevo proyecto NativeScript

Vamos a crear una sencilla aplicación de lista de nombres que se sincroniza entre dispositivos. Para ello, ejecute lo siguiente desde un símbolo del sistema (Windows) o Terminal (Mac y Linux):


tns create CouchbaseProject
cd CouchbaseProject
tns platform add ios
tns platform add android

tns crear CouchbaseProject

cd CouchbaseProject

tns plataforma añada ios

tns plataforma añada android

Recuerde, si no está utilizando un Mac, no puede añadir y construir para la plataforma iOS. En adelante, el símbolo del sistema o Terminal debe utilizar CouchbaseProject como directorio de trabajo.

Incluido el SDK de Couchbase Lite

Con el proyecto creado es hora de incluir el plugin Couchbase Lite para su uso. Desde la Terminal o Símbolo del sistema, ejecuta lo siguiente:


tns plugin add nativescript-couchbase

tns plugin añada nativescript-couchbase

Esto incluirá el plugin para cualquier plataforma que se haya añadido al proyecto.

Desarrollo de la aplicación

Con el proyecto creado necesitamos crear algunos archivos y directorios. Sigue adelante y añade lo siguiente:


mkdir app/views
mkdir app/views/list
mkdir app/views/create
touch app/views/list/list.js
touch app/views/list/list.xml
touch app/views/create/create.js
touch app/views/create/create.xml

mkdir aplicación/vistas

mkdir aplicación/vistas/lista

mkdir aplicación/vistas/crear

toque aplicación/vistas/lista/lista.js

toque aplicación/vistas/lista/lista.xml

toque aplicación/vistas/crear/crear.js

toque aplicación/vistas/crear/crear.xml

Los archivos anteriores es donde vamos a pasar la mayor parte de nuestro tiempo, pero antes de saltar en, abrir el proyecto de app/app.js y cambie la línea correspondiente por la siguiente:


application.start({ moduleName: "views/list/list" });

aplicación.iniciar({ moduleName: "views/list/list" });

Esto indica a la aplicación NativeScript que el lista será nuestra primera vista.

Creación de la lógica de la aplicación

Los archivos lógicos de la aplicación son los archivos JavaScript. Un archivo controlará la lógica detrás de nuestra vista de lista y el otro controlará la lógica detrás de nuestro formulario de creación de nombre. Comenzando con la lógica de la lista, abra el archivo del proyecto app/views/list/list.js e incluya el siguiente código:


var couchbaseModule = require("nativescript-couchbase");
var observableArrayModule = require("data/observable-array");
var frameModule = require("ui/frame");

var database;
var personList;

function pageLoaded(args) {
    var page = args.object;

    personList = new observableArrayModule.ObservableArray([]);
    database = new couchbaseModule.Couchbase("test-database");

    database.createView("people", "1", function(document, emitter) {
        emitter.emit(JSON.parse(document)._id, document);
    });

    refresh();
    page.bindingContext = {personList: personList};
}

function refresh() {
    personList.splice(0);

    var rows = database.executeQuery("people");

    for(var i in rows) {
          if(rows.hasOwnProperty(i)) {
              personList.push(JSON.parse(rows[i]));
          }
    }
}

function create() {
    frameModule.topmost().navigate({moduleName: "views/create/create"});
}

exports.pageLoaded = pageLoaded;
exports.refresh = refresh;
exports.create = create;

var Módulo couchbase = requiere("nativescript-couchbase");

var observableArrayModule = requiere("data/observable-array");

var frameModule = requiere("ui/frame");

var base de datos;

var personList;

función pageLoaded(args) {

var página = args.objeto;

personList = nuevo observableArrayModule.ObservableArray([]);

base de datos = nuevo Módulo couchbase.Couchbase("base de datos de prueba");

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

emisor.emite(JSON.analizar(documento)._id, documento);

});

actualizar();

página.bindingContext = {personList: personList};

}

función actualizar() {

personList.empalme(0);

var filas = base de datos.executeQuery("gente");

para(var i en filas) {

si(filas.hasOwnProperty(i)) {

personList.pulse(JSON.analizar(filas[i]));

}

función crear() {

frameModule.topmost().navegue por({moduleName: "vistas/crear/crear"});

}

exportaciones.pageLoaded = pageLoaded;

exportaciones.actualizar = actualizar;

exportaciones.crear = crear;

Hay muchas cosas sucediendo en el archivo lógico anterior, así que vamos a desglosarlo. Lo primero que vamos a hacer es incluir algunas librerías JavaScript:


var couchbaseModule = require("nativescript-couchbase");
var observableArrayModule = require("data/observable-array");
var frameModule = require("ui/frame");

var Módulo couchbase = requiere("nativescript-couchbase");

var observableArrayModule = requiere("data/observable-array");

var frameModule = requiere("ui/frame");

Primero debe importarse el plugin que se instaló. Todos los datos leídos de la base de datos se almacenarán en un array observable. Esto es para que podamos suscribirnos a los cambios de datos y vincular los datos a la interfaz de usuario. Finalmente se importa el frame para que podamos navegar a otras páginas.

Para abrir una base de datos NoSQL Couchbase en particular ejecutaríamos el siguiente comando:


database = new couchbaseModule.Couchbase("test-database");

base de datos = nuevo Módulo couchbase.Couchbase("base de datos de prueba");

El comando anterior abrirá la base de datos si existe o creará y abrirá la base de datos si no existe.


database.createView("people", "1", function(document, emitter) {
    emitter.emit(JSON.parse(document)._id, document);
});

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

emisor.emite(JSON.analizar(documento)._id, documento);

});

Si es la primera vez que trabajas con NoSQL, el fragmento anterior puede parecerte muy extraño. Se trata de la creación de una vista MapReduce. En lugar de escribir una sentencia SQL como se ve en SQLite, estamos creando vistas MapReduce que podemos consultar para obtener datos. La vista anterior devolverá un par clave-valor de todos los documentos donde la clave es el id del documento y el valor es el propio documento. Esta vista se llamará gente.

Una vez creada la vista, hay que consultarla. Para ello se utiliza la función actualizar función. Antes de llegar a la función de actualización, fíjese en la última línea del archivo pageLoaded función. Esto muestra que vamos a vincular la función personList a nuestra interfaz de usuario. Veámoslo actualizar función:


function refresh() {
    personList.splice(0);

    var rows = database.executeQuery("people");

    for(var i in rows) {
          if(rows.hasOwnProperty(i)) {
              personList.push(JSON.parse(rows[i]));
          }
    }
}

función actualizar() {

personList.empalme(0);

var filas = base de datos.executeQuery("gente");

para(var i en filas) {

si(filas.hasOwnProperty(i)) {

personList.pulse(JSON.analizar(filas[i]));

}

Cada vez que realicemos una consulta, la lista se restablecerá y se volverá a rellenar. La vista sólo se consultará cuando se cargue la página. Veremos por qué más adelante en este tutorial.

Con el app/views/list/list.js podemos centrarnos en el archivo lógico que hay detrás del formulario de creación. Abra el archivo app/views/create/create.js e incluya el siguiente código:


var couchbaseModule = require("nativescript-couchbase");
var observableArrayModule = require("data/observable-array");
var frameModule = require("ui/frame");

var database;
var tfFirstName;
var tfLastName;

function pageLoaded(args) {
    var page = args.object;

    personList = new observableArrayModule.ObservableArray([]);
    database = new couchbaseModule.Couchbase("test-database");

    tfFirstName = page.getViewById("firstname");
    tfLastName = page.getViewById("lastname");

    page.bindingContext = {};
}

function save() {
    database.createDocument({
        "firstname": tfFirstName.text,
        "lastname": tfLastName.text
    });
    frameModule.goBack();
}

exports.pageLoaded = pageLoaded;
exports.save = save;

var Módulo couchbase = requiere("nativescript-couchbase");

var observableArrayModule = requiere("data/observable-array");

var frameModule = requiere("ui/frame");

var base de datos;

var tfNombre;

var tfLastName;

función pageLoaded(args) {

var página = args.objeto;

personList = nuevo observableArrayModule.ObservableArray([]);

base de datos = nuevo Módulo couchbase.Couchbase("base de datos de prueba");

tfNombre = página.getViewById("nombre");

tfLastName = página.getViewById("apellido");

página.bindingContext = {};

}

función guardar() {

base de datos.crearDocumento({

"nombre": tfNombre.texto,

"apellido": tfLastName.texto

});

frameModule.goBack();

}

exportaciones.pageLoaded = pageLoaded;

exportaciones.guardar = guardar;

Este archivo es mucho más ligero en comparación con el anterior. Esencialmente estamos capturando los elementos del formulario que aún tenemos que crear. Cuando llamamos al archivo guardar tomará los valores de los campos del formulario y creará el documento en Couchbase. Sin esquemas SQL ni tonterías que te ralenticen a la hora de desarrollar. Uno de los mayores beneficios de usar NoSQL.

La lógica está ahora completa, por ahora, y podemos pasar a la interfaz de usuario.

Diseño de una interfaz de usuario multiplataforma

El código de la interfaz de usuario es corto y sencillo. Recuerda que nuestra lista sólo contendrá información sobre los usuarios que añadamos. Abra el proyecto app/views/list/list.xml e incluya el siguiente código:



    
  
   
    
   
  
 
    
        
            
                <label></label>

Cuando se carga la página, se llama a la función pageLoaded función. La barra de acciones dispone de un único botón para navegar a la función crear página. Por último, la vista de lista iterará sobre las páginas personList que se creó en el archivo lógico.

Cuando se trata del formulario de creación, también hay que incluir una pequeña cantidad de código XML. Abra el archivo app/views/create/create.xml e incluya el siguiente código:



    
  
   
    
   
  
 
    
        <label></label>
        
        <label></label>

De nuevo el pageLoaded es llamado al cargar la página. La barra de acciones tiene un único botón para guardar los datos de Couchbase, y el formulario contiene datos que se leen a través del archivo lógico que creamos previamente.

Deberíamos tener una aplicación completamente funcional que utilice Couchbase para almacenar datos. Sin embargo, en este momento esta aplicación está sólo fuera de línea. Los datos no se sincronizan.

Incluyendo Couchbase Sync Gateway para Replicación de Datos

Para sincronizar los datos de la aplicación entre Couchbase Server y otros dispositivos, se debe utilizar la función Pasarela de sincronización Couchbase debe incluirse junto con un archivo de configuración especial. Para simplificar las cosas aquí, no vamos a entrar en profundidad cuando se trata de un archivo de configuración de Sync Gateway. Algo como esto será suficiente:


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

{

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

"bases de datos": {

"base de datos de prueba": {

"servidor":"morsa:",

"sync":`

función (doc) {

canal (doc.canales);

}

"usuarios": {

"INVITADO": {

"desactivado": falso,

"admin_canales": ["*"]

}

Lo que nos importa para este tutorial es el código que se comunica con el Sync Gateway a través de nuestra aplicación. Ahora vamos a revisar el app/views/list/list.js e incluir algo de código en el archivo pageLoaded función. Abra el archivo e incluya lo siguiente:


var push = database.createPushReplication("http://localhost:4984/test-database");
var pull = database.createPullReplication("http://localhost:4984/test-database");

push.setContinuous(true);
pull.setContinuous(true);

push.start();
pull.start();

var pulse = base de datos.createPushReplication("http://localhost:4984/test-database");

var tire de = base de datos.createPullReplication("http://localhost:4984/test-database");

pulse.setContinuous(verdadero);

tire de.setContinuous(verdadero);

pulse.iniciar();

tire de.iniciar();

En lo anterior estamos diciendo a nuestra aplicación que vamos a empujar y tirar de la misma puerta de enlace de sincronización que se está ejecutando localmente. Las réplicas se producirán continuamente en ambas direcciones. Entonces, finalmente, iniciamos el proceso.

Con los datos que se cargan y descargan necesitamos una manera de actualizar la interfaz de usuario cuando sea necesario. Anteriormente he mencionado que sólo estábamos consultando una vez cuando se carga la página. Esto es porque en realidad vamos a utilizar un oyente para escuchar los cambios. Es más eficiente que consultar continuamente cantidades potencialmente masivas de datos. Dentro de tu app/views/list/list.js dentro del archivo pageLoaded incluya el siguiente código:


database.addDatabaseChangeListener(function(changes) {
    var changeIndex;
    for(var i = 0; i &lt; changes.length; i++) {
        var documentId;

        documentId = changes[i].getDocumentId();
        changeIndex = indexOfObjectId(documentId, personList);
        var document = database.getDocument(documentId);

        if(changeIndex == -1) {
            personList.push(document);
        } else {
            personList.setItem(changeIndex, document);
        }
    }
});

base de datos.addDatabaseChangeListener(función(cambia) {

var changeIndex;

para(var i = 0; i < cambia.longitud; i++) {

var documentId;

documentId = cambia[i].getDocumentId();

changeIndex = indexOfObjectId(documentId, personList);

var documento = base de datos.getDocument(documentId);

si(changeIndex == -1) {

personList.pulse(documento);

} si no {

personList.setItem(changeIndex, documento);

}

});

El objetivo aquí es recoger un cambio, ver si ese documento ya existe en la lista, si no existe, añadirlo, si no, cambiarlo. La función para encontrar dónde existe un documento en la lista se puede ver a continuación:


function indexOfObjectId(needle, haystack) {
    for(var i = 0; i &lt; haystack.length; i++) {
        if(haystack.getItem(i) != undefined &amp;&amp; haystack.getItem(i).hasOwnProperty("_id")) {
            if(haystack.getItem(i)._id == needle) {
                return i;
            }
        }
    }
    return -1;
}

función indexOfObjectId(aguja, pajar) {

para(var i = 0; i < pajar.longitud; i++) {

si(pajar.getItem(i) != indefinido && pajar.getItem(i).hasOwnProperty("_id")) {

si(pajar.getItem(i)._id == aguja) {

devolver i;

}

devolver -1;

}

Tal vez no sea la forma más eficiente de actualizar una vista de lista, pero funciona para este ejemplo.

En este punto, si ejecuta Sync Gateway y su aplicación, debería sincronizar los datos.

Conclusión

Acaba de ver cómo crear una plataforma cruzada sencilla, nativoaplicación para Android e iOS que se sincroniza usando NativeScript y el plugin Couchbase Lite. Más información sobre el plugin se puede ver en la página del proyecto GitHub página. Más información sobre Couchbase Mobile en la página Portal para desarrolladores de Couchbase.

Nic Raboy, Defensor del Desarrollador, Couchbase

3 Comentarios

Hipopótamo abril 29, 2018 a 5:05 am

Una pregunta: ¿dónde se almacena exactamente la base de datos? Cuando instalo la aplicación NativeScript y la ejecuto, ¿puedo acceder al archivo de la base de datos a través del gestor de archivos (en caso de que quiera hacer copias de seguridad, etc.)? Suponiendo que decida no utilizar una pasarela de sincronización, claro.

Inicia sesión para responder
1. Nic Raboy, Defensor del Desarrollador, Couchbase abril 30, 2018 a 8:15 am
  
  Android e iOS almacenan todas las bases de datos, independientemente de su tipo, en una parte protegida del dispositivo. La única forma de acceder a ella sería tener el dispositivo rooteado o jailbreak.
  
  Inicia sesión para responder
  1. Hipopótamo mayo 1, 2018 a 3:19 am
    
    Ahh, ya veo. Es bueno saberlo, me preguntaba dónde se había metido misteriosamente el archivo. Gracias por la información :)
    
    Inicia sesión para responder

Dejar una respuesta Cancelar respuesta

Lo siento, debes estar conectado para publicar un comentario.

Conéctese con su 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

Todos los mensajes

Couchbase Mobile en una aplicación Telerik NativeScript multiplataforma

Requisitos

Creación de un nuevo proyecto NativeScript

Incluido el SDK de Couchbase Lite

Desarrollo de la aplicación

Creación de la lógica de la aplicación

Diseño de una interfaz de usuario multiplataforma

Incluyendo Couchbase Sync Gateway para Replicación de Datos

Conclusión

Autor

Publicado por Nic Raboy, Defensor del Desarrollador, Couchbase

3 Comentarios

Dejar una respuesta Cancelar respuesta