If you’ve been following this series you’re probably wondering why I’m rebuilding chat functionality into Course Assist. In the previous chat functionality blog I mentioned 3 ways of adding chat functionality to an app which is; 1. Building a chat system from scratch, 2. Using software as a service(saas) and 3. Using a 3rd party app. If this doesn’t make much sense please read my previous chat functionality blog where I break them down further. I initially went for option 2 before but after running a few tests I realised MinChat the software as a service(saas) I used to implement chat functionality didn’t suit my needs the way I would’ve wanted it to. It is still a very good software as a service which I highly recommend for anyone looking to implement chat functionality into their project, it’s just that it’s still kinda new and buggy or at least in the case of my project😅. Course Assist is a project that’s taken me a very long time to complete and at this point, I’m trying to complete it as soon as possible so I can move on to other projects, and because of this I can’t afford to wait on a new saas to grow and improve for me to move ahead with this project. That being said I decided to build my own chat system from scratch.
Now I know what you’re thinking. “But you said building a chat system from scratch is the most complicated method of implementing chat functionality and takes very long” well yes it does, but in my defence, before I decided to use a saas I had already begun building a chat system🤷🏾♂️. So I had the necessary components and database design to get started and finish it quickly. Now because creating a chat system is a whole project on its own I decided to break this blog into two parts to properly highlight what’s going on, which is why there is a (1/2) in the title.
Now the first thing I did when I decided to start building the chat system from scratch was to create a clear plan as to how I’ll go about building the system. The first step I took was designing the UI, I knew I’d struggle with this a bit because I’m terrible at design🙄 so I started looking for a good 3rd party Chat UI kit. After looking at a bunch I felt they didn’t suit my needs so I decided to create my own. So I looked at a couple of already-made designs that I could use as a template and the one that caught my eye was the LinkedIn chat. Because chatting isn’t the main purpose of Course Assist I’m trying to keep the chat UI as simple as possible which is why the LinkedIn chat UI is perfect to use as a template for my design🤩. I’ll post a screenshot of the Course Assist chat UI below so you can have a look at the design. Once I designed the UI with some dummy data I then went on to add functionality to the UI.
So I mentioned that before I used a saas I had started the process of building chat functionality, what I did now was just build on top of this existing functionality. I used the same message object in the database and also the same code used to submit a message once the user clicks send. The biggest challenge I faced when working on the chat functionality was figuring out how I was gonna create a chat list. Basically, when you open your favourite chat app the first thing you see is the list of chats you’ve got and when you click on one of them you’re taken into the chat with a particular person, now how to create that chat list confused me. After brainstorming🧠 I decided to create a conversation object in the database which will act as a foreign key for each message. In other words, each message is supposed to belong to a particular conversation between two users and if a conversation doesn’t exist a new one is created before a new message is sent. With this, I’m then able to get the chat list by requesting each conversation that has a particular users ID. I implemented all this and just like that I was able to send messages between users. Now there’s still a lot more to be done such as enabling real-time sending of messages (I still have to refresh the page to see a new message), enabling the transfer of files not just text and also enabling notifications so when a user gets a message they’re notified. All of this I’ll tackle in the next couple of days and I’ll write about it in the next part of this blog as soon as I’m done so stay tuned to see how that goes in the next part. I’ve added an image below so you can get a feel of the chat system I’m building, please don’t mind the ugly time stamps, like the said the chat system is still far from completion😅. Thanks for reading and see you in the next one.
