Mobile App Development With IBM Cloudant

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

Offline, online and somewhere in-between
9

The Eight Fallacies of Distributed Computing
1. 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

Introducing CouchDB & IBM Cloudant

Apache CouchDB
• JSON document store
• HTTP API
• Replication
• Free, open-source
16

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 – built for scale
19

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 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
28
• Primary Index
• MapReduce
• PouchDB-find plugin
• PouchDB-quick search plugin

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 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-08
index.html
logo.png
app.css
app.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 or Responsive Mobile Web Apps

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
• Demo
https://glynnbird.github.io/proforma/
52

MD
• Offline word processor
• Saves Markdown documents to
PouchDB
• Replicates data to Cloudant
• Demo
http://mddoc.mybluemix.net/
53

Gutenberg
• Offline e-book reader
• Replicates book list from server
• Each book is a Cloudant database
• Demo
http://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 Bird
Developer Advocate, Cloud Data Services
glynn.bird@uk.ibm.com
@glynn_bird
github.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>

Mobile App Development With IBM Cloudant

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Mobile App Development With IBM Cloudant (20)

More from IBM Cloud Data Services (16)

Recently uploaded (20)

Mobile App Development With IBM Cloudant