1 Homework: Flickr & Facebook mashup – an Ajax/JSON/Java Exercise 1. Objectives - Become familiar with the Ajax, REST, JSON & XML technologies; - Use a combination of HTML, CSS, DOM, XMLHttpRequest, XML and Java Servlets; - Provide an interface to search and display public Flickr images and post them to Facebook. 2. Background 2.1 AJAX & JSON Ajax (Asynchronous JavaScript + XML) incorporates several technologies: - Standards-based presentation using XHTML and CSS; - Dynamic display and interaction using the Document Object Model (DOM); - Data interchange and manipulation using XML and XSLT; - Asynchronous data retrieval using XMLHttpRequest; - JavaScript binding everything together. See the class slides at http://www-scf.usc.edu/~csci571/Slides/ajax.ppt. JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main application is in Ajax web application programming, where it serves as an alternative to the use of the XML format for data exchange between client and server. See the class slides at http://www-scf.usc.edu/~csci571/Slides/JSON1.ppt. 2.2 Google Maps Google Maps (a.k.a. Google Local) is a technology from Google that provides access to street maps, satellite maps and a combination of the two (called “hybrid” maps). The Google Maps API is a technology that lets developers embed Google Maps in their own web pages with JavaScript. The Google Maps API also includes functionality to “reverse-geocode” a location, i.e. converting an address to its corresponding world coordinates in latitude and longitude. For this exercise, this is the only functionality of Google Maps that you will be using. The Google Maps Geocoding Service is documented at: http://code.google.com/apis/maps/documentation/geocoding/index.html An alternative to using the Google Geocoding service is provided in Section 9. Addendum2 2.3. Flickr Flickr is an online service where users can upload their photos and share them with friends and the public. The Flickr homepage is available at: http://www.flickr.com/ Flickr provides a set of APIs to its service called “Flickr Services”. The Flickr Services API homepage is available at: http://www.flickr.com/services/api/ Flickr Services provides several Request and Response formats. You will use the REST format for requests and the JSON or XML format for responses. 2.4 Facebook Facebook is a global social networking website that is operated and privately owned by Facebook, Inc. Users can add friends and send them messages, and update their personal profiles to notify friends about themselves and what they are doing. Users can additionally post news feeds to their profiles, and these feeds may include images, besides text messages. The facebook homepage is available at: http://www.facebook.com Facebook provides developers with an application-programming interface, called the Facebook Platform. A component of this platform is Facebook Connect, a powerful set of APIs for developers that allows them to authorizes users, and send communications to Facebook, among many more things. The Facebook Connect homepage is available at: http://wiki.developers.facebook.com/index.php/Facebook_Connect 3. Description of the Exercise In this exercise, you will write a web application that does the following sequence of actions: a) allows a user to enter a “location”, as City, State; b) retrieves the coordinates of such location using the Google Maps Geocoding Service; c) uses the coordinates to retrieve up to 20 public images from Flickr, using the Flickr Services API;3 d) displays the images thumbnails in the UI, e) allows the user to select one image, and display a larger version of the selected image; f) authorizes (log in) the user to Facebook; g) posts the image and a message (The default message will be “XXXX likes this image from Flickr!”) to a user’s Facebook feed using the Facebook Connect API. The default message will be editable by users so that they can change it, if they wish to do so, to one of their preference. A snapshot of the user interface of the web application is shown in Figure 1. Figure 1. User Interface To implement this exercise you are required to write a combination of HTML, JavaScript and Java Servlet programs. The top-level interface consists of four areas: - A Form area including an edit box to enter a location and a “Search” button; - A dynamic area that displays the image thumbnails corresponding to “public” images at the given location; - A dynamic area to show a larger version of a selected image; - An “UPLOAD” button that posts the selected image and the text “likes this photo from Flickr!” to a user’s feed page. Once “City, State” has been entered in the edit box and the “Search” button is pressed, the form calls a JavaScript function. This function first performs basic validation of the input. If the input is not of the required form (“City, State”), the request is not forwarded to the Java Servlet. Instead an alert with an error message is presented to the user, asking4 to refine the search. Once the validation is successful, the JavaScript function executes an XMLHttpRequest to start an asynchronous transaction with a Java Servlet running under Tomcat, and passing the “City, State” as a parameter of the transaction. The Java Servlet in turn performs the following four steps: First it does a reverse geo-coding REST query to the Google Maps service, to retrieve the JSON data corresponding to the query. For example, the REST query for “Manhattan Beach, CA”: http://maps.google.com/maps/geo?q=Manhattan+Beach,+CA&output=json&oe=utf8&sensor=false&gl=us returns the following JSON: { "name": "Manhattan Beach, CA", "Status": { "code": 200, "request": "geocode" }, "Placemark": [ { "id": "p1", "address": "Manhattan Beach, CA, USA", "AddressDetails": {"Country": {"CountryNameCode": "US","CountryName": "USA","AdministrativeArea": {"AdministrativeAreaName": "CA","Locality": {"LocalityName": "Manhattan Beach"}}},"Accuracy": 4}, "ExtendedData": { "LatLonBox": { "north": 33.9061480, "south": 33.8613840, "east": -118.3786390, "west": -118.4758020 } }, "Point": { "coordinates": [ -118.3960520, 33.8874090, 0 ] }