(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection

(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection(Đồ án tốt nghiệp) Mobile applications for coffeeshop management and customer connection

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION THESIS MOBILE APPLICATIONS FOR COFFEESHOP MANAGEMENT AND CUSTOMER CONNECTION VO MINH HIEU Student ID: 17110136 LE MINH TIEN Student ID: 1710236 Course: 2017 Major: INFORMATION TECHNOLOGY Advisor: NGUYEN DUC KHOAN M.Sc.IT Ho Chi Minh City, July 2021 Disclaimer I hereby declare that this thesis is my own and autonomous work All sources and aids used have been indicated as such All texts either quoted directly or paraphrased have been indicated by in-text citations Full bibliographic details are given in the reference list which also contains internet sources containing URL and access date This work has not been submitted to any other examination authority vi Acknowledgements First of all, the implementation team would like to send their sincere thanks to the High-Quality Training Department - the Ho Chi Minh City University of Technical Education for creating all the most favorable conditions for the group to perform The association is free to access, refer, and expand knowledge in the field of Information Technology in general and the Graduation Thesis in particular! The sincerest thanks to the implementation team would like to sincerely send to Mr NGUYEN DUC KHOAN - who used all the teacher's enthusiasm and knowledge, accompanied and directly taught, guided, and created all favorable conditions, help the group to develop their best as well as improve their knowledge throughout the learning process, especially in the process of preparing and implementing the Good Thesis Course Thank you for your enthusiasm, which is a tremendous motivation to help the group perform, persevere throughout the process of implementing the topic and discover new interesting and useful knowledge related to the topic Student groups vii 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 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 S K L 0 ... Education for creating all the most favorable conditions for the group to perform The association is free to access, refer, and expand knowledge in the field of Information Technology in general and. .. 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 the customer. .. (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