{"id":2077,"date":"2015-09-02T16:42:11","date_gmt":"2015-09-02T16:42:11","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=2077"},"modified":"2025-06-13T23:47:43","modified_gmt":"2025-06-14T06:47:43","slug":"using-couchbase-in-your-ionic-framework-application-part-1","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/using-couchbase-in-your-ionic-framework-application-part-1\/","title":{"rendered":"Usando o Couchbase em seu aplicativo Ionic Framework - Parte 1"},"content":{"rendered":"<p><a href=\"https:\/\/www.ionicframework.com\">Estrutura i\u00f4nica<\/a> tornou-se recentemente uma das estruturas m\u00f3veis mais populares do mercado. Ela facilita incrivelmente a cria\u00e7\u00e3o de \u00f3timas interfaces de usu\u00e1rio para aplicativos m\u00f3veis. No entanto, parte do desafio tamb\u00e9m \u00e9 o gerenciamento de dados, a busca no servidor back-end e o salvamento dos dados localmente para quando o dispositivo estiver off-line.<\/p>\n<p>O Couchbase Mobile cuida disso para voc\u00ea e, com o plug-in do Apache Cordova, \u00e9 muito f\u00e1cil!<\/p>\n<p>Neste tutorial, voc\u00ea aprender\u00e1 a:<\/p>\n<ul>\n<li>Inclua o Couchbase Lite em seu projeto Ionic.<\/li>\n<li>Use os componentes da IU do Ionic para exibir os dados na tela.<\/li>\n<li>Execute o aplicativo no simulador de iOS \/ Android.<\/li>\n<\/ul>\n<h2>Os pr\u00e9-requisitos<\/h2>\n<ul>\n<li>Estrutura Ionic 1.0+<\/li>\n<li>Apache Cordova 5.0+<\/li>\n<li>O Android SDK se estiver criando para o Android<\/li>\n<li>Um Mac com o Xcode instalado se estiver criando para iOS<\/li>\n<\/ul>\n<h2>Primeiros passos<\/h2>\n<p>Antes de come\u00e7armos a codificar, \u00e9 importante criarmos um novo projeto e configurarmos todos os plug-ins e componentes necess\u00e1rios. No prompt de comando (Windows) ou no Terminal (Mac\/Linux), execute o seguinte para criar um novo projeto Ionic:<\/p>\n<pre><code class=\"language-bash\">\r\nionic start CouchbaseApp blank\r\ncd CouchbaseApp\r\nionic platform add android\r\nionic platform add ios\r\n<\/code><\/pre>\n<p>Lembre-se de que, se voc\u00ea n\u00e3o estiver usando um Mac, n\u00e3o poder\u00e1 adicionar e criar para a plataforma iOS.<\/p>\n<p>Para que esse projeto seja bem-sucedido, existem alguns <a href=\"https:\/\/cordova.apache.org\/\">Apache Cordova<\/a> plug-ins que devem ser instalados. Com o projeto Ionic como seu diret\u00f3rio de trabalho atual, no prompt de comando ou no terminal, execute os seguintes comandos:<\/p>\n<pre><code class=\"language-bash\">\r\ncordova plugin add cordova-plugin-whitelist\r\ncordova plugin add https:\/\/github.com\/couchbaselabs\/Couchbase-Lite-PhoneGap-Plugin.git\r\n<\/code><\/pre>\n<p>Isso instalar\u00e1 o plug-in da lista de permiss\u00f5es do Apache Cordova, que nos permitir\u00e1 nos comunicar com servi\u00e7os externos, e o plug-in do Couchbase PhoneGap, que permitir\u00e1 o uso do Couchbase em nosso aplicativo.<\/p>\n<h2>Incluindo a biblioteca RESTful do AngularJS<\/h2>\n<p>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\u00e7\u00e3o <a href=\"https:\/\/developer.couchbase.com\/mobile\/develop\/references\/couchbase-lite\/rest-api\/index.html\">Documenta\u00e7\u00e3o oficial do Couchbase<\/a>. No entanto, h\u00e1 um <a href=\"https:\/\/angularjs.org\/\">AngularJS<\/a> dispon\u00edvel para facilitar muito a chamada desses pontos de extremidade.<\/p>\n<p>Fa\u00e7a o download da vers\u00e3o mais recente <a href=\"https:\/\/github.com\/couchbaselabs\/ng-couchbase-lite\">ng-couchbase-lite<\/a> encontrada no GitHub e inclua a vers\u00e3o <strong>ng-couchbase-lite.min.js<\/strong> encontrado no arquivo <strong>dist<\/strong> no diret\u00f3rio <strong>www\/js\/<\/strong> pasta.<\/p>\n<p>Com o arquivo inclu\u00eddo em seu projeto, abra o arquivo <strong>index.html<\/strong> e inclua o arquivo JavaScript da seguinte forma:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n\r\n<\/code><\/pre>\n<p>Observe que o script foi inclu\u00eddo acima da se\u00e7\u00e3o <strong>www\/js\/app.js<\/strong>.<\/p>\n<p>A \u00faltima coisa que precisa ser feita antes que o ng-couchbase-lite possa ser usado \u00e9 que ele precisa ser injetado no AngularJS. Isso pode ser feito abrindo o arquivo <strong>www\/js\/app.js<\/strong> e alterando o arquivo <strong>angular.module<\/strong> para se parecer com o seguinte:<\/p>\n<pre><code class=\"language-javascript\">\r\nvar couchbaseApp = angular.module(\"starter\", [\"ionic\", \"ngCouchbaseLite\"]);\r\n<\/code><\/pre>\n<p>O wrapper do AngularJS agora pode ser usado no projeto.<\/p>\n<h2>Polimento do arquivo de \u00edndice<\/h2>\n<p>Alguns ajustes precisam ser feitos no <strong>www\/index.html<\/strong> para aproveitar ao m\u00e1ximo este tutorial. A primeira delas \u00e9 adicionar algumas meta-informa\u00e7\u00f5es para complementar o plug-in de lista branca. Isso \u00e9 mais necess\u00e1rio para o Android do que para o iOS. Perto do outro <strong>meta<\/strong> inclua o seguinte:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n<\/code><\/pre>\n<p>Isso apenas informa ao seu projeto que voc\u00ea deseja trabalhar com determinados scripts.<\/p>\n<p>O outro ajuste que voc\u00ea deseja fazer \u00e9 dentro de seu <strong>corpo<\/strong> tags. Substitua tudo o que estiver dentro do corpo pelo seguinte:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n    \r\n    \r\n\r\n<\/code><\/pre>\n<p>A essa altura, voc\u00ea j\u00e1 deve estar pronto para come\u00e7ar<\/p>\n<h2>Uso de uma vari\u00e1vel de banco de dados global<\/h2>\n<p>Para evitar o trabalho de ter que abrir o banco de dados em cada exibi\u00e7\u00e3o, vamos criar uma vari\u00e1vel global para o projeto. Na vari\u00e1vel <strong>www\/js\/app.js<\/strong> arquivo abaixo <strong>angular.module<\/strong> incluem o seguinte:<\/p>\n<pre><code class=\"language-javascript\">\r\nvar todoDatabase = null;\r\n<\/code><\/pre>\n<p>Isso ser\u00e1 definido posteriormente quando inicializarmos o banco de dados.<\/p>\n<h2>Configura\u00e7\u00e3o do UI Router<\/h2>\n<p>O Ionic Framework usa o AngularJS UI-Router, portanto, vamos aproveit\u00e1-lo ao lidar com nossas exibi\u00e7\u00f5es e controladores. Dentro da se\u00e7\u00e3o <strong>www\/js\/app.js<\/strong> adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-javascript\">\r\ncouchbaseApp.config(function($stateProvider, $urlRouterProvider) {\r\n    $stateProvider\r\n        .state(\"todoLists\", {\r\n            url: \"\/todoLists\",\r\n            templateUrl: \"templates\/todolists.html\",\r\n            controller: \"TodoListsController\"\r\n        })\r\n        .state(\"tasks\", {\r\n            url: \"\/tasks\/:listId\",\r\n            templateUrl: \"templates\/tasks.html\",\r\n            controller: \"TaskController\"\r\n        });\r\n    $urlRouterProvider.otherwise(\"\/todoLists\");\r\n});\r\n<\/code><\/pre>\n<p>Temos duas rotas, uma para a exibi\u00e7\u00e3o de listas e outra para a exibi\u00e7\u00e3o de tarefas. No entanto, a exibi\u00e7\u00e3o de tarefas exige um par\u00e2metro extra que estamos identificando como <strong>listId<\/strong>. Isso se deve ao fato de que, quando navegamos para a exibi\u00e7\u00e3o de tarefas, queremos fornecer o item da lista principal ao qual a tarefa pertence. Isso nos ajudar\u00e1 a consultar nossos dados. Ignore os controladores por enquanto, pois vamos cri\u00e1-los mais tarde.<\/p>\n<h2>Inicializa\u00e7\u00e3o do banco de dados e das visualiza\u00e7\u00f5es<\/h2>\n<p>A primeira coisa a fazer ao usar o plug-in PhoneGap do Couchbase \u00e9 criar um banco de dados. Em seguida, voc\u00ea pode registrar exibi\u00e7\u00f5es para consultar os documentos que residir\u00e3o no banco de dados. As visualiza\u00e7\u00f5es do Couchbase s\u00e3o consultas de mapa\/redu\u00e7\u00e3o que constroem o \u00edndice de forma incremental \u00e0 medida que novos documentos s\u00e3o salvos no banco de dados. Elas s\u00e3o completamente diferentes das visualiza\u00e7\u00f5es da interface do usu\u00e1rio!<\/p>\n<p>Dentro da se\u00e7\u00e3o <strong>www\/js\/app.js<\/strong> vamos incluir algumas coisas no arquivo AngularJS <strong>executar<\/strong> m\u00e9todo:<\/p>\n<pre><code class=\"language-javascript\">\r\ncouchbaseApp.run(function($ionicPlatform, $couchbase) {\r\n    $ionicPlatform.ready(function() {\r\n        \/\/ 1\r\n        if(!window.cblite) {\r\n            alert(\"Couchbase Lite is not installed!\");\r\n        } else {\r\n            cblite.getURL(function(err, url) {\r\n                if(err) {\r\n                    alert(\"There was an error getting the database URL\");\r\n                    return;\r\n                }\r\n                todoDatabase = new $couchbase(url, \"todo\");\r\n                \/\/ 2\r\n                todoDatabase.createDatabase().then(function(result) {\r\n                    var todoViews = {\r\n                        lists: {\r\n                            map: function(doc) {\r\n                                if(doc.type == \"list\" &amp;&amp; doc.title) {\r\n                                    emit(doc._id, {title: doc.title, rev: doc._rev})\r\n                                }\r\n                            }.toString()\r\n                        },\r\n                        tasks: {\r\n                            map: function(doc) {\r\n                                if(doc.type == \"task\" &amp;&amp; doc.title &amp;&amp; doc.list_id) {\r\n                                    emit(doc.list_id, {title: doc.title, list_id: doc.list_id, rev: doc._rev})\r\n                                }\r\n                            }.toString()\r\n                        }\r\n                    };\r\n                    todoDatabase.createDesignDocument(\"_design\/todo\", todoViews);\r\n                    todoDatabase.listen();\r\n                }, function(error) {\r\n                    \/\/ There was an error creating the database\r\n                });\r\n             });\r\n         }\r\n    });\r\n});\r\n<\/code><\/pre>\n<p>Veja o que est\u00e1 acontecendo passo a passo:<\/p>\n<ol>\n<li>Primeiro, voc\u00ea verifica se o plug-in existe (instalado e em execu\u00e7\u00e3o). Se existir, crie um novo banco de dados, caso o banco de dados desejado ainda n\u00e3o exista. Se a cria\u00e7\u00e3o do banco de dados for bem-sucedida, criaremos duas exibi\u00e7\u00f5es, 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 <strong>todo<\/strong>.<\/li>\n<li>Estamos criando uma visualiza\u00e7\u00e3o chamada <strong>tarefas<\/strong> e <strong>listas<\/strong>, ambos dentro do <strong>_design\/todo<\/strong> documento de design. Com rela\u00e7\u00e3o \u00e0s exibi\u00e7\u00f5es do Couchbase. As <strong>listas<\/strong> retornar\u00e1 todos os documentos que t\u00eam um <strong>doc.type<\/strong> de <strong>lista<\/strong> e que tenham um <strong>t\u00edtulo<\/strong> propriedade. No entanto, somente o t\u00edtulo e a revis\u00e3o do documento s\u00e3o retornados com o ID do documento. Isso \u00e9 para manter as coisas leves. A propriedade <strong>tarefas<\/strong> retornar\u00e1 todos os documentos que t\u00eam um <strong>doc.type<\/strong> de <strong>tarefa<\/strong> bem como alguns <strong>t\u00edtulo<\/strong> propriedade e pai <strong>ID da lista<\/strong> propriedade. Nessa exibi\u00e7\u00e3o espec\u00edfica, somente o t\u00edtulo, a revis\u00e3o do documento e o ID da lista s\u00e3o retornados com o ID do documento.<\/li>\n<\/ol>\n<h2>Criando os controladores<\/h2>\n<h3>O controlador da lista Todo<\/h3>\n<p>Dentro do <strong>www\/js\/app.js<\/strong> do seu projeto, v\u00e1 em frente e crie o seguinte controlador:<\/p>\n<pre><code class=\"language-javascript\">\r\ncouchbaseApp.controller(\"TodoListsController\", function($scope, $state, $ionicPopup, $couchbase, $rootScope) {\r\n\r\n    $scope.lists = { };\r\n\r\n    $scope.insert = function() { };\r\n\r\n    $scope.delete = function(list) { };\r\n\r\n});\r\n<\/code><\/pre>\n<p>Uma pequena explica\u00e7\u00e3o sobre nossos planos aqui. Os <strong>$scope.lists<\/strong> manter\u00e1 todos os documentos do Couchbase aos quais a visualiza\u00e7\u00e3o espec\u00edfica ter\u00e1 acesso. <strong>$scope.insert<\/strong> \u00e9 claro que ser\u00e1 respons\u00e1vel por inserir dados no Couchbase Lite e <strong>$scope.delete<\/strong> ser\u00e1 respons\u00e1vel pela exclus\u00e3o dos dados.<\/p>\n<p>Portanto, come\u00e7ando com o <strong>$scope.insert<\/strong> fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.insert = function() {\r\n    $ionicPopup.prompt({\r\n        title: 'Enter a new TODO list',\r\n        inputType: 'text'\r\n    })\r\n    .then(function(result) {\r\n        var obj = {\r\n            title: result,\r\n            type: \"list\",\r\n        };\r\n        todoDatabase.createDocument(obj).then(function(result) {\r\n            \/\/ The document was saved\r\n        }, function(error) {\r\n            \/\/ There was an error saving the document\r\n        });\r\n    });\r\n};\r\n<\/code><\/pre>\n<p>Em vez de criar uma exibi\u00e7\u00e3o separada para inserir dados, estamos apenas usando um <strong>$ionicPopup<\/strong>. Com o resultado, estamos adicionando-o a um objeto e tamb\u00e9m adicionando um tipo de documento para refer\u00eancias futuras. Esse objeto \u00e9 ent\u00e3o inserido no banco de dados e, nesse momento, voc\u00ea pode optar por executar determinadas tarefas, dependendo do sucesso ou do fracasso.<\/p>\n<p>A pr\u00f3xima fun\u00e7\u00e3o com a qual devemos nos preocupar \u00e9 a <strong>$scope.delete<\/strong> fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.delete = function(list) {\r\n    var listId = list._id;\r\n    todoDatabase.deleteDocument(list._id, list._rev).then(function(result) {\r\n        todoDatabase.queryView(\"_design\/todo\", \"tasks\", {\"start_key\": listId}).then(function(result) {\r\n            for(var i = 0; i &lt; result.rows.length; i++) {\r\n                todoDatabase.deleteDocument(result.rows[i].id, result.rows[i].value.rev);\r\n            }\r\n        }, function(error) {\r\n            \/\/ There was an error querying the view\r\n        });\r\n    }, function(error) {\r\n        \/\/ There was an error deleting the list document\r\n    });\r\n};\r\n<\/code><\/pre>\n<p>Algumas coisas est\u00e3o acontecendo aqui. Primeiro, tentamos excluir o documento da lista por meio do ID e da revis\u00e3o espec\u00edficos. Se isso for bem-sucedido, consultamos nossa exibi\u00e7\u00e3o de tarefas para ver se h\u00e1 alguma tarefa que tenha como pai o documento criado recentemente. Restringimos nossa pesquisa usando o par\u00e2metro <strong>chave_inicial<\/strong> op\u00e7\u00e3o. Para cada documento de tarefa que corresponda, remova-o tamb\u00e9m para que n\u00e3o fique \u00f3rf\u00e3o devido \u00e0 exclus\u00e3o do documento principal.<\/p>\n<p>O par\u00e2metro passado para a fun\u00e7\u00e3o delete \u00e9 um objeto.<\/p>\n<p>Mas espere um pouco! Como pesquisamos os documentos a serem exibidos em nossa lista? H\u00e1 duas partes por tr\u00e1s do que estamos prestes a fazer. A primeira envolve consultar a visualiza\u00e7\u00e3o que criamos ao criar um novo banco de dados. Isso pode ser feito da seguinte forma:<\/p>\n<pre><code class=\"language-javascript\">\r\ntodoDatabase.queryView(\"_design\/todo\", \"lists\").then(function(result) {\r\n    for(var i = 0; i &lt; result.rows.length; i++) {\r\n        $scope.lists[result.rows[i].id] = result.rows[i].value;\r\n    }\r\n}, function(error) {\r\n    \/\/ There was an error querying the view\r\n});\r\n<\/code><\/pre>\n<p>Isso consultar\u00e1 a visualiza\u00e7\u00e3o das listas de tarefas quando a visualiza\u00e7\u00e3o for carregada, mas como procuramos constantemente por altera\u00e7\u00f5es? Desde que come\u00e7amos a ouvir as altera\u00e7\u00f5es no <strong>executar<\/strong> podemos optar por exibir o que ouvimos:<\/p>\n<pre><code class=\"language-javascript\">\r\n$rootScope.$on(\"couchbase:change\", function(event, args) {\r\n    for(var i = 0; i &lt; args.results.length; i++) {\r\n        if(args.results[i].hasOwnProperty(\"deleted\") &amp;&amp; args.results[i].deleted === true) {\r\n            delete $scope.lists[args.results[i].id];\r\n        } else {\r\n            if(args.results[i].id.indexOf(\"_design\") === -1) {\r\n                todoDatabase.getDocument(args.results[i].id).then(function(result) {\r\n                    if(result.type === \"list\") {\r\n                        $scope.lists[result._id] = result;\r\n                    }\r\n                });\r\n            }\r\n        }\r\n    }\r\n});\r\n<\/code><\/pre>\n<p>O c\u00f3digo acima ouvir\u00e1 o <strong>couchbase:change<\/strong> evento. Se for acionado, ele percorrer\u00e1 todas as altera\u00e7\u00f5es e determinar\u00e1 se estar\u00e1 excluindo um documento da lista ou inserindo um documento na lista. Digo upserting porque ele o inserir\u00e1 se n\u00e3o existir ou o atualizar\u00e1 se existir.<\/p>\n<h3>O controlador da lista de tarefas<\/h3>\n<p>Dentro do <strong>www\/js\/app.js<\/strong> do seu projeto, v\u00e1 em frente e crie o seguinte controlador:<\/p>\n<pre><code class=\"language-javascript\">\r\ncouchbaseApp.controller(\"TaskController\", function($scope, $rootScope, $stateParams, $ionicPopup, $ionicHistory, $couchbase) {\r\n\r\n    $scope.todoList = $stateParams.listId;\r\n\r\n    $scope.tasks = { };\r\n\r\n    $scope.insert = function() { };\r\n\r\n    $scope.delete = function(task) { };\r\n\r\n    $scope.back = function() { };\r\n\r\n});\r\n<\/code><\/pre>\n<p>Algumas coisas est\u00e3o acontecendo aqui. As <strong>$scope.todoList<\/strong> cont\u00e9m o ID da lista que foi passado da exibi\u00e7\u00e3o anterior da lista de tarefas. \u00c9 o ID da lista que foi selecionada. A vari\u00e1vel <strong>$scope.tasks<\/strong> \u00e9 semelhante ao que vimos no objeto <strong>TodoListsController<\/strong> com o <strong>$scope.lists<\/strong> objeto. Desta vez, ele estar\u00e1 apenas armazenando informa\u00e7\u00f5es sobre a tarefa. O objeto <strong>$scope.insert<\/strong> e <strong>$scope.delete<\/strong> tamb\u00e9m ser\u00e1 muito semelhante ao que vimos no <strong>TodoListsController<\/strong>. No entanto, <strong>$scope.back<\/strong> \u00e9 novo e \u00e9 respons\u00e1vel por nos levar um n\u00edvel atr\u00e1s na pilha de hist\u00f3rico quando tocamos na seta para tr\u00e1s dentro do aplicativo.<\/p>\n<p>Portanto, vamos preencher essas fun\u00e7\u00f5es com algum c\u00f3digo, come\u00e7ando com a fun\u00e7\u00e3o <strong>$scope.insert<\/strong> fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.insert = function() {\r\n    $ionicPopup.prompt({\r\n        title: 'Enter a new TODO task',\r\n        inputType: 'text'\r\n    })\r\n    .then(function(result) {\r\n        var obj = {\r\n            title: result,\r\n            type: \"task\",\r\n            list_id: $stateParams.listId,\r\n        };\r\n        todoDatabase.createDocument(obj).then(function(result) {\r\n            \/\/ The task was created successfully\r\n        }, function(error) {\r\n            \/\/ There was an error creating the task\r\n        });\r\n    });\r\n};\r\n<\/code><\/pre>\n<p>Como no outro controlador, esse tamb\u00e9m usar\u00e1 o <strong>$ionicPopup<\/strong> para inserir dados. O resultado ser\u00e1 adicionado a um objeto com um tipo e o ID da lista \u00e0 qual essa tarefa secund\u00e1ria pertence. Esse objeto \u00e9 ent\u00e3o inserido no banco de dados.<\/p>\n<p>O pr\u00f3ximo passo \u00e9 a funcionalidade de exclus\u00e3o para remover tarefas do Couchbase Lite:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.delete = function(task) {\r\n    todoDatabase.deleteDocument(task._id, task._rev);\r\n}\r\n<\/code><\/pre>\n<p>Observe como essa fun\u00e7\u00e3o de exclus\u00e3o foi muito mais f\u00e1cil em compara\u00e7\u00e3o com a exclus\u00e3o de listas. Isso ocorre porque n\u00e3o precisamos nos preocupar em deixar os dados \u00f3rf\u00e3os. Basta passar o ID da tarefa espec\u00edfica e a revis\u00e3o a ser exclu\u00edda e pronto.<\/p>\n<p>Voltando \u00e0 fun\u00e7\u00e3o back respons\u00e1vel por nos levar de volta \u00e0 lista de tarefas:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.back = function() {\r\n    $ionicHistory.goBack();\r\n}\r\n<\/code><\/pre>\n<p>N\u00e3o h\u00e1 nada de especial aqui, mas \u00e9 importante porque os dispositivos iOS n\u00e3o t\u00eam um bot\u00e3o de retorno de hardware. Menos importante para o Android, mas ainda assim \u00e9 bom ter para manter a consist\u00eancia.<\/p>\n<p>Assim como no nosso controlador de lista de tarefas, temos que nos preocupar com a apresenta\u00e7\u00e3o dos dados na tela. Na verdade, isso ser\u00e1 muito semelhante ao que vimos no outro controlador. Come\u00e7ando com a consulta de tarefas na visualiza\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-javascript\">\r\ntodoDatabase.queryView(\"_design\/todo\", \"tasks\", {\"start_key\": $stateParams.listId}).then(function(result) {\r\n    for(var i = 0; i &lt; result.rows.length; i++) {\r\n        $scope.tasks[result.rows[i].id] = {\"_id\": result.rows[i].id, \"title\": result.rows[i].value.title, \"list_id\": result.rows[i].value.list_id, \"_rev\": result.rows[i].value.rev};\r\n    }\r\n}, function(error) {\r\n    \/\/ There was an error querying the view\r\n});\r\n<\/code><\/pre>\n<p>No c\u00f3digo acima, estamos consultando a exibi\u00e7\u00e3o, mas tamb\u00e9m verificando se os resultados do documento compartilham o mesmo pai da lista de tarefas, por meio do uso do par\u00e2metro <strong>chave_inicial<\/strong>. Se os resultados corresponderem, adicione-os ao nosso objeto de tarefas.<\/p>\n<p>Quando se trata de nosso ouvinte, novamente ser\u00e1 muito semelhante ao que j\u00e1 vimos:<\/p>\n<pre><code class=\"language-javascript\">\r\n$rootScope.$on(\"couchbase:change\", function(event, args) {\r\n    for(var i = 0; i &lt; args.results.length; i++) {\r\n        if(args.results[i].hasOwnProperty(\"deleted\") &amp;&amp; args.results[i].deleted === true) {\r\n            delete $scope.tasks[args.results[i].id];\r\n        } else {\r\n            if(args.results[i].id.indexOf(\"_design\") === -1) {\r\n                todoDatabase.getDocument(args.results[i].id).then(function(result) {\r\n                    if(result.type === \"task\") {\r\n                        $scope.tasks[result._id] = result;\r\n                    }\r\n                });\r\n            }\r\n        }\r\n    }\r\n});\r\n<\/code><\/pre>\n<p>Em vez de filtrar por listas, estamos filtrando por tarefas.<\/p>\n<h2>Cria\u00e7\u00e3o das exibi\u00e7\u00f5es da interface do usu\u00e1rio<\/h2>\n<p>Haver\u00e1 duas visualiza\u00e7\u00f5es nesse aplicativo:<\/p>\n<ul>\n<li>Uma visualiza\u00e7\u00e3o para criar, visualizar e excluir listas<\/li>\n<li>Uma visualiza\u00e7\u00e3o para criar, visualizar e excluir tarefas<\/li>\n<\/ul>\n<p>O layout e a funcionalidade entre os dois ser\u00e3o praticamente id\u00eanticos. Se um <strong>www\/templates<\/strong> ainda n\u00e3o existe em seu projeto, v\u00e1 em frente e crie-o.<\/p>\n<h3>A visualiza\u00e7\u00e3o da lista Todo<\/h3>\n<p>Na se\u00e7\u00e3o <strong>www\/templates<\/strong>, crie um novo arquivo chamado <strong>todolists.html<\/strong> e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n    \r\n        <button class=\"right button button-icon icon ion-plus\"><\/button>\r\n    \r\n    \r\n        \r\n            \r\n                {{value.title}}\r\n                \r\n            \r\n        \r\n    \r\n\r\n<\/code><\/pre>\n<p>H\u00e1 alguns aspectos a serem observados sobre o que voc\u00ea v\u00ea acima. Em primeiro lugar, haver\u00e1 um bot\u00e3o de navega\u00e7\u00e3o com um \u00edcone de adi\u00e7\u00e3o que servir\u00e1 para os usu\u00e1rios criarem novas listas. Quando clicado, ele chamar\u00e1 a fun\u00e7\u00e3o <strong>inserir()<\/strong> que criamos em nosso controlador. A pr\u00f3xima coisa a ser observada \u00e9 como escolhemos criar nosso m\u00e9todo <strong>lista de \u00edons<\/strong>. Optamos por dar a ele recursos de deslizamento semelhantes aos dos aplicativos de e-mail comuns para iOS e Android. Isso vem em combina\u00e7\u00e3o com o <strong>bot\u00e3o de op\u00e7\u00e3o i\u00f4nica<\/strong> que usaremos para excluir listas.<\/p>\n<p>O ponto final dessa vis\u00e3o \u00e9 o <strong>ng-repeat<\/strong> que estamos usando para percorrer todas as listas. Quando clicarmos em um item da lista, o ID da lista ser\u00e1 passado por meio do par\u00e2metro <strong>ui-sref<\/strong> ligar.<\/p>\n<h3>A visualiza\u00e7\u00e3o da lista de tarefas<\/h3>\n<p>Na se\u00e7\u00e3o <strong>www\/templates<\/strong>, crie um novo arquivo chamado <strong>tasks.html<\/strong> e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n    \r\n        <button class=\"left button button-icon icon ion-arrow-left-c\"><\/button>\r\n    \r\n    \r\n        <button class=\"right button button-icon icon ion-plus\"><\/button>\r\n    \r\n    \r\n        \r\n            \r\n                {{value.title}}\r\n                \r\n            \r\n        \r\n    \r\n\r\n<\/code><\/pre>\n<p>Novamente, isso \u00e9 muito semelhante \u00e0 exibi\u00e7\u00e3o da lista de tarefas. No entanto, h\u00e1 duas grandes diferen\u00e7as entre as duas. Primeiro, observe que essa visualiza\u00e7\u00e3o tem um bot\u00e3o esquerdo com um \u00edcone de seta que chama nosso <strong>back()<\/strong> m\u00e9todo. Agora temos dois bot\u00f5es de menu nessa tela. Em segundo lugar, observe o bot\u00e3o <strong>ng-if<\/strong> que existe na instru\u00e7\u00e3o de repeti\u00e7\u00e3o <strong>item i\u00f4nico<\/strong> tag. S\u00f3 queremos mostrar a tarefa se ela tiver um pai que corresponda \u00e0 lista que escolhemos.<\/p>\n<h2>Testando seu projeto<\/h2>\n<h3>Testes para Android<\/h3>\n<p>Com um dispositivo conectado ou um simulador em execu\u00e7\u00e3o, no prompt de comando ou no terminal, execute os dois comandos a seguir para criar e instalar o arquivo APK:<\/p>\n<pre><code class=\"language-bash\">\r\nionic build android\r\nadb install -r platforms\/android\/build\/outputs\/apk\/android-debug.apk\r\n<\/code><\/pre>\n<h3>Testes para iOS<\/h3>\n<p>H\u00e1 duas boas maneiras de fazer isso. Voc\u00ea 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:<\/p>\n<pre><code class=\"language-bash\">\r\nionic build ios\r\n<\/code><\/pre>\n<p>Em seguida, abra o arquivo <strong>plataforma\/ios\/<\/strong> e inicie o arquivo de projeto do Xcode.<\/p>\n<p>Se voc\u00ea instalou o pacote do Node Package Manager (NPM) <strong>ios-sim<\/strong>Voc\u00ea pode fazer o seguinte:<\/p>\n<pre><code class=\"language-bash\">\r\nionic build ios\r\nionic emulate ios\r\n<\/code><\/pre>\n<h3>Solu\u00e7\u00e3o de problemas de depend\u00eancia do Gradle<\/h3>\n<p>No momento da compila\u00e7\u00e3o para Android, voc\u00ea pode se deparar com a seguinte mensagem de erro:<\/p>\n<pre>Error: duplicate files during packaging of APK<\/pre>\n<p>Para resolver isso, voc\u00ea deve estender o arquivo de compila\u00e7\u00e3o do Gradle para Android, conforme descrito na se\u00e7\u00e3o <a href=\"https:\/\/cordova.apache.org\/docs\/en\/5.0.0\/guide_platforms_android_tools.md.html\">Documenta\u00e7\u00e3o oficial do Apache Cordova<\/a>.<\/p>\n<p>Criar <strong>platforms\/android\/build-extras.gradle<\/strong> em seu projeto e adicione o seguinte:<\/p>\n<pre>android {\r\n    packagingOptions {\r\n        exclude 'META-INF\/ASL2.0'\r\n        exclude 'META-INF\/LICENSE'\r\n        exclude 'META-INF\/NOTICE'\r\n    }\r\n}<\/pre>\n<h2>Conclus\u00e3o<\/h2>\n<p>Usando o plug-in PhoneGap do Couchbase, criamos um aplicativo m\u00f3vel de lista de tarefas que faz todas as transa\u00e7\u00f5es localmente. Usamos o AngularJS para nos conectarmos facilmente aos pontos de extremidade RESTful que o Couchbase Lite exp\u00f5e.<\/p>\n<p>O <a href=\"https:\/\/www.couchbase.com\/blog\/pt\/using-couchbase-in-your-ionic-framework-application-part-2\/\">Pr\u00f3ximo tutorial sobre o Ionic Framework nesta s\u00e9rie<\/a> explicar\u00e1 como replicar dados entre o dispositivo local e o Couchbase Sync Gateway para que os dados possam ser compartilhados entre dispositivos e plataformas.<\/p>\n<p>Essa s\u00e9rie pode ser baixada na \u00edntegra no site <a href=\"https:\/\/github.com\/couchbaselabs\/todolite-ionic\">GitHub do Couchbase Labs<\/a> p\u00e1gina.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ionic Framework has recently become one of the hottest mobile frameworks around. It makes it incredibly easy to write great user interfaces for mobile applications. However, part of the challenge is also managing data, fetching from the back-end server and [&hellip;]<\/p>","protected":false},"author":63,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2370,7667],"tags":[1535,1534,1536],"ppma_author":[9032],"class_list":["post-2077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-couchbase-lite","tag-apache-cordova","tag-ionic-framework","tag-ios"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Couchbase in Your Ionic Framework Application Part 1<\/title>\n<meta name=\"description\" content=\"How to include Couchbase Lite in Ionic project and use the Ionic UI components to display the data onscreen,run the application on iOS\/Android simulator.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/pt\/using-couchbase-in-your-ionic-framework-application-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Couchbase in Your Ionic Framework Application Part 1\" \/>\n<meta property=\"og:description\" content=\"How to include Couchbase Lite in Ionic project and use the Ionic UI components to display the data onscreen,run the application on iOS\/Android simulator.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/pt\/using-couchbase-in-your-ionic-framework-application-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-02T16:42:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T06:47:43+00:00\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Using Couchbase in Your Ionic Framework Application Part 1\",\"datePublished\":\"2015-09-02T16:42:11+00:00\",\"dateModified\":\"2025-06-14T06:47:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\"},\"wordCount\":2246,\"commentCount\":104,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"keywords\":[\"apache cordova\",\"ionic framework\",\"ios\"],\"articleSection\":[\"Android\",\"Couchbase Lite\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\",\"name\":\"Using Couchbase in Your Ionic Framework Application Part 1\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2015-09-02T16:42:11+00:00\",\"dateModified\":\"2025-06-14T06:47:43+00:00\",\"description\":\"How to include Couchbase Lite in Ionic project and use the Ionic UI components to display the data onscreen,run the application on iOS\/Android simulator.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Couchbase in Your Ionic Framework Application Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.\",\"sameAs\":[\"https:\/\/www.thepolyglotdeveloper.com\",\"https:\/\/www.facebook.com\/thepolyglotdeveloper\",\"https:\/\/x.com\/nraboy\"],\"url\":\"https:\/\/www.couchbase.com\/blog\/pt\/author\/nic-raboy-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Usando o Couchbase em seu aplicativo Ionic Framework - Parte 1","description":"Como incluir o Couchbase Lite no projeto Ionic e usar os componentes Ionic UI para exibir os dados na tela, executar o aplicativo no simulador iOS\/Android.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/pt\/using-couchbase-in-your-ionic-framework-application-part-1\/","og_locale":"pt_BR","og_type":"article","og_title":"Using Couchbase in Your Ionic Framework Application Part 1","og_description":"How to include Couchbase Lite in Ionic project and use the Ionic UI components to display the data onscreen,run the application on iOS\/Android simulator.","og_url":"https:\/\/www.couchbase.com\/blog\/pt\/using-couchbase-in-your-ionic-framework-application-part-1\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2015-09-02T16:42:11+00:00","article_modified_time":"2025-06-14T06:47:43+00:00","author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Using Couchbase in Your Ionic Framework Application Part 1","datePublished":"2015-09-02T16:42:11+00:00","dateModified":"2025-06-14T06:47:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/"},"wordCount":2246,"commentCount":104,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["apache cordova","ionic framework","ios"],"articleSection":["Android","Couchbase Lite"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/","url":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/","name":"Usando o Couchbase em seu aplicativo Ionic Framework - Parte 1","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2015-09-02T16:42:11+00:00","dateModified":"2025-06-14T06:47:43+00:00","description":"Como incluir o Couchbase Lite no projeto Ionic e usar os componentes Ionic UI para exibir os dados na tela, executar o aplicativo no simulador iOS\/Android.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using Couchbase in Your Ionic Framework Application Part 1"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"Blog do Couchbase","description":"Couchbase, o banco de dados NoSQL","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"Blog do Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, defensor dos desenvolvedores, Couchbase","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"Nic Raboy \u00e9 um defensor das modernas tecnologias de desenvolvimento m\u00f3vel e da Web. Ele tem experi\u00eancia em Java, JavaScript, Golang e uma variedade de estruturas, como Angular, NativeScript e Apache Cordova. Nic escreve sobre suas experi\u00eancias de desenvolvimento relacionadas a tornar o desenvolvimento m\u00f3vel e da Web mais f\u00e1cil de entender.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/pt\/author\/nic-raboy-2\/"}]}},"authors":[{"term_id":9032,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","author_category":"","last_name":"Raboy","first_name":"Nic","job_title":"","user_url":"https:\/\/www.thepolyglotdeveloper.com","description":"Nic Raboy \u00e9 um defensor das modernas tecnologias de desenvolvimento m\u00f3vel e da Web. Ele tem experi\u00eancia em Java, JavaScript, Golang e uma variedade de estruturas, como Angular, NativeScript e Apache Cordova. Nic escreve sobre suas experi\u00eancias de desenvolvimento relacionadas a tornar o desenvolvimento m\u00f3vel e da Web mais f\u00e1cil de entender."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=2077"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=2077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=2077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=2077"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/ppma_author?post=2077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}