building hybrid apps with couchbase mobile: couchbase connect 2015

BUILDING  HYBRID  APPS  WITH  COUCHBASE  MOBILE

James  Nocentini,  Developer  Advocate,  Couchbase

PhoneGap  Plugin

©2015  Couchbase  Inc. ‹#›

PhoneGap  Plugin

$ phonegap create AppName

$ cd ./AppName

$ phonegap local plugin add https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git

©2015  Couchbase  Inc. ‹#›

var app = { initialize: function() { this.bindEvents(); },

bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); },

onDeviceReady: function() { app.receivedEvent('deviceready');

}

};

©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);});

}

};

©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>

©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>

©2015  Couchbase  Inc. ‹#›

Creating  the  database

©2015  Couchbase  Inc. ‹#›

PUT /todos HTTP/1.1Content-Type: application/jsonHost: localhost:5700

©2015  Couchbase  Inc. ‹#›

PUT /todos HTTP/1.1Content-Type: application/jsonHost: localhost:5700

HTTP/1.1 201 OK

Register  Views

©2015  Couchbase  Inc. ‹#›

PUT /todos/_design/extra HTTP/1.1Content-Type: application/jsonHost: localhost:5700

...

‹#›

{ 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() }};

©2015  Couchbase  Inc. ‹#›

GET /todo/_design/extra/_view/lists?descending=true HTTP/1.1Content-Type: application/jsonHost: localhost:5700

©2015  Couchbase  Inc. ‹#›

GET /todo/_design/extra/_view/lists?descending=true HTTP/1.1Content-Type: application/jsonHost: localhost:5700

{"offset":0,"rows":[

...],"total_rows":0

}

React  Native

Authentication

©2015  Couchbase  Inc. ‹#›

©2015  Couchbase  Inc. ‹#›

POST /_facebook_token HTTP/1.1Content-Type: application/jsonHost: localhost:5700

{"remote_url":"http://demo.mobile.couchbase.com/todolite","email":"jamesn@couchbase.com","access_token":"CAAHIIPKDh6oBAJ0aQC…YiUuORuOHsIXgIcAlbwsj"

}

©2015  Couchbase  Inc. ‹#›

PUT /_facebook_token HTTP/1.1Content-Type: application/jsonHost: localhost:5700

HTTP/1.1 200 OK

{"email":"jamesn@couchbase.com","ok":"registered"}

Sync

©2015  Couchbase  Inc. ‹#›

POST /_replicate HTTP/1.1Content-Type: application/jsonHost: localhost:5700

{"source":"todo","target":{

"url":"http://demo.mobile.couchbase.com/todolite","auth":{

"facebook":{"email":"jamesn@couchbase.com"

}}

},"continuous":true

}

©2015  Couchbase  Inc. ‹#›

Date: Mon, 01 Jun 2015 07:31:20 GMTContent-Type: application/jsonContent-Length: 24

{"session_id":"repl001"

}

©2015  Couchbase  Inc. ‹#›

POST /_replicate HTTP/1.1Content-Type: application/jsonHost: localhost:5700

{"target":"todo","source":

{"url":"http://demo.mobile.couchbase.com/todolite","auth":{

"facebook":{"email":"jamesn@couchbase.com"

}}

},"continuous":true

}

©2015  Couchbase  Inc. ‹#›

Date: Mon, 01 Jun 2015 07:31:20 GMTContent-Type: application/jsonContent-Length: 24Server: CouchbaseLite 1.0 (unofficial)

{"session_id":"repl002"

}

Status

©2015  Couchbase  Inc. ‹#›

GET /_active_tasks HTTP/1.1Content-Type: application/jsonHost: localhost:5700

©2015  Couchbase  Inc. ‹#›

Date: Mon, 01 Jun 2015 07:31:20 GMTContent-Type: application/jsonContent-Length: 24

[{

"continuous":true,"status":"Offline","task":"repl001","type":"Replication","source":"todo","target":"http://demo.mobile.couchbase.com\/todolite"

}]

©2015  Couchbase  Inc. ‹#›

GET /_active_tasks HTTP/1.1Content-Type: application/jsonHost: localhost:5700

©2015  Couchbase  Inc. ‹#›

Date: Mon, 01 Jun 2015 07:31:20 GMTContent-Type: application/jsonContent-Length: 24

[{ "source":"todo", "target":"http://demo.mobile.couchbase.com\/todolite", "continuous":true, "status":"Processed 3 / 20 changes", "task":"repl001", "type":"Replication",}

]

©2015  Couchbase  Inc. ‹#›

GET /_active_tasks HTTP/1.1Content-Type: application/jsonHost: localhost:5700

©2015  Couchbase  Inc. ‹#›

Date: Mon, 01 Jun 2015 07:31:20 GMTContent-Type: application/jsonContent-Length: 24

[{ "source":"todo", "target":"http://demo.mobile.couchbase.com\/todolite", "continuous":true, "status":"Processed 8 / 20 changes", "task":"repl001", "type":"Replication",}

]

Local  documents

©2015  Couchbase  Inc. ‹#›

PUT /todo/_local/user HTTP/1.1Content-Type: application/jsonHost: localhost:5700

{"id":"1408359206152436","name":"James Nocentini","email":"jamesn@couchbase.com","access_token":"CAAHIIPKDh6oBAJ0aQC...YiUuORuOHsIXgIcAlbwsj","user_id":"jamesn@couchbase.com"

}

©2015  Couchbase  Inc. ‹#›

PUT /todos HTTP/1.1Content-Type: application/jsonHost: localhost:5700

HTTP/1.1 201 OK

{"id":"_local/user","rev":"1-local","ok":true

}

Attachments

©2015  Couchbase  Inc. ‹#›

GET /todo/_design/extra/_view/tasks?descending=true HTTP/1.1Content-Type: application/jsonHost: 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

}

©2015  Couchbase  Inc. ‹#›

GET /todo/_design/extra/_view/tasks?descending=true HTTP/1.1Content-Type: application/jsonHost: 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

}

©2015  Couchbase  Inc. ‹#›

GET /todo/e2d1138e-5cfa-4a1d-bea1-1108f733c52e/image HTTP/1.1Content-Type: application/jsonHost: localhost:5700

ÿØÿà

(1#%(:3=<9387@H\N@DWE78PmQW_bghg>Mqypdx\egcÿÛ

ÿÄ¡#B±ÁRÑð$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ

ÿÄB¡±Á #3RðbrÑ $4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÚ(¢

...

©2015  Couchbase  Inc. ‹#›

<img src="/todos/e2d1138e-5cfa-4a1d-bea1-1108f733c52e/image">

©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