Creating API’s for MobileNick DeNardis
@nickdenardis
Associate Director of Web Communications Wayne State Universityhttp://wayne.edu/
Host of EDU Checkuphttp://educheckup.com/
Curator of EDU Snippitshttp://edusnippits.com/
Writer for .eduGuruhttp://doteduguru.com/
Disclaimer
This talk is less about how to code an API but more about the strategy behind creating a flexible and resilient API.
API:Application programming interface
Not just for robots.http://www.flickr.com/photos/stevent/3241986538/
The API’s job is to make the developer as successful as possible
http://knowyourmeme.com/memes/i-hate-sandcastles-success-kid
Where isn’t it useful?
http://www.flickr.com/photos/daychokesnight/2149714792/
Too slow...
http://www.flickr.com/photos/toolmantim/6170448143/
Too complicated...http://www.flickr.com/photos/toolmantim/6170448143/
Adds a layer
http://www.flickr.com/photos/jabb/6715983809/
Complications with mobile“always on”
Mobile isn’t going anywhere
1.45 Million devices per day371,000 births per day
http://www.lukew.com/ff/entry.asp?1506
Mobile Data Traffic Expected To Rise 40-Fold Over Next Five Years
http://techcrunch.com/2010/03/30/mobile-data-traffic-rise-40-fold/
250 kb - Avg page weight2.5 pages - Avg number per visit
625 kb - Bandwidth per visit
Desktop
50 kb - Avg page weight25 pages - Avg number per visit
1.25 mb - Bandwidth per visit
Mobile
0
325
650
975
1300
Data
Desktop Mobile
0
10
20
30
40
2009 2010 2011 2012 2013 2014 2015 2016 2017
Mobile Desktop
Millions of visitors
http://wayne.edu/
The Mobile Web is SlowAnd it’s mostly our fault
Time
Cell Latency
Initial HTML
Javascript
Images
CSS
You can’t blame the network for everything
Time
Cell Latency
New Content
Images
Second Request
Do less better
One size != fit 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.0https://api.wayne.edu/v1/
SOAPThe request:
GET /StockPrice HTTP/1.1Host: example.orgContent-Type: application/soap+xml; charset=utf-8Content-Length: nnn
<?xml version="1.0"?><env:Envelope xmlns:env="http://www.w3.org/2003/05/soap-envelope" xmlns:s="http://www.example.org/stock-service"> <env:Body> <s:GetStockQuote> <s:TickerSymbol>IBM</s:TickerSymbol> </s:GetStockQuote> </env:Body></env:Envelope>
The response:
HTTP/1.1 200 OKContent-Type: application/soap+xml; charset=utf-8Content-Length: nnn
<?xml version="1.0"?><env:Envelope xmlns:env="http://www.w3.org/2003/05/soap-envelope" xmlns:s="http://www.example.org/stock-service"> <env:Body> <s:GetStockQuoteResponse> <s:StockPrice>45.25</s:StockPrice> </s:GetStockQuoteResponse> </env:Body></env:Envelope>
The request:
GET /StockPrice/IBM HTTP/1.1Host: example.orgAccept: text/xmlAccept-Charset: utf-8
The response:
HTTP/1.1 200 OKContent-Type: text/xml; charset=utf-8Content-Length: nnn
<?xml version="1.0"?><s:Quote xmlns:s="http://example.org/stock-service"> <s:TickerSymbol>IBM</s:TickerSymbol> <s:StockPrice>45.25</s:StockPrice></s:Quote>
REST
4 kb vs 2 kbRound Trip
Stick to REST
XML suckshttp://www.flickr.com/photos/philmanker/3654636770/
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 + ')');
Existing Resources
http://doteduguru.com/id7800-results-higher-ed-cms-usage-survey-2011.html
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
Rolling your own APITrust no one.
Create. Read. Update. Delete.
http://www.flickr.com/photos/fss/2181882493/
Start with a map
http://www.flickr.com/photos/56684679@N08/6155875352/
Read first.
http://www.flickr.com/photos/hackaday/4425372655/
GET /academic/colleges/listingGET /academic/colleges/info
GET /academic/majors/listingGET /academic/majors/info
GET /academic/classes/listingGET /academic/classes/info
GET /parking/availability/listingGET /parking/availability/info
The devil is in the details
Simple URL
Response code
Total count
Data container
Keep it lightweight
91 KB
Use only what you need
Filters
Less data
41 KB
Writing data
POST /admissions/rfi/addPOST /admissions/visit/addPOST /admissions/application/add
POST /academic/colleges/addPOST /academic/colleges/edit
POST /academic/majors/addPOST /academic/majors/edit
Soft Delete(keep all the data!)
POST /academic/colleges/remove
POST /academic/majors/remove
POST /academic/classes/remove
POST /parking/availability/remove
Authentication/api/user/auth
Cache. Cache. Cache.
Professional cache
http://www.flickr.com/photos/carlos/2417032795/
APC
<?php$bar = 'BAR';apc_store('foo', $bar);var_dump(apc_fetch('foo'));?>
Ghetto cache
http://www.flickr.com/photos/basic_sounds/5779597720/
Static files
<?phpif ((is_file($_SERVER['SCRIPT_FILENAME'].'.json')) && (time()-filemtime($_SERVER['SCRIPT_FILENAME'].'.json') < 3600)) { readfile($_SERVER['SCRIPT_FILENAME'].'.json'); exit; }
// (the php script itself goes here)
echo $response;$fp = fopen($_SERVER['SCRIPT_FILENAME'].'.json', 'w');fwrite($fp, $response);fclose($fp);
?>
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
Expires header<?php header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));?>
SemestersSubjectsDegreesMap CategoriesMap Locations
1 Month
CoursesMedia Experts
1 Week
Course AvailabilityParking Availability
No Cache
EventsNews
1 Day
Our StatsFeb 2011 - In production2.5 million requests
48% from mobile21% iOS23% Android66% Web
95% GET’s16 ms average response time
Examples
Mobile news
Google APImaps/locations/listing
events/event/listing
directory/people/listing
academic/courses/listing
maps/category/listing
maps/location/info
events/event/listing
faculty/profile/info
go/url/info
HackathonCommunity through data
http://www.flickr.com/photos/hackny/5684887983/
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.fiu.edu/2011/11/json-as-an-api-tool-and-why-its-awesome/
• http://doteduguru.com/id4579-results-higher-ed-cms-usage.html
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
Questions?Don’t be shy.
Recommended
