Anteriormente em primeira parte desta série
com relação ao Ionic Framework e ao Couchbase, escrevi sobre o uso do Couchbase Lite para fazer CRUD local
(Create, Retrieve, Update, Delete) em um exemplo de lista de tarefas. Desta vez, vamos levar isso para o próximo nível e ver
como replicar alterações em vários dispositivos e plataformas usando o Couchbase Sync Gateway.
Os pré-requisitos
Para ser bem-sucedido neste tutorial, você precisa ter feito o seguinte:
- Concluiu a primeira parte da série de blogs sobre a estrutura Ionic
- Baixou o Couchbase Sync Gateway
- O Android SDK se estiver criando para o Android
- Um Mac com o Xcode instalado se estiver criando para iOS
Este tutorial continuará exatamente de onde a primeira parte da série parou, portanto, é importante que você tenha a primeira parte em um arquivo
antes de continuar.
Configuração do Couchbase Sync Gateway
Para usar o Sync Gateway com nosso aplicativo, primeiro precisamos criar um arquivo de configuração. Crie um arquivo chamado
sync-gateway-config.json na raiz de seu projeto e inclua o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
{ "log": ["CRUD", "REST+", "Access"], "databases": { "todos": { "server": "walrus:", "users": { "GUEST": {"disabled": false, "admin_channels": ["*"]} }, "sync": ` function(doc, oldDoc) { // NOTE this function is the same across the iOS, Android, and PhoneGap versions. if (doc.type == "task") { if (!doc.list_id) { throw({forbidden : "items must have a list_id"}) } channel("task-"+doc.list_id); } else if (doc.type == "list") { channel("list-"+doc._id); if (!doc.owner) { throw({forbidden : "list must have an owner"}) } if (oldDoc) { var oldOwnerName = oldDoc.owner.substring(oldDoc.owner.indexOf(":")+1); requireUser(oldOwnerName) } var ownerName = doc.owner.substring(doc.owner.indexOf(":")+1); access(ownerName, "list-"+doc._id); } } ` } } } |
Não se deixe impressionar pelas informações acima, pois não há muita coisa acontecendo. A maior parte da lógica apenas verifica se os documentos têm todos os
propriedades necessárias.
Para destacar algumas das principais coisas que estão acontecendo aqui, primeiro dê uma olhada no bancos de dados.todos propriedade.
Esse será o nosso banco de dados remoto. O servidor que estamos usando é morsa que é uma solução baseada em memória e inclui
no Sync Gateway. Ele é bom para testes antes de você estar pronto para salvá-lo no Couchbase Server. Também optamos por habilitar
acesso de convidado, portanto, usuários registrados não serão necessários por enquanto.
Isso nos leva ao código JavaScript de sincronização. Se o documento for do tipo tarefa, verificaremos se existe um ID de lista pai; caso contrário, faremos o seguinte
forçar uma falha. Se ele existir, salvaremos o documento no Sync Gateway com o prefixo tarefa- na chave. Se o documento
não for uma tarefa, então pode ser uma lista. Verifique se o documento tem um proprietário e salve-a na propriedade
Sync Gateway com o prefixo lista na chave.
Adição de uma nova rota Ionic para login
Adição ao roteador UI do AngularJS
No momento, sua configuração do AngularJS deve incluir duas rotas. Uma para as listas de tarefas e outra para as tarefas. O que queremos fazer
agora é incluir uma terceira rota para fazer login no Sync Gateway. Dentro da seção www/js/app.js faça o seguinte
mudança:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
couchbaseApp.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state("login", { url: "/login", templateUrl: "templates/login.html", controller: "LoginController" }) .state("todoLists", { url: "/todoLists", templateUrl: "templates/todolists.html", controller: "TodoListsController" }) .state("tasks", { url: "/tasks/:listId", templateUrl: "templates/tasks.html", controller: "TaskController" }); $urlRouterProvider.otherwise("/login"); }); |
Observe o novo estado de login e que alteramos nossa rota padrão para /login em vez de /todoLists. O
está pronta, só precisamos criar a visualização e o controlador para finalizá-la.
Criação de uma visualização de login
Dentro da seção www/templates crie um arquivo chamado login.html e adicione o seguinte código:
Faça login como usuário convidado
É apenas uma exibição simples com um botão. Quando o usuário clica no botão, o basicLogin() é chamada a função
que criaremos no controlador de login.
Criação de um controlador de login
O controlador para lidar com os logins realizará uma tarefa muito importante. Ele iniciará o processo de replicação entre o Sync Gateway
e o dispositivo local. Aqui está a versão reduzida do nosso controlador que deve ser adicionada ao diretório www/js/app.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
couchbaseApp.controller("LoginController", function($scope, $state, $ionicHistory) { $ionicHistory.nextViewOptions({ disableAnimate: true, disableBack: true }); $scope.basicLogin = function() { }; }); |
Observe o $ionicHistory.nextViewOptions método. Isso evita que o botão voltar do hardware leve os usuários de volta
para a tela de login depois de já terem feito login. Mais importante para o Android, já que o iOS não tem um hardware de retorno.
Em seguida, você verá o $scope.basicLogin() que foi chamada na exibição da interface do usuário. Seu conteúdo será parecido com o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$scope.basicLogin = function() { todoDatabase.replicate("todo", "https://192.168.56.1:4984/todos", true).then(function(result) { todoDatabase.replicate("https://192.168.56.1:4984/todos", "todo", true).then(function(result) { $state.go("todoLists"); }, function(error) { // There was an error replicating to the local device }); }, function(error) { // There was an error replicating to the Sync Gateway }); }; |
A primeira coisa que acontece é a replicação do dispositivo local para o gateway de sincronização. Ele está configurado para replicar continuamente todas as alterações. Se
a replicação de local para remoto for iniciada com êxito, o mesmo ocorrerá de remoto para local. Os dados serão continuamente replicados de
o Sync Gateway remoto até o dispositivo.
Se ambos forem bem-sucedidos, o usuário será redirecionado para as listas de tarefas. Observe que o Sync Gateway não precisa estar operacional para mover
após o login. Se o servidor não estiver funcionando, ele falhará graciosamente e continuará. Observe também que os IPs listados na função acima são
IPs que me permitiram a comunicação entre o simulador e o computador host local. Eles podem ser diferentes para você e talvez seja necessário fazer alguma pesquisa.
Adição de informações do proprietário aos dados do documento
Duas pequenas alterações precisam ser feitas na forma como armazenamos documentos no banco de dados local. Na seção $scope.insert de ambos
controladores de tarefas e listas de tarefas, um proprietário deve ser adicionada. Nesse caso, o proprietário será convidado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$scope.insert = function() { $ionicPopup.prompt({ title: 'Enter a new TODO list', inputType: 'text' }) .then(function(result) { var obj = { title: result, type: "list", owner: "guest" }; todoDatabase.createDocument(obj).then(function(result) { // Document created successfully }, function(error) { // Document creation failed }); }); } |
O código acima é um exemplo de um dos $scope.insert funções. Novamente, a única diferença aqui é que adicionamos uma função
proprietário propriedade.
Testando seu projeto
Executando o Couchbase Sync Gateway
Com o download do Sync Gateway, execute o seguinte em seu prompt de comando ou terminal:
|
1 2 3 |
/path/to/sync/gateway/bin/sync_gateway /path/to/project/sync-gateway-config.json |
O Sync Gateway deve iniciar sem problemas.
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
crie e instale o arquivo APK:
|
1 2 3 4 |
ionic build android adb install -r platforms/android/build/outputs/apk/android-debug.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:
|
1 2 3 |
ionic build ios |
Em seguida, abra o arquivo plataforma/ios/ e inicie o arquivo de projeto do Xcode.
Se você instalou o pacote do Node Package Manager (NPM) ios-simVocê pode fazer o seguinte:
|
1 2 3 4 |
ionic build ios ionic emulate ios |
Conclusão
Usando o plug-in PhoneGap do Couchbase e o Couchbase Sync Gateway, criamos um aplicativo móvel de lista de tarefas que replica dados
local e remotamente para que possa ser acessado em vários dispositivos e plataformas. Usamos o AngularJS para nos conectarmos facilmente aos pontos de extremidade RESTful
que o Couchbase Lite expõe.
Essa série pode ser baixada na íntegra no site GitHub do Couchbase Labs página.
A sincronização entre o local e o remoto é em tempo real?
Sim, é!
Oi Nic, seu tutorial é maravilhoso. Aprendi muito com seus tutoriais. Obrigado por isso. Tenho uma dúvida, criei um aplicativo usando sua série de aplicativos, parte 1 e parte 2, como base. Fiz todos os procedimentos que você mencionou e consegui me conectar ao gateway de sincronização do couchbase e adicionei alguns clientes por meio do meu aplicativo. Também consigo ver o documento no banco de dados. Mas quando faço login com um cliente diferente em meu aplicativo móvel, estou recebendo todos os tíquetes gerados por clientes diferentes em meu aplicativo móvel. Você pode me ajudar? Existe alguma atualização adicional que eu tenha que fazer?
A configuração do gateway de sincronização teria que ser mais complexa do que a que listei para acomodar a autenticação do usuário. Da mesma forma, você teria que fazer uso da autenticação no dispositivo local:
Você pode dar uma olhada nisso e retornar:
https://developer.couchbase.com...
Terei prazer em responder suas perguntas :-)
Sim, entendi isso. Primeiro, não devo entrar com o mesmo cliente no mesmo dispositivo. Tenho que criar uma opção clara de logout se quiser fazer login com outro cliente. Mas como atribuir os canais individualmente para os usuários acessarem? Porque há muitas modificações no arquivo de configuração de sincronização. Tentei até mesmo o acesso ao perfil. Mas não consegui. Você pode me ajudar a atribuir canais para os clientes? Exemplo:- Como 2 clientes, 2 funcionários e um administrador.
{
\"log\": [\"CRUD\", \"REST+\", \"Access\"],
\"adminInterface\":\":4985\",
\"bancos de dados\": {
\"todos\": {
\"usuários\": {
\"GUEST\": {\"disabled\": true, \"admin_channels\": [\"*\"]}
},
\"server\": \”https://192.168.3.134:8091\”,
\"sync\":
função (doc, oldDoc) {
Se (doc.type == \"ticket\") {
channel(doc._id);
var ownerName = doc.owner.substring(doc.owner.indexOf(\":\") + 1);
console.log(doc.owner);
console.log(doc._id);
console.log(ownerName);
access([doc.owner], doc._id);
}
}
}
}
}
Você pode criar canais dinamicamente e conceder acesso a eles usando as propriedades do documento.
Roteamento de dados: https://developer.couchbase.com...
Validação de dados: https://developer.couchbase.com...
A função de acesso usa o nome do usuário como primeiro parâmetro e o nome do canal como segundo parâmetro.
Se você tiver um documento com o seguinte esquema:
{
\"_id\": \"123\",
\"tipo\": \"order\",
\"customer_id\": \"ali\"
}
A função Sync pode conter o seguinte:
function(doc, oldDoc) {
Se (doc.type == \"order\") {
channel(doc._id);
access(doc.customer_id, doc._id);
}
}
Aqui você está dizendo \"insira o documento no canal chamado 123 e dê ao usuário ali acesso ao canal 123\".
Também é possível usar funções para atribuir aos usuários uma função específica e conceder a uma função acesso a um canal.
Olá Nic, mais uma vez, ótimo tutorial. Tenho seguido esse e outros dois do fórum do couchbase para concluir uma solução baseada em nuvem. Consegui colocar essa solução em funcionamento de forma rápida e fácil graças às suas instruções claras. Tenho procurado integrar a autenticação do usuário por meio do Facebook. Há vários exemplos usando várias estruturas, mas não o ionic.
Talvez você possa pegar esse aplicativo de amostra e integrá-lo às APIs do Couchbase Sync Gateway?
https://github.com/nraboy/ng-c...
Sim, foi essa a solução que usei. Esta noite consegui colocar algo em funcionamento. Os problemas que tive foram no arquivo json de configuração do gateway de sincronização. Para colocar a sincronização em funcionamento, tive que configurar o cors para aceitar solicitações de * e ainda não acertei a seção de sincronização, mas posso ver que o token de acesso do Facebook está sendo aceito e alguns documentos estão sendo sincronizados. Mais algumas leituras a serem feitas neste fim de semana, e devo ter tempo na próxima semana para colocar a solução em funcionamento corretamente. Qualquer conselho sobre exemplos adequados de configuração de sincronização ou configuração de cors nesse caso seria muito útil.
Obrigado pelo tutorial Nic
O Couchbase Sync Gateway funcionará no computador local ou será necessário um servidor global?
Você pode criar um protótipo do seu aplicativo com o Sync Gateway localmente, mas quando começar a usar dispositivos reais, terá que usar um servidor remoto, caso contrário, eles provavelmente não conseguirão se conectar ao seu computador.
Oi Nic, segui seu tutorial, mas estou enfrentando o seguinte problema quando insiro dados no Couch Base Server...
Não tenho certeza do que esse erro significa, mas você deve sempre inserir documentos por meio da API REST do Sync Gateway (https://developer.couchbase.com... caso contrário, as regras de revisão e acesso não serão criadas e o algoritmo de replicação ficará confuso quando você tentar fazer uma replicação pull.
Meu gateway de sincronização também não está funcionando corretamente quando testo o aplicativo sem dispositivo
Também acesso globalmente a porta 8091 do sistema local, da mesma forma que faço com que as portas 4984 e 4985 acessem globalmente, mas essas portas (4984,4985) não acessam globalmente.
Oi Nic
Meu gateway de sincronização também não está funcionando corretamente quando testo o aplicativo sem dispositivo
Também acesso globalmente a porta 8091 do sistema local, da mesma forma que faço com que as portas 4984 e 4985 acessem globalmente, mas essas portas (4984,4985) não acessam globalmente.
Oi Nic,
Obrigado pelo tutorial, agora meu gateway de sincronização está funcionando e os dados estão sendo replicados para o servidor.
Incrível!
Oi Nic,
Estou tentando implementar a funcionalidade de login com nome de usuário e senha usando couchbase + ionic.
Talvez comece por aqui?
https://developer.couchbase.com...
Oi Nic,
Obrigado pelo link, ele realmente me ajudou, mas se você puder fornecer algum link de aplicativo que esteja no github e use a funcionalidade de login e registro!
Atualmente, não há nenhuma demonstração do Ionic no GitHub para isso. Você pode dar uma olhada na versão do PhoneGap se quiser:
https://github.com/couchbasela...
Acho que seria mais útil compartilhar o que você já tentou e eu posso ajudá-lo com base nisso.
Oi Nic,
Quero atualizar meus \"itens de tarefa\" no aplicativo todo. Você pode me informar a consulta para atualizar o documento?
Você poderia chamar o método updateDocument:
https://github.com/couchbasela...
updateDocument(documentId, documentRevision, jsonDocument);
Oi Nic,
Obrigado pelo link. A função updateDocument está atualizando o documento do meu banco de dados local (banco de dados móvel).
Mas ele não está enviando a atualização para o servidor. Usando o gateway de sincronização, as funções CreateDocument e Delete estão funcionando corretamente no meu aplicativo e a sincronização do servidor Couchbase também está funcionando corretamente por meio do syncgateway.
Você pode me ajudar com isso?
Só para esclarecer, o documento é de fato atualizado localmente? Ele apenas não é replicado, correto?
Melhor,
Abri um tíquete para você, encontrado aqui:
https://github.com/couchbase/s...
Ravi, você pode publicar sua função de sincronização? (o ideal é postar em um gist do github ou algo que preserve a formatação)
Essa conversa foi transferida para cá: https://forums.couchbase.com/t...
Oi Traun,
Compartilho o arquivo de sincronização em \"https://forums.couchbase.com/t...\" como você disse.
Também usei \"public channel\" no arquivo syncgateway, mas enfrento o mesmo problema \"403 wrong user\".
Você pode me orientar sobre esse problema ou me indicar algum tutorial?
Você pode postar isso na conversa em https://forums.couchbase.com/t... ?
Oi Traun,
Publiquei minha função de sincronização no link \"https://forums.couchbase.com/t...\” .
Também usei o arquivo \"public channel\" do syncgateway, mas enfrentei o mesmo problema \"403 wrong user\".
Você pode me orientar sobre esse problema ou me indicar algum tutorial...
Olá a todos e em especial ao Nic, Parabéns pelos bons artigos que tem postado, estou trocando o CouchDB pelo Couchbase, porém não consigo fazer a replicação com nome de usuário e senha (método HTTP)
O que devo fazer antes de replicar em basicLogin(user, pass)?
...
todoDatabase.replicate (\"all\", \"https://192.168.0.11:4984/todos\", true) .then (function (result) {
todoDatabase.replicate (\"https://192.168.0.11:4984/todos\", \"all\", true) .then (function (result) {
...
Desculpe-me por meu inglês.
Obrigado!!!
Olá @disqus_2gt0DNVITS:disqus,
Como a autenticação está fora do escopo deste artigo, você pode iniciar um tópico nos fóruns?
https://forums.couchbase.com
Melhor,
Oi Nic,
Estou tentando implementar a funcionalidade de login e inscrição com nome de usuário e senha usando couchbaseLite + ionic.
Como o login e a inscrição estão fora do escopo desta postagem específica do blog, traga suas dúvidas para os fóruns:
https://forums.couchbase.com/
Melhor,
Oi Nick, segui as instruções, o código funcionou, mas ainda não sei como sincronizar o banco de dados do Sync Gateway com o aplicativo. Digitei a url sync_gateway e o resultado é:
{\"committed_update_seq\":1,\"compact_running\":false,\"db_name\":\"todos\",\"disk_format_version\":0,\"instance_start_time\":1463023463886566,\"purge_seq\":0,\"state\":\"Online\",\"update_seq\":1}. Parece que é um banco de dados vazio.
Você poderia me dar instruções para criar os dados de registros no sync_gateway e sincronizar com o aplicativo. Obrigado.
Algo como isso iniciaria o processo de sincronização:
Na verdade, você nunca está salvando diretamente no gateway de sincronização ou no servidor couchbase. Você está salvando localmente e as alterações são sincronizadas.
Você tem algum registro além do que compartilhou comigo?
Obrigado por sua resposta, alterei a url e o registro dizia isso:
Falha ao carregar o recurso https://127.0.0.1:4984/todos/
ERRO -> null app.js:86
(função anônima)
Falha ao carregar o recurso https://127.0.0.1:4984/_replicate
Qual é o trecho de código em torno da linha 86?
Continuo recebendo o erro de que o endereço já está em uso. Como descobrir qual IP funcionará? Pesquisei muito no Google, mas não consegui encontrar nenhuma solução.
Em que momento você está recebendo essa mensagem? Está recebendo-a no dispositivo? No terminal? Em um navegador da Web? Quanto mais informações eu tiver, melhor poderei ajudar.
Melhor,
Quando estou executando esse comando no Terminal:
/path/to/sync/gateway/bin/sync_gateway /path/to/project/sync-gateway-config.json
Se você não o interromper adequadamente depois de usá-lo, o serviço Sync Gateway ainda ocupará a porta. Se isso acontecer, você terá que encerrar o processo manualmente e isso pode variar dependendo do seu sistema operacional.
Melhor,
Quando estou executando esse comando pela primeira vez, recebo o erro: endereço já em uso. E eu me certifiquei de que não tenho portas abertas de nenhum outro serviço.
Da postagem no blog: \"Observe também que os IPs listados na função acima são IPs que me permitiram fazer a comunicação entre o simulador e o computador host local. Eles podem ser diferentes para você e talvez seja necessário fazer alguma pesquisa."
Não entendo essa linha. Acho que estou perdendo alguma coisa.
Como uso o Genymotion, não consigo me conectar ao Sync Gateway de meus simuladores usando o localhost. É por isso que tenho endereços IP exclusivos. Se o Sync Gateway e o Couchbase Server estiverem em execução na mesma máquina, você usará localhost.
Se estiver tendo conflitos de endereço, talvez seja melhor postar nos fóruns, pois o assunto não parece estar relacionado a esta postagem.
Melhor,