Skip to content

Home

Jump to bottom
Brian Soe edited this page May 26, 2016 · 5 revisions

COGS 121 - Makeup Assignment

Due: Sunday 06/05, 11:59pm

The purpose of this assignment is to formalize the understanding of environment setup, OAuth 2.0, and data visualization. The assignment aims to integrate these concepts to design principles in application level.

Required Tools

Notes

  • This assignment is intended to be done individually.
  • This assignment may feel overwhelming, so please start early
  • The given boilerplate is broken (intentionally). It is your responsibility to fix it.
  • DO NOT PUSH OR SEND PULL REQUEST TO BOILERPLATE REPOSITORY
  • DO NOT PUSH .env OR ANY OTHER SENSITIVE INFORMATION TO REPOSITORY.

Goals:

  • Manage node_modules and projects through package.json file
  • Implement login feature through third-party websites using Passport.js (e.g. Twitter, Facebook, etc.)
  • Extract DELPHI data with SQL and visualize them with D3

Before Starting

If you are not exposed to the concept of OAuth, SQL, and D3, it is recommended that you go through following:

It is also recommended that you read through Part I of following assignments (but not required to do them):

Make sure that following are functional:

  • node command
  • npm command
  • mongod command
  • pgadmin3
  • GitHub
  • Heroku Toolbelt

The Assignment

  1. Fork and Clone: https://github.com/WeibelLab-Teaching/cogs121-sp16-makeup
  2. Use npm to create package.json and install following node_modules: express (4.13.4), express-handlebars (3.0.0), body-parser (1.15.0), mongodb (1.4.30), mongoose (3.8.23), 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), pg (4.5.3)
  3. Make sure you have a SESSION_SECRET set as 160cb2e6193ecef5082a4dd4c94254ca009ccfc2c2a28b959752b70025124b98. It is highly recommended that you use .env as you may look at other COGS 121 assignments that utilizes .env.
  4. Choose one scenario for your application
    • Uber/Lyft Drivers Help Uber/Lyft drivers around San Diego get the most profit by helping them position themselves closer to high demand areas. Alternatively, help Uber/Lyft drivers be in better positions to help people that are under the influence get home safely.
    • Patrolling San Diego Design a tool to help law enforcement officers efficiently patrol areas that unsafe (ie. have high crime rates).
    • AirBnB Rentals Design a tool to help AirBnB customers find the best renting deals around San Diego.
    • Housing Deals Help real estate agents analyze housing rates and get the most profit through selling housing property around San Diego.
  5. Once you chose a scenario, create a web application for that scenario in which:
    • a user can login with their social media account (e.g. Twitter, Facebook, etc.), and
    • visualize a DELPHI dataset of your choice using D3
  6. Your application should be intuitive and has applied [10 usability heuristics] (https://www.nngroup.com/articles/ten-usability-heuristics/)
  7. When your application is finished, push to GitHub and Deploy to Heroku
    • Create your own GitHub repository and Heroku application
    • To allow MongoDB to work in Heroku, you may need following command: heroku addons:add mongolab
    • If you used .env to keep API key and API secret of third-party provider of your choice, you may need following command (this is an example for Twitter):
    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=160cb2e6193ecef5082a4dd4c94254ca009ccfc2c2a28b959752b70025124b98
    • If you used .env to keep DELPHI database connection URL, you may need following command:
    heroku config:set DATABASE_CONNECTION_URL=<delphi url>

Rubric

This assignment is out of 20 points. It will be graded heavily on how well you applied and executed the design skills you have been taught.

For usability heuristics criteria, following the heuristics is worth 1 point each per heuristic. To receive the full point for a heuristic, you must apply that heuristic somewhere in your application. No use of a heuristic results in 0 points for that heuristic. If you apply a heuristic somewhere in your application, but violate that same heuristic somewhere else in your application, you will only receive 0.5 points for that heuristic. (Note: for some of the heuristics like recognition over recall, applying is the same as not violating, so just worry about not violating that heuristic). For each heuristic, include a one sentence description in the README of how your application addresses that heuristic.

The choice of tools and design decisions must be documented in README. That is, if you choose to use jQuery over Angular.js (as an example), you must list pros and cons for each of these tools and how your choice impact the design of your application.

Criteria Points
The application utilizes Postgres to extract data from the DELPHI database 1
The application utilizes D3 to visualize data from the dataset 1
The application utilizes Passport to authenticate user(s) 1
The application utilizes MongoDB to store user accounts 1
The application successfully addresses and attempts to solve relevant problems 1
The application properly incorporates all 10 usability heuristics 10
Design decisions are properly justified (README) 1
The application is creative/intuitive 2
INDIVIDUAL: Peer review completed (CATME) 2

Clone this wiki locally