Couchbase Mobile in a Cross platform Telerik NativeScript App

Pessoalmente, sou um grande fã da Telerik NativeScript. É uma estrutura de desenvolvimento de plataforma cruzada para criar nativo Aplicativos para Android e iOS usando um único conjunto de códigos, sendo esse conjunto de códigos o JavaScript. Tive de enfatizar a parte nativa porque essa é uma das únicas estruturas entre plataformas que não usa uma visualização da Web para exibir conteúdo. Isso, por sua vez, cria um aplicativo que tem um desempenho incrível.

Até agora, não havia uma boa solução para armazenar dados em um aplicativo NativeScript. Isso é até agora!

Com a ajuda da Telerik e da equipe do NativeScript, consegui criar um Plug-in do Couchbase Lite para NativeScript que permite que você aproveite o poder do NoSQL em seu aplicativo móvel. Quando emparelhado com o Couchbase Sync Gateway, os dados podem ser sincronizados entre dispositivos e plataformas.

Veremos o que é necessário para começar a trabalhar com Couchbase Mobile em seu aplicativo NativeScript.

Os requisitos

Há alguns requisitos para que isso seja possível.

NativeScript 1.7+
O Android SDK (se estiver criando aplicativos Android)
Xcode e um Mac (se estiver criando aplicativos iOS)
Gateway de sincronização do Couchbase (para sincronização)

Você não precisa criar para Android e iOS, mas isso certamente é conveniente.

Criação de um novo projeto NativeScript

Vamos criar um aplicativo simples de lista de nomes que sincroniza entre dispositivos. Para fazer isso, execute o seguinte em um prompt de comando (Windows) ou terminal (Mac e Linux):


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

tns criar Projeto Couchbase

cd Projeto Couchbase

tns plataforma adicionar ios

tns plataforma adicionar androide

Lembre-se de que, se você não estiver usando um Mac, não poderá adicionar e criar para a plataforma iOS. A partir de agora, o prompt de comando ou o terminal deve usar Projeto Couchbase como o diretório de trabalho.

Incluindo o SDK do Couchbase Lite

Com o projeto criado, é hora de incluir o plug-in do Couchbase Lite para uso. No Terminal ou no prompt de comando, execute o seguinte:


tns plugin add nativescript-couchbase

tns plug-in adicionar nativescript-couchbase

Isso incluirá o plug-in para quaisquer plataformas que tenham sido adicionadas ao projeto.

Desenvolvimento do aplicativo

Com o projeto criado, precisamos criar alguns arquivos e diretórios. Vá em frente e adicione o seguinte:


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 aplicativo/visualizações

mkdir aplicativo/visualizações/lista

mkdir aplicativo/visualizações/criar

toque aplicativo/visualizações/lista/lista.js

toque aplicativo/visualizações/lista/lista.xml

toque aplicativo/visualizações/criar/criar.js

toque aplicativo/visualizações/criar/criar.xml

É nos arquivos acima que passaremos a maior parte do tempo, mas, antes de começarmos, abra o arquivo aplicativo/app.js e substitua a linha apropriada pela seguinte:


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

aplicativo.iniciar({ moduleName: "views/list/list" });

Isso informa ao aplicativo NativeScript que o lista será nossa primeira visualização.

Criação da lógica do aplicativo

Os arquivos de lógica do aplicativo são os arquivos JavaScript. Um arquivo conduzirá a lógica por trás de nossa exibição de lista e o outro conduzirá a lógica por trás de nosso formulário de criação de nome. Começando com a lógica da lista, abra o arquivo app/views/list/list.js e inclua o seguinte 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 couchbaseModule = exigir("nativescript-couchbase");

var observávelArrayModule = exigir("data/observable-array");

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

var banco de dados;

var personList;

função pageLoaded(argumentos) {

var página = argumentos.objeto;

personList = novo observávelArrayModule.ObservableArray([]);

banco de dados = novo couchbaseModule.Couchbase("banco de dados de teste");

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

emissor.emitir(JSON.analisar(documento)._id, documento);

});

atualizar();

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

}

função atualizar() {

personList.emenda(0);

var linhas = banco de dados.executeQuery("pessoas");

para(var i em linhas) {

se(linhas.hasOwnProperty(i)) {

personList.empurrar(JSON.analisar(linhas[i]));

}

função criar() {

frameModule.mais alto().navegar({moduleName: "views/create/create" (visualizações/criar/criar)});

}

exportações.pageLoaded = pageLoaded;

exportações.atualizar = atualizar;

exportações.criar = criar;

Há muita coisa acontecendo no arquivo lógico acima, portanto, vamos detalhá-lo. A primeira coisa que estamos fazendo é incluir algumas bibliotecas JavaScript:


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

var couchbaseModule = exigir("nativescript-couchbase");

var observávelArrayModule = exigir("data/observable-array");

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

O plug-in que foi instalado deve ser importado primeiro. Todos os dados lidos do banco de dados serão armazenados em uma matriz observável. Isso serve para que possamos nos inscrever nas alterações de dados e associar os dados à interface do usuário. Por fim, o quadro é importado para que possamos navegar para outras páginas.

Para abrir um banco de dados NoSQL do Couchbase específico, executamos o seguinte comando:


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

banco de dados = novo couchbaseModule.Couchbase("banco de dados de teste");

O comando acima abrirá o banco de dados se ele existir ou criará e abrirá o banco de dados se ele não existir.


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

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

emissor.emitir(JSON.analisar(documento)._id, documento);

});

Se esta é a primeira vez que você trabalha com NoSQL, o trecho acima pode parecer muito estranho. Ele é a criação de uma visualização do MapReduce. Em vez de escrever uma instrução SQL como no SQLite, estamos criando exibições do MapReduce que podemos consultar para obter dados. A visualização acima retornará um par chave-valor de todos os documentos em que a chave é o ID do documento e o valor é o próprio documento. Essa visualização será chamada de pessoas.

Com a visualização instalada, ela precisa ser consultada. Isso é feito por meio da função atualizar função. Antes de chegar à função de atualização, observe a linha final da função pageLoaded function. Isso mostra que estaremos vinculando a função personList para nossa interface do usuário. Vamos dar uma olhada nisso atualizar função:


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

função atualizar() {

personList.emenda(0);

var linhas = banco de dados.executeQuery("pessoas");

para(var i em linhas) {

se(linhas.hasOwnProperty(i)) {

personList.empurrar(JSON.analisar(linhas[i]));

}

Toda vez que fizermos uma consulta, a lista será redefinida e preenchida novamente. A visualização só será consultada quando a página for carregada. Veremos o motivo mais adiante neste tutorial.

Com o app/views/list/list.js fora do caminho, podemos nos concentrar no arquivo de lógica por trás do formulário de criação. Abra o arquivo app/views/create/create.js e inclua o seguinte 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 couchbaseModule = exigir("nativescript-couchbase");

var observávelArrayModule = exigir("data/observable-array");

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

var banco de dados;

var tfFirstName;

var tfLastName;

função pageLoaded(argumentos) {

var página = argumentos.objeto;

personList = novo observávelArrayModule.ObservableArray([]);

banco de dados = novo couchbaseModule.Couchbase("banco de dados de teste");

tfFirstName = página.getViewById("firstname");

tfLastName = página.getViewById("lastname" (sobrenome));

página.bindingContext = {};

}

função salvar() {

banco de dados.createDocument({

"firstname": tfFirstName.texto,

"lastname" (sobrenome): tfLastName.texto

});

frameModule.goBack();

}

exportações.pageLoaded = pageLoaded;

exportações.salvar = salvar;

Este arquivo é muito mais leve em comparação com o anterior. Basicamente, estamos capturando os elementos do formulário que ainda não foram criados. Quando chamamos o arquivo salvar ele pegará os valores nos campos do formulário e criará o documento no Couchbase. Não há esquemas SQL ou bobagens que o atrasem quando se trata de desenvolvimento. Um dos principais benefícios do uso do NoSQL.

A lógica está concluída, por enquanto, e podemos passar para a interface do usuário.

Projetando uma interface de usuário multiplataforma

O código da interface do usuário é curto e simples. Lembre-se de que nossa lista conterá apenas informações sobre os usuários que adicionarmos. Abra a seção app/views/list/list.xml e inclua o seguinte código:



    
  
   
    
   
  
 
    
        
            
                <label></label>

<rótulo></rótulo>

Quando a página é carregada, ela chama a função pageLoaded função. A barra de ação tem um único botão para navegar até o criar página. Por fim, o modo de exibição de lista itera sobre os personList matriz observável que foi criada no arquivo lógico.

No que se refere ao formulário de criação, há também uma pequena quantidade de código XML a ser incluída. Abra o arquivo app/views/create/create.xml e inclua o seguinte código:



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

<rótulo></rótulo>

Novamente o pageLoaded é chamado no carregamento da página. A barra de ação tem um único botão para salvar os dados do Couchbase, e o formulário contém dados que são lidos por meio do arquivo lógico que criamos anteriormente.

Devemos ter um aplicativo totalmente funcional que usa o Couchbase para armazenar dados. No entanto, até o momento, esse aplicativo está apenas off-line. Os dados não estão sendo sincronizados.

Inclusão do Couchbase Sync Gateway para replicação de dados

Para sincronizar os dados do aplicativo entre o Couchbase Server e outros dispositivos, o Gateway de sincronização do Couchbase deve ser incluído junto com um arquivo de configuração especial. Para simplificar as coisas, não vamos nos aprofundar no arquivo de configuração do Sync Gateway. Algo como isto 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+", "Mudanças+", "Anexar+"],

"bancos de dados": {

"banco de dados de teste": {

"servidor":"walrus:",

"sync":`

função (doc) {

canal (doc.canais);

}

"usuários": {

"CONVIDADO": {

"desativado": falso,

"admin_channels": ["*"]

}

O que importa para nós neste tutorial é o código que se comunica com o Sync Gateway por meio do nosso aplicativo. Agora, vamos revisitar o código app/views/list/list.js e incluir algum código no arquivo pageLoaded função. Abra o arquivo e inclua o seguinte:


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 empurrar = banco de dados.createPushReplication("http://localhost:4984/test-database");

var puxar = banco de dados.createPullReplication("http://localhost:4984/test-database");

empurrar.setContinuous(verdadeiro);

puxar.setContinuous(verdadeiro);

empurrar.iniciar();

puxar.iniciar();

No exemplo acima, estamos dizendo ao nosso aplicativo que faremos push e pull do mesmo Sync Gateway que está sendo executado localmente. As replicações ocorrerão continuamente em ambas as direções. Em seguida, finalmente iniciamos o processo.

Com os dados sendo carregados e baixados, precisamos de uma maneira de atualizar a interface do usuário quando necessário. Anteriormente, mencionei que estávamos consultando apenas uma vez quando a página era carregada. Isso ocorre porque, na verdade, usaremos um ouvinte para ouvir as alterações. Isso é mais eficiente do que consultar continuamente quantidades potencialmente enormes de dados. Dentro de seu app/views/list/list.js dentro do arquivo pageLoaded inclua o seguinte 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);
        }
    }
});

banco de dados.addDatabaseChangeListener(função(mudanças) {

var changeIndex;

para(var i = 0; i < mudanças.comprimento; i++) {

var documentId;

documentId = mudanças[i].getDocumentId();

changeIndex = indexOfObjectId(documentId, personList);

var documento = banco de dados.getDocument(documentId);

se(changeIndex == -1) {

personList.empurrar(documento);

} mais {

personList.setItem(changeIndex, documento);

}

});

O objetivo aqui é pegar uma alteração, ver se o documento já existe na lista, se não existir, adicioná-lo, caso contrário, alterá-lo. A função para descobrir onde um documento existe na lista pode ser vista abaixo:


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;
}

função indexOfObjectId(agulha, palheiro) {

para(var i = 0; i < palheiro.comprimento; i++) {

se(palheiro.getItem(i) != indefinido &amplificador;&amplificador; palheiro.getItem(i).hasOwnProperty("_id")) {

se(palheiro.getItem(i)._id == agulha) {

retorno i;

}

retorno -1;

}

Talvez não seja a maneira mais eficiente de atualizar uma exibição de lista, mas funciona para este exemplo.

Nesse ponto, se você executar o Sync Gateway e seu aplicativo, ele deverá sincronizar os dados.

Conclusão

Você acabou de ver como criar uma plataforma cruzada simples, nativoaplicativo para Android e iOS que sincroniza usando NativeScript e o plug-in Couchbase Lite. Mais informações sobre o plug-in podem ser vistas no site do projeto GitHub página. Mais informações sobre o Couchbase Mobile podem ser vistas na página Portal do desenvolvedor do Couchbase.

Nic Raboy, defensor dos desenvolvedores, Couchbase

3 Comentários

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

Uma pergunta: onde exatamente o banco de dados é armazenado? Quando instalo o aplicativo NativeScript e o executo, posso acessar o arquivo do banco de dados por meio do gerenciador de arquivos (caso eu queira fazer backups etc.)? Supondo que eu decida não usar um gateway de sincronização, é claro.

Acesse para responder
1. Nic Raboy, defensor dos desenvolvedores, Couchbase abril 30, 2018 em 8:15 am
  
  O Android e o iOS armazenam todos os bancos de dados, independentemente do tipo, em uma parte protegida do dispositivo. A única maneira de acessá-los é fazer com que o dispositivo tenha acesso root ou jailbreak.
  
  Acesse para responder
  1. Hipopótamo maio 1, 2018 em 3:19 am
    
    Ahh, estou vendo. É bom saber disso - eu estava me perguntando onde o arquivo tinha ido parar misteriosamente! Obrigado pela informação :)
    
    Acesse para responder

Deixar uma resposta Cancelar resposta

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

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

Couchbase Mobile em um aplicativo Telerik NativeScript multiplataforma

Os requisitos

Criação de um novo projeto NativeScript

Incluindo o SDK do Couchbase Lite

Desenvolvimento do aplicativo

Criação da lógica do aplicativo

Projetando uma interface de usuário multiplataforma

Inclusão do Couchbase Sync Gateway para replicação de dados

Conclusão

Autor

Postado por Nic Raboy, defensor dos desenvolvedores, Couchbase

3 Comentários

Deixar uma resposta Cancelar resposta