Intro to APIs

Working with JavaScript APIs


Jeff Shamley - Web Developer - Shamley Incorporated
Online: http://jeffshamley.com - Twitter: @jeff_shamley - GitHub: @jshamley

What is an API?

Application Programming Interfaces (APIs) are a set of routines, protocols and tools for building applications.

Library APIs

Specifies routines, data structures, object classes and variables in a package of files.

Web Service APIs

REST - Representational state transfer APIs expose remote calls using HTTP methods POST, PUT, GET and DELETE.

SOAP - Simple Object Access Protocol uses XML to exchange structured data in the implementation of web services.

XML-RPC and JSON-RPC - Remote procedure calls using HTTP as a transport mechanism.

Why should we use APIs?

To integrate other products or services in your application without all of the overhead.

Google Maps API

<!DOCTYPE html> 
<html> 
<head>  
  <script src="https://maps.googleapis.com/maps/api/js"></script> 
  <script> 
    function initialize() { 
      var mapCanvas = document.getElementById('map-canvas'); 
      var mapOptions = { 
        center: new google.maps.LatLng(44.5403, -78.5463), 
        zoom: 18, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(mapCanvas, mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
  </script> 
</head> 
<body> 
  <div id="map-canvas"></div> 
</body> 
</html>
Map
https://developers.google.com/maps/documentation/javascript/

More Options

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var myLatlng = new google.maps.LatLng(40.396133, -105.076096);
  var mapOptions = {
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
  map.set('styles', [
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [
        { color: '#900900' },
        { weight: 1.2 }
      ]
    }, {
      featureType: 'poi.school',
      elementType: 'geometry',
      stylers: [
        { hue: '#fff700' },
        { lightness: -15 },
        { saturation: 50 }
      ]
    }
  ]);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    animation: google.maps.Animation.DROP,
    title: 'NoCo JavaScript',
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Intro to APIs
NoCo JavaScript'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
  marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Map

Vimeo Player API

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
$(function() {
  var iframe = $('#player1')[0];
  var player = $f(iframe);

  $('button.play').bind('click', function() {
    player.api('play');
  });
  $('button.pause').bind('click', function() {
    player.api('pause');
  });
});
Video
https://developer.vimeo.com/player/js-api

More Options

$(function() {
  var player = $('iframe');
  var playerOrigin = '*';
  var status = $('.status');

  // Call the API when a button is pressed
  $('button').on('click', function() {
    post($(this).text().toLowerCase());
  });

  // Listen for messages from the player
  if (window.addEventListener) {
    window.addEventListener('message', onMessageReceived, false);
  }
  else {
    window.attachEvent('onmessage', onMessageReceived, false);
  }

  // Handle messages received from the player
  function onMessageReceived(event) {
    // Handle messages from the vimeo player only
    if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
      return false;
    }
    
    if (playerOrigin === '*') {
      playerOrigin = event.origin;
    }
    
    var data = JSON.parse(event.data);
    
    switch (data.event) {
      case 'ready':
        onReady();
        break;
         
      case 'playProgress':
        onPlayProgress(data.data);
        break;
          
      case 'pause':
        onPause();
        break;
         
      case 'finish':
        onFinish();
        break;
    }
  }

  // Helper function for sending a message to the player
  function post(action, value) {
    var data = {
      method: action
    };
    
    if (value) {
      data.value = value;
    }
    
    var message = JSON.stringify(data);
    player[0].contentWindow.postMessage(data, playerOrigin);
  }

  function onReady() {
    status.text('ready');
    
    post('addEventListener', 'pause');
    post('addEventListener', 'finish');
    post('addEventListener', 'playProgress');
  }

  function onPause() {
    status.text('paused');
  }

  function onFinish() {
    status.text('finished');
  }

  function onPlayProgress(data) {
    status.text(data.seconds + 's played');
  }
});
Video

Questions?

Working with JavaScript APIs


Jeff Shamley - Web Developer - Shamley Incorporated
Online: http://jeffshamley.com - Twitter: @jeff_shamley - GitHub: @jshamley