Difference between revisions of "Module 5"

From CSE330 Wiki
Jump to navigationJump to search
 
(79 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 and edit their own polls
 
−
#* Add user accounts.  Polls voted on would be associated with the account.  If you choose this option, feel free to use pre-made packages like this one: https://bitbucket.org/ubernostrum/django-registration/
 
−
#* Check for double votes using an IP address ''or'' a cookie
 
−
#*: ''Food for Thought: What are the pros and cons of using IP addresses to block double votes compared to cookies?''
 
−
#* Set a timeout for polls (e.g., ensure that the poll is active for only 7 days)
 
−
#: If there is a feature not on this list that you would like to add, save it for the Creative Portion.
 
−
#: Refer to the grading section for more details on our expectations for the features.
 
−
# 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:
  
−
Web frameworks take care of a lot of the security practices you learned in modules 2 and 3.  For more information on Django security, refer to the Django documentation: https://docs.djangoproject.com/en/dev/topics/security/
+
<pre>/agent What is the capital of France?</pre>
  
−
You still need to ensure that all pages on your site pass the W3C validation.
+
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.
 +
 
 +
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 <code>.env</code> at the root of your project:
 +
 
 +
<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 ==
  
−
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 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'''
 +
 
 +
_________
  
−
# '''Version Control Screencast (5 Points)'''
+
# '''Individual Portion (30 Points):'''
−
# '''Django Tutorial (15 points):'''
+
#* Node.JS is installed on your EC2 instance (5 points)
−
#* Database schema and models set up (4 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.''
−
#* Admin page working (4 points)
+
#* The ''hello.txt'', ''brookings.jpg'', and ''college.html'' files all load successfully (4 points each)
−
#* URL routing is correct (3 points)
+
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (4 points)
−
#* Correct implementation of MVC (or, shall we say, MTV) architecture (4 points)
+
#* Discuss in the README.md why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (4 points)
−
# '''Extend Polls Application (45 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)
−
#* '''''Version Control (15 Points):'''''
+
#* Completion of the AI Reflections for the individual portion of the assignment following the [[AI Best Practices]] (5 points)
−
#** Each team member has their own branch in Git (5 points)
+
# '''Multi-room Chat Server (70 Points):'''
−
#** The branching view in SourceTree indicates that features were merged into master as they were completed and from there merged into each member's working branch (10 points)
+
#* '''''Administration of user created chat rooms (25 Points):'''''
−
#* '''''Features (20 Points):'''''
+
#** Users can create chat rooms with an arbitrary room name(5 points)
−
#*: ''The rubric for each feature is shown below; each one is worth 10 points.  You need only two additional features.  If you choose to do a third, it will count toward the Creative Portion.  You can earn at most 5 points of extra credit by completing features beyond the Creative Portion.''
+
#** Users can join an arbitrary chat room (5 points)
−
#** '''Poll Creation and Editing'''
+
#** The chat room displays all users currently in the room (5 points)
−
#*** Users can specify any number of choices for the poll
+
#** A private room can be created that is password protected (5 points)
−
#*** If the "Timeout" feature is implemented, a timeout can be specified for the poll
+
#** Creators of chat rooms can temporarily kick others out of the room (3 points)
−
#**: ''Note:'' When a poll is edited, you can choose whether to always reset all votes, or whether to keep old votes between edits of the poll.
+
#** Creators of chat rooms can permanently ban users from joining that particular room (2 points)
−
#** '''User Accounts'''
+
#* '''''Messaging (5 Points):'''''
−
#*** Users can log in and log out
+
#** A user's message shows their username and is sent to everyone in the room (1 point)
−
#*** Votes on polls are associated with a user
+
#** Users can send private messages to another user in the same room (4 points)
−
#** '''Preventing Double Votes'''
 
−
#*** If using the IP-based approach, you store the IP address ''using the correct SQL data type'' (i.e., not a string)
 
−
#*** If using the cookie-based approach, your cookie format is not something that the end user can easily figure out and manipulate
 
−
#**: ''Note:'' If you implement both an IP-based and a cookie-based approach, you may earn at most 2 points of extra credit.
 
−
#** '''Poll Timeout'''
 
−
#*** Polls can have specified start times and end times
 
−
#*** The poll entirely shuts down when it is "off" (i.e., the template should not load and the view should not allow more votes to be cast)
 
 
#* '''''Best Practices (5 Points):'''''
 
#* '''''Best Practices (5 Points):'''''
−
#** Code is well organized and conforms to Django conventions (3 points)
+
#** Code is well formatted and easy to read, with proper commenting (2 points)
−
#** All pages pass the W3C validator (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 (10 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"