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.

Transcript

1. Mobile Web Apps with PouchDB, AngularJS, Node.js and IBM Cloudant Node Summit Tuesday, February 10, 2015
2. Mobile Web Apps with PouchDB, AngularJS, Node.js and IBM Cloudant Bradley Holt Developer Advocate IBM Cloudant bradley.holt@us.ibm.com @BradleyHolt github.com/bradley-holt Jeff Sloyer Developer Advocate IBM Bluemix jbsloyer@us.ibm.com @jsloyer github.com/jsloyer 2
3. Location Tracker •  Stores data locally in PouchDB 3
4. Location Tracker •  Front end built with AngularJS 4
5. Location Tracker •  Authentication logic handled by Node.js app •  User interface built with Bootstrap and Leaflet 5
6. Location Tracker •  Replicates location data to IBM Cloudant 6
7. Location Tracker •  PANiC! •  PouchDB •  AngularJS •  Node.js •  interface (e.g. Bootstrap, Leaflet) •  Cloudant 7
8. PouchDB: a Database in Your Web Browser 8 Image Credits: Website address / URL bar by Descrier, on Flickr; database by Tim Morgan, on Flickr
9. 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
 }
 }
10. PouchDB and Cloudant Replication 10 PouchDB
11. PouchDB and Cloudant Replication 11 •  Implementations of the CouchDB Replication Protocol: •  one-off, one way operation •  peer-to-peer •  incremental •  conflict detection
12. Installing PouchDB 12 <script src=
 "//cdn.jsdelivr.net/pouchdb/3.3.0/pouchdb.min.js"
 ></script>
13. PouchDB Framework Adapters 13
14. 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)
15. IBM Cloudant •  Globally distributed data layer for web and mobile applications •  MongoDB-style queries •  Advanced geospatial capabilities •  Full text search indexing 15
16. 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
 });"
17. IBM Bluemix 17 •  Platform as a Service (PaaS) •  Deploy with one command •  Based on Cloud Foundry
18. Connect and Login to Bluemix 18 Connect to Bluemix: $ cf api https://api.ng.bluemix.net" Login to Bluemix: $ cf login -u user_name"
19. 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!
20. 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
21. Bradley Holt Developer Advocate IBM Cloudant bradley.holt@us.ibm.com @BradleyHolt github.com/bradley-holt Jeff Sloyer Developer Advocate IBM Bluemix jbsloyer@us.ibm.com @jsloyer github.com/jsloyer