Difference between revisions of "Mean Stack"

From CSE330 Wiki
Jump to navigationJump to search
Line 1: Line 1:
 
__NOTOC__  
 
__NOTOC__  
−
Module 7 builds upon the JavaScript skills you learned in Module 6.
+
 
 +
This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/>
 +
You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to expose you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together.
 +
Follow along the tutorials and complete exercises to learn how things work, and you will be ready to create your own web applications using the MEAN stack very soon!
 +
 
  
 
== Reading ==
 
== Reading ==
  
−
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
+
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
  
−
* [[Node.JS]]
+
*[[Preparations]]
−
* [[Socket.IO]]
+
*[[Getting MEAN]]
−
* [[Pong Game]]
 
  
 
== Individual Assignments ==
 
== Individual Assignments ==
  
−
=== Install Node.JS ===
+
=== Tutorials ===
  
−
Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide.
+
Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.
  
−
=== Static File Server in Node.JS ===
+
=== Install MEAN ===
  
−
The individual portion of Module 7 is short in order to give you enough time to complete the group portion.
+
Follow the steps and install MEAN on your machine, initialize an app and type grunt in your terminal to start the server (make sure your mongoDB server is connected and running).
 +
Open up the app in your browser (localhost:3000), and understand what the default app does.
  
−
# Copy the example code from the Node.JS guide into a file called ''static_server.js'' or something of that nature.  Save it on your EC2 instance (but not in a place that Apache can serve!).
 
−
#: Ensure that you understand what the static file server script is doing… this might show up on a quiz!
 
−
# Make a directory parallel to ''static_server.js'' named ''static''.
 
−
# Change "<STATIC DIRECTORY NAME>" on line 11 of the static fileserver example code to reflect the name of the directory you just made.
 
−
# Save the following files in your ''static'' directory:
 
−
#* ''hello.txt'', a text file containing "Hello World"
 
−
#* ''brookings.jpg'', an image file you can download from here: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
 
−
#* ''college.html'', an HTML document based on the [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy HTML Layout]] containing an image tag pointing to ''brookings.jpg''
 
−
#* ''phpinfo.php'', a PHP file containing the phpinfo command that generates a diagnostic page of the server:
 
−
#: <source lang="php"><?php  phpinfo();  ?></source>
 
−
# Boot up your Node.JS static fileserver, and from your browser, load all four of the files you created in step 4.
 
−
#: Which ones work and which ones don't?  Why might this be the case?
 
  
 
== Group Project ==
 
== Group Project ==
 +
* Make an e-commerce site using the MEAN stack.
 +
  
−
In the group portion of Module 7, you will be building a multiplayer, networked Pong game using Node.JS and Socket.IO.  Your game must enable users to choose a nickname and play a game of Pong with others on your site ''without'' logging in (no need for a password or Open ID).
+
To start, come up with use cases for your site. Think about what products the site is selling, what the user can do, and how information is stored etc.
  
−
If you want to reminisce and play some Pong on the command line before building it in Node.JS, here is the command, assuming you have '''emacs''' installed:
+
You may start with the default MEAN.io app and build on top of it. This way you don't have to implement user authentication. You can also create a MEAN package and start from there. <br/>
 +
You may use phone models provided by the Angular Phone Catalog app as your products. Review the MongoDB section on how to import JSON data into MongoDB.
  
−
<source lang="bash">$ emacs -q --no-splash -f pong</source>
+
==== Tips ====
  
−
Press '''C-x C-c''' to exit emacs.
+
Review the "Getting MEAN" section to understand the file system so you know how components work with each other.
 +
Keep in mind that you don't have to understand what every line of code does. Whenever in doubt, refer to the default app.
  
−
Instructions on how to begin your group portion can be found here: [[Pong Game]]
+
You will be making changes on both the server side (the /server directory of your app) and the client side (in the /public directory)
 +
#* Server Side:
 +
Model: add model files to the /server/models folder. There are Mongoose files that define the objects, they are referenced by the controllers.
 +
View: nothing to change
 +
Controller: add controller file(s) for your models (/server/controllers), they are referenced by the routing file
 +
Routing: add a js file in /server/routes folder that responds to client side requests (same format as the one in the default app)
 +
#* Client Side
 +
Model: nothing to change
 +
View: (/public/views directory) views are .html files. Each view that requires data from the server side should be tied to a controller, inside the controller, you can specify methods to update/save/delete objects in the DB,  the view and routing section gives an example
 +
Controller: add controller files to /public/controllers. Easy once you go through the AngularJS tutorial. You may need to add multiple services in the /public/services directory (tutorial part 11, and the default MEAN app) to use data received from the back end and persist data across views (look up ngCookie, $cookieStore or the HTML 5 localStorage solution).
 +
Routing: /public/routes directory of your app. Add entries for all views you will use, and specify their urls and templates (stored in /public/views).
  
 
== Grading ==
 
== Grading ==
  
−
We will be grading the following aspects of your work.  There are 80 points total.
+
We will be grading the following aspects of your work.  There are 100 points total.
  
−
# '''Individual Portion (25 Points):'''
+
# '''Working E-commerce Site (75 points)'''
−
#* Node.JS is installed on your EC2 instance (5 points)
+
#* MEAN installed and set up correctly (10 points).
−
#* The ''hello.txt'', ''brookings.jpg'', and ''city.html'' files all load successfully (3 points each)
+
#* Models set up correctly (15 points).
−
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (3 points)
+
#*: ''including products, orders, and adding payment and shipping address to the user model, you don't have to use phones from the Angular tutorial but you are responsible for populating your products table''
−
#* You can explain to the TA why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (3 points)
+
#* Can display a list of all products, can search, can view details (15 points).
−
#* Using Git, push your node.js app to bitbucket and clone it on your ec2 instance (5 points)
+
#* Can add to cart, view cart, cart sustains (data can be accessed across views and shouldn't be lost when page is refreshed) (20 points).
−
# '''Pong Game (45 Points):'''
+
#* Can check out (5 points).
−
#* '''''Matching Pairs of Players (10 Points):'''''
+
#*: ''A user can check out if she has a payment option and a shipping address, on a successful checkout, the cart should be emptied''
−
#** Players are able to specify a name for themselves (3 points)
+
#* Can view orders, delete orders (10 points).
−
#** Players are able to initiate a game on their own (4 points)
+
#*: ''An order is associated to a user and should contain at least four fields: date, total, number of products, shipped to''
−
#** When a game is started, both players need to consent (3 points)
+
# '''Design and Misc (5 Points):'''
−
#* '''''Gameplay (10 Points):'''''
+
#* Site is overall user friendly and utilizes Bootstrap (3 points).
−
#** The Pong game works (3 points)
+
#* App passes JShint with no errors (2 points)
−
#** There is a pause between a player losing a round and the ball being launched for the next round (3 points)
+
# '''Creative Portion (20 Points):'''
−
#** Victory condition is enforced (e.g., the first player to score 10 points wins the game) (4 points)
+
#* TBD
−
#* '''''Socket.IO Communications (15 Points):'''''
 
−
#** A mapping of players to their opponents exists on the server side (without this, you can't complete any other parts of the Socket.IO section) (3 points)
 
−
#** ''Start Game and End Game'' is forwarded from one client to the other via Socket.IO (3 points)
 
−
#** ''Paddle Moving'' is forwarded from one client to the other via Socket.IO (3 points)
 
−
#** ''Ball Hitting and Missing Paddle'' is forwarded from one client to the other via Socket.IO (3 points)
 
−
#** ''Ball Launching'' is forwarded from one client to the other via Socket.IO (3 points)
 
−
#* '''''Best Practices (5 Points):'''''
 
−
#** Code is well formatted and easy to read (2 points)
 
−
#** There are no XSS vulnerabilities (3 points)
 
−
#** ''Extra Credit:'' Your ''client.js'' code passes [http://jshint.com/ JSHint], a JavaScript validator (+2 bonus points)
 
−
#** ''Extra Credit:'' Your ''app.js'' code passes [http://jshint.com/ JSHint], a JavaScript validator (+2 bonus points)
 
−
#* '''''Usability (5 Points):'''''
 
−
#** Finding friends on the Pong interface is easy and intuitive (4 points)
 
−
#** Site is visually appealing (1 point)
 
−
# '''Creative Portion (10 Points)'''
 
  
 
[[Category:Module 7]]
 
[[Category:Module 7]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Revision as of 13:16, 22 August 2014


This module introduces MEAN, a fullstack web framework that uses MongoDB, Express, AngularJS and Node.js.
You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to expose you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together. Follow along the tutorials and complete exercises to learn how things work, and you will be ready to create your own web applications using the MEAN stack very soon!


Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignment.

Individual Assignments

Tutorials

Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.

Install MEAN

Follow the steps and install MEAN on your machine, initialize an app and type grunt in your terminal to start the server (make sure your mongoDB server is connected and running). Open up the app in your browser (localhost:3000), and understand what the default app does.


Group Project

  • Make an e-commerce site using the MEAN stack.


To start, come up with use cases for your site. Think about what products the site is selling, what the user can do, and how information is stored etc.

You may start with the default MEAN.io app and build on top of it. This way you don't have to implement user authentication. You can also create a MEAN package and start from there.
You may use phone models provided by the Angular Phone Catalog app as your products. Review the MongoDB section on how to import JSON data into MongoDB.

Tips

Review the "Getting MEAN" section to understand the file system so you know how components work with each other. Keep in mind that you don't have to understand what every line of code does. Whenever in doubt, refer to the default app.

You will be making changes on both the server side (the /server directory of your app) and the client side (in the /public directory)

    • Server Side:

Model: add model files to the /server/models folder. There are Mongoose files that define the objects, they are referenced by the controllers. View: nothing to change Controller: add controller file(s) for your models (/server/controllers), they are referenced by the routing file Routing: add a js file in /server/routes folder that responds to client side requests (same format as the one in the default app)

    • Client Side

Model: nothing to change View: (/public/views directory) views are .html files. Each view that requires data from the server side should be tied to a controller, inside the controller, you can specify methods to update/save/delete objects in the DB, the view and routing section gives an example Controller: add controller files to /public/controllers. Easy once you go through the AngularJS tutorial. You may need to add multiple services in the /public/services directory (tutorial part 11, and the default MEAN app) to use data received from the back end and persist data across views (look up ngCookie, $cookieStore or the HTML 5 localStorage solution). Routing: /public/routes directory of your app. Add entries for all views you will use, and specify their urls and templates (stored in /public/views).

Grading

We will be grading the following aspects of your work. There are 100 points total.

  1. Working E-commerce Site (75 points)
    • MEAN installed and set up correctly (10 points).
    • Models set up correctly (15 points).
      including products, orders, and adding payment and shipping address to the user model, you don't have to use phones from the Angular tutorial but you are responsible for populating your products table
    • Can display a list of all products, can search, can view details (15 points).
    • Can add to cart, view cart, cart sustains (data can be accessed across views and shouldn't be lost when page is refreshed) (20 points).
    • Can check out (5 points).
      A user can check out if she has a payment option and a shipping address, on a successful checkout, the cart should be emptied
    • Can view orders, delete orders (10 points).
      An order is associated to a user and should contain at least four fields: date, total, number of products, shipped to
  2. Design and Misc (5 Points):
    • Site is overall user friendly and utilizes Bootstrap (3 points).
    • App passes JShint with no errors (2 points)
  3. Creative Portion (20 Points):
    • TBD
Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Mean_Stack&oldid=1762"