Mobile App Development with Cloudant

Glynn Bird, Developer Advocate, Cloud Data Services

@glynn_bird

2

3

4

Image Credit: Joan Touzet (@wohali), ASF Member, CouchDB PMC Member

5

Frameworks

6

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 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

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

Mobile Apps - PouchDB

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

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 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

PouchDB Framework Adapters

33

Web Apps Going Offline

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 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

Native iOS & Android Apps

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 Servicesglynn.bird@uk.ibm.com@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>