1 Homework: Weather.com & 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 weather predictions from Weather.com 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. Weather.com Weather.com is an online service that gives you free access to a location's weather information on the web. The Weather.com homepage is available at: http://www.weather.com/ In Homework #6, you provided a login interface to retrieve and display the weather of a location in next 36 hours from Weather.com. In Homework #6 a Perl script together with your Apache server provided the “scrape” functionality. In this exercise you will re-use your scraping code to produce XML instead of HTML as you did in homework #6. However, you do not use the login mechanism; instead, create a webpage that can let users to key-in the ZIP code of the location, shown in Figure 1. Again, we assume the ZIP code that is input by the user is valid.2 Figure 1 2.3 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 “query” for weather conditions from weather.com; the query will contain a zip code;3 b) Uses the query string to retrieve a location's weather in next 36 hours from weather.com, using the Apache/Perl CGI from Homework #6; c) Displays the next 36 hours' weather in the UI, in the same or similar format used in Homework #6; d) Allows the user to select one weather prediction; e) Allows the user to invoke posting the weather prediction to Facebook; f) Authorizes (logs in) the user to Facebook; g) Posts the weather prediction and a message (The default message will be “The weather prediction on XXX is YYY and ZZZ F”, for example, "The weather prediction on Tonight is Partly Cloudy and 54 F"), 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 initial user interface, together with a query and the resultant table, is shown in Figure 2. Figure 2. User Interface4 To implement this exercise you are required to write a combination of HTML, JavaScript and Java Servlet programs. The top-level interface consists of three areas: • A Form area including an edit box to enter the query string and a “Search” button; • A dynamic area that displays a table with the weather prediction corresponding to the query, additional properties of the weather (time, condition, temperature, feels like, wind, and weather figure) and a radio button, used to select one of the weather predictions; • A “POST TO FACEBOOK NEWS FEED” button that posts the text “The weather prediction on XXX is YYY and ZZZ F”, corresponding to the selected weather prediction, to a user’s feed page. Once query string 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 empty, the request is not forwarded to the Java Servlet. Instead an alert with an error message is presented to the user, asking 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 “query string” as a parameter of the transaction. The Java Servlet in turn performs the following three steps: First, the Java Servlet extracts the query string and then it calls the “modified” Perl CGI program from Homework #6 to retrieve from weather.com corresponding to the ZIP code included in the query. For example, if your server was using port 8866, the following REST query with the query string of “90266”: http://cs-server.usc.edu:8866/cgi-bin/weather.pl?search=90266 would return the following XML: <?xml version="1.0" encoding="utf-8" ?> <rsp stat="ok"> <weathers total="3"> < weather time="Tonight" condition="Partly Cloudy" temperature="54 F" feels_like="Low" wind="NW at 6mph" chart="http://s.imwx.com/v.20100719.135915/img/wxicon/72/29.png"/> < weather time="Tomorrow" condition="Mostly Sunny" temperature="71 F" feels_like="High" wind="WNW at 9 mph" chart="http://s.imwx.com/v.20100719.135915/img/wxicon/72/34.png"/> < weather time="Tomorrow Night" condition="Partly Cloudy"
View Full Document