Creating an Effective Mobile API

Your visitors interact with content, not with your website. Content consistency is crucial to a successful user experience. Re-publishing is one option but it’s an inside-out action that relies on the authority controlling where the information goes. An API frees your data and the responsibility to where it is published and accessed. Mobile is a major consumer for your API but not every API is setup to handle the mass of requests coming from those devices. Learn how to mobile devices consume API’s with limited or low bandwidth and how to to tailor your API to be as efficient and effective as possible.

http://environmentsforhumans.com/2012/doteduguru-summit/

Transcript

1. Creating API’s for Mobile
   Nick DeNardis
   

   View Slide

2. @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/
   

   View Slide

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

   View Slide

4. API:
   Application programming interface
   

   View Slide

5. Not just for robots.
   http://www.flickr.com/photos/stevent/3241986538/
   

   View Slide

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

   View Slide

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

   View Slide

8. Too slow...
   http://www.flickr.com/photos/toolmantim/6170448143/
   

   View Slide

9. Too complicated...
   http://www.flickr.com/photos/toolmantim/6170448143/
   

   View Slide

10. Adds a layer
    http://www.flickr.com/photos/jabb/6715983809/
    

    View Slide

11. Complications with mobile
    “always on”
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. Time
    Cell Latency
    New Content
    Images
    Second Request
    

    View Slide

19. Do less better
    

    View Slide

20. 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.0
    https://api.wayne.edu/v1/
    

    View Slide

21. SOAP
    The request:
    GET /StockPrice HTTP/1.1
    Host: example.org
    Content-Type: application/soap+xml; charset=utf-8
    Content-Length: nnn
    
    xmlns:s="http://www.example.org/stock-service">
    
    
    IBM
    
    
    
    The response:
    HTTP/1.1 200 OK
    Content-Type: application/soap+xml; charset=utf-8
    Content-Length: nnn
    
    xmlns:s="http://www.example.org/stock-service">
    
    
    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
    

    View Slide

22. Stick to REST
    

    View Slide

23. XML sucks
    http://www.flickr.com/photos/philmanker/3654636770/
    

    View Slide

24. 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 + ')');
    

    View Slide

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

    View Slide

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

    View Slide

27. Rolling your own API
    Trust no one.
    

    View Slide

28. Create. Read. Update. Delete.
    http://www.flickr.com/photos/fss/2181882493/
    

    View Slide

29. Start with a map
    http://www.flickr.com/photos/56684679@N08/6155875352/
    

    View Slide

30. Read first.
    http://www.flickr.com/photos/hackaday/4425372655/
    

    View Slide

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

    View Slide

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

    View Slide

33. Use only what you need
    Filters
    Less data
    41 KB
    

    View Slide

34. Writing data
    

    View Slide

35. POST /admissions/rfi/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
    

    View Slide

36. Soft Delete
    (keep all the data!)
    

    View Slide

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

    View Slide

38. Authentication
    /api/user/auth
    

    View Slide

39. Cache. Cache. Cache.
    

    View Slide

40. Professional cache
    http://www.flickr.com/photos/carlos/2417032795/
    

    View Slide

41. APC
    $bar = 'BAR';
    apc_store('foo', $bar);
    var_dump(apc_fetch('foo'));
    ?>
    

    View Slide

42. Ghetto cache
    http://www.flickr.com/photos/basic_sounds/5779597720/
    

    View Slide

43. Static files
    if ((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);
    ?>
    

    View Slide

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

    View Slide

45. Expires header
    header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));
    ?>
    Semesters
    Subjects
    Degrees
    Map Categories
    Map Locations
    1 Month
    Courses
    Media Experts
    1 Week
    Course Availability
    Parking Availability
    No Cache
    Events
    News
    1 Day
    

    View Slide

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

    View Slide

47. Examples
    

    View Slide

48. Mobile news
    

    View Slide

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

    View Slide

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

    View Slide

51. faculty/profile/info
    go/url/info
    

    View Slide

52. Hackathon
    Community through data
    http://www.flickr.com/photos/hackny/5684887983/
    

    View Slide

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

    View Slide

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

    View Slide

55. Questions?
    Don’t be shy.
    

    View Slide

56. Thank You
    @nickdenardis
    nick.denardis@gmail.com
    http://nickdenardis.com/
    

    View Slide