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 Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

2,143 views

Published on

You’ve been building native apps with Couchbase Mobile, but what about web apps? In this session, you will learn how to build web apps without writing any server-side code. We will do so using the Sync Gateway REST API. By simply enabling CORS on Sync Gateway we can start building a web app to display the same data that was synced to the iOS/Android app. James will also show you code examples to build these REST services in your web apps with JavaScript libraries such as AngularJS and ReactJS.

Published in: Technology
  • Be the first to comment

Building Connected Web Apps with Couchbase Mobile: Couchbase Connect 2015

  1. 1. BUILDING  CONNECTED  WEB  APPS   WITH  COUCHBASE  MOBILE James  Nocentini,   Developer  Advocate,   Couchbase pouchdb
  2. 2. ©2015  Couchbase  Inc. ‹#› Sync  Gateway Native  SDKs Native  SDKs
  3. 3. ©2015  Couchbase  Inc. ‹#› Sync  Gateway Native  SDKs Native  SDKs Web  clients
  4. 4. ©2015  Couchbase  Inc. ‹#› Sync  Gateway Native  SDKs Native  SDKs Web  clients Web  clients
  5. 5. CORS
  6. 6. ©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>
  7. 7. ©2015  Couchbase  Inc. ‹#›
  8. 8. ©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": ["*"] } } } } }
  9. 9. ©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": ["*"] } } } } }
  10. 10. ©2015  Couchbase  Inc. ‹#› GET /db/ HTTP/1.1 Host: localhost:4985 Connection: keep-alive Content-Length: 147 Referer: localhost:8000 Origin: localhost:8000 HTTP/1.1 200 OK ...
  11. 11. ©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}));
  12. 12. ©2015  Couchbase  Inc. ‹#› Fetch  Web  API
  13. 13. ©2015  Couchbase  Inc. ‹#› Fetch  Web  API  Polyfill
  14. 14. ©2015  Couchbase  Inc. ‹#› Sending  credentials  with  CORS fetch(this.url + '/_session', {
 credentials: 'include'
 }).then((res) => res.json())
  15. 15. In  a  ReactJS  web  app
  16. 16. ©2015  Couchbase  Inc. ‹#›
  17. 17. ©2015  Couchbase  Inc. ‹#›
  18. 18. Authentication
  19. 19. ©2015  Couchbase  Inc. ‹#› POST /todos/_session HTTP/1.1 Content-Type: application/json Host: localhost:4984 Content-Length: 45 { "name": "oliver", "password": "letmein" }
  20. 20. ©2015  Couchbase  Inc. ‹#› HTTP/1.1 200 OK Server: Couchbase Sync Gateway/1.1.0 Set-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" } }
  21. 21. ©2015  Couchbase  Inc. ‹#› HTTP/1.1 200 OK Server: Couchbase Sync Gateway/1.1.0 Set-Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693; Path=/todos/; Expires=Mon, 01 Jun 2015 22:34:57 UTC Redirect user to Home page
  22. 22. ©2015  Couchbase  Inc. ‹#› GET /todos/_session HTTP/1.1 Content-Type: application/json Host: localhost:4984 Content-Length: 45 { "authentication_handlers":["default","cookie"], "ok":true, "userCtx":{ "channels":{ "!":1, "list—-K1TW0mACbKKY6vr0NA0YYN":16, "list—-64a0af8e8f1493fe32daa8dc1264d2f4":50, "list—-f190d1f4291b897393f1901547abea5a":52, "profiles":58 }, "name":"emilie" } }
  23. 23. ©2015  Couchbase  Inc. ‹#› HTTP/1.1 200 OK Server: Couchbase Sync Gateway/1.1.0 Set-Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693; Path=/todos/; Expires=Mon, 01 Jun 2015 22:34:57 UTC -K1TW0mACbKKY6vr0NA0YYN -64a0af8e8f1493fe32daa8dc1264d2f4 -f190d1f4291b897393f1901547abea5a
  24. 24. Get  documents  by  Id
  25. 25. ©2015  Couchbase  Inc. ‹#› POST /todos/_all_docs?include_docs=true HTTP/1.1 Content-Type: application/json Host: localhost:4984 Content-Length: 45 { "keys":[ "-K1TW0mACbKKY6vr0NA0YYN" "-64a0af8e8f1493fe32daa8dc1264d2f4", "-f190d1f4291b897393f1901547abea5a" ] }
  26. 26. Get  documents  per  channel
  27. 27. ©2015  Couchbase  Inc. ‹#› GET /todos/_changes?channels=list—-K1TW0mACbKKY6vr0NA0YYN&filter=sync_gateway/ bychannel&include_docs=true HTTP/1.1 Cookie: SyncGatewaySession=238297196471aba9e42bf08969a49a1b9750c693 Host: localhost:4984
  28. 28. ©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"}] }, ... }
  29. 29. Writes
  30. 30. ©2015  Couchbase  Inc. ‹#› POST /todos HTTP/1.1 Content-Type: application/json Host: localhost:4984 Content-Length: 45 { "title": "my todo", "type": "list", "created_at": ... }
  31. 31. ©2015  Couchbase  Inc. ‹#› pouchdb
  32. 32. ©2015  Couchbase  Inc. ‹#› change  remote  url update  data  model migration authentication
  33. 33. App  Server
  34. 34. ©2015  Couchbase  Inc. ‹#› Sync  Gateway Native  SDKs Native  SDKs Web  clients Web  clients
  35. 35. ©2015  Couchbase  Inc. ‹#› Sync  Gateway Native  SDKs Native  SDKs Web  clients Web  clients Web  Server
  36. 36. ©2015  Couchbase  Inc. ‹#› Rule  of  thumb:  anything  you  need  from  the  admin  port  (4985)   is  a  good  use  case  for  having  an  app  server
  37. 37. Couchbase  Server  Views Aggregation  on  the  whole  dataset
  38. 38. ©2015  Couchbase  Inc. ‹#›
  39. 39. ©2015  Couchbase  Inc. ‹#› PUT /todos/_design/extras HTTP/1.1 Content-Type: application/json Host: localhost:4985 Content-Length: 147
  40. 40. ©2015  Couchbase  Inc. ‹#› PUT /todos/_design/extras HTTP/1.1 Content-Type: application/json Host: localhost:4985 Content-Length: 147
  41. 41. ©2015  Couchbase  Inc. ‹#› PUT /todos/_design/extras HTTP/1.1 Content-Type: application/json Host: localhost:4985 Content-Length: 147 { "views" : { "bydate": { "map": "function(doc, meta) { if (doc.type == 'item') { emit(doc.created_at, null); } }" } } }
  42. 42. ©2015  Couchbase  Inc. ‹#› GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1 Content-Type: application/json Host: localhost:4985
  43. 43. ©2015  Couchbase  Inc. ‹#› GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1 Content-Type: application/json Host: localhost:4985 GET /todos/_design/extras/_view/bydate?start_key=20&limit=20 HTTP/1.1 Content-Type: application/json Host: localhost:4985
  44. 44. ©2015  Couchbase  Inc. ‹#› GET /todos/_design/extras/_view/bydate?start_key=0&limit=20 HTTP/1.1 Content-Type: application/json Host: localhost:4985 GET /todos/_design/extras/_view/bydate?start_key=20&limit=20 HTTP/1.1 Content-Type: application/json Host: localhost:4985 GET /todos/_design/extras/_view/bydate?start_key=40&limit=20 HTTP/1.1 Content-Type: application/json Host: localhost:4985
  45. 45. ©2015  Couchbase  Inc. ‹#› pouchdb + REST
  46. 46. ©2015  Couchbase  Inc. ‹#›
  47. 47. ©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"
 };
  48. 48. ©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);
 });
 }
 }
 `
 }
 }
 }
  49. 49. ©2015  Couchbase  Inc. ‹#›
  50. 50. ©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

×