building connected web apps with couchbase mobile: couchbase connect 2015
Embed Size (px)
TRANSCRIPT
BUILDING CONNECTED WEB APPS WITH COUCHBASE MOBILE
James Nocentini, Developer Advocate, Couchbase
pouchdb
©2015 Couchbase Inc. ‹#›
Sync Gateway
Native S
DKsNative SDKs
©2015 Couchbase Inc. ‹#›
Sync Gateway
Native S
DKsNative SDKs
Web clients
©2015 Couchbase Inc. ‹#›
Sync Gateway
Native S
DKsNative SDKs
Web clients W
eb clients
CORS
©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>
©2015 Couchbase Inc. ‹#›
©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": ["*"] } } } }}
©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": ["*"] } } } }}
©2015 Couchbase Inc. ‹#›
GET /db/ HTTP/1.1Host: localhost:4985Connection: keep-aliveContent-Length: 147Referer: localhost:8000Origin: localhost:8000
HTTP/1.1 200 OK
...
©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}));
©2015 Couchbase Inc. ‹#›
Fetch Web API
©2015 Couchbase Inc. ‹#›
Fetch Web API Polyfill
©2015 Couchbase Inc. ‹#›
Sending credentials with CORS
fetch(this.url + '/_session', { credentials: 'include'}).then((res) => res.json())
In a ReactJS web app
©2015 Couchbase Inc. ‹#›
©2015 Couchbase Inc. ‹#›
Authentication
©2015 Couchbase Inc. ‹#›
POST /todos/_session HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45
{"name": "oliver","password": "letmein"
}
©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"
}}
©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
©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"
}}
©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
Get documents by Id
©2015 Couchbase Inc. ‹#›
POST /todos/_all_docs?include_docs=true HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45
{"keys":[
"-K1TW0mACbKKY6vr0NA0YYN""-64a0af8e8f1493fe32daa8dc1264d2f4","-f190d1f4291b897393f1901547abea5a"
]}
Get documents per channel
©2015 Couchbase Inc. ‹#›
GET /todos/_changes?channels=list—-K1TW0mACbKKY6vr0NA0YYN&filter=sync_gateway/bychannel&include_docs=true HTTP/1.1Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693Host: localhost:4984
©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"}]},...
}
Writes
©2015 Couchbase Inc. ‹#›
POST /todos HTTP/1.1Content-Type: application/jsonHost: localhost:4984Content-Length: 45
{"title": "my todo","type": "list","created_at": ...
}
©2015 Couchbase Inc. ‹#›
pouchdb
©2015 Couchbase Inc. ‹#›
change remote url
update data model
migration
authentication
App Server
©2015 Couchbase Inc. ‹#›
Sync Gateway
Native S
DKsNative SDKs
Web clients W
eb clients
©2015 Couchbase Inc. ‹#›
Sync Gateway
Native S
DKsNative SDKs
Web clients W
eb clients
Web Server
©2015 Couchbase Inc. ‹#›
Rule of thumb: anything you need from the admin port (4985) is a good use case for having an app server
Couchbase Server ViewsAggregation on the whole dataset
©2015 Couchbase Inc. ‹#›
©2015 Couchbase Inc. ‹#›
PUT /todos/_design/extras HTTP/1.1Content-Type: application/jsonHost: localhost:4985Content-Length: 147
©2015 Couchbase Inc. ‹#›
PUT /todos/_design/extras HTTP/1.1Content-Type: application/jsonHost: localhost:4985Content-Length: 147
©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);
}}"
}}
}
©2015 Couchbase Inc. ‹#›
GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1Content-Type: application/jsonHost: localhost:4985
©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
©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
©2015 Couchbase Inc. ‹#›
pouchdb + REST
©2015 Couchbase Inc. ‹#›
©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"};
©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); }); } } ̀ } }}
©2015 Couchbase Inc. ‹#›
©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