Mobile applications for coffeeshop management and customer connection faculty of high quality training graduations thesis of the information technology

Table of Contents Chapter INTRODUCTION .1 1.1 The urgency of the project 1.2 Objective .1 1.3 Technology 1.4 Scope Chapter APPLICATINON & TECHNOLOGIES REVIEW 2.1 Application review 2.1.1 POS App 2.1.2 GrabFood, GoJek Food, Now Food 2.1.3 What is problem? 2.1.4 What is solution? .3 2.2 Technologies .3 2.2.1 Flutter 2.2.1.1 Introduction Flutter 2.2.1.2 Why Flutter? 2.2.2 NodeJS 2.2.2.1 Introduction NodeJS .4 2.2.2.2 What is Express framework 2.2.3 ReactJS 2.2.3.1 Introduction ReactJS .5 2.2.3.2 Why ReactJS Chapter REQUIREMENT SPECIFICATION 3.1 Description 3.1.1 POS Description 3.1.2 Client description 3.1.3 CMS description 3.1.4 Shipper application description .6 3.2 Functional requirements 3.2.1 User requirements 3.2.1.1 POS Application .7 viii 3.2.1.2 Client Application 3.2.1.3 Shipper Application 3.2.1.4 CMS Application 3.2.2 System requirements (Use case) .8 3.2.2.1 Actors 3.3.1.1 POS actors 3.3.1.1.2 Client app actors 3.3.1.1.3 Shipper app actors .9 3.3.1.1.4 CMS app actors 3.2.2.2 Use case 3.2.2.3 Use case diagram 13 3.2.2.4 Use case Description .16 3.2.2.4.1 POS app use case description 16 3.2.2.4.2 Shipper app use case description 33 3.2.2.4.3 Client app use case description 41 3.2.2.4.4 CMS app use case description 56 3.3 Non- functional requirements 85 3.3.1 Usability 85 3.3.2 Reliability 85 3.3.3 Performance 85 3.3.4 Purchased Components 86 3.3.5 Interfaces .86 3.3.5.1 User interfaces .86 3.3.5.2 Hardware interfaces 86 3.3.5.3 Software interfaces 86 Chapter SYSTEM DESIGN 87 4.1 System Architecture 87 4.1.1 Front-end architecture 87 4.1.2 Back-end architecture 88 4.2 Entity Relation Diagram 90 4.3 Database Diagram .91 4.3.1 Logical diagram 91 4.4 Sequence Diagram 93 4.4.1 Payment sequence diagram 93 ix 4.4.2 4.4.3 4.4.4 4.4.5 Change state order sequence diagram 93 Statistic sequence diagram 94 Order coffee from client app 94 Take a coffee order from shipper application .95 4.5 Component diagram 95 4.5.1 Backend 95 4.5.2 Frontend 96 4.6 Activity diagram 97 4.6.1 Activity diagram payment .97 4.6.2 Activity change order state 98 4.6.3 Activity view history order 98 4.6.4 Activity watch daily statistical 99 4.7 State machine diagram 99 4.7.1 Delivery order state machine 99 4.8 User interfaces design .100 4.8.1 POS app user interfaces 100 4.8.1.1 Dashboard screen 100 4.8.1.2 Area screen (Service screen) .102 4.8.1.3 Order screen 104 4.8.1.4 Payment screen(with inches screen) 105 4.8.1.5 Statistical screen 107 4.8.2 Client app user interfaces 108 4.8.2.1 Home screen 108 4.8.2.2 Product in store screen 110 4.8.2.3 Cart screen 111 4.8.3 Shipper app user interfaces 114 4.8.3.1 Login Screen .114 4.8.3.2 Home screen 116 4.8.3.3 Pick-up request screen 118 4.8.3.4 Deliver history screen 120 4.8.3.5 Request detail screen 122 4.8.3.6 Track screen 124 4.8.4 CMS app user interfaces .126 4.8.4.1 Products management 126 4.6.1.2 CRUD POS application Employee .127 x Chapter SYSTEM IMPLEMENTATION AND TESTING .130 5.1 System implementation 130 5.1.1 Software development environment 130 5.1.2 Source code management 130 5.1.3 Deploy 130 5.1.3.1 Require installing Web server and web client app 130 5.1.3.2 Deploy web server NodeJS 130 5.1.3.3 Deploy web client app .131 5.2 Testing .131 5.2.1 Availability backend 131 5.2.2 Test plan 131 5.2.2.1 List of stages of testing .131 5.2.2.2 List of test types 131 5.2.2.3 Constraints 132 5.2.2.4 Plan defect 132 5.2.3 Test Case .132 5.2.3.1 POS app test case 132 5.2.3.2 Shipper app test case 135 5.2.3.3 Client app test case 137 5.2.3.4 CMS app test case .138 5.3 Evaluation .141 Chapter CONCLUSION .143 6.1 Conclusion 143 6.2 Advantage 144 6.3 Disadvantage 144 6.4 Future planning .144 References .146 Appendices 147 xi List of Figures Figure 3.1 POS use case diagram .13 Figure 3.2 Client app use case diagram 14 Figure 3.3 CMS use case diagram 15 Figure 3.4 Shipper app use case diagram 15 Figure 3.5 Use case login 16 Figure 3.6 Use case logout 17 Figure 3.7 Use case get attendance 18 Figure 3.8 Use case make order based on table .19 Figure 3.9 Use case search food .20 Figure 3.10 Use case merge order 21 Figure 3.11 Use case view state of table 23 Figure 3.12 Use case split order .24 Figure 3.13 Use case find order by Id 25 Figure 3.14 Use case sort dish by duration 26 Figure 3.15 Use case change state order 27 Figure 3.16 Use case sort dish by duration 29 Figure 3.17 Use case view order detail 30 Figure 3.18 Use case make a payment .31 Figure 3.19 Use case login .33 Figure 3.20 Use case logout .34 Figure 3.21 Use case accept order 35 Figure 3.22 Use case change delivery state .37 Figure 3.23 Use case navigate to call dial 39 Figure 3.24 Use case history delivery .40 Figure 3.25 Use case login social network 41 Figure 3.26 Use case view profile 43 Figure 3.27 Use case view the cart 44 Figure 3.28 Use case add to cart 45 Figure 3.29 Use case view map 46 Figure 3.30 Use case view the order history 47 Figure 3.31 Use case make the order .48 Figure 3.32 Use case view product by categories 49 Figure 3.33 Use case track order status 51 Figure 3.34 Use case view the store 52 Figure 3.35 Use case track shipper location .53 xii Figure 3.36 Use case estimate time and duration order 54 Figure 3.37 Use case view store near me 55 Figure 3.38 use case login 56 Figure 3.39 Register account 58 Figure 3.40 Use case create category .59 Figure 3.41 Use case update category 61 Figure 3.42 Use case delete category .62 Figure 3.43 Use case block user .64 Figure 3.44 Use case create shipper account 65 Figure 3.45 Use case update shipper account 66 Figure 3.46 Use case create employee .68 Figure 3.47 Use case update employee 69 Figure 3.48 Use case delete employee .71 Figure 3.49 Use case send SMS to employee 72 Figure 3.50 Use case create product 73 Figure 3.51 Use case update product .75 Figure 3.52 Use case delete product 76 Figure 3.53 Use case create voucher 78 Figure 3.54 Use case update voucher .79 Figure 3.55 Use case delete voucher 81 Figure 3.56 Use case create area 82 Figure 3.57 Use case delete area .84 Figure 4.1 System architecture 87 Figure 4.2 User realiation 87 Figure 4.3 Front-end project organization .88 Figure 4.4 Back-end project organization 88 Figure 4.5 Entity Relation Diagram 90 Figure 4.6 Database diagram 91 Figure 4.9 Payment sequence diagram 93 Figure 4.10 Change state order sequence diagram 94 Figure 4.11 Statistic sequence diagram 94 Figure 4.12 Order coffee from client diagram 95 Figure 4.13 Take coffee order from shipper application 95 Figure 4.14 Backend component diagram .96 Figure 4.15 Frontend component diagram .96 Figure 4.16 Activity diagram payment 97 xiii Figure 4.17 Activity change order state 98 Figure 4.18 Activity diagram view history order .98 Figure 4.19 Activity diagram watch daily statistical .99 Figure 4.20 Delivery order state machine 99 Figure 4.21 Dashboard screen 100 Figure 4.22 Area screen 102 Figure 4.23 Order screen 104 Figure 4.24 Payment screen 105 Figure 4.25 Statistical screen 107 Figure 4.26 Home screen .108 Figure 4.27 Product in store screen 110 Figure 4.28 Cart screen 112 Figure 4.29 Login screen 114 Figure 4.30 Home screen .116 Figure 4.31 Pick-up request 118 Figure 4.32 Deliver history 120 Figure 4.33 Request detail 122 Figure 4.34 Track screen 124 Figure 4.35 Products management 126 Figure 4.36 CRUD POS application employee .127 Figure 5.1 Availability for backend .131 xiv List of Tables Table 3.1 POS use case table .9 Table 3.2 Shipper use case table 10 Table 3.3 Client app use case table 10 Table 3.4 CMS use case table 11 Table 3.5 Use case description login .16 Table 3.6 Use case description logout .17 Table 3.7 Use case description get attendance 18 Table 3.8 Use case description make order based on table 19 Table 3.9 User case description search food 20 Table 3.10 Use case description merge order 21 Table 3.11 Use case description view state of table 23 Table 3.12 Use case description split order .24 Table 3.13 Use case description find order by Id 25 Table 3.14 Use case description change dish by duration .26 Table 3.15 Use case description change state order .28 Table 3.16 Use case description sort dish by duration .29 Table 3.17 Use case description view order detail 30 Table 3.18 Use case description make a payment 31 Table 3.19 Use case login description .33 Table 3.20 Use case description logout 34 Table 3.21 Table use case description accept order 36 Table 3.22 Table use case description change delivery state 37 Table 3.23 Table use case description navigate to call dial .39 Table 3.24 Use case description history delivery 40 Table 3.25 Use case description login social network .41 Table 3.26 Use case description view profile 43 Table 3.27 Use case description view the cart 44 Table 3.28 Use case description add to cart .45 Table 3.29 Use case description view map 46 Table 3.30 Use case description view the order history 47 Table 3.31 Use case description make the order 48 Table 3.32 Use case description view product by categories 50 Table 3.33 Use case description track order status 51 Table 3.34 Use description view the store .52 Table 3.35 Table use case description track shipper location 53 xv Table 3.36 Table use case description estimate duration time and delivery fee 54 Table 3.37 Table use case description view store near me 55 Table 3.38 Use case description login .56 Table 3.39 Use case description register account 58 Table 3.40 Use case description create category .59 Table 3.41 Use case description update category 61 Table 3.42 Use case description delete category .62 Table 3.43 Use case description block user .64 Table 3.44 Use case description create shipper account 65 Table 3.45 Use case update shipper account 66 Table 3.46 Use case description create employee 68 Table 3.47 Use case description update employee 69 Table 3.48 Use case description delete employee 71 Table 3.49 Use case description send SMS to employee 72 Table 3.50 Use case description create product .73 Table 3.51 Use case description update product 75 Table 3.52 Use case description delete product .76 Table 3.53 Use case description create voucher 78 Table 3.54 Use case description update product 79 Table 3.55 Use case description update voucher .81 Table 3.56 Use case description create are 82 Table 3.57 Use case description delete area .84 Table 4.1 Database diagram .92 Table 4.2 Dashboard UI description 100 Table 4.3 Area screen UI description .103 Table 4.4 Order screen UI description 104 Table 4.5 Payment screen UI description 106 Table 4.6 Statistical screen UI description .107 Table 4.7 Home screen description 109 Table 4.8 Product in store description 111 Table 4.9 Cart screen description 112 Table 4.10 Login screen description 115 Table 4.11 Home screen description 117 Table 4.12 Pick-up request description 119 Table 4.13 Deliver history description 120 Table 4.14 Request detail screen description 122 xvi Table 4.15 Track screen description 125 Table 4.16 Products management description .126 Table 4.17 CRUD POS application employee .128 Table 5.1 Test case for POS app 132 Table 5.2 Shipper app test case 135 Table 5.3 Client app test case 137 Table 5.4 Test case for CMS app 138 xvii app but using wrong password must be expected showed the message box: “Username or Click “Log in” password is incorrect.” button Passed On the app, tap Can logout As expected “Logout” the app POS0 Logout POS0 Create order your Username/Passw ord into the textbox an As Passed Tap on table expected need to create an order System call Tap on API to create choose any an order, and products then navigate Tap on the are screen “save” button POS0 Merge table As Passed Tap on expected “button merge” in the floating area System response Tap on “Merge is choose successfully” table Tap on “tick” button POS0 Split table As Passed Tap on System expected “button split” response in the floating “Split is area successfully” Tap on 133 choose table need to split Tap on “tick” button Change state order POS0 from open to processing Select process on the bar tab Screen will tab appear a model with Long tap on loading, then one of the the order will in grid views appear items which processing represent for screen As Passed expected order Change state order POS0 from processing to ready Make a POS1 payment with fail scenario Select process on the bar tab tab Tap on arrow icon on the order to change its state to ready As Passed Screen will expected appear a model with loading, then the order will appear in ready screen (on ready tab bar) As Passed Select expected statistic failure screen on A home screen message will appear, and Select the order will “pending” tab not be paid bar on the screen 134 Tap on one of the orders Input tendered less than total Tap button pay As Passed expected Select statistic screen on home screen Make payment POS1 with success scenario a Select “pending” tab bar on the A snack bar with success screen message The Tap on one of order is paid the orders Input tendered less than total Tap button 5.2.3.2 pay Shipper app test case Table 5.2 Shipper app test case Actual Results Test case ID Test Description Test steps Expected Result Pass / Fail / Not executed / Suspend ed 135 As Passed expected Open shipper app SA01 Login Shipper app User enter phone number and password Login successfully and navigate to dashboard Tap on Login button Tap on pickup request SA02 Pick-up order User choose Success one order and modal shows tap on up and to Tap on accept navigate track screen order Tap confirm SA03 Show direction SA04 Change state order SA05 Update profile As Passed expected on On Google As Passed map, the red expected On track line appear on screen, press map from on direction shipper and red mark On track As Passed screen, tap on Next state expected “My Progress” button will On order detail, jump to next tap on “Next line state” button As Passed On home Success screen, tap on dialog will expected “My Account” shop up and return to Tap on “Edit” update modal with new button 136 information Replace update information with current input data “phoneNumb er”, “Age”, “address”, “shipperInfo” Tap on “Update” button Tap on “OK” on confirm modal SA06 Logout Splash screen As Passed On home will show up expected screen, tap on and navigate to login logout screen 5.2.3.3 Client app test case Table 5.3 Client app test case Actual Results Test case ID Test Description CA01 Login with social network Test steps Open the app Click button “Login with google/facebook” Expected Result Login successfully and navigate to Home screen As expected Pass / Fail / Not executed / Suspend ed Passed 137 Choose one account in the list CA02 Search product CA03 Make the order CA04 Tracking the order Tap on text field on the top home screen Typing the product you want Tap on any store Tap on “Add to cart” from any product Tap on “cart” button in the app bar Choose voucher Choose payment method Tap on “Purchase” button Response the list store has this product As expected Passed As expected Passed Actual Results Pass / Fail / Not executed / Suspend ed Passed Response “The order has been created succeffully” awdd1 5.2.3.4 CMS app test case Table 5.4 Test case for CMS app Test case ID Test Description Test steps Expected Result Cms0 Can login the As Login the On website, enter website, the expected your CMS app page Username/Passw login 138 ord into textbox the navigate to dashboard Click “Log in” screen button Navigate to Products page As Passed expected Click the “Create” button The new Enter the content product must into the textbox Cms0 Create new be created and upload the a product and shows on image the table on Choose “Time website Making” Click the “Create” button on popup Navigate to Products page As Passed expected Click the “Edit” The product must be icon on the row Cms0 Edit the updated and Edit the content product shows on the into the textbox table on Click the website “Update” button on popup Cms0 Create Voucher new As Passed Navigate to The voucher must expected Manage be created Vouchers page and shows on Click the the table on “Create” button website 139 Enter the content into the textbox Click the “Create” button on popup Navigate to Manage The voucher Vouchers page be Click the “Edit” must Cms0 Edit updated and icon on the row Voucher shows on the Edit the content table on into the textbox website Click the “Update” button on popup Navigate to Manage Area page The new area Click the “Add must be table” button Cms0 created and Create Area Enter the content shows on the on into the textbox table website Click the “Create” button on popup Navigate to My Employees page Create Cms0 Employee Account The new Click the account must “Create” button be created Enter the content and shows on into the textbox the table on Click the website “Create” button on popup As Passed expected As Passed expected As Passed expected 140 5.3 Evaluation Backend: - Backend always availability serve - Providing APIs enough to use for any features, which have in use case - Providing some APIs for future planning - Request and response with the fastest speed Frontend: - Frontend has beautiful UI with buttons, icons, widgets using the material design - The main features such as: login/logout, create order, merge/split orders, manage state order/order details with kitchen feature, payment, statistical work stable - Some features are not completed such as: mange employees, manage products Then, the security is not fucus, it’s vulnerable 141 142 Chapter CONCLUSION 6.1 Conclusion Database: - Created database using code first, deploy database on VPS Ubuntu, and connect the backend Backend: - Built a backend with Model-Controller-Route architecture - Created APIs need use in the project - Deployed backend on VPS Ubuntu to connect anytime Frontend: - Client application (Mobile): Complete features such as: Login by social network, get current location, make the order, tracking the shipper location, - Shipper application (Mobile): Complete feature such as: Login with created account in CMS, get delivery order around 5km, tracking an accepted order, change state will notify end-user in client application, edit profile, user can navigate to call dial screen - POS (Point of sales) application (Mobile): Complete the module management to support the coffeeshop such as: tables, orders, merge/split table, area, drink/food, payment, kitchen, … - CMS (Content management system) application (Web): Complete features as: Register as primary user in CMS, crud area, crud employee (like bartender, waiter,…), crud product in POS application In the other hand, admin can crud category and user will based on given category to create their own product, crud shipper on the system… • Coffeeshop owner: manage the employee, the product, … • Admin: manage the customer (coffeeshop owner), track system status… Experience gained: - Deeply understand deploy the application in Ubuntu server - Understand socket work-flow - Understand to use Firebase Cloud Message to push notification when app is terminated 143 6.2 Advantage - The new framework Flutter help fast to run and build the mobile application - System architecture is designed reasonably, so request/response between backend and frontend is stable and fast - The application has notification features to help user easy to get notification from others user - Support push notification when the application is terminated - Tracking real-time the shipper location and manage the order that don’t need the third party - Support register by phone number - Backend is deployed in VPS under production service, it helps the backend always in available state We can install the mobile application anywhere and use it stably - Tracking the server status in CMS CMS can send mail to verify account when register new account - Shipper and client app using Google map to track location and using cloud message Firebase to send notify 6.3 Disadvantage - POS is not completed, some incomplete features such as: manage employees, manage products, search food - Some feature in frontend is not separate Business logic from UI - CMS application is incomplete with some features as: Notification, Invoice (to charge primary user base on using feature) - Shipper applications need to resolve the conflict when shippers take the same order, add some helpful feature like chatting with client end-user 6.4 Future planning - In the next development strategy, we will make the POS app run without internet, can sync all the data whenever the app has the internet Besides that, we will use services broker to handle data when the app not connected to the internet Adding more features and improve UI for the app - Design and development the report feature to support for coffeeshop owner can tracking and statistic the transaction 144 - Manage cost and invoice when the coffeeshop owner use the system - Adding the marketing campaign for the coffeeshop owner to increase the coffeeshop profit 145 References [1] [2] [3] [4] [5] Google team Introduce Flutter [online]Available at: https://flutter.dev [Accessed 18 December 2020] Wikipedia NodeJS [online] Available at: https://en.wikipedia.org/wiki/Node.js [Accessed 18 December 2020] Wikipedia Express Framework [online] Available at: https://en.wikipedia.org/wiki/Express.js [Accessed 18 December 2020] C# Curator What Is React And Why React Is So Popular [online] Available at: https://www.c-sharpcorner.com/article/what-is-react [Accessed 19 July 2021] Vũ Nguyễn Sử dụng PM2 để deploy Node.js application [Online] Available at: https://viblo.asia/p/su-dung-pm2-de-deploy-nodejs-application6J3ZgxWqlmB [Accessed 19 July 2021] 146 Appendices COVER i PROJECT ASSIGNMENT ii PRE-DEFENSE EVALUATION SHEET iv EVALUATION SHEET OF .v DEFENSE COMMITTEE MEMBER v Disclaimer vi Acknowledgements vii Table of Contents viii List of Figures xii List of Tables xv Abstract xviii 147 ... with the store The customers can make the order for the store by the mobile application - It provides the promotion, voucher for the customer - It provides the tracking location shipper feature for. .. (Content management system) application (Web): allow admin and coffeeshop owner can: - Coffeeshop owner: manage the employee, the product, the shipper - Admin: manage the customer (coffeeshop. .. INTRODUCTION 1.1 The urgency of the project Technology is increasingly developing, and the mobile phone is too developing Everyone has tendency use the mobile phone everywhere The POS (Point of sale)