Difference between revisions of "Mean Stack"

From CSE330 Wiki
Jump to navigationJump to search
m (moved Module 7 to Mean Stack)
 
(45 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
__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]]
 +
* [[Git]]
 +
*[[Angular]]
  
−
== Individual Assignments ==
+
== Further Reading ==
  
−
=== Install Node.JS ===
+
=== Tutorials ===
  
−
Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide.
+
It may be a good idea to go through tutorials for both MongoDB and AngularJS, and understand how Express works.
  
−
=== Static File Server ===
+
=== Install MEAN ===
  
−
The individual portion of Module 7 is short in order to give you enough time to complete the group portion.
+
The individual assignment for this module only require AngularJS (version 1.3.15) and completing the tutorial
 +
[https://code.angularjs.org/1.3.15/docs/tutorial here]. We provide installation instructions for the entire MEAN stack using MEAN.IO as a reference. You do not need to install the MEAN stack for this module (but it is recommended to really understand all of pieces involved).  
  
−
# 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!).
+
To 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).
−
#: Ensure that you understand what the static file server script is doing… this might show up on a quiz!
+
Open up the app in your browser (localhost:3000), and understand what the default app does.
−
# 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"
 
−
#* ''skyline.jpg'', an image file you can download from here: <span color="red">TODO</span>
 
−
#* ''city.html'', an HTML document based on the [[HTML and CSS#Quick and Easy HTML Layout|Quick and Easy HTML Layout]] containing an image tag pointing to ''skyline.jpg''
 
−
#* ''phpinfo.php'', a PHP file containing the phpinfo command that generates a diagnostic of the server:
 
−
#: <source lang="php"><?php  phpinfo();  ?></source>
 
−
# Boot up your Node.JS static fileserver and 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 ==
 +
* Extended the AngularJS tutorial with additional features.
 +
 +
In the group portion of this module, you will extended the AngularJS tutorial with two additional features.  The first is a side-by-side comparison page displaying two products.  In the second, you will provide four additional sorting methods for displaying devices on the main product page. 
 +
 +
In the side-by-side comparison page, a user will be able to select two devices and view all of their features in a table.  This table will consist of three columns.  The first column simply lists all of the features of either device (battery, camera, connectivity, hardware, etc ) .  The second and third columns will display the information associated with that category for a particular pair of devices, allowing a user to easily compare the same feature across different devices.
 +
 +
The second feature is simply allowing users to sort the devices on additional metrics (in addition to Alphabetical and Newest).  Select four different attributes that you want to include to the drop down list on the main page. For example, I may want to sort by by weight or size of battery. 
  
−
=== Socket.IO Pong Game ===
+
For each feature, create a separate Git branch.  Name the first branch SideBySide and the second branch AdditionalSorting.  After you complete a feature, merge the branch back to the master branch.
 +
 
 +
 
 +
<!-- * Make an e-commerce site using the MEAN stack.
  
−
== Grading ==
 
  
−
We will be grading the following aspects of your work. There are 100 points total.
+
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.
  
−
# '''Individual Portion (15 Points):'''
+
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/>
−
#* Node.JS is installed on your EC2 instance (4 points)
+
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.
−
#* The hello.txt, skyline.jpg, and city.html files all load successfully (3 points each)
 
−
#* You can explain to the TA why phpinfo.php loads the way it does through Node.JS (2 points)
 
  
−
# '''File Sharing Site (40 Points):'''
+
==== Tips on Installing MEAN ====
−
#* '''''File Management (15 Points):'''''
 
−
#** Users can upload and delete files (4 points)
 
−
#** If a file is "deleted", it should actually be removed from the filesystem (3 points)
 
−
#** Existing files can be viewed (5 points)
 
−
#** The directory structure is hidden (3 points)
 
−
#* '''''Image Groups (10 Points):'''''
 
−
#** An image may be associated with a group (5 points)
 
−
#** All groups are listed on the home page (5 points)
 
−
#* '''''Best Practices (10 Points):'''''
 
−
#** Code is well formatted and easy to read (3 points)
 
−
#** All pages pass the W3C validator (3 points)
 
−
#** CSRF tokens are passed when uploading, re-categorizing, and deleting images (4 points)
 
−
#* '''''Usability (5 Points):'''''
 
−
#** Site is intuitive to use and navigate (4 points)
 
−
#** Site is visually appealing (1 point)
 
−
# '''Creative Portion (15 Points)''' (see below)
 
  
−
=== Creative Portion ===
+
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.
  
−
This module, and all future modules, will require that you invest some time into creating additional features for your group project.  Plan to invest at least 60 minutes of your time into the creative portion.
+
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). -->
  
−
* The creative portion is an opportunity for you to learn material of your own interest.
+
== Grading ==
−
* You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.
 
  
−
If you need ideas for a creative portion, or if you want to know whether or not your creative portion idea is "hard enough", ask a TA.
+
We will be grading the following aspects of your work.  There are 50 points total where 18/50 are extra credit points. To complete this module you must do either the Side-By-Side comparison feature or the Additional Sorting feature. You will receive the points according to the rubric below, and any points over 32/50 will be extra credit.
  
−
[[Category:Module 2]]
+
# '''Completed AngularJS Tutorial (6 Points)'''
−
[[Category:Modules]]
+
# '''Completed Side-By-Side comparison feature (18 points)'''
 +
#* Users can select two different devices and view all of their attributes in a table format.
 +
#* If information for a particular category is not available on one device, display "Not available" in the table
 +
# '''Completed Additional Sorting feature (8 points)'''
 +
#* Users can sort devices based on four different attributes and the attribute values are displayed on the main device list page.  (2 points per attribute).
 +
# '''Git Repo (8 points)'''
 +
#* Two branches are created, one for each feature (4 points).
 +
#* Both branches are merged back to the master branch (4 points).
 +
# '''Creative Portion (10 Points)'''

Latest revision as of 15:44, 19 August 2015


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.

Further Reading

Tutorials

It may be a good idea to go through tutorials for both MongoDB and AngularJS, and understand how Express works.

Install MEAN

The individual assignment for this module only require AngularJS (version 1.3.15) and completing the tutorial here. We provide installation instructions for the entire MEAN stack using MEAN.IO as a reference. You do not need to install the MEAN stack for this module (but it is recommended to really understand all of pieces involved).

To 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

  • Extended the AngularJS tutorial with additional features.

In the group portion of this module, you will extended the AngularJS tutorial with two additional features. The first is a side-by-side comparison page displaying two products. In the second, you will provide four additional sorting methods for displaying devices on the main product page.

In the side-by-side comparison page, a user will be able to select two devices and view all of their features in a table. This table will consist of three columns. The first column simply lists all of the features of either device (battery, camera, connectivity, hardware, etc ) . The second and third columns will display the information associated with that category for a particular pair of devices, allowing a user to easily compare the same feature across different devices.

The second feature is simply allowing users to sort the devices on additional metrics (in addition to Alphabetical and Newest). Select four different attributes that you want to include to the drop down list on the main page. For example, I may want to sort by by weight or size of battery.

For each feature, create a separate Git branch. Name the first branch SideBySide and the second branch AdditionalSorting. After you complete a feature, merge the branch back to the master branch.


Grading

We will be grading the following aspects of your work. There are 50 points total where 18/50 are extra credit points. To complete this module you must do either the Side-By-Side comparison feature or the Additional Sorting feature. You will receive the points according to the rubric below, and any points over 32/50 will be extra credit.

  1. Completed AngularJS Tutorial (6 Points)
  2. Completed Side-By-Side comparison feature (18 points)
    • Users can select two different devices and view all of their attributes in a table format.
    • If information for a particular category is not available on one device, display "Not available" in the table
  3. Completed Additional Sorting feature (8 points)
    • Users can sort devices based on four different attributes and the attribute values are displayed on the main device list page. (2 points per attribute).
  4. Git Repo (8 points)
    • Two branches are created, one for each feature (4 points).
    • Both branches are merged back to the master branch (4 points).
  5. Creative Portion (10 Points)
Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Mean_Stack&oldid=1997"