Difference between revisions of "Module 5"

From CSE330 Wiki
Jump to navigationJump to search
 
(85 intermediate revisions by 12 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
−
In Module 5, you will learn about Git, a version control system, and Django, a web framework.
 
  
−
This article contains your assignments for Module 5.
+
Module 5 builds upon the JavaScript skills you learned in Module 4 and introduces server-side JavaScript using Node.js, along with real-time communication using Socket.IO.
  
 
== 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 class wiki contain information that will help you complete the assignments:
  
−
* [[Git]]
+
* [[Node.JS]]
−
* [[Web Frameworks]]
+
* [[Socket.IO]]
 +
* [[FAQ - Mod 5]]
  
 
== Individual Assignments ==
 
== Individual Assignments ==
  
−
=== Learn about Version Control Systems ===
+
=== Install Node.js ===
  
−
On your own time, '''watch the 40-minute screencast that has been posted to Blackboard'''. This gives an insightful understanding of how VCSs work under-the-hood.
+
Install Node.js using the instructions in the [[Node.JS]] guide (use the current LTS version via nvm).
  
−
=== Django Tutorial ===
+
=== Static File Server in Node.js ===
  
−
The web framework we will be using in Module 5 is called '''Django'''.  Django is the dominant Python-based web framework and is useful for large web sites.
+
The individual portion is intentionally short so you have sufficient time for the group project.
  
−
Before you may begin, you need to install Django.  You may do this using [[Python#Pip|pip]], which you installed in Module 4.  Django's package name in pip is '''Django'''.
+
Follow these steps carefully.
  
−
Once you have Django installed, complete [https://docs.djangoproject.com/en/1.4/intro/tutorial01/ the official Django tutorial]. You will be creating a simple poll app. There are four parts to the tutorial.
+
# Copy the static file server example from the [[Node.JS]] page into a file named <code>app.js</code>. Save it on your EC2 instance in a directory that is NOT served by Apache.
 +
# Ensure that you understand what the static file server script is doing.
 +
# Create a directory parallel to <code>app.js</code> named <code>static</code>.
 +
# Confirm that your server’s <code>STATIC_DIR</code> variable matches this directory name.
 +
# Create the following files inside the <code>static</code> directory:
 +
#* <code>hello.txt</code> — a text file containing: <b>Hello World</b>
 +
#* <code>brookings.jpg</code> — download from: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
 +
#* <code>college.html</code> — an HTML page based on the [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy HTML Layout]] that includes an <code>&lt;img&gt;</code> referencing <code>brookings.jpg</code>
 +
#* <code>phpinfo.php</code> — a PHP file containing:
 +
#: <source lang="php"><?php phpinfo(); ?></source>
 +
# Start your Node.js server and load all four files in your browser.
  
−
It is important that you do all the steps in the tutorial in order to get comfortable defining models, views, templates, and using the interactive shell and the admin app. Understanding these concepts will make the project go much quicker.
+
Questions to consider:
  
−
'''Tip:''' It is recommended that you install a copy of Python and Django on your local computer.  This way, you will not need to upload the files to your server every time you make a change, because your server will be running locally.
+
* Which files work and which do not?
 +
* Why does <code>phpinfo.php</code> behave differently when served by Node instead of Apache?
  
−
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial01/ Part 1]'''
+
== Group Project: Multi-Room Chat Server ==
−
#* Create a project
 
−
#* Start the development server
 
−
#* Setup an SQLite database
 
−
#* Create the Polls app and define the models
 
−
#* Interact with the database using the interactive python shell
 
−
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial02/ Part 2]'''
 
−
#* Activate the admin site
 
−
#* Add the poll app to the admin site
 
−
#* Modify the database using the admin site
 
−
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial03/ Part 3]'''
 
−
#* Configure URL handling
 
−
#* Create some views
 
−
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial04/ Part 4]'''
 
−
#* Write a form that modifies the database
 
−
#* Refactor to use generic views
 
  
−
== Group Project ==
+
In the group portion of Module 5, you will build a multi-room chat system using Node.js and Socket.IO.
  
−
=== Extending the Polls App using Version Control ===
+
The system must include:
  
−
As your group project, you and your partner will each independently add an additional feature to the polls app you made in the individual portion. You will each be working in your own branch in your group Git repository.  When the features are complete, you will merge them back into the master branch.
+
* A main lobby where users select a nickname
 +
* Ability to create chat rooms
 +
* Ability to join chat rooms
 +
* A list of available rooms
 +
* A list of users currently in the room
 +
* The entire application displayed on a single webpage
  
−
# Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
+
The single-room example is provided here:
−
# After pushing and pulling, everyone should have the up-to-date master branch on their machine.
 
−
# Each person in the group should then make a new branch named with their first name.
 
−
# Each person can then individually work on their new feature.  Here are some ideas for new features that will all earn full credit:
 
−
#* Enable users to create their own polls
 
−
#* Add user accounts.  Polls voted on would be associated with the account
 
−
#* Check for double votes using Cookie and/or IP
 
−
#* Set a timeout for polls (e.g., the poll is active for only 7 days)
 
−
#* Add a banner ad to the site that changes on a page reload (you could use Google Adsense or similar)
 
−
#: If there is a feature not on this list that you would like to add, please ask a TA.
 
−
# When someone completes their feature, they should merge their branch into the master branch, and everyone else in the group should merge the master branch (which now has the new feature) into their personal working branch.
 
  
−
On Demo Day, you will need to show the branching structure of your repository in SourceTree to the TA.
+
* [[Socket.IO]]
  
−
=== Creative Portion ===
+
== AI Agent Extension ==
  
−
As your creative portion, add two more features to your polls app, at least one of which shouldn't be in the list above.
+
You will enhance your chat server with an AI assistant.
  
−
=== Web Security and Validation ===
+
Users can message the AI by typing:
  
−
Your project needs to demonstrate that thought was put into web security and best practice.  For more information, see this week's Web Application Security guide: [[Web Application Security, Part 2]]
+
<pre>/agent What is the capital of France?</pre>
  
−
In particular:
+
The server detects messages that begin with <code>/agent</code>, sends the prompt to an AI model, and broadcasts the response as <b>Agent</b> in the same room.
  
−
* '''Your application needs to be secure from SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
+
You may use:
−
* '''All of your output needs to be sanitized using htmlentities()'''.
 
  
−
You shouldn't forget the practices you learned last week:
+
* Ollama (recommended — runs locally and free)
 +
* OpenAI
 +
* Gemini
 +
* HuggingFace
 +
* Any approved model
  
−
* '''You should pass tokens in forms''' to prevent CSRF attacks.
+
If using an API, store your key in a file named <code>.env</code> at the root of your project:
−
* '''Your page should validate''' with no errors through the W3C validator.
+
 
 +
<source lang="bash">
 +
OPENAI_API_KEY=your_key_here
 +
</source>
 +
 
 +
Load it securely in your server:
 +
 
 +
<source lang="javascript">
 +
import 'dotenv/config';
 +
</source>
 +
 
 +
Refer to your chosen model’s documentation for setup details.
  
 
== Grading ==
 
== Grading ==
Line 88: Line 93:
 
We will be grading the following aspects of your work.  There are 100 points total.
 
We will be grading the following aspects of your work.  There are 100 points total.
  
−
# '''MySQL Queries (25 Points):'''
+
'''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. '''
−
#* A MySQL server is running on your instance (2 points)
+
 
−
#* Tables fields, including data types, are correct (4 points)
+
'''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'''
−
#* Foreign keys are correct (4 points)
+
 
−
#* The output of each of the five queries is correct (3 points each)
+
_________
−
# '''News Site (60 Points):'''
+
 
−
#* '''''User Management (20 Points):'''''
+
# '''Individual Portion (30 Points):'''
−
#** A session is created when a user logs in (3 points)
+
#* Node.JS is installed on your EC2 instance (5 points)
−
#** New users can register (3 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.''
−
#** Passwords are hashed using salted one-way encryption (3 points)
+
#* The ''hello.txt'', ''brookings.jpg'', and ''college.html'' files all load successfully (4 points each)
−
#** Users can log out (3 points)
+
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (4 points)
−
#** A user can edit and delete his/her own stories and comments but cannot edit or delete the stories or comments of another user (8 points)
+
#* Discuss in the README.md why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (4 points)
−
#* '''''Story and Comment Management (20 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)
−
#** Relational database is configured with correct data types and foreign keys (4 points)
+
#* Completion of the AI Reflections for the individual portion of the assignment following the [[AI Best Practices]] (5 points)
−
#** Stories can be posted (3 points)
+
# '''Multi-room Chat Server (70 Points):'''
−
#** A link can be associated with each story using a separate database field (3 points)
+
#* '''''Administration of user created chat rooms (25 Points):'''''
−
#** Comments can be posted in association with a story (4 points)
+
#** Users can create chat rooms with an arbitrary room name(5 points)
−
#** Stories can be edited and deleted (3 points)
+
#** Users can join an arbitrary chat room (5 points)
−
#** Comments can be edited and deleted (3 points)
+
#** The chat room displays all users currently in the room (5 points)
−
#**: ''Note: Although there are only 6 points allocated for editing/deleting in this section, there are 8 more points at stake in the User Management section that cannot be earned unless editing/deleting is implemented.  Implementing editing but not deleting, or vice-versa, will result in earning half the points.''
+
#** A private room can be created that is password protected (5 points)
−
#* '''''Best Practices (15 Points):'''''
+
#** Creators of chat rooms can temporarily kick others out of the room (3 points)
−
#** Code is well formatted and easy to read (3 points)
+
#** Creators of chat rooms can permanently ban users from joining that particular room (2 points)
−
#** Safe from SQL Injection attacks (3 points)
+
#* '''''Messaging (5 Points):'''''
−
#** All content is sanitized on output (3 points)
+
#** A user's message shows their username and is sent to everyone in the room (1 point)
−
#** All pages pass the W3C validator (3 points)
+
#** Users can send private messages to another user in the same room (4 points)
−
#** CSRF tokens are passed when creating, editing, and deleting comments and stories (3 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):'''''
 
#* '''''Usability (5 Points):'''''
−
#** Site is intuitive to use and navigate (4 points)
+
#** Communicating with others and joining rooms is easy and intuitive (4 points)
 
#** Site is visually appealing (1 point)
 
#** Site is visually appealing (1 point)
−
# '''Creative Portion (15 Points)'''
+
#* '''AI Agent and Reflection (20 Points)'''
 +
#** Implement an AI assistant accessible via the command \agent ... that replies in the current room (10 points)
 +
#** Handles basic errors gracefully and does not crash the server (5 point)
 +
#** Completion of the AI Reflections for the group portion of the assignment following the [[AI Best Practices]] (5 points)
 +
#* '''Creative Portion (10 Points)'''
 +
<!-- #** Make sure to create a README.md file pointing to your server -->
 +
 
 +
== Submission Instructions ==
 +
 
 +
To ensure your project can be graded quickly and reliably, follow these submission requirements carefully.
 +
 
 +
All students must submit a working GitHub repository. In addition, your project must be verifiable by the TA using one of the two methods below.
 +
 
 +
=== Required for ALL Submissions ===
 +
 
 +
Your GitHub repository must include:
 +
 
 +
* All source code for both the individual and group portions
 +
* A complete <code>package.json</code> file
 +
* A <code>README.md</code> containing:
 +
** How to run your server
 +
** Which AI model you used (Ollama, OpenAI, Gemini, etc.)
 +
** Any special setup instructions
 +
* A <code>.gitignore</code> file that excludes:
 +
** <code>node_modules/</code>
 +
** <code>.env</code>
 +
 
 +
'''Do NOT commit your API keys.'''
 +
 
 +
If your project uses environment variables, include a file named:
 +
 
 +
<source lang="bash">
 +
.env.example
 +
</source>
 +
 
 +
Example:
 +
 
 +
<source lang="bash">
 +
OPENAI_API_KEY=
 +
</source>
 +
 
 +
Your server must not crash if the API key is missing. It should fail gracefully.
 +
 
 +
=== Option A - Running on EC2 ===
 +
 
 +
Deploy your chat server on your EC2 instance and keep it running using [[#Running Tmux|tmux]].
 +
 
 +
Your README must include:
 +
 
 +
* Public EC2 URL
 +
* Port number (e.g., 3456)
 +
* Any login instructions (if applicable)
 +
 
 +
The TA will:
 +
 
 +
* Visit your running server
 +
* Test chat functionality
 +
* Test multi-room behavior
 +
* Test the <code>/agent</code> AI command
 +
 
 +
This is the fastest and preferred grading method.
 +
 
 +
=== Option B — Local Execution + Demo Video ===
 +
 
 +
If your server is NOT running on EC2, you must provide a short demonstration video.
 +
 
 +
The video must show:
 +
 
 +
* Starting the server
 +
* Two browser windows connected
 +
* Chat working between users
 +
* The <code>/agent</code> command working
 +
 
 +
Video length: approximately 1–2 minutes.
 +
 
 +
The TA may still run your code locally if needed.
 +
 
 +
=== Server Requirements ===
 +
 
 +
Your submission must:
 +
 
 +
* Start successfully with:
 +
 
 +
<source lang="bash">
 +
npm install
 +
node chat-server.js
 +
</source>
 +
 
 +
(or equivalent script)
 +
 
 +
* Not require manual file copying or directory creation
 +
* Not require editing source code to run
 +
* Handle missing AI keys gracefully
 +
* Not crash during normal use
 +
 
 +
=== Common Causes of Lost Points ===
 +
 
 +
* Missing README instructions
 +
* API key committed to GitHub
 +
* Server crashes when AI key missing
 +
* Broken EC2 deployment (port closed)
 +
* Cannot run after <code>npm install</code>
 +
* <code>node_modules</code> committed to repo
 +
* Hardcoded absolute file paths
 +
* Missing AI demonstration
 +
 
 +
Following these instructions ensures your project can be graded quickly and fairly.
 +
 
 +
=== Running Tmux ===
 +
 
 +
To keep your Node.js apps running after you disconnect from your EC2 instance, you can use a tool called tmux. Normally, when you SSH into a server and start a program, it stops running as soon as you close the terminal. tmux lets your programs continue running in the background even after you disconnect.
 +
 
 +
First, install tmux on your EC2 instance by running:
 +
sudo yum install tmux
 +
 
 +
To start using tmux, create a session by typing:
 +
tmux
 +
 
 +
This opens a new terminal session managed by tmux. You can now start your Node.js server inside this session (for example, node server.js).
 +
 
 +
If you want to disconnect from the server but keep your program running, detach from tmux by pressing:
 +
Control + b, then press d
 +
 
 +
Your Node.js app will continue running even after you disconnect from SSH.
 +
 
 +
Later, when you SSH back into your EC2 instance, you can return to the same tmux session by running:
 +
tmux attach
 +
 
  
 
[[Category:Module 5]]
 
[[Category:Module 5]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 13:31, 7 July 2026


Module 5 builds upon the JavaScript skills you learned in Module 4 and introduces server-side JavaScript using Node.js, along with real-time communication using Socket.IO.

Reading

The following articles on the class wiki contain information that will help you complete the assignments:

Individual Assignments

Install Node.js

Install Node.js using the instructions in the Node.JS guide (use the current LTS version via nvm).

Static File Server in Node.js

The individual portion is intentionally short so you have sufficient time for the group project.

Follow these steps carefully.

  1. Copy the static file server example from the Node.JS page into a file named app.js. Save it on your EC2 instance in a directory that is NOT served by Apache.
  2. Ensure that you understand what the static file server script is doing.
  3. Create a directory parallel to app.js named static.
  4. Confirm that your server’s STATIC_DIR variable matches this directory name.
  5. Create the following files inside the static directory: 
    <?php phpinfo(); ?>
  6. Start your Node.js server and load all four files in your browser.

Questions to consider:

  • Which files work and which do not?
  • Why does phpinfo.php behave differently when served by Node instead of Apache?

Group Project: Multi-Room Chat Server

In the group portion of Module 5, you will build a multi-room chat system using Node.js and Socket.IO.

The system must include:

  • A main lobby where users select a nickname
  • Ability to create chat rooms
  • Ability to join chat rooms
  • A list of available rooms
  • A list of users currently in the room
  • The entire application displayed on a single webpage

The single-room example is provided here:

AI Agent Extension

You will enhance your chat server with an AI assistant.

Users can message the AI by typing: 

/agent What is the capital of France?

The server detects messages that begin with /agent, sends the prompt to an AI model, and broadcasts the response as Agent in the same room.

You may use:

  • Ollama (recommended — runs locally and free)
  • OpenAI
  • Gemini
  • HuggingFace
  • Any approved model

If using an API, store your key in a file named .env at the root of your project: 

OPENAI_API_KEY=your_key_here

Load it securely in your server: 

import 'dotenv/config';

Refer to your chosen model’s documentation for setup details.

Grading

We will be grading the following aspects of your work. There are 100 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

_________

  1. Individual Portion (30 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)
    • Completion of the AI Reflections for the individual portion of the assignment following the AI Best Practices (5 points)
  2. Multi-room Chat Server (70 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)
    • AI Agent and Reflection (20 Points)
      • Implement an AI assistant accessible via the command \agent ... that replies in the current room (10 points)
      • Handles basic errors gracefully and does not crash the server (5 point)
      • Completion of the AI Reflections for the group portion of the assignment following the AI Best Practices (5 points)
    • Creative Portion (10 Points)

Submission Instructions

To ensure your project can be graded quickly and reliably, follow these submission requirements carefully.

All students must submit a working GitHub repository. In addition, your project must be verifiable by the TA using one of the two methods below.

Required for ALL Submissions

Your GitHub repository must include:

  • All source code for both the individual and group portions
  • A complete package.json file
  • A README.md containing:
    • How to run your server
    • Which AI model you used (Ollama, OpenAI, Gemini, etc.)
    • Any special setup instructions
  • A .gitignore file that excludes:
    • node_modules/
    • .env

Do NOT commit your API keys.

If your project uses environment variables, include a file named: 

.env.example

Example: 

OPENAI_API_KEY=

Your server must not crash if the API key is missing. It should fail gracefully.

Option A - Running on EC2

Deploy your chat server on your EC2 instance and keep it running using tmux.

Your README must include:

  • Public EC2 URL
  • Port number (e.g., 3456)
  • Any login instructions (if applicable)

The TA will:

  • Visit your running server
  • Test chat functionality
  • Test multi-room behavior
  • Test the /agent AI command

This is the fastest and preferred grading method.

Option B — Local Execution + Demo Video

If your server is NOT running on EC2, you must provide a short demonstration video.

The video must show:

  • Starting the server
  • Two browser windows connected
  • Chat working between users
  • The /agent command working

Video length: approximately 1–2 minutes.

The TA may still run your code locally if needed.

Server Requirements

Your submission must:

  • Start successfully with:
npm install
node chat-server.js

(or equivalent script)

  • Not require manual file copying or directory creation
  • Not require editing source code to run
  • Handle missing AI keys gracefully
  • Not crash during normal use

Common Causes of Lost Points

  • Missing README instructions
  • API key committed to GitHub
  • Server crashes when AI key missing
  • Broken EC2 deployment (port closed)
  • Cannot run after npm install
  • node_modules committed to repo
  • Hardcoded absolute file paths
  • Missing AI demonstration

Following these instructions ensures your project can be graded quickly and fairly.

Running Tmux

To keep your Node.js apps running after you disconnect from your EC2 instance, you can use a tool called tmux. Normally, when you SSH into a server and start a program, it stops running as soon as you close the terminal. tmux lets your programs continue running in the background even after you disconnect.

First, install tmux on your EC2 instance by running: sudo yum install tmux

To start using tmux, create a session by typing: tmux

This opens a new terminal session managed by tmux. You can now start your Node.js server inside this session (for example, node server.js).

If you want to disconnect from the server but keep your program running, detach from tmux by pressing: Control + b, then press d

Your Node.js app will continue running even after you disconnect from SSH.

Later, when you SSH back into your EC2 instance, you can return to the same tmux session by running: tmux attach

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Module_5&oldid=3522"