Programming Assignment 4

CS640 Fall 2014

Due: Friday, December 5 at 11:59pm

Overview

For this assignment, you will build a mobile website that uses REST APIs to geo-locate your device and provide you with location-specific information. You will also measure the accuracy of IP-based geolocation, and measure how page complexity, choice of remote services, and last-mile network connectivity influences web page load times.

Learning Objectives

After completing this programming assignment, students should be able to:

Clarifications


Part 1: Building Your Mobile Website

For the first part of this assignment, you will build a mobile website that: (1) determines a device’s location, and (2) provides two pieces of location-specific information. Both components of your website will use REST APIs provided by third-party services.

AJAX and REST

Your website must use Asynchronous JavaScript + XML (AJAX) and Representational State Transfer (REST) APIs to interact with the third-party services.

AJAX, also commonly referred to as AJAJ (Asynchronous JavaScript + JSON (JavaScript Object Notation)), is a model where a specific URI is requested using JavaScript. When a response is received, a callback function is invoked and provided with the data, in XML or JSON format, contained in the response. A web page can then display this data and/or use it to issue other requests. To learn how to use AJAX, read the W3School’s AJAX Tutorial.

REST is a model where specific pieces of data are requested by issuing HTTP requests for specific URIs. For example, Open Weather Map provides a REST API for access weather data. A request for the URI
http://api.openweathermap.org/data/2.5/weather?lat=43.071712&lon=-89.406672 will return the current weather for the area around the Computer Sciences building in JSON format:

{"coord":{"lon":-89.41,"lat":43.07},"sys":{"type":1,"id":3003,"message":0.0172,"country":"US","sunrise":1416401763,"sunset":1416436219},"weather":[{"id":600,"main":"Snow","description":"light snow","icon":"13d"}],"base":"cmc stations","main":{"temp":268.91,"pressure":1009,"humidity":58,"temp_min":267.15,"temp_max":270.15},"wind":{"speed":7.7,"deg":280,"gust":11.3},"clouds":{"all":90},"dt":1416429900,"id":5273087,"name":"Shorewood Hills","cod":200}

To learn how to use the REST API for specific service, consult the documentation provided by that service.

JSONP

Some services which provide REST APIs do not allow cross-site scripting. If a site allows cross-site scripting, it will include
  Access-Control-Allow-Origin: * 
as an option in the HTTP reply. For example,
Telize and OpenWeatherMap allow cross-site scripting. You can use traditional AJAX/AJAJ with these sites, as described above.


When sites do not allow cross-site scripting, they often support JSONP. JSONP is a mechanism in which the JSON returned by a site’s REST API is wrapped in a function call; see the
JSONP Wikipedia page for more information on how JSONP works. Both SMSMyBus and Bing Maps Traffic support JSONP.

Below is a snippet of Javascript for using JSONP to request data via a service’s REST API
  function fetchJsonP(url) {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = url;
   document.getElementsByTagName("head")[0].appendChild(script);
 }

The URL you provide as an argument, must include the appropriate parameter and function name for the callback function. For example, to use JSONP with
SMSMyBus, you must include the callback parameter whose value is the name of your callback function:
  http://api.smsmybus.com/v1/getarrivals?
   key=uwcompsci&stopID=1101
&callback=myCallbackFunction
For the Bing Maps Traffic API, you must include the jsonp parameter in the URL.

Geolocation

Your website must geo-locate a device in two different ways: (1) based on the device’s IP, and (2) using the W3C Geolocation API.

You should use Telize for IP geolocation. Their website has documentation on how to use their REST API to get latitude and longitude coordinates for a client’s IP address.

The Safari Developer Library has instructions for using the W3C Geolocation API to get latitude and longitude coordinates for a device. The API is the same in other popular browsers (e.g., Chrome and Firefox). Note that the API may not return a result on all devices (e.g., no location will be provided by this API when using a desktop in the CS department). Also, you’ll have to give your device permission to share your location with your website.

Your website should display the coordinates obtained by each method; be sure to label which coordinates came from which method. You should also calculate and display the distance (in kilometers) between the two locations using the haversine formula. If the W3C Geolocation API does not return a location, then your page should only show coordinates based on IP geolocation and should not display a distance.

Location-Specific Information

Your website must also display two (or more) pieces of location-specific information: e.g., the weather, a list of traffic incidents, a list of coffee shops, etc. You should provide the information for both sets of coordinates, since the IP geolocation may be inaccurate or the W3C Geolocation may not be available.

It’s entirely up to you what location-specific information you want to display. Have some fun with this part! :-) The only requirement is that the information comes from a third-party service which provides a REST API. Some suggestions for services are:

ProgrammableWeb is a directory of services that provide REST APIs. This is a good place to look for other sources of location-specific information if you want to try another service besides those we suggested above.

Example

Here’s an example website we put together. It’s not complete yet, but it gives you a general idea of what we’re expecting. You can make your website look fancier if you want, or you can just leave it as plain text.

Screenshot from 2014-11-19 15:53:57.png


Part 2: Measurements

For the second part of this assignment, you’ll use your mobile website to measure: (1) the accuracy of IP geolocation, and (2) how page complexity, choice of remote services, and last-mile network connectivity influences web page load times.

Accuracy of IP Geolocation

Load your mobile website from a device (on which the W3C Geolocation API returns a result) with three (or four) different location and connectivity combinations:

  1. On campus, with the device connected to the CS department or campus wireless network
  2. Off campus (e.g., at home or at a business), with the device connected to a wired or wireless network at this location
  3. On or off campus (could be the same physical location as 1 or 2), with the device connected to a cellular network (make sure wireless is disabled so web requests/responses are going over the cellular network)
  4. (Optional) If you are traveling outside of Madison for Thanksgiving, or if you have a friend outside of Madison who is willing to help, load your mobile website from a device in a different city connected to a wired, wireless, or cellular network

Create a file called geoaccuracy.txt that contains the distance between the IP-based geolocation versus W3C-based geolocation for each location/connectivity combination. To preserve your privacy, you do not need to include the latitude and longitude coordinates.

Also put answers to the following questions in the geoaccuracy.txt file:

  1. Which location/connectivity combination had the lowest error (i.e., the shortest distance between the IP-based geolocation and the W3C-based geolocation)? What is one possible networking explanation for this low error?
  2. Which location/connectivity combination had the highest error (i.e., the shortest largest distance between the IP-based geolocation and the W3C-based geolocation)? What is one possible networking explanation for this high error?

Page Load Times

Add some JavaScript code to your website to measure and display:

  1. How much time it takes for each REST API call to complete -- measure from just before you send the request to just after the response is received (i.e., the callback function is invoked)
  2. How much time it takes to fetch the page -- measured from fetchStart to responseEnd as reported by the W3C PerformanceTiming interface
  3. How much time it takes to render the page -- measured from domLoading to domComplete as reported by the W3C PerformanceTiming interface
  4. How much time it takes to fetch and render the page -- measured from fetchStart to domComplete as reported by the W3C PerformanceTiming interface

Load your mobile website from a device with the same location/connectivity combinations used for measuring geolocation accuracy. Create a file called loadtimes.txt that contains the above measurements for each of these settings.

Also put answers to the following questions in the loadtimes.txt file:

  1. For each location/connectivity combination, which REST API call takes the longest complete? Is the answer the same for all location/connectivity combinations? Does this mean the delay for this REST API call is primarily determined by the browser, the last-mile connection, or the remote service?
  2. For one of the REST API calls (e.g., IP-based geolocation), how long does it take for each location/connectivity combination? Over which network (i.e. last-mile connection) does the call complete the fastest? The slowest? What is one possible networking explanation for these results?
  3. If you add the time taken to fetch the page (metric #2) to the time taken to render the page (metric #3) does it equal the time reported for metric #4? Why or why not?

Submission Instructions

You must submit a single tar file containing:

Upload the tar file to the Programming Assignment 4 dropbox on Learn @ UW. Please submit only one tar file per group.