Home

Cogs 121 - Assignment 1

In this assignment, you will implement a web application that incorporates Facebook and Instagram integration. Social networking sites collect different kinds of social information about their users and this can be used in a variety of ways. For example, Wolfram Alpha can now give facebook users a detailed report on their posts, photos and other activities on facebook. This is done by having the user log-in and give them access permission to use their data. You can try this here: http://www.wolframalpha.com/input/?i=facebook+report (note all the different ways your data from facebook is used by wolfram).

The Assignment

Think of a creative and innovative way to integrate the information you can get from social media into your own NEW application. There is no specific requirement on what type of application you should make; however it has to incorporate both Facebook and Instagram components as listed below.

Instagram: The boilerplate code is already provided for you. You are expected to build on top of it. Please DO NOT turn it in as it is! After you login, you should display a list of pictures from the authenticated user's feed with the Captions of each (underneath the photo, or on hover) Bonus: Have a button to like/unlike the pictures you pull up

Facebook: To start Facebook integration, you would need to first register as a developer at https://developers.facebook.com/. This will allow you to create a Facebook application and get access to Facebook user’s information using your application’s “App ID” and “App Secret”. Once users logs into your application using Facebook Authentication (OAuth) and agrees to the necessary permissions, your app will get access to the specific user’s information using the predefined Facebook Graph API Methods (See the links under ‘Useful Resources’ for more details). There are different Node.js libraries that make Facebook integration more accessible and straight-forward: in this assignment we are going to use the FBgraph library which can be found here: https://github.com/criso/fbgraph 

Facebook Requirements:

1. Use Facebook Authentication within your application so the user can log into your web application using their Facebook credentials. In other words, add a “Log-in with Facebook” button in your website that would perform Facebook Authentication.
2. Once the user is logged in, access and display basic information about the user based on your application.
3. Retrieve the user’s posts,likes and use this data to create useful feedback for the users about their habits in the social media.

Submission Guidelines: Follow the submission link and choose the assignment number that you are submitting (this is Assignment 1). Enter your PID. If you are working in a team of two, also enter your partner's PID in the spaces provided. Include a link to your heroku application, and a link to your github repository. Your github repository should have working code on the Master branch, there is a high probability of us running the code locally, after a direct clone of your master branch.

Submit here: http://goo.gl/forms/eSFWKoIVvW

Technologies:

• Facebook Graph-API to access user information
• node.js - http://nodejs.org/
• Site will be hosted on http://heroku.com/

Useful Resources: Facebook Graph API https://developers.facebook.com/docs/graph-api/ https://developers.facebook.com/docs/facebook-login/login-flow-for-web/ https://developers.facebook.com/docs/javascript/quickstart https://developers.facebook.com/docs/graph-api/reference/user/ https://developers.facebook.com/docs/javascript/reference

Here is a list of the basic information that is defaulted to be public on facebook: https://developers.facebook.com/docs/facebook-login/permissions#reference-basic- info For other information, you would need to ask the user’s permission before being able to access it: https://developers.facebook.com/docs/facebook- login/permissions#adding