|Released||Thursday, July 12|
|Due||Tuesday, July 24 at 6pm EST|
If you need help while working on the project, feel free to take advantage of any or all of the following resources:
This project will be evaluated along the axes of correctness, design, and style, with the project’s overall score computed as (3 × correctness) + (2 × design) + (1 × style). These axes, to be more clear, are defined thusly:
We are not as concerned with your site’s aesthetics, except to the extent that a poor visual design actually inhibits the user from fully interacting with the page.
In this project, you’ll build a single-page application which is an online messaging service using Flask, similar in spirit to Slack. Users will be able to sign into your site with a display name, create channels (i.e. chatrooms) to communicate in, as well as see and join existing channels. Once a channel is selected, users will be able to send and receive messages with one another in real time. Finally, you’ll add a personal touch to your chat application of your choosing!
The project is due on July 24, but to avoid saving too much for the last minute and getting stressed out, allow us to strongly encourage that you try to meet the following milestones:
|Milestone 1||complete by July 16||Display Name, Channel Creation, Channel List|
|Milestone 2||complete by July 20||Messages View, Sending Messages|
|Milestone 3||complete by July 24||Remembering the Channel, Personal Touch|
First, log into CS50 IDE and ensure everything is up to date:
Then, after that finishes executing, download the distribution code for this assignment.
$ cd $ wget http://cdn.cs50.net/web/2018/summer/projects/2/project2.zip $ unzip project2.zip $ rm -rf project2.zip $ cd project2
You should see that the directory contains three files initially. You’ll add several more as you proceed through this project.
README.md application.py requirements.txt
To run this Flask application:
pip3 install -r requirements.txtin your terminal window to make sure that all of the necessary Python packages (SocketIO, for instance) are installed.
1, which will activate Flask’s debugger and will automatically reload your web application whenever you save a change to a file.
flask runto start up your Flask application.
flaskin the terminal (look for a line in your output of the form
Running on:), you should see the text
"Project 2: TODO"!
geventpackage commandeers the terminal output, click on CS50 IDE at top left, and then Web Server to be brought to the right address!)
Alright, it’s time to actually build your web application! Here are the requirements:
index.html, and should not be directed anywhere else while using your application. Indeed, the page should asynchronously update as changes are made.
README.md, include a short writeup describing your project, what’s contained in each file, and (optionally) any other additional information the staff should know about your project. Also, include a description of your personal touch and what you chose to add to the project.
Beyond these requirements, the design, look, and feel of the website are up to you! You’re also welcome to add additional features to your website, so long as you meet the requirements laid out in the above specification!
notesexample from Lecture 2). However, you should feel free to store any data you need in memory in your Flask application, as via using one or more global variables defined in
application.py. You’ll notice, in fact, that we pre-defined one for you (
channel_list). You are welcome to delete it, if you want; it’s only there to show where one might put these things.
onto send and listen for, respectively, signals, and then write code that acts upon those signals to create the desired behavior.
Refresh this page periodically for answers to FAQs!
Execute the below steps on or after July 18.
$ cd ~/workspace/project2 $ submit50 web50/2018/summer/project2
Fill out this form!
Congratulations! You’ve completed Project 2.