Eatnow: Food ordering mobile application for UMS cafeteria

(1)

EATNOW: FOOD ORDERING MOBILE APPLICATION FOR UMS CAFETERIA

NURDIANA ANISAMIRA BINTI TALIB

FACULTY OF COMPUTING AND INFORMATICS UNIVERSITI MALAYSIA SABAH

2022

(2)

EATNOW: FOOD ORDERING MOBILE APPLICATION FOR UMS CAFETERIA NURDIANA ANISAMIRA BINTI TALIB

THESIS SUBMITTED IN PARTIAL FULFILLMENT FOR THE DEGREE OF BACHELOR OF COMPUTER

SCIENCE WITH HONOURS (NETWORK ENGINEERING)

FACULTY OF COMPUTING AND INFORMATICS UNIVERSITI MALAYSIA SABAH

2022

(3)

iii

NAME : NURDIANA ANISAMIRA BINTI TALIB MATRIC NUMBER : BI18110211

TITLE : EATNOW: FOOD ORDERING MOBILE APPLICATION FOR UMS CAFETERIA

DEGREE : BACHELOR OF COMPUTER SCIENCE WITH HONOURS (NETWORK ENGINEERING) VIVA’S DATE : 10 FEBRUARY 2022

CERTIFIED BY,

1. SUPERVISOR

SIGNATURE Dr. NORAZLINA KHAMIS

______________

(4)

iv

DECLARATION

I thus declare that the content of this thesis is original, apart from quotes, equations, summaries, and references, which have been properly acknowledged.

10 FEBRUARY 2022 ______________________________

NURDIANA ANISAMIRA BINTI TALIB BI18110211

(5)

v

ACKNOWLEDGEMENT

I'd want to acknowledge and thank my supervisor, Dr Norazlina Binti Khamis, for being patient in supervising my work and making this task possible. Her guidance and suggestions have gotten me through every stage of this project. I would also want to thank my examiners and Madam Siti Hasnah binti Tanalol, and Dr Chin Pei Yee for providing me with valuable insights and input that will allow this project to continue to improve. A special thanks to my family for their unwavering support and understanding while I was conducting research and composing my thesis. In addition, I am grateful to my friends, who have always been willing to assist and support me in any way they can. Lastly, I want to send my regards and blessing to all of personnel who supported me for completing my project.

NURDIANA ANISAMIRA BINTI TALIB 10 FEBRUARY 2022

(6)

vi

ABSTRACT

University Malaysia Sabah (UMS) cafeteria is required to serve large numbers of people in high traffics areas in a cost of effective manner. Nowadays, UMS cafeteria still uses a manually or paper-based in food ordering system. Food Ordering Mobile Application is designed to overcome those problems using manual system such as the possibility the paper order is high which can lead to an unorganized order, wasting time and a crowded place. This project aims to develop a food ordering system for UMS to investigate a match search keyword with an available menu. This is to achieve a goal where UMS cafeteria can use a system or application instead of paper-based during the food ordering system. There are three phases used in the methodology which are designing the features of food ordering system, development of system proposed and evaluation of the proposed system. During the designing phase the proposed system will used flutter providers to able users retrieve data from firebase. Next, the development phases will use a throw-away prototyping to design the system. Meanwhile, the system evaluation phases will use a System Usability Scale (SUS). method to evaluate the system. There are some of software and hardware use to develop this system. Moreover, there also some elicitation requirement uses to analyze this project which are document analysis, interface analysis, observation, and prototyping. Not only that, ER diagram is used to design the project and the user interface design for the system is also explain. Eatnow food ordering mobile application is introduced to help both UMS cafeteria and customers to overcome any drawbacks that their faces using a manual way of ordering.

Keywords - food ordering system, Mobile Application, match search keyword with an available menu, throw-away prototyping, System Usability Scale (SUS).

(7)

vii

ABSTRAK

Kafeteria Universiti Malaysia Sabah (UMS) dikehendaki memberi perkhidmatan kepada ramai orang di kawasan trafik tinggi dengan kos yang berkesan. Kini, kafeteria UMS masih menggunakan sistem tempahan makanan secara manual atau berasaskan kertas. Aplikasi Mudah Alih Tempahan Makanan direka untuk mengatasi masalah tersebut menggunakan sistem manual seperti kemungkinan tempahan kertas adalah tinggi yang boleh menyebabkan tempahan tidak teratur, membuang masa dan tempat yang sesak. Projek ini bertujuan untuk membangunkan sistem pesanan makanan untuk UMS menyiasat kata kunci carian padanan dengan menu yang tersedia. Ini adalah untuk mencapai matlamat di mana kafeteria UMS boleh menggunakan sistem atau aplikasi dan bukannya berasaskan kertas semasa sistem pesanan makanan. Terdapat tiga fasa yang digunakan dalam metodologi iaitu mereka bentuk ciri sistem pesanan makanan, pembangunan sistem yang dicadangkan dan penilaian sistem yang dicadangkan. Semasa fasa reka bentuk, sistem yang dicadangkan akan menggunakan penyedia flutter untuk membolehkan pengguna mendapatkan semula data daripada firebase. Seterusnya, fasa pembangunan akan menggunakan prototaip buang untuk mereka bentuk sistem.

Manakala, fasa penilaian sistem akan menggunakan kaedah Skala Kebolehgunaan Sistem (SUS) untuk menilai sistem. Terdapat beberapa perisian dan perkakasan yang digunakan untuk membangunkan sistem ini. Selain itu, terdapat juga beberapa keperluan elisitasi yang digunakan untuk menganalisis projek ini iaitu analisis dokumen, analisis antara muka, pemerhatian, dan prototaip. Bukan itu sahaja, rajah ER digunakan untuk mereka bentuk projek dan reka bentuk antara muka pengguna untuk sistem juga diterangkan. Sistem pesanan makanan Eatnow menggunakan algoritma penapisan kolaboratif diperkenalkan untuk membantu kedua-dua kafeteria UMS dan pelanggan mengatasi sebarang kelemahan yang dihadapi mereka menggunakan cara tempahan manual.

Kata kunci - sistem pesanan makanan, Aplikasi Mudah Alih, kata kunci carian padan dengan menu yang tersedia, prototaip buang, Skala Kebolehgunaan Sistem (SUS).

(8)

viii

TABLE OF CONTENTS

TTILE ... i

DECLARATION ... iv

ACKNOWLEDGEMENT ... v

ABSTRACT ... vi

ABSTRAK ... vii

LIST OF CONTENTS ... viii

LIST OF TABLES ... xii

LIST OF FIGURES ... xiii

LIST OF APPENDICES ... xvi

CHAPTER 1: INTRODUCTION ... 1

1.1 Introduction ... 1

1.2 Problem background/Motivation ... 1

1.3 Problem Statements ... 3

1.4 Project Objectives ... 4

1.5 Project Scope ... 4

1.6 Expected Outcomes ... 6

1.7 Report Organizations ... 6

1.8 Conclusion ... 7

CHAPTER 2: LITERATURE REVIEW ... 8

2.2 Food ordering system ... 8

2.2.1 Food ordering System in UMS cafeteria ... 11

2.3 Formal Specification for Online Food Ordering System using Z language ... 12

2.4 Foodcourt an online ordering platform ... 13

2.5 A PDA Food Ordering System Using Interaction Design Approach ... 14 2.6 Automated Food Ordering System with Interactive User Interface Approach . 14

(9)

ix

2.7 Similar and Existing system ... 16

2.7.1 FoodPanda ... 16

2.7.2 GrabFood ... 18

2.7.3 MoreFun ... 19

CHAPTER 3: METHODOLOGY ... 22

3.2 Designing food ordering system using state management library ... 22

3.3 Development of the mobile application ... 23

3.3.1 Requirement ... 24

3.3.2 Prototyping ... 25

3.3.3 Development ... 25

3.3.4 Validation ... 26

3.4 Evaluation of the usability of the food ordering system ... 26

3.5 Software requirement ... 27

3.5.1 Software and Tools ... 27

3.5.2 Framework ... 28

3.6 Hardware requirement ... 29

CHAPTER 4: SYSTEM ANALYSIS AND DESIGN ... 31

4.2 Requirement Elicitation Techniques ... 31

4.2.1 Document analysis ... 30

4.2.2 Interface analysis ... 31

4.2.3 Observation ... 31

4.2.4 Prototyping ... 32

4.3 Requirement ... 32

4.3.1 Functional Requirement ... 33

4.3.2 Non-Functional Requirement ... 34

4.4 Activity diagram ... 35

(10)

x

4.5 Structured Approach ... 37

4.5.1 Context diagram ... 37

4.5.2 Data flow diagram (DFD)... 38

4.6 Data dictionary ... 42

4.7 ERD diagram ... 44

4.8 Architecture design ... 45

4.9 User interface design ... 46

4.9.1 User interface design for Cafeteria staff ... 46

4.9.2 User interface design for Cafeteria staff ... 52

CHAPTER 5: IMPLEMENTATION ... 59

5.2 System implementation ... 59

5.2.1 EatNow: Food Ordering Mobile Application for UMS cafeteria ... 59

5.3 Database Implementation ... 69

CHAPTER 6: TESTING AND EVALUATION ... 74

6.2 Unit Testing ... 74

6.3 System Testing ... 77

6.3.1 System Testing for customers ... 78

6.3.2 System Texting for cafeteria ... 79

6.4 Acceptance Testing ... 79

6.4.1 System Usability Scale (SUS) ... 80

CHAPTER 7: CONCLUSION ... 86

7.2 Summary ... 86

(11)

xi

7.3 Limitation and Suggestion ... 87 7.4 Future work ... 88 REFERENCES ... 89

(12)

xii

LIST OF TABLES

... Page

Table 1.1: Modules and Function for UMS cafeteria staff ... 5

Table 1.2: Modules and Function for UMS students and staff ... 5

Table 2.1: Summary of Research ... 15

Table 2.2: Comparison of three online food ordering system ... 21

Table 3.1: Summarize of software and tools required for system development .... 28

Table 3.2: Summarize of Hardware Requirement for system development ... 29

Table 4.1: Eatnow food ordering system functional requirement for cafeteria ... 33

Table 4.2: Eatnow food ordering system functional requirement for customers .... 34

Table 4.3: Eatnow food ordering system non-functional requirement ... 35

Table 4.8: Data Dictionary for user class ... 42

Table 4.9: Data Dictionary for product class ... 42

Table 4.10: Data Dictionary for checkout class ... 43

Table 4.11: Data Dictionary for order status class ... 43

Table 6.1: Eatnow Mobile Application - TC-1 ... 75

Table 6.5: System Testing for Customers ... 78

Table 6.6: System Testing for Cafeteria ... 79

(13)

xiii

LIST OF FIGURES

... Page

Figure 2.1: Web-based platform for FoodPanda ... 17

Figure 2.2: FoodPanda interface for mobile apps ... 17

Figure 2.3: GrabFood Web-based ... 18

Figure 2.4: GrabFood interface for mobile apps ... 19

Figure 2.5: MoreFun interface for mobile apps ... 20

Figure 3.2: Process of throw-away prototyping ... 24

Figure 4.1: Activity diagram for Eatnow food ordering mobile application ... 36

Figure 4.2: Context diagram for Eatnow food ordering mobile application ... 37

Figure 4.3: DFD diagram for Eatnow food ordering mobile application ... 38

Figure 4.4: DFD Level 1 Process 1.0 ... 39

Figure 4.8: DFD Level 2 ... 41

Figure 4.9: ERD diagram for Eatnow food ordering mobile application ... 44

Figure 4.10: Architecture diagram for Eatnow food ordering mobile application ... 45

Figure 4.11: Eatnow food ordering mobile application splash screen ... 46

Figure 4.12: Eatnow food ordering mobile application login page ... 46

Figure 4.13: Eatnow food ordering mobile application sign-up page ... 47

Figure 4.14: Eatnow food ordering mobile application homepage for cafe ... 47

Figure 4.15: Eatnow food ordering mobile application menu page ... 48

Figure 4.16: Eatnow food ordering mobile application profile page ... 48

Figure 4.17: Eatnow food ordering mobile application order page ... 49

Figure 4.18: Eatnow food ordering mobile application order page 2 ... 49

Figure 4.19: Eatnow food ordering mobile application order page 3 ... 50

(14)

xiv

Figure 4.20: Eatnow food ordering mobile application fixed menu page ... 50

Figure 4.21: Eatnow food ordering mobile application today menu page ... 51

Figure 4.22: Eatnow food ordering mobile application update menu page ... 51

Figure 4.23: Eatnow food ordering mobile application homepage for customers ... 52

Figure 4.24: Eatnow food ordering mobile application menu page ... 52

Figure 4.25: Eatnow food ordering mobile application cart page ... 53

Figure 4.26: Eatnow food ordering mobile application filter page ... 53

Figure 4.27: Eatnow food ordering mobile application favourite page ... 54

Figure 4.28: Eatnow food ordering mobile application profile page ... 54

Figure 4.29: Eatnow food ordering mobile application current order page ... 55

Figure 4.30: Eatnow food ordering mobile application past order page ... 55

Figure 4.31: Eatnow food ordering mobile application browse list page ... 56

Figure 4.32: Eatnow food ordering mobile application detail page ... 56

Figure 4.33: Eatnow food ordering mobile application confirm order page ... 57

Figure 5.1: Eatnow food ordering mobile application splash screen ... 60

Figure 5.2: Eatnow food ordering mobile application role-based screen ... 60

Figure 5.3: Eatnow food ordering mobile application login screen for cafeteria... 61

Figure 5.4: Eatnow food ordering mobile application login screen for customer 61

Figure 5.5: Eatnow food ordering mobile application signup screen for cafeteria .. 62

Figure 5.6: Eatnow food ordering mobile application signup screen for customer . 62 Figure 5.7: Eatnow food ordering mobile application cafeteria warning screen ... 63

Figure 5.8: Eatnow food ordering mobile application customers warning screen ... 63

Figure 5.9: Eatnow food ordering mobile application cafeteria homepage ... 64

Figure 5.10: Eatnow food ordering mobile application cafeteria food list ... 64

Figure 5.11: Eatnow food ordering mobile application cafeteria add food ... 65

Figure 5.12: Eatnow food ordering mobile application cafeteria list of order... 65

Figure 5.13: Eatnow food ordering mobile application customers homepage ... 66

(15)

xv

Figure 5.14: Eatnow food ordering mobile application customers food category .. 66

Figure 5.15: Eatnow food ordering mobile application customers search page ... 67

Figure 5.16: Eatnow food ordering mobile application customers search result .... 67

Figure 5.17: Eatnow food ordering mobile application customers products details 68 Figure 5.18: Eatnow food ordering mobile application customers cart screen ... 68

Figure 5.19: Eatnow food ordering mobile application Authentication Firebase ... 70

Figure 5.20: Eatnow food ordering mobile application cloud firestore for user collection ... 70

Figure 5.21: Eatnow food ordering mobile application cloud firestore for user collection role ‘cust’ ... 71

Figure 5.22: Eatnow food ordering mobile application cloud firestore for order status collection role ‘café’ ... 71

Figure 5.23: Eatnow food ordering mobile application cloud firestore for checkout collection ... 72

Figure 5.24: Eatnow food ordering mobile application cloud firestore for products collection ... 72

Figure 6.1 Pie chart of participants evaluation procedures ... 80

Figure 6.2 Bar chart of score user will recommend to others ... 80

Figure 6.3 Bar chart of apps complexity ... 81

Figure 6.4 Bar chart of apps usability ... 81

Figure 6.5 Bar chart of apps integration ... 82

Figure 6.6 Bar chart of apps inconsistency ... 82

Figure 6.7 Bar chart of apps adaptability ... 83

Figure 6.8 Bar chart of score user will recommend to others ... 83

Figure 6.9 Pie chart of system usefulness ... 84

(16)

xvi

LIST OF APPENDICES

... Page Appendices A Questionnaires ... 94

(17)

CHAPTER 1 INTRODUCTION

1.1 Introduction

Chapter 1 explain about the problem background and problem statement which leads to the idea of the development of the system, which this project aims to develop an online food ordering system for UMS Kota Kinabalu cafeteria. This chapter also describes the main objectives for the project, as well as the expected outcomes and the project milestones. The report of the organization will be reviewed by the end of this chapter.

1.2 Problem background/Motivation

University Malaysia Sabah (UMS) cafeteria is required to serve large numbers of people in high traffics areas in a cost of effective manner. This is because UMS has many students and staff this makes the cafeteria will always fill in with them as they need to eat during their free time. This cause the cafeteria needs to take a huge number of customers daily especially during peak hours such as lunch and dinnertime as customers usually will be able to rest and eat during that time. The manual food service in the restaurant industry relies heavily on paperwork and human labor, which may not be enough to meet the food industry's ever- increasing demand for fast service (Reddy K, 2016). When there are many customers, and the cafeteria used a manual way to take the order the process of taking and making orders between the cafeteria staff and the customer will get slow due to the high demand. If the process is slow then it will waste the time for both cafeteria staff and customers.

(18)

2

Moreover, if there are many customers it will be hard for the cafeteria staff to take orders in order. Some customers may be overlooked even though he came first due to an unorganized system of taking orders in UMS cafeteria. Most of the cafeteria in UMS just jot down the order from the customers on the paper or try to remember it. Manually taking orders of the crucial information in papers is tedious and risky at certain times (Reddy K, 2016), as those techniques have a high probability to make mistakes or misinterpret customer orders. This can cause customers to misunderstand and be frustrated with a service that they get from the cafeteria staff. The cafeteria that cannot manage to handle the drawbacks of the situation may have a drop in their sales as customers will not be interested to buy food on their stall any longer due to bad services that they get from the cafeteria staff.

Not only that, if the order is taken manually, it is usually consuming a lot of time. The process of ordering will be so slow especially during peak hours. This is because during peak hours there will be a lot of customers that visit the cafeteria to eat. Then the cafeteria will be crowded which makes it will not be easy for customers to choose or order the menu in a composed way as the situation will be more chaotic and the cafeteria will have more demand from the customers. At peak hours, there could be too many people to serve. The service's efficiency can deteriorate, resulting in customer dissatisfaction (Reddy K, 2016). The restaurant can hire more staff, as it is one of the ways to increase the quality service of food ordering. However, if there are too many staff are hired, it may cause a downside to the restaurant as it can be a waste of resources during non-peak hours (Reddy K, 2016).

Besides, right now we are in the situation of facing a pandemic of COVID-19 where social distancing is a must. According to CDC (CDC, 2020), individuals who are infected but do not exhibit symptoms are likely to contribute to the spread of COVID- 19. Since individuals will spread the infection until they realize they are ill, it is important to always keep at least 6 feet away from others, even though you or they do not have any symptoms (CDC, 2020). Hence, we cannot be in a crowded place where it will be a high risk for someone to get infected. A chaotic crowded place will

(19)

3

not only affect the concentration of both cafeteria staff and customers during the ordering phase but also will affect their health. Thus, a new system that can order food through an application can prevent the event to occur.

1.3 Problem Statements

Earlier it stated how UMS cafeteria deals with some problems because they take orders manually, hence UMS food ordering mobile application is designed to overcome the problem faces. It stated how UMS cafeteria needs to be able to serve food in a relatively short time frame to many customers during a busy time to survive.

Customers' ordering can be done quickly and reduces the waiting time by ordering through the mobile application as it does not time-consuming.

The problem of choosing a menu can be satisfied by focusing on creating accurate order details for customers and ambiguity reduction. To make the process of menu selection easier, a review system lets the user give feedback about the food in the cafeteria. These features are beneficial for customers to find the best food in the cafeteria. It will help the cafeteria to do all functionalities more accurately and faster. It will also reduce manual work and improve the efficiency of the cafeteria ordering system.

Besides. This system can be one of the modules to apply on social distancing and help customers to dodge a crowded place as it helps to optimize and control the cafeteria. The problem such as the cafeteria has too many customers and unorganized order will occur when manually ordering food, hence they need the help of some features so they can maintain and organized the data accurately. Therefore, UMS food ordering mobile application is developed to enhance the efficiency and accuracy of taking and making orders in UMS cafeteria.

(20)

4 1.4 Project Objectives

The objectives of this project are:

i. To design ordering meals module for UMS cafeteria and customers.

ii. To develop a mobile based application food ordering system.

iii. To evaluate the usability of the food ordering system using System Usability Scale (SUS).

1.5 Project Scope

The system is developed for the use of UMS cafeteria, students, and staff. It will be developed in a mobile application. The system will be applied to the UMS Kota Kinabalu cafeteria only. The system will consist of a module which has two sides of different view which is for cafeteria staff, and UMS student and staff. Table 1.1 shows modules and its function for UMS cafeteria staff, and table 1.2 shows modules and its function for UMS students and staff.

(21)

5

Table 1.1: Modules and Function for UMS cafeteria staff

Modules Function

Profile a module that contains user information such as, name and email.

Order a module that contains an order from the customers.

Products a module that contains cafeteria menu by category food, drink, and dessert.

Table 1.2: Modules and Function for UMS students and staff

Modules Function

Search menu this module is for the user to search the menu or food that their desire.

Profile a module that contains useful information such as, username, name, password, mobile number, and email.

Favorite a module where user can save their favorite menu.

Cart a module that contains the food that the user wants to order or has been ordered.

Menu Details a module that shows the information of the cafeteria menu.

Notification A module that will notify the customers if the order has been received, accept, or decline by the cafeteria staff.

(22)

6 1.6 Report Organization

An online food ordering system will be produced for the use of UMS cafeteria which eases both the cafeteria staff and customers. This approach with the implementation of mobile applications for Android will increase the performance of ordering foods in UMS cafeteria.

1.7 Report Organization

The first chapter consists of the project's declaration, acknowledgment section, and project abstract. The abstract is written in both English and Malay, as required by the thesis format. The following section contains a table of contents for each chapter of the project, followed by a list of figures and charts. The text is divided into several chapters, the first chapter is the introduction. The study focuses on the problem background, problem statement, objectives, scope, expected outcome, milestones as well as the organization of the report.

The second chapter discusses a concise overview of prior studies relevant to this initiative. Chapter two is a review of previous studies related to this project, which is an online food ordering mobile application. The review is about food ordering system, and an existing and similar system of food ordering.

Chapter three will focus on the method used in the project. The chapter consists of three phases which the first phase will illustrate designing the mobile application using providers in flutter, the second phase will explain about development of the mobile application, and the third phase will clarify the evaluation of the usability of the food ordering system. Chapter four focuses on the result part of the project. The conclusion will also be clarified along with some other ideas for future work. The reference is listed and written in APA format as required.

(23)

7 1.8 Conclusion

In conclusion, this project is to improve the food ordering system in UMS cafeteria, where ordering food through a mobile application would be preferable to ordering food manually. As it is faster and time-consuming. This project could help lessen the chaotic situation in UMS cafeteria especially during peak hours when people would scramble to order food.

(24)

CHAPTER 2 LITERATURE REVIEW

2.1 Introduction

This chapter describes the basic knowledge about the food ordering system. This chapter describes all the information and knowledge about a related topic in detail.

The topic about Formal Specification for Online Food Ordering System using Z language, Foodcourt an online ordering platform, A PDA Food Ordering System Using Interaction Design Approach and Automated Food Ordering System with Interactive User Interface Approach are discussed. Research and studies on the existing and similar systems are explained in this chapter such as GrabFood, FoodPanda, and MoreFun.

2.2 Food Ordering System

An online food ordering system is software that allows restaurants to receive and process orders sent over the Internet (cloudwaitress, n.d.). It generally consists of two major elements, which is a mobile app for hungry customers to browse dishes and place an online order and an interface that can be managed by the staff of the restaurant to accept and handle customer's orders (cloudwaitress, n.d.). In the sense of a dynamic world, where everything is digitized and people do not want to postpone everything, the proposed work would mean that the whole process of the restaurant opting for food collection and cancellation, delivered digitally, would make the method not only efficient but also less time consuming (Chowdhury, 2018).