$30 off During Our Annual Pro Sale. View Details »

Creating an Effective Mobile API

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/

Nick DeNardis

April 11, 2012
Tweet

More Decks by Nick DeNardis

Other Decks in Programming

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
    [email protected]
    http://nickdenardis.com/

    View Slide