Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

1. BUILDING HYBRID APPS WITH COUCHBASE MOBILE James Nocentini, Developer Advocate, Couchbase

2. PhoneGap Plugin

4. ©2015 Couchbase Inc. ‹#› var app = {   initialize: function() {  this.bindEvents();  },  bindEvents: function() {  document.addEventListener('deviceready', this.onDeviceReady, false);  },  onDeviceReady: function() {  app.receivedEvent('deviceready'); } }; 

5. ©2015 Couchbase Inc. ‹#› var app = {   initialize: function() {  this.bindEvents();  },  bindEvents: function() {  document.addEventListener('deviceready', this.onDeviceReady, false);  },  onDeviceReady: function() {  app.receivedEvent('deviceready'); cblite.getURL(function (err, url) {  console.log('The url is :: ' + url);  }); } }; 

6. ©2015 Couchbase Inc. ‹#› Fetch API <script type="text/javascript" src="cordova.js"></script>        <script type="text/javascript" src="js/index.js"></script>  <script type="text/javascript">  app.initialize();  </script>

7. ©2015 Couchbase Inc. ‹#› Fetch API <script type="text/javascript" src="cordova.js"></script>    <script src="bower_components/es6-promise/promise.js"></script>  <script src="bower_components/fetch/fetch.js"></script>    <script type="text/javascript" src="js/index.js"></script>  <script type="text/javascript">  app.initialize();  </script>

9. Creating the database

12. Register Views

14. ‹#› {  views: {  lists: {  map: function (doc) {  if (doc.type == "list" && doc.created_at && doc.title) {  emit(doc.created_at, doc.title)  }  }.toString()  },  tasks: {  map: function (doc) {  if (doc.type == "task" && doc.created_at && doc.title && doc.list_id) {  emit([doc.list_id, doc.created_at],  {  checked: doc.checked ? "checked" : "",  title: doc.title,  image: (doc._attachments && doc._attachments["image"])  })  }  }.toString()  },  profiles: {  map: function (doc) {  if (doc.type == "profile" && doc.user_id && doc.name) {  emit(doc.name)  }  }.toString()  }  };

17. React Native

18. Authentication

20. ©2015 Couchbase Inc. ‹#› POST /_facebook_token HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "remote_url":"http://demo.mobile.couchbase.com/todolite", "email":"jamesn@couchbase.com", "access_token":"CAAHIIPKDh6oBAJ0aQC…YiUuORuOHsIXgIcAlbwsj" }

22. Sync

23. ©2015 Couchbase Inc. ‹#› POST /_replicate HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "source":"todo", "target":{ "url":"http://demo.mobile.couchbase.com/todolite", "auth":{ "facebook":{ "email":"jamesn@couchbase.com" } } }, "continuous":true }

25. ©2015 Couchbase Inc. ‹#› POST /_replicate HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "target":"todo", "source": { "url":"http://demo.mobile.couchbase.com/todolite", "auth":{ "facebook":{ "email":"jamesn@couchbase.com" } } }, "continuous":true }

27. Status

29. ©2015 Couchbase Inc. ‹#› Date: Mon, 01 Jun 2015 07:31:20 GMT Content-Type: application/json Content-Length: 24 [ { "continuous":true, "status":"Offline", "task":"repl001", "type":"Replication", "source":"todo", "target":"http://demo.mobile.couchbase.com/todolite" } ]

31. ©2015 Couchbase Inc. ‹#› Date: Mon, 01 Jun 2015 07:31:20 GMT Content-Type: application/json Content-Length: 24 [ {  "source":"todo",  "target":"http://demo.mobile.couchbase.com/todolite", "continuous":true, "status":"Processed 3 / 20 changes", "task":"repl001", "type":"Replication", } ]

33. ©2015 Couchbase Inc. ‹#› Date: Mon, 01 Jun 2015 07:31:20 GMT Content-Type: application/json Content-Length: 24 [ {  "source":"todo",  "target":"http://demo.mobile.couchbase.com/todolite", "continuous":true, "status":"Processed 8 / 20 changes", "task":"repl001", "type":"Replication", } ]

34. Local documents

35. ©2015 Couchbase Inc. ‹#› PUT /todo/_local/user HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "id":"1408359206152436", "name":"James Nocentini", "email":"jamesn@couchbase.com", "access_token":"CAAHIIPKDh6oBAJ0aQC...YiUuORuOHsIXgIcAlbwsj", "user_id":"jamesn@couchbase.com" }

37. Attachments

38. ©2015 Couchbase Inc. ‹#› GET /todo/_design/extra/_view/tasks?descending=true HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "offset":0, "rows":[ { key: [ 'e2d1138e-5cfa-4a1d-bea1-1108f733c52e', '2015-05-21T12:54:04.449Z' ], value: { checked: 'checked', title: 'yani', image: { content_type: 'image/jpg', length: 454550, digest: 'sha1-VmdF4Bm95/ty/KRE8IeKEioDshk=', revpos: 1, stub: true } } ], "total_rows":0 }

39. ©2015 Couchbase Inc. ‹#› GET /todo/_design/extra/_view/tasks?descending=true HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "offset":0, "rows":[ { key: [ 'e2d1138e-5cfa-4a1d-bea1-1108f733c52e', '2015-05-21T12:54:04.449Z' ], value: { checked: 'checked', title: 'yani', image: { content_type: 'image/jpg', length: 454550, digest: 'sha1-VmdF4Bm95/ty/KRE8IeKEioDshk=', revpos: 1, stub: true } } ], "total_rows":0 }

40. ©2015 Couchbase Inc. ‹#› GET /todo/e2d1138e-5cfa-4a1d-bea1-1108f733c52e/image HTTP/1.1 Content-Type: application/json Host: localhost:5700 ÿØÿà (1#%(:3=<9387@HN@DWE78PmQW_bghg>MqypdxegcÿÛ ÿÄ¡#B±ÁRÑð$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³ ´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ ÿÄB¡±Á #3RðbrÑ $4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³ ´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÚ (¢ ...

42. ©2014 Couchbase Inc. More Information 42 Documentation Portal Couchbase Lite Programming Guides http://developer.couchbase.com/mobile ToDoLite-‐PhoneGap https://github.com/couchbaselabs/ToDoLite-‐PhoneGap Couchbase Developer Forums http://forums.couchbase.com