COMP 20: Web Programming

Lab: The Ride-Hailing Service, Part 1 on Week 3

Overview

Over the next three weeks, you will create a ride-hailing service --both the client and server. Parts 1 and 2 are the client, and part 3 will be the server.

It is important to note that instructions for this lab may be deliberately vague at times. You are expected to ask questions if you are confused or not sure about something as in the professional world. There will also be opportunities to go beyond expectations especially for those who feel they have mastered the material.

Instructions

The following table is a list of vehicles and their locations:

Vehicle ID Latitude Longitude
mXfkjrFw 42.3453 -71.0464
nZXB8ZHz 42.3662 -71.0621
Tkwu74WC 42.3603 -71.0547
5KWpnAJN 42.3472 -71.0802
uf5ZrXYw 42.3663 -71.0544
VMerzMH8 42.3542 -71.0704

Create a page (named index.html) that displays a Google Map of all the vehicles listed above. Requirements:

The required files for this part of the assignment: index.html, one CSS file, one JavaScript file, the README (more details on README below).

Getting Started

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

Testing Your Work

For this part of the lab, you can open the index.html page on a web browser. However, it is bad practice as you will see next week. Another way to serve your page locally 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.

The README File

Each lab 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 lab.
  3. Say approximately how many hours you have spent completing the lab.
  4. Be written in either text format (README.txt) or in Markdown (README.md). Markdown is preferred. No other formats will be accepted. Please use all capital letters for README

This README.md file must be directly in the folder of the lab.

Submitting Part 1

Push all your changes to the private repository in GitHub that I created for you in a folder named notuber under the master branch. Say that your private repository in GitHub is named comp20-mchow, make sure all the files are pushed to comp20-mchow/notuber.

Assessment

This lab is worth 10 points: