(Đồ án tốt nghiệp) Building a website for a chain of coffee shops

(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY GRADUATION THESIS BUILDING A WEBSITE FOR A CHAIN OF COFFEE SHOPS STUDENT NAME: DO PHI CUONG ID: 17110106 STUDENT NAME: PHAN DANG TRUNG ID: 17110244 ACADEMIC YEAR: 2017 – 2021 MAJOR: INFORMATION TECHNOLOGY INSTRUCTOR: LE VINH THINH, Ph.D Ho Chi Minh City, July, 2021 ACKNOWLEDGMENTS With our deepest gratitude, we would like to thank Mr.Le Vinh Thinh, a lecturer of High Quality Training, as well as all the lecturers of the Faculty of Information Technology, Ho Chi Minh City University of Technology and Education for their valuable lessons and experience throughout our learning process In the process of writing the essay, he helped our group a lot so that our team could fix the shortcomings and learn more specialized knowledge Finally, my group wish Mr Thinh a lot of health to continue the great mission that is impart useful knowledge to the next generations of students We would like to express our gratitude to you very much Thesis implementation group Do Phi Cuong Phan Dang Trung v SUMMARY In the industry 4.0, online ordering is popular with everyone Especially in times of epidemic, placing an order food and drinks at home is very necessary and convenient Our team decided to work together on a project to manage a coffee shop chain and customers can order online through the store's website Because we don't have much experience and have never done a project like this before, so the group decided to spend as much time to study and research before embarking on implementation Firstly, after a reference from the famous website of fast food and drinks as: The Coffee House, Trung Nguyen Coffee, Foodie, my group has learned the important operations of a business website online, and also learned how the developers have organized the interface for the website to create convenience for users From the knowledge and experience learned, the team has designed the database so that it is reasonable and sufficient to manage the store's data and user data because the team knows that if the database is not clear and closely linked together, it will be difficult for the development of the project later After a time to set up the project, the team continued to develop the project by learning the technologies to build a finished product as the goal Realizing that the use of MERN Stack is both suitable for newcomers and has many users, the team decided to use the set of technologies to implement their project The initial difficulty of the group is how to make the members work well in our team and perform the tasks consistently without affecting each other So, our team decided to divide the project into small parts and solve each level from the easiest to the most difficult When everyone encounters a problem or an error that cannot be solved by themselves, the whole group will contact the instructor and work together to find a way or change the project structure if necessary Finally, after a period of implementation, our team also try their best and creates the final product as best possible The coffee shop chain management model has operated on two platforms: website and mobile phone Users can manage the products of each branch The important functions such as ordering, payment, promotion, login/logout, have also been completed Thanks to Mr Thinh's dedicated help, our team was finished as expected and proposed on time vi Trong thời đại 4.0 tại, việc đặt hàng từ xa khơng cịn q xa lạ với hầu hết người Đặc biệt thời kỳ đỉnh điểm dịch bệnh việc đặt đồ ăn thức uống nhà cần thiết tiền lợi Nắm bắt điều này, nhóm chúng em định thực dự án quản lý chuỗi cửa hàng cà phê giúp cho khách hàng đặt hàng trực tuyến thông qua website cửa hàng Vì kinh nghiệm cịn non trẻ chưa thực dự án trước đây, nên nhóm định dành thật nhiều thời gian để nghiên cứu tìm tịi trước bắt tay vào thực Trước tiên, sau tham khảo từ website bán đồ ăn nhanh thức uống tiếng : The Coffee House, Cà phê Trung Nguyên, Foodie,… nhóm học hỏi nghiệp vụ quan trọng website kinh doanh online phải có đồng thời nhóm tiếp thu cách mà nhà phát triển tổ chức giao diện cho website để tạo thuận tiện cho người dùng.Từ kiến thức kinh nghiệm học hỏi được, nhóm tiến hành thiết kế sở liệu cho hợp lý đủ để quản lý liệu cửa hàng liệu người dùng nhóm biết sở liệu không rõ ràng thật liên kết khó cho việc phát triển dự án sau Sau khoảng thời gian thiết lập dự án kể trên, nhóm tiếp tục phát triển dự án với việc tìm hiểu cơng nghệ để xây dựng sản phẩm hồn thiện mục tiêu đề Nhận thấy việc sử dụng MERN Stack vừa phù hợp với người vừa sở hữu lượng người sử dụng đơng đảo, nhóm định sử dụng cơng nghệ nói để thực dự án Khó khăn ban đầu nhóm để tương tác tốt với thực cơng việc chung cách quán mà không làm ảnh hưởng đến Nhóm định phân chia dự án thành phần nhỏ giải theo cấp độ từ dễ đến khó Khi cá nhấn gặp vấn đề khó lỗi khơng thể tự giải nhóm liên hệ với giảng viên hướng dẫn tìm cách thay đổi cấu trúc dự án thật cần thiết Cuối sau khoảng thời gian không dài khơng ngắn, nhóm nỗ lực cho sản phẩm cuối hoàn thiện Mơ hình quản lý chuỗi cửa hàng cà phê hoạt động hai tảng website mobile Người dùng quản lý sản phẩm chi nhánh Những chức quan trọng đặt hàng, toán, khuyến mãi, đăng nhập/đăng xuất,… hoàn thiện Nhờ giúp đỡ tận tình thầy Thịnh, nhóm chúng em cuối hoàn thành sản phẩm mong đợi kịp tiến độ đề vii TABLE OF CONTENT BUILDING A WEBSITE FOR A CHAIN OF COFFEE SHOPS i GRADUATION THESIS TASK ii ASSESSMENT FORM OF INSTRUCTOR iii ASSESSMENT FORM OF CRITICAL LECTURER iv ACKNOWLEDGMENTS v SUMMARY vi TABLE OF CONTENT viii LIST OF TABLE xi LIST OF PICTURES xiv Chapter OVERVIEW 1.1 Reason for choosing the topic 1.2 Purpose and tasks performed .1 1.2.1 Purpose .1 1.2.2 Tasks 1.3 Research Methods 1.4 Expected results achieved Chapter THEORETICAL BASIS 2.1 About ReactJs 2.1.1 What is ReactJs? 2.1.2 Highlights of ReactJs .2 2.1.3 About JXS .2 2.1.4 Components 2.1.5 Props 2.1.6 State 2.2 About NodeJs 2.2.1 What is Nodejs ? 2.2.2 Highlights of Nodejs viii 2.2.3 Benefits of using Nodejs 2.3 About ExpressJs .4 2.3.1 What is ExpressJs? 2.3.2 The function of ExpressJs .4 2.3.3 Benefits of using ExpressJs .4 2.4 About MongoDB .4 2.4.1 What is MongoDB? 2.4.2 Why use MongoDB ? .4 2.5 About Natural Language Processing 2.5.1 What is Natural Language Processing? .5 2.5.2 Application of Natural Language Processing in chatbot building 2.5.3 Technologies used – Dialogflow Chapter DETERMINATION OF REQUIREMENTS AND SYSTEM MODELING 3.1 Current status survey 3.2 Request list 3.3 Requirements Modeling .10 3.4 Use Case Diagram 11 3.4.1 Admin 13 3.4.2 Employee 25 3.4.3 Customers have account .32 3.4.4 Customers have no account 37 Chapter 40 SYSTEM ANALYSIS AND DESIGN 40 4.1 Database design 41 4.1.1 Database diagram 41 4.1.2 Analysis of entities 42 4.2 Website interface design 47 4.2.1 Admin - Employee page (CMS Page) 47 4.2.2 Customer page (Client Page) 70 4.3 Mobile interface design 88 ix 4.4 Sequence diagram 100 4.4.1 Login .100 4.4.2 Admin - Employee .100 4.4.3 Customer 102 Chapter 103 INSTALL AND TEST 103 5.1 Support tools .103 5.2 Set up and run the program 103 5.2.1 Set up and run Back-end 103 5.2.2 Set up and run Front-end 103 5.2.3 Program Structure .103 5.3 Testing 105 5.3.1 Register 105 5.3.2 Login .106 Chapter 108 CONCLUDE 108 6.1 Summary .108 6.2 Result 108 6.3 Advantages 108 6.4 Defect 108 6.5 Future work 108 REFERENCES 109 x LIST OF TABLES Table 3.1 Usecase specification: Admin - Manage account 14 Table 3.2 Usecase specification: Admin - Manage employee 15 Table 3.3 Usecase specification: Admin - Manage branch 16 Table 3.4 Usecase specification: Admin - Manage category 17 Table 3.5 Usecase specification: Admin - Manage product 18 Table 3.6 Usecase specification: Admin – Manage comment 19 Table 3.7 Usecase specification: Admin – Manage order 20 Table 3.8 Usecase specification: Admin – Manage coupon code 21 Table 3.9 Usecase specification: Admin – View stats 22 Table 3.10 Usecase specification: Admin – Login 23 Table 3.11 Usecase specification: Admin – Logout 24 Table 3.12 Usecase specification: Employee - Manage branch 26 Table 3.13 Usecase specification: Employee – Manage order 27 Table 3.14 Usecase specification: Employee – Manage coupon code 28 Table 3.15 Usecase specification: Employee – View stats 29 Table 3.16 Usecase specification: Employee – Login 30 Table 3.17 Usecase specification: Employee – Logout 31 Table 3.18 Describe usecase: Customers have account - Login 33 Table 3.19 Describe usecase: Customers have account - Logout 34 Table 3.20 Describe usecase: Customers have account – Rating and comment 35 Table 3.21 Describe usecase: Customers have account - Order 36 Table 3.22 Describe usecase: Customers have no account - Register 38 Table 3.23 Describe usecase: Customers have no account - Order 39 Table 4.1 Database entity analysis: Categories 42 Table 4.2 Database entity analysis: Product 42 Table 4.3 Database entity analysis: Order 43 Table 4.4 Database entity analysis: Branches 44 Table 4.5 Database entity analysis: Coupon code 44 xi Table 4.6 Database entity analysis: User 45 Table 4.7 Database entity analysis: Comments 46 Table 4.8 Describe: Login page for store members 47 Table 4.9 Describe: Dashboard page - statistics 48 Table 4.10 Describe: Admin page - Navigation bar 49 Table 4.11 Describe: Category management page 50 Table 4.12 Describe: The window of creating a new category product 51 Table 4.13 Describe: The window of editing category product 52 Table 4.14 Describe: Product management page 53 Table 4.15 Describe: The window of creating a new product 54 Table 4.16 Describe: The window of update product 55 Table 4.17 Describe: Account management page 56 Table 4.18 Describe: Comments management page 57 Table 4.19 Describe: Employee management page 58 Table 4.20 Describe: The window of creating employee 59 Table 4.21 Describe: Coupon code management page 60 Table 4.22 Describe: The window of creating coupon code 61 Table 4.23 Describe: Branch management page 62 Table 4.24 Describe: The window of branches management 63 Table 4.25 Describe: The window of creating a new branch 64 Table 4.26 Describe: The window of adding new products for the branch 65 Table 4.27 Describe: Order management page 66 Table 4.28 Describe: The window of order detail 67 Table 4.29 Describe: Password change page 68 Table 4.30 Describe: Coupon code management page for employee 69 Table 4.31 Describe: Home page 71 Table 4.32 Describe: The window of login 72 Table 4.33 Describe: The window of register 73 Table 4.34 Describe: Introduction page 74 Table 4.35 Describe: Profile page 75 xii Table 4.36 Describe: Password change page for the customer 76 Table 4.37 Describe: Product page 78 Table 4.38 Describe: Product details page - reviews 80 Table 4.39 Describe: Product details page – rating and comment 82 Table 4.40 Describe: Coupon code page 83 Table 4.41 Describe: Order history page 85 Table 4.42 Describe: Shopping cart page 86 Table 4.43 Describe: The window of entering information and payment 87 Table 4.44 Describe: Mobile - Login screen 88 Table 4.45 Describe: Mobile - Registration screen 89 Table 4.46 Describe: Mobile - Chatbot screen 90 Table 4.47 Describe: Mobile - Profile screen 91 Table 4.48 Describe: Mobile - Profile update screen 92 Table 4.49 Describe: Mobile - Home screen 93 Table 4.50 Describe: Mobile – Shopping cart (empty) 94 Table 4.51 Describe: Mobile - Reviews 95 Table 4.52 Describe: Mobile - Rating and comment 96 Table 4.53 Describe: Mobile - Order summary screen 97 Table 4.54 Describe: Mobile - Payment screen 98 Table 4.55 Describe: Mobile - Payment method screen 99 Table 5.1 Testcase: Register 105 Table 5.2 Testcase: Login 106 xiii Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.48 Mobile - Rating and comment Table 4.52 Describe: Mobile - Rating and comment No Name Detailed description Product information Contains image, name and product price Add product to cart Click to add product to cart The user chooses the number of hearts to Star rating rate the product Comment Customers enter product reviews When clicked, the product review will be Button “Update rating” saved When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 96 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.49 Mobile - Order summary screen Table 4.53 Describe: Mobile - Order summary screen No Name Detailed description Display the products selected by the Product added customer Temporary total amount Is the total price of the products Button “Order” When clicked, will go to the payment page When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 97 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.50 Mobile - Payment screen Table 4.54 Describe: Mobile - Payment screen No Name Detailed description When clicking, the user will change the Change the address delivery address User chooses the appropriate discount code Discount code for his order Total price Total amount to be paid by the customer Click confirm order after checking the Payment order and go to the payment method page When clicked, customers will be redirected to the homepage Button “Home” Displays a different color from the rest of the pages while working on this page When clicked, customers will be redirected Button “Profile” to the profile page When clicking, customers will be Button “Chatbot” redirected to the chatbot page – Auto reply 98 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.51 Mobile - Payment method screen Table 4.55 Describe: Mobile - Payment method screen No Name Detailed description PayPal Payment Click to pay the order by PayPal Click to pay for your order by Debit or Payment Debit or Credit Credit card Figure 4.52 Mobile - Thank you screen 99 Chapter 4: SYSTEM ANALYSIS AND DESIGN 4.4 Sequence diagram 4.4.1 Login Figure 4.53 Sequence - Login 4.4.2 Admin - Employee Figure 4.54 Sequence: Category management 100 Chapter 4: SYSTEM ANALYSIS AND DESIGN Figure 4.55 Sequence: Product management Figure 4.56 Sequence: Confirm Order 101 Chapter 4: SYSTEM ANALYSIS AND DESIGN 4.4.3 Customer Figure 4.57 Sequence: Create Order Figure 4.58 Sequence: Rating and comment 102 Chapter 5: INSTALL AND TEST Chapter INSTALL AND TEST 5.1 Support tools − Use Visual Studio Code to write code − Using Nodejs − Use mongodb.com to create database − Use draw.io to draw UML 5.2 Set up and run the program 5.2.1 Set up and run Back-end − Access the folder: Coffee_Shop and go to the backend_api folder − Install package: npm install − Run project: npm start 5.2.2 Set up and run Front-end − Access the folder: Coffee_Shop and go to the folder frontend_cms and frontend_website − Install package: npm install − Run project: npm start 5.2.3 Program Structure Figure 5.1 Structure: Back-end 103 Chapter 5: INSTALL AND TEST Figure 5.2 Structure: Front-end: Admin - Employee Figure 5.3 Structure: Front-end: Client Figure 5.4 Structure: Mobile 104 Chapter 5: INSTALL AND TEST 5.3 Testing 5.3.1 Register Table 5.1 Testcase: Register Test Title Test Case# Step Test Test Leave Open the email, registry window REG_ password Leave email, TEST#01 or Name password, Name blank blank Click register Enter Open the email that registry window does not Enter Name and REG exist and Password but enter TEST#02 enter email does not Name and exist password Click register REG TEST#03 Enter real email and enter Name and password Open the registry window Enter the real Name and password and email Click register Data fName = “” email = “ ” password = “ ” fName = “trung phan” email = “ aaaaa@gmail.com” password = “Abc@123” Email = “phicuong99@gmail.c om” Password = “Abc@123” Expected Result Report cannot leave email, password and Name blank Report successful registration but cannot confirm the account via text message sent to email Report successful registration, customers go to email to verify email 105 Chapter 5: INSTALL AND TEST 5.3.2 Login Table 5.2 Testcase: Login Test Title Test Case# Test LOGIN TEST#01 LOGIN TEST#02 LOGIN TEST#03 LOGIN TEST#04 LOGIN TEST#05 Step Test Open the login Leave your window email or Leave your password email and blank password blank Click sign in Open the login The email window is Enter the registered correct email but but the the wrong password password is wrong Click sign in Email is Open the login not window registered Enter and unregistered email entered and wrong wrong password password The email Open the login is window registered Enter the and the registered email password and correct is correct, password but the but the account has been account is locked locked The email Open the login is window registered Data email = “ ” password = “ ” Expected Result Report cannot leave email and password blank Report failed email = login, “kaitrung99@gmail.co incorrect m” email or password = “aaaaaa” password Report failed email = login, “trungphan123@gmail incorrect com” email or password = “aaaaa” password email = “kaimap99@gmail.co m” password = “Abc@123” Report failed login, incorrect email or password email = Report “kaitrung99@gmail.co successful m” login and 106 Chapter 5: INSTALL AND TEST and the password is correct Enter the registered email and correct password password = “Abc@123” redirect to homepage 107 Chapter 6: CONCLUDE Chapter CONCLUDE 6.1 Summary Since receiving the topic and in the development process, our team has encountered many difficulties because of the desire to apply new technologies and languages to the system, even though they have not studied and learned before MERN STACK is not specialized, but it is the first step for us to improve our knowledge and experience so that we can develop more and more in creating a website product Over a while trying to research and learn, our group has created a business website with basic functions such as Admin management functions, purchase functions, shopping carts, comments, and reviews 6.2 Result After a period building a website for the coffee shop chain business, thanks to the guidance and help of Mr Le Vinh Thinh, our team has completed most of the functions and requirements originally set out Then the group will continue to build additional functionality needed in the future to meet the needs of our customers, helping them have a better experience in shopping at the website 6.3 Advantages − Developing the registration and login process of the website is relatively true to the actual business, helping the admin to manage the accounts easily − The website has a friendly interface that is easy to use − Order confirmation function allows Admin to review valid orders before confirming for delivery − Users can leave comments and reviews for products to make shopping more reliable and objective 6.4 Defect − The purchase of the website is not really close to reality − Website does not have high security 6.5 Future work − Customers can pay online by e-wallet (Momo, ZaloPay, ) − Incorporating 3rd parties (such as Now, Baemin, Gojek, ) for customers' orders 108 REFERENCES REFERENCES Vietnamese: [1] Priyesh Patel (2018), “Node.js thực gì?” , from : https://topdev.vn/blog/node-js-la-gi/ [2] Sơn Dương (2019), “Xây dựng ứng dụng web với NodeJS + ExpressJS”, from: https://vntalking.com/xay-dung-ung-dung-web-voi-nodejs-expressjs.html [3] Bách khoa toàn thư mở Wikipedia, “Node.js”, from : https://vi.wikipedia.org/wiki/Node.js English: [4] https://mongoosejs.com/docs/models.html [5] https://reactjs.org/ [6] Xtech, from: https://ant.design/components/overview/ [7] https://reactrouter.com/web/guides/quick-start 109 S K L 0 ... 3.4.1.1 Admin - Manage account Figure 3.9 Usecase admin: Manage account Table 3.1 Usecase specification: Admin - Manage account Use Case ID UC_3.4.1.1 Name Manage account Goal Allows admin to manage... 3.4.1.3 Admin - Manage branch Figure 3.11 Usecase admin: Manage branch Table 3.3 Usecase specification: Admin - Manage branch Use Case ID UC_3.4.1.3 Name Manage branch Goal Allow admin to manage... 43 Table 4.4 Database entity analysis: Branches 44 Table 4.5 Database entity analysis: Coupon code 44 xi Table 4.6 Database entity analysis: User 45 Table 4.7 Database