Luận văn xây dựng website quản lý chuỗi cửa hàng cà phê - Khoa CNTT

Luận văn xây dựng website quản lý chuỗi cửa hàng cà phê sử dụng công nghệ hiện đại như ReactJs Nodejs MongoDB. Phân tích yêu cầu hệ thống và thiết kế giao diện

• Chuyên ngành: Công nghệ Thông tin
• Đề tài: Xây dựng website cho chuỗi cửa hàng cà phê
• Loại tài liệu: Khóa luận tốt nghiệp

Tóm tắt

I. Tổng quan về xây dựng website cho chuỗi cửa hàng cà phê

Xây dựng website cho chuỗi cửa hàng cà phê là một dự án công nghệ thông tin nhằm số hóa quy trình quản lý và kinh doanh. Hệ thống sử dụng kiến trúc MERN stack bao gồm MongoDB, ExpressJs, ReactJs và NodeJs. Đây là bộ công nghệ mạnh mẽ, phù hợp cho phát triển ứng dụng web hiện đại.

Mục tiêu chính của dự án là tạo nền tảng quản lý tập trung cho chuỗi cửa hàng. Hệ thống cho phép quản lý sản phẩm, danh mục, đơn hàng, mã giảm giá và bình luận khách hàng. Ngoài ra, website còn tích hợp chatbot sử dụng công nghệ xử lý ngôn ngữ tự nhiên NLP thông qua Dialogflow.

Người dùng hệ thống được chia thành bốn nhóm chính: quản trị viên, nhân viên, khách hàng có tài khoản và khách hàng không có tài khoản. Mỗi nhóm có quyền truy cập và chức năng riêng biệt. Quản trị viên có toàn quyền quản lý hệ thống. Nhân viên quản lý đơn hàng tại chi nhánh. Khách hàng có thể đăng ký, đặt hàng và đánh giá sản phẩm.

1.1. Các công nghệ chính trong dự án website cà phê

Dự án sử dụng ReactJs cho phần giao diện người dùng Front-end. ReactJs là thư viện JavaScript do Facebook phát triển, hỗ trợ xây dựng giao diện tương tác cao với hiệu suất tối ưu. Đặc điểm nổi bật là khả năng tái sử dụng component và cập nhật DOM hiệu quả.

Phía Back-end sử dụng NodeJs kết hợp ExpressJs. NodeJs cho phép chạy JavaScript trên server, xử lý nhiều yêu cầu đồng thời. ExpressJs cung cấp framework gọn nhẹ để xây dựng API RESTful. Cơ sở dữ liệu MongoDB lưu trữ dữ liệu dạng document linh hoạt, phù hợp với cấu trúc sản phẩm và đơn hàng đa dạng của chuỗi cửa hàng cà phê.

1.2. Mục tiêu và phạm vi của luận văn xây dựng website cà phê

Luận văn đặt ra ba mục tiêu chính. Thứ nhất, phân tích yêu cầu và thiết kế hệ thống website quản lý chuỗi cửa hàng cà phê. Thứ hai, xây dựng các chức năng cốt lõi bao gồm quản lý sản phẩm, đơn hàng, nhân viên và thống kê doanh thu. Thứ ba, tích hợp chatbot hỗ trợ khách hàng tự động.

Phạm vi nghiên cứu tập trung vào website cho chuỗi cửa hàng cà phê. Hệ thống bao gồm trang quản trị cho admin và nhân viên, cùng giao diện mua hàng cho khách hàng. Kết quả đạt được là sản phẩm prototype hoạt động hoàn chỉnh, thể hiện được quy trình quản lý từ đặt hàng đến thống kê doanh thu theo từng chi nhánh.

II. Phân tích yêu cầu và khảo sát thực trạng website cà phê

Trước khi thiết kế hệ thống, nhóm nghiên cứu tiến hành khảo sát thực trạng website của các chuỗi cà phê lớn tại Việt Nam. Các thương hiệu được khảo sát bao gồm The Coffee House, Highland Coffee, Trung Nguyên Legend và Starbucks. Mỗi hệ thống có ưu điểm và hạn chế riêng về chức năng quản lý và trải nghiệm người dùng.

Kết quả khảo sát cho thấy website chuỗi cà phê cần đáp ứng nhiều yêu cầu. Hệ thống phải quản lý được nhiều chi nhánh cùng lúc. Mỗi chi nhánh có kho sản phẩm và đơn hàng riêng biệt. Khách hàng cần trải nghiệm mua hàng trực tuyến thuận tiện. Quản trị viên cần công cụ thống kê doanh thu chi tiết.

Phân tích yêu cầu xác định bốn nhóm người dùng chính. Nhóm quản trị viên có quyền cao nhất, quản lý toàn bộ hệ thống. Nhóm nhân viên quản lý đơn hàng tại chi nhánh được phân công. Nhóm khách hàng có tài khoản được phép đặt hàng, đánh giá và bình luận. Nhóm khách hàng không có tài khoản chỉ có thể xem sản phẩm và đặt hàng nhanh.

2.1. Khảo sát thực trạng website chuỗi cà phê tại Việt Nam

Nhóm nghiên cứu phân tích website của bốn chuỗi cà phê hàng đầu. The Coffee House sở hữu giao diện hiện đại, chức năng đặt hàng trực tuyến tiện lợi. Hệ thống quản lý đơn hàng và giao hàng được tối ưu hóa tốt. Highland Coffee tập trung vào trải nghiệm khách hàng với menu đa dạng.

Trung Nguyên Legend nhấn mạnh thương hiệu và câu chuyện sản phẩm trên website. Starbucks cung cấp ứng dụng di động mạnh mẽ với chương trình thành viên. Tuy nhiên, hầu hết các hệ thống này đều có chi phí phát triển cao và khó tùy chỉnh. Điều này đặt ra nhu cầu xây dựng giải pháp mở, dễ bảo trì và phù hợp với quy mô vừa và nhỏ.

2.2. Phân tích nhóm người dùng và chức năng hệ thống cà phê

Hệ thống xác định bốn nhóm người dùng với quyền hạn khác nhau. Quản trị viên có toàn quyền truy cập hệ thống. Chức năng bao gồm quản lý danh mục, sản phẩm, nhân viên, bình luận, mã giảm giá, đơn hàng và xem thống kê doanh thu. Admin còn có quyền khóa tài khoản người dùng vi phạm.

Nhân viên được phân công tại chi nhánh cụ thể. Nhân viên quản lý đơn hàng tại chi nhánh, xác nhận đơn hàng và xem thống kê bán hàng. Khách hàng có tài khoản được phép đăng nhập, đặt hàng, sử dụng mã giảm giá và đánh giá sản phẩm. Khách hàng không có tài khoản chỉ có thể duyệt sản phẩm và đặt hàng nhanh.

III. Giải pháp thiết kế và phát triển hệ thống website cà phê

Giải pháp thiết kế hệ thống dựa trên kiến trúc client-server với công nghệ MERN stack. Front-end sử dụng ReactJs xây dựng giao diện tương tác. Back-end sử dụng NodeJs và ExpressJs tạo API RESTful xử lý nghiệp vụ. Cơ sở dữ liệu MongoDB lưu trữ toàn bộ dữ liệu hệ thống.

Thiết kế cơ sở dữ liệu bao gồm bảy thực thể chính: Categories, Product, Order, Branches, Coupon code, User và Comments. Mỗi thực thể có thuộc tính và mối quan hệ rõ ràng. Sản phẩm thuộc danh mục cụ thể. Đơn hàng liên kết với khách hàng và chi nhánh. Bình luận gắn liền với sản phẩm và người dùng.

Hệ thống tích hợp chatbot sử dụng công nghệ xử lý ngôn ngữ tự nhiên NLP thông qua Dialogflow. Chatbot hỗ trợ khách hàng tìm kiếm thông tin, tư vấn sản phẩm và giải đáp thắc mắc. Giao diện quản trị CMS được thiết kế riêng cho admin và nhân viên với các trang quản lý danh mục, sản phẩm, tài khoản, bình luận và thống kê doanh thu.

3.1. Thiết kế cơ sở dữ liệu và mô hình hóa hệ thống cà phê

Cơ sở dữ liệu MongoDB lưu trữ dữ liệu dạng document. Thực thể Categories quản lý danh mục sản phẩm như cà phê, trà, bánh ngọt. Thực thể Product chứa thông tin chi tiết sản phẩm bao gồm tên, giá, hình ảnh và mô tả. Mỗi sản phẩm thuộc một danh mục cụ thể.

Thực thể Order lưu trữ thông tin đơn hàng với trạng thái xử lý. Thực thể Branches quản lý thông tin các chi nhánh trong chuỗi. Thực thể User lưu trữ tài khoản của admin, nhân viên và khách hàng. Thực thể Coupon code quản lý mã giảm giá. Mô hình hóa Use Case được xây dựng chi tiết cho từng nhóm người dùng.

3.2. Phát triển giao diện và tích hợp chatbot NLP cho website cà phê

Giao diện website được thiết kế cho cả desktop và mobile. Trang quản trị bao gồm thanh điều hướng, trang tổng quan thống kê và các trang quản lý chức năng. Dashboard hiển thị biểu đồ doanh thu và số lượng đơn hàng theo thời gian thực.

Giao diện khách hàng tập trung vào trải nghiệm mua hàng. Khách hàng duyệt danh mục, xem chi tiết sản phẩm, thêm vào giỏ hàng và thanh toán. Chatbot tích hợp Dialogflow sử dụng công nghệ NLP để hiểu ngôn ngữ tự nhiên. Khách hàng hỏi về menu, giá cả và khuyến mãi. Chatbot phản hồi tự động, giảm tải cho đội ngũ chăm sóc khách hàng.

IV. Kết luận và ứng dụng thực tiễn của website chuỗi cà phê

Dự án xây dựng website cho chuỗi cửa hàng cà phê đã hoàn thành các mục tiêu đề ra. Hệ thống quản lý hoạt động hiệu quả với kiến trúc MERN stack hiện đại. Các chức năng quản lý sản phẩm, đơn hàng, nhân viên và thống kê doanh thu hoạt động ổn định.

Hệ thống đáp ứng được nhu cầu quản lý đa chi nhánh. Mỗi chi nhánh có kho hàng và đơn hàng riêng biệt. Quản trị viên có cái nhìn tổng quan về doanh thu toàn chuỗi. Nhân viên thao tác dễ dàng với giao diện trực quan.

Tích hợp chatbot NLP nâng cao trải nghiệm khách hàng. Khách hàng nhận được hỗ trợ tức thì mà không cần chờ đợi nhân viên. Hệ thống còn hỗ trợ quản lý mã giảm giá và chương trình khuyến mãi hiệu quả.

Ứng dụng thực tiễn của dự án rất rộng rãi. Hệ thống có thể áp dụng cho chuỗi cà phê, nhà hàng hoặc chuỗi cửa hàng bán lẻ. Công nghệ sử dụng dễ mở rộng và bảo trì. Chi phí triển khai hợp lý cho doanh nghiệp vừa và nhỏ.

4.1. Ưu điểm và hạn chế của hệ thống website chuỗi cà phê

Hệ thống có nhiều ưu điểm nổi bật. Kiến trúc MERN stack cho phép phát triển nhanh và dễ bảo trì. MongoDB lưu trữ dữ liệu linh hoạt, phù hợp với cấu trúc sản phẩm đa dạng. Giao diện ReactJs mượt mà, mang lại trải nghiệm người dùng tốt.

Tích hợp chatbot NLP là điểm mạnh khác biệt so với website truyền thống. Khách hàng được hỗ trợ tự động 24/7. Hệ thống quản lý đa chi nhánh giúp kiểm soát kinh doanh hiệu quả. Tuy nhiên, hệ thống còn hạn chế ở phần thanh toán trực tuyến chưa tích hợp sâu. Bảo mật cần nâng cao cho môi trường thương mại thực tế.

4.2. Hướng phát triển và ứng dụng mở rộng của dự án website cà phê

Dự án có nhiều hướng phát triển tiềm năng. Thứ nhất, tích hợp cổng thanh toán trực tuyến như VNPay, MoMo để hoàn thiện quy trình mua hàng. Thứ hai, phát triển ứng dụng di động song song với website để tăng trải nghiệm người dùng.

Thứ ba, áp dụng trí tuệ nhân tạo AI để phân tích hành vi khách hàng và đề xuất sản phẩm cá nhân hóa. Thứ tư, mở rộng chức năng quản lý kho hàng và chuỗi cung ứng. Thứ năm, tích hợp hệ thống giao hàng và theo dõi đơn hàng thời gian thực. Hệ thống có thể trở thành nền tảng quản lý đa ngành với khả năng tùy chỉnh linh hoạt.

Trích đoạn nội dung tài liệu

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 .vi TABLE OF CONTENT. viii LIST OF TABLE.xi LIST OF PICTURES. Reason for choosing the topic.

Purpose and tasks performed. Expected results achieved. What is ReactJs?. Highlights of ReactJs.

What is Nodejs ?. Highlights of Nodejs. Benefits of using Nodejs. What is ExpressJs?.

The function of ExpressJs. Benefits of using ExpressJs. What is MongoDB?. Why use MongoDB ?.

About Natural Language Processing. What is Natural Language Processing?. Application of Natural Language Processing in chatbot building. Technologies used – Dialogflow.

7 DETERMINATION OF REQUIREMENTS AND SYSTEM MODELING. Current status survey. Use Case Diagram. Customers have account.

Customers have no account. 40 SYSTEM ANALYSIS AND DESIGN. Analysis of entities. Website interface design.

Admin - Employee page (CMS Page). Mobile interface design. 103 INSTALL AND TEST. Set up and run the program.

Set up and run Back-end. Set up and run Front-end. 109 x LIST OF TABLES Table 3. Usecase specification: Admin - Manage account.

Usecase specification: Admin - Manage employee. Usecase specification: Admin - Manage branch. Usecase specification: Admin - Manage category. Usecase specification: Admin - Manage product.

Usecase specification: Admin – Manage comment. Usecase specification: Admin – Manage order. Usecase specification: Admin – Manage coupon code. Usecase specification: Admin – View stats.

Usecase specification: Admin – Login. Usecase specification: Admin – Logout. Usecase specification: Employee - Manage branch. Usecase specification: Employee – Manage order.

Usecase specification: Employee – Manage coupon code. Usecase specification: Employee – View stats. Usecase specification: Employee – Login. Usecase specification: Employee – Logout.

Describe usecase: Customers have account - Login. Describe usecase: Customers have account - Logout. Describe usecase: Customers have account – Rating and comment. Describe usecase: Customers have account - Order.

Describe usecase: Customers have no account - Register. Describe usecase: Customers have no account - Order. Database entity analysis: Categories. Database entity analysis: Product.

Database entity analysis: Order. Database entity analysis: Branches. Database entity analysis: Coupon code. Database entity analysis: User.

Database entity analysis: Comments. Describe: Login page for store members. Describe: Dashboard page - statistics. Describe: Admin page - Navigation bar.

Describe: Category management page. Describe: The window of creating a new category product. Describe: The window of editing category product. Describe: Product management page.

Describe: The window of creating a new product. Describe: The window of update product. Describe: Account management page. Describe: Comments management page.

Describe: Employee management page. Describe: The window of creating employee. Describe: Coupon code management page. Describe: The window of creating coupon code.

Describe: Branch management page. Describe: The window of branches management. Describe: The window of creating a new branch. Describe: The window of adding new products for the branch.

Describe: Order management page. Describe: The window of order detail. Describe: Password change page. Describe: Coupon code management page for employee.

Describe: Home page. Describe: The window of login. Describe: The window of register. Describe: Introduction page.

Describe: Profile page. Describe: Password change page for the customer. Describe: Product page. Describe: Product details page - reviews.

Describe: Product details page – rating and comment. Describe: Coupon code page. Describe: Order history page. Describe: Shopping cart page.

Describe: The window of entering information and payment. Describe: Mobile - Login screen. Describe: Mobile - Registration screen. Describe: Mobile - Chatbot screen.

Describe: Mobile - Profile screen. Describe: Mobile - Profile update screen. Describe: Mobile - Home screen. Describe: Mobile – Shopping cart (empty).

Describe: Mobile - Reviews. Describe: Mobile - Rating and comment. Describe: Mobile - Order summary screen. Describe: Mobile - Payment screen.

Describe: Mobile - Payment method screen. 106 xiii LIST OF PICTURES Figure 3. Current status survey: The Coffee House. Current status survey: Highland Coffee.

Current status survey: Trung Nguyen Legend. Current status survey: Starbucks. Use Case Diagram 1 - Store management. Use Case Diagram 2 - Customer.

Usecase admin: Manage account. Usecase admin: Manage employee. Usecase admin: Manage branch. Usecase admin: Manage category.

Usecase admin: Manage product. Usecase admin: Manage comment. Usecase admin: Manage order. Usecase admin: Manage coupon code.

Usecase admin: View stats. Usecase admin: Login. Usecase admin: Logout. Usecase employee: Manage branch.

Usecase employee: Manage order. Usecase employee: Manage coupon code. Usecase employee: View stats. Usecase employee: Login.

Usecase employee: Logout. Usecase: Customers have account. Usecase customers have account: Login. Usecase customers have account: Logout.

Usecase customers have account: Rating and comment. Usecase customers have account: Order. Usecase: Customers have no account. Usecase customers have no account: Register.

Usecase customers have no account: Order. Login page for store members. Dashboard page - Statistics. Admin page: Navigation bar.

Category management page. The window of creating a new category product. The window of editing category product. Product management page.

The window of creating a new product. The window of update product. Account management page. Comments management page.

Employee management page. The window of creating employee. Coupon code management page. The window of creating coupon code.

Branch management page. The window of branches management. The window of creating a new branch. The window of adding new products for the branch.

Order management page. The window of order detail. Password change page. Coupon code management page for employee.

The window of login. The window of register. Password change page for the customer. Product details page – reviews.

Product details page – rating and comment. Coupon code page. Order history page. Shopping cart page.

The window of entering customer information. The window of payment. Mobile - Login screen. Mobile - Registration screen.

Mobile - Chatbot screen. Mobile - Profile screen. Mobile - Profile update screen. Mobile - Home screen.

Mobile – Shopping cart (empty). Mobile - Rating and comment. Mobile - Order summary screen. Mobile - Payment screen.

Mobile - Payment method screen. Mobile - Thank you screen. Sequence: Category management. Sequence: Product management.

Sequence: Confirm Order. Sequence: Create Order. Sequence: Rating and comment. Structure: Back-end.

Structure: Front-end: Admin - Employee. Structure: Front-end: Client. 104 xvii Chapter 1: OVERVIEW Chapter 1. Reason for choosing the topic To optimize the sales of coffee shops, a coffee business website was created to bring the store's products closer to customers via the internet.

The website also makes it convenient for customers to place orders at home without going to the store. Customers can also rate and comment through the website so that the store can receive comments and grow more and more. Purpose and tasks performed 1. Purpose Learn more about frameworks and libraries (NodeJs and ReactJs) in today's new software technology, to cultivate knowledge for web programming skills as well as their skills.

Tasks − Learn React, NodeJS, and Mongodb through online documentation and knowledge from internships. − Find the style and do the actual business of the website. − Develop websites based on popular coffee selling websites on the Internet. Research Methods In the process of researching, our team has researched and learned the manuals on the pages that teach MERN stack courses as Nodejs and ReactJs.

In addition, we read more documents provided from the process of internship at the company about website outsourcing. Expected results achieved Successfully built a coffee shop chain business website with database using Mongodb, backend using NodeJs and frontend using ReactJs. 1 Chapter 2: THEORETICAL BASIS Chapter 2. What is ReactJs? React is the most popular JavaScript library for building user interfaces (UIs).

It gives excellent response speed when users input using a new method of rendering web pages. The components of this tool are developed by Facebook. It was launched as an open-source JavaScript engine in 2013. Now, it is ahead of major competitors like Angular and Bootstrap, the two best-selling JavaScript libraries of the time.

In this article, we'll help you understand what React is and the benefits it brings to work as a front-end developer. Highlights of ReactJs − Suitable for developing complex UIs on web as well as mobile. − Use virtual DOM instead of real DOM. − Easily integrated with other JavaScript frameworks.

− Scalable and fast. About JXS JSX stands for JavaScript XML. This is an extended syntax of JavaScript. We can use JSX to render UI components.

We can embed any JavaScript expression by encapsulating them in curly braces. After editing and compiling, JSX expressions can become regular JavaScript objects. This means we can use JSX in If statements and loops, treat JSX as an argument, assign it to variables and return it from functions. ReactJS uses this file to make HTML code easier to read and write.

In addition, JSX can increase the performance of the application or website. Components In React, components behave like functions that return HTML components. Components are self-contained and reusable components. They also do the same job as functions in JavaScript but they are independent and the main task is to return HTML through the render function.

There are two types of components: Function Component and Class Component. 2 Chapter 2: THEORETICAL BASIS 2. Props Props is an acronym for Properties and is an attribute that can be added when using components. These attributes are invoked in components using these props and can be used in the render method to render dynamic data.

Props can also be used to pass data to other components. These data are moving in a single direction (unidirectional flow), that is the direction from the parent to the child element. State State is an object that can be used to hold data or information about components. State can be changed whenever desired.

Unlike props, we can pass props to different components, state only exists in the scope of the component containing it, every time the state changes, the component will be re-rendered. What is NodeJs? Node.js is a platform that runs on the V8 JavaScript runtime - an ultrafast JavaScript interpreter that runs on the Chrome browser. Normally you could just download the V8 and embed it in anything; Node.js does it for web servers. JavaScript is just a language after all - so there's no reason to say it can't be used on a server environment as well as in the user's browser.

Highlights of NodeJs Asynchronous: All NodeJS APIs are asynchronous (none-blocking), it is mainly based on NodeJS Server and waits for Server to return data. Moving the server to the next API after the calling and notification mechanism of Node.js events help the server to get a response from the previous API call (Realtime). Run fastly: NodeJs is based on the V8 JavaScript Engine platform so The program is executed quickly. Single-threaded but highly extensible: Node.js uses a single-threaded model with recurring events.

The event mechanism helps the server respond in a non-blocking manner and makes the server highly scalable as opposed to traditional servers which create limited threads to handle requests.