Upload
ibm-cloud-data-services
View
562
Download
1
Embed Size (px)
Citation preview
Mobile App Development with Cloudant
Glynn Bird, Developer Advocate, Cloud Data Services
@glynn_bird
Image Credit: Joan Touzet (@wohali), ASF Member, CouchDB PMC Member
5
Image Credit: Device landscape by Jeremy Keith, on Flickr
7
Not just mobile first…
Image Credit: NASA New Horizons
8
Offline First
Offline-First
The Eight Fallacies of Distributed Computing1. The network is reliable
2. Latency is zero
3. Bandwidth is infinite
4. The network is secure
5. Topology doesn't change
6. There is one administrator
7. Transport cost is zero
8. The network is homogeneous
10
Text Credit: The Eight Fallacies of Distributed Computing by Peter Deutsch | Image Credit: Pneumatic Central by Sleestak, on Flickr
11
Offline-first is the only way
to achieve a true, 100% always-on user
experience.**assuming the device is reliable
Benefits of Offline First
12
• Better, faster user experience, both offline and online• Allow your users to work offline or with limited connectivity• Potentially saves battery life and bandwidth usage
Offline Patterns & Anti-Patterns• Don't return an error for no reason
• Do let users view cached/saved data
• Do synchronize data when connected
• Consider letting your users decide when to sync
• Think about the UX of users seeing stale data
13
Difficulties of Offline First
14
Image credit http://www.sneakerheadvc.com/wp-content/uploads/2012/02/Apple_iSync1.png
Apache CouchDB – built to replicate• MVCC for document versioning
• Replication
• One-way or Two-way
• One-shot or continuous
17
Apache CouchDB – built to replicate
18
2.0
multi-node clustering
Cloudant Geo
Cloudant Query (Mango)
Cloudant Search (Lucene)
Dashboard
IBM Cloudant• Globally distributed data layer for
web and mobile applications• Run as-a-service
• MongoDB-style queries
• Advanced geospatial capabilities
• Full text search indexing
20
PouchDB• A database in your web browser
• Can synchronize with any database that implements the CouchDB Replication Protocol
• Makes create, read, update and delete operations extremely quickly
• Free, open-source
22
Getting started with PouchDB
23
<script src="https://cdn.jsdelivr.net/pouchdb/5.1.0/pouchdb.min.js"></script>
<script type="javascript">
var db = new PouchDB("smart-meter");
</script>
Adding documents - callbacks
24
db.post({ date: "2014-11-12T23:27:03.794Z", kilowatt_hours: 14}, function(err, data) { console.log(err,data);});
Adding documents - bring your own id
25
var db = new PouchDB("smart-meter");var obj = { _id: "abc123", timestamp: "2014-11-12T23:27:03.794Z", kilowatt_hours: 14};db.put(obj, callback);
https://github.com/bradley-holt/offline-first/blob/master/pouchdb/04-create-document-put.js
Getting a document
26
db.get("abc123", callback);
// calls back with // {// _id: "abc123",// _rev: "1-27695d5f483ac267d03ad0e3cb54bd2c",// timestamp: "2014-11-12T23:27:03.794Z",// kilowatt_hours: 14// }
Getting multiple documents
27
db.allDocs({include_docs:true}, callback);
// calls back with // {// "offset": 0,// "total_rows": 24,// "rows": [{...},{...}]// }
Querying a Database with PouchDB Find• Based on Cloudant Query (Mango)
• MongoDB-style query language
29
Image Credit: Mango with section on a white background by bangdoll, on Flickr
db.find({ selector: { name: 'Mario' debut: { '$gt': 1990 } }, fields: ['_id', 'lastname'], sort: ['lastname']})...
Replicating a PouchDB Database
30
var db = new PouchDB("smart-meter");var remoteDb = new PouchDB("https://bradley-holt.cloudant.com/smart-meter");db.replicateTo(remoteDb);
https://github.com/bradley-holt/offline-first/blob/master/pouchdb/08-replicate-database.js
Bidirectionally Replicating a PouchDB Database
31
db.sync(remoteDb).on("change", function(info) { // Replication has written a new document console.log(info); }).on("complete", function(info) { // Replication has completed or been cancelled console.log(info); });
https://github.com/bradley-holt/offline-first/blob/master/pouchdb/09-replicate-database-bidirectional.js
Listening for Database Changes
32
var changes = remoteDb.changes({ since: "now"}).on("change", function(change) { // A document has changed console.log(change);}).on("complete", function(info) { // changes() was canceled console.log(info);});
https://github.com/bradley-holt/offline-first/blob/master/pouchdb/11-database-changes.js
HTML5 Offline Application Cache• Enables fully-functional offline
web apps
• Stores files and assets for offline browsing
• Makes page loads very fast, even when online
35
Cache Manifest File
36
<html manifest="example.appcache"> …</html>
CACHE MANIFEST# v1 - 2015-01-08index.htmllogo.pngapp.cssapp.js
Service Workers (Beta)
37
Client-side scripting framework for
•programmable cache
•sync
•push messaging
•geo-fencing
•background tasks
https://jakearchibald.github.io/isserviceworkerready/
Hybrid Mobile Web Apps• Native mobile web apps built with
HTML5, CSS and JavaScript
• Good for:• Fully-featured, cross-platform native apps
• High-fidelity prototypes
39
Responsive Mobile Web Apps• HTML5, CSS and JavaScript mobile
web apps
• Responsive design
• Enhanced to enable offline usage
40
Cloudant Sync• Library for iOS and Android
• Provides local storage and query API
• Optional sync to Cloudant
• Open-source and free to use
Cloudant Sync• Stores data using SQLite
• TouchDB provides MVCC
• Replication to Cloudant over HTTPS
• Cloudant Query API
Getting started with Cloudant Sync - iOS
44
CDTDatastore *ds = [manager datastoreNamed:@"mydb" error:&error];
pod "CDTDatastore"
• Install library
• Create database
Creating data Cloudant Sync - iOS
45
CDTDocumentRevision *rev = [CDTDocumentRevision revisionWithDocId:@"doc1"];
rev.body = [@{ @"description": @"Buy milk", @"completed": @NO, @"type": @"com.cloudant.sync.example.task"} mutableCopy];
CDTDocumentRevision *revision = [ds createDocumentFromRevision:rev error:&error];
Fetching data - Cloudant Sync - iOS
46
CDTDocumentRevision *retrieved = [datastore getDocumentWithId:@"doc1" error:&error];
Indexing data - Cloudant Sync - iOS
47
// create index on name, age and pet species NSString *name = [ds ensureIndexed:@[@"name", @"age", @"pet.species"] withName:@"basic"]
// create full-text index on name and comment NSString *name = [ds ensureIndexed:@[@"name", @"comment"] withName:@"basic_text_index" type:@"text"];
Querying data - Cloudant Sync - iOS
48
NSDictionary *query1 = @{ @"pet.species": @"cat" };
NSDictionary *query2 = @{ @"$or": @[ @{ @"pet.species": @{ @"$eq": @"dog" } }, @{ @"age": @{ @"$lt": @30 } } ]};
CDTQResultSet *result = [ds find:query];
Getting started with Cloudant Sync - Android
49
repositories { mavenLocal() maven { url "http://cloudant.github.io/cloudant-sync-eap/repository/" } mavenCentral()}
dependencies { compile group: 'com.cloudant', name: 'cloudant-sync-datastore-core', version:'0.14.0' compile group: 'com.cloudant', name: 'cloudant-sync-datastore-android', version:'0.14.0'}
• Install library
Creating a database - Cloudant Sync - Android
50
import com.cloudant.sync.datastore.*;
// Create a DatastoreManager using application internal storage path…
Datastore ds = manager.openDatastore("mydb");
Storing data - Cloudant Sync - Android
51
MutableDocumentRevision revision = new MutableDocumentRevision();
Map<String, Object> body = new HashMap<String, Object>();
body.put("animal", "cat");
revision.body = DocumentBodyFactory.create(body);
BasicDocumentRevision saved = ds.createDocumentFromRevision(revision);
Pro Forma• Define fields you want to collect
• Renders form saving data to PouchDB
• Replicates data to Cloudant
• Demohttps://glynnbird.github.io/proforma/
52
MD• Offline word processor
• Saves Markdown documents to PouchDB
• Replicates data to Cloudant
• Demohttp://mddoc.mybluemix.net/
53
Gutenberg• Offline e-book reader
• Replicates book list from server
• Each book is a Cloudant database
• Demohttp://glynnbird.github.io/gutenberg/
54
www.glynnbird.com• My home page
• Cloudant database of articles
• Replicated to PouchDB
• Appcache for offline first
• http://www.glynnbird.com/
55
Volt• Password vault in a Chrome
extension
• Data stored in encrypted in PouchDB
• Optional back to CouchDB/Cloudant
• https://github.com/glynnbird/volt
56
Location Tracker• Stores data locally in PouchDB
• Front end built with AngularJS
• Authentication logic built with Node.js
• User interface built with Leaflet
• Replicates location data to Cloudant
• More info:https://cloudant.com/location-tracker/
57
Glynn BirdDeveloper Advocate, Cloud Data [email protected]@glynn_birdgithub.com/glynnbird
Image Credits
59
• Joan Touzet (@wohali), ASF Member, CouchDB PMC Member<https://twitter.com/wohali/status/595689720933445632>
• Device landscape by Jeremy Keith, on Flickr<https://www.flickr.com/photos/adactio/6153481666>
• NASA New Horizons<https://www.nasa.gov/sites/default/files/thumbnails/image/nh-surface.jpg>
• Pneumatic Central by Sleestak, on Flickr<https://www.flickr.com/photos/dlanod/235990854>
• Mango with section on a white background by bangdoll, on Flickr<https://www.flickr.com/photos/bangdoll/5665235102>
• Grunge Warning Sign - Do Not Read This Sign by Nicolas Raymond, on Flickr<https://www.flickr.com/photos/80497449@N04/7417352980>