Estrutura iônica tornou-se recentemente uma das estruturas móveis mais populares do mercado. Ela facilita incrivelmente a criação de ótimas interfaces de usuário para aplicativos móveis. No entanto, parte do desafio também é o gerenciamento de dados, a busca no servidor back-end e o salvamento dos dados localmente para quando o dispositivo estiver off-line.
O Couchbase Mobile cuida disso para você e, com o plug-in do Apache Cordova, é muito fácil!
Neste tutorial, você aprenderá a:
- Inclua o Couchbase Lite em seu projeto Ionic.
- Use os componentes da IU do Ionic para exibir os dados na tela.
- Execute o aplicativo no simulador de iOS / Android.
Os pré-requisitos
- Estrutura Ionic 1.0+
- Apache Cordova 5.0+
- O Android SDK se estiver criando para o Android
- Um Mac com o Xcode instalado se estiver criando para iOS
Primeiros passos
Antes de começarmos a codificar, é importante criarmos um novo projeto e configurarmos todos os plug-ins e componentes necessários. No prompt de comando (Windows) ou no Terminal (Mac/Linux), execute o seguinte para criar um novo projeto Ionic:
|
1 2 3 4 5 6 |
iônico iniciar CouchbaseApp em branco cd CouchbaseApp iônico plataforma adicionar androide iônico plataforma adicionar ios |
Lembre-se de que, se você não estiver usando um Mac, não poderá adicionar e criar para a plataforma iOS.
Para que esse projeto seja bem-sucedido, existem alguns Apache Cordova plug-ins que devem ser instalados. Com o projeto Ionic como seu diretório de trabalho atual, no prompt de comando ou no terminal, execute os seguintes comandos:
|
1 2 3 4 |
cordova plug-in adicionar cordova-plug-in-lista branca cordova plug-in adicionar https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git |
Isso instalará o plug-in da lista de permissões do Apache Cordova, que nos permitirá nos comunicar com serviços externos, e o plug-in do Couchbase PhoneGap, que permitirá o uso do Couchbase em nosso aplicativo.
Incluindo a biblioteca RESTful do AngularJS
O uso do Couchbase Lite ocorre por meio de APIs RESTful expostas pelo plug-in Apache Cordova. Uma lista completa desses pontos de extremidade da API pode ser encontrada na seção Documentação oficial do Couchbase. No entanto, há um AngularJS disponível para facilitar muito a chamada desses pontos de extremidade.
Faça o download da versão mais recente ng-couchbase-lite encontrada no GitHub e inclua a versão ng-couchbase-lite.min.js encontrado no arquivo dist no diretório www/js/ pasta.
Com o arquivo incluído em seu projeto, abra o arquivo index.html e inclua o arquivo JavaScript da seguinte forma:
|
1 2 3 4 |
Observe que o script foi incluído acima da seção www/js/app.js.
A última coisa que precisa ser feita antes que o ng-couchbase-lite possa ser usado é que ele precisa ser injetado no AngularJS. Isso pode ser feito abrindo o arquivo www/js/app.js e alterando o arquivo angular.module para se parecer com o seguinte:
|
1 2 3 |
var couchbaseApp = angular.módulo("inicial", ["iônico", "ngCouchbaseLite"]); |
O wrapper do AngularJS agora pode ser usado no projeto.
Polimento do arquivo de índice
Alguns ajustes precisam ser feitos no www/index.html para aproveitar ao máximo este tutorial. A primeira delas é adicionar algumas meta-informações para complementar o plug-in de lista branca. Isso é mais necessário para o Android do que para o iOS. Perto do outro meta inclua o seguinte:
|
1 2 3 |
Isso apenas informa ao seu projeto que você deseja trabalhar com determinados scripts.
O outro ajuste que você deseja fazer é dentro de seu corpo tags. Substitua tudo o que estiver dentro do corpo pelo seguinte:
|
1 2 3 4 5 6 |
A essa altura, você já deve estar pronto para começar
Uso de uma variável de banco de dados global
Para evitar o trabalho de ter que abrir o banco de dados em cada exibição, vamos criar uma variável global para o projeto. Na variável www/js/app.js arquivo abaixo angular.module incluem o seguinte:
|
1 2 3 |
var todoDatabase = nulo; |
Isso será definido posteriormente quando inicializarmos o banco de dados.
Configuração do UI Router
O Ionic Framework usa o AngularJS UI-Router, portanto, vamos aproveitá-lo ao lidar com nossas exibições e controladores. Dentro da seção www/js/app.js adicione o seguinte código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
couchbaseApp.configuração(função($provedor de estado, $provedor de roteamento de url) { $provedor de estado .estado("todoLists", { url: "/todoLists", templateUrl: "templates/todolists.html", controlador: "TodoListsController" }) .estado("tarefas", { url: "/tasks/:listId", templateUrl: "templates/tasks.html", controlador: "TaskController" }); $provedor de roteamento de url.caso contrário("/todoLists"); }); |
Temos duas rotas, uma para a exibição de listas e outra para a exibição de tarefas. No entanto, a exibição de tarefas exige um parâmetro extra que estamos identificando como listId. Isso se deve ao fato de que, quando navegamos para a exibição de tarefas, queremos fornecer o item da lista principal ao qual a tarefa pertence. Isso nos ajudará a consultar nossos dados. Ignore os controladores por enquanto, pois vamos criá-los mais tarde.
Inicialização do banco de dados e das visualizações
A primeira coisa a fazer ao usar o plug-in PhoneGap do Couchbase é criar um banco de dados. Em seguida, você pode registrar exibições para consultar os documentos que residirão no banco de dados. As visualizações do Couchbase são consultas de mapa/redução que constroem o índice de forma incremental à medida que novos documentos são salvos no banco de dados. Elas são completamente diferentes das visualizações da interface do usuário!
Dentro da seção www/js/app.js vamos incluir algumas coisas no arquivo AngularJS executar método:
|
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 36 37 38 39 40 41 |
couchbaseApp.executar(função($Plataforma Iônica, $couchbase) { $Plataforma Iônica.pronto(função() { // 1 se(!janela.cblite) { alerta("O Couchbase Lite não está instalado!"); } mais { cblite.getURL(função(erro, url) { se(erro) { alerta("Ocorreu um erro ao obter o URL do banco de dados"); retorno; } todoDatabase = novo $couchbase(url, "todo"); // 2 todoDatabase.createDatabase().então(função(resultado) { var todoViews = { listas: { mapa: função(doc) { se(doc.tipo == "lista" &lificador;&lificador; doc.título) { emitir(doc._id, {título: doc.título, rev: doc._rev}) } }.toString() }, tarefas: { mapa: função(doc) { se(doc.tipo == "tarefa" &lificador;&lificador; doc.título &lificador;&lificador; doc.ID da lista) { emitir(doc.ID da lista, {título: doc.título, ID da lista: doc.ID da lista, rev: doc._rev}) } }.toString() } }; todoDatabase.createDesignDocument("_design/todo", todoViews); todoDatabase.ouvir(); }, função(erro) { // Houve um erro ao criar o banco de dados }); }); } }); }); |
Veja o que está acontecendo passo a passo:
- Primeiro, você verifica se o plug-in existe (instalado e em execução). Se existir, crie um novo banco de dados, caso o banco de dados desejado ainda não exista. Se a criação do banco de dados for bem-sucedida, criaremos duas exibições, uma para obter as listas de tarefas e outra para obter as tarefas. Para este tutorial, o banco de dados que estamos criando chama-se todo.
- Estamos criando uma visualização chamada tarefas e listas, ambos dentro do _design/todo documento de design. Com relação às exibições do Couchbase. As listas retornará todos os documentos que têm um doc.type de lista e que tenham um título propriedade. No entanto, somente o título e a revisão do documento são retornados com o ID do documento. Isso é para manter as coisas leves. A propriedade tarefas retornará todos os documentos que têm um doc.type de tarefa bem como alguns título propriedade e pai ID da lista propriedade. Nessa exibição específica, somente o título, a revisão do documento e o ID da lista são retornados com o ID do documento.
Criando os controladores
O controlador da lista Todo
Dentro do www/js/app.js do seu projeto, vá em frente e crie o seguinte controlador:
|
1 2 3 4 5 6 7 8 9 10 11 |
couchbaseApp.controlador("TodoListsController", função($escopo, $estado, $ionicPopup, $couchbase, $rootScope) { $escopo.listas = { }; $escopo.inserir = função() { }; $escopo.excluir = função(lista) { }; }); |
Uma pequena explicação sobre nossos planos aqui. Os $scope.lists manterá todos os documentos do Couchbase aos quais a visualização específica terá acesso. $scope.insert é claro que será responsável por inserir dados no Couchbase Lite e $scope.delete será responsável pela exclusão dos dados.
Portanto, começando com o $scope.insert função:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$escopo.inserir = função() { $ionicPopup.imediato({ título: 'Insira uma nova lista TODO', inputType: 'texto' }) .então(função(resultado) { var obj = { título: resultado, tipo: "lista", }; todoDatabase.createDocument(obj).então(função(resultado) { // O documento foi salvo }, função(erro) { // Ocorreu um erro ao salvar o documento }); }); }; |
Em vez de criar uma exibição separada para inserir dados, estamos apenas usando um $ionicPopup. Com o resultado, estamos adicionando-o a um objeto e também adicionando um tipo de documento para referências futuras. Esse objeto é então inserido no banco de dados e, nesse momento, você pode optar por executar determinadas tarefas, dependendo do sucesso ou do fracasso.
A próxima função com a qual devemos nos preocupar é a $scope.delete função:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$escopo.excluir = função(lista) { var listId = lista._id; todoDatabase.deleteDocument(lista._id, lista._rev).então(função(resultado) { todoDatabase.visualização de consulta("_design/todo", "tarefas", {"start_key": listId}).então(função(resultado) { para(var i = 0; i < resultado.linhas.comprimento; i++) { todoDatabase.deleteDocument(resultado.linhas[i].id, resultado.linhas[i].valor.rev); } }, função(erro) { // Houve um erro ao consultar a exibição }); }, função(erro) { // Houve um erro ao excluir o documento da lista }); }; |
Algumas coisas estão acontecendo aqui. Primeiro, tentamos excluir o documento da lista por meio do ID e da revisão específicos. Se isso for bem-sucedido, consultamos nossa exibição de tarefas para ver se há alguma tarefa que tenha como pai o documento criado recentemente. Restringimos nossa pesquisa usando o parâmetro chave_inicial opção. Para cada documento de tarefa que corresponda, remova-o também para que não fique órfão devido à exclusão do documento principal.
O parâmetro passado para a função delete é um objeto.
Mas espere um pouco! Como pesquisamos os documentos a serem exibidos em nossa lista? Há duas partes por trás do que estamos prestes a fazer. A primeira envolve consultar a visualização que criamos ao criar um novo banco de dados. Isso pode ser feito da seguinte forma:
|
1 2 3 4 5 6 7 8 9 |
todoDatabase.visualização de consulta("_design/todo", "listas").então(função(resultado) { para(var i = 0; i < resultado.linhas.comprimento; i++) { $escopo.listas[resultado.linhas[i].id] = resultado.linhas[i].valor; } }, função(erro) { // Houve um erro ao consultar a exibição }); |
Isso consultará a visualização das listas de tarefas quando a visualização for carregada, mas como procuramos constantemente por alterações? Desde que começamos a ouvir as alterações no executar podemos optar por exibir o que ouvimos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$rootScope.$em("couchbase:change", função(evento, argumentos) { para(var i = 0; i < argumentos.resultados.comprimento; i++) { se(argumentos.resultados[i].hasOwnProperty("excluído") &lificador;&lificador; argumentos.resultados[i].excluído === verdadeiro) { excluir $escopo.listas[argumentos.resultados[i].id]; } mais { se(argumentos.resultados[i].id.indexOf("_design") === -1) { todoDatabase.getDocument(argumentos.resultados[i].id).então(função(resultado) { se(resultado.tipo === "lista") { $escopo.listas[resultado._id] = resultado; } }); } } } }); |
O código acima ouvirá o couchbase:change evento. Se for acionado, ele percorrerá todas as alterações e determinará se estará excluindo um documento da lista ou inserindo um documento na lista. Digo upserting porque ele o inserirá se não existir ou o atualizará se existir.
O controlador da lista de tarefas
Dentro do www/js/app.js do seu projeto, vá em frente e crie o seguinte controlador:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
couchbaseApp.controlador("TaskController", função($escopo, $rootScope, $stateParams, $ionicPopup, $ionicHistory, $couchbase) { $escopo.todoList = $stateParams.listId; $escopo.tarefas = { }; $escopo.inserir = função() { }; $escopo.excluir = função(tarefa) { }; $escopo.voltar = função() { }; }); |
Algumas coisas estão acontecendo aqui. As $scope.todoList contém o ID da lista que foi passado da exibição anterior da lista de tarefas. É o ID da lista que foi selecionada. A variável $scope.tasks é semelhante ao que vimos no objeto TodoListsController com o $scope.lists objeto. Desta vez, ele estará apenas armazenando informações sobre a tarefa. O objeto $scope.insert e $scope.delete também será muito semelhante ao que vimos no TodoListsController. No entanto, $scope.back é novo e é responsável por nos levar um nível atrás na pilha de histórico quando tocamos na seta para trás dentro do aplicativo.
Portanto, vamos preencher essas funções com algum código, começando com a função $scope.insert função:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$escopo.inserir = função() { $ionicPopup.imediato({ título: 'Insira uma nova tarefa TODO', inputType: 'texto' }) .então(função(resultado) { var obj = { título: resultado, tipo: "tarefa", ID da lista: $stateParams.listId, }; todoDatabase.createDocument(obj).então(função(resultado) { // A tarefa foi criada com sucesso }, função(erro) { // Houve um erro ao criar a tarefa }); }); }; |
Como no outro controlador, esse também usará o $ionicPopup para inserir dados. O resultado será adicionado a um objeto com um tipo e o ID da lista à qual essa tarefa secundária pertence. Esse objeto é então inserido no banco de dados.
O próximo passo é a funcionalidade de exclusão para remover tarefas do Couchbase Lite:
|
1 2 3 4 5 |
$escopo.excluir = função(tarefa) { todoDatabase.deleteDocument(tarefa._id, tarefa._rev); } |
Observe como essa função de exclusão foi muito mais fácil em comparação com a exclusão de listas. Isso ocorre porque não precisamos nos preocupar em deixar os dados órfãos. Basta passar o ID da tarefa específica e a revisão a ser excluída e pronto.
Voltando à função back responsável por nos levar de volta à lista de tarefas:
|
1 2 3 4 5 |
$escopo.voltar = função() { $ionicHistory.goBack(); } |
Não há nada de especial aqui, mas é importante porque os dispositivos iOS não têm um botão de retorno de hardware. Menos importante para o Android, mas ainda assim é bom ter para manter a consistência.
Assim como no nosso controlador de lista de tarefas, temos que nos preocupar com a apresentação dos dados na tela. Na verdade, isso será muito semelhante ao que vimos no outro controlador. Começando com a consulta de tarefas na visualização:
|
1 2 3 4 5 6 7 8 9 |
todoDatabase.visualização de consulta("_design/todo", "tarefas", {"start_key": $stateParams.listId}).então(função(resultado) { para(var i = 0; i < resultado.linhas.comprimento; i++) { $escopo.tarefas[resultado.linhas[i].id] = {"_id": resultado.linhas[i].id, "título": resultado.linhas[i].valor.título, "list_id": resultado.linhas[i].valor.ID da lista, "_rev": resultado.linhas[i].valor.rev}; } }, função(erro) { // Houve um erro ao consultar a exibição }); |
No código acima, estamos consultando a exibição, mas também verificando se os resultados do documento compartilham o mesmo pai da lista de tarefas, por meio do uso do parâmetro chave_inicial. Se os resultados corresponderem, adicione-os ao nosso objeto de tarefas.
Quando se trata de nosso ouvinte, novamente será muito semelhante ao que já vimos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$rootScope.$em("couchbase:change", função(evento, argumentos) { para(var i = 0; i < argumentos.resultados.comprimento; i++) { se(argumentos.resultados[i].hasOwnProperty("excluído") &lificador;&lificador; argumentos.resultados[i].excluído === verdadeiro) { excluir $escopo.tarefas[argumentos.resultados[i].id]; } mais { se(argumentos.resultados[i].id.indexOf("_design") === -1) { todoDatabase.getDocument(argumentos.resultados[i].id).então(função(resultado) { se(resultado.tipo === "tarefa") { $escopo.tarefas[resultado._id] = resultado; } }); } } } }); |
Em vez de filtrar por listas, estamos filtrando por tarefas.
Criação das exibições da interface do usuário
Haverá duas visualizações nesse aplicativo:
- Uma visualização para criar, visualizar e excluir listas
- Uma visualização para criar, visualizar e excluir tarefas
O layout e a funcionalidade entre os dois serão praticamente idênticos. Se um www/templates ainda não existe em seu projeto, vá em frente e crie-o.
A visualização da lista Todo
Na seção www/templates, crie um novo arquivo chamado todolists.html e adicione o seguinte código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<botão classe="botão direito botão-ícone ícone de íon-plus"></botão> {{valor.título}} |
Há alguns aspectos a serem observados sobre o que você vê acima. Em primeiro lugar, haverá um botão de navegação com um ícone de adição que servirá para os usuários criarem novas listas. Quando clicado, ele chamará a função inserir() que criamos em nosso controlador. A próxima coisa a ser observada é como escolhemos criar nosso método lista de íons. Optamos por dar a ele recursos de deslizamento semelhantes aos dos aplicativos de e-mail comuns para iOS e Android. Isso vem em combinação com o botão de opção iônica que usaremos para excluir listas.
O ponto final dessa visão é o ng-repeat que estamos usando para percorrer todas as listas. Quando clicarmos em um item da lista, o ID da lista será passado por meio do parâmetro ui-sref ligar.
A visualização da lista de tarefas
Na seção www/templates, crie um novo arquivo chamado tasks.html e adicione o seguinte código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<botão classe="botão esquerdo button button-icon icon ion-arrow-left-c"></botão> <botão classe="botão direito botão-ícone ícone de íon-plus"></botão> {{valor.título}} |
Novamente, isso é muito semelhante à exibição da lista de tarefas. No entanto, há duas grandes diferenças entre as duas. Primeiro, observe que essa visualização tem um botão esquerdo com um ícone de seta que chama nosso back() método. Agora temos dois botões de menu nessa tela. Em segundo lugar, observe o botão ng-if que existe na instrução de repetição item iônico tag. Só queremos mostrar a tarefa se ela tiver um pai que corresponda à lista que escolhemos.
Testando seu projeto
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:
|
1 2 3 4 |
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:
|
1 2 3 |
iônico construir 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 |
iônico construir ios iônico emular ios |
Solução de problemas de dependência do Gradle
No momento da compilação para Android, você pode se deparar com a seguinte mensagem de erro:
|
1 |
Erro: duplicado arquivos durante embalagem de APK |
Para resolver isso, você deve estender o arquivo de compilação do Gradle para Android, conforme descrito na seção Documentação oficial do Apache Cordova.
Criar platforms/android/build-extras.gradle em seu projeto e adicione o seguinte:
|
1 2 3 4 5 6 7 |
androide { packagingOptions { excluir 'META-INF/ASL2.0' excluir 'META-INF/LICENSE' excluir 'META-INF/NOTICE' } } |
Conclusão
Usando o plug-in PhoneGap do Couchbase, criamos um aplicativo móvel de lista de tarefas que faz todas as transações localmente. Usamos o AngularJS para nos conectarmos facilmente aos pontos de extremidade RESTful que o Couchbase Lite expõe.
O Próximo tutorial sobre o Ionic Framework nesta série explicará como replicar dados entre o dispositivo local e o Couchbase Sync Gateway para que os dados possam ser compartilhados entre dispositivos e plataformas.
Essa série pode ser baixada na íntegra no site GitHub do Couchbase Labs página.
Há muito acoplamento com outros componentes em suas exibições! Talvez coloque a lógica de inserção/atualização/exclusão em classes de ação separadas para desacoplá-las de qualquer UI específica e, em seguida, chame-as quando os acionadores de inserção/atualização/exclusão forem enviados da exibição. Por exemplo,
Ei, obrigado pelo seu comentário!
Acho que isso se resume à preferência, pois não li na documentação do Ionic para fazer ou não fazer isso. Não estou discordando de você, pois acho que você tem uma abordagem muito válida, mas acho que ela pode ser muito avançada para muitos leitores deste tutorial. Eu estava tentando acomodar todos os desenvolvedores, iniciantes e experientes.
Mais uma vez, obrigado por sua sugestão :-)
Obrigado!
Não tem problema!
Quando executo o projeto git no emulador de iOS (ionic emulate ios), ele falha ao criar o banco de dados. O erro retornado é apenas nulo. O que pode estar acontecendo?
Aqui está a solicitação: {\"method\":\"PUT\",\"url\":\"http://lite.couchbase./todo\",\"withCredentials\":true}e a resposta: {\"data\":null,\"status\":0,\"config\":{\"method\":\"PUT\",\"transformRequest\":[null],\"transformResponse\":[null],\"url\":\"http://lite.couchbase./todo\",\"withCredentials\":true,\"headers\":{\"Accept\":\"application/json, text/plain, */*\"}},\"statusText\":\"\"}
Isso é estranho!
Em qual versão do iOS você está testando e em qual versão do Apache Cordova? Posso confirmar se você instalou todos os plug-ins necessários DEPOIS de adicionar a plataforma iOS?
Obrigado,
Estou tendo exatamente o mesmo problema. createDatabase() está sendo chamado e vai para o retorno de chamada de erro, o erro é nulo.
Estou executando o aplicativo no Samsung Galaxy S3.
Tem mais alguma informação que possa me dar? Versão do Android? Como você está implementando? etc.
Melhor,
Android 4.1.2. Estou implantando no dispositivo usando ionic build android -> ionic run android.
No entanto, se isso ajudar, eu o executei no emulador do iOS e ele funciona.
Abrimos um tíquete para você aqui:
https://github.com/couchbase/c…
Melhor,
Você ainda está tendo problemas com isso?
Estou com o mesmo problema ao executar a promessa createDatabase do aplicativo TodoliteIonic, que é rejeitada, mas o erro está vazio. Não consigo ver nada no logcat além dos meus logs antes e depois do erro
Executando o Android 4.2.2
Em outro dispositivo com a versão 5.0.2
Vejo Falha ao carregar o recurso: o servidor respondeu com um status de 403 (Proibido)
Funciona bem no Android 6+
Frank, você pode colar o logcat completo de cada dispositivo com falha? Sinta-se à vontade para usar comentários separados para cada um.
Obrigado,
No momento, estou longe do meu computador, mas pesquisei um pouco mais e descobri que, nos dispositivos que falham, o cabeçalho de autorização está ausente.
Não tenho ideia de como está sendo configurado nos dispositivos que funcionam, mas definitivamente está lá.
Enviarei meus registros assim que possível.
Ok, pesquisei o plug-in do Android e encontrei o seguinte
Credenciais requestCredentials = credentialsWithBasicAuthentication(request);
Se (allowedCredentials != null && !allowedCredentials.empty()) {
Se (requestCredentials == null || ! requestCredentials.equals(allowedCredentials)) {
Log.d(Log.TAG_LISTENER, \"Não autorizado - requestCredentials não fornecido ou não corresponde às credenciais permitidas\");
response.setHeader(\"WWW-Authenticate\", \"Basic realm=\"Couchbase Lite\"\");
response.setStatus(401);
retorno;
//// Por algum motivo, não recebemos um 401 no dispositivo. O retorno de erro é nulo
}
Log.v(Log.TAG_LISTENER, \"Autorizado via autenticação básica\");
} else {
Log.v(Log.TAG_LISTENER, \"Não está aplicando a autenticação básica - allowedCredentials nula ou vazia\");
}
credentialsWithBasicAuthentication(request) retorna nulo em alguns dispositivos porque o cabeçalho Basic Authorisation não foi definido.
Não estou configurando isso em nenhum lugar. Para corrigir isso, tive que alterar makeRequest em ng-couchbase-lite.js para
makeRequest: function(method, url, params, data) {
var deferred = $q.defer();
var settings = {
método: método,
url: url,
withCredentials: true,
cabeçalhos: {
\'Authorization\': this.auth
}
};
if (params) {
settings.params = params;
}
se (dados) {
settings.data = dados;
}
$http(configurações)
.success(function(result) {
deferred.resolve(result);
})
.error(function(error) {
deferred.reject(error);
});
return deferred.promise;
}
Onde this.auth é uma cadeia de caracteres codificada em Base64 das informações retornadas por cblite.getURL
Embora isso não pareça ter quebrado nada, gostaria de entender como o cabeçalho Authorisation está sendo definido nos dispositivos que estavam funcionando.
Interessante...
Por acaso você está usando uma ROM personalizada para Android? Estou me perguntando se isso é uma questão de Angular, e não de Couchbase. Se seus dispositivos estiverem processando JavaScript de forma diferente, talvez esse seja o problema. Que tipo de dispositivos ou emuladores você está usando para cada uma dessas versões do Android?
Melhor,
Desculpe-me pela resposta tardia, estive ausente :-)
Todos os dispositivos Android têm uma ROM padrão. Concordo que parece mais um problema do Angular, mas não consigo ver onde as informações básicas de autenticação estavam sendo definidas.
Talvez você queira levar isso para os fóruns
Excelente tutorial!
Serve até como uma introdução ao Ionic.
Pequena dica: talvez adicionar o link à segunda parte do artigo facilite o acompanhamento do leitor ;)
Obrigado pela dica! Eu já havia vinculado este primeiro artigo ao segundo da série :-)
Olá,
Como posso descobrir o caminho do js-lib usado pelo CS?
E como posso adicionar a js-lib definida por sef ao CS?
Estou um pouco confuso:
1. A que você está se referindo quando diz \"js-lib\"?
2. A que \"js-lib autodefinido\" você está se referindo?
Melhor,
Olá,
Quero saber de onde vem a função js nativa.
E se eu quiser definir meus conjuntos de funções js, eu os salvarei em um arquivo com o nome de extensão .js, onde devo colocar o arquivo js?
Ainda estou confuso. De que função nativa do js você está falando?
Seja bem descritivo, pois isso me permitirá ajudá-lo melhor.
Melhor,
Por exemplo: de onde vem a função de filtro? parseInt?
Você está se referindo ao interior do evento de alteração? Se sim, estamos apenas analisando uma propriedade específica nos documentos NoSQL.
Se estiver se referindo a outra coisa, seja específico. Quanto mais informações você me fornecer, melhor poderei ajudá-lo.
Atenciosamente,
Muito obrigado!
E, de cara, quero saber quais funções internas posso usar?
Existe uma função integrada como \' substring\'?
O CS importa o underscore.js?
Olá,
A CS possui apenas 10 baldes?
Obrigado pelo tutorial!
Quando tento executar isso no meu Android 6, Nexus 5, recebo o erro \"invalid database\" na etapa createDatabase. Você pode me ajudar a descobrir o que pode estar errado.
Agradecimentos
O que dizem os seus registros completos?
Perdoe a pergunta nerd, Nic, mas onde encontro os registros e como posso ativá-los no ambiente do Ionic?
Aparentemente, se eu tiver um caractere maiúsculo no nome do banco de dados, ele falhará. Quando usei apenas letras minúsculas, funcionou!
Fico feliz em saber que você conseguiu fazê-lo funcionar :-)
No Android, você pode ver o seguinte para obter informações detalhadas sobre o registro:
https://blog.nraboy.com/2014/1…
No iOS, você pode ver os registros da seguinte forma:
https://blog.nraboy.com/2015/1…
Melhor,
Obrigado por esse belo exemplo:-) Como posso fazer uma replicação filtrada (canais diferentes)? Por exemplo, neste método:
replicar: function(source, target, continuous) {
return this.makeRequest(\"POST\", this.databaseUrl + \"_replicate\", {}, {source: source, target: target, continuous: continuous});
},
Existe um método para a replicação filtrada?
Gostaria de filtrar com base no usuário que está sendo autenticado ou como usuário convidado (ou seja, não autenticado)? Você pode criar usuários e, em seguida, conceder a um usuário acesso a um conjunto de canais. Nesse caso, você especificaria uma sessão de cookie no corpo da solicitação do método _replicate. Ou você poderia dizer ao replicador para extrair apenas documentos de um determinado canal. Consulte a referência da API _replicate para obter um exemplo de uso da sessão de cookies http://developer.couchbase.com…
No entanto, faltam explicações sobre como especificar nomes de canais. Vou dar uma olhada e lhe informarei.
Obrigado por sua resposta rápida. Seria muito bom se você pudesse fazer isso. Quero extrair os documentos como usuário convidado.
Nos documentos, há um campo para os canais... channels:[\"user123\", \"user1234\"].....Então, o URL deve ter essa aparência?
http://sync.couchbasecloud.com... . para obter somente os documentos do canal user123. Também tenho outra pergunta: posso obter o andamento da extração ou uma informação quando ela for concluída?
O URL que você colou acima obteria os documentos diretamente do Sync Gateway. Você também pode instruir o replicador a extrair documentos somente de um canal específico com o seguinte corpo de solicitação no POST /_replicate (aqui, o replicador extrairá documentos somente do canal nyc:
{
\"query_params\": {
\"canais\": \"nyc\"
},
\"filtro\": \"sync_gateway/bychannel\",
\"source\": {
\"url\": \"http://localhost:4984/sg-test/\"
},
\"target\": {
\"url\": \"cblite-test\"
}
}
Para obter informações sobre o andamento, há um ponto de extremidade /_active_tasks para isso http://developer.couchbase.com…
Obrigado:-)
Olá, James, tenho mais uma pergunta sobre a sincronização por canal:
O documento do servidor tem a seguinte aparência:
{
\"clicar\": \"para editar\",
\"novo na versão 2.0\": \"não há nomes de campos reservados\",
\"canais\": [\"nyc\"]
}
Está correto o fato de eu precisar estender a biblioteca ng-couchbase-lite.js. Eu estendi esse método:
replicar: function(query_params, filter, source, target, continuous) {
return this.makeRequest(\"POST\", this.databaseUrl + \"_replicate\", {}, {query_params:query_params, filter:filter, source: source, target: target, continuous: continuous});
},
Esta é minha chamada replicada:
Database.replicate({\"channels\": [\"nyc\"]}, \"sync_gateway/bychannel\" , dbName, \"http://104.155.79.21:4984/bucket_db_sync\", true).then(function(result) {
console.log(result);
Database.replicate({\"channels\": [\"nyc\"]}, \"sync_gateway/bychannel\" ,\"http://XXX.XXX.XXX.XXX:4984/bucket_db_sync\", dbName, true).then(function(result) {
console.log(result);
}, function(error) {
console.log(\"ERRO DE SINCRONIZAÇÃO DO DISPOSITIVO-> \" + JSON.stringify(error));
});
Não funciona, recebo um erro:
AVISO: CBL_Pusher[http://XXX.XXX.XXX.XXX:4984/monitoring_sync]: Nenhum filtro \'sync_gateway/bychannel\' (err 404)
Existe uma maneira melhor de não ter que estender a biblioteca ng-couchbase-lite.js?
Obrigado por sua resposta.
Se quiser especificar vários canais, separe-os por vírgula em uma cadeia de caracteres como esta:
{
\"query_params\": {
\"canais\": \"nyc,london\"
},
\"filtro\": \"sync_gateway/bychannel\",
\"source\": {
\"url\": \"http://localhost:4984/sg-test/\"
},
\"target\": {
\"url\": \"cblite-test\"
}
}
Funciona se você alterar [\"nyc\"] para \"nyc\"? Sim, você precisará alterar a chamada da API de replicação ou criar uma nova.
Oi Nic, você poderia dar exemplos de como adicionar um anexo ao documento e recuperá-lo mais tarde. Como se referiria ao anexo com um campo no documento?
Obrigado!
Parece uma ideia perfeita para outro tutorial de blog :-)
Por favor, diga-me como posso criar um banco de dados no servidor couchbase e, em seguida, como posso executar a operação CURD nele.
Talvez você queira dar uma olhada no meu tutorial sobre a pilha CEAN:
https://blog.nraboy.com/2015/1…
Substitua o AngularJS (A) por uma plataforma móvel, se for essa a sua preferência.
Melhor,
Obrigado pelo tutorial Nic...
Meu projeto é compilado sem problemas sem o plug-in instalado, mas depois de instalar o plug-in, a compilação falha com o seguinte erro...
versão do cordova: 5.4.1
Versão do Ionic: 1.7.10
Parece que você está sofrendo do que mencionei nesta seção:
Solução de problemas de dependência do Gradle
Você pode confirmar se seguiu essas instruções corretamente?
Melhor,
Obrigado. Isso fez com que funcionasse... :)
Incrível!
Olá! Meu amigo e eu estamos tentando fazer isso funcionar, mas sempre recebemos a mensagem \"Couchbase Lite is not installed\".
Seguimos seu guia passo a passo, mas ainda recebemos o erro.
Também tentamos fazer o download do código-fonte do repositório do github do couchbaselabs, mas o erro é o mesmo!
O que estamos perdendo?
Muito obrigado por qualquer ajuda que possa nos dar.
Você pode confirmar que não está tentando usar o ionic serve, o ionic view ou o ionic build? Também pode confirmar que não está tentando testar por meio de um navegador da Web? Pergunto isso porque nada do que mencionei funcionará. Você precisa compilar e instalar no dispositivo ou simulador.
Melhor,
Eu estava tentando usar o ionic serve e também o aplicativo instalado no meu dispositivo Android.
Por que não posso usar o ionic serve ou o ionic view?
Agradecimentos
O Ionic serve e o ionic view são alfa e, na minha experiência, têm compatibilidade muito ruim com plug-ins.
Melhor,
Também estou recebendo esse erro. E não tenho certeza de como saber se estou usando o ionic serve, o ionic view ou o ionic build?
Acompanhe as etapas de como você testa seu aplicativo. Não pule nada. Inclua também os comandos.
Melhor,
Eu também tive o mesmo problema. Resolvi o problema removendo minha plataforma, nesse caso, android, e adicionando novamente. Parece que o problema ocorre quando se adiciona a plataforma antes de adicionar o plug-in couche base.
Sim, às vezes o Apache Cordova fica maluco com a ordem em que você adiciona as coisas.
Quando executo o projeto uma segunda vez, nenhum ouvinte é criado, pois isso parece acontecer somente quando o banco de dados é criado. Além disso, quando a lista é preenchida pela função queryView, não consigo excluir itens porque _id não está definido.
Você poderia explicar como corrigir os dois problemas?
Respondi à minha própria pergunta. Capturou o código de status 412 ao criar o banco de dados e ajustou a exibição da lista de tarefas para incluir o valor _id.
Belo tutorial.
Agradecimentos
Fantástico! Que bom que você conseguiu. Farei uma revisão para corrigir 412 erros na reinicialização do aplicativo.
Gostaria de perguntar uma coisa: descobri que o aplicativo está funcionando, mas nada é exibido no aplicativo, exceto o botão \"+\" e o formulário de entrada... mas os dados não são exibidos...
O que dizem os seus registros?
Não há erro...
Ou talvez eu tenha perdido alguma coisa?
Qual plataforma você está usando e como está fazendo a verificação?
Estou usando a plataforma Android e verifico com o Google Chrome
Posso fazer uma pergunta? Qual é a sintaxe para mostrar os dados?
Você deverá verificar os registros por meio do ADB, não do Chrome. Você pode ler o seguinte para obter mais informações:
https://blog.nraboy.com/2014/1…
Quando tiver seus registros, cole-os nos comentários para que eu possa dar uma olhada.
Melhor,
Olá, talvez eu tenha perdido alguma coisa...
Estou confuso sobre onde devo colocar essa sintax...
Sim, é assim que você consulta a visualização que criou. Ela vai para o seu controlador.
Coloquei o script em meu controlador, mas quando o verifico com o Chrome, ele mostra este erro
Nota :
- Quando verifico no \"ng-couchbase-lite.min.js\", há uma função \"queryView\", mas não consigo chamá-la no app.js
- Já adicionei o \"ng-couchbase-lite.min.js\" acima do \"app.js\", mas esse erro ainda aparece e não consigo executar o programa
Esse plug-in usa código nativo, portanto, não é possível testar em um navegador da Web.
Estou executando no Android e inspecionando o elemento no Chrome usando a depuração USB
Então, parece que \'todoDatabase\' é nulo. Tem certeza de que o definiu e o tornou global?
Essa é uma variável global, certo?
Sim, você pode confirmar se ele está carregado dentro de seu module.run método?
Sim, dê uma olhada na imagem
É isso mesmo?
Sim, mas você pode confirmar se ele foi realmente carregado? O controlador que faz a consulta é o primeiro controlador que é carregado após o module.run? Se sim, provavelmente é uma condição de corrida. A abertura do banco de dados e a configuração das exibições são assíncronas.
Como confirmar isso?
Desculpe-me por perguntar algo assim, ainda sou novato :)
Imprima a variável depois de defini-la e veja se ela é nula.
Depois de imprimir o \"todoDatabase\", você está certo. Ele diz \"null\"
Como corrigir isso?
Qual deles você está imprimindo? Presumo que esteja fazendo o seguinte:
Correto?
I https://uploads.disquscdn.com/... desculpe-me pela resposta tardia...
Aqui eu coloco o console.log (eu o coloco depois da tag de fechamento \"if(!window.cblite)\")
Isso não está correto, pois o getURL é assíncrono. Ele pode, e provavelmente não, ter concluído o processo de inicialização.
Ok, tentarei usar o console.log como você disse antes?
Este é o resultado do console.log
*Coloquei após este código \"todoDatabase = new $couchbase(url, \"todo\");\"
https://uploads.disquscdn.com/…
Sim, ela foi carregada. Você está sofrendo de uma condição de corrida em algum lugar (tentando usar a biblioteca antes que ela tenha sido totalmente carregada). Como o AngularJS e esse plug-in são assíncronos, você precisa seguir as regras do design.
Recomendo que você verifique novamente seu código ou clone o projeto do GitHub.
Melhor,
oi
Estou recebendo o erro queryView of null
Oi Nic,
Bom tutorial, obrigado por isso, mas tenho uma dúvida: posso criar uma visualização de acordo com meus requisitos e não no carregamento do aplicativo?
Sim, você pode fazer isso.
Além disso, caso não tenha ficado claro, você só precisa criar uma visualização uma vez. Depois de criada, ela é salva em seu banco de dados local e pode ser consultada a qualquer momento.
Melhor,
Olá, Nic,
Obrigado pela resposta.
Criei uma visualização no carregamento do aplicativo e ela está funcionando corretamente, mas depois tentei criar outra visualização em meu controlador (não no carregamento do aplicativo) para chamar a função mencionada abaixo
$scope.createview = function() {
var todoViews = {
tarefas: {
map: function(doc) {
if(doc.firstname==\"Chandan\" ) {
emit(doc._id, {firstname: doc.firstname, lastname: doc.lastname, email: doc.email, rev: doc._rev})
}
}.toString()
}
};
todoDatabase.createDesignDocument(\"_design/todo\", todoViews);
todoDatabase.listen();
};
mas ele está retornando o erro mencionado abaixo:-
PUT http://ad92e99d-385a-46b7-9358-5fcb44944091:40c43d4d-9fb0-484f-ba78-082bacb2208d@localhost:5984/todo/_design/todo 409 (Conflito)
Por favor, fique atento.
Você deve criar todas as visualizações de um determinado documento de design ao mesmo tempo. Você está tendo esse conflito porque _design/todo já existe.
Oi Nic,
Obrigado por isso, funcionou para mim.
Mas tenho mais uma dúvida: por que estamos passando essa função de mapa abaixo como .toString()?
map: function(doc) {
if(doc.firstname==\"Chandan\" ) {
emit(doc._id, {firstname: doc.firstname, lastname: doc.lastname, email: doc.email, rev: doc._rev})
}
}.toString()
Por causa disso, quando estou tentando fazer
var username=\"chandan\";
if(doc.firstname == username ) {
emit(doc._id, {firstname: doc.firstname, lastname: doc.lastname, email: doc.email, rev: doc._rev})
}
}.toString() ele não obtém meus dados.
Talvez você queira ler isso para aumentar sua compreensão das visualizações do MapReduce:
http://docs.couchbase.com/admi…
Melhor,
Oi Nic, sou novato no Couchbase, segui seu tutorial, mas quando executado no dispositivo, o registro mostra o erro 412 :
Falha ao carregar o recurso: o servidor respondeu com um status de 412 (Precondition failed) http://b24781df-87c6-4f08-a5a0-79a98c045265:174400da-d82c-48b4-bd70-05587e0e2fd2@localhost:598
Sei que preciso criar o banco de dados de todo no servidor couchbase, mas não sei como obter a url e o plugin para o código. Você pode me ajudar com isso? Muito obrigado
Você deu uma olhada na postagem 2 da série? Nesse post, eu me concentro na sincronização. A postagem 1 trata apenas de coisas locais.
Criei o aplicativo para a plataforma Android, mas ele está em branco. Eu até baixei o código inteiro e criei o aplicativo para a plataforma Android, mas o aplicativo só mostra o botão de login de convidado e clicar nele não faz nada.
O que dizem os seus registros?
Não sei como visualizar os registros, pois instalei o aplicativo em um dispositivo físico, não em um emulador.
\"TypeError: Não é possível chamar o método \'queryView\' de null
\"TypeError: Não é possível chamar o método \'queryView\' de null
Desculpe-me por publicar um novo comentário, mas acho que a resposta não estava sendo publicada.
O registro diz: \"TypeError: Não é possível chamar o método \'queryView\' de null
Isso significa que todoDatabase não foi definido. Você pode verificar no método de execução para ter certeza de que ele está sendo definido? Quero dizer, verifique adicionando algumas saídas do console.
Sim, consegui fazê-lo funcionar, obrigado pela ajuda.
[...] ano passado, escrevi sobre o uso do Couchbase Mobile em um aplicativo móvel do Ionic Framework. Naquela época, estávamos usando o Ionic Framework 1.0 e o AngularJS 1.0. A tecnologia mudou ao longo do [...]
[...] Escrevi sobre como usar o Couchbase em um aplicativo móvel para Android e iOS do Ionic Framework, mas ele usava o Couchbase Lite como seu banco de dados NoSQL incorporado. Desta vez, estamos [...]