building hybrid apps with couchbase mobile: couchbase connect 2015

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

Upload: couchbase

Post on 16-Aug-2015

153 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

BUILDING  HYBRID  APPS  WITH  COUCHBASE  MOBILE

James  Nocentini,  Developer  Advocate,  Couchbase

Page 2: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

PhoneGap  Plugin

Page 3: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

PhoneGap  Plugin

$ phonegap create AppName

$ cd ./AppName

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

Page 4: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

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

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

}

};

Page 5: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

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

}

};

Page 6: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

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

Page 7: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

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

Page 8: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 9: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Creating  the  database

Page 10: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

Page 11: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

HTTP/1.1 201 OK

Page 12: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Register  Views

Page 13: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

...

Page 14: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

‹#›

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

Page 15: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

Page 16: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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

}

Page 17: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

React  Native

Page 18: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Authentication

Page 19: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 20: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

{"remote_url":"http://demo.mobile.couchbase.com/todolite","email":"[email protected]","access_token":"CAAHIIPKDh6oBAJ0aQC…YiUuORuOHsIXgIcAlbwsj"

}

Page 21: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

HTTP/1.1 200 OK

{"email":"[email protected]","ok":"registered"}

Page 22: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Sync

Page 23: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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":"[email protected]"

}}

},"continuous":true

}

Page 24: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

{"session_id":"repl001"

}

Page 25: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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":"[email protected]"

}}

},"continuous":true

}

Page 26: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

{"session_id":"repl002"

}

Page 27: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Status

Page 28: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

Page 29: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

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

}]

Page 30: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

Page 31: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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",}

]

Page 32: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

Page 33: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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",}

]

Page 34: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Local  documents

Page 35: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

{"id":"1408359206152436","name":"James Nocentini","email":"[email protected]","access_token":"CAAHIIPKDh6oBAJ0aQC...YiUuORuOHsIXgIcAlbwsj","user_id":"[email protected]"

}

Page 36: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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

}

Page 37: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

Attachments

Page 38: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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

}

Page 39: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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

}

Page 40: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÚ(¢

...

Page 41: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

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

Page 42: Building Hybrid Apps with Couchbase Mobile: Couchbase Connect 2015

©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