Achievement Milestone 2: Wellesley on Facebook

Screencast

Watch this short screencast to see our AM2 application in action. Scroll down the page to press the play button.

Overview

In the third week, we will learn about the Facebook API and use it to create interesting apps with data from Facebook. Differently from the APIs that we saw in AM1, Facebook requires user authentication to access data from its API. Thus, we will learn to use the Facebook API to login a user, give permissions to our app, and send API requests for information we are interested in.

The example shown in the screencast searches the API for all pages that contain the search query "Wellesley College", then retrieves the information for each page (name, cover photo, number of likes, and link), checks to see if any of these pages has been liked by the logged in user, and then displays the results in two groups.

The purpose of the app is to make the user aware of the presence of different Wellesley orgs and departments in Facebook and encourage them to check them out.

Preparation

Differently from AM1, you do not need to figure out how to create this app from scratch. On Tue (Feb 9), we will have a Facebook tutorial in class. By the end of the class, you should be able to retrieve the data in the console. Once you have the data in the console, the task is very similar to AM1, and you will write Javascript code to display the desired fields on the page.

Ideas

Share your ideas for interesting ways to use Facebook data in this Google doc. We will discuss them, choose the ones that are doable in a short amount of time, and use them as a "variation on the theme" for AM2.

Given that no ideas were suggested, this time we will only recreate the screencast. You might want to return to the Facebook API for future AMs and projects.

Requirements and Grading

The goal in this AM is to implement an app very similar to the given screencast. You will learn about getting data from the Facebook API, but also about working with Javascript objects and making the page interactive.

There are 10 points for this assignment, which are divided as follows:

• 6 points - your app works! It has a FB login mechanism, it sends a request for Wellesley College pages, and displays the results: the name of the page, number of likes, link to visit it, cover photo. The page at this point doesn't need to look similar to the screencast.
• 1 point - if the logged-in user already likes some of the pages, they should show together above the other results (see screencast). Notice that the title of the link for these pages is different.
• 1.5 point - your CSS makes the information for each FB page look very close to the screencast (when one hovers over the image, the information about the page shows overlayed). Images are next to each other as opposed to vertically ordered. The rest of the page can be styled to your liking.
• 0.25 points - results that don't belong to Wellesley College are not displayed.
• 0.25 points - if a result doesn't have a cover page, the app shows something meaningful to signalize that the cover is missing (screencast has a question mark)
• 0.25 points - pages are sorted based on the number of likes, with pages with more likes showing first.
• 0.25 points - results that are community pages (not official pages) are not shown.
• 0.5 points - good code quality: not a lot of repetitions, code is well organized (using functions when necessary), functions are not like spagheti code, space and comments are use to make the code readable.

Submission

Here are instructions for how to submit your work.

1. Inside the cs249 folder you created for AM1, add the folder AM2.
2. Update the index.html file to add the link to your am2.html page.
3. The folder AM2 should have three files am2.html, am2.js and am2.cssthat you wrote to develop your new app.
4. The code in the three AM files should be well indended, spaced, and with appropriate commenting where necessary.
5. Finally, at the top of the JS file, you should have a top comment similar to the one below:

   /* Filename: am2.js
   Author: Wendy Wellesley
   Date: Feb 13, 2015
   Goal: Javascript code for implementing a web app that works with the Facebook API.
   
   Honor Code Statement:
   On this task I collaborated with Harry Potter and Hermione Granger. I had 
   difficulty with the XXX issue, but Hermione gave me a good example to 
   understand it. All the code in these files was typed by me.
   */