1. The first thing we need to learn, is how to construct HTML on-the-fly as a function of data pulled from a server. Using the twitter REST API, get the most recent tweets by a particular user of your choice. While developing, you should store that data in a file and then pull that from your Web server to avoid hitting the twitter server too often. Once you get your software working, then you can make it go live by tunneling through our /proxy?uri=remote-uri URI. pulling tweets from the_antlr_guy should get table that looks like the following:
The initial HTML has no rows in the table. Our job is to add tr tags in the tbody as we pull in data. The table starts out looking like this:
<table id="tweets" class="blue">
<thead>
<tr>
<th>Screen name</th>
<th>Created</th>
<th>Tweet</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
2. Once we've figured out how to build tables on-the-fly, let's do some "live search" like Google does now. As you type characters into the search box, it starts to give you results. Make a simple text box in the HTML of a webpage and then hook up a function to the keyup event that performs the appropriate search at twitter, again using their REST API. Store a sample search for use during development to avoid pinging the twitter server too much. Your results should look something like the following:
For better response upon hitting the backspace, you should cache the data results from the server. The idea is that you look in a local map (from search string to json data) for a search result before going off to the server for fresh results. Do not worry about expiring this cache; people can just refresh the page manually and that data should go away.
3. Finally, let's figure out how to send data back to the server and persist it so that we get the same data when the server is restarted. Imagine we worked at Netflix and we wanted to show a list of movies for particular user, allowing them to reorder the movies in their delivery queue. We might have a text box that lets us type in a username and, upon hitting return, the same page displays that user's movie queue:
When the user reorders the movies, the client should send that data back to the server so it can be stored on the disk. To keep things simple, just store the list of movies, one per line, in a text file called /var/data/netflix/xxx where xxx is a single word username like parrt. Your server will need a URI that responds to POST requests: /netflix/store?user=xxx. Your server will also need to respond to URI /netflix/load?user=xxx to return this data. For grading purposes, create data for user elvis with at least 5 movies of your choice. If you want to get fancy, you can have an "add" button next to the text box that will create user data files on the server. For more information on APIs, check out Twitter's API.
/netflix/queue.html (show user movie queue)
/netflix/store?user=xxx (POST storing data into text file xxx)
/netflix/load?user=xxx (GET pulling data from the text file xxx)
/twitter/feed.html (show user Twitter feed)
/twitter/search.html (show search results from Twitter)
/proxy?uri=remote-uri (from previous project)
Please bring printouts of the 3 HTML files, making sure to include all of the JavaScript necessary to make this magic happen. Also print out the Python code that implements the store and load features for Netflix. please name them load.py and store.py.
A printout, delivered at the start of class on the day its due, of your Python source. Your Python code for the proxy server should all fit in one file. Please call that file proxy.py. The two URI for the mod_wsgi server will be in separate files: tunnel.py and log.py. Make sure that your printouts is easy-to-read. In other words, make sure your lines are not wrapping all over and the tabs are set properly etc...
Your project is due at the start of class time. Make sure that your server is running properly at that time.
WARNING: There is a huge number of examples out there that do similar things. You must not cut and paste entire methods or projects. You must do your own work on this in order to learn how proxies work. You are allowed to grab little snippets of code like I used when prototyping this project. As always, this project should not be a group effort between multiple students.