Creating API’s for Mobile
        Nick DeNardis
@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/
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 day
                 371,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/
Desktop
250 kb - Avg page weight
2.5 pages - Avg number per visit   1300


625 kb - Bandwidth per visit        975


                                    650

Mobile                              325
50 kb - Avg page weight
25 pages - Avg number per visit       0
                                                    Data

                                          Desktop          Mobile
1.25 mb - Bandwidth per visit
Mobile                 Desktop

              40



              30


Millions of
 visitors     20



              10



               0
                2009   2010   2011     2012   2013   2014   2015      2016   2017

                                     http://wayne.edu/
The Mobile Web is Slow
     And it’s mostly our fault
You can’t blame the network for everything


    CSS



  Images




 Javascript


Initial HTML

Cell Latency

                          Time
Second Request


  Images




New Content




Cell Latency

                      Time
Do less better
One size != fit all
  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/



 Think versioning from the start
SOAP                                                    REST
The request:                                            The request:
GET /StockPrice HTTP/1.1                                GET /StockPrice/IBM HTTP/1.1
Host: example.org                                       Host: example.org
Content-Type: application/soap+xml; charset=utf-8       Accept: text/xml
Content-Length: nnn                                     Accept-Charset: utf-8
<?xml version="1.0"?>                                   The response:
<env:Envelope xmlns:env="http://www.w3.org/
2003/05/soap-envelope"                                  HTTP/1.1 200 OK
   xmlns:s="http://www.example.org/stock-service">      Content-Type: text/xml; charset=utf-8
   <env:Body>                                           Content-Length: nnn
     <s:GetStockQuote>
          <s:TickerSymbol>IBM</s:TickerSymbol>          <?xml version="1.0"?>
     </s:GetStockQuote>                                 <s:Quote xmlns:s="http://example.org/stock-
   </env:Body>                                          service">
</env:Envelope>                                              <s:TickerSymbol>IBM</s:TickerSymbol>
                                                             <s:StockPrice>45.25</s:StockPrice>
The response:                                           </s:Quote>
HTTP/1.1 200 OK
Content-Type: application/soap+xml; charset=utf-8
Content-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>

                                         4 kb vs 2 kb
</env:Envelope>




                                         Round Trip
Stick to REST
http://www.flickr.com/photos/philmanker/3654636770/
                                                     XML sucks
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
                                          Website
CMS
         Gather &
          Clean

                                          Mobile
                                          Website
Events
                    Shadow
                    storage

                                          Mobile
                                           App

LDAP
                                API
                              Webserver
                                           Digital
                                          Signage


Banner

                                           Third
                                           Party
Rolling your own API
       Trust 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/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
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/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
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
<?php
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);

?>
HTML5 localStorage
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/
Expires header
        <?php
        header('Expires: '.gmdate('D, d M Y H:i:s GMT', time() + 3600));
        ?>




1 Month              1 Week                          1 Day
Semesters      Courses                                Events
Subjects       Media Experts                          News
Degrees
Map Categories                                       No Cache
Map Locations
                                                      Course Availability
                                                      Parking Availability
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
Examples
Mobile news
maps/locations/listing
Google API


                  events/event/listing




             directory/people/listing




             academic/courses/listing
maps/category/listing

                           events/event/listing


                        maps/location/info
faculty/profile/info




                      go/url/info
Hackathon
                                                 Community 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.
Thank You
      @nickdenardis
nick.denardis@gmail.com
 http://nickdenardis.com/

Creating an Effective Mobile API