Xây dựng Website bán hàng với React, ExpressJS và quy chuẩn JWT

Hướng dẫn xây dựng website bán hàng chuyên nghiệp sử dụng React, ExpressJS và JWT. Tìm hiểu quy trình, cấu trúc và cách triển khai hệ thống xác thực bảo mật.

• Tác giả: Phạm Võ Di Thiên
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Trường Đại học Công Nghệ Thông Tin
• Chuyên ngành: Công nghệ phần mềm
• Đề tài: Xây dựng Website bán hàng với React-ExpressJS và quy chuẩn JWT
• Loại tài liệu: Báo cáo đồ án 1
• Năm xuất bản: 2022
• Địa điểm: Tp. HCM

Mục lục chi tiết

• LỜI CẢM ƠN
• 1. Chương 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Mô tả Website
• 1.2. Lý do chọn thiết kế Website
• 1.3. Sơ đồ sitemap của Website
• 1.4. Công nghệ sử dụng
• 1.5. Môi trường thiết kế
• 1.6. Công cụ hỗ trợ
• 2. Chương 2: CƠ SỞ LÝ THUYẾT
• 2.1. Lập trình Javascript
• 2.2. Đặc điểm nổi bật của Javascript
• 2.3. Sequelize connected PostgreSQL
• 3. Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
• 3.1. Sơ đồ thực thể ERD
• 3.2. Bảng Product Image
• 3.3. Bảng Invoice Item
• 3.4. Bảng Patron Discount
• 3.5. Sơ đồ liên kết màn hình
• 3.6. Sơ đồ phân rã chức năng
• 3.7. Đặc tả Use-case
• 3.7.1. Quên mật khẩu
• 3.7.2. Chỉnh sửa hàng hóa
• 3.7.3. Cập nhật thông tin cá nhân
• 3.7.4. Bình luận hàng hóa
• 3.7.5. Thêm, sửa, xóa nhân viên
• 3.7.6. Xem doanh thu
• 3.7.7. Nhập hóa đơn, bán hàng trực tiếp tại chi nhánh
• 3.7.8. Duyệt và kiểm tra thanh toán của đơn hàng online
• 3.7.9. Phân tích dữ liệu hàng hóa
• 3.7.10. Thêm hàng hóa vào giỏ hàng, yêu thích
• 3.7.11. Đưa hàng hóa từ yêu thích sang giỏ hàng
• 3.7.12. Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng
• 3.8. Sơ đồ kiến trúc hệ thống
• 3.9. Cập nhật thông tin cá nhân. Bình luận sản phẩm
• 3.10. Xem chi tiết hàng hóa
• 3.11. Thêm vào giỏ hàng. Thêm vào yêu thích
• 3.12. Tăng giảm số lượng hàng hóa
• 3.13. Kiểm tra hóa đơn đã hoàn thành
• 3.14. Cập nhật hàng hóa. Thêm nhân viên
• 3.15. Đổi mật khẩu
• 4. Chương 4: XÂY DỰNG WEBSITE
• 4.1. Sign In Page
• 4.2. Sign Up Page
• 4.3. Guest Cart Page
• 4.4. Display Product Page
• 4.5. Detail Product Page
• 4.6. Product Manager Page
• 4.7. Staff Manager Page
• 4.8. Add Product Page
• 4.9. Edit Product Page
• 4.10. Stock Manager Page
• 4.11. Add Stock Modal
• 4.12. Data Analysis Page
• 4.13. Detail Product Modal
• 4.14. Add Manager Page
• 4.15. My Place Page
• 4.16. My Cart Page
• 4.17. My Order Page
• 4.18. My Favorite Page
• 4.19. Pre-Access To Profile Page
• 4.20. Checkout Now Page
• 5. Chương 5: KẾT LUẬN
• 5.1. Về giao diện
• 5.2. Về chức năng (khả năng ứng dụng thực tế)
• 5.3. Hạn chế của đồ án:
• 5.4. Hướng phát triển của đồ án:
• TÀI LIỆU THAM KHẢO
• MỤC LỤC HÌNH ẢNH
• DANH MỤC BẢNG BIỂU

Tóm tắt

I. Web bán hàng React Express JWT Tổng quan và lợi ích

Trong bối cảnh thương mại điện tử ngày càng phát triển, việc xây dựng một web bán hàng hiệu quả, bảo mật và dễ dàng mở rộng là vô cùng quan trọng. Sự kết hợp giữa Reactjs cho giao diện người dùng, Expressjs cho backend và JSON Web Token (JWT) cho xác thực và ủy quyền mang đến một giải pháp mạnh mẽ. Reactjs giúp xây dựng giao diện frontend development tương tác cao, trong khi Expressjs cung cấp một framework linh hoạt cho backend development và xây dựng REST API. JWT đảm bảo bảo mật web bằng cách xác thực và ủy quyền người dùng thông qua token-based authentication. Sự kết hợp này, thường được thấy trong MERN stack (MongoDB, Express.js, React.js, Node.js), cho phép xây dựng các ứng dụng full-stack development hoàn chỉnh, đáp ứng nhu cầu ngày càng cao của người dùng và doanh nghiệp. Theo báo cáo từ [tên nguồn], các doanh nghiệp sử dụng framework hiện đại như MERN stack có thể giảm thời gian phát triển ứng dụng trung bình [số]% so với các phương pháp truyền thống.

1.1. Giới thiệu Reactjs Lựa chọn hàng đầu cho Frontend

Reactjs là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, chuyên dùng để xây dựng giao diện người dùng tương tác. Ưu điểm nổi bật của Reactjs là khả năng tái sử dụng component, giúp giảm thiểu code và tăng tốc độ phát triển. React hooks và Context API cung cấp các công cụ mạnh mẽ để quản lý state và logic trong ứng dụng. Ngoài ra, Reactjs còn có cộng đồng lớn mạnh và hệ sinh thái phong phú, với nhiều thư viện và công cụ hỗ trợ, giúp các nhà phát triển dễ dàng tìm kiếm giải pháp cho các vấn đề gặp phải. Thư viện Redux là một trong những state management libraries được ưa chuộng khi phát triển ứng dụng lớn với Reactjs. Theo [tên nguồn], Reactjs là một trong những Javascript Libraries phổ biến nhất.

1.2. Vai trò của Expressjs trong phát triển Backend bảo mật

Expressjs là một framework Node.js tối giản và linh hoạt, được sử dụng rộng rãi để xây dựng các ứng dụng web và API. Với Expressjs, việc định tuyến (routing), xử lý request/response và quản lý middleware (Express) trở nên dễ dàng hơn bao giờ hết. Expressjs hỗ trợ xây dựng REST API chuẩn, cho phép frontend development và backend development hoạt động độc lập. Khả năng tích hợp với nhiều loại database, như MongoDB và PostgreSQL, cùng với các thư viện như Passport.js cho Authentication (Xác thực), biến Expressjs thành một lựa chọn lý tưởng cho backend development của các web bán hàng.

1.3. Tại sao JSON Web Token JWT quan trọng cho bảo mật

JSON Web Token (JWT) là một tiêu chuẩn mở để truyền tải thông tin một cách an toàn giữa các bên dưới dạng đối tượng JSON. JWT thường được sử dụng cho Authentication (Xác thực) và Authorization (Ủy quyền) trong các ứng dụng web. Khi người dùng đăng nhập thành công, server sẽ tạo ra một token chứa thông tin về người dùng và ký bằng một khóa bí mật. Token này sau đó được gửi về client và được sử dụng để xác thực các request tiếp theo. Token-based authentication giúp giảm tải cho server, cải thiện khả năng mở rộng và API security. Phương pháp này giúp chống lại các cuộc tấn công phổ biến như Cross-Site Scripting (XSS) bằng cách không lưu trữ thông tin phiên trên server.

II. Thách thức Giải pháp khi xây dựng Web bán hàng MERN

Xây dựng web bán hàng bằng MERN stack (MongoDB, Express.js, React.js, Node.js) mang lại nhiều lợi ích, nhưng cũng đi kèm với những thách thức nhất định. Một trong những thách thức lớn nhất là đảm bảo bảo mật web, đặc biệt là trong quá trình Authentication (Xác thực) và Authorization (Ủy quyền). Ngoài ra, việc quản lý state phức tạp ở frontend development và tối ưu hóa performance optimization cũng là những vấn đề cần được giải quyết. Để vượt qua những thách thức này, việc áp dụng các Web security best practices, sử dụng các thư viện và công cụ hỗ trợ, và thực hiện Testing (Unit testing, Integration testing) kỹ lưỡng là vô cùng quan trọng. Việc sử dụng HTTPS và xử lý CORS (Cross-Origin Resource Sharing) đúng cách cũng giúp tăng cường bảo mật web.

2.1. Đối mặt với bài toán bảo mật API JWT và giải pháp khác

Bảo mật API security là một yếu tố then chốt trong xây dựng web bán hàng. JWT cung cấp một giải pháp hiệu quả để xác thực và ủy quyền người dùng, nhưng cũng cần được sử dụng đúng cách để tránh các lỗ hổng bảo mật. Một số giải pháp khác có thể được sử dụng để tăng cường API security bao gồm sử dụng OAuth cho ủy quyền bên thứ ba, triển khai Single Sign-On (SSO), và áp dụng các biện pháp chống tấn công CSRF (Cross-Site Request Forgery). Việc sử dụng middleware (Express) để xác thực token và kiểm tra quyền truy cập cũng là một phần quan trọng của việc bảo mật API design.

2.2. Quản lý State hiệu quả trong React với Redux hoặc Context

Trong các ứng dụng Reactjs lớn, việc quản lý state có thể trở nên phức tạp. Redux (hoặc các state management library khác) cung cấp một giải pháp quản lý state tập trung, giúp dễ dàng theo dõi và kiểm soát dữ liệu trong ứng dụng. Context API là một lựa chọn nhẹ nhàng hơn cho các ứng dụng nhỏ và vừa. Việc lựa chọn công cụ quản lý state phù hợp phụ thuộc vào quy mô và độ phức tạp của ứng dụng. Khi lựa chọn, cần cân nhắc đến yếu tố dễ bảo trì, dễ test và khả năng mở rộng.

2.3. Tối ưu hiệu năng web React Express cho trải nghiệm người dùng

Performance optimization là yếu tố quan trọng để đảm bảo trải nghiệm người dùng tốt. Một số kỹ thuật tối ưu hiệu năng bao gồm lazy loading hình ảnh, code splitting, caching, và sử dụng CDN (Content Delivery Network). Ở phía backend, việc tối ưu truy vấn database, sử dụng các thuật toán hiệu quả, và triển khai caching cũng giúp cải thiện scalability và giảm thời gian phản hồi. Sử dụng các công cụ profiling để xác định bottleneck và tối ưu hóa là điều cần thiết. Ngoài ra, việc lựa chọn Web server (Nginx, Apache) phù hợp và cấu hình hợp lý cũng góp phần tăng hiệu năng cho ứng dụng.

III. Hướng dẫn xây dựng API bảo mật bằng Expressjs và JWT

Để xây dựng một API security cho web bán hàng sử dụng Expressjs và JWT, cần tuân thủ các bước sau: Thiết kế API design rõ ràng và tuân thủ các nguyên tắc REST API. Cài đặt và cấu hình Expressjs để xử lý các request. Sử dụng một thư viện JWT để tạo, xác thực và giải mã token. Triển khai middleware (Express) để xác thực token trong các request đến các endpoint được bảo vệ. Áp dụng các biện pháp chống tấn công CSRF và XSS. Sử dụng HTTPS để mã hóa dữ liệu truyền tải. Cần nhớ rằng bảo mật là một quá trình liên tục, cần được theo dõi và cải thiện thường xuyên.

3.1. Thiết kế API RESTful cho Web bán hàng hiệu quả

API design đóng vai trò quan trọng trong việc xây dựng một web bán hàng có khả năng mở rộng và bảo trì tốt. Việc tuân thủ các nguyên tắc REST API giúp tạo ra các endpoint dễ hiểu, dễ sử dụng và dễ tích hợp. Một số nguyên tắc REST API quan trọng bao gồm sử dụng các method HTTP (GET, POST, PUT, DELETE) đúng cách, sử dụng mã trạng thái HTTP để thông báo kết quả, và sử dụng JSON cho định dạng dữ liệu. Database design cũng ảnh hưởng đến hiệu năng và khả năng mở rộng của API.

3.2. Triển khai Authentication và Authorization với JWT

Authentication (Xác thực) và Authorization (Ủy quyền) là hai yếu tố quan trọng của bảo mật web. JWT cung cấp một giải pháp đơn giản và hiệu quả để triển khai cả hai. Khi người dùng đăng nhập, server sẽ tạo ra một token chứa thông tin về người dùng và vai trò của họ. Middleware (Express) sẽ xác thực token và kiểm tra xem người dùng có quyền truy cập vào endpoint được yêu cầu hay không. Passport.js là một thư viện phổ biến giúp đơn giản hóa quá trình xác thực.

3.3. Sử dụng Middleware để bảo vệ API khỏi tấn công phổ biến

Middleware (Express) là các hàm được thực thi trước khi route handler được gọi. Middleware (Express) có thể được sử dụng để thực hiện nhiều tác vụ khác nhau, bao gồm xác thực token, kiểm tra quyền truy cập, ghi log, và xử lý lỗi. Việc sử dụng middleware (Express) để bảo vệ API security khỏi các cuộc tấn công phổ biến như CSRF và XSS là một Web security best practices quan trọng. CORS middleware cũng giúp kiểm soát quyền truy cập từ các domain khác.

IV. Triển khai và Bảo trì Web bán hàng React Express JWT

Sau khi xây dựng xong web bán hàng, việc triển khai và bảo trì là vô cùng quan trọng để đảm bảo ứng dụng hoạt động ổn định và an toàn. Việc lựa chọn Cloud hosting (AWS, Google Cloud, Azure) phù hợp, cấu hình Web server (Nginx, Apache), và thiết lập CI/CD (Continuous Integration/Continuous Deployment) giúp tự động hóa quá trình triển khai và giảm thiểu lỗi. Việc theo dõi hiệu năng, thực hiện Testing (Unit testing, Integration testing) thường xuyên, và cập nhật các bản vá bảo mật cũng là những hoạt động bảo trì quan trọng. Sử dụng các công cụ như Docker và Kubernetes có thể đơn giản hóa việc triển khai và quản lý ứng dụng.

4.1. Lựa chọn Cloud Hosting phù hợp cho ứng dụng React Express

Cloud hosting (AWS, Google Cloud, Azure) cung cấp nhiều lựa chọn khác nhau cho việc triển khai ứng dụng Reactjs và Expressjs. Mỗi nhà cung cấp có những ưu điểm và nhược điểm riêng, vì vậy việc lựa chọn Cloud hosting (AWS, Google Cloud, Azure) phù hợp phụ thuộc vào yêu cầu cụ thể của ứng dụng. Một số yếu tố cần xem xét bao gồm giá cả, khả năng mở rộng, độ tin cậy, và các dịch vụ hỗ trợ.

4.2. Tự động hóa quy trình Deployment với CI CD Continuous Integration Continuous Deployment

CI/CD (Continuous Integration/Continuous Deployment) giúp tự động hóa quá trình build, test, và triển khai ứng dụng. Việc sử dụng CI/CD (Continuous Integration/Continuous Deployment) giúp giảm thiểu lỗi, tăng tốc độ phát triển, và đảm bảo ứng dụng luôn ở trạng thái sẵn sàng triển khai. Một số công cụ CI/CD (Continuous Integration/Continuous Deployment) phổ biến bao gồm Jenkins, CircleCI, và Travis CI.

4.3. Giám sát và bảo trì Web bán hàng để đảm bảo an toàn

Giám sát và bảo trì là một phần quan trọng của việc đảm bảo ứng dụng hoạt động ổn định và an toàn. Việc theo dõi hiệu năng, kiểm tra lỗi, và cập nhật các bản vá bảo mật giúp phát hiện và giải quyết các vấn đề kịp thời. Sử dụng các công cụ giám sát như New Relic và Datadog giúp theo dõi hiệu năng ứng dụng và phát hiện các vấn đề tiềm ẩn.

V. Ứng dụng thực tế Nghiên cứu xây dựng Web bán hàng

Nghiên cứu trường hợp và các ví dụ thực tế minh họa cho các nguyên tắc, các phương pháp và kỹ thuật discussed ở trên. Phân tích các kiến trúc dự án khác nhau và các quyết định công nghệ, đánh giá sự đánh đổi liên quan đến khả năng bảo mật, khả năng mở rộng và khả năng bảo trì.

5.1. Case study 1 Website ComeBuy ứng dụng React Express và JWT

Website ComeBuy xây dựng bằng React JS và các thư viện hỗ trợ, kĩ thuật hỗ trợ khác, nhằm đáp ứng việc mang lại một thiết kế dễ dùng, hợp thị hiếu, thu hút người dùng và độ bảo mật tốt. ReactJS được dùng để để xây dựng các tương tác với các thành phần trên website và Expressjs được sử dụng để nâng cao các chức năng của Node. JWT giúp đảm bảo bảo mật web bằng cách xác thực và ủy quyền người dùng thông qua token-based authentication.

5.2. Case study 2 Xây dựng hệ thống khuyến nghị sản phẩm bằng Python

Hệ thống khuyến nghị sản phẩm được xây dựng bằng code Python. Tiến hành code hệ thống khuyến nghị và đưa vào trang web để hỗ trợ khách hàng. Thao tác này được thực hiện sau khi khách hàng đã có lịch sử mua sắm nhất định trên website.

VI. Tương lai phát triển của Web bán hàng React Express JWT

Với sự phát triển không ngừng của công nghệ, tương lai của web bán hàng sử dụng Reactjs, Expressjs, và JWT hứa hẹn nhiều điều thú vị. Việc tích hợp các công nghệ mới như AI (Artificial Intelligence) và Machine Learning, blockchain, và thực tế ảo (VR/AR) sẽ mang đến những trải nghiệm mua sắm cá nhân hóa, an toàn và hấp dẫn hơn. Ngoài ra, việc tối ưu hóa performance optimization, tăng cường bảo mật web, và áp dụng các Web security best practices sẽ tiếp tục là những ưu tiên hàng đầu. Sự phát triển của các công cụ Full-stack Development và CI/CD (Continuous Integration/Continuous Deployment) cũng sẽ giúp các nhà phát triển xây dựng và triển khai web bán hàng nhanh chóng và dễ dàng hơn.

6.1. Xu hướng tích hợp AI Artificial Intelligence vào E commerce

AI (Artificial Intelligence) đang dần trở thành một phần không thể thiếu của thương mại điện tử. AI (Artificial Intelligence) có thể được sử dụng để cá nhân hóa trải nghiệm mua sắm, dự đoán nhu cầu của khách hàng, tối ưu hóa giá cả, và phát hiện gian lận. Việc tích hợp AI (Artificial Intelligence) vào web bán hàng giúp tăng doanh số, cải thiện sự hài lòng của khách hàng, và giảm chi phí.

6.2. Bảo mật nâng cao với Blockchain trong thanh toán và quản lý chuỗi cung ứng

Blockchain là một công nghệ sổ cái phân tán, cho phép ghi lại các giao dịch một cách an toàn và minh bạch. Blockchain có thể được sử dụng để cải thiện bảo mật web trong thanh toán, quản lý chuỗi cung ứng, và xác thực sản phẩm. Việc sử dụng blockchain giúp giảm thiểu rủi ro gian lận, tăng tính minh bạch, và xây dựng lòng tin với khách hàng.

6.3. Thực tế ảo VR AR tái định nghĩa trải nghiệm mua sắm online

Thực tế ảo (VR/AR) và thực tế tăng cường (AR) mang đến những trải nghiệm mua sắm sống động và chân thực hơn bao giờ hết. Khách hàng có thể thử sản phẩm ảo, xem sản phẩm trong không gian thực, và tương tác với sản phẩm một cách tự nhiên. Việc sử dụng thực tế ảo (VR/AR) và thực tế tăng cường (AR) giúp tăng tính tương tác, tăng khả năng chuyển đổi, và tạo sự khác biệt cho web bán hàng.

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

Chương 1: GIỚI THIỆU ĐỀ TÀI. Mô tả Website. Lý do chọn thiết kế Website. Sơ đồ sitemap của Website.

Công nghệ sử dụng. Môi trường thiết kế. Công cụ hỗ trợ. 3 Chương 2: CƠ SỞ LÝ THUYẾT.

Lập trình Javascript. Đặc điểm nổi bật của Javascript. Sequelize connected PostgreSQL. 12 Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .1 Sơ đồ thực thể ERD.

Bảng Product Image. Bảng Invoice Item. Bảng Patron Discount .2 Sơ đồ liên kết màn hình .3 Sơ đồ phân rã chức năng. Đặc tả Use-case.

Quên mật khẩu. Chỉnh sửa hàng hóa. Cập nhật thông tin cá nhân. Bình luận hàng hóa.

Thêm, sửa, xóa nhân viên. Xem doanh thu. Nhập hóa đơn, bán hàng trực tiếp tại chi nhánh. Duyệt và kiểm tra thanh toán của đơn hàng online.

Phân tích dữ liệu hàng hóa. Thêm hàng hóa vào giỏ hàng, yêu thích. Đưa hàng hóa từ yêu thích sang giỏ hàng. Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng.

Sơ đồ kiến trúc hệ thống. Cập nhật thông tin cá nhân. Bình luận sản phẩm. Xem chi tiết hàng hóa.

Thêm vào giỏ hàng. Thêm vào yêu thích. Tăng giảm số lượng hàng hóa. Kiểm tra hóa đơn đã hoàn thành.

Cập nhật hàng hóa. Thêm nhân viên. Đổi mật khẩu. 49 Chương 4: XÂY DỰNG WEBSITE.

Sign In Page. Sign Up Page. Guest Cart Page. Display Product Page.

Detail Product Page. Product Manager Page. Staff Manager Page. Add Product Page.

Edit Product Page. Stock Manager Page. Add Stock Modal. Data Analysis Page.

Detail Product Modal. Add Manager Page. My Place Page. My Cart Page.

My Order Page. My Favorite Page. Pre-Access To Profile Page. Checkout Now Page.

83 Chương 5: KẾT LUẬN. Về giao diện. Về chức năng (khả năng ứng dụng thực tế). Hạn chế của đồ án:.

Hướng phát triển của đồ án:. 85 TÀI LIỆU THAM KHẢO. 86 MỤC LỤC HÌNH ẢNH Hình 1. 1 Sơ đồ sitemap của website.

1 Sơ đồ hoạt động của redux toolkit. 2 Logo express JS. 3 Giao diện Nodemailer. 4 Đặc điểm Sequelize.

8 Cấu trúc JWT. 10 Hàm kiểm tra Token. 1 Sơ đồ thực thể ERD. 2 Sơ đồ liên kết màn hình.

3 Phân rã chức năng của Admin. 4 Phân rã chức năng của Customer. 5 Phân rã chức năng của Manager. 6 Phân rã chức năng của Staff.

7 Phân rã chức năng của Guest. 8 Sơ đồ use-case chi tiết. 9 DFD Đăng nhập. 10 DFD Đăng ký tài khoản.

11 DFD Cập nhật thông tin cá nhân. 12 DFD Bình luận sản phẩm. 13 DFD Than toán hóa đơn. 14 DFD Xem chi tiết hàng hóa.

15 DFD Thêm vào giỏ hàng. 16 DFD Thêm vào danh sách hàng hóa yêu thích. 17 DFD Tăng giảm số lượng hàng hóa. 19 DFD Kiểm tra hóa đơn đã hoàn thành thanh thoán và giao hàng.

20 DFD Thêm hàng hóa. 21 DFD Cập nhật hàng hóa. 23 DFD Thêm nhân viên. 24 DFD Đổi mật khẩu.

1 Giao diện Home Page. 2 Giao diện Sign In Page. 3 Giao diện Sign Up Page. 4 Giao diện Guest Cart Page.

5 Giao diện Display Product Page. 6 Giao diện Detail Product Page. 7 Giao diện Product Manager Page. 8 Giao diện Staff Manager Page.

9 Giao diện Add Product Page. 10 Giao diện Edit Product Page. 11 Giao diện Drawer. 12 Hiao diện Stock Manager Page.

13 Giao diện Add Stock Modal. 14 Giao diện Revenue Page. 15 Giao diện Data Analysis Page. 16 Giao diện Detail Product Modal.

17 Giao diện Add Manager Page. 18 Giao diện My Place Page. 19 Giao diện My Cart Page. 20 Giao diện My Order Page.

21 Giao diện My Favorite Page. 22 Giao diện Pre-Access To Profile Page. 23 Giao diện Profile Page. 24 Giao diện Checkout Now Page.

25 Giao diện Payment Page .83 DANH MỤC BẢNG BIỂU Bảng 3. 1 Bảng mô tả Product. 2 Bảng mô tả Image. 3 Bảng mô tả Feature.

4 Bảng mô tả Cart. 5 Bảng mô tả Stock. 6 Bảng mô tả Branch. 7 Bảng mô tả Invoice.

8 Bảng mô tả Account. 9 Bảng mô tả Notification. 10 Bảng mô tả Comment. 11 Bảng mô tả Invoice Item.

12 Bảng mô tả Favorite. 13 Bảng mô tả Patron Discount. 14 Đặc tả Đăng nhập. 15 Đặc tả Đăng kí.

16 Đặc tả Quên mật khẩu. 17 Đặc tả Đăng xuất. 18 Đặc tả Xem hàng hóa. 19 Đặc tả Chỉnh sửa hàng hóa.

20 Đặc tả Thêm hàng hóa. 21 Đặc tả Xóa hàng hóa. 22 Đặc tả Cập nhật thông tin. 23 Đặc tả Bình luận hàng hóa.

24 Đặc tả Thêm, sửa, xóa nhân viên. 25 Đặc tả Xem doanh thu. 26 Đặc tả Tìm kiếm hàng hóa. 27 Đặc tả Nhập hóa đơn, bán hàng trực tiếp tại các chi nhánh.

28 Đặc tả Duyệt và kiểm tra thanh toán của đơn hàng. 29 Đặc tả Phân tích dữ liệu hàng hóa. 30 Đặc tả In hóa đơn. 31 Đặc tả Thêm hàng hóa vào giỏ hàng và yêu thích.

32 Đặc tả Đưa hàng hóa từ yêu thích sang giỏ hàng. 33 Đặc tả Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng. 34 Đặc tả Thanh toán. 1 Mô tả giao diện Home Page.

2 Mô tả giao diện Sign in Page. 3 Mô tả giao diện Sign Up Page. 4 Mô tả giao diện Guest Cart Page. 5 Mô tả giao diện Display Product Page.

6 Mô tả giao diện Detail Product Page. 7 Mô tả giao diện Product Manager Page. 8 Mô tả giao diện Staff Manager Page. 9 Mô tả giao diện Add Product Page.

10 Mô tả giao diện Drawer. 11 Mô tả giao diện Stock Manager Page. 12 Mô tả giao diện Add Stock Modal. 13 Mô tả giao diện Revenue Page.

14 Mô tả giao diện Data Analysis Page. 15 Mô tả giao diện Detail Product Modal. 16 Mô tả giao diện Add Manager Page. 17 Mô tả giao diện My Place Page.

18 Mô tả giao diện My Cart Page. 19 Mô tả giao diện My Order Page. 20 Mô tả giao diện My Favorite Page. 21 Mô tả giao diện Pre-Access to Profile Page.

22 Mô tả giao diện Profile Page. 23 Mô tả giao diện Checkout Now Page. 24 Mô tả giao diện Payment Page .83 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN .HCM, ngày … tháng 6 năm 2022 GVHD ThS. Trần Thị Hồng Yến Chương 1: GIỚI THIỆU ĐỀ TÀI 1.

Tên Website Website có tên gọi: ComeBuy. - Link repo Client: https://github.com/pvdthien310/ComeBuyClient - Link repo Server: https://github.com/pvdthien310/ComeBuyServer - Website: https://comebuy-site-offical. Mô tả Website - Ngay từ cái tên người dùng cũng đã biết mục đích của website. Với cái tên dễ hiểu và đơn giản, phần nào cũng giúp người dùng biết được mục đích của họ đến với website.

Come tức là đến với – như một lời mời gọi; Buy tức là mua. Tên website ngụ ý kêu gọi người dùng, khách hành đến khám phá và mua những mặt hàng mình cần và đặc biệt cụ thể ở đây ComeBuy cung cấp các mặt hàng laptop từ nhiều các thương hiệu nổi tiếng và phổ biến từ Dell, Acer cho đến Apple, … - Website ComeBuy cung cấp các chức năng cho hai phía đối tượng người dùng: chủ shop (Owner) và khách hàng (Customer). Mô tả một cách sơ lược, đối với Owner, ComeBuy cho phép họ quản lí hàng hóa, quản lí việc mua bán, quản lí nhân viên, quản lí doanh thu,…Ngược lại đối với Customer, ComeBuy cho phép họ lưu trữ thông tin cá nhân liên kết tài khoản và thực hiện mua hàng và thanh toán bằng các hình thức khác nhau ngay trên website hoặc có thể mua hàng trực tiếp từ shop để được thực hiện thanh toán bằng tiền mặt và order qua chức năng order trực tiếp thông qua quản lí tại các chi nhánh trên website. - ComeBuy được xây dựng bằng React JS và các thư viện hỗ trợ, kĩ thuật hỗ trợ khác, …nhằm đáp ứng việc mang lại một thiết kế dễ dùng, hợp thị hiếu, thu hút người dùng và độ bảo mật tốt.

Lý do chọn thiết kế Website Khách quan - Trong nền kinh tế hiện nay, nhu cầu trao đổi hàng hóa (mua, bán) diễn ra vô cùng sôi nổi và dường như đó là những hoạt động luôn luôn hiện hữu. Nhu cầu của người mua hàng càng tăng thì khả năng đáp ứng, cung cấp của người bán cũng tăng theo. Thế nhưng việc mua bán trực tiếp đã trở nên quá lỗi thời và khiến cho chi phí về mặt đầu tư của người bán hàng trở nên ngày càng lớn, cộng hưởng thêm đó là người mua hàng 1 trong xã hội công nghệ hiện nay lại càng không có nhu cầu đi ra ngoài gặp trực tiếp người bán hàng. Điều đó lại càng có ý nghĩa và đúng đắn nhất là trong tình hình đại dịch Covid-19 hiện thời, người ta lại càng quan ngại việc đi ra ngoài để mua hàng hóa.

Thế nên, tình trạng đó đã thúc đẩy người mua vào việc mua hàng hóa online thông qua các ứng dụng thương mại hoặc thông qua các website, về mặt người bán thì cũng thúc đẩy họ thay vì đầu tư vào việc thuê mặt bằng hay mở rộng mặt bằng bán trực tiếp thì họ dùng chi phí đó để đầu tư vào phát triển một hệ thống, ứng dụng, website phục vụ cho việc kinh doanh của mình đặc biệt là các doanh nghiệp lớn, các cửa hàng lớn. Bởi lẽ việc đầu tư đó giúp họ tiết kiệm được cho phí và công sức hơn nhiều cộng thêm nó sẽ giúp họ bảo vệ được sức khỏe giữa đại dịch. Nhận thấy được sự cần thiết, sự thực tế của vấn đề nên nhóm đã chọn đề tài “Xây dựng website bán hàng” để phục vụ cho đồ án 1. Một đề tài thực tế, tính ứng dụng cao và sự đại trà cũng giúp phần nào cho việc thực hiện đồ án này trở nên ý nghĩa hơn.

Chủ quan: Trong quá trình học tập tại trường, nhóm muốn trải nghiệm khả năng thực hiện nhiều loại đồ án vận hành trên nhiều nền tảng khác nhau. Nhận thấy được sự hấp dẫn của việc xây dựng một website hỗ trợ bán hàng nên nhóm quyết định chọn đề tài này để thực hiện cho môn Đồ án 1. Đồ án này mang ý nghĩa về việc lần đầu trải nghiệm xây dựng một website đối với nhóm. Sơ đồ sitemap của Website Hình 1.

1 Sơ đồ sitemap của website 1.