Difference between revisions of "Module 9"
| Line 9: | Line 9: | ||
The following articles on the online class wiki textbook contain information that will help you complete the assignment. | The following articles on the online class wiki textbook contain information that will help you complete the assignment. | ||
| − | *[[ | + | *[[Preparations]] |
| − | |||
| − | |||
*[[Getting MEAN]] | *[[Getting MEAN]] | ||
| − | |||
== Individual Assignments == | == Individual Assignments == | ||
| Line 39: | Line 36: | ||
Review the "Getting MEAN" section to understand the file system so you know how components work with each other. | 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. | ||
| + | == Grading == | ||
| − | + | We will be grading the following aspects of your work. There are 100 points total. | |
| − | |||
| − | |||
| − | + | # '''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'' | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | ''' | ||
| − | |||
| − | # | ||
| − | # | ||
| − | # | ||
| − | |||
| − | |||
| − | + | # ''Design and Misc (5 Points):''' | |
| + | #* Site is overall user friendly and utilizes Bootstrap (3 points). | ||
| + | #* App passes JShint with no errors (2 points) | ||
| − | # '' | + | # ''Creative Portion (20 Points):''' |
| − | #* | + | #* TBD |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | [[Category:Module | + | [[Category:Module 9]] |
[[Category:Modules]] | [[Category:Modules]] | ||
Revision as of 05:03, 30 April 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 introduce 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.
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.
Grading
We will be grading the following aspects of your work. There are 100 points total.
- 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
- Design and Misc (5 Points):'
- Site is overall user friendly and utilizes Bootstrap (3 points).
- App passes JShint with no errors (2 points)
- Creative Portion (20 Points):'
- TBD
