App Screen 2 (UI + Backend Integration)

By
In my previous post I integrated First screen of my app Whiteboard with back-end code. Check it out App Screen 1 UI+Backend Integration.
In this post I am going to tell you how I integrated UI of 2nd screen of my app with database and back-end.

Group chat

As I told in my previous blog that first screen or the main feature of my app is drawing on a canvas and other users may see that in real time. The next main feature is that users be able to share their thoughts and exchange messages through group chat.



UI

User interface for group chat is same as shown in the picture. It contains only basic features for now. Will add more feature such as time of the message.
As shown in picture, there are two types of chat bubbles. One with the gray background is for group members, as their username is also present in there. The other one with blue background is for you (the logged in user).
When the page is loaded or refreshed, all message from the current active group are loaded in the chat window from database.



Sending a message

Below the chat window, there is an input field to write new message and a send button. Click on the input field in order to type a new message. Although it is focused by default when you open the app. Type some message in there and click on the send button or you can press enter.
It will add the message in the chat window immediately. In the back-end, whenever a new message send event is emitted, it send the message data along with the user_id to server, from where it sent to all other users of group and also an entry in the messages table of database.







Side nav

On the top left corner, there is a button with bars. Clicking on that will open a side navigation bar.
On the navigation bar, name of all groups in which you are present are shown. No more information other than name of group is shown. Things need to be added here are number of unread messages in the group and also the group active recently or maybe sorted with alphabetical order and the username or name of the user along with their message as a preview.
You can switch between groups by just clicking on the group’s name. On this event, page refresh internally and messages in the chat window is replaced with the messages of current selected group.
This is it.


What's Next?

In the next post I’ll talk about how to create a new group and how to add an user into any existing group.

Comments

Post a Comment

Popular posts from this blog

Idea for an app | First step to internship

By
Image
It all started when I joined IMAD (Introduction to Modern Application Developement), an MOOC provided by NPTEL in association with Hasura. I completed the assignments and appeared in the final test, scoring an overall of 84%, which, much to my delight, landed me an internship with Hasura. First week task The task in the first week was to come up with an idea for an app that can be demonstrated and used as a Minimum Viable Product (MVP) with just 3 screens. I discussed this task with a few of my friends and researched the internet for viable ideas. After long sessions of discussion and surfing the internet, I finally settled on the idea for an app for a  Collaborative   White Board . The idea   The idea of the app is pretty simple, to create an online platform for collaborative brainstorming by a group/team of people from across the globe. This sort of brainstorming is usually required for startup ideas, projects or the onset of any form of development in a group.
Read more

User Feedback & Testing of White Board

By
Image
As in my previous posts, I’ve described about all screens of my app  White Board.  You can check here — App Screen 1 (UI + Backend Integration) If you are familiar with my previous post and app idea then you know what I did before, otherwise just check my app… medium.com App Screen 2 (UI + Backend Integration) Task 5.1 Hasura Internship. Week 5 task medium.com App Screen 3 (UI + Backend Integration) Task 6.1 Hasura Internship Week 6 Task medium.com This one is for user feedback about my app and testing of the app for any bug. When I completed my app with required functionality as I described in MVP in my first blog post at the beginning of my journey. Idea for an APP | First step to internship This article is about my brainstorming for an idea which can be used an MVP. medium.com Testing and fixing bugs is one of the important part in order to build a successful application. Anyhow a person can’t do this all alone, so it is a better way to get feedback from others as w
Read more

Playing with the Octo-Cat

By
Image
After I done with setting-up dev environment, next task of Hasura Internship was to learn git basics. https://octodex.github.com/images/dojocat.jpg Git is not a programming language or an IDE About Git Git is the most commonly used  distributed version control system . Git is a mature, actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel.  GitHub  is a company that provides a platform to do version controlling Git allows a team of people to work together, all using the same files. And it helps the team cope with the confusion that tends to happen when multiple people are editing the same files. Version control in simple terms is nothing but making flags/check points as significant changes are made to your code/work so that you can always go back to whichever version was last working properly or whichever version you want to use at the moment. Why Git and Github? Version contr
Read more