CSCE 242

We finish the semester with a simple facebook app, hosted on the google app engine, and using canvas. Your facebook app will be a 'canvas' app. It will fetch the user's friends' profile pictures and use a canvas to display them all in random positions, with random rotation, and with a white border around each one, like the collage shown here. Specifically you will do the following.

1. Implement a new google app engine app which you will register as a facebook app.
2. Your app will let the facebook user log in. Once logged in, and you have obtained permission to view his friends list, your app will fetch his friends list, then fetch the profile picture for each friend, and finally it will display these photos in one large canvas.
3. Also, under each photo you will place that person's name.

You will turn it in on Wednesday, April 27 @11am here. Make sure you include both the URL to your facebook app (apps.facebook.com/yourappname) and the appspot name of your deployed app (yourgoogleapp.appspot.com).

Required Reading

• Facebook developers' documentation. You will mostly be using the graph API via the JavaScript SDK and the code in the next bullet point.
• Facebook Python SDK. This is the library and sample code (under 'examples') that I used in class. Remember to add the 'post' method (as I showed in class) because it will not work without it.

In this homework you will practice using the ever more popular canvas API. You will implement a javascript program (along with its supporting HTML file, of course) which fetches the 'interesting' photos from flickr and displays them in an art gallery view. Specifically, you will write JavaScript code to do the following:

1. Create a request that calls the flickr.interestingess.getList method to fetch today's most interesting photos at flickr, in JSONP format. Note that this is a JSONP request, not JSON. This is a sample call. You will need to read the jQuery .ajax() documentation to see how jQuery handles JSONP requests with .ajax() in a very similar way to regular XHR requests (even thought JSONP requests are not XHR, I will explain in class).
2. You will then make a 4x4 art gallery, similar to this art gallery example but populated with the flickr interesting photos you got. To to this, you will need to create photo source urls from the data you just got. Note that the gallery is an HTML table where each cell is a canvas object of two images: the frame image and the photo image. Use the frame image from the example. It's OK your photo does not fill up the entire frame.
3. You will also add the 'title' of each photo just below it (either in the canvas object, or in HTML). And you will randomly draw a big red X across some photos (probability 1/2). The X's should be re-determined every time the page is loaded.

This homework is due on Wednesday, April 20 @11am. You can turn it in here. Remember to always include a URL to your published app.

Required Reading

1. Flickr API pertinent sections.
2. JSONP overview.

For this homework you will write code that deals gracefully with the problem of a user going online/offline while editing a question text. In the current implementation of a question editing session you are doing an XHR request whenever the user clicks on the 'save' button (or, goes out of focus). But, what happens if the user is offline at that moment?

One use case you will implement is the following.

1. The user goes to his questions at /123.
2. He goes offline: unplugs his ethernet cable and turns off wi-fi.
3. He goes back to his browser and edits the question at /123
4. He shuts off the browser.
5. He goes back online.
6. He starts his browser and visits /123.
7. The page should show the question as it was before he turned off the browser, including all his changes. The page will also immediately try again to do an XHR update of the new question.

You will implement this using the localStorage object. In class, I will explain more on how to achieve this effect.

Required Reading

• localStorage

This homework is due on Wednesday, April 13 @11am. You can turn it in here

For this homework you will be cleaning up the existing codebase and implementing one small new feature. The new feature is the memcaching of an question. In the use-case where a teacher posts a survey question we expect up to hundreds of hits on that question in a short amount of time. Since they are all seeing the exact same question it seems like a perfect time to use a memory cache, so you will. The parts of this homework are below:

1. You will first clean up your web app of all the cruft it has accumulated. This includes:
   1. Eliminating all links to any specific homeworks (hw6, hw7...)
   2. Making sure there are no dead links or links that cause your app to crash.
   3. Make sure that after creating a question the user is taken to that question's page.
   4. Adding all the needed navigation links so the user can move easily move around.
   5. We can see all the questions of a user.
   6. The app is simple to use.
2. Refactor your code. This means to clean up your code without changing its functionality. Get rid of any unnecessary code. Simplify.
3. Implement a memcache of the unanswered questions. That is, the first GET /123 will fetch the question from the datastore but the ones after will fetch it from the memcache. Remember to clear the cache if the owner of the question changes it.

This homework is due on Wednesday, April 6 @11am. You can turn it in here

Required Reading

• The Memcache Python API.

In this homework you will be adding charts that show the number of answers given to each survey question choice (how many voted for which). You will be doing this by first providing the answer data in JSON format, so maybe a third-party can use that data in their own visualization, and then using that data yourself along with the google visualization API to draw your own chart. Specifically, you will implement the following extensions to your webapp.

1. You will change your python code such that a GET /1234?fmt=json will return the text and choices of question 1234, along with the number of answers given for each choice, in JSON format. You are free to choose the specific format of your JSON object.
2. You will use the Google visualization API to show a chart of the answers given thus far on the pages where you show the answers. That is, when either the owner or someone who has already answered question 1234 goest to /1234 they will see the question and answer choices, as before, but also a bar chart showing how many people have chosen each choice.
   1. The title of the bar chart should be the question text and the choices should be labelled with the appropriate choice text.
   2. You will get the data for this chart by first doing a ajax call back to /1234?fmt=json to get the data in JSON format. You will use this JSON data to populate the chart. The advantage of this approach is that it will easy then to embed this chart, using an br, in any other website. (You don't need to provide the 'embed' button, but you can if you feel up to it. I would suggest having /1234?fmt=chart return just the HTML+JS for showing the chart, then br that.)

This homework is due Monday, March 28 @11am. You can turn it in here. Remember to add a URL to you published webapp in the comments at the top of your file.

Required Reading

• Parsing JSON in JavaScript.
• Using JSON in Firefox: this is the ECMAScript 5 compliant version, which is implemented by all(?) modern browsers.
• How do I parse JSON in the app engine?
• Google Visualization API documentation.

In this homework we go back to our survey app and implement an ajaxy question editor. That is, you will replace the current question functionality, which only lets the user create a new question or delete an existing question, with new functionality that will let the user edit existing question parts, and which will do this without a full-page reload (which is sooo 10-years ago). Specifically, you will implement the following features:

1. You should start by changing the /survey page. When the user first visits the page it should show some sample text for the question text and two sample choices. The user will be able to edit this question as follows:
   1. The text of the question will show as normal text but if the user hovers over it its background color changes (CSS:hover) . If the user clicks on it the text transforms into a textbox whose value is the current text (same effect as used in flickr, picasaweb and other photo sites to edit the title of a photo), along with a 'save' and 'cancel' button. If the user clicks on 'save' then the new text is saved.
   2. The choices bill be editable in the same way.
   3. Next to each choice there will be an 'X' (or little garbage can if you like). When the user clicks on it that choice will be deleted from the question.
   4. After the last choice there will be a '+'. If the user clicks on it then you will add a new choice field with some sample text in it.
   When he hits the 'create' button then you will generate the POST request that actually creates that question in the database, gives it a unique number, and the re-directs the user to the new question page. For example, if the new question got the number 1234 then the user is redirected to page /1234.
   Notice that this /survey page does not make any XHR calls; it is just one big POST at the end.
2. You will then re-implement the /[0-9]+ pages. These question pages stay the same for anyone who is not the owner of the question. But, the owner of the question will now have the same editing functionality that he has in the /survey page. That is, he will be able to edit the text and add/edit/delete the choices. The be difference is that every time he makes an edit you will perform an XHR POST /1234 request to update that question on the server. Also, there is no 'create' button on this page.
   Note that, even though the user is changing each part of the question separately, it will probably be a lot easier for you to re-submit the whole question each time he changes some part of it. That way you only have to write one 'update question' method, instead of writing a 'change text', 'change choice', 'delete choices' etc. methods. I'll explain more in class.

This homework is due on Monday, March 21 @11am. You can submit it here.

Required Reading

• The jQuery Ajax docs.