App Screen 3 (UI + Backend Integration)
If you followed my previous posts about my app’s 1st and 2nd screen features, then read this post. Otherwise you can check those here
3rd Screen
As I told in my previous posts about first two features of my app Whiteboard, in this one, I am going to talk about 3rd screen of the app. The third screen contains info of groups. To open the Groups page
Click on the gear icon on top right corner. It will open a menu as shown in the picture.
Click on the Groups to open groups page.
UI of 3rd screen looks like the image below
There are two parts of the page, first one in the right side is list of the groups in which user is connected, and on the left side part, information about the selected group is shown.
Main feature of this page are
- Create a new group.
- Add an user to a group.
Creating a new group
To create a new group of your own, hit to right part of the page. In the downwards section, there is an input field for new group name.
Put the name for new group, and push the button create.
It will create a new group with that name and show in the your groups list, also it add the current user to that group and put all information on the database.
Now we have a new group with a single user that is me. We will add some user to this group.
Adding a user to a group
To add a user in any group, first select that group by just clicking on the name of the group in right side group list. All info about this group will be showing in the left side part of the page.
There is an input field in the bottom of the info part . It is for adding a new user in that group. Put the username of the user which you want to add in that group, and press add button.
If that user exists in our database and not already in the group then it will add that user in the group.
If that user is not in database, then it show error of user not found. For example shark is a username which is not registered in my database
And if I try to add it as a member,
Above error occurs.
And if I try to add a user who is already present in the group
Then above error occurs. I didn’t put any message for that, but soon I’ll do.
So these are the features of this page. This page is having minimal features as per recommended by Hasura Internship moderators.
Further I want to add some more features such as
- Removing a member from a group.
- If a member want to leave a group.
- Delete a group which is owned by user.
- Rename the group.
- Change access label for a user.
This is it.
What's Next?
My next post is about user feedback and bug reports for my app.
Stay Tuned!
Comments
Post a Comment