Skip to content

Home

Jump to bottom
monesa-git edited this page Sep 21, 2020 · 20 revisions

ChatRoom App

  1. Login Screen

Design


Login Screen

As shown in the above screenshot, this is the login page where the user can login to his or her chatrooms.

  1. Login Button

Clicking on the login button, the system validates the email and the password entered by the user in the edittext is right or wrong. If the validation is failed, an appropriate toast message is displayed to the user indicating that the validation is failed.

  1. Sign Up Button

New Users can click on the Signup button to signup for Chatroom app. This Signup button opens a new activity which is explained in the second section.

  1. Forgot Password Button

Clicking on Forgot Password Button, an email is sent to the user for resetting his or her password.

Implementation

  • User can login from this screen by clicking on the Login Button.
  • Appropriate validations have been added for user email and password.
  • Implemented Authentication using the Firebase email or password authentication.
  • New users can click on the signup button and add their accounts.
  • If the user forgets his/her password, clicking on the forgot password will help them in resetting the password.

Data Design

  • For Login, the user requires to enter an email id that should be already registered(signup) with the App and a password. The app is using Firebase Authentication for Checking the combination of email id and password.

  • For forgot password, App requires an email id from the user. The App is using Firebase Authentication under the hood.

  1. Sign Up Screen

Design


Sign Up Screen

As shown in the above screenshot, this is the Sign up page where the user can add or create his or her own account.

  1. Adding a Profile Picture

Users can add a profile picture to their account either by opening up the camera or from the gallery.

  1. Sign Up Button

Clicking on the signup button, the system first validates if there are any duplicate emails. If so then an appropriate toast message is displayed. Validations like passwords and repeat passwords should be the same and no empty information is allowed were also checked.

Implementation

  • User has to enter all the information asked on the screen to create an account.
  • Appropriate validations have been added for all the fields and password check.
  • Clicking on cancel will not create any user account.
  • User can select their profile picture either opening up the camera and clicking the picture or from their gallery.
  • Users' information have been stored in RealTime Database.

Data Design

  • on clicking the signup button app uses Firebase Authentication to add a new user with the combination of email-id and password and retrieves unique id from it. Now the app gets a bitmap from the user's selected profile image and stores it in Firebase Storage with the path as /Image/unique id. We choose this formate to name to give each user's profile image a unique and personal name. Afterward, the app retrieves downloadable URL of the stored user profile image, which is then bundled with the user's other information. At last, the app set unique id as a key and value as the user's information bundle in the Firebase Realtime Database.

Note:- user password and image are not stored in the Firebase Realtime Database.


UserInfo in Realtime Database

Sidebar Activity

  • After signing-in or signing-up app will land on this page.
  • This activity consists of 4 fragment container, the app will have 4 fragments in this container one at a time. clicking on (top left corner) you will see sidebar containing all four fragment name, clicking on which user can navigate to
    • chatroom (default loaded fragment in the sidebar)
    • users
    • my profile
    • logout

Note: -clicking on logout will log user out of the application and app will start from Login Screen.

  1. ChatRoomList Screen

Design


ChatRooms

As shown in the above screenshot link, there is a Create Chat Room Button and a Recycler view for the Chat Room List

  1. Create Chat Room Button

Create Chat Room Button opens a new activity "Create ChatRoom" as shown in the below screenshot link. Here the user can enter the name of the new chat room and click on create. Once the users click on the create it will validate if the same chatroom is present in the firebase. If the same chat room name present in the firebase then it will throw an alert box asking for the user to change the name and then create it.


Create New Chat Room

  1. Recycler view for ChatRoom List

Displays the list of chatrooms available in the recycler view.

Implementation

  • Once the user logs in then the ChatRoom opens up.
  • A logged-in user can see the list of the current chatrooms in the system in the recycler view.
  • A user can able to join a chat room from this screen.
  • A user can also create a new chatroom by clicking on the Create New Chat Room Button.
  • When the user clicks on the chat room, it means that the user is online in that chatroom and the list of online users are displayed in the chatroom screen.

Data Design

We have used Google Firestore as our Database. The name of our project in the Firestore is ChatApp. Collection Name : ChatRoomList Document : (ChatRoomName)

Once the user clicks on Create in the Chat Room Create Activity, the Chat Room Name gets saved as a document under the collection ChatRoomList. The below screenshot shows the details of the collection and the documents in the Firebase.


ChatRoomFirestore

For Current Online Users

Collection : ChatRoomList Document : (ChatRoomName) Collection : CurrentViewers Document : (User ID)

The current users will be saved in the above format. Once a user leaves the chat room the user information will be deleted from the CurrentViewers document. The below screenshot shows the details of the collection and the documents in the Firebase.

  1. ChatRooms Screen

Design


ChatRoomMessages

As shown in the above screenshot link, this section is for the users to see the messages, post a message, and see who is currently online and also like a message.

Implementation

  1. Once the logged-in user clicks on a ChatRoom. The selected ChatRoom opens up and the user can do the following as listed below
  • The user can read the messages posted by the other users
  • All messages will have the profile picture, name of the user who posted the message, message posted time, a like button for the message by default.
  • The user can like a message.
  • The user can view how many people have liked the message.
  • The user can post a new message
  • The user can delete a message if it was posted by the user
  • The user can view a list of online users in that chatroom as shown in the image below.


Current Viewers

Data Design

We have used Google Firestore as our Database. The name of our project in the Firestore is ChatApp. Collection : ChatRoomList Document : (ChatRoomName) Collection : Messages Document : (userid + messagetime)

As mentioned above the messages are stored in the Messages collection with a document ID that comprises userid + messagetime. We have followed this approach because we need to track how many users have liked the message and update the field accordingly. ChatMessageDetails class is used for saving all the details related to the messages. The below screenshot displays the details of the collection and the documents and the fields associated with it.


ChatRoomMessagesFirestore

  1. Users

Design

===click on user name===>
Users

Implementation

  • when a user lands on this Users page the app get information of every user registered with this app form Firebase Realtime Database. After getting the information app loads profile images and user names of users using recycler view in a fragment.
  • on clicking any of the user name app will show information of that user.

  1. My Profile

Design

==on clicking edit button=>
My Profile

Implementation

  • when a user lands on My Profile user can see his/her self provided information.
  • on clicking edit profile user will have the option to change:
    • first name
    • last name
    • gender
    • city
    • profile Image
  • on clicking edit profile the app will update values in Firebase Realtime Database.
  • If a user also changes the profile image, the app will get the new bitmap of the profile image and store in Firebase Storage. After storing the image the app will get a downloadable URL of that image and add it to the Firebase Realtime Database.

  1. External Links

Source code https://github.com/monesa-git/Advanced-Android-Projects/tree/master/ChatApp

Youtube Video https://youtu.be/5qNh-Ms-AqI

User experience Design Link https://xd.adobe.com/view/241d0e96-73fb-42da-9b98-be81c5b8c99f-714e/

Reference

Clone this wiki locally