COSC481W Group 4 Project Report: 'Chat App'

This is a copy of my COSC481W Group Project, 'Chat App'. I worked with a 5 person group to design, document and devlope an app inspired by 'WhatsApp'.

Contents

1. Group Information
2. Introduction
3. User Manual
4. Implementation Manual
   1. Conceptual Design
   2. Functional Requirements
   3. System Requirements
   4. Implementation Plan
   5. Application Programs
      1. Create React Native Environment
      2. Download Source Code
      3. Connect App to Firebase
      4. Install Node Modules
      5. Run App
   6. Descriptiion of Programs

...

2. Introduction

The objective of our project is to create a software application that facilitates communication between users. New users will be able to create an account with an email address and six character password. The account will be required for login. Users will be able to search for other users, maintain a contact list, begin new conversations and . New messages can be composed with one recipient for a 1-to-1 line of communication. New messages can also be composed with several recipients to create a group chat.

3. User Manual

The instructions of how to use ‘Chat App’ are listed below according to action.

Task	Instructions	Example
Sign Up	1. Select ‘New user? Join here’ 2. Enter your first name, last name, email and a six character password 3. Press ‘Sign Up’
Log In	1. Enter the email and six character password you created at sign up 2. Press ‘Login’
Sign Out	1.Go to ‘Your Profile’ from Navigation Drawer 2. Press ‘Sign Out’
Navigation	1. Press the hamburger button on the upper left corner
View Profile	1. Open Navigation Drawer 2. Press ‘Your Profile’
Edit profile	1. Open Navigation Drawer 2. Press ‘Your Profile’ 3. Select ‘Edit Profile’ 4. Enter changes to bio *Image upload not functional Press 'Submit Changes'
View Account Details	1. Open Navigation Drawer 2. Press ‘Your Profile’ 3. Press ‘View Account Details’
Add Contact	1. Open Navigation Drawer 2. Press ‘Search’ 3. (Optional) Search by name (Accounts not already in contacts) 4. View Profile on click 5. Add contact from profile
View Contacts	1. Open Navigation Drawer 2. Press ‘Contacts'
New Conversation	1. Open Navigation Drawer 2. Press ‘Home’ 3. Select Chat Bubble Icon in upper right corner 4. (Optional) Use the search bar to enter the name of the user you are looking for 5. Select a name to add them to the conversation 6. (Optional) Select the name of the user from the list above the search bar to remove them from the list 7. Select ‘Chat Now!’
Send Message	1. Open Navigation Drawer 2. Press ‘Home' 3. Select the Conversation you'd like to send a message in 4. Start typing and press ‘Send’ 5. See sent/received messages on screen
Conversation Menu	1. Open Navigation Drawer 2. Press ‘Home’ 3. Select Conversation you'd like to enter 4. Select the hamburger icon in the upper right corner 5. (Optional) View chat member profile by pressing their name 6. (Optional) Add members who are not already contacts from their profile 7. View Chat Members

Back to Top

4. Implementation Manual

...

3. System Requirements

The system requirements of ‘Chat App’ are listed below according to the function category.

User Authentication

Sign Up

Users will enter their first and last name, email and password on the sign up screen. Once an account is created through Google Firebase Functions an Account and Profile objects will be created and stored in Google Firebase Firestore. The Account object holds the Profile object and is then stored in a collection called, ‘ACCOUNTS’ in Google Firestore according to the UID generated by Google Firebase Authentication at Sign Up. The user is then directed out of the Authentication Stack and to the home screen of the app.

Login

Users will enter their email and password for the account they created at sign up. After a successful login the user is directed out of the Authentication Stack and to the home screen of the app.

Sign Out

Users will press the sign out button from their Profile screen which will sign them out using Google Firebase Authentication functions. They will no longer have access to the App Stack and be moved into the Authentication stack.

Error Catching

If login or sign up is unsuccessful the methods will return error messages which are displayed on screen.

Account/Profile Management

Profile View

When the users navigate to the ‘You Profile’ screen via the Navigation Drawer the data stored according to their UID in the ACCOUNTS collection on Google Firestore is pulled, specifically the Profile object which holds their name and bio. That data is then displayed on screen.

Profile Edit

The user can navigate to the Edit Profile page where they can type a new bio and press submit changes to update the value stored in their Account object which is stored in Google Firestore ACCOUNTS collection.

Account Details View

When the user navigates to view their account details data is pulled from their Account object stored in Google Firestore ACCOUNTS collection including name, email, account creation date and time, profile, conversations and contacts. The data is displayed on screen.

Contacts Management

Contacts List

When a user navigates to Contacts List from the Navigation Drawer their Accounts stored in Google Firestore ACCOUNTS collection is pulled. The CONTACTS array containing the UID’s of all their contacts in the Account object then mapped to pull profile information from the ACCOUNTS collection. The data is then sent to a list for viewing.

Search Contacts

The Users can navigate to the search screen which will pull the name and UID of all the Account objects listed in the Google Firestore ACCOUNTS collection. The accounts pulled are that of all UIDs not existing in the current user’s contacts list. The data is then displayed in a list for viewing.

Conversations Management

Conversations View

When the user enters their home screen their Accounts stored in Google Firestore ACCOUNTS collection is pulled, specifically the CONVERSATIONS array. This array contains objects which store a CID, conversation ID, and UNREADMESSAGES, which is the number of unread messages the current user has for this conversation. The CID’s are then mapped to pull the data stored by CID in the CONVERSATIONS collection stored in Google Firestore. Each conversation object’s data is pushed to the app for viewing.

Conversation Details

When in a conversation the user can view the conversation’s members. The data is pulled by the conversations CID from the CONVERSATIONS collection in Google Firestore. The USERS array containing the UID’s of all users in the conversation is pulled and mapped to get the profile data of each user from the Account object stored by UID in the ACCOUNTS collection. The data is then shown in a list on screen.

Conversations Notifications

When the user enters their home screen their Accounts stored in Google Firestore ACCOUNTS collection is pulled, specifically the CONVERSATIONS array. This array contains objects which store a CID, conversation ID, and UNREADMESSAGES, which is the number of unread messages the current user has for this conversation. If the user’s UNREAD MESSAGES is greater than 0 then the row containing the conversation’s information is bolded. The app constantly listens for changes.

Conversations Create

The users can create a new conversation from the New Chat screen. This screen renders a list of the users contacts by pulling the array of UID’s titled CONTACTS from the users’ Account object stored in the ACCOUNTS collection of Google Firestore and mapping them to listable objects for on screen viewing.

Message Management

Message Create

The user can type in their message once they enter a conversation and press send. The details of that message are stored in a Message object which is added to the Conversation’s object stored by CID in the CONVERSATIONS collection in Google Firestore. The message’s text content is set as the LASTMESSAGE and the message’s time is set as the LASTEDITED value for the Conversation object. The members of the conversation will have snapshots triggered when the message is sent which will bolden the conversations row on the Home screen and show the message’s text content and time.

Navigation

Navigation Drawer

Users can access the various Navigations stack from the Navigation drawer.

Back to Top

4. Implementation Plan

Below are the functions and features of ‘Chat App’ listed by who implemented them into the system.

Sign Up

Google Firebase Authentication

Ben Bruursems: Email/6 character password using Firebase Authentication functions

Morgan Iverson: First/Last Name entry, Display of Sign Up Errors, Account/Profile Creation and Storage in Firebase Firestore

Log In

Google Firebase Authentication

Ben Bruursems: Email/Password login using Firebase Authentication functions

Morgan Iverson: Display Login Errors

Conversation/Chat

React Native & Firebase Firestore

Morgan Iverson: Show Current Users Conversations, Open Conversation Chatroom and stored messages on click, Bold Unread messages, Listen for new Conversations and Bold, Start New Conversation from User Contact List, Chat Menu, Send/Receive/Store Messages

Navigation

React Native Drawer Navigation

Morgan Iverson: Basic Drawer Navigator, Various Stack Navigators, Home, Contact List, Chat Room, Conversations, Profile, Account Details, Edit Profile and Search Screens

Profile

React Native & Firebase Firestore

Morgan Iverson: Display User Name and Bio, Edit Profile, View Account Details

Contacts

React Native & Firebase Firestore

Morgan Iverson: Load User Contacts, View Contact Profile, Search App Users, Add Contacts from Search

Sign Out

Google Firebase Authentication

Ben Bruursems: Sign Out current user using Firebase Authentication functions

UX Styles

AdobeXD

Yaneli Sanchez: AdobeXD UI Design

Project Report

User Manual

Morgan Iverson: Sample Outputs and User Instructions

Implementation Manual

Ben Bruursema: Firebase Connection

Yhayh Thabet: Functional Requirements

Morgan Iverson: System Requirements, Conceptual Design, Implementation Plan, Node Modules, Github Download, Code Listing, React Native Environment Set Up

Back to Top

5. Application programs

This document lists instructions for setting up the development environment to edit and run ‘Chat App’.

i.Create React Native Environment

These are instructions on how to create an environment to run a React Native App.

1. Ensure you have NodeJS installed Installation Guide Here

2. Go to Terminal

3. Install create-react-native-app npm install -g create-react-native-app

4. cd to where you want your app to be

5. Create your project by entering the following line in Terminal

create-react-native-app MyProjectName

ii. How to download ‘Chat App’ source code from Github

Below is a link to download a zip file containing the ‘Chat App’ source code from the main branch: https://github.com/ysanche1/COSC481W-Group4/archive/refs/heads/main.zip

These are instructions on how to add files to your React Native App.

1. Copy the unzipped files (‘_src’ folder and‘package.json’ file) into your project folder (where App.js is located)
2. Open App.js
3. Replace the entire contents of the file with the following code

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import Providers from './_src/navigation/index.js';

export default function App() {
  return (<Providers/>);
}

iii. How connect ‘Chat App’ to Google Firebase

These are instructions on how to permit access of your App to Google Firebase and how to set up features including, Authentication and Firestore.

Connecting to Firebase

1. Create a project on Google Firebase
2. Go to Project Overview and Go to Project Settings
3. Under the general section find the section titled, “Your apps”
4. Select ‘< / >’
5. Enter an app nickname
6. Press Register App
7. Copy the information between the <script> tags in the code listed under ‘Add Firebase SDK’
8. Create a file called config.js in your project folder (where App.js is located)
9. Ensure you have ‘firebase’ node module installed
10. Add the following code to beginning of config.js

import firebase from 'firebase/app';

11. Paste the contents of the <script> tags here
12. Add the following line of code to the bottom of config.js

    if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}
export { firebase };

13. Whenever you want to access Google Firebase functions in a document add the following line of code to the beginning of the document

    import { firebase } from '<PATHNAME>/config';

Authentication

1. Navigate to Authentication from your Google Firebase Project console
2. Press ‘Get Started’
3. Enable Email/Password Sign-In Method
4. Press ‘Save’

Access Google Firebase Authentication Documentation Here

Storage/Database

Now that you have the authorization completed, you need to set up the database to store the messaging content.

1. Navigate to Firestore from your Google Firebase Project console
2. Press ‘Create Project’
3. Create new collections titled "ACCOUNTS" and "CONVERSATIONS"
4. Select the Auto-ID option
5. Select Rules across the top of the Firestore page.
6. Replace the contents of the Rules document with the following which will restrict read/write access to signed in users

rules_version = '1';
service cloud.firestore {
    match / databases / { database } / documents {
        // Allow public read access, but only content owners can write
        function signedInOrPublic() {
            return request.auth.uid != null || resource.data.visibility == 'public';
        }
        match / ACCOUNTS / { account } {
            allow read, write; //if signedInOrPublic();
        }
        match / CONVERSATIONS / { conversations } {
            allow read, write;// if signedInOrPublic();
        }
        match / PROFILES / { profiles } {
            allow read, write;//: if signedInOrPublic();
        }
        match / SESSIONS / { sessions } {
            allow read, write;//: if signedInOrPublic();
        }
        match / messages / { messages } {
            allow read, write;//: if signedInOrPublic();
        }
        match / users / { users } {
            allow read, write;//: if signedInOrPublic();
        }
    }}

Access Google Firebase Firestore Documentation Here

iv. How to Install Node Modules

These are instructions on how to install the Node Modules required to run ‘Chat App’.

Option 1:

1. Ensure you have Node or Yarn installed on your computer
2. Ensure the ‘package.json’ file copied from Github is in the same folder as App.js
3. Enter Terminal
4. cd into the project folder (where App.js)
5. Run the following command in terminal npm install

Option 2:

1. Ensure you have Node or Yarn installed on your computer
2. Ensure the ‘package.json’ file copied from Github is in the same folder as App.js
3. Enter Terminal
4. cd into the project folder (where App.js)
5. Run the following command in terminal where is the name of the module(s) to be installed

npm install <package-name> <package-name> <package-name>

Below is a listing of the node modules and their source.

@react-navigation/drawer

@react-navigation/native

@react-navigation/stack

expo

firebase

nodemon

react-native-elements

react-native-gifted-chat

react-native-paper

react-native-section-alphabet-list

react-native-vector-icons

v. How to run ‘Chat App’

These are instructions on how to run ‘Chat App’ from terminal.

1. Ensure you have the node module ‘expo’ installed
2. Enter Terminal
3. cd into the project folder (where App.js)
4. Enter the following line into terminal expo start

Back to Top