This is a continuation of the previous blog which if you haven't read please do check out. In the previous blog, I started the process of creating chat functionality from scratch a process that is kinda long and complicated🙄which is why I decided to split the blog into two parts with this being the second and final part. The first part was focused on the creation of a nice clean UI which was inspired by the LinkedIn chat, the creation of conversation objects for displaying the chat list and most important setting up message-sending functionality which means messages, though just in text form can be sent between users. Although this got me close to finishing, there was still a lot to be done which is the focus of this second part.

The tasks that remained and have been added included enabling realtime time message-sending functionality, adding notifications so a user is notified when they get a new message, enabling the transfer of files between users and just a couple of small features to generally improve the user experience. It's worth noting that because the course assist project comprises two apps (a user app and an expert app) I've had to implement these features twice that's why it's taken longer than I'd expected.

The feature I started with was enabling the transfer of files between users. As I mentioned before it was only possible to send messages in text form in the chat and not files like images, pdf, docs..etc. for this I used a 3rd party React Native Expo file selecting package called expo-document-picker to handle obtaining files from the phone and on the backend, Django enables the storing of files and easy transfer of files via the Django rest framework API. An issue I had working on this was the downloading and opening of files. Since I'm using react native with expo I couldn't find a package that enables downloading of received files. I then came across a package called expo-linking and what this does is it opens the link to the sent file in a browser and when this happens the browser automatically downloads the file. Not the method of downloading I had in mind but it works so I'll stick with it for now. Also, this method works on Android which is the OS I'm testing the apps on but I'm not sure if it'll be the case with IOS. I'll have to wait and see.

Next was notifications, when a message is sent a user needs to be notified when they receive it. For this, I used expo-push-notifications which is another free 3rd party package you could use for react native. When a message is successfully posted the send notification function included in expo-push-notifications is called and sends a notification to the user telling them they've received a new message.

The last but most important feature I worked on was real-time functionality. A chat app that isn't real-time is not a chat app. The whole point is for a user to receive a message immediately after it's sent. For this, I used Socket-io which I'm already using for another section of this project. A Nodejs server is running and works as a middleman between the two apps. When a user sends a message, the node server via sockets is notified and then emits a message via sockets to the other users' chat asking the page to request the new message. This whole process happens almost instantly. I also added a few features just mainly to do with improvements in the user interface and user experience such as cleaning up the message list, organising the chat, adding nice time and date stamps, smooth process of getting and sending files, blocking message send if the user hasn't written any message or selected a file and just a couple of others related to the same. And just like that I had successfully added chat functionality into my project from scratch which has gotten me a huge step closer to completing Course Assist. Next, I'm going to be doing a test of the whole system to see what bugs need to be fixed and what features could be added. All of which I'll document in my next blog so keep an eye out for that. Thank you for reading🙏