Client-side APIs

How, What, & Why

https://teaching-materials.org/apis

What's a (web) API?

"Application Programming Interface"

Client-side APIs

Client-side APIs: How?

HTML APIs

IMG as API

<img src="http://otherdomain.com/service?param=x&otherparam=y">
  

First image API?

<img src="http://counter.digits.net/?
counter={d5ba6c4f-bd07-cb84-5583-0f90772b9dff}&
template=simple">
  

What are query parameter?

<img src="http://otherdomain.com/service?param=x&otherparam=y">
  

key - value pairs

              ?
              param=x
              &
              otherparam=y
  

IMG as API: Google Maps Image APIs

<img src="
http://maps.google.com/maps/api/staticmap?
center=48.8584,2.2945&
zoom=16&
maptype=satellite&
size=250x300&
sensor=false">

<img src="
http://maps.googleapis.com/maps/api/streetview?
size=300x250&
location=51.5030943,-0.1778232&
fov=90&
heading=370&
pitch=-20&
sensor=false">

Read more: Google Static Maps API | Google Street View Image API

IMG as API: Google Charts API

<img width="550" height="250" src="
http://chart.apis.google.com/chart?
cht=p&
chs=550x250&
chd=t:10,80,10&
chco=FAFAFA,FFFF00,FAFAFA&
chl=Does%20not%20resemble%20Pac-man|Resembles%20Pac-man&
chtt=Percentage%20of%20Google%20Chart%20Which%20Resembles%20Pac-man">

Read more: Google Charts API Docs
Note the deprecation notice!

IFRAME as API: Simple

<iframe src="http://apidomain.com/widget.html"></iframe>

YouTube Embed:

<iframe width="420" height="315"
 src="https://www.youtube.com/embed/epUk3T2Kfno?rel=0&autoplay=1"
 frameborder="0" allowfullscreen></iframe>

Youtube Player Embed Reference

Exercise Time!

JS Widget/Snippet APIs

SCRIPT as API: Libraries

Your code:

<script src="http://apidomain.com/library.js"></script>
<script>
apiNamespace.apiFunction();
</script>

Their code:

window.apiNamespace.apiFunction = function() {
  // Do exciting API thing here
  // Maybe using images or iframes, too.
}

Pinterest

<a href="https://www.pinterest.com/pin/create/button/">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png">
</a>
  
<script
    type="text/javascript"
    async defer
    src="//assets.pinterest.com/js/pinit.js"></script>
                

Pinterest Button API Docs | JSBin example

Disqus

<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'otherfancystuff';
var disqus_developer = 1;

(function() {
  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>

More reading: Disqus Universal Code Docs

Examples: Shiba Another cute Shiba

Exercise Time!

JS Data APIs

XmlHttpRequest as API?

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://apidomain.com/method?param=bla');
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status==200) {
    var data = xhr.responseText;
  }
};
xhr.send();

SCRIPT as API: JSONP

Your page:

<script src="https://gdi-jsonp.herokuapp.com/app.php?callback=onLoadData">
</script>
<script>
function onLoadData(json) {
  $('#demo').html('YO YO YO ' + json.name);
}
</script>

API Server:

<?php
$callback = $_GET['callback'];

echo $callback . "({'name': 'Girl Develop It'});";
?>

reddit JSONP API

Example URL: http://www.reddit.com/search.json?q=girldevelopit

function onLoad(json) {
  var posts = json.data.children;
  console.log(posts);
  document.body.innerHTML = posts[0].data.title;
}

function fetchJSON(query) {
  var script = document.createElement('script');
  script.src = 'https://www.reddit.com/search.json?q='
    + query + '&jsonp=onLoad';
  document.getElementsByTagName('body')[0].appendChild(script);
}

fetchJSON('girldevelopit');

Reddit API docs | JSBin example

Flickr JSONP API

function fetchPhotos(query) {
  $.ajax({
    url: 'https://api.flickr.com/services/rest/',
    data: {api_key: 'a0de4a213ab1191732ec4db4daf586a3',
           method: 'flickr.photos.search',
           tags: query, per_page: '6', format: 'json'},
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    success: function(json){
      var photos = json.photos.photo;
      for (var i = 0; i < photos.length; i++) {
        var photo = photos[i];
        var photoUrl = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_' + 'm.jpg';
        $('#demo').append('<img src="' + photoUrl + '">');
      }
    }
  });
}
fetchPhotos('rabbits');

See also: jQuery .ajax() | Flickr API | JSBin example

Combo APIs

...they do it all!

Google Maps & US Geological Survery APIS

With an api key!

Tutorial Link

Exercise Time!

Client-side APIs: What?

See also: ProgrammableWeb.com API Directory

Client-side APIs: What?

Client-side APIs: Functionality

• Analytics
• Site Search
• Text Processing (Translation/Analysis/TTS/Conversion)
• Image Processing (Editing/Filter)
• Payment
• Communication (Telephony/Messaging/Chat/Email)

Client-side APIs: Data

• Mapping
• Real Estate
• Shopping
• Weather
• Movies
• Science
• Books
• Words
• Government
• Food
• Sports
• Travel
• Wikipedia (Everything)

APIs: User Data

• Social Networks
• Multimedia: Music, Video, Photos
• Documents

So you want to use an API...

• Will you save time/money?
• What are the terms?
• What is the pricing?
• How stable is it?
• How will it affect performance?
• What's your plan B?

APIs are...

function synonymify(word) {
  var url = 'https://api.wordnik.com/v4/word.json/' + word + '/related';
  var params = {
    'api_key': '98479a51ec674585e400609183c0e5d78bd7b4eba8a8810b4',
    'type': 'synonym',
    'partOfSpeech': 'adjective'
  }

  JSONP.get(url, params, null, function(json) {
    var synonyms = json[0].words;
    for (var i = 0; i < synonyms.length; i++) {
      $('#demo').append(synonyms[i] + '
');
    }
  });
}
synonymify('awesome');

See also: Wordnik API | ProgrammableWeb