{"id":2096,"date":"2015-11-11T15:00:00","date_gmt":"2015-11-11T15:00:00","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=2096"},"modified":"2023-06-27T07:17:25","modified_gmt":"2023-06-27T14:17:25","slug":"cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/","title":{"rendered":"Armazenamento e sincroniza\u00e7\u00e3o entre plataformas com a estrutura Ionic, o Couchbase e o PouchDB"},"content":{"rendered":"<p>Ionic Framework is still one of the leaders in hybrid mobile application development. It allows you to create Android and iOS applications<br \/>\nusing only HTML, JavaScript, and CSS.<\/p>\n<p>Previously I wrote about how to use <a href=\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\">Couchbase in<br \/>\nan Ionic Framework mobile Android and iOS application<\/a>, but it made use of Couchbase<br \/>\nLite as its embedded NoSQL database. This time around we&#8217;re going to look at replacing Couchbase Lite with PouchDB. Should you use one<br \/>\nmethod over the other? No, it comes down to preference in the end.<\/p>\n<p>If you haven&#8217;t already seen my post regarding <a href=\"https:\/\/www.couchbase.com\/blog\/sync-with-couchbase-using-only-angularjs-and-pouchdb\/\">PouchDB<br \/>\nand AngularJS with Couchbase<\/a>, I encourage you to have a look as this tutorial will be using many of the same concepts and code.<\/p>\n<h2>What We&#8217;ll Need<\/h2>\n<p>There are a few requirements to the application we&#8217;re going to build. We&#8217;ll see how to obtain them along the way, but here is a<br \/>\ntaste so you know what you&#8217;re getting yourself into.<\/p>\n<ul>\n<li>Couchbase Sync Gateway<\/li>\n<li>PouchDB 4<\/li>\n<li>Ionic Framework 1<\/li>\n<\/ul>\n<h3>Getting the Couchbase Sync Gateway<\/h3>\n<p>This project will require the Couchbase Sync Gateway in order to succeed. If you&#8217;re unfamiliar, the Couchbase Sync Gateway is a<br \/>\nmiddleman service that handles processing data between the local application (your Ionic Framework application) and the Couchbase Server. We<br \/>\nwon&#8217;t be using Couchbase Server in this example so the Sync Gateway will act as our in-memory storage solution in the cloud.<\/p>\n<p>The Couchbase Sync Gateway can be found via the <a href=\"https:\/\/www.couchbase.com\/nosql-databases\/downloads\/\">Couchbase downloads section<\/a>.<\/p>\n<h2>Creating Our Ionic Framework Project<\/h2>\n<p>Before going any further it is good to note that if you&#8217;re not using a Mac, you cannot add and build for the iOS platform. Windows, Mac,<br \/>\nand Linux computers can build for Android, but only Mac can build for iOS.<\/p>\n<p>From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following command to create a new Ionic Framework project:<\/p>\n<pre><code class=\"language-bash\">\r\nionic start PouchProject blank\r\ncd PouchProject\r\nionic platform add android\r\nionic platform add ios\r\n<\/code><\/pre>\n<p>Our blank template project is now ready for working with.<\/p>\n<h3>Including The Dependencies<\/h3>\n<p>If you haven&#8217;t already, <a href=\"https:\/\/www.pouchdb.com\/\">download PouchDB 4<\/a> and make note of the <strong>min.js<\/strong> file as<br \/>\nwe&#8217;ll be using it through the project. Copy the<br \/>\nPouchDB <strong>min.js<\/strong> file into your Ionic project&#8217;s <strong>www\/js<\/strong> directory.<\/p>\n<p>With the file in place, open your project&#8217;s <strong>www\/index.html<\/strong> file and include the following:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n<\/code><\/pre>\n<p>This script line should appear above the <strong>app.js<\/strong> include line and the version information should match that of your actual<br \/>\nfile rather than the version I included here.<\/p>\n<h3>Modifying The Index File<\/h3>\n<p>Before we jump into the AngularJS code we need to make a final revision to the project&#8217;s <strong>www\/index.html<\/strong> file. Open it and<br \/>\nreplace the tags with the following:<\/p>\n<pre><code class=\"language-html\">\r\n\r\n    \r\n        \r\n        \r\n    \r\n\r\n<\/code><\/pre>\n<p>Because we&#8217;re using the AngularJS UI-Router that ships with Ionic Framework, we only need a basic <strong>www\/index.html<\/strong> file.<\/p>\n<h3>Creating Our PouchDB AngularJS Service<\/h3>\n<p>Before we start using PouchDB, we need to make a wrapper for it so it fits nicely with AngularJS and Ionic Framework. Out of the box PouchDB<br \/>\nis a vanilla JavaScript library, so it isn&#8217;t necessarily the easiest to use when it comes to AngularJS.<\/p>\n<p>Inside your project&#8217;s <strong>www\/js\/app.js<\/strong> file, include the following service code:<\/p>\n<pre><code class=\"language-javascript\">\r\n.service(\"$pouchDB\", [\"$rootScope\", \"$q\", function($rootScope, $q) {\r\n\r\n    var database;\r\n    var changeListener;\r\n\r\n    this.setDatabase = function(databaseName) {\r\n        database = new PouchDB(databaseName);\r\n    }\r\n\r\n    this.startListening = function() {\r\n        changeListener = database.changes({\r\n            live: true,\r\n            include_docs: true\r\n        }).on(\"change\", function(change) {\r\n            if(!change.deleted) {\r\n                $rootScope.$broadcast(\"$pouchDB:change\", change);\r\n            } else {\r\n                $rootScope.$broadcast(\"$pouchDB:delete\", change);\r\n            }\r\n        });\r\n    }\r\n\r\n    this.stopListening = function() {\r\n        changeListener.cancel();\r\n    }\r\n\r\n    this.sync = function(remoteDatabase) {\r\n        database.sync(remoteDatabase, {live: true, retry: true});\r\n    }\r\n\r\n    this.save = function(jsonDocument) {\r\n        var deferred = $q.defer();\r\n        if(!jsonDocument._id) {\r\n            database.post(jsonDocument).then(function(response) {\r\n                deferred.resolve(response);\r\n            }).catch(function(error) {\r\n                deferred.reject(error);\r\n            });\r\n        } else {\r\n            database.put(jsonDocument).then(function(response) {\r\n                deferred.resolve(response);\r\n            }).catch(function(error) {\r\n                deferred.reject(error);\r\n            });\r\n        }\r\n        return deferred.promise;\r\n    }\r\n\r\n    this.delete = function(documentId, documentRevision) {\r\n        return database.remove(documentId, documentRevision);\r\n    }\r\n\r\n    this.get = function(documentId) {\r\n        return database.get(documentId);\r\n    }\r\n\r\n    this.destroy = function() {\r\n        database.destroy();\r\n    }\r\n\r\n}])\r\n<\/code><\/pre>\n<p>You might be thinking that code looks familiar. Well, it is the exact code I used in<br \/>\nthe <a href=\"https:\/\/www.couchbase.com\/blog\/sync-with-couchbase-using-only-angularjs-and-pouchdb\/\">previous PouchDB example for AngularJS<\/a>.<br \/>\nNow we can easily use PouchDB in our project.<\/p>\n<h3>Creating A Local Database And Start Syncing<\/h3>\n<p>The goal here is to create a local database when our application starts (if it doesn&#8217;t already exist) and then start syncing with the<br \/>\nCouchbase Sync Gateway. This can be accomplished in the AngularJS <strong>run()<\/strong> function of our <strong>www\/js\/app.js<\/strong><br \/>\nfile:<\/p>\n<pre><code class=\"language-javascript\">\r\n.run(function($ionicPlatform, $pouchDB) {\r\n    $ionicPlatform.ready(function() {\r\n        if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {\r\n            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\r\n        }\r\n        if(window.StatusBar) {\r\n            StatusBar.styleDefault();\r\n        }\r\n    });\r\n    $pouchDB.setDatabase(\"nraboy-test\");\r\n    if(ionic.Platform.isAndroid()) {\r\n        $pouchDB.sync(\"https:\/\/192.168.57.1:4984\/test-database\");\r\n    } else {\r\n        $pouchDB.sync(\"https:\/\/localhost:4984\/test-database\");\r\n    }\r\n})\r\n<\/code><\/pre>\n<p>The IP addresses I used might vary for you in terms of simulators, but for production they will likely match for both iOS and<br \/>\nAndroid.<\/p>\n<h3>Designing A Controller For Your Views<\/h3>\n<p>We haven&#8217;t created our views yet, but let&#8217;s go ahead and create the controller logic for them. Open your project&#8217;s<br \/>\n<strong>www\/js\/app.js<\/strong> file and include the following controller:<\/p>\n<pre><code class=\"language-javascript\">\r\n.controller(\"MainController\", function($scope, $rootScope, $state, $stateParams, $ionicHistory, $pouchDB) {\r\n\r\n    $scope.items = {};\r\n\r\n    $scope.save = function(firstname, lastname, email) { }\r\n\r\n    $scope.delete = function(id, rev) { }\r\n\r\n    $scope.back = function() { }\r\n\r\n})\r\n<\/code><\/pre>\n<p>As of right now we have a basic controller. We know we&#8217;ll be saving and deleting items which is why we&#8217;ve defined a function for such<br \/>\ntasks. We also have a function called <strong>back()<\/strong> that will pop an item (go back) in the history stack.<\/p>\n<p>Let&#8217;s go bottom up and start with the <strong>back()<\/strong> function. It should contain the following code:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.back = function() {\r\n    $ionicHistory.goBack();\r\n}\r\n<\/code><\/pre>\n<p>When it comes to deleting items from the database we&#8217;ll need to provide a particular document id to delete as well as the particular revision<br \/>\nwe wish to delete. This will all be passed from the views, but the logic will be as follows:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.delete = function(id, rev) {\r\n    $pouchDB.delete(id, rev);\r\n}\r\n<\/code><\/pre>\n<p>The <strong>delete(id, rev)<\/strong> function makes a call to the PouchDB service that we made.<\/p>\n<p>This leaves us with the <strong>save()<\/strong> function. Based on the simplicity of our application we&#8217;ll only be saving three data<br \/>\nproperties, but it can easily be changed should you need to. Inside your controller, make the <strong>save()<\/strong> function like so:<\/p>\n<pre><code class=\"language-javascript\">\r\n$scope.save = function(firstname, lastname, email) {\r\n    var jsonDocument = {\r\n        \"firstname\": firstname,\r\n        \"lastname\": lastname,\r\n        \"email\": email\r\n    };\r\n    if($stateParams.documentId) {\r\n        jsonDocument[\"_id\"] = $stateParams.documentId;\r\n        jsonDocument[\"_rev\"] = $stateParams.documentRevision;\r\n    }\r\n    $pouchDB.save(jsonDocument).then(function(response) {\r\n        $state.go(\"list\");\r\n    }, function(error) {\r\n        console.log(\"ERROR -&gt; \" + error);\r\n    });\r\n}\r\n<\/code><\/pre>\n<p>This function does two things. It will prepare an insert or it will prepare an update should a document id and document revision<br \/>\nbe available.<\/p>\n<p>We&#8217;re not quite done yet though. Although we finished all our functions, we still need to handle listening for<br \/>\nchanges. When we call <strong>$pouchDB.startListening();<\/strong> in our controller, our PouchDB service will start making use of the<br \/>\nAngularJS <strong>$broadcast<\/strong>. While it is broadcasting we can listen for those broadcasts using something like:<\/p>\n<pre><code class=\"language-javascript\">\r\n$rootScope.$on(\"$pouchDB:change\", function(event, data) {\r\n    $scope.items[data.doc._id] = data.doc;\r\n    $scope.$apply();\r\n});\r\n\r\n$rootScope.$on(\"$pouchDB:delete\", function(event, data) {\r\n    delete $scope.items[data.doc._id];\r\n    $scope.$apply();\r\n});\r\n<\/code><\/pre>\n<p>Our view controller logic is now good to go!<\/p>\n<h3>Defining Your Ionic Framework Views<\/h3>\n<p>The last part of our <strong>www\/js\/app.js<\/strong> file will be for defining our views. This is done in the AngularJS<br \/>\n<strong>config()<\/strong> function like so:<\/p>\n<pre><code class=\"language-javascript\">\r\n.config(function($stateProvider, $urlRouterProvider) {\r\n    $stateProvider\r\n        .state(\"list\", {\r\n            \"url\": \"\/list\",\r\n            \"templateUrl\": \"templates\/list.html\",\r\n            \"controller\": \"MainController\"\r\n        })\r\n        .state(\"item\", {\r\n            \"url\": \"\/item\/:documentId\/:documentRevision\",\r\n            \"templateUrl\": \"templates\/item.html\",\r\n            \"controller\": \"MainController\"\r\n        });\r\n    $urlRouterProvider.otherwise(\"list\");\r\n})\r\n<\/code><\/pre>\n<p>We defined two views, one for all our list items and one for creating and updating new list items. The <strong>item<\/strong> state takes an optional<br \/>\ndocument id and document revision parameter. When they are present, it means we are going to be updating a particular document.<\/p>\n<p>All our AngularJS logic is complete now. We have initialized our database, started syncing, defined our views, and planned for interaction<br \/>\nfrom our views.<\/p>\n<h4>Creating A List View<\/h4>\n<p>Here we will define how data is presented in the list. In your project&#8217;s <strong>www\/templates\/list.html<\/strong> file, 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.firstname}} {{value.lastname}}\r\n                \r\n            \r\n        \r\n    \r\n\r\n<\/code><\/pre>\n<p>When swiping a list item we are presented with a delete button that will call the <strong>delete()<\/strong> function of our controller.<\/p>\n<h4>Creating A Form View<\/h4>\n<p>Here we will define out documents will be inserted or updated in our database. Essentially, this view is only a form. In your project&#8217;s<br \/>\n<strong>www\/templates\/item.html<\/strong> file, add the following code:<\/p>\n<div class=\"list\"><label class=\"item item-input\">  <\/label> <label class=\"item item-input\">  <\/label> <label class=\"item item-input\">  <\/label><\/div>\n<p>&nbsp;<\/p>\n<div class=\"padding\"><button class=\"button button-block button-positive\"> Save <\/button><\/div>\n<h2>The Sync Gateway Configuration<\/h2>\n<p>PouchDB and Ionic Framework are only half the story here. Sure they will create a nice locally running application, but we want things to sync. The Couchbase Sync Gateway is our endpoint for this and of course PouchDB works great with it.<\/p>\n<p>Inside your project&#8217;s <strong>sync-gateway-config.json<\/strong> file, add the following:<\/p>\n<pre><code class=\"language-json\">\r\n{\r\n    \"log\":[\"CRUD+\", \"REST+\", \"Changes+\", \"Attach+\"],\r\n    \"databases\": {\r\n        \"test-database\": {\r\n            \"server\":\"walrus:data\",\r\n            \"sync\":`\r\n                function (doc) {\r\n                    channel (doc.channels);\r\n                }\r\n            `,\r\n            \"users\": {\r\n                \"GUEST\": {\r\n                    \"disabled\": false,\r\n                    \"admin_channels\": [\"*\"]\r\n                }\r\n            }\r\n        }\r\n    },\r\n    \"CORS\": {\r\n        \"Origin\": [\"https:\/\/localhost:9000\"],\r\n        \"LoginOrigin\": [\"https:\/\/localhost:9000\"],\r\n        \"Headers\": [\"Content-Type\"],\r\n        \"MaxAge\": 17280000\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>This is one of the most basic configurations around. A few things to note about it:<\/p>\n<ul>\n<li>It uses walrus:data for storage which is in memory and does not persist. Not to be used for production.<\/li>\n<li>All data is synced via the GUEST user, so there is no authentication happening here, but there could be.<\/li>\n<li>We are fixing CORS issues by allowing requests on localhost:9000 in case you wanted to serve with Python for browser testing.<\/li>\n<\/ul>\n<h2>Testing The Application<\/h2>\n<p>At this point all our code is in place and our Sync Gateway is ready to be run. Start up the Sync Gateway by running the following in a<br \/>\nCommand Prompt or Terminal:<\/p>\n<pre><code class=\"language-bash\">\r\n\/path\/to\/sync\/gateway\/bin\/sync-gateway \/path\/to\/project\/sync-gateway-config.json\r\n<\/code><\/pre>\n<p>The Sync Gateway should now be running and you can validate this by visiting https:\/\/localhost:4984 in your web browser.<\/p>\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<br \/>\ninstall 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<br \/>\nemulate 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 platform\/ios\/ directory and launch the Xcode project file.<\/p>\n<p>If you&#8217;ve installed the Node Package Manager (NPM) package ios-sim, 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<h2>Conclusion<\/h2>\n<p>You saw now that there are two ways you can use Couchbase in your Ionic Framework mobile Android and iOS application. You can use the<br \/>\nApache Cordova Couchbase plugin as demonstrated in<br \/>\nthe <a href=\"https:\/\/www.couchbase.com\/blog\/using-couchbase-in-your-ionic-framework-application-part-1\/\">previous blog series<\/a>, or you can<br \/>\nuse PouchDB. Both of these are very suitable options when it comes to cross platform data storage and sync in your application.<\/p>\n<p>You can obtain the full working source code to this blog post via<br \/>\nour <a href=\"https:\/\/github.com\/couchbaselabs\/ionic-framework-pouchdb\">Couchbase Labs GitHub repository<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ionic Framework is still one of the leaders in hybrid mobile application development. It allows you to create Android and iOS applications using only HTML, JavaScript, and CSS. Previously I wrote about how to use Couchbase in an Ionic Framework [&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":[1],"tags":[1542,1551,1534,1541],"ppma_author":[9032],"class_list":["post-2096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-angularjs","tag-hybrid","tag-ionic-framework","tag-pouchdb"],"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>Sync Couchbase in Ionic Framework and PouchDB<\/title>\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\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cross Platform Storage and Sync with Ionic Framework, Couchbase, and PouchDB\" \/>\n<meta property=\"og:description\" content=\"Ionic Framework is still one of the leaders in hybrid mobile application development. It allows you to create Android and iOS applications using only HTML, JavaScript, and CSS. Previously I wrote about how to use Couchbase in an Ionic Framework [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/pt\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/\" \/>\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-11-11T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-27T14:17:25+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=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Cross Platform Storage and Sync with Ionic Framework, Couchbase, and PouchDB\",\"datePublished\":\"2015-11-11T15:00:00+00:00\",\"dateModified\":\"2023-06-27T14:17:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/\"},\"wordCount\":1503,\"commentCount\":28,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2022\\\/11\\\/couchbase-nosql-dbaas.png\",\"keywords\":[\"angularjs\",\"hybrid\",\"ionic framework\",\"pouchdb\"],\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/\",\"name\":\"Sync Couchbase in Ionic Framework and PouchDB\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2022\\\/11\\\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2015-11-11T15:00:00+00:00\",\"dateModified\":\"2023-06-27T14:17:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#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\\\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cross Platform Storage and Sync with Ionic Framework, Couchbase, and PouchDB\"}]},{\"@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":"Sync Couchbase in Ionic Framework and PouchDB","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\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/","og_locale":"pt_BR","og_type":"article","og_title":"Cross Platform Storage and Sync with Ionic Framework, Couchbase, and PouchDB","og_description":"Ionic Framework is still one of the leaders in hybrid mobile application development. It allows you to create Android and iOS applications using only HTML, JavaScript, and CSS. Previously I wrote about how to use Couchbase in an Ionic Framework [&hellip;]","og_url":"https:\/\/www.couchbase.com\/blog\/pt\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2015-11-11T15:00:00+00:00","article_modified_time":"2023-06-27T14:17:25+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":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Cross Platform Storage and Sync with Ionic Framework, Couchbase, and PouchDB","datePublished":"2015-11-11T15:00:00+00:00","dateModified":"2023-06-27T14:17:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/"},"wordCount":1503,"commentCount":28,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["angularjs","hybrid","ionic framework","pouchdb"],"articleSection":["Uncategorized"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/","url":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/","name":"Sync Couchbase in Ionic Framework and PouchDB","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2015-11-11T15:00:00+00:00","dateModified":"2023-06-27T14:17:25+00:00","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#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\/cross-platform-storage-and-sync-with-ionic-framework-couchbase-and-pouchdb\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cross Platform Storage and Sync with Ionic Framework, Couchbase, and PouchDB"}]},{"@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\/2096","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=2096"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2096\/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=2096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=2096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=2096"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/ppma_author?post=2096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}