Skip to content

Home

Jump to bottom
Jesse Qin edited this page Apr 6, 2016 · 18 revisions

COGS 121 - Assignment 0

Due: Thursday 4/7, 12:00pm

The purpose of this assignment is to learn basic setup for a web application based on Node.js. This assignment is divided into two major parts: (1) Node.js configuration, and (2) MongoDB setup. By the end of this assignment, students should be comfortable handling node_modules, package.json, and database. This is an individual assignment.

Note

  • This assignment should be done individually.
  • Given boilerplate is broken (intentionally). This is to enforce learning of how Node.js/Express works. You may use labs from COGS120/CSE170 to help fix these bugs. http://d.ucsd.edu/class/intro-hci/2016/lab/lab4/

Goal:

  • Refresh technical materials from prerequisite course (COGS 120)
  • Understand basics of Node.js (dealing with package.json and node_modules)
  • Utilize MongoDB to create a simple application

Before Starting

Create a GitHub account (If you already have one, great!) http://www.github.com

Set up your programming environment:

Create a Heroku account (If you already have one, great!) http://www.heroku.com/ You will need to link a credit card to it to use their databases (but as long as you use the free tier, you will never get charged).

The Assignment (Part I)

Part I primarily focuses on how to manage node modules and execute Node.js server. This guideline does not guarantee to lead you to a solution, but rather help you figure out how to get started. You may use https://docs.npmjs.com/files/package.json, https://www.youtube.com/watch?v=AcA9SgAwgBo, Piazza, and other online resources to solve your problem(s).

  1. Grab the starter code via GitHub: Fork and clone the boilerplate from this repository: https://github.com/WeibelLab-Teaching/cogs121-sp16-ass0

  2. Create a package.json: On your terminal or command prompt, type npm init inside the cogs121-sp16-ass0 directory

    • Fill-in appropriate information.
    • If you do not know just press "enter" or "return"
    • This will generate package.json file at the root directory of your project

  3. Install some node modules and record them as dependencies: Install following Node.js dependencies: express (4.13.4), express-handlebars (3.0.0), body-parser (1.15.0)

    • e.g. npm install express --save
    • Try installing without --save and check package.json (nothing should happen)
    • Then try installing with --save and check package.json (something should have changed)

  4. Experiment with utilizing the dependencies in package.json:

    • Delete the node_modules folder which contains all the installed dependencies e.g. rm -rf node_modules
    • Re-install all dependencies listed in your package.json using npm install
    • Voila! All your node modules are back
    • You can see how this is very useful for package managing, especially if multiple people work on the same project on multiple machines (in fact, npm stands for node package manager)

  5. Add a start script (documentation on scripts here): Open package.json and add "start": "node server.js" under scripts

    "scripts" : {
    "start": "node server.js"
}
    • Notice that the "start" script now runs the command, "node server.js"

  6. Run the script and fix errors: Try npm start on your terminal or command prompt ...

    • Yes, it should throw error(s).
    • As mentioned above, this boilerplate is broken. Your job is to fix them. How?
    • You know you have fixed your issues if you see: Express server listening on port 3000 on your terminal or command prompt
    • You can close the server by pressing ctrl+c

  7. View the web app locally: Open an internet browser, and go to localhost:3000.

    • You should see an ugly looking form with "email" and "content label.
    • There's no functionality for this form yet.

The Assignment (Part II)

Part II emphasizes on how to put MongoDB and Node.js together using Mongoose. For this assignment, MongoDB will primary framework for database; later in the course, you will explore other mechanisms of database such as SQL. You may use http://d.ucsd.edu/class/intro-hci/2016/lab/lab_db/, http://mongoosejs.com/docs/, Piazza, or other online resources to solve your problem(s).

  1. Add modules for MongoDB: Install following Node.js dependencies: mongodb (1.4.30), mongoose (3.8.23)

    • Refer to Part I on how to install Node.js dependencies
    • Make sure all of your Node.js dependencies are shown in package.json

  2. Add directories for MongoDB: Create two directories under root directory of your project; each named dbpath and log.

  3. Add a prestart script (run automatically when you run "npm start"): Open package.json and add "prestart": "mongod --dbpath dbpath --logpath log/mongod.log&" under scripts

    "scripts" : {
    "prestart": "mongod --dbpath dbpath --logpath log/mongod.log&",
    "start": "node server.js"
}

  4. Add the database connection: Open server.js and uncomment "Database Connection" section.

    • Try npm start again. If there are any more errors, fix them. After that, the server should be running along with the message "Database connected successfully."
    • Close the server.
    • If you see the following message on your terminal, you may ignore that message
    { [Error: Cannot find module '../build/Release/bson'] code: 'MODULE_NOT_FOUND' }
js-bson: Failed to load c++ bson extension, using pure JS version

  5. Add the database model: Create models.js under root directory of your project

    • Create a schema that has attributes of “email” (String), “content” (String), and “created” (Date)
    • Make sure they export (e.g. exports.Message = Mongoose.model('Message', MessageSchema);)

    This is a good time to learn about the MVC pattern (model view controller). In our case, you can think of the structure like this:

    • models.js as the model
    • views/index.html as a view
    • server.js + routes/index.js as the controller

  6. Write code that tells the server what to do when a post request ot made to /message: Add a route "/message" with post request in your server.js

    • e.g. app.post("/message", router.message.send);
    • Note: the router setup is a little bit different from COGS 120, pay close attention to the router variable and how it is used in server.js

  7. Add the route that step 6 uses: Create a message.js under routes directory of your project

    • This file should be responsible for receiving contents from a POST request and save it to database (Message schema)
    • After saving the contents, it should redirect back to /
    • You can obtain POST request contents from req.body (for GET request, it would be req.params or req.query)
    • Here is the starter code for message.js. It is your job to figure out how to solve this portion
    var models = require('../models');

exports.send = function(req, res) {
    console.log(req.body); // help you see what is inside of req.body
    // your solution here
};

  8. Render the database data on the / page: Modify index.js under routes directory of your project

    • Specifically, modify a function of exports.view
    • This function should grab all the information from Message schema render it with those data
    • Hint: look at view/index.html to see how you might want to format the data

  9. Account for errors: For both 7 and 8, make sure to do error handling

    • You can look back at the COGS 120 lab and see how errors are handled there, specifically, you should log when errors occur

  10. Test and see that your code works: Type npm start and check localhost:3000

    • You should be able to type and submit your email and content through your form
    • When you submit, you should see your submitted message! (Yay!) If you submit more messages, you should be able to see all of them displayed below the form
    • If you encounter any errors, it is your responsibility to fix them

Deploy to GitHub and Heroku

Once you are done, your assignment should be saved under your own Assignment0 GitHub repository and personal Heroku link.

The Assignment (Part III; optional)

Part III is optional, but is a critical learning process for this course. It is highly recommend that you go through this part if time permits. This part of the assignment is flexible with no strict guideline. Your job is to do following:

  • Redesign this web application. It is expected that as a designer to improve an application for better usability, interface design, etc.
  • You may also attempt to change aesthetics of this application with CSS and/or (client-side) JavaScript
  • You may choose to use any CSS and JavaScript framework for this assignment
    • ** CSS:** Bootstrap, Foundation, Flat-UI, SASS/LESS, Bourbon, etc. (or no framework is fine too)
    • ** JavaScript:** Angular, React, Underscore, JQuery, Backbone, etc. (or vanilla JS is fine too)

Submission Guidelines:

Please submit your assignment via this Google Form: http://goo.gl/forms/5jUd5mo2w6

Because we will be going over groups in class on Thursday, for now, if you are in a 1PM section, fill out the form for Brian's section and if you are in a 2PM section, fill out the form for Jesse's section.

Clone this wiki locally