Difference between revisions of "Module 6"
(105 intermediate revisions by 9 users not shown) | |||
Line 1: | Line 1: | ||
− | + | __NOTOC__ | |
+ | Module 6 builds upon the JavaScript skills you learned in Module 5. | ||
− | + | == Reading == | |
− | + | The following articles on the online class wiki textbook contain information that will help you complete the assignments. | |
− | + | * [[Node.JS]] | |
+ | * [[Socket.IO]] | ||
+ | * [[FAQ - Mod 6]] | ||
− | + | == Individual Assignments == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | == | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | === Install Node.JS === | |
− | + | Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide. | |
− | + | === Static File Server in Node.JS === | |
− | + | The individual portion of Module 6 is short in order to give you enough time to complete the group portion. | |
− | + | # 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… | |
− | * | + | # 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 == | ||
− | + | In the group portion of Module 6 you will create a multi-room chat server using Node.JS and Socket.IO. This project must be completed using Node.JS. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | This chat service will contain a main lobby where users sign on with a nickname and can communicate with each other. Users may also create chat rooms for other to join. The entire app should be displayed on a single webpage, listing the room you are in, all available rooms, and the users in the current room. | |
− | + | The single room chat server and client are provided here: [[Socket.IO]] | |
− | |||
− | |||
− | |||
== Grading == | == Grading == | ||
− | + | We will be grading the following aspects of your work. There are 75 points total. | |
− | + | '''Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. ''' | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | '''Additionally, for this module, the TA should be able to simply download your repo and start up your file server, without having to copy files or create additional subdirectories. This applies to both the individual and the creative portion''' | ||
− | + | _________ | |
+ | # '''Individual Portion (25 Points):''' | ||
+ | #* Node.JS is installed on your EC2 instance (5 points) | ||
+ | #*: ''Take a screenshot of your browser visiting your EC2 instance serving up the college.html web page on port 3456, make sure the URL is visible in the screenshot.'' | ||
+ | #* The ''hello.txt'', ''brookings.jpg'', and ''college.html'' files all load successfully (4 points each) | ||
+ | #* Visiting a file that does not exist inside the ''static'' directory results in a 404 (4 points) | ||
+ | #* Discuss in the README.md why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (4 points) | ||
+ | #* Make sure all of your individual portion files are pushed to Github (include your node.js files, hello.txt, brookings.jpg, college.html, and phpinfo.php) | ||
− | + | # '''Multi-room Chat Server (50 Points):''' | |
− | + | #* '''''Administration of user created chat rooms (25 Points):''''' | |
+ | #** Users can create chat rooms with an arbitrary room name(5 points) | ||
+ | #** Users can join an arbitrary chat room (5 points) | ||
+ | #** The chat room displays all users currently in the room (5 points) | ||
+ | #** A private room can be created that is password protected (5 points) | ||
+ | #** Creators of chat rooms can temporarily kick others out of the room (3 points) | ||
+ | #** Creators of chat rooms can permanently ban users from joining that particular room (2 points) | ||
+ | #* '''''Messaging (5 Points):''''' | ||
+ | #** A user's message shows their username and is sent to everyone in the room (1 point) | ||
+ | #** Users can send private messages to another user in the same room (4 points) | ||
+ | #* '''''Best Practices (5 Points):''''' | ||
+ | #** Code is well formatted and easy to read, with proper commenting (2 points) | ||
+ | #** Code passes HTML validation (2 points) | ||
+ | #** node_modules folder is ignored by version control (1 points) | ||
+ | #* '''''Usability (5 Points):''''' | ||
+ | #** Communicating with others and joining rooms is easy and intuitive (4 points) | ||
+ | #** Site is visually appealing (1 point) | ||
+ | #* '''Creative Portion (10 Points)''' | ||
+ | <!-- #** Make sure to create a README.md file pointing to your server --> | ||
− | [[Category:Module | + | [[Category:Module 6]] |
[[Category:Modules]] | [[Category:Modules]] |
Latest revision as of 15:41, 21 December 2020
Module 6 builds upon the JavaScript skills you learned in Module 5.
Reading
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
Individual Assignments
Install Node.JS
Install Node.JS from Apt or Yum according to the instructions in the Node.JS guide.
Static File Server in Node.JS
The individual portion of Module 6 is short in order to give you enough time to complete the group portion.
- 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…
- 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 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:
<?php phpinfo(); ?>
- 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
In the group portion of Module 6 you will create a multi-room chat server using Node.JS and Socket.IO. This project must be completed using Node.JS.
This chat service will contain a main lobby where users sign on with a nickname and can communicate with each other. Users may also create chat rooms for other to join. The entire app should be displayed on a single webpage, listing the room you are in, all available rooms, and the users in the current room.
The single room chat server and client are provided here: Socket.IO
Grading
We will be grading the following aspects of your work. There are 75 points total.
Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.
Additionally, for this module, the TA should be able to simply download your repo and start up your file server, without having to copy files or create additional subdirectories. This applies to both the individual and the creative portion
_________
- Individual Portion (25 Points):
- Node.JS is installed on your EC2 instance (5 points)
- Take a screenshot of your browser visiting your EC2 instance serving up the college.html web page on port 3456, make sure the URL is visible in the screenshot.
- The hello.txt, brookings.jpg, and college.html files all load successfully (4 points each)
- Visiting a file that does not exist inside the static directory results in a 404 (4 points)
- Discuss in the README.md why phpinfo.php behaves the way it does when loaded through Node.JS (4 points)
- Make sure all of your individual portion files are pushed to Github (include your node.js files, hello.txt, brookings.jpg, college.html, and phpinfo.php)
- Node.JS is installed on your EC2 instance (5 points)
- Multi-room Chat Server (50 Points):
- Administration of user created chat rooms (25 Points):
- Users can create chat rooms with an arbitrary room name(5 points)
- Users can join an arbitrary chat room (5 points)
- The chat room displays all users currently in the room (5 points)
- A private room can be created that is password protected (5 points)
- Creators of chat rooms can temporarily kick others out of the room (3 points)
- Creators of chat rooms can permanently ban users from joining that particular room (2 points)
- Messaging (5 Points):
- A user's message shows their username and is sent to everyone in the room (1 point)
- Users can send private messages to another user in the same room (4 points)
- Best Practices (5 Points):
- Code is well formatted and easy to read, with proper commenting (2 points)
- Code passes HTML validation (2 points)
- node_modules folder is ignored by version control (1 points)
- Usability (5 Points):
- Communicating with others and joining rooms is easy and intuitive (4 points)
- Site is visually appealing (1 point)
- Creative Portion (10 Points)
- Administration of user created chat rooms (25 Points):