Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web Apps with PouchDB, AngularJS, Node.js and IBM Cloudant

Bradley Holt
February 10, 2015

Mobile Web Apps with PouchDB, AngularJS, Node.js and IBM Cloudant

Learn how to build mobile web apps using PouchDB, AngularJS, Node.js and IBM Cloudant, a globally distributed data layer for web and mobile apps. Quickly integrate with Cloudant using the Cloudant Node.js client library and ease the management and deployment of your application with IBM Bluemix.

Bradley Holt

February 10, 2015
Tweet

More Decks by Bradley Holt

Other Decks in Programming

Transcript

  1. Mobile Web Apps with PouchDB, AngularJS, Node.js and IBM Cloudant

    Bradley Holt Developer Advocate IBM Cloudant [email protected] @BradleyHolt github.com/bradley-holt Jeff Sloyer Developer Advocate IBM Bluemix [email protected] @jsloyer github.com/jsloyer 2
  2. Location Tracker •  Authentication logic handled by Node.js app • 

    User interface built with Bootstrap and Leaflet 5
  3. Location Tracker •  PANiC! •  PouchDB •  AngularJS •  Node.js

    •  interface (e.g. Bootstrap, Leaflet) •  Cloudant 7
  4. PouchDB: a Database in Your Web Browser 8 Image Credits:

    Website address / URL bar by Descrier, on Flickr; database by Tim Morgan, on Flickr
  5. JSON Documents 9 {
 _id: "6EF9D2B0-13D3-1378-8D30-39E3CE0B36C2",
 _rev: "1-0b457efcf82fb29492ef927ba5b6ee15",
 type: "Feature",


    geometry: {
 type: "Point",
 coordinates: [
 -71.1028,
 42.3691
 ]
 },
 properties: {
 session_id: "3486b13f-7b8a-8a96-dfbf-9b82800e367f",
 timestamp: 1422928591717
 }
 }
  6. PouchDB and Cloudant Replication 11 •  Implementations of the CouchDB

    Replication Protocol: •  one-off, one way operation •  peer-to-peer •  incremental •  conflict detection
  7. Node.js 14 •  Static web server (express.static middleware) •  Reverse

    proxy to Cloudant (using http-proxy) •  Authentication / Authorization: •  POST /api/_users/ Creates a new API key for a user •  POST /api/_session/ Handles user login •  GET /api/_session/ Gets info about current session (proxied to Cloudant) •  DELETE /api/_session/ Handles user logout (proxied to Cloudant)
  8. IBM Cloudant •  Globally distributed data layer for web and

    mobile applications •  MongoDB-style queries •  Advanced geospatial capabilities •  Full text search indexing 15
  9. Cloudant Node.js Client Library 16 Install: $ npm install cloudant

    --save" Require: var cloudant = require('cloudant');" Parse Bluemix environment variables and create connection instance: var vcapServices = JSON.parse(process.env.VCAP_SERVICES);
 var service = vcapServices.cloudantNoSQLDB[0];
 var connection = cloudant({
 username: service.credentials.username,
 password: service.credentials.password,
 account: service.credentials.username
 });"
  10. IBM Bluemix 17 •  Platform as a Service (PaaS) • 

    Deploy with one command •  Based on Cloud Foundry
  11. Connect and Login to Bluemix 18 Connect to Bluemix: $

    cf api https://api.ng.bluemix.net" Login to Bluemix: $ cf login -u user_name"
  12. Deploy to Bluemix and Create Services 19 Deploy to Bluemix:

    $ cf push app_name! Create a Cloudant service within Bluemix: $ cf create-service cloudantNoSQLDB Shared instance_name!
  13. Minimal Node.js App in Bluemix 20 .cfignore
 Files for Cloud

    Foundry to ignore (tip: ignore node_modules) Procfile
 List of process types (use web for your web server) app.js
 Your Node.js app manifest.yml
 Cloud Foundry configuration settings node_modules
 Node modules installed via npm package.json
 npm dependencies and project metadata