Difference between revisions of "Module 5"

From CSE330 Wiki
Jump to navigationJump to search
Line 1: Line 1:
 +
__NOTOC__
  
−
__NOTOC__
+
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.
−
<span style="font-size:1.3em; line-height:1.2em; color:red;">
 
−
'''This module is under development for Spring 2026. Do not begin this assignment until this notice is removed.''' </span>
 
−
 
 
−
Module 5 builds upon the JavaScript skills you learned in Module 4.
 
  
 
== 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:
  
 
* [[Node.JS]]
 
* [[Node.JS]]
Line 16: Line 13:
 
== Individual Assignments ==
 
== Individual Assignments ==
  
−
=== Install Node.JS ===
+
=== Install Node.js ===
  
−
Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide.
+
Install Node.js using the instructions in the [[Node.JS]] guide (use the current LTS version via nvm).
  
−
=== Static File Server in Node.JS ===
+
=== Static File Server in Node.js ===
  
−
The individual portion of Module 5 is short in order to give you enough time to complete the group portion.
+
The individual portion is intentionally short so you have sufficient time for the group project.
  
−
# 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!).
+
Follow these steps carefully.
−
#: 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 13 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 ==
+
# 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.
  
−
In the group portion of Module 5 you will create a multi-room chat server using Node.JS and Socket.IO. This project must be completed using Node.JS.
+
Questions to consider:
  
−
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.
+
* Which files work and which do not?
 +
* Why does <code>phpinfo.php</code> behave differently when served by Node instead of Apache?
  
−
The single room chat server and client are provided here: [[Socket.IO]]
+
== 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.
  
−
== Agent: AI Extension ==
+
The system must include:
  
−
In this section, you’ll enhance your multi-room chat server with an **AI assistant** powered by your choice of model. You can choose whichever option you prefer.
+
* A main lobby where users select a nickname
−
For most students, **Ollama** is recommended as it runs locally and is free. Go to https://ollama.com/ and click models to see all of the models available. Also, https://huggingface.co/ is a great place to find open-source models. 
+
* Ability to create chat rooms
−
Other popular options include **OpenAI**, **Gemini**, and similar APIs (note that most cloud options do not have a free tier). If you have question about a specific model ask a TA.
+
* 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
  
−
=== Overview ===
+
The single-room example is provided here:
−
This extension allows any user in a chat room to message an AI bot by typing a command like:
 
  
−
```
+
* [[Socket.IO]]
−
\agent What is the capital of France?
 
−
```
 
  
−
The server captures messages that begin with `\agent`, forwards the prompt to your chosen model, and returns the generated reply to everyone in the same room as **Agent**.
+
== AI Agent Extension ==
  
−
You are welcome to use any AI helper to complete this extension.
+
You will enhance your chat server with an AI assistant.
−
If you choose to use an API, you need to obtain an API key and store it in a file named `.env` at the root of your project, for example:
 
  
−
```
+
Users can message the AI by typing:
−
OPENAI_API_KEY=your_key_here
 
−
```
 
  
−
Your server code should then load it securely with:
+
<pre>\agent What is the capital of France?</pre>
  
−
```js
+
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.
−
import 'dotenv/config';
 
−
```
 
  
−
See your selected API’s documentation for instructions on obtaining and using keys. Feel free to use your favorite AI helper to compelte this portion.
+
You may use:
  
 +
* Ollama (recommended — runs locally and free)
 +
* OpenAI
 +
* Gemini
 +
* HuggingFace
 +
* Any approved model
  
−
== Grading ==
+
If using an API, store your key in a file named <code>.env</code> at the root of your project:
  
−
We will be grading the following aspects of your work.  There are 75 points total.
+
<source lang="bash">
 +
OPENAI_API_KEY=your_key_here
 +
</source>
  
−
'''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. '''
+
Load it securely in your server:
  
−
'''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'''
+
<source lang="javascript">
 +
import 'dotenv/config';
 +
</source>
  
 +
Refer to your chosen model’s documentation for setup details.
  
 
== Grading ==
 
== Grading ==
  
−
We will be grading the following aspects of your work.  There are 85 points total.
+
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. '''
 
'''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. '''
Line 104: Line 107:
 
#* 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)
 
#* 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)
 
#* Completion of the AI Reflections for the individual portion of the assignment following the [[AI Best Practices]] (5 points)
−
# '''Multi-room Chat Server (55 Points):'''
+
# '''Multi-room Chat Server (70 Points):'''
 
#* '''''Administration of user created chat rooms (25 Points):'''''
 
#* '''''Administration of user created chat rooms (25 Points):'''''
 
#** Users can create chat rooms with an arbitrary room name(5 points)
 
#** Users can create chat rooms with an arbitrary room name(5 points)
Line 115: Line 118:
 
#** A user's message shows their username and is sent to everyone in the room (1 point)
 
#** 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)
 
#** Users can send private messages to another user in the same room (4 points)
−
#* '''AI Agent (15 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)
 
 
#* '''''Best Practices (5 Points):'''''
 
#* '''''Best Practices (5 Points):'''''
 
#** Code is well formatted and easy to read, with proper commenting (2 points)
 
#** Code is well formatted and easy to read, with proper commenting (2 points)
Line 125: Line 125:
 
#** Communicating with others and joining rooms is easy and intuitive (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)
−
#* Completion of the AI Reflections for the group portion of the assignment following the [[AI Best Practices]] (5 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)'''
 
#* '''Creative Portion (10 Points)'''
 
<!-- #** Make sure to create a README.md file pointing to your server -->
 
<!-- #** 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 — Recommended: Running on EC2 ===
 +
 +
Deploy your chat server on your EC2 instance and keep it running.
 +
 +
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.
 +
 +
  
 
[[Category:Module 5]]
 
[[Category:Module 5]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Revision as of 13:30, 1 March 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 — Recommended: Running on EC2

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

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.

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