CM3050 Mobile Development

Mobile Messaging App

Try The Buzz

Continue to supporting documentation

The Brief

The Buzz is a multi-user mobile chat application capable of supporting, group chats available to all users, and private chats only visible to the individual users selected. Users can send messages in real-time, create new chats, and change their profile images. This application was the culmination of all course work and lessons covered in CM3050 Mobile Development. It also served as the final deliverable at the end of the program.

The experience

When a user starts the application "The Buzz," they are greeted by a welcome message introducing the applications purpose and inviting a user to sign up.

If a user has previously created a profile, they can log into their personal account which includes a list of all private/group chats they are a part of. If the user is new to the application, they will first have to create a profile to gain access to the authorised user portion of the app.

Authorized User

New User Create Profile

Once a user is signed up and logged in, users can join chats and message in real-time. Beyond this, a user also has the ability to update their profile image, search for users, and create new private/group chats.

Open Chat

New Private/Group Chat & Search for User

Update Profile Image

Building Blocks

The design of this application began by selecting a challenge to target. In this case the challenges selected were:

• Forgetting to respond to recieved messages.
• Engaging/communicating with people over distance.

As there have been previous attempts to solve these issues with varying levels of success, it was decided to use inspiration from these previous projects as a starting point. This resulted in the idea to create a mobile messenger application.
Initially, the scope of this project was quite ambitious considering that the development time was approximately three months.

The origional features proposed were:

1. Messenger service:
   • User management
   • Chat management
2. Notifications and reminders
3. Video chat
4. In app mobile games

To simplify some of the development concerns, the choice was made to use a canned solution such as, Firebase as the backend. This allowed the development to remain focused on building the frontend experience. With the initial development considerations outlined, project construction began. Early design work focused on developing the flow of the application. The flow of the application was important because, poor flow can be an extreme pain point to new users. The following flow diagram was used to model the assumed decision paths of a user.

By exploring the theoretical flow of the application, it was possible to generate a list of required elements for a minimal viable product (MVP). These elements were:

1. Unauthorized User
   • Login Screen
   • Signup Screen
2. Authorized User
   • Home Screen
   • Create Chat Screen
   • Chat Screen

Login Screen

Signup Screen

Home Screen

Create Chat Screen

Chat Screen

This initial prototype when tested with users proved that the design was sound. Users amongst the test group were able to easily understand the way the application was supposed to function, and how to navigate to the different features available. The user testing at this point validated many of the early design assumptions, and indicated that it was time to begin writing code. A blank project was generated using Expo which created the starting point for the project. It was then that all dependency libraries for screen navigation, initial user interaction, and backend database communications were added. Much of the development was completed on the local machine using React Native. However, this created a significant problem. Inadvertently, the assumption had been made that Expo the development platform, and Expo snacks an online development and simulation application, were essentially the same. Testing the application developed up to this point in expo snacks, proved that this was not the case. The expo snacks development version at this point, had not been updated to work with the latest library release of Firebase 9.15.0. This created a significant conflict with the Firebase dependency library used, as the function calls had fundamentally changed. In turn, this forced all the code produced communicating with the Firebase API, to be refactored. The refactoring of the code proved to be a huge delay in development which required the scope of the project to shrink. It was important to have the application working in expo snacks, as it was to be used for submitting a working copy of the application for grading. After Refactoring the code, production continued at a regular pace eventually resulting in the delivered application.

Tech Stack

JavaScript

The primary programming language used in developing this application.

React Native

React Native is a framework that lets you create native apps for Android, iOS, and more using React, a best-in-class JavaScript library for building user interfaces.

Firebase

Firebase is a set of backend cloud computing services and application development platforms provided by Google. It hosts databases, services, authentication, and integration for a variety of applications, including Android, iOS, JavaScript, Node.js, Java, Unity, PHP, and C++.

Expo

Expo is a platform for building and deploying universal native apps using React Native. The platform provides tools and services that help developers build, test, and publish high-quality apps easily.

User Interaction

As this application was designed to run on mobile devices such as, android and iOS phones, interaction methods rely heavily on touch responses. This means actions carried out by a user, and in turn the feedback response, will simulate a button action.

Navigating the experience

To make navigating the experience as easy as possible, common patterns of usage was replicated from other similar applications. For instance, to open a chat, a user only has to click on the message they want like a button. The application then automatically redirects to the correct chat screen, which is built on demand. Also, if a user wants to update their profile image, they only have to click the image in the top left of the chat screen. These common patterns of usage make similar applications easy for new users to pick up and use.

Conclusion

The production of this application was an excellent experience in the challenges associated with developing mobile based apps. For instance, even though react native is designed to publish automatically to different mobile architectures, it was still required to think about, and try to match the different required standards enforced by; Google, and iOS mobile app stores. Furthermore, even the design of screen element layout, was required consideration. This was because several of the most popular device designs, had physical or software element that could cause interference with application content. However, the biggest challenge that needed to be considered, was "what do users consider a standard feature of a similar application?" This challenge came up because Messenger applications have a long history, and are fairly well established for what makes a messenger app good. Anything less then those expectations and the application is likely to fail even with better general design. That being said, using frameworks like React Native does make solving some of these challenges easier. It is still best to have a good understanding of what is being developed, and what is a Minimal Viable Product within that realm to be successful.