Creating an Effective Mobile API

Slide 1

Slide 1 text

Creating API’s for Mobile Nick DeNardis

Slide 2

Slide 2 text

@nickdenardis Associate Director of Web Communications Wayne State University http://wayne.edu/ Host of EDU Checkup http://educheckup.com/ Curator of EDU Snippits http://edusnippits.com/ Writer for .eduGuru http://doteduguru.com/

Slide 3

Slide 3 text

Disclaimer This talk is less about how to code an API but more about the strategy behind creating a ﬂexible and resilient API.

Slide 4

Slide 4 text

API: Application programming interface

Slide 5

Slide 5 text

Not just for robots. http://www.ﬂickr.com/photos/stevent/3241986538/

Slide 6

Slide 6 text

The API’s job is to make the developer as successful as possible http://knowyourmeme.com/memes/i-hate-sandcastles-success-kid

Slide 7

Slide 7 text

Where isn’t it useful? http://www.ﬂickr.com/photos/daychokesnight/2149714792/

Slide 8

Slide 8 text

Too slow... http://www.ﬂickr.com/photos/toolmantim/6170448143/

Slide 9

Slide 9 text

Too complicated... http://www.ﬂickr.com/photos/toolmantim/6170448143/

Slide 10

Slide 10 text

Adds a layer http://www.ﬂickr.com/photos/jabb/6715983809/

Slide 11

Slide 11 text

Complications with mobile “always on”

Slide 12

Slide 12 text

Mobile isn’t going anywhere 1.45 Million devices per day 371,000 births per day http://www.lukew.com/ff/entry.asp?1506

Slide 13

Slide 13 text

Mobile Data Trafﬁc Expected To Rise 40- Fold Over Next Five Years http://techcrunch.com/2010/03/30/mobile-data-traffic-rise-40-fold/

Slide 14

Slide 14 text

250 kb - Avg page weight 2.5 pages - Avg number per visit 625 kb - Bandwidth per visit Desktop 50 kb - Avg page weight 25 pages - Avg number per visit 1.25 mb - Bandwidth per visit Mobile 0 325 650 975 1300 Data Desktop Mobile

Slide 15

Slide 15 text

0 10 20 30 40 2009 2010 2011 2012 2013 2014 2015 2016 2017 Mobile Desktop Millions of visitors http://wayne.edu/

Slide 16

Slide 16 text

The Mobile Web is Slow And it’s mostly our fault

Slide 17

Slide 17 text

Time Cell Latency Initial HTML Javascript Images CSS You can’t blame the network for everything

Slide 18

Slide 18 text

Time Cell Latency New Content Images Second Request

Slide 19

Slide 19 text

Do less better

Slide 20

Slide 20 text

One size != ﬁt all Think versioning from the start https://api.twitter.com/1/ https://us2.api.mailchimp.com/1.3/ https://api.foursquare.com/v2/ https://api.instagram.com/v1/ https://www.salesforce.com/services/Soap/c/18.0 https://api.wayne.edu/v1/

Slide 21

Slide 21 text

SOAP The request: GET /StockPrice HTTP/1.1 Host: example.org Content-Type: application/soap+xml; charset=utf-8 Content-Length: nnn IBM The response: HTTP/1.1 200 OK Content-Type: application/soap+xml; charset=utf-8 Content-Length: nnn 45.25 The request: GET /StockPrice/IBM HTTP/1.1 Host: example.org Accept: text/xml Accept-Charset: utf-8 The response: HTTP/1.1 200 OK Content-Type: text/xml; charset=utf-8 Content-Length: nnn IBM 45.25 REST 4 kb vs 2 kb Round Trip

Slide 22

Slide 22 text

Stick to REST

Slide 23

Slide 23 text

XML sucks http://www.ﬂickr.com/photos/philmanker/3654636770/

Slide 24

Slide 24 text

Your best friend JSON Easy to encode: $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); json_encode($arr); Easy to decode: $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; json_decode($json); Javascript: var myObject = eval('(' + json + ')');

Slide 25

Slide 25 text

Existing Resources http://doteduguru.com/id7800-results-higher-ed-cms-usage-survey-2011.html

Slide 26

Slide 26 text

Not everything is in the CMS CMS Events LDAP Banner Gather & Clean Shadow storage API Webserver Website Mobile Website Mobile App Digital Signage Third Party

Slide 27

Slide 27 text

Rolling your own API Trust no one.

Slide 28

Slide 28 text

Create. Read. Update. Delete. http://www.ﬂickr.com/photos/fss/2181882493/

Slide 29

Slide 29 text

Start with a map http://www.ﬂickr.com/photos/56684679@N08/6155875352/

Slide 30

Slide 30 text

Read ﬁrst. http://www.ﬂickr.com/photos/hackaday/4425372655/

Slide 31

Slide 31 text

GET /academic/colleges/listing GET /academic/colleges/info GET /academic/majors/listing GET /academic/majors/info GET /academic/classes/listing GET /academic/classes/info GET /parking/availability/listing GET /parking/availability/info

Slide 32

Slide 32 text

The devil is in the details Simple URL Response code Total count Data container Keep it lightweight 91 KB

Slide 33

Slide 33 text

Use only what you need Filters Less data 41 KB

Slide 34

Slide 34 text

Writing data

Slide 35

Slide 35 text

POST /admissions/rﬁ/add POST /admissions/visit/add POST /admissions/application/add POST /academic/colleges/add POST /academic/colleges/edit POST /academic/majors/add POST /academic/majors/edit

Slide 36

Slide 36 text

Soft Delete (keep all the data!)

Slide 37

Slide 37 text

POST /academic/colleges/remove POST /academic/majors/remove POST /academic/classes/remove POST /parking/availability/remove

Slide 38

Slide 38 text

Authentication /api/user/auth

Slide 39

Slide 39 text

Cache. Cache. Cache.

Slide 40

Slide 40 text

Professional cache http://www.ﬂickr.com/photos/carlos/2417032795/

Slide 41

Slide 41 text

APC

Slide 42

Slide 42 text

Ghetto cache http://www.ﬂickr.com/photos/basic_sounds/5779597720/

Slide 43

Slide 43 text

Static ﬁles

Slide 44

Slide 44 text

if (typeof(localStorage) == 'undefined' ) { alert('Your browser does not support HTML5 localStorage. Try upgrading.'); } else { try { localStorage.setItem("name", "Hello World!"); //saves to the database, } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error } } document.write(localStorage.getItem("name")); //Hello World! localStorage.removeItem("name"); //deletes the matching item from the database } http://paperkilledrock.com/2010/05/html5-localstorage-part-one/ HTML5 localStorage

Slide 45

Slide 45 text

Expires header Semesters Subjects Degrees Map Categories Map Locations 1 Month Courses Media Experts 1 Week Course Availability Parking Availability No Cache Events News 1 Day

Slide 46

Slide 46 text

Our Stats Feb 2011 - In production 2.5 million requests 48% from mobile 21% iOS 23% Android 66% Web 95% GET’s 16 ms average response time

Slide 47

Slide 47 text

Examples

Slide 48

Slide 48 text

Mobile news

Slide 49

Slide 49 text

Google API maps/locations/listing events/event/listing directory/people/listing academic/courses/listing

Slide 50

Slide 50 text

maps/category/listing maps/location/info events/event/listing

Slide 51

Slide 51 text

faculty/proﬁle/info go/url/info

Slide 52

Slide 52 text

Hackathon Community through data http://www.ﬂickr.com/photos/hackny/5684887983/

Slide 53

Slide 53 text

Resources • http://apigee.com/ • http://rubyonrails.org/ • http://cakephp.org/ • http://37signals.com/svn/posts/3018-api-design-for-humans • http://broadcast.oreilly.com/2011/06/the-good-the-bad-the-ugly-of-rest- apis.html • http://sixrevisions.com/html/introduction-web-storage/ • http://webcomm.ﬁu.edu/2011/11/json-as-an-api-tool-and-why-its-awesome/ • http://doteduguru.com/id4579-results-higher-ed-cms-usage.html

Slide 54

Slide 54 text

Hackathons • http://dschool.stanford.edu/blog/2012/01/27/hack-d-kicks-off-more-than-a- dozen-projects-underway/ • http://civic.mit.edu/blog/schock/occupydata-hackathon-2-roundup • http://newmed.media.mit.edu/health-and-wellness-innovation-2012 • http://nyuad.nyu.edu/hackathon/about/ • http://startup.berkeley.edu/hackathon/ • http://www.njit.edu/hackathon/ • http://www.lib.umich.edu/art-architecture-engineering-library/ announcements/48-hour-mobile-app-hackathon