My Projects

Implementation of fully functional Web Chat Application:

Summary
This project aimed to enhance knowledge and skills in front-end web development with one of the most popular frameworks, “AngularJS”, and ability to design dynamic and fully functional application with backend system.

Here are some requirements for this application.
The application should be capable of…

  • Exchanging messages in real time
  • Creating user account and authenticate user
  • Creating public chat room where all users can participate
  • Creating private chat room where only invited users can participate
  • Deleting the room.
  • Displaying all users and their online status
  • Displaying other users in the selected private room
  • Notifying other users in a chat room when one user is typing a message.

To have a better idea of further reading, please try this chat application implemented by Harold Asai. (Optimized for PC)

chat-app

Application Design overview

Frontend
User interface consists of following components.

  • Main view – Application view. Displays chat rooms, messages and users.
  • Sign in modal – Modal that pops up on page load.
  • Account modal – Modal that allows user to create new account.
  • New room modal – Modal that allows user to create new room.
  • Invitation modal – Modal that allows user to invite other users to a private room.

Backend
This application uses Google Firebase as it’s authentication & database server. Firebase allows us to setup web application backend with minimal effort and is perfect for prototyping or testing.
In this application, clients directly send API call to Firebase DB to manipulate user informaiton, chat room information and messages. Diagram below is the control flow of this application.

design-overviewr1

Database structure
Database of this application consists of three tables. Users, chat rooms and messages.
Other than basic user information, each user has a list of private chat rooms. Main view loads this list and display them in the side bar. In the same way,  Main view loads participants list from a chat room entry and display users who are in that private room . Most importantly, Main view filters messages by selected room ID and display them in the center window.
Here is sample entry for each table

 users:  chat rooms:  messages:
 db_users  db_rooms  db_messages

Key Challenges and Solutions

Invite other users to a private room
It required a lot of work to implement a feature which allows user to invite other users. First, I had to find the way to filter out users who are already in the room. Eventually, I defined a function in modal controller, that checks if a given user is a member of selected private chat room and assigned it to ng-hide attribute of the <li> element in the modal view. Second, I coded view & controller so that selected users are properly registered in database and displayed in the view. I created a function which pushes user id and name into a JavaScript object on checkbox mark and remove them on unmark. Then, I defined a function that takes this object as an argument and create new chat room entry with the list of selected participants.

Delete the private room 
On a private room deletion, all the private room entries should be removed from the database. First, entry in the privaterooms list in users entry should be removed, and this should be done for all the participant’s entries. I stored participants list of targeted room into an array and wrote the function that remove the targeted room from privateroom list for all users that are in that array.

Notify other users in the room when a user is typing
Here is how I implemented it. I made Main view to trigger function that send the notification message (“xx is typing…”) with the same key to the database every time user inputs or removes a character in the message form. Then, added a function which deletes the same message few seconds after sending it. However, overwriting typing notification message on every typing event is inefficient and might overload database server or network, I modified the code so that new typing notification message is not sent until current message is expired and deleted.

Conclusion
This project often gave me brain-teasers and few sleepless nights. But I’m so happy about the fact that I became really comfortable with database handling as well as programming with AngularJS. As for the next step, I would like to optimize it for mobile device and improve my code as needed.