Skip to content

Home

Jump to bottom
Jesse Qin edited this page Apr 3, 2016 · 60 revisions

COGS 121 - Assignment 1

Due: Thursday 4/14, 12:00pm

The purpose of this assignment is to get familiar with basics of OAuth 2.0 using Passport.js (specifically Twitter), web socket using Socket.io, and integrate software tools to create a social media application. This assignment is divided into two parts: (1) technical lab for Passport.js and Socket.io, and (2) designing a social media application. By the end of this assignment, students comfortable at using Passport.js and Socket.io and design more powerful software with these tools. This is a group-based assignment (between 4 and 5 students).

Note

  • This assignment is intended to be done in a group.
  • The assignment may feel overwhelming, so please start early and collaborate with your group!
  • Given boilerplate is broken (intentionally). It is your responsibility to fix them.
  • We expect that you have completed assignment 0. Any resources you used for assignment 0 are fair game.
  • Only Part 2 will be graded. However, since Part 1 provides guidances to Part 2, it is important that you complete Part 1 as well.

Goal:

  • Utilize knowledge from assignment 0 for more complex tools.
  • Understand basics of OAuth 2.0 and web socket.
  • Utilize Passport.js and Socket.io to create a social media application.

Before Starting

What is an OAuth 2.0? What is a web socket? Why do we need them? Before you jump into coding portion of this assignment, it is important to understand the high-level concepts of these technical terms. We have provided some resources as an introduction to both OAuth 2.0 and web socket.

For this assignment, we will be using OAuth 2.0 as a way to manage personalized profiles of a user and web socket as live communication between users. Both are essential for most social media application nowadays.

The Assignment (Part 1.1) - Preparation

Part 1 of Assignment 1 will be an exercise to help you create a simple social media application with specific tasks. In Part 2 (as it will be mentioned above), you will be creating your own social media application using the skills you acquired in Part 1. Again, Part 1 will not be graded (explicitly), but is crucial components to do Part 2. The expected result for Part 1 should work similarly to http://feeder121.herokuapp.com/.

Part 1.1 consists of preparation steps before dealing with main meat of this assignment. It is important that you understand how following files work before starting Assignment 1: server.js, views/layouts/layout.html, views/index.html, views/chat.html, and public/js/chatbox.js. You may use Piazza, and other online resources to solve your problem(s).

  1. Install following Node.js dependencies: connect-mongo (1.1.0), cookie-parser (1.4.1), dotenv (2.0.0), express-session (1.13.0), method-override (2.3.5), passport (0.3.2), passport-twitter (1.0.4), socket.io (1.4.5)

    • You may refer to Assignment 0 to install these dependencies
    • Also install dependencies from Assignment 0
    • Don't forget to create the directories needed for the database

  2. Create your application on Twitter (https://apps.twitter.com/)

  3. Store Consumer Key (API Key) and Consumer Secret (API Secret) to .env file

    • Create a file called .env at the root directory of your project.
    • Copy and paste the Consumer Key and Consumer Secret given to you by Twitter (from step 2).
    • This information is sensitive and SHOULD NOT BE SHARED WITH ANYONE ELSE!
    • Your .env file should look similar to following:
    TWITTER_CONSUMER_KEY=<your consumer key here in quotes>
TWITTER_CONSUMER_SECRET=<your consumer secret here in quotes>
SESSION_SECRET="4fa238c5d0d632881b6786f3b2d944950169948f"

  4. Uncomment following code:

    app.get("/", router.index.view);

The Assignment (Part 1.2) - Passport.js

Part 1.2 focuses on how to get started with Passport.js, specifically with Passport-Twitter. These tools will help you manage user authentication and Twitter OAuth for Node.js. Keep in mind that Passport.js provides authentication methods beyond Twitter (such as creating secure local login feature or other social media OAuth). To simplify the complexity for this part, we will only use Twitter component of Twitter. You may use other authentication methods for Part 2. You may use http://passportjs.org/docs/, Piazza, and other online resources to solve your problem(s).

  1. Set your Passport middleware in server.js

    • The middleware code for Passport is shown below. Copy and paste them to appropriate place.
    app.use(passport.initialize());
app.use(passport.session());
    • What is middleware?
      • Most of the middleware codes for this assignment are handled in given boilerplate.
      • Understanding middleware is beyond the purpose of this course, so do not worry if you do not fully understand.
      • To learn more about Express's middleware: http://expressjs.com/en/guide/using-middleware.html
    • Try to put Passport middleware code to elsewhere. What happens? (most likely an error or unexpected behavior)

  2. Set your Passport serialization in server.js

    • The serialization code for Passport is shown below. Copy and paste them to appropriate place.
    passport.serializeUser(function(user, done) {
    done(null, user);
});
passport.deserializeUser(function(user, done) {
    done(null, user);
});

  3. Use Twitter strategy in server.js

    passport.use(new strategy.Twitter({
    consumerKey: process.env.TWITTER_CONSUMER_KEY,
    consumerSecret: process.env.TWITTER_CONSUMER_SECRET,
    callbackURL: "/auth/twitter/callback"
}, function(token, token_secret, profile, done) {
    // What goes here? Refer to step 4.
});

  4. Write a code to check if user already exists within your application.

    models.User.findOne({ "twitterID": profile.id }, function(err, user) {
    // (1) Check if there is an error. If so, return done(err);
    if(!user) {
        // (2) since the user is not found, create new user.
        // Refer to Assignment 0 to how create a new instance of a model
        return done(null, profile);
    } else {
        // (3) since the user is found, update user’s information
        process.nextTick(function() {
            return done(null, profile);
        });
    }
  });

  5. Create routes for authentication

    • Again, refer to http://passportjs.org/docs/twitter to understand how routing for Twitter authentication works.
    • You may also want to read http://passportjs.org/docs/logout to create a route for logging a user out.
    • Create routes with following spec:
      • "/auth/twitter" - GET Request
      • "/auth/twitter/callback" - GET Request (success redirect: "/chat" and failure redirect: "/")
      • "/logout" - GET Request

  6. Create UserSchema in models.js

    • The model for User will have (at minimum) following schema:
    {
    "twitterID": String,
    "token": String,
    "username": String,
    "displayName": String,
    "photo": String
}
    • Refer to Assignment 0 for creating a schema(s) in models.js

  7. Before you move on, make sure you don't encounter any errors when executing.

    • Again, this is bound to happen since given code is intentionally broken.
    • If you see any errors, it is your responsibility to fix them.

The Assignment (Part 1.3) - Socket.io

Part 1.3 emphasizes on how to get started with Socket.io. This tool will help you handle live message delivery for more efficient communication mechanism(s) between users. Dealing with web sockets can be complication; hence, we will focus more heavily on application that is similar to a chat system. For Part 1, we will focus on public communication (so everyone can see what you say) to simplify complexity. You may implement private communication component (optional) for Part 2. You may also attempt to do cookie handling with socket.io (along with Passport.js) for Part 2 if you feel comfortable. You may use http://socket.io/docs/, Piazza, and other online resources to solve your problem(s).

  1. Read and understand: http://socket.io/get-started/chat/.

    • We recommend that you also try this tutorial out (preferably on separate project).
    • If you do not understand how this tutorial works, please ask before moving on.

  2. Uncomment following code in server.js:

    io.use(function(socket, next) {
    session_middleware(socket.request, {}, next);
});

  3. Create a socket "connection" on public/js/chatbox.js (client-side)

    • Your solution for this step should be written in TODO section of public/js/chatbox.js file.
    • Hint: start with var socket = io(); which will create web socket on client-side.
    • Grab the text from #user_input upon user submitting the form.
    • Make sure the text in #user_input is cleared.

  4. Create a socket "connection" on server.js (server-side)

    • Hint: start with io.on("connection", function(socket) { ... }); which will handle receiving socket request from client.

  5. Create a socket called "newsfeed" on both public/js/chatbox.js and server.js

    • Add the following code to public/js/chatbox.js:
    socket.on("newsfeed", function(data) {
    var parsedData;
    // grab and parse data and assign it to the parsedData variable.

    // other possible solution(s) here.
    $('#messages').prepend($('<li>').html(messageTemplate(parsedData)));

    function messageTemplate(parsedData) {
      // generate HTML text based on some data to be prepended into the list
    }
});
    • For server.js, you may create socket for "newsfeed" with following skeleton code:
    socket.on("newsfeed", function(msg) {
    ...
    // your solution to fill in, see step 7 for details
    ...
    io.emit("newsfeed", ...);
    ...
});

  6. Create NewsFeedSchema in models.js

    • The model for NewsFeed will have (at minimum) following schema:
    {
    "user": String,
    "message": String,
    "posted": Date
}
    • Refer to Assignment 0 for creating a schema(s) in models.js

  7. Create a following functionality in server.js:

  8. Before you move on, make sure you don't encounter any errors when executing.

    • Again, this is bound to happen since given code is intentionally broken.
    • If you see any errors, it is your responsibility to fix them.
    • Tip: Check through all the files to see if there are any more "TODO" comments

The Assignment (Part 2) - Create your own social media app

Now that you have gained technical skills essential for social media, it is your turn to make your own! In Part 2, you will pick a theme/user audience for your social media. Then, create a small-scale social media application that will improve social interaction for that user audience. Unless specified, there are no restrictions for creating your application. Keep in mind, this is a group assignment; everyone should collaborate and contribute to create a well-designed application.

  1. Pick a theme and/or a group of user audiences

    • Here are examples of a theme (your theme are not limited to these examples):
      • a communication tool for academic researchers to share their research paper.
      • a communication tool to gather all accountants around the world and share their tips.

  2. Create a way for your user audiences to communicate

    • Again, you are not required to create a mechanism for private communication (either 1-to-1 or group).
    • However, if you feel comfortable and feel that private communication is necessary, you may choose to do so.

  3. Required technologies: Node.js, MongoDB, Passport.js, and Socket.io

    • You may use other technologies in addition to technologies listed above to facilitate development process
    • You may use local login authentication and/or OAuth 2.0 services such as Twitter, Facebook, Instagram, etc.
    • It is your responsibility to handle any technical constraints that are not mentioned in Part 1.
      • So choose an approach that is most comfortable and beneficial for you.

  4. Apply Nielsen's Heuristics

  5. Document contribution of each group member

    • On your README, please provide brief documentation to show that each group member has contributed fair share of work for Assignment 1, Part 2.

  6. Push to GitHub and Deploy to Heroku

    • Create your own GitHub repository and Heroku application
    • After deploying your application to Heroku, following commands may be needed for OAuth to work successfully. Here's an example for Twitter OAuth:
    heroku addons:add mongolab
heroku config:set TWITTER_CONSUMER_KEY=<your consumer key without quotes>
heroku config:set TWITTER_CONSUMER_SECRET=<your consumer secret without quotes>
heroku config:set SESSION_SECRET=4fa238c5d0d632881b6786f3b2d944950169948f

Rubric

This assignment is out of 20 points and will be graded on Part 2. It will be graded heavily on how you apply design skills taught in COGS 121 using given technologies. Certain points may be awarded for excellent execution of the project (e.g. 2nd criteria will be awarded for application(s) that are truly creative/innovative and improves the communication).

For usability heuristics criteria, following each heuristic is worth 2 points. However, there will be 1 point deduction for each heuristic that is violated; no more than 1 point deduction per heuristic.

It is expected that each group member contributes to Part 2 fairly. The distribution of work should determined by group consensus and responsibility should be given that member's expertise (either technical or design).

It is required that this application utilizes Passport.js and Socket.io to demonstrate proficiencies in these technologies. This will help us understand if you understood Part 1 of this assignment.

And YAY! Free points for turning-in Assignment 0 in time.

Criteria Points
The application follows good usability heuristics with minimal to no violations 10
The application is creative/innovative and improves the quality of communication between users 2
The README proves that all group members contributed fairly to this project 2
The application effectively utilizes Passport.js to handle user authentication 2
The application effectively utilizes Socket.io to handle live communication 2
INDIVIDUAL: Turned-in Assignment 0 in time 2

Submission Guidelines:

TBA

Clone this wiki locally