Sync Couchbase in Ionic Framework and PouchDB

O Ionic Framework ainda é um dos líderes no desenvolvimento de aplicativos móveis híbridos. Ele permite que você crie aplicativos para Android e iOS
usando apenas HTML, JavaScript e CSS.

Anteriormente, escrevi sobre como usar o Couchbase em
um aplicativo móvel Android e iOS do Ionic Frameworkmas usava o Couchbase
Lite como seu banco de dados NoSQL incorporado. Desta vez, vamos substituir o Couchbase Lite pelo PouchDB. Você deve usar um
método em detrimento do outro? Não, no final, tudo se resume à preferência.

Se você ainda não viu minha postagem sobre PouchDB
e AngularJS com o CouchbaseRecomendo que você dê uma olhada, pois este tutorial usará muitos dos mesmos conceitos e códigos.

O que será necessário

Há alguns requisitos para o aplicativo que vamos criar. Veremos como obtê-los ao longo do processo, mas aqui está um
para que você saiba no que está se metendo.

Gateway de sincronização do Couchbase
PouchDB 4
Estrutura iônica 1

Obtendo o gateway de sincronização do Couchbase

Este projeto exigirá o Couchbase Sync Gateway para ser bem-sucedido. Se você não estiver familiarizado, o Couchbase Sync Gateway é um
serviço intermediário que lida com o processamento de dados entre o aplicativo local (seu aplicativo Ionic Framework) e o Couchbase Server. Nós
não usaremos o Couchbase Server neste exemplo, portanto o Sync Gateway atuará como nossa solução de armazenamento em memória na nuvem.

O Couchbase Sync Gateway pode ser encontrado por meio do Seção de downloads do Couchbase.

Criando nosso projeto de estrutura iônica

Antes de prosseguir, é bom observar que, se você não estiver usando um Mac, não poderá adicionar e criar para a plataforma iOS. Windows, Mac,
e Linux podem criar para Android, mas somente o Mac pode criar para iOS.

No prompt de comando (Windows) ou no Terminal (Mac e Linux), execute o seguinte comando para criar um novo projeto do Ionic Framework:


ionic start PouchProject blank
cd PouchProject
ionic platform add android
ionic platform add ios

iônico iniciar PouchProject em branco

cd PouchProject

iônico plataforma adicionar androide

iônico plataforma adicionar ios

Nosso projeto de modelo em branco agora está pronto para ser trabalhado.

Incluindo as dependências

Se você ainda não o fez, download PouchDB 4 e anote o min.js arquivo como
que usaremos no projeto. Copie o
PouchDB min.js em seu projeto Ionic. www/js diretório.

Com o arquivo no lugar, abra o arquivo www/index.html e inclua o seguinte:

Essa linha de script deve aparecer acima da linha app.js e as informações de versão devem corresponder às de sua versão real
em vez da versão que incluí aqui.

Modificação do arquivo de índice

Antes de entrarmos no código do AngularJS, precisamos fazer uma revisão final no arquivo www/index.html arquivo. Abra-o e
substitua as tags pelo seguinte:

Como estamos usando o AngularJS UI-Router que vem com o Ionic Framework, precisamos apenas de um www/index.html arquivo.

Criando nosso serviço AngularJS do PouchDB

Antes de começarmos a usar o PouchDB, precisamos criar um invólucro para que ele se encaixe perfeitamente no AngularJS e no Ionic Framework. PouchDB pronto para uso
é uma biblioteca JavaScript simples, portanto, não é necessariamente a mais fácil de usar quando se trata de AngularJS.

Dentro da seção www/js/app.js inclua o seguinte código de serviço:


.service("$pouchDB", ["$rootScope", "$q", function($rootScope, $q) {

    var database;
    var changeListener;

    this.setDatabase = function(databaseName) {
        database = new PouchDB(databaseName);
    }

    this.startListening = function() {
        changeListener = database.changes({
            live: true,
            include_docs: true
        }).on("change", function(change) {
            if(!change.deleted) {
                $rootScope.$broadcast("$pouchDB:change", change);
            } else {
                $rootScope.$broadcast("$pouchDB:delete", change);
            }
        });
    }

    this.stopListening = function() {
        changeListener.cancel();
    }

    this.sync = function(remoteDatabase) {
        database.sync(remoteDatabase, {live: true, retry: true});
    }

    this.save = function(jsonDocument) {
        var deferred = $q.defer();
        if(!jsonDocument._id) {
            database.post(jsonDocument).then(function(response) {
                deferred.resolve(response);
            }).catch(function(error) {
                deferred.reject(error);
            });
        } else {
            database.put(jsonDocument).then(function(response) {
                deferred.resolve(response);
            }).catch(function(error) {
                deferred.reject(error);
            });
        }
        return deferred.promise;
    }

    this.delete = function(documentId, documentRevision) {
        return database.remove(documentId, documentRevision);
    }

    this.get = function(documentId) {
        return database.get(documentId);
    }

    this.destroy = function() {
        database.destroy();
    }

}])

.serviço("$pouchDB", ["$rootScope", "$q", função($rootScope, $q) {

var banco de dados;

var changeListener;

este.setDatabase = função(databaseName) {

banco de dados = novo PouchDB(databaseName);

}

este.startListening = função() {

changeListener = banco de dados.mudanças({

ao vivo: verdadeiro,

incluir_docs: verdadeiro

}).em("mudança", função(mudança) {

se(!mudança.excluído) {

$rootScope.$transmissão("$pouchDB:change", mudança);

} mais {

$rootScope.$transmissão("$pouchDB:delete", mudança);

}

});

}

este.stopListening = função() {

changeListener.cancelar();

}

este.sincronização = função(banco de dados remoto) {

banco de dados.sincronização(banco de dados remoto, {ao vivo: verdadeiro, tentar novamente: verdadeiro});

}

este.salvar = função(jsonDocument) {

var diferido = $q.adiar();

se(!jsonDocument._id) {

banco de dados.postagem(jsonDocument).então(função(resposta) {

diferido.resolver(resposta);

}).captura(função(erro) {

diferido.rejeitar(erro);

});

} mais {

banco de dados.colocar(jsonDocument).então(função(resposta) {

diferido.resolver(resposta);

}).captura(função(erro) {

diferido.rejeitar(erro);

});

}

retorno diferido.promessa;

}

este.excluir = função(documentId, documentRevision) {

retorno banco de dados.remover(documentId, documentRevision);

}

este.obter = função(documentId) {

retorno banco de dados.obter(documentId);

}

este.destruir = função() {

banco de dados.destruir();

}

}])

Você pode estar pensando que esse código parece familiar. Bem, é exatamente o código que usei em
o Exemplo anterior do PouchDB para AngularJS.
Agora podemos usar facilmente o PouchDB em nosso projeto.

Criação de um banco de dados local e início da sincronização

O objetivo aqui é criar um banco de dados local quando nosso aplicativo for iniciado (se ele ainda não existir) e, em seguida, iniciar a sincronização com o
Gateway de sincronização do Couchbase. Isso pode ser feito no AngularJS executar() função de nossa www/js/app.js
file:


.run(function($ionicPlatform, $pouchDB) {
    $ionicPlatform.ready(function() {
        if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
    $pouchDB.setDatabase("nraboy-test");
    if(ionic.Platform.isAndroid()) {
        $pouchDB.sync("http://192.168.57.1:4984/test-database");
    } else {
        $pouchDB.sync("http://localhost:4984/test-database");
    }
})

.executar(função($Plataforma Iônica, $bolsaDB) {

$Plataforma Iônica.pronto(função() {

se(janela.cordova &amplificador;&amplificador; janela.cordova.plugins.Teclado) {

cordova.plugins.Teclado.ocultar a barra de acessórios do teclado(verdadeiro);

}

se(janela.Barra de status) {

Barra de status.styleDefault();

}

});

$bolsaDB.setDatabase("nraboy-test");

se(iônico.Plataforma.isAndroid()) {

$bolsaDB.sincronização("http://192.168.57.1:4984/test-database");

} mais {

$bolsaDB.sincronização("http://localhost:4984/test-database");

}

})

Os endereços IP que usei podem variar para você em termos de simuladores, mas, para a produção, eles provavelmente corresponderão tanto ao iOS quanto ao
Android.

Projetando um controlador para suas visualizações

Ainda não criamos nossas exibições, mas vamos em frente e criar a lógica do controlador para elas. Abra a seção
www/js/app.js e inclua o seguinte controlador:


.controller("MainController", function($scope, $rootScope, $state, $stateParams, $ionicHistory, $pouchDB) {

    $scope.items = {};

    $scope.save = function(firstname, lastname, email) { }

    $scope.delete = function(id, rev) { }

    $scope.back = function() { }

})

.controlador("MainController", função($escopo, $rootScope, $estado, $stateParams, $ionicHistory, $bolsaDB) {

$escopo.itens = {};

$escopo.salvar = função(primeiro nome, sobrenome, e-mail) { }

$escopo.excluir = função(id, rev) { }

$escopo.voltar = função() { }

})

No momento, temos um controlador básico. Sabemos que salvaremos e excluiremos itens e, por isso, definimos uma função para isso
tarefas. Também temos uma função chamada back() que abrirá um item (voltará) na pilha do histórico.

Vamos começar de baixo para cima e começar com o back() função. Ela deve conter o seguinte código:


$scope.back = function() {
    $ionicHistory.goBack();
}

$escopo.voltar = função() {

$ionicHistory.goBack();

}

Quando se trata de excluir itens do banco de dados, precisaremos fornecer um ID de documento específico para excluir, bem como a revisão específica
que desejamos excluir. Tudo isso será passado a partir das exibições, mas a lógica será a seguinte:


$scope.delete = function(id, rev) {
    $pouchDB.delete(id, rev);
}

$escopo.excluir = função(id, rev) {

$bolsaDB.excluir(id, rev);

}

O delete(id, rev) faz uma chamada para o serviço PouchDB que criamos.

Isso nos deixa com o salvar() função. Com base na simplicidade do nosso aplicativo, salvaremos apenas três dados
mas ela pode ser facilmente alterada, caso seja necessário. Dentro do seu controlador, crie a tag salvar() funcionam dessa forma:


$scope.save = function(firstname, lastname, email) {
    var jsonDocument = {
        "firstname": firstname,
        "lastname": lastname,
        "email": email
    };
    if($stateParams.documentId) {
        jsonDocument["_id"] = $stateParams.documentId;
        jsonDocument["_rev"] = $stateParams.documentRevision;
    }
    $pouchDB.save(jsonDocument).then(function(response) {
        $state.go("list");
    }, function(error) {
        console.log("ERROR -&gt; " + error);
    });
}

$escopo.salvar = função(primeiro nome, sobrenome, e-mail) {

var jsonDocument = {

"firstname": primeiro nome,

"lastname" (sobrenome): sobrenome,

"email": e-mail

};

se($stateParams.documentId) {

jsonDocument["_id"] = $stateParams.documentId;

jsonDocument["_rev"] = $stateParams.documentRevision;

}

$bolsaDB.salvar(jsonDocument).então(função(resposta) {

$estado.ir("lista");

}, função(erro) {

console.registro("ERROR -> " + erro);

});

}

Essa função faz duas coisas. Prepara uma inserção ou uma atualização caso um ID de documento e uma revisão de documento
estar disponível.

Mas ainda não terminamos. Embora tenhamos concluído todas as nossas funções, ainda precisamos lidar com a escuta de
mudanças. Quando chamamos $pouchDB.startListening(); em nosso controlador, nosso serviço PouchDB começará a usar o
AngularJS $broadcast. Enquanto estiver transmitindo, podemos ouvir essas transmissões usando algo como:


$rootScope.$on("$pouchDB:change", function(event, data) {
    $scope.items[data.doc._id] = data.doc;
    $scope.$apply();
});

$rootScope.$on("$pouchDB:delete", function(event, data) {
    delete $scope.items[data.doc._id];
    $scope.$apply();
});

$rootScope.$em("$pouchDB:change", função(evento, dados) {

$escopo.itens[dados.doc._id] = dados.doc;

$escopo.$aplicar();

});

$rootScope.$em("$pouchDB:delete", função(evento, dados) {

excluir $escopo.itens[dados.doc._id];

$escopo.$aplicar();

});

Agora, nossa lógica de controle de exibição está pronta para ser usada!

Definição das visualizações do Ionic Framework

A última parte de nosso www/js/app.js será usado para definir nossas exibições. Isso é feito no arquivo AngularJS
config() funcionam dessa forma:


.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("list", {
            "url": "/list",
            "templateUrl": "templates/list.html",
            "controller": "MainController"
        })
        .state("item", {
            "url": "/item/:documentId/:documentRevision",
            "templateUrl": "templates/item.html",
            "controller": "MainController"
        });
    $urlRouterProvider.otherwise("list");
})

.configuração(função($provedor de estado, $provedor de roteamento de url) {

$provedor de estado

.estado("lista", {

"url": "/lista",

"templateUrl": "templates/list.html",

"controlador": "MainController"

})

.estado("item", {

"url": "/item/:documentId/:documentRevision",

"templateUrl": "templates/item.html",

"controlador": "MainController"

});

$provedor de roteamento de url.caso contrário("lista");

})

Definimos duas exibições, uma para todos os itens de nossa lista e outra para criar e atualizar novos itens de lista. As item recebe um
id do documento e parâmetro de revisão do documento. Quando eles estão presentes, significa que estaremos atualizando um documento específico.

Toda a nossa lógica de AngularJS está completa agora. Inicializamos nosso banco de dados, começamos a sincronizar, definimos nossas exibições e planejamos a interação
de nossos pontos de vista.

Criação de uma visualização de lista

Aqui definiremos como os dados são apresentados na lista. Na seção www/templates/list.html adicione o seguinte código:



    
        <button class="right button button-icon icon ion-plus"></button>
    
    
        
            
                {{value.firstname}} {{value.lastname}}

<botão classe="botão direito botão-ícone ícone de íon-plus"></botão>

Ao passar o dedo sobre um item da lista, é apresentado um botão de exclusão que chamará o delete() do nosso controlador.

Criação de uma visualização de formulário

Aqui definiremos quais documentos serão inseridos ou atualizados em nosso banco de dados. Essencialmente, essa visualização é apenas um formulário. Na seção
www/templates/item.html adicione o seguinte código:

Configuração do Sync Gateway

O PouchDB e o Ionic Framework são apenas metade da história aqui. É claro que eles criarão um bom aplicativo executado localmente, mas queremos que as coisas sejam sincronizadas. O Couchbase Sync Gateway é o nosso endpoint para isso e, obviamente, o PouchDB funciona muito bem com ele.

Dentro da seção sync-gateway-config.json adicione o seguinte:


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

{

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

"bancos de dados": {

"banco de dados de teste": {

"servidor":"walrus:data",

"sync":`

função (doc) {

canal (doc.canais);

}

"usuários": {

"CONVIDADO": {

"desativado": falso,

"admin_channels": ["*"]

}

"CORS": {

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

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

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

"MaxAge": 17280000

}

Essa é uma das configurações mais básicas existentes. Algumas observações sobre ela:

Ele usa walrus:data para armazenamento, que fica na memória e não persiste. Não deve ser usado para produção.
Todos os dados são sincronizados por meio do usuário GUEST, portanto, não há autenticação acontecendo aqui, mas poderia haver.
Estamos corrigindo os problemas de CORS, permitindo solicitações em localhost:9000, caso você queira servir com Python para testes de navegador.

Testando o aplicativo

Neste ponto, todo o nosso código está no lugar e o Sync Gateway está pronto para ser executado. Inicie o Sync Gateway executando o seguinte em um arquivo
Prompt de comando ou Terminal:


/path/to/sync/gateway/bin/sync-gateway /path/to/project/sync-gateway-config.json

/caminho/para/sincronização/portal/caixa/sincronização-portal /caminho/para/projeto/sincronização-portal-configuração.json

O Sync Gateway agora deve estar em execução e você pode validar isso acessando http://localhost:4984 no seu navegador da Web.

Testes para Android

Com um dispositivo conectado ou um simulador em execução, no prompt de comando ou no terminal, execute os dois comandos a seguir para criar e
instalar o arquivo APK:


ionic build android
adb install -r platforms/android/build/outputs/apk/android-debug.apk

iônico construir androide

adb instalar -r plataformas/androide/construir/saídas/apk/androide-depurar.apk

Testes para iOS

Há duas boas maneiras de fazer isso. Você pode compilar o projeto e abri-lo com o Xcode, ou pode compilar e
emular o aplicativo sem iniciar o Xcode. A primeira pode ser feita da seguinte forma:


ionic build ios

iônico construir ios

Em seguida, abra o diretório platform/ios/ do projeto e inicie o arquivo de projeto do Xcode.

Se você tiver instalado o pacote ios-sim do Node Package Manager (NPM), poderá fazer o seguinte:


ionic build ios
ionic emulate ios

iônico construir ios

iônico emular ios

Conclusão

Você viu agora que há duas maneiras de usar o Couchbase em seu aplicativo móvel Android e iOS do Ionic Framework. Você pode usar o
Plug-in do Apache Cordova Couchbase, conforme demonstrado em
o séries anteriores do blogou você pode
usar o PouchDB. Ambas são opções muito adequadas quando se trata de armazenamento e sincronização de dados entre plataformas em seu aplicativo.

Você pode obter o código-fonte completo desta postagem do blog por meio de
nosso Repositório do GitHub do Couchbase Labs.

Nic Raboy, defensor dos desenvolvedores, Couchbase

Postado em: Sem categoria
Tagged in: angularjs, híbrido, estrutura iônica, bolsadb

Postado por Nic Raboy, defensor dos desenvolvedores, Couchbase

Nic Raboy é um defensor das modernas tecnologias de desenvolvimento móvel e da Web. Ele tem experiência em Java, JavaScript, Golang e uma variedade de estruturas, como Angular, NativeScript e Apache Cordova. Nic escreve sobre suas experiências de desenvolvimento relacionadas a tornar o desenvolvimento móvel e da Web mais fácil de entender.

Todas as publicações Site

28 Comentários

loic knuchel novembro 11, 2015 em 6:45 pm

Olá, artigo interessante. Você conhece alguma hospedagem para o CouchDB para armazenar/sincronizar dados de aplicativos?

Acesse para responder
1. Nic Raboy novembro 11, 2015 em 7:08 pm
  
  Hi,
  
  Este artigo fala sobre o Couchbase. O CouchDB é um software totalmente diferente.
  
  Você pode hospedar o Couchbase em praticamente qualquer coisa. As soluções de hospedagem mais populares são AWS e Joyent, mas há muitas outras.
  
  Isso responde à sua pergunta?
  
  Melhor,
  
  Acesse para responder
  1. loic knuchel novembro 11, 2015 em 7:32 pm
    
    Erro meu, eu sempre cometo esse erro...
    Estou procurando uma hospedagem Couchbase realmente simples, algo como o heroku, por exemplo...
    Muitos tutoriais sobre o PouchDB explicam como usá-lo localmente, mas não consigo encontrar nenhum que mostre a sincronização real entre dispositivos com um servidor (e algumas recomendações para hospedagem, segurança...).
    
    Ainda estou um pouco confuso sobre como usar o PouchDB / Couchbase como armazenamento primário para um aplicativo, mas devo investigar/testar mais ;)
    
    Acesse para responder
    1. Nic Raboy novembro 11, 2015 em 7:47 pm
      
      Você pode ler isto:
      
      http://www.couchbase.com/2015…
      
      Esta é a parte 1 de uma série de duas partes para fazer com que o Couchbase Server e o Couchbase Sync Gateway funcionem no AWS.
      
      Melhor,
      
      Acesse para responder
      1. loic knuchel novembro 11, 2015 em 9:28 pm
        
        Vou verificar. Muito obrigado.
      2. Nic Raboy novembro 11, 2015 em 10:22 pm
        
        Não tem problema! Informe-nos sobre as descobertas que você fizer :-)
R.O. novembro 11, 2015 em 10:03 pm

Obrigado, senhor, por esse excelente tutorial.

Acesse para responder
1. Nic Raboy novembro 11, 2015 em 10:22 pm
  
  Não tem problema!
  
  Acesse para responder
  1. R.O. novembro 14, 2015 em 6:18 am
    
    Olá, senhor,
    Obrigado, entendi tudo corretamente.
    Além disso, eu estava tentando adicionar outra entrada, ou seja, uma entrada de data. Eu a forneci ao parâmetro e argumento da função salvar.
    E estava tudo bem depois de salvar no banco de dados, mas não estava exibindo o valor da data no modo de edição.
    Obrigado.
    
    Acesse para responder
    1. R.O. novembro 14, 2015 em 6:39 am
      
      Olá, senhor,
      Acabei resolvendo o problema ao incluir isso na função get.
      
      $scope.inputForm.Date = new Date($scope.inputForm.Date);
      
      Acesse para responder
R.O. novembro 15, 2015 em 10:46 am

Olá, senhor,
Mais uma vez, obrigado pelo tutorial.
Gostaria de dizer que encontrei esse lançamento no console ao testar o aplicativo depois de algum tempo.
Estou usando (windows, ionic, angularjs, chrome).

\" (nó) aviso: possível vazamento de memória do EventEmitter detectado. 11 ouvintes adicionados. Use emitter.setMaxListeners() para aumentar o limite \"

Obrigado

Acesse para responder
1. Nic Raboy novembro 16, 2015 em 5:00 pm
  
  De acordo com Nolan Lawson, o criador do PouchDB, isso é apenas um aviso e não um erro:
  
  http://pouchdb.com/errors.html…
  
  Ele recomenda a atualização para o PouchDB 5 e o aumento do limite se você quiser que o erro desapareça.
  
  Melhor,
  
  Acesse para responder
Danail novembro 19, 2015 em 9:38 pm

Oi Nic,

Obrigado pelos tutoriais!

Tentei usar o \"Couchbase Lite PhoneGap\" e o \"PouchDB + SQLite\" como um cliente para o Sync Gateway.
Parece que o \"Couchbase Lite PhoneGap\" tem alguns problemas: https://github.com/couchbasela... e também o PouchDB é mais multiplataforma, na minha opinião (podemos reutilizar o código em aplicativos da Web também) - espero que o Couchbase Sync Gateway não interrompa a integração com o PouchDB e vice-versa.

Então, tentei atualizar seu exemplo para o PouchDB 5.1.0 mais recente e encontrei erros e problemas (acho que estão relacionados à integração do CORS e também são semelhantes a este): https://github.com/pouchdb/pou…

Você já experimentou a versão mais recente do PouchDB 5.1.0 / ou até mesmo a última compilação noturna que corrige alguns dos bugs?

Você poderia fornecer mais informações: você usou intencionalmente a versão 4.x mais recente: 4.0.3, devido aos erros acima ou a outros problemas?

Exemplo de serviços do PouchDB 5.x que eu escrevi: https://gist.github.com/Danail…

Acesse para responder
1. Nic Raboy novembro 19, 2015 em 11:15 pm
  
  Olá,
  
  Escrevi / publiquei este artigo apenas alguns dias antes do lançamento da versão 5.x. Não foi intencional usar uma versão mais antiga. Conversei com Nolan Lawson, o criador do PouchDB, e ele disse que deveria funcionar.
  
  Farei alguns testes e lhe informarei.
  
  Melhor,
  
  Acesse para responder
  1. Danail novembro 20, 2015 em 2:26 pm
    
    Obrigado por sua resposta rápida!
    
    Testei com a versão mais recente \"Couchbase Sync Gateway Community Edition 1.1.1\" e \"PouchDB 5.0.1\" - antes de usar a imagem do Docker, que não é a versão mais recente (a imagem mais recente do docker é 1.1.0 https://hub.docker.com/r/couch... e tem bugs críticos - http://developer.couchbase.com….
    
    A migração de seu aplicativo de teste é fácil: https://github.com/DanailMinch... e não precisa de nenhuma alteração específica.
    
    Portanto, os resultados são os mesmos:
    
    Quando inicio o aplicativo e no aplicativo:
    1. inserir o primeiro registro
    2. editar o mesmo registro
    3. excluir o mesmo registro
    Posso ver as mudanças em http://localhost:4985/_admin/db/test-database
    
    Mas, depois disso, recebo alguns erros estranhos no console do Sync Gateway:
    
    2015-11-20T13:59:55.370Z Changes+: MultiChangesFeed: canais expandem para channels.TimedSet{\"*\":0x0} ...
    2015-11-20T13:59:55.370Z Changes: MultiChangesFeed concluído
    2015-11-20T13:59:55.370Z Changes+: MultiChangesFeed: canais expandem para channels.TimedSet{\"*\":0x0} ...
    2015-11-20T13:59:55.370Z Changes+: MultiChangesFeed aguardando...
    2015-11-20T13:59:55.370Z Changes+: Aguardando a contagem do \"test-database\"\ passar de 6
    2015-11-20T13:59:55.761Z HTTP: #791: GET /?_nonce=1448027995207
    2015-11-20T13:59:55.786Z HTTP: #792: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995234
    2015-11-20T13:59:55.787Z HTTP: #792: -> 404 ausente (0,4 ms)
    2015-11-20T13:59:55.824Z HTTP: #793: POST /test-database/_revs_diff?_nonce=1448027995276
    2015-11-20T13:59:55.839Z HTTP: #794: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995290
    2015-11-20T13:59:55.840Z HTTP: #794: -> 404 ausente (0,3 ms)
    2015-11-20T13:59:55.859Z HTTP: #795: POST /test-database/_bulk_docs?_nonce=1448027995309
    2015-11-20T13:59:55.860Z BulkDocs: Doc \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 Invalid doc ID (400 ID de documento inválido)
    2015-11-20T13:59:56.174Z HTTP: #796: GET /?_nonce=1448027995616
    2015-11-20T13:59:56.200Z HTTP: #797: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995646
    2015-11-20T13:59:56.200Z HTTP: #797: -> 404 ausente (0,2 ms)
    2015-11-20T13:59:56.231Z HTTP: #798: POST /test-database/_revs_diff?_nonce=1448027995683
    2015-11-20T13:59:56.246Z HTTP: #799: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995698
    2015-11-20T13:59:56.247Z HTTP: #799: -> 404 ausente (0,3 ms)
    2015-11-20T13:59:56.265Z HTTP: #800: POST /test-database/_bulk_docs?_nonce=1448027995718
    2015-11-20T13:59:56.265Z BulkDocs: Doc \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 Invalid doc ID (400 ID de documento inválido)
    2015-11-20T13:59:57.988Z HTTP: #801: GET /?_nonce=1448027997429
    2015-11-20T13:59:58.015Z HTTP: #802: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997462
    2015-11-20T13:59:58.015Z HTTP: #802: -> 404 ausente (0,4 ms)
    2015-11-20T13:59:58.065Z HTTP: #803: POST /test-database/_revs_diff?_nonce=1448027997511
    2015-11-20T13:59:58.087Z HTTP: #804: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997531
    2015-11-20T13:59:58.087Z HTTP: #804: -> 404 ausente (0,3 ms)
    2015-11-20T13:59:58.106Z HTTP: #805: POST /test-database/_bulk_docs?_nonce=1448027997558
    2015-11-20T13:59:58.106Z BulkDocs: Doc \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 Invalid doc ID (400 Invalid doc ID)
    2015-11-20T13:59:58.545Z HTTP: #806: GET /?_nonce=1448027997993
    2015-11-20T13:59:58.574Z HTTP: #807: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027998022
    2015-11-20T13:59:58.574Z HTTP: #807: -> 404 ausente (0,3 ms)
    
    Que continua em loop e meu segundo registro não consegue sincronizar com o gateway.
    
    Acesse para responder
  2. Danail novembro 24, 2015 em 11:16 am
    
    Obrigado por sua resposta!
    
    Testei com a versão mais recente \"Couchbase Sync Gateway Community Edition 1.1.1\" e \"PouchDB 5.0.1\" (também com imagens do Docker)
    
    Os resultados são os mesmos:
    
    Quando inicio o aplicativo e no aplicativo:
    1. inserir o primeiro registro
    2. editar o mesmo registro
    3. excluir o mesmo registro
    Posso ver as mudanças em http://localhost:4985/_admin/db/test-database
    
    Mas, depois disso, recebo alguns erros estranhos no console do Sync Gateway:
    
    2015-11-20T13:59:55.370Z Changes+: MultiChangesFeed: canais expandem para channels.TimedSet{\"*\":0x0} ...
    2015-11-20T13:59:55.370Z Changes: MultiChangesFeed concluído
    2015-11-20T13:59:55.370Z Changes+: MultiChangesFeed: canais expandem para channels.TimedSet{\"*\":0x0} ...
    2015-11-20T13:59:55.370Z Changes+: MultiChangesFeed aguardando...
    2015-11-20T13:59:55.370Z Changes+: Aguardando a contagem do \"test-database\"\ passar de 6
    2015-11-20T13:59:55.761Z HTTP: #791: GET /?_nonce=1448027995207
    2015-11-20T13:59:55.786Z HTTP: #792: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995234
    2015-11-20T13:59:55.787Z HTTP: #792: -> 404 ausente (0,4 ms)
    2015-11-20T13:59:55.824Z HTTP: #793: POST /test-database/_revs_diff?_nonce=1448027995276
    2015-11-20T13:59:55.839Z HTTP: #794: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995290
    2015-11-20T13:59:55.840Z HTTP: #794: -> 404 ausente (0,3 ms)
    2015-11-20T13:59:55.859Z HTTP: #795: POST /test-database/_bulk_docs?_nonce=1448027995309
    2015-11-20T13:59:55.860Z BulkDocs: Doc \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 Invalid doc ID (400 ID de documento inválido)
    2015-11-20T13:59:56.174Z HTTP: #796: GET /?_nonce=1448027995616
    2015-11-20T13:59:56.200Z HTTP: #797: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995646
    2015-11-20T13:59:56.200Z HTTP: #797: -> 404 ausente (0,2 ms)
    2015-11-20T13:59:56.231Z HTTP: #798: POST /test-database/_revs_diff?_nonce=1448027995683
    2015-11-20T13:59:56.246Z HTTP: #799: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995698
    2015-11-20T13:59:56.247Z HTTP: #799: -> 404 ausente (0,3 ms)
    2015-11-20T13:59:56.265Z HTTP: #800: POST /test-database/_bulk_docs?_nonce=1448027995718
    2015-11-20T13:59:56.265Z BulkDocs: Doc \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 Invalid doc ID (400 ID de documento inválido)
    2015-11-20T13:59:57.988Z HTTP: #801: GET /?_nonce=1448027997429
    2015-11-20T13:59:58.015Z HTTP: #802: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997462
    2015-11-20T13:59:58.015Z HTTP: #802: -> 404 ausente (0,4 ms)
    2015-11-20T13:59:58.065Z HTTP: #803: POST /test-database/_revs_diff?_nonce=1448027997511
    2015-11-20T13:59:58.087Z HTTP: #804: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997531
    2015-11-20T13:59:58.087Z HTTP: #804: -> 404 ausente (0,3 ms)
    2015-11-20T13:59:58.106Z HTTP: #805: POST /test-database/_bulk_docs?_nonce=1448027997558
    2015-11-20T13:59:58.106Z BulkDocs: Doc \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 Invalid doc ID (400 Invalid doc ID)
    2015-11-20T13:59:58.545Z HTTP: #806: GET /?_nonce=1448027997993
    2015-11-20T13:59:58.574Z HTTP: #807: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027998022
    2015-11-20T13:59:58.574Z HTTP: #807: -> 404 ausente (0,3 ms)
    
    Que continua em loop e meu segundo registro não consegue sincronizar com o gateway.
    
    Acesse para responder
  3. Danail novembro 24, 2015 em 2:59 pm
    
    Olá novamente,
    
    Parece que o PouchDB 5.0.0 funciona com o projeto, mas o 5.1.0 não funciona.
    
    Eu criei um problema aqui: https://github.com/pouchdb/pou…
    
    Informe-me se conseguiu atualizar para a versão 5.1.0 mais recente ou qualquer outra novidade, obrigado!
    
    Acesse para responder
FairwindTechnologies janeiro 22, 2016 em 10:01 pm

Estou pensando em usar quase exatamente esse paradigma para a solução que estou desenvolvendo para crianças com TDAH. Gostaria de usar o Couchbase Sync para manter os dados dos usuários sincronizados entre o aplicativo local do usuário no Ionic e o banco de dados mestre na nuvem. Não tenho certeza de como a autenticação do usuário nos bancos de dados funcionaria/sincronizaria com um serviço CAS/OAuth 2 que será usado pelo Spring Security para autenticar solicitações de usuários fora do ambiente de banco de dados do site e/ou de outras funções móveis. Existe uma maneira de sincronizar as contas de usuário do couchbase com outros serviços de autenticação, como oauth ou CAS ou algum outro serviço baseado em token? Minha arquitetura original não era um projeto off-line em primeiro lugar e eu usaria apenas o acesso baseado em token aos serviços da Web nos componentes móveis e da Web, mas o CouchBase com Sync parece ser tão incrível para fazer a sincronização do banco de dados que quero aproveitar isso! Qualquer opinião seria muito bem-vinda! Você ou o couchbase oferecem serviços de consultoria de arquitetura? De qualquer forma, informe-me sobre a sincronização da conta do usuário!

A propósito, estou usando o AWS e também li a postagem http://www.couchbase.com/2015... o que também é relevante para o que estou tentando fazer. Imagine isso com uma versão web também e tentando manter os dados E as contas de usuário sincronizados em ambas as plataformas...

Obrigado,

Rico

Acesse para responder
1. Nic Raboy janeiro 22, 2016 em 11:08 pm
  
  Quando você diz CAS, está se referindo ao Jasig CAS? Não acho que seria um problema combinar isso com sua solução de logon único.
  
  Mencionei sua solicitação de consultoria em arquitetura para minha equipe. Posso pedir que envie um e-mail para services@couchbase.com. Basta fazer referência a esta postagem nela.
  
  Melhor,
  
  Acesse para responder
  1. FairwindTechnologies janeiro 22, 2016 em 11:16 pm
    
    Nic, sim, eu quis dizer JASIG CAS. Em resumo, sim, estou tentando descobrir a melhor forma de integrar o CB com uma solução de SSO baseada em token. Enviarei um e-mail para sua equipe de serviços, obrigado.
    
    Acesse para responder
    1. Nic Raboy janeiro 22, 2016 em 11:42 pm
      
      Fantástico. Tenho certeza de que entraremos em contato :-)
      
      Acesse para responder
Tarek Moubarak abril 26, 2016 em 11:39 am

Oi Nic,

Muito obrigado por esse tutorial!

No entanto, parece que estou tendo alguns problemas quando tento salvar documentos no meu sync_gateway (por meio da morsa ou de um bucket no servidor Couchbase).

Também estou recebendo uma saída estranha do meu Sync Gateway (estou usando o bucket \'default\'):

Tareks-MacBook-Pro:ionic-framework-pouchdb-master Tarek$ sync_gateway sync-gateway-config.json
2016-04-26T14:36:38.840+03:00 Habilitando o registro: [CRUD+ REST+ Changes+ Attach+]
2016-04-26T14:36:38.840+03:00 ==== Couchbase Sync Gateway/1.1.1(10;2fff9eb) ====
2016-04-26T14:36:38.841+03:00 Configurou o Go para usar todas as 4 CPUs; setenv GOMAXPROCS para substituir isso
2016-04-26T14:36:38.841+03:00 Processo configurado para permitir 5000 descritores de arquivos abertos
2016-04-26T14:36:38.841+03:00 Abrindo o db /default como bucket \"default\", pool \"default\", servidor
2016-04-26T14:36:38.841+03:00 Abrindo o banco de dados padrão do Couchbase em
2016/04/26 14:36:38 Tentando com http://127.0.0.1:8091/pools/default/bucketsStreaming/default
2016/04/26 14:36:38 Tentando com o nó selecionado 0
2016/04/26 14:36:38 Obteve nova configuração para o bucket padrão
2016/04/26 14:36:38 Tentando com o nó selecionado 0
2016-04-26T14:36:38.987+03:00 Redefinir o usuário convidado para a configuração
2016-04-26T14:36:38.987+03:00 Iniciando o servidor de administração em 127.0.0.1:4985
2016-04-26T14:36:38.991+03:00 Iniciando o servidor em :4984 ...
2016-04-26T14:36:49.750+03:00 HTTP: #001: GET /default/?_nonce=1461670609748
2016-04-26T14:37:49.464+03:00 HTTP: #002: GET /default/?_nonce=1461670669460
2016-04-26T14:37:50.572+03:00 HTTP: #003: GET /default/?_nonce=1461670670570
2016-04-26T14:37:50.833+03:00 HTTP: #004: GET /default/?_nonce=1461670670831
2016-04-26T14:37:52.465+03:00 HTTP: #005: GET /default/?_nonce=1461670672463
2016-04-26T14:37:52.793+03:00 HTTP: #006: GET /default/?_nonce=1461670672792
2016-04-26T14:37:55.567+03:00 HTTP: #007: GET /default/?_nonce=1461670675566
2016-04-26T14:37:56.393+03:00 HTTP: #008: GET /default/?_nonce=1461670676392
2016-04-26T14:38:00.794+03:00 HTTP: #009: GET /default/?_nonce=1461670680792
2016-04-26T14:38:02.589+03:00 HTTP: #010: GET /default/?_nonce=1461670682587
…

Se precisar de mais informações de minha parte, entre em contato.

Com os melhores cumprimentos,
Tarek M.

Acesse para responder
1. Nic Raboy abril 26, 2016 em 8:15 pm
  
  Olá, Tarek,
  
  Não vejo nada fora do comum no seu registro do Sync Gateway. Você pode me fornecer mais informações sobre o que está causando problemas ao salvar?
  
  Melhor,
  
  Acesse para responder
  1. Tarek Moubarak abril 26, 2016 em 8:28 pm
    
    Oi Nic,
    
    Obrigado por sua resposta rápida! O problema é que, no momento, não consigo ver nenhum documento novo no meu servidor CouchBase (minha principal prioridade é ver os dados nos buckets em vez de usar a morsa). Foi assim que configurei meu gateway de sincronização (atualmente na versão 1.2):
    
    {
    \"log\":[\"CRUD+\", \"REST+\", \"Changes+\", \"Attach+\"],
    \"bancos de dados\": {
    \"default\": {
    \"server\":\"http://localhost:8091\",
    \"bucket\":\"default\",
    \"sync\":function (doc) { channel (doc.channels); },
    \"usuários\": {
    \"GUEST\": {
    \"disabled\": false,
    \"admin_channels\": [\"*\"]
    }
    }
    }
    },
    \"CORS\": {
    \"Origin\": [\"http://localhost:9000\"],
    \"LoginOrigin\": [\"http://localhost:9000\"],
    \"Headers\": [\"Content-Type\"],
    \"MaxAge\": 17280000
    }
    }
    
    Tentei adicionar o nível de registro no gateway de sincronização, mas não consegui ver nenhuma mensagem POST ou PUT sendo chamada, nem consegui vê-las no gateway de sincronização.
    
    Também usei o comando: python -m SimpleHTTPServer 9000 para CORS.
    
    Talvez eu esteja perdendo uma etapa ou algo esteja mal configurado?
    
    Desde já, agradeço sua ajuda. :)
    
    Acesse para responder
    1. Nic Raboy abril 27, 2016 em 9:57 pm
      
      Você não está tentando usar o Ionic Serve, o Ionic Ionic-Live Reload ou o Ionic View, está? Eles tendem a não funcionar com plug-ins nativos. Além disso, o que dizem os registros do seu aplicativo? Você provavelmente quer começar por aí.
      
      Melhor,
      
      Acesse para responder
      1. Tarek Moubarak maio 5, 2016 em 1:21 pm
        
        Oi Nic,
        
        Muito obrigado! Inicialmente, eu estava testando no ionic serve, mas tentei diretamente no meu dispositivo móvel e funcionou perfeitamente.
        No entanto, as tentativas anteriores falharam porque meu dispositivo móvel e o servidor estavam conectados em redes diferentes, o que causou alguma confusão.
        
        Muito obrigado, Nic!
      2. Nic Raboy maio 6, 2016 em 12:20 pm
        
        Não tem problema!

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

Armazenamento e sincronização entre plataformas com a estrutura Ionic, o Couchbase e o PouchDB

O que será necessário

Obtendo o gateway de sincronização do Couchbase

Criando nosso projeto de estrutura iônica

Incluindo as dependências

Modificação do arquivo de índice

Criando nosso serviço AngularJS do PouchDB

Criação de um banco de dados local e início da sincronização

Projetando um controlador para suas visualizações

Definição das visualizações do Ionic Framework

Criação de uma visualização de lista

Criação de uma visualização de formulário

Configuração do Sync Gateway

Testando o aplicativo

Testes para Android

Testes para iOS

Conclusão

Autor

Postado por Nic Raboy, defensor dos desenvolvedores, Couchbase

28 Comentários

Deixar uma resposta Cancelar resposta