Difference between revisions of "Mean Stack"

From CSE330 Wiki
Jump to navigationJump to search
m (moved Module 7 to Mean Stack)
 
(36 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
__NOTOC__
 
−
Module 7 builds upon the JavaScript skills you learned in Module 6.
 
  
−
== Reading ==
 
  
−
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
+
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!
  
−
* [[Node.JS]]
 
−
* [[Socket.IO]]
 
  
−
== Individual Assignments ==
+
== Reading ==
  
−
=== Install Node.JS ===
+
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
  
−
Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide.
+
*[[Preparations]]
 +
*[[Getting MEAN]]
 +
* [[Git]]
 +
*[[Angular]]
  
−
=== Static File Server in Node.JS ===
+
== Further Reading ==
  
−
The individual portion of Module 7 is short in order to give you enough time to complete the group portion.
+
=== Tutorials ===
  
−
# 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!).
+
It may be a good idea to go through tutorials for both MongoDB and AngularJS, and understand how Express works.
−
#: 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 ==
+
=== Install MEAN ===
  
−
In the group portion of Module 7, you will be building a multiplayer Pong game using Node.JS and Socket.IO.
+
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).  
  
−
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:
+
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.
  
−
<source lang="bash">$ emacs -q --no-splash -f pong</source>
+
== Group Project ==
−
 
+
* Extended the AngularJS tutorial with additional features.
−
Press '''C-x C-c''' to exit emacs.
 
−
 
 
−
=== Setting Up for the Pong Game ===
 
−
 
 
−
First thing first: set up a static file server running Node.JS.  We will need it in order to serve up our HTML and JavaScript content.
 
−
 
 
−
==== Your First File: pong-game.js ====
 
−
 
 
−
The first file you can save in your ''static'' directory will be ''pong-game.js'', which you can download from here: http://classes.engineering.wustl.edu/cse330/content/pong-game.js
 
−
 
 
−
We created the ''pong-game.js'' file for you to save you time and so that you can focus on the Node.JS and Socket.IO aspects of this module.  This file contains the core Pong engine, but it does ''not'' establish communication between users of any kind.  Note that the file ''does'' depend on Ext JS.
 
−
 
 
−
If you are curious, we used the [http://www.limejs.com/ LimeJS] framework as the backbone of ''pong-game.js''.  You can find the pre-compiled source code for the Pong game here:
 
−
 
 
−
* http://classes.engineering.wustl.edu/cse330/content/pong.js
 
−
* http://classes.engineering.wustl.edu/cse330/content/ball.js
 
−
 
 
−
We then used the [https://developers.google.com/closure/compiler/ Google Closure Compiler] to compile all of the libraries you need into the one modular JavaScript file.
 
−
 
 
−
Just to be clear, ''for the purposes of Module 7, you do not need to bother with either LimeJS or Google Closure.''
 
−
 
 
−
==== Your Second File: client.html ====
 
−
 
 
−
The second file you can save in your ''static'' directory should be an HTML file created from your favorite [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy Page Layout]].  You need to add the following CSS rules:
 
  
−
<source lang="css">
+
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. 
−
#gameContainer{
 
−
margin: 0 auto;
 
−
width: 960px;
 
−
height: 500px;
 
−
}
 
−
#controls{
 
−
height: 20px;
 
−
text-align: center;
 
−
}
 
−
#game{
 
−
width: 960px;
 
−
height: 480px;
 
−
border: 1px solid black;
 
−
}
 
−
</source>
 
  
−
Add the following HTML inside your ''main'' div; this is what will contain the Pong game canvas:
+
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.
  
−
<source lang="html4strict">
+
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. 
−
<div id="gameContainer">
 
−
<div id="controls">
 
−
<button id="pauseBtn">
 
−
Pause/Resume
 
−
</button>
 
−
</div>
 
−
<div id="game"></div>
 
−
</div>
 
−
</source>
 
  
−
Finally, don't forget to include Ext JS as well as ''pong-game.js''.  Ext JS should be loaded first since ''pong-game.js'' depends on Ext.
+
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.
  
−
We also highly recommend that you create an additional file, ''client.js'', which you include into ''client.html'' and which contains the client-side logic for your Pong game.  It should load after ''pong-game.js''.  Start with the following code in your ''client.js'':
 
  
−
<source lang="javascript">
+
<!-- * Make an e-commerce site using the MEAN stack.
−
Ext.onReady(function(){
 
−
Ext.fly("gameContainer").enableDisplayMode().hide(); // hide the game canvas by default
 
−
Ext.fly("controls").hide(); // hide the play/pause button; we will not be using this feature for the purposes of Module 7
 
−
});
 
−
</source>
 
  
−
=== Connecting to Socket.IO ===
 
  
−
Now that you have your static fileserver running that serves up your three files (''pong-game.js'', ''client.html'', and ''client.js''), we need to connect everything with Socket.IO.
+
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.
  
−
Follow the instructions in [[Socket.IO|the Socket.IO guide]] for installing Socket.IO. In your ''app.js'', add the following lines:
+
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="javascript">
+
==== Tips on Installing MEAN ====
−
io.listen(app).sockets.on("connection", function(socket){
 
−
// This closure runs when a new Socket.IO connection is established.
 
−
 
−
// Listen for client messaging server:
 
−
socket.on("message", function(content){
 
−
// do stuff
 
−
});
 
−
 
−
// Send a message from the server to the client:
 
−
socket.emit("message", {some:"data"});
 
−
});
 
−
</source>
 
  
−
Don't forget to require socket.io at the top of your file!
+
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.
  
−
<source lang="javascript">
+
You will be making changes on both the server side (the /server directory of your app) and the client side (in the /public directory)
−
io = require("socket.io")
+
#* Server Side:
−
</source>
+
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
−
Inside of the ''io.listen'' callback function is where most of your server-side code will go.
+
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)  
−
On the client side, you need to include the Socket.IO library (put this below Ext JS but above ''pong-game.js'' and ''client.js''):
+
#* Client Side
−
 
+
Model: nothing to change
−
<source lang="html4strict"><script src="/socket.io/socket.io.js"></script></source>
+
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).
−
And finally, you need to connect your client to the Socket.IO server (put this in ''client.js''):
+
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). -->
−
 
 
−
<source lang="javascript">var socket = io.connect(window.location.origin);</source>
 
−
 
 
−
But enough of us giving you all the code!  It's time for you to start being creative.
 
−
 
 
−
=== The Pong Game Interface ===
 
−
 
 
−
For the remainder of this module, your work will be in three files:
 
−
 
 
−
* app.js (or whatever you called your Node.JS file)
 
−
* client.html
 
−
* client.js
 
−
 
 
−
What you need to do is to build a system that enables two players who are both viewing ''client.html'' to choose each other (e.g., from a lobby) and play a game of Pong.
 
−
 
 
−
You should be wondering, "how do I interact with the Pong game?"  The public interface is as follows:
 
−
 
 
−
* '''Methods:'''
 
−
** '''pong.init()''' - initialize the game client.
 
−
** '''pong.resetBall(x, y)''' - arbitrarily set the position of the ball.  Defaults to the center.  Cancels all animations currently acting on the ball.
 
−
** '''pong.launch(angle, direction)''' - launch the ball ''from its current position'' in the specified ''angle'' (-89 to +89) and direction (-1 for left or 1 for right).
 
−
** '''pong.updateOpponentPaddle(position)''' - set the position of the opponent paddle to ''position''.  (Hint: the ''position'' value should have been generated by the opponent's '''paddlemove''' event)
 
−
** '''pong.ready()''' - returns true if the game is not in a "paused" state.
 
−
** '''pong.setScore(score)''' - display score on the game canvas.  ''score'' is an object literal containing two fields: left and right.
 
−
* '''Events (all fired on window):'''
 
−
** '''paddlemove''' - the player's paddle has moved.
 
−
**: This event will fire only after the paddle has moved 15 pixels or more.
 
−
*** '''event.detail.position''' - the new y coordinate of the paddle.
 
−
** '''paddlehit-left''' - the ball has hit the left side of the screen.
 
−
*** '''event.detail.hit''' - true if the ball hit the player's paddle; false otherwise.
 
−
*** '''event.detail.angle''' - if the ball was reflected, the new angle of the ball's rightward movement.
 
−
*** '''event.detail.position''' - the position at which the ball hit the left side
 
−
 
 
−
==== Enabling a Player to Pause ====
 
−
 
 
−
''You do not need to implement the pausing part of your Pong game for the purposes of Module 7; it is here for reference.''
 
−
 
 
−
Implementing a game pause is more difficult for a network game than it is for a game that runs on just one computer.  There is one situation during a Pong game when it makes sense to enable a user to pause the game, though: after a user has lost a round, but before they have fired the next ball at the opponent. At this time, you may display the play/pause button like so:
 
−
 
 
−
<source lang="javascript">Ext.fly("controls").show();</source>
 
−
 
 
−
When your timeout for firing the new ball is executed, test whether or not the canvas is ready.  If it is, fire the ball and hide the play/pause button; otherwise, continue waiting:
 
−
 
 
−
<source lang="javascript">
 
−
var launchNewBall = function(angle, direction){
 
−
if (pong.ready()) {
 
−
// Hide the pause/resume button
 
−
Ext.fly("controls").hide();
 
−
 
−
// Launch the ball on our local canvas
 
−
pong.resetBall();
 
−
pong.launch(angle, direction);
 
−
 
−
// Tell our opponent the angle and direction of the new launch (this probably won't be exactly the same with your implementation)
 
−
socket.emit("launch", {
 
−
angle: angle,
 
−
direction: direction
 
−
});
 
−
}else{
 
−
// Game is paused; keep waiting
 
−
setTimeout(launchNewBall, 500, angle, direction);
 
−
}
 
−
};
 
−
</source>
 
−
 
 
−
=== Example: Starting a Pong Game ===
 
−
 
 
−
Once two players have formed a pair, one of them needs to initialize the game with a certain angle and direction for the ball.  Here is how you might go about doing this:
 
−
 
 
−
<source lang="javascript">
 
−
// generate an initial angle between -60 degrees and +60 degrees:
 
−
var initAngle = -60 + 120*Math.random();
 
−
 
 
−
// randomly choose the initial direction of the ball:
 
−
var initDirection = Math.random() < 0.5 ? -1 : 1;
 
−
 
 
−
// show the game canvas:
 
−
Ext.fly("gameContainer").enableDisplayMode().show();
 
−
 
 
−
// initialize the game canvas:
 
−
pong.init();
 
−
 
 
−
// move the ball to the center:
 
−
pong.resetBall();
 
−
 
 
−
// set the ball into motion:
 
−
pong.launch(initAngle, initDirection);
 
−
 
 
−
// tell the opponent about the ball's initial angle and direction.  For example:
 
−
socket.emit("launch", {
 
−
angle: initAngle,
 
−
direction: initDirection
 
−
});
 
−
</source>
 
−
 
 
−
=== Example: When a Player Reflects the Ball ===
 
−
 
 
−
When the ball hits a player's side, the '''paddlehit-left''' event fires on the window. Here is how you might listen for this event in your ''client.js'' and transmit this information over your socket:
 
−
 
 
−
<source lang="javascript">
 
−
window.addEventListener("paddlehit-left", function(e){
 
−
// e.detail.hit will be true if the client hit the ball with his/her paddle.
 
−
if (e.detail.hit) {
 
−
console.log("HIT PADDLE.  New angle: %f", e.detail.angle); // log a message to the console
 
−
 
−
// Tell our opponent via Socket.IO about the ball's new angle and position:
 
−
socket.emit("reflect", {
 
−
angle: e.detail.angle,
 
−
position: e.detail.position
 
−
});
 
−
 
−
// Note: The game automatically launches the ball and determines the angle based on the ball's position relative to the paddle position.  We therefore do not need to call pong.launch() in here (but our opponent will, as shown below).
 
−
}else{
 
−
console.log("MISSED PADDLE");
 
−
 
−
// in here, we will update the score, check for victory condition, launch a new ball (perhaps after a timeout), etc.
 
−
}
 
−
});
 
−
</source>
 
−
 
 
−
Here is what you might have in ''app.js'' inside of your Socket.IO callback function:
 
−
 
 
−
<source lang="javascript">
 
−
// Listen for the "reflect" message from the client
 
−
socket.on("reflect", function(data){
 
−
// Tell our opponent about the reflection.
 
−
// Note: In this sample implementation, we store the opponent in `socket.opponent`.
 
−
// You might use a different mechanism for storing the opponent's socket.
 
−
socket.opponent.emit("reflect", data);
 
−
});
 
−
</source>
 
−
 
 
−
Finally, here is what you might have on the opponent's end (hint: this is also in ''client.js''):
 
−
 
 
−
<source lang="javascript">
 
−
// Listen for the "reflect" message from the server
 
−
socket.on("reflect", function(data){
 
−
// In order to make up for any network lag, immediately move the ball to its correct position:
 
−
pong.resetBall(960, data.position);
 
−
 
−
// Finally, launch the ball on our local game client:
 
−
pong.launch(data.angle, -1);
 
−
});
 
−
</source>
 
  
 
== Grading ==
 
== Grading ==
  
−
We will be grading the following aspects of your work.  There are 75 points total.
+
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.
  
−
# '''Individual Portion (20 Points):'''
+
# '''Completed AngularJS Tutorial (6 Points)'''
−
#* Node.JS and Socket.IO are installed on your EC2 instance (5 points)
+
# '''Completed Side-By-Side comparison feature (18 points)'''
−
#* The ''hello.txt'', ''brookings.jpg'', and ''city.html'' files all load successfully (3 points each)
+
#* Users can select two different devices and view all of their attributes in a table format.
−
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (3 points)
+
#* If information for a particular category is not available on one device, display "Not available" in the table
−
#* You can explain to the TA why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (3 points)
+
# '''Completed Additional Sorting feature (8 points)'''
−
# '''Pong Game (45 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).
−
#* '''''Matching Pairs of Players (10 Points):'''''
+
# '''Git Repo (8 points)'''
−
#** Players are able to specify a name for themselves (3 points)
+
#* Two branches are created, one for each feature (4 points).
−
#** Players are able to initiate a game on their own, without intervention from you (4 points)
+
#* Both branches are merged back to the master branch (4 points).
−
#** When a game is started, both players need to consent (3 points)
 
−
#* '''''Gameplay (10 Points):'''''
 
−
#** The Pong game works (3 points)
 
−
#** There is a pause between a player losing a round and the ball being launched for the next round (3 points)
 
−
#** Victory condition is enforced (e.g., the first player to score 10 points wins the game) (4 points)
 
−
#* '''''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)
 
−
#** All pages pass the W3C validator (1 point)
 
−
#** There are no XSS vulnerabilities (2 points)
 
−
#** ''Extra Credit:'' Your ''client.js'' code passes [http://jshint.com/ JSHint], a JavaScript validator (+3 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)'''
 
# '''Creative Portion (10 Points)'''
−
 
−
[[Category:Module 7]]
 
−
[[Category:Modules]]
 

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"