dat310-web-apis

Web Programming Web APIs Krisztian Balog | University of Stavanger

Web APIs - Set of methods and tools that can
be used for building applications - Server-side APIs - Making resources accessible by 3rd party systems - Based on request-response message system, typically HTTP-based - All major players provide APIs: Google, Facebook, Twitter, YouTube, etc. - Mashups: web applications that combine multiple server-side APIs - Client-side web APIs - Commonly, browser extensions

Server-side APIs - JavaScript Web APIs - Inserting ready-made elements
("widgets") from a 3rd party - RESTful Web APIs - Accessing data and/or services of a 3rd party

Google Maps

Google Maps API - Allows to customize maps and the
information on the maps - See http://www.noupe.com/development/collection-of-the- coolest-uses-of-the-google-maps-api.html

Example  examples/apis/google_maps/simple_map.html

<!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <title>Google Maps example</title> 
<script src="http://maps.googleapis.com/maps/api/js"></script>  <script>  function initialize() {  var mapProp = {  center: new google.maps.LatLng(58.9700, 5.7331),  zoom: 5,  mapTypeId: google.maps.MapTypeId.ROADMAP  };  var map = new google.maps.Map( document.getElementById("googleMap"), mapProp);  }  google.maps.event.addDomListener(window, 'load', initialize);  </script>  </head>  <body>  <div id="googleMap" style="width:500px;height:380px;"></div>  </body>  </html> Load the Google Maps JavaScript library Set map properties Div element to hold the map Create a Map object Execute the initialize() function upon page load

Map types - mapTypeId speciﬁes the map type to display
- ROADMAP — normal, default 2D map - SATELLITE — photographic map - HYBRID — photographic map + roads and city names - TERRAIN — map with mountains, rivers, etc.

Drawing on the map - Overlays are objects on a
map that are bound to latitude/ longitude coordinates - Types of overlays - Marker — single locations; can also display custom icon images - Polyline — series of straight lines - Polygon — series of straight lines on a map, and the shape is "closed" - Circle and rectangle - Info windows — content within a popup balloon on top of a map - Custom overlays

Example  examples/apis/google_maps/marker.html

Example  examples/apis/google_maps/marker.html <script>  function initialize() {  var locStavanger = new
google.maps.LatLng(58.9700, 5.7331);  var mapProp = {  center: locStavanger,  zoom: 5,  mapTypeId: google.maps.MapTypeId.ROADMAP  };  var map = new google.maps.Map( document.getElementById("googleMap"), mapProp);    // marker for Stavanger  var marker = new google.maps.Marker({  position: locStavanger  });  marker.setMap(map);  }  google.maps.event.addDomListener(window, 'load', initialize);  </script> The Marker constructor creates a marker   (the position property must be set!) Add the marker to the map

Info window - An InfoWindow diplays content (usually text or
images) in a popup window above the map at a given location - Typically, an info window is attached to a marker

Example  examples/apis/google_maps/info_window.html

Example  examples/apis/google_maps/marker.html <script>  function initialize() {   var map =
new google.maps.Map(…);    var marker = new google.maps.Marker({  position: locStavanger  });  marker.setMap(map);    var contentString = "Hello there! This is <strong>Stavanger</strong>,  the center of the world";  var infowindow = new google.maps.InfoWindow({  content: contentString  });  marker.addListener('click', function() {  infowindow.open(map, marker);  });  }  google.maps.event.addDomListener(window, 'load', initialize);  </script> Create info window Assign info window to the marker’s click event

Controls - Default control set: - Zoom — displays a
slider or "+/-" buttons to control the zoom level - MapType — lets the user toggle between map types (roadmap/satellite) - Street view — icon which can be dragged to the map to enable Street view - In addition to the default controls, Google Maps also has: - Scale — displays a map scale element - Rotate — allows you to rotate maps - Overview map — thumbnail overview map

Example  examples/apis/google_maps/controls_disabled.html

Example  examples/apis/google_maps/controls_disabled.html <script>  function initialize() {  var locStavanger = new
google.maps.LatLng(58.9700, 5.7331);  var mapProp = {  center: locStavanger,  zoom: 5,  disableDefaultUI: true,  mapTypeId: google.maps.MapTypeId.ROADMAP  };  var map = new google.maps.Map( document.getElementById("googleMap"), mapProp);  }    google.maps.event.addDomListener(window, 'load', initialize);  </script> Default UI disabled

Example  examples/apis/google_maps/controls.html

Example  examples/apis/google_maps/controls.html <script>  function initialize() {  var locStavanger = new
google.maps.LatLng(58.9700, 5.7331);  var mapProp = {  center: locStavanger,  zoom: 5,  mapTypeId: google.maps.MapTypeId.SATELLITE,  zoomControl: true,  zoomControlOptions: {  position: google.maps.ControlPosition.LEFT_CENTER  },  scaleControl: true,  streetViewControl: false,  overviewMapControl: true,  fullscreenControl: true  };  var map = new google.maps.Map( document.getElementById("googleMap"), mapProp);  }  google.maps.event.addDomListener(window, 'load', initialize);  </script>

Exercises #1, #2 https://github.com/uis-dat310-spring19/course-info/tree/master/  exercises/apis

RESTful Web APIs

REST - REpresentational State Transfer - REST is an architectural
style (not a protocol) - Web service APIs are called RESTful - Uniform interface separates clients from servers - Data storage is internal to the server - Servers are not concerned with the user’s state - Stateless - The client must provide all the information for the server to fulﬁll the request. No sessions.

Uniform interface - Resources are identiﬁed by URIs - Operations
are performed on resources - Resources are manipulated through representations - Representation contains enough information for the client to modify/ delete it on the server - Representations are typically in JSON or XML format

RESTful web APIs - HTTP based - Resources are identiﬁed
by URIs - E.g., http://example.com/resources/ - Operations correspond to standard HTTP methods - GET, PUT, POST, DELETE - Media type is JSON

Typical RESTful API GET PUT POST DELETE Collection URI  http://example.com/
resources List elements Replace the entire collection Create a new element in the collection Delete the entire collection Element URI  http://example.com/ resources/item17 Retrieve the representation of an element Replace element or create if it doesn’t exist generally not used Delete the element

Making HTTP requests - How to make HTTP requests? -
JavaScript: using XMLHttpRequest object - jQuery: $.ajax(), $.post(), $.get() - Python: requests.get()

HTTP requests in jQuery - Using the $.ajax() method  -
This won’t work cross-domain because of the same-origin policy! $.ajax({  url: 'http://otherserver.com/script.cgi',  type: 'DELETE',  success: function(result) {  // Do something with the result  }  });

Same-origin policy - A script in one page can only
access data in a second web page, if both have the same origin - Same protocol, host, and port - Workarounds - Request data from using a server-side script - JSONP

JSONP - "JSON with padding" - A workaround to be
able to request data from a server in a diﬀerent domain - Relies on the fact that browsers don’t enforce the same-origin policy on <script> tags - The server wraps the response with a callback function - The server must know how to respond with JSONP-formatted results! - JSONP is limited to GET requests!

JSONP - Example request  http://www.example.net/sample.aspx?callback=mycallback - Normal JSON response -
JSONP response - Since the request came from inside a <script> tag, it will be executed { foo: 'bar' } mycallback({ foo: 'bar' });

JSONP request in JavaScript   <script src="https://status.github.com/api/status.json?callback=apiStatus"> </script>      <script> function apiStatus(data) {  console.log(data.status);  }  </script>

JSONP request in jQuery <script>  $.getJSON("http://api_url.com?jsoncallback=?",  {  param1: "value1",  param2:
"value2"  },  function (data) {  // processing data  });  </script>

RESTful web APIs

Authentication - Sending authorized requests to an API - OAuth
protocol  http://oauth.net/ - Application-only authentication - Application makes API requests on its own behalf, without a user context - Application-user authentication - Making API calls on behalf of a user - Identify the user’s identity (and permission) in addition to the application’s identity

Flickr

Flickr - Flickr’s public feed is available as JSON -
https://www.ﬂickr.com/services/feeds/docs/photos_public/ - Typical Flickr JSON object "items": [ { "title": "View from the hotel", "link": "http://www.flickr.com/photos/33112458@N08/[...]", "media": {"m":"http://farm4.static.flickr.com/[...]4a6569750c_m.jpg"}, "date_taken": "2008-12-04T04:43:03-08:00", "description": "Talk On Travel[…]", "published": "2008-12-04T12:43:03Z", "author": "[email protected] (Talk On Travel)", "author_id": "33112458@N08", "tags": "spain dolphins tenerife canaries lagomera aqualand […]" } …

Exercises #3, #4 https://github.com/uis-dat310-spring19/course-info/tree/master/  exercises/apis

Twitter / Facebook

Twitter or Facebook API - Behaves similarly like the search
feature in mobile/web clients - Public content requires (application-only) authentication  https://dev.twitter.com/oauth/application-only - Create an application to get an API key  https://dev.twitter.com/apps - Personal content requires user authentication token

References - Google Maps API - https://developers.google.com/maps/documentation/javascript/ - https://developers.google.com/maps/tutorials/ -
http://www.w3schools.com/googleapi/ - REST API tutorial - http://www.restapitutorial.com/ - OAuth (Twitter’s documentation) - https://dev.twitter.com/oauth

dat310-web-apis

dat310-web-apis

More Decks by Leander Jehl

Other Decks in Education

Featured

Transcript