CHAPTER 4

DEVELOPMENT

Chapter 4 describes the development of the Helper Application. It also describes the
initial mobile application design process through storyboard, mobile application
development process with all the requirements needed and its services with the
application. Lastly, the last section summarizes all about this chapter are provided.

4.1 Story Board

In this section described the initial design of the mobile application which is illustrated in
Story Board. The storyboard has been made is a graphic organizer in the form of
illustrations displayed in sequence for the purpose of pre-visualizing a sequence of the
screen in the mobile application. Basically, the mobile learning application has been
named as Helper. Helper consists of two sections provided in the mobile application for
their users. The first part handles the login and registration of the users. The second
section provides the users with the ability to make and view orders.

4.1.1 Application Story Board

 Figure 4.1 Registration Screen

Figure 4.1 shows the storyboard design for the registration screen for the application.
 Figure 4.2 User Login

Figure 4.3 Deliveryman Login

Figure 4.4 User Main Page
Figure 4.7 Deliveryman Main Page

Figure 4.4 User Profile Page

Figure 4.8 Deliveryman Profile Page

Figure 4.5 User Order Page

Figure 4.9 Deliveryman Order Page
Figure 4.10 Deliveryman Order View
4.2 Implementation

This section described the implementation of the mobile application. In this section
explained more about the mobile application development according to the flows of the
application, and the screenshot of the user interface is also described. Besides that, this
application is divided into two parts, which is first, the part that handles the login and
registration of the users. The second section provides the users with the ability to make
and view orders.

4.2.1 Login page

4.3 Firebase

Firebase is the service necessary for the implementation and development of the Helper
application. Firebase services are needed as a backend of the Helper application also used
cloud computing services as the place where to store and update the database from Helper
application. For this project's purpose, the Firebase services have been chosen as the cloud
computing services by integrating the services into the mobile application. Helper
application uses only two features from Firebase services, which is a database as the real-
time database for Helper application where it will be synchronized across user and stored
on Firebase's cloud, and performances are being used for application monitoring purpose.
Helper application just uses the Spark plan where it is the free plan that Firebase provided,
and it has a few limitations.

4.3.1 Firebase Integration

To ensure that the Firebase services can function, it must be connected with the
application first before the features provided can function properly. The step that used to
connect Firebase into Helper application is shown here. First of all, the developer must
be signed up with Firebase platform or can be signed in with existing Google account.
Besides that, the developer must have an android project to connect with the Firebase
services. Usually, in Android Studio the Firebase Software Development Kit (SDK)
already provided in the Android Studio and the developer need to connect their project
with Firebase to use all the features provided on Firebase services.

Next, the developer is needed to enter the Firebase Console and create a new project in
the Firebase Console. After that, the developer is required to fill in the information about
the project and create a new project.

After successfully creating a new project, the developer will be directed to the project
console homepage and all the features of Firebase services can be viewed on the left side
of the page. That page contains an optional button where to add the Firebase services
whether on IOS, Android, or Webpage. For this project's purpose, Helper application used
Android platform and Firebase will be added into the Android project. Figure 4.33 shows
the homepage of the project console of the project. Next, after choosing the Android
selection, the developer needs to follow a few steps on the popup to connect Firebase into
the application as shown in Figure 4.34. The developer needs to fill in the project package
name that can be referred to in the Android Studio, also the nickname of the android
project. While for the certificate, SHA-1 is optional for the developer to fill in where it is
used for the authentication purpose if the application using Sign in and login features.
After completely fill the information, the developer is given a JSON file containing the
configuration file of the Firebase and application to be synchronized, and it needs to paste
in the Android project in Android Studio. After the following file has been downloaded
the final steps are adding the SDK into the Android project, and developer needs to wait
a few seconds until the setup finish and automatically android project connected with
Firebase Console.

Lastly, when the developer needs to implement the features of Firebase in the Android
project it just only a few steps to implement it. Firstly, the developer needs to open
Android Studio and open the project. To check whether the application is connected or
not with Firebase services, go to the taskbar on the top of the page and select the Tools
and choose the Firebase icon. Figure 4.36 shows an example of the android studio page.
When the button clicked, on the right side of the Android Studio page will come out the
status of the application and Firebase services, and the features provided. To use the
features provided it’s just needed to create a reference of Firebase services and start with
the writing code for the application function.

4.3.2 Firebase Environment

The Helper application was used Firebase services as the place where all the contents like
notes and videos provided to the user are stored. Figure 4.37 shows the Firebase console
page of Helper application. On the homepage, it showed the overall information about
Helper application from beginning Helper connected with Firebase services. For this
project's purpose, Helper has been used three features from Firebase services, which is
Cloud Storage, Real-time Database and Performance Monitoring.

Figure 4.38 shows the Firebase Real-time Database structure. The Firebase Real-time
Database is a cloud-hosted database. The data is stored as JSON and synchronized in real-
time to every connected user. The concepts of Firebase Real-time Database have actually
used NoSQL cloud database where it is different compared to MySQL Database. When
Firebase Real-time Database services are implemented into the application, all the users
are sharing in one Real-time Database instance and automatically receive updates where
it is synced across user in real-time with the newest data every time data changes and any
connected device receive the update within milliseconds. The data's still remains available
when user app goes offline. Generally, OS Master has been used Firebase Real-time
Database in two sections where the first section is OS To-Do to store every single task,
that user saving and another section is OS Challenge where the global scores of the users
are being stored for the leaderboard purpose.

Figure 4.39 shows the Firebase Cloud Storage page. Cloud Storage for Firebase is a
simple storage service built for the application developer. Helper application using
Firebase Cloud Storage to store all the content provided to the user where the user can
directly stream the content from the Helper application. For this project's purpose, Helper
has been used the free plan of Firebase services, and it only provides 1GB storage for the
Cloud Storage space.
Figure 4.40 shows the Firebase Performance Monitoring page. Firebase Performance
Monitoring is a service that helps the developer to gain insight into the performance
characteristics of the application. Usually, the Performance Monitoring collects
performance data from the application, and then reviews and analyzes that data in the
Firebase console. Performance Monitoring gives an understanding of where and when the
performance of the application can be improved so that it can use that information to fix
performance issues. Helper has been used Firebase Performance Monitoring to make
network testing performance on Helper application.

4.4 Summary

This chapter consists of the construction process of the Helper mobile application. Based
on the methodology applied, the construction of Helper mobile application was continued
with the third phase of the methodology which is System Design. The storyboard of the
mobile application was designed. Besides that, all the requirement has been set up on this
phase. Following the third phase, the construction of the Helper application development
was continued with the fourth phase from the methodology, which is system
implementation. In this phase, the coding in developing the mobile application was
written using Android Studio version ____. The main function of the Helper application,
which is the integration of the mobile application with the cloud services was done by
using Firebase services. The development of the Helper mobile application was
successfully completed. Therefore, the second objective of the Helper application which
to develop a prototype of mobile application in that allows you to make orders from
anywhere was accomplished.
 Appendix : Usability Test
List of the tasks that need to be done by the user for usability test.
A) Customer

Task Instruction Success Failed

Task 1 Able to enter main menu
Task 2 Able to register
Task 3 Able to login
Task 4 Able to edit profile info
Task 5 Able to view profile info
Task 6 Able to make orders
Task 7 Able to view orders
Task 8 Able to View map
Task 9 Able to rate deliveryman
Task 10 Able to navigate properly
Task 11 Able to logout
 B)Deliveryman

Task Instruction Success Failed

Task 1 Able to enter main menu
Task 2 Able to register
Task 3 Able to login
Task 4 Able to edit profile info
Task 5 Able to view profile info
Task 6 Able to accept orders
Task 7 Able to view orders
Task 8 Able to View map
Task 9 Able to navigate properly
Task 10 Able to logout
 Appendix : User Acceptance
Questionnaire – Final Testing Evaluation

Developer: Muhammad Najmi bin Mazlan

Title: Helper-A Delivery Service From Any Location with Firebase Integration

The purpose of this questionnaire is to evaluate a mobile application called Helper.

This application allows the user to make orders for items from anywhere which has
2 sides for customers and deliverymen. This questionnaire is to gather feedback
where the findings will be used for my Final Year Project (CSP650) course.
Please answer all question and give comments where required. Thank you for
answering this questionnaire and your cooperation is highly appreciated. Your
identity will remain anonymous.

Job
Age
Gender
Instruction: Please tick one in the appropriate box or complex the answer.
Please choose the answer which represents your opinion.

Strongly Somewhat Neutral Somewhat Strongly

Disagree Disagree Agree Agree
1 2 3 4 5

Compatibility 1 2 3 4 5
1. The mobile application is compatible with any
devices.
2. The mobile application layout fit to the
smartphone screen.
3. The mobile application can run on any android
version.
Function 1 2 3 4 5
Customer

4. The process of making orders is easy.

5. The profile information is easily edited.
6. The order can be viewed after making orders
7. The status of order updated properly
8. The rating system is useful
Deliveryman

9. The profile information is easily edited.

10. Accepting orders functions properly
11. The shop location in Map View is accurate
12. The delivery location in Map View is accurate
13. The order updates properly when completed
14. The rating system works as intended
Navigation 1 2 3 4 5
15. Easy to navigate from one screen to another
16. The buttons and menu are easy to touch.
17. I can understand the usage of the button and the
menu provided.
18. Each button in the application is useful.
Interface Design 1 2 3 4 5
19. The interface is simple and interactive
20. The size of the fonts and images displayed
suitable and clear on the screen.
21. The colors of the background and fonts contrast
and it is clear to read.
 General Feedback 1 2 3 4 5
22. The application is user-friendly and it would not
be a problem for me to use it.
23. The application would be one of my favorite
application for online shopping.
24. I believe this application useful.

19. Comments
 ABSTRACT

Helper application is a mobile delivery application with integrated cloud computing

services. This application was deployed specifically for handling the issue of availability
for delivery services. Thus, it will enrich the experience for the customers, and it can be
used as a one-stop alternative for delivery, besides the traditional way of delivery is
usually bound to certain shops. Furthermore, another main component of Helper
application it was integrated with cloud computing services as the backend of a mobile
application. Integrating cloud services can overcome the crucial of mobile phone storage
issues by providing the storage for Helper application to store all contents on the cloud.
Besides, it also used for database purposes, where it will synchronize between all users
of Helper application in order to improve, enhance and fully utilize the Helper application.
The development of Helper application used the System Development Life Cycle (SDLC)
by implementing the waterfall model as the methodology. A user acceptance testing and
usability testing was conducted with 30 respondents who are the students enrolled in
UiTM Perlis to determine the effectiveness of the Helper by evaluating the questionnaires
that were divided into three categories respectively. Results of the system evaluation
showed that most of the participant were satisfied with all categories provided. Therefore,
Helper can assist, enhance and enrich the experience of the delivery process.