Download - Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

Transcript
Page 1: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

BUILDING  CONNECTED  WEB  APPS  WITH  COUCHBASE  MOBILE

James  Nocentini,  Developer  Advocate,  Couchbase

pouchdb

Page 2: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sync  Gateway

Native  S

DKsNative  SDKs

Page 3: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sync  Gateway

Native  S

DKsNative  SDKs

Web  clients

Page 4: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sync  Gateway

Native  S

DKsNative  SDKs

Web  clients W

eb  clients

Page 5: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

CORS

Page 6: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body>

<script> var url = "http://localhost:4984/db"; fetch(url);</script>

</html>

Page 7: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 8: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

{ "log": ["*"], "CORS": { "Origin":["http://localhost:8000"], "LoginOrigin":["http://localhost:8000"], "Headers":["Content-Type"], "MaxAge": 1728000 }, "databases": { "db": { "server": "walrus:", "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } } } }}

Page 9: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

{ "log": ["*"], "CORS": { "Origin":["http://localhost:8000"], "LoginOrigin":["http://localhost:8000"], "Headers":["Content-Type"], "MaxAge": 1728000 }, "databases": { "db": { "server": "walrus:", "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } } } }}

Page 10: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

GET /db/ HTTP/1.1Host: localhost:4985Connection: keep-aliveContent-Length: 147Referer: localhost:8000Origin: localhost:8000

HTTP/1.1 200 OK

...

Page 11: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sending  credentials  with  XMLHTTPRequest

var request = new XMLHttpRequest();request.open('POST', SYNC_GATEWAY_URL + '_facebook', true);request.setRequestHeader('Content-Type', 'application/json'); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { console.log('New SG session, starting sync!'); sync(); }}; request.withCredentials = true; request.send(JSON.stringify({"access_token": accessToken}));

Page 12: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Fetch  Web  API

Page 13: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Fetch  Web  API  Polyfill

Page 14: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sending  credentials  with  CORS

fetch(this.url + '/_session', { credentials: 'include'}).then((res) => res.json())

Page 15: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

In  a  ReactJS  web  app

Page 16: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 17: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 18: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

Authentication

Page 19: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

POST /todos/_session HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45

{"name": "oliver","password": "letmein"

}

Page 20: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

HTTP/1.1 200 OKServer: Couchbase Sync Gateway/1.1.0Set-Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693; Path=/todos/; Expires=Mon, 01 Jun 2015 22:34:57 UTC

{"authentication_handlers":["default","cookie"],"ok":true,"userCtx":{

"channels":{"!":1,"list—-K1TW0mACbKKY6vr0NA0YYN":16,"list—-64a0af8e8f1493fe32daa8dc1264d2f4":50,"list—-f190d1f4291b897393f1901547abea5a":52,"profiles":58

},"name":"emilie"

}}

Page 21: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

HTTP/1.1 200 OKServer: Couchbase Sync Gateway/1.1.0Set-Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693; Path=/todos/; Expires=Mon, 01 Jun 2015 22:34:57 UTC

Redirect user to Home page

Page 22: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

GET /todos/_session HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45

{"authentication_handlers":["default","cookie"],"ok":true,"userCtx":{

"channels":{"!":1,"list—-K1TW0mACbKKY6vr0NA0YYN":16,"list—-64a0af8e8f1493fe32daa8dc1264d2f4":50,"list—-f190d1f4291b897393f1901547abea5a":52,"profiles":58

},"name":"emilie"

}}

Page 23: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

HTTP/1.1 200 OKServer: Couchbase Sync Gateway/1.1.0Set-Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693; Path=/todos/; Expires=Mon, 01 Jun 2015 22:34:57 UTC

-K1TW0mACbKKY6vr0NA0YYN -64a0af8e8f1493fe32daa8dc1264d2f4 -f190d1f4291b897393f1901547abea5a

Page 24: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

Get  documents  by  Id

Page 25: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

POST /todos/_all_docs?include_docs=true HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45

{"keys":[

"-K1TW0mACbKKY6vr0NA0YYN""-64a0af8e8f1493fe32daa8dc1264d2f4","-f190d1f4291b897393f1901547abea5a"

]}

Page 26: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

Get  documents  per  channel

Page 27: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

GET /todos/_changes?channels=list—-K1TW0mACbKKY6vr0NA0YYN&filter=sync_gateway/bychannel&include_docs=true HTTP/1.1Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693Host: localhost:4984

Page 28: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

{"results":[{"seq":15,"id":"_user/emilie","changes":[]},{

"seq":"58:1","id":"profile:1401717430150867","doc":

{"_id":"profile:1401717430150867","_rev":"1-6f5f176b086eb8568458c5e3c5cd8697","name":"William Hoang","type":"profile","user_id":"1401717430150867"},

"changes":[{"rev":"1-6f5f176b086eb8568458c5e3c5cd8697"}]},...

}

Page 29: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

Writes

Page 30: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

POST /todos HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45

{"title": "my todo","type": "list","created_at": ...

}

Page 31: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

pouchdb

Page 32: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

change  remote  url

update  data  model

migration

authentication

Page 33: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

App  Server

Page 34: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sync  Gateway

Native  S

DKsNative  SDKs

Web  clients W

eb  clients

Page 35: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Sync  Gateway

Native  S

DKsNative  SDKs

Web  clients W

eb  clients

Web  Server

Page 36: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Rule  of  thumb:  anything  you  need  from  the  admin  port  (4985)  is  a  good  use  case  for  having  an  app  server

Page 37: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

Couchbase  Server  ViewsAggregation  on  the  whole  dataset

Page 38: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 39: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

PUT /todos/_design/extras HTTP/1.1Content-Type: application/jsonHost: localhost:4985Content-Length: 147

Page 40: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

PUT /todos/_design/extras HTTP/1.1Content-Type: application/jsonHost: localhost:4985Content-Length: 147

Page 41: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

PUT /todos/_design/extras HTTP/1.1Content-Type: application/jsonHost: localhost:4985Content-Length: 147

{"views" : {

"bydate": {"map": "function(doc, meta) {

if (doc.type == 'item') {emit(doc.created_at, null);

}}"

}}

}

Page 42: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985

Page 43: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985

GET /todos/_design/extras/_view/bydate?start_key=20&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985

Page 44: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985

GET /todos/_design/extras/_view/bydate?start_key=20&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985

GET /todos/_design/extras/_view/bydate?start_key=40&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985

Page 45: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

pouchdb + REST

Page 46: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 47: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

function handleFavourite(itemId) { db.get('p:679459346').then(function (doc) { doc.favourites.concat([itemId]); }); }

{ id: "9527C675-9E0F-444D-8D92-8E8BAF80E4B9", ok: true, rev: "1-43cc51792070aa5ca92306893459e876"};

Page 48: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

{ "log": ["*"], "databases": { "db": { "server": "walrus:", "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } }, "sync": ` function(doc, oldDoc) { if (doc.type == "profile") { doc.favourites.map(function(itemId) { access(doc._id, itemId); }); } } ̀ } }}

Page 49: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2015  Couchbase  Inc. ‹#›

Page 50: Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

©2014  Couchbase  Inc.

More  Information

50

Documentation  Portal  Couchbase  Lite  Programming  Guides  http://developer.couchbase.com/mobile  

ToDoLite  Web  https://github.com/couchbaselabs/ToDoLite-­‐Web  

Couchbase  Developer  Forums  http://forums.couchbase.com