Goal
To complete the the Chat program by:
- Creating an attractive Bootstrap interface
- Adding features to make more usable
Github:
Method
Start with the existing chat program.
Add the following features:
- Show a list of current users (update dynamically as users come and go). For this you will need to modify the fetch to also return (in the JSON) a list of current users. This field should be dynamically updated on the screen everytime a user enters and leaves.
- Require users to register and create a login using the register modal. This will require a new REST microservice:
/chat/register/username/email/password
The microservice should return a status of success if register ok, or fail with an error message if something is wrong:
– Username already exists
– Password less then 6 characters
– Email already exists
Note that the accounts will be stored in the C++ or Python microservice app, and they will be lost when the program is restarted. We will be fixing this in the next version (with a database)
Add 2 of the following features, or propose some yourself?
- Create several chatrooms, and a person can choose. I added an unused dropdown menu, this could contain a list of chatrooms. They could be fixed or (much harder) a user could add a room.
This will at minimum require that the fetch and send include the chatroom the user is in, and the server will need to maintain set set of chat sessions (in a dictionary perhaps). And the API will include the room:
/chat/send/username/room/message - Allow users to drop images into the chat (https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/). Images should be autoscale to fit.
- Show an animated “…” when a user is typing a message (https://www.w3schools.com/jsref/event_onkeypress.asp). You chould just cycle the number of dots for each keypress. This will require that you send a message to the service everytime a key is pressed. You will need a new microservice, like:
/chat/user/typing
Which notifies that service that the user is typing. You should reset the state with:
/chat/user/nottyping
whenever the send is made.
You will also need to return additional information when the fetch is called. You could return an additional attribute:value pair like this:
{"typing":["Bill","Suzy"]}
for users that are typing. If you want to make it nice, set a timer in the javascript and ending the typing stat if the user doesn’t type 20 seconds (or something) - Have messages time out after a given time (like Snapchat and WhatsApp). They would literally just disappear from the screen.
- Allow users to upvote or downvote any message. This could be done use the bootstrap thumps up and down icons: https://icons.getbootstrap.com/. Place a thumbs up and thumbs down next to each message with a number. The numer increments when clicked for that message.
This will obviously require a new microservice, that sends a message and an up or down indicator. The issue is you need to keep track off which messages. I suggest giving each message a unique ID (perhaps the username and a incrementing number). Then you send something like:
/chat/kudos/billy12/up
or
/chat/kudos/suzy9/down
Of course this also means when you fech, you will need to return an updated list of all the new counts, and update all the messages on the screen. This is a difficult option. - Allow users to be invited to chat via email (https://www.geeksforgeeks.org/how-to-send-an-email-from-javascript/). A user can login, and then in a field enter a email address, and then system will send an email to that user, including a link to the chat.
- Ask if a user wants a summary of the chat session emailed to them when they leave.
- Propose something interesting, and get it approved.
These projects will be completed in teams of two.
Turn in a user a write explaining the operations, and showing screenshots of the features. Also turn in links to your running site.