Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

1,819 views

Published on

Learn about the different possibilities for writing code once with HTML/JS/CSS on both iOS and Android. Using the Couchbase Lite Listener component, we can use the HTTP interface to work with a Couchbase Lite database from a web view. James will talk about the best practices for building hybrid applications with the Couchbase Lite PhoneGap plugin and touch on more recent hybrid frameworks such as React Native.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

  1. 1. BUILDING  HYBRID  APPS   WITH  COUCHBASE  MOBILE James  Nocentini,   Developer  Advocate,   Couchbase
  2. 2. PhoneGap  Plugin
  3. 3. ©2015  Couchbase  Inc. ‹#› PhoneGap  Plugin $ phonegap create AppName $ cd ./AppName $ phonegap local plugin add https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git
  4. 4. ©2015  Couchbase  Inc. ‹#› var app = { 
 initialize: function() {
 this.bindEvents();
 },
 bindEvents: function() {
 document.addEventListener('deviceready', this.onDeviceReady, false);
 },
 onDeviceReady: function() {
 app.receivedEvent('deviceready'); } };

  5. 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. 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. 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>
  8. 8. ©2015  Couchbase  Inc. ‹#›
  9. 9. Creating  the  database
  10. 10. ©2015  Couchbase  Inc. ‹#› PUT /todos HTTP/1.1 Content-Type: application/json Host: localhost:5700
  11. 11. ©2015  Couchbase  Inc. ‹#› PUT /todos HTTP/1.1 Content-Type: application/json Host: localhost:5700 HTTP/1.1 201 OK
  12. 12. Register  Views
  13. 13. ©2015  Couchbase  Inc. ‹#› PUT /todos/_design/extra HTTP/1.1 Content-Type: application/json Host: localhost:5700 ...
  14. 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()
 }
 };
  15. 15. ©2015  Couchbase  Inc. ‹#› GET /todo/_design/extra/_view/lists?descending=true HTTP/1.1 Content-Type: application/json Host: localhost:5700
  16. 16. ©2015  Couchbase  Inc. ‹#› GET /todo/_design/extra/_view/lists?descending=true HTTP/1.1 Content-Type: application/json Host: localhost:5700 { "offset":0, "rows":[ ... ], "total_rows":0 }
  17. 17. React  Native
  18. 18. Authentication
  19. 19. ©2015  Couchbase  Inc. ‹#›
  20. 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" }
  21. 21. ©2015  Couchbase  Inc. ‹#› PUT /_facebook_token HTTP/1.1 Content-Type: application/json Host: localhost:5700 HTTP/1.1 200 OK {"email":"jamesn@couchbase.com","ok":"registered"}
  22. 22. Sync
  23. 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 }
  24. 24. ©2015  Couchbase  Inc. ‹#› Date: Mon, 01 Jun 2015 07:31:20 GMT Content-Type: application/json Content-Length: 24 { "session_id":"repl001" }
  25. 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 }
  26. 26. ©2015  Couchbase  Inc. ‹#› Date: Mon, 01 Jun 2015 07:31:20 GMT Content-Type: application/json Content-Length: 24 Server: CouchbaseLite 1.0 (unofficial) { "session_id":"repl002" }
  27. 27. Status
  28. 28. ©2015  Couchbase  Inc. ‹#› GET /_active_tasks HTTP/1.1 Content-Type: application/json Host: localhost:5700
  29. 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" } ]
  30. 30. ©2015  Couchbase  Inc. ‹#› GET /_active_tasks HTTP/1.1 Content-Type: application/json Host: localhost:5700
  31. 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", } ]
  32. 32. ©2015  Couchbase  Inc. ‹#› GET /_active_tasks HTTP/1.1 Content-Type: application/json Host: localhost:5700
  33. 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. 34. Local  documents
  35. 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" }
  36. 36. ©2015  Couchbase  Inc. ‹#› PUT /todos HTTP/1.1 Content-Type: application/json Host: localhost:5700 HTTP/1.1 201 OK { "id":"_local/user", "rev":"1-local", "ok":true }
  37. 37. Attachments
  38. 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. 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. 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¢£¤¥¦§¨©ª²³ ´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÚ (¢ ...
  41. 41. ©2015  Couchbase  Inc. ‹#› <img src="/todos/e2d1138e-5cfa-4a1d-bea1-1108f733c52e/image">
  42. 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

×