{"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\">Ionic Framework<\/a> 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 saving the data locally for when the device is offline.<\/p>\n<p>Couchbase Mobile handles this for you and with the Apache Cordova plugin, it&#8217;s a breeze!<\/p>\n<p>In this tutorial, you will learn how to:<\/p>\n<ul>\n<li>Include Couchbase Lite in your Ionic project.<\/li>\n<li>Use the Ionic UI components to display the data onscreen.<\/li>\n<li>Run the application on the iOS \/ Android simulator.<\/li>\n<\/ul>\n<h2>The Prerequisites<\/h2>\n<ul>\n<li>Ionic Framework 1.0+<\/li>\n<li>Apache Cordova 5.0+<\/li>\n<li>The Android SDK if building for Android<\/li>\n<li>A Mac with Xcode installed if building for iOS<\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>Before we start coding it is important we create a new project and configure all necessary plugins and components. From the Command Prompt (Windows) or Terminal (Mac \/ Linux), run the following to create a new Ionic project:<\/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>Remember, if you&#8217;re not using a Mac, you cannot add and build for the iOS platform.<\/p>\n<p>For this project to be successful, there are a few <a href=\"https:\/\/cordova.apache.org\/\">Apache Cordova<\/a> plugins that must be installed. With the Ionic project as your current working directory in the Command Prompt or Terminal, run the following commands:<\/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>This will install the Apache Cordova whitelist plugin that will allow us to communicate with external services and the Couchbase PhoneGap plugin that will allow for using Couchbase in our application.<\/p>\n<h2>Including the AngularJS RESTful Library<\/h2>\n<p>Using Couchbase Lite happens through RESTful APIs exposed through the Apache Cordova plugin. A full list of these API endpoints can be found in the <a href=\"https:\/\/developer.couchbase.com\/mobile\/develop\/references\/couchbase-lite\/rest-api\/index.html\">official Couchbase documentation<\/a>. However, there is an <a href=\"https:\/\/angularjs.org\/\">AngularJS<\/a> wrapper library available to make calling these endpoints a lot easier.<\/p>\n<p>Download the latest <a href=\"https:\/\/github.com\/couchbaselabs\/ng-couchbase-lite\">ng-couchbase-lite<\/a> release found on GitHub and include the <strong>ng-couchbase-lite.min.js<\/strong> file found in the <strong>dist<\/strong> directory into your project&#8217;s <strong>www\/js\/<\/strong> folder.<\/p>\n<p>With the file included in your project, open the <strong>index.html<\/strong> file and include the JavaScript file like so:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n\r\n<\/code><\/pre>\n<p>Notice that the script was included above the project&#8217;s <strong>www\/js\/app.js<\/strong>.<\/p>\n<p>The final thing needing to be done before ng-couchbase-lite can be used is it needs to be injected into AngularJS. This can be done by opening the project&#8217;s <strong>www\/js\/app.js<\/strong> file and changing the <strong>angular.module<\/strong> to look like the following:<\/p>\n<pre><code class=\"language-javascript\">\r\nvar couchbaseApp = angular.module(\"starter\", [\"ionic\", \"ngCouchbaseLite\"]);\r\n<\/code><\/pre>\n<p>The AngularJS wrapper can now be used through the project.<\/p>\n<h2>Polishing the Index File<\/h2>\n<p>A few tweaks need to be made to the project&#8217;s <strong>www\/index.html<\/strong> to take full advantage of this tutorial. The first of which is adding some meta information to compliment the whitelisting plugin. It is more necessary for Android than iOS. Near the other <strong>meta<\/strong> tags, include the following:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n<\/code><\/pre>\n<p>This just tells your project that you want to work with certain scripts.<\/p>\n<p>The other tweak you want to do is inside your <strong>body<\/strong> tags. Replace everything inside the body with the following:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n    \r\n    \r\n\r\n<\/code><\/pre>\n<p>You should be good to go at this point<\/p>\n<h2>Using a Global Database Variable<\/h2>\n<p>To save us the trouble of having to open the database on every view, we&#8217;re just going to create a variable global to the project. In the <strong>www\/js\/app.js<\/strong> file below <strong>angular.module<\/strong> include the following:<\/p>\n<pre><code class=\"language-javascript\">\r\nvar todoDatabase = null;\r\n<\/code><\/pre>\n<p>This will get set later when we initialize the database.<\/p>\n<h2>Configuring the UI Router<\/h2>\n<p>Ionic Framework uses the AngularJS UI-Router, so we&#8217;re going to leverage it when handling our views and controllers. Inside the project&#8217;s <strong>www\/js\/app.js<\/strong> file, add the following code:<\/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>We have two routes, one to our lists view and one to our tasks view. The tasks view however requires an extra parameter which we&#8217;re identifying as <strong>listId<\/strong>. This is because when we navigate to the tasks view we want to provide the parent list item that the task belongs to. It will help us for querying our data. Ignore the controllers for now, because we&#8217;re going to create them later.<\/p>\n<h2>Initializing the Database and Views<\/h2>\n<p>The first thing to do when using the Couchbase PhoneGap plugin is to create a database. Then, you can register views to query the documents that will reside in the database. Couchbase Views are map\/reduce queries that build the index incrementally as new documents are saved to the database. They are completely different to user interface Views!<\/p>\n<p>Inside your project&#8217;s <strong>www\/js\/app.js<\/strong> file, we&#8217;re going to include a few things in the AngularJS <strong>run<\/strong> method:<\/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>Here&#8217;s what&#8217;s happening step by step:<\/p>\n<ol>\n<li>You first check to make sure the plugin exists (installed and running). If it exists, then create a new database if the desired database does not already exist. If the database creation is successful, we&#8217;re going to create two views, one for getting the todo lists, and one for getting the tasks. For this tutorial, the database we&#8217;re creating is called <strong>todo<\/strong>.<\/li>\n<li>We&#8217;re creating a view called <strong>tasks<\/strong> and <strong>lists<\/strong>, both inside of the <strong>_design\/todo<\/strong> design document. In regards to the Couchbase views. The <strong>lists<\/strong> view will return all documents that have a <strong>doc.type<\/strong> of <strong>list<\/strong> and that have a <strong>title<\/strong> property. However, only the title and document revision are returned with the document id. This is to keep things light-weight. The <strong>tasks<\/strong> view will return all documents that have a <strong>doc.type<\/strong> of <strong>task<\/strong> as well as some <strong>title<\/strong> property and parent <strong>list_id<\/strong> property. In this particular view, only the title, document revision, and list id are returned with the document id.<\/li>\n<\/ol>\n<h2>Creating the Controllers<\/h2>\n<h3>The Todo List Controller<\/h3>\n<p>Inside the <strong>www\/js\/app.js<\/strong> file of your project, go ahead and create the following controller:<\/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>A little explanation on our plans here. The <strong>$scope.lists<\/strong> object will hold all Couchbase documents that the particular view will have access to. <strong>$scope.insert<\/strong> of course will be responsible for inserting data into Couchbase Lite and <strong>$scope.delete<\/strong> will be responsible for deleting data.<\/p>\n<p>So starting with the <strong>$scope.insert<\/strong> function:<\/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>Instead of creating a separate view for inserting data we&#8217;re just making use of an <strong>$ionicPopup<\/strong>. With the result we are adding it to an object and also adding a document type for future references. This object is then inserted into the database at which point you can choose to perform certain tasks depending on its success or failure.<\/p>\n<p>The next function to worry about is the <strong>$scope.delete<\/strong> function:<\/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>A few things are happening here. First we attempt to delete the list document via the particular id and revision. If that is successful we then query our task view for any tasks that had a parent of our recently created document. We narrow our search by making use of the <strong>start_key<\/strong> option. For every task document that does match, remove it at well so that way it is not orphaned by the delete of the parent.<\/p>\n<p>The parameter passed to the delete function is an object.<\/p>\n<p>Wait a second though! How do we search for documents to display in our list? There are two parts behind what we&#8217;re about to do. The first involves quering the view that we created when making a fresh database. This can be done like the following:<\/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>That will query the view for todo lists when the view loads, but how do we constantly look for changes? Since we started listening for changes in the <strong>run<\/strong> method, we can choose to display what we&#8217;ve heard:<\/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>The above code will listen for the <strong>couchbase:change<\/strong> event. If it is triggered, it will loop through all the changes and determine whether it will be deleting a document from the list or upserting a document to the list. I say upserting because it will insert it if it doesn&#8217;t exist or update it if it does.<\/p>\n<h3>The Task List Controller<\/h3>\n<p>Inside the <strong>www\/js\/app.js<\/strong> file of your project, go ahead and create the following controller:<\/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>A few things are happening here. The <strong>$scope.todoList<\/strong> variable holds the list id that was passed in from the previous todo list view. It is the id of the list that was selected. The <strong>$scope.tasks<\/strong> object is similar to what we saw in the <strong>TodoListsController<\/strong> with the <strong>$scope.lists<\/strong> object. This time it will just be storing task information. The <strong>$scope.insert<\/strong> and <strong>$scope.delete<\/strong> will also be very similar to what we saw in the <strong>TodoListsController<\/strong>. However, <strong>$scope.back<\/strong> is new and is responsible for taking us one level back in the history stack when tapping on the back arrow inside the application.<\/p>\n<p>So lets fill these functions with some code, starting with the <strong>$scope.insert<\/strong> function:<\/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>Like in the other controller, this will also be using the <strong>$ionicPopup<\/strong> for entering data. The result will be added to an object with a type and the id of the list that this child task belongs to. This object is then inserted into the database.<\/p>\n<p>Next up is the delete functionality for removing tasks from 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>Notice how much easier this delete function was in comparison to deleting lists. This is because we don&#8217;t have to worry about orphaning data. Just pass in the particular task id and revision to delete and then it is done.<\/p>\n<p>Going back to the back function responsible for taking us back to the todo list:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.back = function() {\r\n    $ionicHistory.goBack();\r\n}\r\n<\/code><\/pre>\n<p>Nothing special here, but it is important because iOS devices don&#8217;t have a hardware back button. Less important for Android, but still nice to have for consistency.<\/p>\n<p>Just like with our todo list controller, we have to worry about presenting the data to the screen. It will in fact be very similar to what we saw in the other controller. Starting with querying the view for tasks:<\/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>In the above code we are querying the view, but also checking to make sure that the document results share the same todo list parent, through the use of the <strong>start_key<\/strong>. If the results match, then add them to our tasks object.<\/p>\n<p>When it comes to our listener, again it will be very similar to what we&#8217;ve already seen:<\/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>Instead of filtering for lists, we&#8217;re instead filtering for tasks.<\/p>\n<h2>Creating the UI Views<\/h2>\n<p>There will be two views in this application:<\/p>\n<ul>\n<li>A view for creating, viewing, and deleting lists<\/li>\n<li>A view for creating, viewing, and deleting tasks<\/li>\n<\/ul>\n<p>The layout and functionality between the two will be near identical. If a <strong>www\/templates<\/strong> directory doesn&#8217;t already exist in your project, go ahead and create it.<\/p>\n<h3>The Todo List View<\/h3>\n<p>In your project&#8217;s <strong>www\/templates<\/strong>, create a new file called <strong>todolists.html<\/strong> and add the following code:<\/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>There are a few things to note about what you see above. First off, there will be a navigation button with a plus icon which will be how users create new lists. When clicked, it will call the <strong>insert()<\/strong> method that we created in our controller. The next thing to notice is how we&#8217;ve chosen to create our <strong>ion-list<\/strong>. We&#8217;ve chosen to give it swipe features similar to common mail apps for iOS and Android. This comes in combination with the <strong>ion-option-button<\/strong> that we&#8217;ll use for deleting lists.<\/p>\n<p>The final point in this view is the <strong>ng-repeat<\/strong> that we&#8217;re using to loop through all lists. When we click on a list item, the list id will be passed via the <strong>ui-sref<\/strong> call.<\/p>\n<h3>The Task List View<\/h3>\n<p>In your project&#8217;s <strong>www\/templates<\/strong>, create a new file called <strong>tasks.html<\/strong> and add the following code:<\/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>Again, this is very similar to the todo list view. There are two major differences between the two, however. First, notice that this view has a left button with an arrow icon that calls our <strong>back()<\/strong> method. We now have two menu buttons on this screen. Second, notice the <strong>ng-if<\/strong> statement that exists in the repeating <strong>ion-item<\/strong> tag. We only want to show the task if it has a parent that matches the list that we&#8217;ve chosen.<\/p>\n<h2>Testing Your Project<\/h2>\n<h3>Testing for Android<\/h3>\n<p>With a device connected or a simulator running, from the Command Prompt or Terminal, run the following two commands to build and install the APK file:<\/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>Testing for iOS<\/h3>\n<p>There are two good ways to do this. You can either build the project and open it with Xcode, or you can build and emulate the application without launching Xcode. The first can be done like so:<\/p>\n<pre><code class=\"language-bash\">\r\nionic build ios\r\n<\/code><\/pre>\n<p>Then open the project&#8217;s <strong>platform\/ios\/<\/strong> directory and launch the Xcode project file.<\/p>\n<p>If you&#8217;ve installed the Node Package Manager (NPM) package <strong>ios-sim<\/strong>, you can do the following:<\/p>\n<pre><code class=\"language-bash\">\r\nionic build ios\r\nionic emulate ios\r\n<\/code><\/pre>\n<h3>Solving Any Gradle Dependency Problems<\/h3>\n<p>At compile time for Android, you may run into the following error message:<\/p>\n<pre>Error: duplicate files during packaging of APK<\/pre>\n<p>To resolve this, you must extend the Gradle build file for Android as outlined in the <a href=\"https:\/\/cordova.apache.org\/docs\/en\/5.0.0\/guide_platforms_android_tools.md.html\">official Apache Cordova documentation<\/a>.<\/p>\n<p>Create <strong>platforms\/android\/build-extras.gradle<\/strong> in your project and add the following:<\/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>Conclusion<\/h2>\n<p>Using the Couchbase PhoneGap plugin, we&#8217;ve created a mobile todo-list application that does all transactions locally. We used AngularJS to easily connect to the RESTful endpoints that Couchbase Lite exposes.<\/p>\n<p>The <a href=\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-2\/\">next Ionic Framework tutorial in this series<\/a> will go over how to replicate data between the local device and Couchbase Sync Gateway so data can be shared between devices and platforms.<\/p>\n<p>This series can be downloaded in full from the <a href=\"https:\/\/github.com\/couchbaselabs\/todolite-ionic\">Couchbase Labs GitHub<\/a> page.<\/p>\n","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>\n","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"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\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:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354\",\"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:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354","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\/"}]}},"acf":[],"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","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_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}]}}