COMP 20: Web Programming

Assignment 2: The Black Car Service

Due: Thursday, March 9th

This assignment is worth 15 points. You must work on this assignment individually.

Objectives

  1. Use a JSON API.
  2. Use a third-party JavaScript API (in this case, Google Maps).
  3. Use the HTML5 geolocation API to determine your location.
  4. Use the XMLHttpRequest object to make requests and manage the response data.

Overview

For this assignment, most of you will be passengers. A lucky few of you, randomly selected, will be drivers / vehicles. I cannot provide you the number of drivers. The idea: passengers will be seeking vehicles, drivers will be seeking customers (passengers). You will develop a web page that:

  1. Retrieves your current location (latitude and longitude) and sends it to a datastore that I created.
  2. Retrieves and displays the locations of vehicles OR passengers on a map, depending on who you are. Your web page will need to handle both cases (showing locations of vehicles or passengers on map) as it is possible that I can change your status from a passenger to a driver, vice versa.

Requirements

  1. The HTML file must be named index.html in a folder named notuber in your private Git repository. You can write your JavaScript in the HTML file.
  2. You must use at least one (1) CSS file. You can name the file whatever you want.
  3. You must use the JavaScript navigator.geolocation object to retrieve your geolocation information (latitude and longitude).
  4. You must use the JavaScript XMLHttpRequest object to make requests (i.e., send your information) and manage the response data.
  5. After retrieving your location using the navigator.geolocation JavaScript object, you must display your location on the map with unique marker (i.e., using an image of your choice) with an info window showing your username.
  6. You must display locations of all passengers OR vehicles on the map, depending on who you are. If you are marked as a driver / vehicle, display location of all passengers. If you are a passenger, display location of all vehicles. All vehicles on the map shall use this icon: The Black Car. You can use any picture as marker icon for a passenger; all passenger markers shall use the same picture as marker icon on map. Clicking on a vehicle or passenger marker will display vehicle or passenger username and mile(s) away from you in an info window.

APIs

This assignment will require the use of two external APIs:

  1. The datastore API to send your location information and to retrieve information on passengers or vehicles: https://defense-in-derpth.herokuapp.com/submit
  2. The Google Maps API. Please refer to my notes at http://tuftsdev.github.com/WebProgramming/notes/ajax.html. Working examples are available at https://github.com/tuftsdev/WebProgramming/tree/gh-pages/examples/google_maps. NOTES: the geolocation_map.html example requires the page to be served by an actual web server. Also, you do not need to create an API key to use Google Maps API version 3 but you can create one at https://console.developers.google.com if you would like.You can see geolocation_map.html in action at http://tuftsdev.github.com/WebProgramming/examples/google_maps/geolocation_map.html.

More on The Datastore API

The datastore API https://defense-in-derpth.herokuapp.com/submit is HTTP POST only. It takes in three parameters and will return a JSON feed of the locations of vehicles or passengers, depending on what you have been assigned as, if the three parameters are legitimate.

If you successfully send the three inputs to the datastore as a passenger, you will receive a JSON that looks like the following (example response): {"vehicles":[{"_id":"589bd30f8451126182dfbc62","username":"uOWuyLrd","lat":10.1,"lng":10.2,"created_at":"2017-02-09T02:25:19.575Z"}]}

If you successfully send the three inputs to the datastore as a driver / vehicle, you will receive a JSON that looks like the following (example response): {"passengers":[{"_id":"589bd3258451126182dfbc63","username":"dwR3TbOH","lat":20.3,"lng":20.4,"created_at":"2017-02-09T02:25:41.166Z"}]}

If you do not send the three inputs to the datastore correctly, you will receive the following JSON: {"error":"Whoops, something is wrong with your data!"}

Important: Cross-Origin Resource Sharing (CORS) is enabled for this API!

Important Notes

Getting Started

  1. Create a new folder named notuber in your folder comp20-username on your computer (the one you have been using since Lab 4).
  2. Follow the Google Maps JavaScript API tutorial "Getting Started" at https://developers.google.com/maps/documentation/javascript/tutorial.

Executing HTTP POST via XMLHttpRequest

In order to execute HTTP POST using the JavaScript XMLHttpRequest object, you need to add a parameter to the HTTP request header: xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); where xhr is an instance of XMLHttpRequest. See https://stackoverflow.com/questions/9713058/sending-post-data-with-a-xmlhttprequest for more information.

Also, the parameter to send via xhr.send() must the in the following format: "username=YOUR_USERNAME&lat=YOUR_LATITUDE&lng=YOUR_LONGITUDE" (with the double quotes). This is standard URI convention. Remember replace YOUR_LATITUDE and YOUR_LONGITUDE using string concatenation!

Calulating the Distance Between Two Geopoints

There are two ways to calculate the distance between two geopoints, choose one:

  1. Use the classic Haversine Formula. The formula is provided and analyzed at http://www.movable-type.co.uk/scripts/latlong.html. Also, you are encouraged to use the JavaScript implementation of the Haversine Formula on Stasck Overflow but please do cite it in your README.md or in your code: http://stackoverflow.com/questions/14560999/using-the-haversine-formula-in-javascript.
  2. Use google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB);. See documentation at https://developers.google.com/maps/documentation/javascript/reference#spherical

Remember, the distance must be in miles, not meters.

The README File

Every assignment shall include a README file that describes the work. This description must:

  1. Identify what aspects of the work have been correctly implemented and what have not.
  2. Identify anyone with whom you have collaborated or discussed the assignment.
  3. Say approximately how many hours you have spent completing the assignment.
  4. Be written in either text format (thus README.txt) or in Markdown (thus README.md). No other formats will be accepted.

Viewing Your Work and Submitting the Assignment

Using the JavaScript Geolocation API requires your page to served by an actual web server. Alas, simply opening the index.html page on a web browser will not work for this assignment (although it may now work on Safari or Firefox --regardless, it is bad practice). One way to serve your page is to run Python's simple HTTP server in the folder of your work. That is:

% cd comp20-XXXXX/notuber; # where XXXXX is the name of your private GitHub repository
% python -m SimpleHTTPServer

By default, a simple web server will open up on port 8000. Go to http://localhost:8000 on your favorite web browser to test your work.

Do not serve your work via the gh-pages branch of your private GitHub repository.

Hints

Assessment

This assignment is worth 15 points.