Programming Assignment 2
Web Mashup Development in JavaScript

Due on Tuesday February 12 before midnight


Description

This project must be done individually. No copying is permitted. The goal of this project is to learn client-side web programming using JavaScript and AJAX. More specifically, you will create a web mashup that combines two web services: Google Maps and the Zillow API. You will need to create an XMLHttpRequest object to communicate with the Zillow API asynchronously.

Please look at the test.html that uses the XMLHttpRequest object. (To see the source code, on the test.html frame do: right click -> This Frame -> View Frame Source.) Due to crossdomain restrictions, this code will not work as-is on most browsers but you can run it on your Eclipse web browser (you R-click on it and use: Open with -> Web Browser).

Platform

Note: Do not post your project files on a public web server. You will do this project on your Eclipse IDE. Install the "JavaScript Development Tools SDK" and "Web Page Editor SDK" plug-ins from Web Tools Platform. From the File menu in Eclipse, create a new 'Static Web Project' (note: do not create 'Web Project') with a name project2. R-click on project2 at the Project Explorer (left menu) and select New -> HTML File. Use the file name Project2.html. You can cut-and-past the test.html inside the file. You can view this file using the internal Eclipse web browser: you R-click on the file name at the Project Explorer and select: Open with -> Web Browser. You can edit the HTML layout of this file with Open With -> Web Page Editor. Note that Eclipse does not have a JavaScript debugger by default. Also, although the Chrome web browser has an embedded JavaScript debugger (just select: Tools -> Developer Tools), it will not allow AJAX crossdomain requests. The same applies for Firefox with the Firebug plug-in.

Documentation

The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on JavaScript and AJAX.

Web Services used by the Web Mashup

For this project, you will use the

To use the Zillow API, you need to register and obtain web service IDs from Zillow Web Services ID (ZWSID).

Project Description

Your HTML web page must have 3 sections:

  1. an input text area with two buttons: Find and Clear.
  2. a Google street map of size 600*500 pixels, initially centered at (32.75, -97.13) with zoom level 16
  3. a text display area
When you provide a valid postal address, say "500 UTA Blvd, Arlington, TX", and you push the Find button, the google map is recentered at this address and an overlay marker is pinned on that address whose label is the Zestimate value (the house value) from zillow.com. More specifically, when you push the Find button, your program must send an asynchronous request to the Zillow API (GetSearchResults API) to retrieve the Zestimate (in $), which is the estimated home value of the house at that address. The address used by the GetSearchResults API must have two components: address and citystatezip. Assume that address is always the part of the postal address before the first comma and citystatezip is always the part of the postal address that follows the first comma. The call to the GetSearchResults API must be done using AJAX. When the result arrives (this is the callback of the AJAX request), you extract the Zestimate, you display an overlay marker on the map at the postal address with the Zestimate value. In addition, the postal address and the Zestimate must be appended at the end of the text display area (3rd section) as a bulleted item. If there is no Zestimate, you don't add anything. Note that, the map may display multiple markers with Zestimates and the text display area may contain multiple addresses/zestimates. Basically, each time you enter a new postal address, if there is a Zestimate, you add a new flag in the map and you append a new entry in the display area. The Clear button clears all markers from the google map and clears the text display.

How to URL-encode the address to send it to zillow: use the method encodeURI(address).
How to extract the Zestimate value from the zillow XML response: use the method getElementsByTagName('amount').

Note that everything should be done asynchronously and your web page should never be redrawn completely. This means that the buttons in the input text area must have a JavaScript action, not HTTP requests. You need only one XMLHttpRequest object for sending a request to Zillow, since Google Maps is already asynchronous. You don't need to use stylesheets; you can use standard HTML tags (<p>, <li>, <dt>, etc).

How to deploy this project on a web server

NOTE: You should neither post nor deploy your project on a public web server. But if you are curious to know how to do this properly, here are the directions (don't do this for this project). To bypass the crossdomain restriction (ie, to send AJAX requests across domains), you need to create a proxy on the same server that you deploy your web application. More specifically, you can create the following proxy.php script:

<?php
  header("Content-type: text/xml\n\n");
  $zwsid = "";
  $host = "http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=" . $zwsid;
  $url = $_SERVER['QUERY_STRING'];
  $ch = curl_init($host . "&" . $url);
  curl_exec($ch);
  curl_close($ch);
?>
(need to fill out the Zillow ID in $zwsid). Then you change you AJAX requests in your JavaScript program to go through the proxy, eg. request.open("GET","proxy.php?address=2114+Bigelow+Ave&citystatezip=Seattle%2C+WA").

What to Submit

Use the form below to submit your source files (only your own html and JavaScript files, if any). You may submit your file as many times as you like, but only the most recently submitted file will be retained and evaluated.

Submit Project #2:

Last modified: 01/31/13 by Leonidas Fegaras