AN ANDROID-BASED MAGGIE’S HAIR SALON APPOINTMENT …

AN ANDROID-BASED MAGGIE’S HAIR SALON APPOINTMENT

MOBILE APPLICATION

HONG GUAN TIN

Bachelor of Computer Science with Honours

(Computational Science)

2020

AN ANDROID-BASED MAGGIE’S HAIR SALON APPOINTMENT

MOBILE APPLICATION

HONG GUAN TIN

This project is submitted in partial fulfilment of the

requirements for the degree of

Bachelor of Computer Science with Honours

Faculty of Computer Science and Information Technology

UNIVERSITI MALAYSIA SARAWAK

2020

i

DECLARATION

I hereby declare that this project is my original work. I have not copied from any other

student’s work or from any other sources except where due reference or acknowledgement is not

made explicitly in the text, nor has any part had been written for me by another person.

…………………………………… ……………………………...

(HONG GUAN TIN)

Matric No: 56122

Date

ii

ACKNOWLEDGEMENT

First and foremost, I would like to take this opportunity to express my sincere gratitude to

my supervisor, Dr Wang Hui Hui for her invaluable guidance and suggestions throughout this final

year project. Besides, I would like to express my gratitude to our course coordinator of final year

project, Professor Dr Wang Yin Chai for providing us the useful information during lectures times.

Next, I would like to thank the owner of Maggie’s Hair Salon, Maggie Tan for providing

me the useful information and spending her time with me during the interview session. I would

also like to thank all the respondents for helping me to fill the Google Form questionnaire. In

additional, I would like to thank my family and my friends for support and motivating me

throughout this final year project.

iii

ABSTRACT

In this era of technology, mobile application plays an important role of promoting business

and optimizing our daily activities. Maggie’s Hair Salon is a home-based salon business that

provide hair services to the customers. This salon using the manual method to record their

customer booking appointments. For those customers that need to book appointments, they need

to walk in and provide their details. This way of booking appointments is inconvenience for their

customers. Therefore, an Android-based of Maggie’s Hair Salon Appointment mobile application

is design and develop for the convenience of their customers to book their hair services

appointment and provide a better management for Maggie’s Hair Salon.

iv

ABSTRAK

Dalam era teknologi ini, aplikasi mudah alih memainkan peranan yang penting dalam

mempromosikan perniagaan dan mengoptimumkan aktiviti harian kami. Salun Rambut Maggie

adalah perniagaan salun berasaskan rumah yang memberikan perkhidmatan rambut kepada

pelanggan. Salun ini menggunakan kaedah manual untuk merekodkan tempahan janji temu

pelanggan mereka. Bagi pelanggan yang perlu menempah janji temu, mereka perlu berjalan masuk

dan memberikan butiran mereka. Cara menempah janji temu ini adalah ketidakselesaan bagi

pelanggan mereka. Oleh itu, aplikasi mudah alih Salun Rambut Maggie janji temu berasaskan

Android akan direka dan dibangunkan untuk memudahkan pelanggan mereka menempah janji

temu perkhidmatam rambut mereka dan menyediakan pengurusan yang lebih baik untuk Salun

Rambut Maggie.

1

TABLE OF CONTENTS

DECLARATION .............................................................................................................................. i

ACKNOWLEDGEMENT .............................................................................................................. ii

ABSTRACT ................................................................................................................................... iii

ABSTRAK ...................................................................................................................................... iv

TABLE OF CONTENTS ................................................................................................................. 1

LIST OF TABLES ........................................................................................................................... 5

LIST OF FIGURES .......................................................................................................................... 6

CHAPTER 1: INTRODUCTION .................................................................................................... 9

1.1 Introduction ....................................................................................................................... 9

1.2 Problem Statement ............................................................................................................... 10

1.3 Objectives ............................................................................................................................. 10

1.4 Methodology ........................................................................................................................ 11

1.4.1 Planning ......................................................................................................................... 12

1.4.2 Requirement Analysis ................................................................................................... 12

1.4.3 User Interface Design .................................................................................................... 12

1.4.4 Implementation and Testing .......................................................................................... 13

1.4.5 Evaluation and Quality Analysis ................................................................................... 13

1.4.6 Final Deployment .......................................................................................................... 13

1.5 Scope .................................................................................................................................... 14

1.6 Significance of Project ......................................................................................................... 14

1.7 Project Schedule ................................................................................................................... 15

1.8 Expected Outcome ............................................................................................................... 16

1.9 Project Outline ...................................................................................................................... 16

CHAPTER 2: LITERATURE REVIEW ....................................................................................... 18

2.1 Introduction .......................................................................................................................... 18

2.2 Review Existing Mobile Application ................................................................................... 18

2.2.1 My Salon Malaysia Mobile Application ....................................................................... 19

2.2.2 Salon Appointment Booking App Mobile Application................................................. 24

2.2.3 MStyle Salon Mobile Application ................................................................................. 28

2

2.3 Comparison of Strength and Weakness between Three Reviewed Mobile Application ..... 31

2.4 Comparison of Functions and Features in Reviewed and Proposed Mobile Application .... 32

2.5 Software and Tools Used ..................................................................................................... 34

2.5.1 Android Studio .............................................................................................................. 34

2.5.2 Java Development Kit (JDK) ........................................................................................ 35

2.5.3 Android Software Development Kit (SDK) .................................................................. 35

2.5.4 Firebase ......................................................................................................................... 36

2.6 Conclusion ............................................................................................................................ 37

CHAPTER 3: REQUIREMENT ANALYSIS AND DESIGN ...................................................... 38

3.1 Introduction .......................................................................................................................... 38

3.2 Methodology ........................................................................................................................ 39

3.3 Requirement Analysis .......................................................................................................... 41

3.3.1 User Requirement .......................................................................................................... 41

3.3.2 System Requirement ..................................................................................................... 48

3.3.2.1 Hardware Requirement .............................................................................................. 48

3.3.2.2 Software Requirement ................................................................................................ 48

3.3.3 Functional Requirement ................................................................................................ 49

3.3.4 Non-Functional Requirement ........................................................................................ 50

3.4 Design and Development ..................................................................................................... 51

3.4.1 Architectural Design ..................................................................................................... 51

3.4.2 Use Case Diagram ......................................................................................................... 52

3.4.2.1 Register ....................................................................................................................... 53

3.4.2.2 Login .......................................................................................................................... 54

3.4.2.3 Book Appointment ..................................................................................................... 55

3.4.2.4 View News ................................................................................................................. 56

3.4.2.5 View Stylist ................................................................................................................ 57

3.4.2.6 View Upcoming and Past Appointments ................................................................... 58

3.4.2.7 View Appointment List .............................................................................................. 59

3.4.2.8 Manage News ............................................................................................................. 60

3.4.2.9 Manage Stylists .......................................................................................................... 61

3.4.2.10 Logout ...................................................................................................................... 61

3

3.4.3 Activity Diagram ........................................................................................................... 62

3.4.4 Class Diagram ............................................................................................................... 63

3.4.5 Interface Design ............................................................................................................ 64

3.5 Summary .............................................................................................................................. 72

CHAPTER 4: IMPLEMENTATION AND TESTING ................................................................. 73

4.1 Introduction .......................................................................................................................... 73

4.2 Implementation of Maggie’s Hair Salon Mobile Application ............................................. 73

4.2.1 Register .......................................................................................................................... 74

4.2.2 Login ............................................................................................................................. 75

4.2.3 Main Page ...................................................................................................................... 76

4.2.4 Navigation Bar .............................................................................................................. 77

4.2.5 Upcoming Appointment Page ....................................................................................... 80

4.2.6 New Appointment Page ................................................................................................ 81

4.2.7 Notification .................................................................................................................... 82

4.2.8 Admin Management Page ............................................................................................. 83

4.2.9 Appointment Lists ......................................................................................................... 84

4.2.10 Manage News .............................................................................................................. 85

4.2.11 Manage Stylists ........................................................................................................... 87

4.2.12 Reports ........................................................................................................................ 89

4.3 Database Implementation ..................................................................................................... 90

4.4 System Testing ..................................................................................................................... 91

4.4.1 Unit Testing for Customer ............................................................................................. 91

4.4.2 Unit Testing for Admin ................................................................................................. 96

4.5 User Acceptance Testing ...................................................................................................... 99

4.6 Analysis of Testing Result ................................................................................................. 101

4.6.1 Interface of the Application (Customer) ..................................................................... 101

4.6.2 Functionality of the Application (Customer) .............................................................. 102

4.6.3 Overall Performance of the Application (Customer) .................................................. 103

4.6.4 Interface of the Application (Admin) .......................................................................... 104

4.6.5 Functionality of the Application (Admin) ................................................................... 104

4.6.6 Overall Performance of the Application (Admin) ....................................................... 105

4

4.7 Summary ............................................................................................................................ 106

CHAPTER 5: CONCLUSION AND FUTURE WORK ............................................................. 107

5.1 Introduction ........................................................................................................................ 107

5.2 Achievement ....................................................................................................................... 107

5.3 Contribution ....................................................................................................................... 107

5.4 Limitation ........................................................................................................................... 108

5.5 Future Work ....................................................................................................................... 108

5.6 Conclusion .......................................................................................................................... 109

REFERENCES ............................................................................................................................. 110

APPENDIXES ............................................................................................................................. 111

Appendix A: Interview Questions with Answers ..................................................................... 111

Appendix B: Questionnaire ...................................................................................................... 113

Appendix C: Questionnaire ...................................................................................................... 115

Appendix D: Questionnaire ...................................................................................................... 118

5

LIST OF TABLES

Table 2.1: Strength and weakness between three reviewed mobile application ............................ 31

Table 2.2: Comparison of functions and features between three reviewed mobile application and

proposed mobile application .......................................................................................................... 32

Table 3.1 Hardware requirements .................................................................................................. 48

Table 3.2 Software requirements ................................................................................................... 48

Table 4.1 Test for Access Function of Customer ........................................................................... 91

Table 4.2 Test for Main Page Activity of Customer ...................................................................... 93

Table 4.3 Test for Navigation Activity of Customer ..................................................................... 95

Table 4.4 Test for Access Function of Admin ............................................................................... 96

Table 4.5 Test for Main Page Activity of Admin .......................................................................... 97

Table 4.6 Task Performed by Customer ....................................................................................... 100

Table 4.7 Task Performed by Admin ........................................................................................... 100

6

LIST OF FIGURES

Figure 1.1: Agile Methodology ...................................................................................................... 11

Figure 1.2: Gantt Chart ................................................................................................................... 15

Figure 2.1: Login Page ................................................................................................................... 19

Figure 2.2: Main Page .................................................................................................................... 19

Figure 2.3: My Wallet Page ........................................................................................................... 20

Figure 2.4: Special Offers News Page ........................................................................................... 20

Figure 2.5: Stylist Team Page ........................................................................................................ 21

Figure 2.6: Selected Stylist Details Page ....................................................................................... 21

Figure 2.7: Booking Page ............................................................................................................... 22

Figure 2.8: Final Confirmation Page .............................................................................................. 22

Figure 2.9: Appointment Page ....................................................................................................... 23

Figure 2.10: Appointment Details Page ......................................................................................... 23

Figure 2.11: Sign in Page ............................................................................................................... 24

Figure 2.12: Main Page .................................................................................................................. 24

Figure 2.13: Services Page ............................................................................................................. 25

Figure 2.14: Book Appointment Page ............................................................................................ 25

Figure 2.15: My Appointments Page ............................................................................................. 26

Figure 2.16: Location Page ............................................................................................................ 26

Figure 2.17: Contact Page .............................................................................................................. 27

Figure 2.18: Login Page ................................................................................................................. 28

Figure 2.19: Main Page .................................................................................................................. 28

Figure 2.20: Book Appointment Page ............................................................................................ 29

Figure 2.21: Pay Online Page ......................................................................................................... 29

Figure 2.22: Appointments Page .................................................................................................... 30

Figure 2.23: Notifications Page ...................................................................................................... 30

Figure 2.24: Android Studio Interface ........................................................................................... 34

Figure 2.25: Firebase Interface ....................................................................................................... 36

Figure 3.1: Agile Methodology ...................................................................................................... 39

Figure 3.2: Respondent’s Gender ................................................................................................... 42

Figure 3.3: Respondent’s Age ........................................................................................................ 42

Figure 3.4: Respondent’s Occupation ............................................................................................ 43

Figure 3.5: How often do respondents go to Maggie’s Hair Salon ................................................ 44

Figure 3.6: How long do respondents wait to get for their turn to be served ................................. 45

Figure 3.7: What is the time that respondents usually go Maggie’s Hair Salon ............................ 45

Figure 3.8: The wish of respondents to has Maggie’s Hair Salon mobile application .................. 46

Figure 3.9: Features that respondents wish to include in this mobile application ......................... 47

Figure 3.10: Architecture Diagram for Maggie’s Hair Salon Mobile Application ........................ 51

Figure 3.11: Use Case Diagram for Maggie’s Hair Salon mobile application .............................. 52

Figure 3.12: Sequence Diagram for Register Process .................................................................... 53

7

Figure 3.13: Sequence Diagram for Login Process ........................................................................ 54

Figure 3.14: Sequence Diagram for Book Appointment Process .................................................. 55

Figure 3.15: Sequence Diagram for View News Process .............................................................. 56

Figure 3.16: Sequence Diagram for View Stylist Process ............................................................. 57

Figure 3.17: Sequence Diagram for View Upcoming and Past Appointments Process ................ 58

Figure 3.18: Sequence Diagram for View Appointment List Process ........................................... 59

Figure 3.19: Sequence Diagram for Manage News Process .......................................................... 60

Figure 3.20: Sequence Diagram for Manage Stylists Process ....................................................... 61

Figure 3.21: Sequence Diagram for Logout Process ...................................................................... 61

Figure 3.22: Activity Diagram for Maggie’s Hair Salon Mobile Application ............................... 62

Figure 3.23: Class Diagram for Maggie’s Hair Salon mobile application ..................................... 63

Figure 3.24: Login .......................................................................................................................... 64

Figure 3.25: Register ...................................................................................................................... 65

Figure 3.26: Main Interface for Customer ..................................................................................... 66

Figure 3.27: Upcoming Appointment ............................................................................................ 67

Figure 3.28: Stylist Details ............................................................................................................. 67

Figure 3.29: New Appointment ...................................................................................................... 67

Figure 3.30: Notification of Appointment Status ........................................................................... 67

Figure 3.31: Navigation Bar ........................................................................................................... 68

Figure 3.32: About Us .................................................................................................................... 69

Figure 3.33: Customer Profile ........................................................................................................ 69

Figure 3.34: History Appointment ................................................................................................. 69

Figure 3.35: Main Interface for Admin .......................................................................................... 70

Figure 3.36: Appointment Lists ..................................................................................................... 71

Figure 3.37 View Appointment ...................................................................................................... 71

Figure 3.38: Manage News ............................................................................................................ 71

Figure 3.39: Manage Stylists .......................................................................................................... 71

Figure 4.1: Register Page ............................................................................................................... 74

Figure 4.2: Login Page ................................................................................................................... 75

Figure 4.3: Main Page .................................................................................................................... 76

Figure 4.4: News Details Page ....................................................................................................... 76

Figure 4.5: Stylist Detail Page ..................................................................................................... 76

Figure 4.6: Navigation Bar ............................................................................................................. 77

Figure 4.7: About Us Page ............................................................................................................. 78

Figure 4.8: Profile Page .................................................................................................................. 78

Figure 4.9: Edit Profile Page .......................................................................................................... 78

Figure 4.10: History Page ............................................................................................................... 79

Figure 4.11: Logout Page ............................................................................................................... 79

Figure 4.12: Upcoming Appointment Page .................................................................................... 80

Figure 4.13: New Appointment Page ............................................................................................. 81

Figure 4.14: Notification ................................................................................................................ 82

8

Figure 4.15: Admin Management Page .......................................................................................... 83

Figure 4.16: Appointment Lists Page ............................................................................................. 84

Figure 4.17: Appointment Details Page ......................................................................................... 84

Figure 4.18: Manage News Page.................................................................................................... 85

Figure 4.19: Add News Details Page ............................................................................................. 85

Figure 4.20: Update or Delete News Details .................................................................................. 86

Figure 4.21: Manage Stylists Page ................................................................................................. 87

Figure 4.22: Add Stylist Details Page ............................................................................................ 87

Figure 4.23: Update or Delete Stylist Details ................................................................................ 88

Figure 4.24: Reports ....................................................................................................................... 89

Figure 4.25: Reports in PDF format ............................................................................................... 89

Figure 4.26: Firebase Real Time Database .................................................................................... 90

Figure 4.27: UAT Result on Interface of the Application ............................................................ 101

Figure 4.28: UAT Result on Functionality of the Application .................................................... 102

Figure 4.29: UAT Result on Overall Performance of the Application ........................................ 103

Figure 4.30: UAT Result on Interface of the Application ............................................................ 104

Figure 4.31: UAT Result on Functionality of the Application .................................................... 104

Figure 4.32: UAT Result on Overall Performance of the Application ........................................ 105

9

CHAPTER 1: INTRODUCTION

1.1 Introduction

Maggie’s Hair Salon is a home-based salon which located at Taman Sentosa, Klang,

Selangor. The types of hair services that offered in Maggie’s Hair Salon are hair cutting, hair

colouring, hair styling and hair treatment. They operate their business based on first come, first

serve basic and using the manual method which is paper and pen to record their customers booking

appointment details. This is in risk if they lost their customers booking details and most important

this is not a secure way to keep their data. Customers also need to walk in and provide their details

then only can book appointment. Thus, this way of booking appointment is inconvenience for their

customers. Therefore, an Android-based of Maggie’s Hair Salon Appointment mobile application

is design and develop for the convenience of their customers to book their hair services

appointment and provide a better management for them. Customers able to book their hair services

appointment via this apps by provide their personal details, choose the type of hair services they

needed and follow by choose their suitable date and time at anywhere and anytime. Customers also

can avoid the waiting time spending over there when they reserve their hair services appointment

via this apps. Besides that, by using this apps the person in charge also does not need to use the

manual method to record their customer booking hair services appointment details as this apps will

generate a list of customers that had reserve the appointment based on first come, first serve basis

from database. To ensure that customers remember their hair services appointment this apps will

generate notification and send to them when they are connecting with internet. Customers also can

use this apps to review back their hair services details record.

10

1.2 Problem Statement

Maggie’s Hair Salon is a very famous and cheaper salon at Taman Sentosa, Klang, Selangor.

There are variety ages of customers in Maggie’s Hair Salon. Most of the customers are workers

and students. Workers are busy with their work tasks while students are busy with their studies.

They are lacking time to go to Maggie’s Hair Salon to reserve the appointment manually in order

to have their hair services. Maggie’s Hair Salon also uses the first come, first serve basic to arrange

the order of the customer. The current customer must wait for his or her turn to be served. This

waiting process had caused a lot of time has been wasted.

1.3 Objectives

The objectives of this project are:

i. To design and develop an Android-based mobile application for Maggie’s Hair Salon to

replace their manual record method of hairs services appointment and provide the online

appointment scheduling for the convenience of their customer.

ii. To evaluate the usability of the proposed mobile application.

11

1.4 Methodology

The methodology used in this project is Agile Methodology because it is the best

methodology that is suitable for the mobile application development. Agile Methodology is an

iterative approach as it allow the tasks to divide into short phases of work, refactoring the plans

and frequently assessment the plans. Therefore, it is suitable for mobile application development

because mobile application development usually has the frequent changing on request, the ability

to release quickly with quality and frequent update. According to Kaur, A. (2016) agile

methodology is more flexible to build the mobile application that is high quality, quick to release,

high collaborative and accept the changes at any phases. The testing process will be work at the

same time during the development process of the mobile application. Hence by using this

methodology, the changes at any phases can be accept easily.

Figure 1.1: Agile Methodology

12

1.4.1 Planning

This phase is to plan the project title, project ideas and find out the project requirement as

well as the scope of this project. The project schedule also will be done on this stage to set the

timelines of each project phases and milestones. To gain the related information on this project

some literature reviews need to be done especially on the similar mobile application.

1.4.2 Requirement Analysis

In this phase, is to identify the project requirements and to identify the suitable methodology

to be used in this project. The project requirements are collected by conducting an interview with

the person in charge. After that, these project requirements are analysed to ensure it meet their

expectations and to study the possibility of including all the requirements in the proposed mobile

application to be development.

1.4.3 User Interface Design

This phase is to design the user interface that include all the function requirements of the

proposed mobile application. This phase also should have diagrams that represent the flow of this

proposed mobile application.

13

1.4.4 Implementation and Testing

This phase is to start implement the coding that based on the requirements of the proposed

mobile application by using the suitable tools and techniques. After that, start testing the

functionality of the mobile application and prepare the testing result.

1.4.5 Evaluation and Quality Analysis

Beta testing of this mobile application will be release to testers and users. All the feedbacks

will be collected from them to ensure the proposed mobile application fulfil the requirements and

objectives. Fixed the bugs or any errors that found in the proposed mobile application and keep re-

test until the mobile application is no bugs and no errors. By removing or simplifying those

unnecessary codes therefore can improve the efficiency of this mobile application.

1.4.6 Final Deployment

The final version of this mobile application is released after no bugs, no errors and done

make the changes. This mobile application also will be review by supervisor, examiner and others.

14

1.5 Scope

This apps is designed and developed for those Android-based smartphone users only. The

apps is creating a platform for Maggie’s hair salon customers to reserve their hair services

appointment at anywhere and anytime. The person in charge can manage their customers

appointment using this apps. The target user of this Maggie’s Hair Salon Appointment apps are

their customers and the person in charge of Maggie’s hair salon.

1.6 Significance of Project

The significances of this project are:

i. This apps provides a platform for Maggie’s hair salon customers to reserve their hair

services appointment based on their preference time without going to the Maggie’s hair

salon to book manually.

ii. This apps provides convenience to those customers who had reserved their hair services

appointment have the priority chance to get their hair services immediately without keep

waiting at there.

iii. This apps will send the notification to customers about their status of appointment when

they are connected to internet.

iv. This apps can generate a list of customers after their reserved appointment had been

approved by the person in charge.

15

v. This apps also store customers historical hair services record, thus customers able to review

back their previous visiting hair services appointment record.

vi. This apps provide the feature that customers can view the stylist details.

1.7 Project Schedule

Figure 1.2: Gantt Chart

16

1.8 Expected Outcome

The expected outcome of this project is an Android-Based Maggie’s Hair Salon

Appointment Mobile Application that allows their customers to reserve their hair services

appointment and provide better management of the Maggie’s Hair Salon.

1.9 Project Outline

This project outline consists of five chapters as below:

Chapter 1: Introduction

This chapter is about the overview of the proposed project that include an introduction,

problem statement, objectives, methodology, scope of the project, project schedule, expected

outcome and project outline.

Chapter 2: Literature Review

This chapter is discussing about the review on existing mobile application that related to

this project which available on the market now. The review of three selected salon appointment

mobile application will based on the comparison of its features or functions and its strength and

weakness of the mobile application. This chapter also include the review on tools and technologies

used.

17

Chapter 3: Requirement Analysis and Design

This chapter will be elaborated on the steps and tasks involved in the agile methodology

that used in this project. The collected data of questionnaire and interview will be analyses in this

chapter too. This chapter also include the Unified Modelling Language and user interface design

will be prepared.

Chapter 4: Implementation and Testing

This chapter illustrate the process of implementation which is the coding part and the testing

of the mobile application. For the implementation part, using the suitable tools and techniques to

develop the proposed mobile application. Both functional and non-functional testing will be done,

and the result will be recorded in this chapter.

Chapter 5: Conclusion and Future Work

This chapter is about summarizes of this project and the future work of improvement in this

mobile application so that can improve and ensure the quality of this proposed mobile application.