1Homework: Yahoo! Finance & 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 stock quotes from Yahoo! Finance 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. Yahoo! Finance Yahoo! Finance is an online service that gives you free access to company finance content on the Web, including stock quotes. The Yahoo! Finance homepage is available at: http://finance.yahoo.com In Homework #6, you provided a search interface to Yahoo! Finance stock quotes to retrieve and display such quotes in a web application. 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.2 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 stock quotes from Yahoo! Finance; the query will contain stock “symbols”, separated by spaces; b) uses query string to retrieve up to 3 stock quotes from Yahoo! Finance, using the Apache/Perl CGI from Homework #6; c) displays the stock quotes in the UI, in the same or similar format used in Assignment #6; d) allows the user to select one stock quote; e) allows the user to invoke posting the quote to Facebook; f) authorizes (logs in) the user to Facebook; g) posts the stock quote and a message (The default message will be “Current stock quote for XXX is $YY.ZZ”) 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 1.3 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 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 stock quotes corresponding to the query, additional properties of the stock (symbol, price, quote time [quote time is OPTIONAL], open, bid, ask and trend chart) and a radio button, used to select one of the stock quotes; • A “POST TO FACEBOOK NEWS FEED” button that posts the text “Current stock quote for XXX is $YY.ZZ”, corresponding to the selected stock quote, 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:4 First, the Java Servlet extracts the query string and then it calls the “modified” perl CGI program from Homework #6 to retrieve from Yahoo! Finance quotes corresponding to the list of symbols included in the query. For example, if your server was using port 8866, the following REST query with the query string of “AAPL MSFT”: http://cs-server.usc.edu:8866/cgi-bin/query-veoh.pl?search=AAPL+MSFT would return the following XML: <?xml version="1.0" encoding="utf-8" ?> <rsp stat="ok"> <stocks total="2"> <stock symbol="AAPL" price="243.96" open="240.76" bid="243.95" ask="243.97" chart="http://ichart.finance.yahoo.com/t?s=AAPL&amp;lang=en-US&amp;region=US"/> <stock symbol="MSFT" price="23.79" open="23.74" bid="23.78" ask="23.79" chart="http://ichart.finance.yahoo.com/t?s=MSFT&amp;lang=en-US&amp;region=US"/> .... </stocks> </rsp> Notice that in Homework #6 your CGI Perl script produced HTML. In this exercise, the output must be changed to XML. Second, the Java Servlet extracts from this file up to 3 items. Lastly, the Java Servlet produces a JSON file that is returned asynchronously to the original XMLHttpRequest. The format of the JSON file that needs to be generated is as