Đồ án xây dựng website bán quần áo

GIỚI THIỆU CHUNG

Lý do chọn đề tài

Xu hướng mua sắm quần áo trực tuyến đang ngày càng phát triển mạnh mẽ và trở thành một phần không thể thiếu trong cuộc sống hiện đại Sự tăng trưởng này được thúc đẩy bởi nhiều yếu tố, trong đó sự tiện lợi là yếu tố quan trọng nhất Mua sắm trực tuyến cho phép khách hàng lựa chọn và mua hàng từ bất kỳ đâu và bất kỳ khi nào, tiết kiệm thời gian và công sức so với việc di chuyển đến cửa hàng truyền thống Người tiêu dùng có thể dễ dàng duyệt qua các sản phẩm, so sánh giá cả và đặt hàng chỉ với vài cú nhấp chuột.

Các trang web mua sắm quần áo cung cấp sự đa dạng phong phú về sản phẩm, bao gồm nhiều thương hiệu, kiểu dáng, màu sắc và kích thước khác nhau Khách hàng có thể dễ dàng tìm thấy những xu hướng thời trang mới nhất, với các lựa chọn đa dạng để phù hợp với sở thích cá nhân.

Các trang web bán quần áo trực tuyến thường áp dụng chính sách bán hàng linh hoạt và dịch vụ khách hàng tốt, bao gồm chính sách đổi trả hàng dễ dàng Điều này giúp người mua tự tin hơn khi lựa chọn sản phẩm mà không lo về kích cỡ hoặc màu sắc không phù hợp Hơn nữa, các trang web cũng thường xuyên cập nhật thông tin về đơn hàng và cung cấp hỗ trợ khách hàng qua dịch vụ chăm sóc trực tuyến.

Xu hướng mua sắm quần áo trực tuyến ngày càng gia tăng nhờ vào sự phát triển mạnh mẽ của mạng xã hội Người tiêu dùng có thể dễ dàng nhận được ý kiến và gợi ý từ các blogger thời trang, influencers và cộng đồng trực tuyến Sự chia sẻ kinh nghiệm mua sắm và đánh giá sản phẩm giúp người mua có cái nhìn sâu sắc hơn về sản phẩm và thương hiệu.

Với những lợi ích và hiệu quả đáng kể từ trang web mua sắm, nhóm đã quyết định xây dựng một website bán quần áo nhằm nâng cao trải nghiệm mua sắm cho người dùng.

Mục đích

- Hiểu về NextJS, ReactJS, NodeJS cũng như có thể áp dụng những công nghệ này vào đồ án

- Tạo nên một ứng dụng có giao diện trực quan, dễ sử dụng, dễ tiếp cận người dùng, có khả năng mở rộng cao

- Xây dựng được phần mềm đáp ứng các nhu cầu cơ bản cho người dùng mang đến sự thuận lợi và tiết kiệm thời gian trong việc mua sắm

- Sản phẩm tạo ra có tính ứng dụng cao, có khả năng đưa vào sử dụng thực tế.

Đối tượng

• Client: Khách hàng có nhu cầu mua sắm quần áo trực tuyến

• Admin: Chủ cửa hàng có nhu cầu tối ưu hóa, tự động hóa nghiệp vụ quản lý.

Phạm vi nghiên cứu

• Ứng dụng có thể hoạt động trên nền tảng Web

+ Đăng nhập, đăng ký, đặt lại mật khẩu

+ Xem danh sách sản phẩm theo danh mục

+ Thêm sản phẩm vào giỏ hàng

+ Thêm sản phẩm vào danh mục yêu thích

+ Xem thông tin chi tiết sản phẩm

+ Quản lý thông tin cá nhân

+ Gợi ý, khuyến nghị sản phẩm

+ Đăng nhập, đăng ký, đặt lại mật khẩu

+ Quản lý thông tin khách hàng

+ Quản lý danh sách đơn đặt hàng

+ Quản lý danh sách sản phẩm

+ Quản lý phiếu nhập kho

Hiện trạng

Trong lĩnh vực xây dựng website bán quần áo hiện nay, có nhiều hướng nghiên cứu phong phú và đa dạng, nổi bật trong số đó là việc tối ưu hóa trải nghiệm người dùng, cải thiện giao diện và tăng cường khả năng tương tác để thu hút khách hàng.

• Giao diện người dùng và trải nghiệm người dùng:

Nhiều nghiên cứu đã chỉ ra rằng việc thiết kế giao diện người dùng hấp dẫn và thân thiện là rất quan trọng, nhằm tạo ra trải nghiệm mua sắm thuận tiện và dễ dàng cho người tiêu dùng.

Các phương pháp như thiết kế tương tác, tìm hiểu hành vi người dùng, phân tích ngữ cảnh và tối ưu hóa trải nghiệm người dùng đã được nghiên cứu và áp dụng để nâng cao hiệu quả bán hàng trên các website bán quần áo.

• Tìm kiếm và lọc sản phẩm:

- Một vấn đề quan trọng trong việc xây dựng website bán quần áo là tạo ra một hệ thống tìm kiếm và lọc sản phẩm hiệu quả

Nghiên cứu đã phát triển một thuật toán tìm kiếm thông minh, giúp phân loại và gợi ý sản phẩm phù hợp với người dùng dựa trên yêu cầu và sở thích cá nhân của họ.

• Quản lý hàng hóa và quản lý đơn hàng:

Các nghiên cứu hiện nay đang chú trọng vào việc phát triển hệ thống quản lý hàng hóa và đơn hàng tự động, nhằm nâng cao độ chính xác và hiệu quả trong xử lý đơn hàng cũng như quản lý hàng tồn kho.

• Tích hợp thanh toán và bảo mật:

Tích hợp các phương thức thanh toán an toàn và bảo mật thông tin khách hàng là yếu tố quan trọng trong việc xây dựng website bán quần áo.

Các nghiên cứu đã chỉ ra tầm quan trọng của việc tích hợp các cổng thanh toán, mã hóa dữ liệu và các biện pháp bảo mật khác nhằm đảm bảo an toàn cho khách hàng trong quá trình mua sắm trực tuyến.

Giải quyết vấn đề

Đi kèm với đó vẫn còn một số vấn đề còn tồn tại và cần tập trung nghiên cứu giải quyết như:

Độ tin cậy và an toàn là yếu tố quan trọng hàng đầu trong mua sắm trực tuyến, đòi hỏi phải phát triển các biện pháp bảo mật hiệu quả, xác thực người dùng và đảm bảo tính toàn vẹn của dữ liệu để bảo vệ khách hàng.

Tối ưu hóa quá trình mua hàng của khách hàng thông qua việc tương tác dữ liệu thời gian thực là rất quan trọng, vì nó đảm bảo rằng thông tin trên trang web luôn được cập nhật và mới nhất.

Nền tảng tư vấn trực tuyến đang trở thành một giải pháp hiệu quả cho việc giải đáp thắc mắc của khách hàng Thay vì chỉ có người trực page, việc áp dụng công nghệ AI để trả lời câu hỏi của khách hàng 24/7 đang trở thành xu hướng AI không chỉ giúp tiết kiệm thời gian mà còn nâng cao trải nghiệm người dùng, đáp ứng nhu cầu thông tin ngay lập tức khi khách hàng truy cập trang web.

CƠ SỞ LÝ THUYẾT

NextJS

According to the official Next.js website, it is referred to as "The React Framework for Production." To gain a deeper understanding, we can break down each component of this definition.

- React: chúng ta vẫn sẽ viết React code, xây dựng React components và sử dụng những tính năng của React như props, state, context, …

Framework lớn hơn thư viện, mang đến nhiều tiện ích hơn với các tính năng tích hợp sẵn giúp giải quyết những vấn đề thường gặp, cùng với hướng dẫn chi tiết về cách sử dụng các tính năng này.

NextJS là một framework lý tưởng cho môi trường production, cung cấp những tính năng cần thiết mà React thường thiếu, giúp chuẩn bị cho ứng dụng React hoạt động hiệu quả trong sản xuất Những điểm nổi bật của NextJS bao gồm khả năng tối ưu hóa hiệu suất, hỗ trợ SEO tốt hơn và tính năng server-side rendering, mang lại trải nghiệm người dùng mượt mà hơn.

• Server-side Page (Pre-)Rendering:

Server-side rendering (SSR) là quá trình chuẩn bị dữ liệu cho một trang web trên máy chủ thay vì trên máy khách Trước đây, khi phát triển ứng dụng React, trang mà người dùng thấy thường là một trang trống không có dữ liệu.

HTML mà server trả về chỉ chứa một skeleton đơn giản, không có dữ liệu hay thẻ HTML nào khác, chỉ có một thẻ div với id là root để tải và render ứng dụng React Tất cả quá trình rendering được thực hiện bởi React ở phía client, vì React là thư viện Javascript chạy trên client-side Do đó, mã HTML từ server trả về cho client hoàn toàn là một trang rỗng.

Việc tải dữ liệu từ cơ sở dữ liệu để hiển thị danh sách sản phẩm có thể gây ra tình trạng loading cho người dùng, ảnh hưởng đến trải nghiệm của họ Khi JavaScript chỉ được thực thi ở client, người dùng sẽ phải chờ đợi cho đến khi dữ liệu được trả về và render Điều này đặc biệt nghiêm trọng nếu tối ưu SEO là ưu tiên hàng đầu, vì các search engine crawlers chỉ thấy một trang rỗng, điều này không có lợi cho SEO Do đó, Server-side Rendering là giải pháp hiệu quả để khắc phục vấn đề này, giúp cải thiện trải nghiệm người dùng và tối ưu hóa khả năng tìm kiếm.

NextJS thực hiện pre-rendering cho trang web, chuẩn bị toàn bộ dữ liệu cần thiết trước khi gửi đến người dùng Khi có yêu cầu từ server, một trang hoàn chỉnh sẽ được cấp phát ngay lập tức, giúp người dùng không phải chờ đợi quá trình lấy dữ liệu và đồng thời cho phép các search engine crawlers dễ dàng truy cập nội dung bên trong trang.

Trong các ứng dụng React thông thường, việc cấu hình từng route cho các trang cần sử dụng React Router Tuy nhiên, NextJS đơn giản hóa quy trình này bằng cách định nghĩa các trang dựa trên các file trong thư mục đặc biệt gọi là pages Điều này có nghĩa là trong NextJS, mỗi trang được biểu diễn dưới dạng một React Component được xuất ra từ các file js, jsx, ts hoặc tsx trong thư mục pages.

NextJS là một framework fullstack, cho phép tích hợp mã backend dễ dàng vào dự án Trước đây, việc truy xuất dữ liệu từ cơ sở dữ liệu yêu cầu xây dựng một API và một dự án REST API riêng biệt Tuy nhiên, với NextJS, tất cả các mã client và backend được gói gọn trong một dự án duy nhất, mang lại sự tiện lợi và hiệu quả cho việc phát triển ứng dụng.

Next.js hỗ trợ Server-Side Rendering (SSR) một cách nhanh chóng và dễ dàng, cho phép trang web được tạo ra trên server và gửi đến trình duyệt với dữ liệu đã được điền đầy đủ Việc sử dụng SSR không chỉ cải thiện trải nghiệm người dùng mà còn tối ưu hóa hiệu suất của ứng dụng.

Static Site Generation (SSG) trong Next.js cho phép tạo ra các trang tĩnh trong quá trình xây dựng, giúp giảm tải cho máy chủ và nâng cao hiệu suất ứng dụng Các nhà phát triển có thể tận dụng SSG để tạo ra các trang nhanh chóng, dễ dàng cache và triển khai.

Next.js hỗ trợ routing tự động thông qua cấu trúc thư mục, giúp đơn giản hóa quá trình cấu hình routing Thay vì phải quản lý routing phức tạp, chúng ta chỉ cần tổ chức các tệp tin và thư mục theo quy tắc đã định sẵn, từ đó tập trung vào phát triển nội dung.

Next.js, được xây dựng trên nền tảng React, tích hợp tốt với các thư viện React phổ biến, cho phép người dùng khai thác các tính năng mạnh mẽ của React để phát triển ứng dụng phong phú và tương tác cao.

ReactJS

ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển, chuyên dùng để xây dựng giao diện người dùng (UI) cho ứng dụng web Kể từ khi ra mắt vào năm 2013, React đã nhanh chóng trở nên phổ biến và được ưa chuộng Thư viện này cho phép các nhà phát triển tạo ra các component UI có khả năng tái sử dụng, giúp cập nhật và hiển thị hiệu quả khi trạng thái của ứng dụng thay đổi.

Một số điểm nổi bật của ReactJS:

Kiến trúc dựa trên component của React cho phép chia giao diện người dùng thành các component nhỏ, tái sử dụng, giúp đóng gói logic và giao diện riêng biệt Các component này có thể được kết hợp và lồng ghép để tạo ra những giao diện phức tạp.

React sử dụng DOM ảo để tối ưu hóa hiệu suất hiển thị, với DOM ảo là phiên bản nhẹ của DOM thực tế Công nghệ này cho phép React theo dõi các thay đổi và chỉ cập nhật những phần cần thiết của giao diện người dùng (UI).

JSX (JavaScript XML) là cú pháp mở rộng trong React, cho phép viết mã tương tự HTML trực tiếp trong JavaScript Việc sử dụng JSX giúp kết hợp HTML và JavaScript một cách trực quan và dễ hiểu hơn.

Luồng dữ liệu một chiều (Uni-directional Data Flow) trong React, hay còn gọi là one-way data binding, cho phép dữ liệu di chuyển từ các component cha tới các component con qua các thuộc tính (props) Điều này có nghĩa là sự thay đổi trong các thành phần con không tác động trực tiếp đến các thành phần cha, giúp quản lý trạng thái ứng dụng dễ dàng hơn Phương pháp này cũng hỗ trợ việc gỡ lỗi và hiểu mã nguồn hiệu quả hơn.

React Hooks, introduced in React version 16.8, are functions that enable the use of state and other React features within functional components They allow functional components to manage local state, handle side effects, and utilize React's lifecycle methods without the need for class components.

React Router là thư viện nổi bật cho phép khai báo tính năng định tuyến trong các ứng dụng React Thư viện này giúp xác định các đường dẫn và thành phần tương ứng, từ đó hỗ trợ điều hướng giữa các giao diện khác nhau trong một ứng dụng đơn trang (single-page application).

ReactJS nổi bật với hiệu suất cao nhờ cơ chế Virtual DOM, cho phép quản lý hiệu quả các thay đổi trong giao diện người dùng Thay vì cập nhật toàn bộ DOM, ReactJS chỉ tập trung vào những phần cần thiết, từ đó cải thiện hiệu suất và rút ngắn thời gian tải trang.

- Tính tái sử dụng cao: ReactJS khuyến khích việc xây dựng các thành phần

Sử dụng các component độc lập và có khả năng tái sử dụng giúp xây dựng giao diện người dùng linh hoạt, dễ bảo trì và tối ưu hóa quy trình phát triển.

ReactJS cho phép quản lý trạng thái một cách dễ dàng nhờ vào khái niệm "one-way data flow" (luồng dữ liệu một chiều) Điều này giúp dữ liệu được truyền xuống các component một cách rõ ràng và hiệu quả, từ đó cải thiện khả năng kiểm soát và bảo trì ứng dụng.

Props cho phép truyền dữ liệu giữa các thành phần, và mọi thay đổi đều được quản lý thông qua hàm "setState", giúp duy trì tính nhất quán và kiểm soát trạng thái của ứng dụng một cách dễ dàng.

ReactJS sở hữu một cộng đồng lớn và năng động, cung cấp nhiều tài liệu, ví dụ và thư viện hữu ích cho quá trình phát triển Bên cạnh đó, ReactJS còn mang đến bộ công cụ phong phú như React DevTools, Create React App, Next.js và nhiều công cụ hỗ trợ khác, giúp tăng năng suất và tiện ích trong phát triển ứng dụng.

NodeJS

Node.js là nền tảng phát triển phía máy chủ dựa trên JavaScript, cho phép các nhà phát triển dễ dàng và hiệu quả xây dựng ứng dụng mạng đa nền tảng.

- Node.js sử dụng mô hình sự kiện (event-driven) và cơ chế non-blocking I/O để cho phép xử lý đa nhiệm hiệu quả

Node.js nổi bật với khả năng quản lý hiệu quả các ứng dụng web thời gian thực Nhờ vào Node.js, chúng ta có thể phát triển các ứng dụng trò chuyện, ứng dụng phát sóng trực tiếp, và các ứng dụng cập nhật dữ liệu theo thời gian thực, mang lại trải nghiệm người dùng tối ưu.

Node.js sử dụng JavaScript, một ngôn ngữ lập trình phổ biến và mạnh mẽ, cho phép các nhà phát triển web tận dụng kiến thức và kỹ năng hiện có của họ để xây dựng ứng dụng phía máy chủ mà không cần học một ngôn ngữ mới.

Node.js sở hữu một hệ sinh thái phong phú với npm (Node Package Manager), cho phép lập trình viên truy cập hàng ngàn gói mã nguồn mở Npm giúp tăng tốc quá trình phát triển bằng cách cho phép người dùng dễ dàng tìm kiếm, cài đặt và quản lý các gói này.

Node.js là một nền tảng mạnh mẽ được phát triển dựa trên mô hình sự kiện và cơ chế non-blocking I/O, giúp xử lý đa nhiệm một cách hiệu quả Với khả năng quản lý hàng nghìn kết nối đồng thời, Node.js rất phù hợp cho các ứng dụng yêu cầu thời gian thực và có lưu lượng truy cập lớn.

Node.js sử dụng C++ và Chrome V8 Engine ở phần core, giúp tăng tốc độ xử lý công việc lên mức tối đa mà vẫn đảm bảo tính chính xác.

Node.js sở hữu một hệ sinh thái phong phú nhờ vào npm (Node Package Manager), cung cấp hàng ngàn gói mã nguồn mở, modules và công cụ phát triển Điều này giúp lập trình viên nhanh chóng xây dựng các chức năng phức tạp và tái sử dụng mã nguồn hiệu quả.

Node.js hỗ trợ tích hợp dễ dàng với nhiều công nghệ và dịch vụ bên ngoài như cơ sở dữ liệu, hệ thống file và các dịch vụ web, giúp phát triển ứng dụng phức tạp và tích hợp hệ thống linh hoạt.

Node.js sở hữu một cộng đồng phát triển lớn mạnh và năng động, mang đến nhiều tài liệu, hướng dẫn và gói mở rộng phong phú Cộng đồng này cũng cung cấp hỗ trợ qua các diễn đàn và trang web, giúp người dùng dễ dàng tìm kiếm thông tin và giải pháp cho các vấn đề gặp phải.

13 web, giúp người phát triển tìm hiểu, chia sẻ và giải quyết vấn đề trong quá trình phát triển ứng dụng.

ExpressJS

Express.js là một framework phát triển ứng dụng web phía máy chủ dựa trên Node.js, nổi bật với tính phổ biến trong cộng đồng lập trình Framework này giúp đơn giản hóa quá trình xây dựng ứng dụng web, mang lại sự nhanh chóng và dễ dàng cho các nhà phát triển.

With Express.js, we can develop standalone web applications, create APIs (Application Programming Interfaces), and even build complex multi-page web applications.

Express.js nổi bật với khả năng mở rộng và tích hợp hiệu quả với các gói middleware khác Mô hình middleware của Express.js cho phép xử lý linh hoạt các yêu cầu từ người dùng.

Express.js sở hữu một cộng đồng lớn mạnh và năng động, cung cấp nhiều tài liệu, hướng dẫn và gói mở rộng phong phú Hiện tại, người dùng có thể dễ dàng tìm thấy nhiều nguồn tài nguyên và sự hỗ trợ từ cộng đồng khi phát triển ứng dụng với Express.js.

Express.js có cú pháp dễ hiểu, giúp lập trình viên nhanh chóng bắt đầu với dự án mới mà không cần kiến thức sâu về framework hay JavaScript Người dùng có thể linh hoạt tùy chỉnh Express.js theo nhu cầu của dự án.

Express.js là một framework không ràng buộc, cho phép lập trình viên tự do tổ chức mã nguồn và lựa chọn công nghệ phù hợp cho dự án Nhà phát triển có thể chọn view engine, middleware, cơ sở dữ liệu và nhiều thành phần khác để tạo ra ứng dụng theo ý muốn của mình.

Express.js áp dụng mô hình middleware, cho phép tích hợp các chức năng bổ sung vào ứng dụng một cách đơn giản Các middleware này hỗ trợ trong việc xử lý yêu cầu và phản hồi, thực hiện các nhiệm vụ như xác thực, quản lý phiên, ghi nhật ký, và xử lý lỗi Cộng đồng cũng đã cung cấp nhiều middleware có sẵn, giúp mở rộng khả năng cho ứng dụng.

Express.js, được xây dựng trên nền tảng Node.js, cho phép xử lý đa nhiệm hiệu quả và mở rộng tốt Nó có khả năng xử lý hàng nghìn kết nối đồng thời với hiệu suất cao trong việc quản lý yêu cầu web Điều này khiến Express.js trở thành lựa chọn lý tưởng cho các ứng dụng yêu cầu thời gian thực và có lưu lượng truy cập lớn.

Express.js là một framework được phát triển trên nền tảng Node.js, cho phép tích hợp dễ dàng với hệ sinh thái Node.js Việc sử dụng npm (Node Package Manager) giúp người dùng cài đặt và quản lý các gói mở rộng cho Express.js, tối ưu hóa việc sử dụng các công cụ và thư viện phát triển hiện có.

MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mạnh mẽ và phổ biến, nổi bật với kiến trúc linh hoạt và khả năng mở rộng Nhờ những đặc điểm này, MongoDB đã trở thành lựa chọn hàng đầu cho việc lưu trữ và quản lý dữ liệu trong các ứng dụng hiện đại.

- MongoDB sử dụng mô hình tài liệu (document model), trong đó dữ liệu được tổ chức thành các tài liệu JSON (BSON) linh hoạt

MongoDB nổi bật với khả năng mở rộng dễ dàng, cho phép mở rộng theo chiều ngang tự động bằng cách phân tán dữ liệu trên nhiều máy chủ, từ đó nâng cao khả năng xử lý và lưu trữ.

MongoDB cung cấp nhiều tính năng hữu ích, nổi bật với khả năng truy vấn linh hoạt và mạnh mẽ, cho phép thực hiện các truy vấn phức tạp và tìm kiếm theo mô hình tài liệu Ngoài ra, nó còn hỗ trợ sharding (phân vùng dữ liệu) và index (chỉ mục), đảm bảo độ tin cậy, khả năng chịu lỗi và hiệu suất cao cho hệ thống.

MongoDB sở hữu một cộng đồng lớn và năng động, cung cấp sự hỗ trợ phong phú cùng với tài liệu đa dạng Người dùng có thể dễ dàng tìm thấy nhiều tài liệu, ví dụ và hướng dẫn từ cộng đồng, giúp họ tiếp cận và sử dụng MongoDB hiệu quả trong các dự án của mình.

MongoDB áp dụng mô hình tài liệu để lưu trữ dữ liệu, khác với các hệ quản trị cơ sở dữ liệu quan hệ sử dụng bảng và hàng Thay vào đó, MongoDB cho phép lưu trữ dữ liệu dưới dạng tài liệu JSON (BSON), mang lại sự linh hoạt trong việc xử lý dữ liệu không cố định và không đồng nhất, phù hợp với các yêu cầu đa dạng và biến đổi của dữ liệu.

MongoDB cung cấp khả năng mở rộng dễ dàng thông qua việc hỗ trợ mở rộng ngang tự động Người dùng có thể phân tán dữ liệu trên nhiều máy chủ bằng cách sử dụng sharding và thêm các nút vào cụm MongoDB, giúp tăng cường khả năng xử lý và lưu trữ Nhờ đó, ứng dụng có thể mở rộng mà không gặp phải rào cản về hiệu năng.

- MongoDB dễ dàng cài đặt, tương thích mọi nền tảng, từ đó dễ dàng triển khai MongoDB trên bất kỳ hệ điều hành nào

MongoDB được tối ưu hóa để đạt hiệu suất cao với cơ chế lưu trữ dựa trên bộ nhớ, mang lại thời gian phản hồi nhanh cho các ứng dụng.

Socket.io

Socket.io là một thư viện JavaScript mạnh mẽ cho phát triển ứng dụng thời gian thực trên web, cho phép truyền tải dữ liệu hai chiều giữa server và client một cách dễ dàng.

Socket.io sử dụng WebSockets để truyền tải dữ liệu thời gian thực qua mạng, nhưng nó còn vượt trội hơn nhờ khả năng tự động xử lý các vấn đề tương thích giữa trình duyệt và server Điều này giúp giảm thiểu các vấn đề phức tạp, đảm bảo ứng dụng hoạt động đáng tin cậy trên mọi nền tảng.

Socket.io nổi bật với tính năng hỗ trợ đa kênh, cho phép nhà phát triển tạo ra nhiều kênh riêng biệt để truyền tải dữ liệu giữa các nhóm người dùng hoặc các phần của ứng dụng Điều này mở ra khả năng xây dựng các ứng dụng thời gian thực phức tạp như trò chơi trực tuyến, hệ thống trò chuyện và cập nhật dữ liệu trực tiếp.

Socket.io không chỉ hỗ trợ ứng dụng web mà còn có thể tích hợp vào các ứng dụng di động sử dụng công nghệ như React Native hoặc Xamarin, giúp xây dựng các ứng dụng thời gian thực đa nền tảng một cách dễ dàng.

Socket.io là một công cụ mạnh mẽ cho việc phát triển ứng dụng web thời gian thực, nhờ vào cộng đồng đông đảo và tài liệu phong phú hỗ trợ.

Socket.io hỗ trợ giao tiếp hai chiều giữa server và client, cho phép gửi và nhận dữ liệu linh hoạt và trực tiếp Điều này tạo điều kiện cho tương tác thời gian thực và cập nhật dữ liệu ngay lập tức.

Socket.io hỗ trợ nhiều phương pháp truyền tải dữ liệu, bao gồm WebSockets, Long Polling và Server-Sent Events, giúp đảm bảo tính tương thích và khả năng hoạt động trên nhiều trình duyệt và nền tảng khác nhau.

Socket.io tự động xử lý các vấn đề tương thích giữa trình duyệt và máy chủ, chuyển đổi linh hoạt giữa các phương pháp truyền tải dữ liệu khác nhau Điều này đảm bảo rằng ứng dụng hoạt động một cách đáng tin cậy trên mọi nền tảng.

Socket.io cho phép tích hợp dễ dàng với các framework web phổ biến như ExpressJS và hỗ trợ nhiều ngôn ngữ lập trình, bao gồm JavaScript (Node.js), Python, Java và NET.

Socket.io được hỗ trợ bởi một cộng đồng phát triển lớn và năng động, giúp người dùng dễ dàng tiếp cận nhiều tài liệu, hướng dẫn và ví dụ hữu ích trong quá trình phát triển ứng dụng.

Redux

• Redux là một thư viện quản lý trạng thái ứng dụng trong JavaScript

Công nghệ này chủ yếu được áp dụng trong các ứng dụng React, nhưng cũng có thể được sử dụng trong các framework JavaScript khác hoặc trong những ngữ cảnh không liên quan đến React.

Redux là một công cụ quản lý trạng thái ứng dụng hiệu quả, sử dụng kiến trúc Flux với dữ liệu được lưu trữ trong một "store" duy nhất Trạng thái ứng dụng chỉ có thể được thay đổi thông qua các "actions", và các hành động này được xử lý bởi các "reducers".

• Dưới đây là một số khái niệm quan trọng trong Redux:

In a Redux application, the store is responsible for maintaining the unique state of the app It allows access to the stored states, facilitates state updates, and enables the registration or unregistration of listeners through various helper methods.

Actions are essentially events that facilitate the transmission of data from an application to the Redux store This data can originate from user interactions with the app, API calls, or form submissions.

Reducer là các hàm nguyên thủy nhận trạng thái hiện tại của ứng dụng, thực hiện một hành động và trả về trạng thái mới Những trạng thái này được lưu trữ dưới dạng đối tượng, xác định cách mà trạng thái của ứng dụng thay đổi để phản hồi lại hành động gửi đến store.

Hình 2.8 Kiến trúc của Redux

Redux Toolkit là thư viện hỗ trợ từ Redux, giúp đơn giản hóa việc viết mã và giảm thiểu công sức cấu hình Redux Thư viện này cung cấp nhiều tiện ích và hàm, nâng cao hiệu suất và dễ dàng sử dụng Redux hơn.

Redux Saga là middleware cho Redux, giúp xử lý các tác vụ không đồng bộ và side effects trong ứng dụng Nó hỗ trợ quản lý các tác vụ phức tạp như gọi API, xử lý dữ liệu từ xa, đồng bộ hóa dữ liệu và xử lý đa luồng.

Redux Thunk là middleware cho Redux, cho phép xử lý các hành động bất đồng bộ trong ứng dụng Nó hỗ trợ quản lý các tác vụ không đồng bộ như gọi API và xử lý yêu cầu hiệu quả.

AJAX, hoặc thực hiện các tác vụ bất đồng bộ khác một cách dễ dàng và có cấu trúc

Redux giúp quản lý trạng thái ứng dụng một cách rõ ràng và có cấu trúc, với trạng thái được lưu trữ trong một nguồn duy nhất gọi là "store" Điều này giúp đơn giản hóa việc theo dõi và cập nhật trạng thái của ứng dụng.

Redux cho phép theo dõi và gỡ lỗi dễ dàng nhờ việc ghi lại mọi thay đổi trạng thái trong ứng dụng thông qua các hành động (actions) Điều này giúp người phát triển dễ dàng xác định nguyên nhân của các thay đổi trạng thái, từ đó tạo điều kiện thuận lợi cho quá trình gỡ lỗi.

Redux khuyến khích việc tách biệt logic xử lý dữ liệu và giao diện người dùng, giúp tạo ra các hàm reducers có thể tái sử dụng Sự tách biệt này không chỉ giảm thiểu sự phụ thuộc giữa các thành phần trong ứng dụng mà còn tạo điều kiện thuận lợi cho việc kiểm thử và bảo trì.

Redux sở hữu một cộng đồng mạnh mẽ và hỗ trợ tốt, với vô số tài liệu, ví dụ và thư viện giúp phát triển Người dùng có thể dễ dàng tìm thấy nhiều nguồn tư liệu, hướng dẫn và câu trả lời cho các vấn đề thường gặp khi làm việc với Redux.

THIẾT KẾ HỆ THỐNG

Kiến trúc hệ thống

Hình 3.1 Kiến trúc hệ thống

- Bao gồm tất cả các components kết hợp với nhau để tạo nên giao diện người dùng

Các Actions được gửi từ các component sẽ được xử lý trong Reducers, trong khi các tác vụ bất đồng bộ sẽ được quản lý thông qua Middleware Sau khi hoàn tất xử lý, trạng thái mới sẽ được cập nhật vào Store và giao diện sẽ được điều chỉnh tương ứng.

Middleware xử lý tất cả các tác vụ bất đồng bộ được dispatch, đảm nhiệm việc gọi API, tương tác với server và trao đổi dữ liệu với Database Kết quả trả về sẽ được các components sử dụng để cập nhật giao diện hoặc gửi cho Actions, tiếp tục được Reducers xử lý và lưu vào Store.

• Định nghĩa các lời gọi API đến server và các cấu hình cần thiết khác Các component có thể làm việc trực tiếp với Service hoặc thông qua Middleware

- Lắng nghe các thông báo sự kiện từ Server

- Định nghĩa các API endpoints Khi một request được gửi đến, nó sẽ được kiểm tra tính hợp lệ trước khi được chuyển đến Controller

Đây là nơi tiếp nhận và xử lý các yêu cầu từ server, xác định Model cần lấy dữ liệu, thực hiện tương tác và trao đổi dữ liệu với Database, sau đó gửi kết quả về ứng dụng Đồng thời, nó cũng phát ra các thông báo sự kiện qua Socket.IO.

- Lưu trữ dữ liệu của toàn bộ ứng dụng

- Định nghĩa khung sườn, kiểu mẫu dữ liệu của các đối tượng trong ứng dụng

- Phát ra các thông báo sự kiện đến Front-end.

Phân tích yêu cầu

Chủ cửa hàng có thể dễ dàng quản lý nhân viên bằng cách tìm kiếm, thêm mới, xóa hoặc chỉnh sửa thông tin Khi thêm nhân viên mới, hệ thống sẽ tự động cấp tài khoản qua email cho nhân viên đó, giúp họ nhanh chóng bắt đầu công việc.

Người dùng có khả năng theo dõi tổng quan về sản phẩm, nhân viên, khách hàng, đơn đặt hàng và doanh thu bán hàng Họ cũng có thể xem danh sách các sản phẩm bán chạy, cùng với báo cáo chi tiết về sản phẩm đã bán theo từng danh mục và số lượng cụ thể của mỗi sản phẩm.

- Người dùng có thể tìm kiếm và xem chi tiết thông tin của khách hàng

- Người dùng có thể thêm, xem chi tiết, thêm mới, xóa sản phẩm

• Quản lý danh mục sản phẩm:

- Người dùng có thể thêm, xem chi tiết, xóa, chỉnh sửa danh mục sản phẩm

• Quản lý phiếu nhập kho:

Người dùng có khả năng tìm kiếm, xem chi tiết, thêm, xóa và chỉnh sửa phiếu nhập kho Tuy nhiên, sau khi xác nhận nhập kho, các thao tác này sẽ không còn khả thi và số lượng sản phẩm sẽ tự động tăng lên dựa trên số lượng ghi trong phiếu nhập kho.

- Người dùng có thể tìm kiếm, xem chi tiết, và thay đổi trạng thái của đơn hàng

- Người dùng có thể tìm kiếm, thêm, xóa, và chỉnh sửa thông tin của khuyến mãi Khi xóa khuyến mãi, khuyến sẽ chuyển trạng thái thành quá hạn

• Quản lý thông tin cá nhân:

Người dùng có thể dễ dàng cập nhật thông tin cá nhân và thay đổi mật khẩu của mình bằng cách nhấn vào nút “Thay đổi mật khẩu” và điền đầy đủ các trường thông tin cần thiết để thực hiện thao tác này.

- Người dùng nhập hai trường gồm Email và Mật khẩu để đăng nhập vào trang web

Người dùng có thể khôi phục mật khẩu bằng cách nhấp vào đường link “Quên mật khẩu” trên trang Đăng Nhập, sau đó điền địa chỉ Email của tài khoản Một email sẽ được gửi đến địa chỉ đó chứa đường link để khôi phục mật khẩu Khi nhấp vào đường link trong email, người dùng sẽ được dẫn đến trang khôi phục mật khẩu, nơi họ có thể điền đầy đủ thông tin để thiết lập lại mật khẩu.

Ở góc trên bên phải của trang, có biểu tượng kính lúp Khi nhấn vào biểu tượng này, thanh tìm kiếm sẽ xuất hiện, cho phép người dùng nhập từ khóa để hiển thị danh sách sản phẩm liên quan Ngoài ra, người dùng cũng có thể sử dụng các tag có sẵn để tiết kiệm thời gian tìm kiếm.

• Xem danh sách và thông tin sản phẩm:

Trên trang chủ, người dùng có thể xem tất cả sản phẩm theo từng loại, với danh sách sản phẩm được hiển thị chi tiết bao gồm tên, mã số, giá, kích thước và số lượng còn lại Tại trang chi tiết sản phẩm, người dùng có thể chọn size, điều chỉnh số lượng và thêm vào giỏ hàng hoặc danh mục yêu thích; nếu sản phẩm hết hàng, tùy chọn size sẽ không khả dụng Trang web cũng hỗ trợ chọn size dựa trên chiều cao, cân nặng, dáng người hoặc theo bảng size có sẵn Hơn nữa, hướng dẫn bảo quản và gợi ý sản phẩm liên quan cũng được cung cấp cho khách hàng.

Khi lựa chọn danh mục sản phẩm trên trang web, người dùng sẽ thấy danh sách sản phẩm phù hợp cùng với các bộ lọc tiện lợi Họ có thể lọc sản phẩm theo danh mục, khoảng giá, chất liệu và công nghệ in họa tiết Ngoài ra, trang web cũng hỗ trợ sắp xếp sản phẩm theo giá từ cao đến thấp, từ thấp đến cao, và theo mức độ bán chạy.

• Thêm sản phẩm vào danh mục yêu thích:

Người dùng có thể dễ dàng thêm sản phẩm vào danh mục yêu thích thông qua biểu tượng trái tim ở góc trên bên phải của trang Khi nhấn vào biểu tượng này, một drawer sẽ xuất hiện, hiển thị danh mục yêu thích của người dùng.

27 dùng có thể thay đổi size, số lượng và thêm vào giỏ hàng hoặc xóa sản phẩm khỏi danh mục yêu thích

• Thêm sản phẩm vào giỏ hàng:

Người dùng có thể dễ dàng thêm sản phẩm vào giỏ hàng thông qua biểu tượng xe giỏ hàng ở góc trên bên phải trang Khi nhấn vào biểu tượng này, một drawer sẽ mở ra, hiển thị danh sách các sản phẩm đã được thêm Tại đây, người dùng có thể điều chỉnh số lượng sản phẩm và có hai nút để chuyển đến trang xem chi tiết giỏ hàng hoặc tiến hành thanh toán Ngoài ra, người dùng cũng có tùy chọn để xóa sản phẩm khỏi giỏ hàng.

Khi đã chọn sản phẩm ưng ý, người dùng có thể bắt đầu quy trình thanh toán, bao gồm 4 bước cơ bản.

Khi người dùng nhấn thanh toán, nếu chưa đăng nhập, trang web sẽ yêu cầu họ đăng nhập hoặc cho phép mua hàng mà không cần đăng nhập Nếu người dùng đã đăng nhập, họ sẽ được chuyển sang bước tiếp theo.

Sau khi đăng nhập hoặc chọn mua hàng mà không cần đăng nhập, ứng dụng sẽ hiển thị thông tin đơn hàng và chi tiết đặt hàng Người dùng có thể tiết kiệm thời gian bằng cách chọn địa chỉ từ danh sách đã thêm trước đó hoặc tự điền thông tin mới Tiếp theo, người dùng có thể chọn mã ưu đãi để nhận giảm giá, với hai hình thức thanh toán là "Thanh toán khi nhận hàng" và "Thanh toán trực tuyến".

VNPay cung cấp dịch vụ thanh toán trực tuyến và hỗ trợ xuất hóa đơn cho công ty Khách hàng chỉ cần nhập tên công ty, địa chỉ, mã số thuế và nhấn in để nhận hóa đơn dưới định dạng PDF Ngoài ra, người dùng có thể xem thông tin đơn hàng, bao gồm danh sách sản phẩm, phí vận chuyển, số tiền giảm giá nếu có mã khuyến mãi, và tổng tiền đơn hàng Khi hoàn tất, người dùng chỉ cần bấm thanh toán để chuyển sang bước tiếp theo.

Khi sử dụng phương thức thanh toán qua VNPay, người dùng sẽ được chuyển đến trang thanh toán online với nhiều lựa chọn thanh toán khác nhau Sau khi thanh toán thành công, họ sẽ quay lại trang cửa hàng và nhận thông báo đặt hàng thành công, kèm theo email xác nhận thông tin đơn hàng Đối với phương thức thanh toán khi nhận hàng, khách hàng cũng sẽ được thông báo đặt hàng thành công và nhận email xác nhận tương tự.

• Quản lý thông tin cá nhân:

- Khách hàng có thể chỉnh sửa thông tin cá nhân của mình như họ tên, số điện thoại, ngày sinh, giới tính, đổi mật khẩu

• Xem lịch sử đặt hàng:

Thiết kế hệ thống

Hình 3.2 Sơ đồ UseCase phía Admin

Hình 3.3 Sơ đồ UseCase phía Client

STT Tên Actor Mô tả ngắn/ Ghi chú

1 Chủ cửa hàng Người dùng sử dụng phần mềm ở phía admin có toàn quyền quản lý cửa hàng

2 Nhân viên Người dùng sử dụng phần mềm ở phía admin nhưng bị giới hạn một số quyền truy cập

3 Người dùng chưa đăng nhập

Người dùng sử dụng phần mềm ở phía client mà chưa đăng nhập

4 Người dùng đã đăng nhập

Người dùng sử dụng phần mềm ở phía client mà đã đăng nhập

Bảng 3.2 Danh sách Use Case

STT Tên của Use Case Actor Mô tả/ Ghi chú

1 Đăng nhập Chủ cửa hàng,

Nhân viên Đăng nhập bằng tài khoản đã đăng ký

2 Quên mật khẩu Chủ cửa hàng,

Người dùng khôi phục mật khẩu của tài khoản

3 Quản lý nhân viên Chủ cửa hàng

Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa thông tin của nhân viên

4 Quản lý khách hàng Chủ cửa hàng, nhân viên

Quản lý việc tìm kiếm, xem, thông tin của khách hàng

5 Quản lý sản phẩm Chủ cửa hàng, nhân viên

Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa thông tin của sản phẩm

6 Quản lý danh mục sản phẩm

Chủ cửa hàng, nhân viên

Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa danh mục sản phẩm

7 Quản lý khuyến mãi Chủ cửa hàng, nhân viên

Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa khuyến mãi

8 Quản lý đơn hàng Chủ cửa hàng, nhân viên

Quản lý việc tìm kiếm, xem, chỉnh sửa trạng thái đơn hàng

9 Quản lý doanh thu Chủ cửa hàng, nhân viên

Theo dõi doanh thu của cửa hàng

10 Quản lý thông tin cá nhân

Chủ cửa hàng, nhân viên

Xem thông tin cá nhân, thay đổi thông tin cá nhân

11 Thay đổi mật khẩu Chủ cửa hàng, nhân viên Thay đổi mật khẩu tài khoản

12 Đăng nhập Người dùng chưa đăng nhập

Người dùng sử dụng tài khoản đã có để đăng nhập

13 Đăng ký Người dùng chưa đăng nhập

Người dùng tạo một tài khoản mới

14 Quên mật khẩu Người dùng chưa đăng nhập

Cấp một mật khẩu mới cho tài khoản người dùng

15 Thêm sản phẩm vào giỏ hàng

Người dùng chưa đăng nhập/đã đăng nhập

Lưu sản phẩm vào giỏ hàng

Người dùng đã đăng nhập

Lưu sản phẩm vào Danh sách yêu thích

17 Xóa sản phẩm khỏi giỏ hàng

Xóa sản phẩm khỏi giỏ hàng

Xóa sản phẩm khỏi Danh sách yêu thích

Thực hiện thanh toán đơn hàng

20 Quản lý mã khuyến mãi

Quản lý danh sách mã khuyến mãi

Người dùng tìm kiếm sản phẩm

22 Xem danh sách sản phẩm

Người dùng muốn xem danh sách sản phẩm

23 Xem chi tiết sản phẩm

Người dùng muốn xem thông tin về sản phẩm

24 Gửi yêu cầu tư vấn

Người dùng muốn được tư vấn, giải đáp vấn đề

25 Quản lý thông tin cá nhân

Người dùng thay đổi thông cá nhân

26 Quản lý địa chỉ giao hàng

Người dùng quản lý sổ địa chỉ dùng cho việc đặt hàng

27 Xem lịch sử mua hàng

Người dùng muốn xem lại danh sách đơn hàng đã đặt

Bảng 3.3 Use Case Đăng nhập

Tên Use Case Đăng nhập

Mô tả Người dùng sử dụng để đăng nhập vào trang web

Tác nhân chính Chủ cửa hàng, Nhân viên Điều kiện kích hoạt

Người dùng truy cập trang web khi chưa đăng nhập và thực hiện đăng nhập

Tiền điều kiện Người dùng chưa đăng nhập và đã có tài khoản

Hậu điều kiện Người dùng sẽ được chuyển sang trang chủ

1 Người dùng nhập email và mật khẩu, sau đó bấm đăng nhập

2 Hệ thống kiểm tra thông tin email và mật khẩu

3 Hệ thống bảo đăng nhập thành công

4 Hệ thống điều hướng đến trang chủ

Luồng sự kiện phụ Không

- Người dùng nhập email hoặc mật khẩu không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

+ TH1: Người dùng hủy đăng nhập

+ TH2: Người dùng nhập lại thông tin đăng nhập và bấm đăng nhập

• Use Case Quên mật khẩu:

Bảng 3.4 Use Case Quên mật khẩu

Tên Use Case Quên mật khẩu

Mô tả Người dùng khôi phục mật khẩu của tài khoản

Chủ cửa hàng và nhân viên là những tác nhân chính trong quy trình này Để kích hoạt, người dùng cần nhấn vào liên kết "Quên mật khẩu" trên trang đăng nhập, với điều kiện là họ đã có tài khoản.

Hậu điều kiện Mật khẩu được thay đổi

1 Người dùng chọn Quên mật khẩu ở trang Đăng nhập

2 Người dùng nhập Email của tài khoản muốn khôi phục

3 Hệ thống kiểm tra tính hợp lệ của Email

4 Hệ thống gửi Email chứa đường dẫn trang khôi phục mật khẩu tới người dùng

5 Người dùng nhấn vào đường dẫn được gửi trong Email

6 Người dùng nhập mật khẩu mới

7 Người dùng bấm Xác nhận

8 Hệ thống kiểm tra tính hợp lệ của thông tin khôi phục mật khẩu

9 Hệ thống thay đổi mật khẩu và thông báo thay đổi thành công

Mở rộng - Người dùng nhập Email không hợp lệ hoặc Email không tồn tại, hệ thống sẽ báo lỗi nhập liệu

- Người dùng nhập mật khẩu mới không hợp lệ, hoặc mật khẩu xác nhận không trùng mật khẩu mới, hệ thống báo lỗi nhập liệu

+ TH1: Người dùng hủy khôi phục mật khẩu

• Use Case Quản lý nhân viên:

Bảng 3.5 Use Case Quản lý nhân viên

Tên Use Case Quản lý nhân viên

Mô tả Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa thông tin của nhân viên

Tác nhân chính Chủ cửa hàng Điều kiện kích hoạt Người dùng truy cập vào trang Quản lý nhân viên

Tiền điều kiện Hệ thống kết nối thành công với cơ sở dữ liệu

Hậu điều kiện Hệ thống cập nhật lại nhân viên

1 Người dùng chọn vào tab quản lý nhân viên ở thanh điều hướng

2 Hệ thống sẽ hiển thị danh sách nhân viên lên màn hình

3 Người dùng nhập thông tin cần tìm kiếm vào thanh tìm kiếm

4 Hệ thống sẽ trả về kết quả tìm kiếm tương ứng

5 Người dùng chọn button Xem chi tiết

6 Hệ thống sẽ chuyển sang trang thông tin chi tiết của nhân viên

1 Người dùng nhấn vào biểu tượng thùng rác với từng nhân viên

2 Chọn xác nhận để xóa nhân viên

3 Hệ thống trả về kết quả thay đổi trạng thái của nhân viên đó và cập nhật lại danh sách nhân viên

1 Người dùng chọn chỉnh sửa trong trang chi tiết thông tin nhân viên

2 Thay đổi thông tin cần chỉnh sửa

4 Hệ thống trả về thông báo kết quả thay đổi thông tin và cập nhật lại danh sách nhân viên

1 Người dùng nhấn vào button thêm nhân viên

2 Hệ thống chuyển sang trang thêm nhân viên với các trường dữ liệu cần điền

3 Người dùng điền các trường tương ứng

4 Người dùng nhấn nút lưu để lưu lại thông tin

5 Hệ thống trả về thông báo kết quả cho người dùng và cập nhật lại danh sách nhân viên

6 Trong trường hợp thành công Hệ thống sẽ gửi email chứa mật khẩu tới email của nhân viên mới được tạo

- Người dùng không thể xóa chủ cửa hàng

- Người dùng cung cấp thông tin không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

+ TH1: Người dùng hủy thay đổi

+ TH2: Người dùng nhập lại thông tin

Use Case quay lại luồng phụ 2.3 đối với luồng chỉnh sửa nhân viên hoặc luồng phụ 3.4 đối với luồng thêm mới nhân viên

• Use Case Quản lý khách hàng:

Bảng 3.6 Use Case Quản lý khách hàng

Tên Use Case Quản lý khách hàng

Mô tả Quản lý việc tìm kiếm, xem, thông tin của khách hàng

Tác nhân chính Chủ cửa hàng, nhân viên Điều kiện kích hoạt Người dùng truy cập vào trang Quản lý khách hàng

1 Người dùng chọn vào tab quản lý khách hàng ở thanh điều hướng

2 Hệ thống sẽ hiển thị danh sách khách hàng lên màn hình

6 Hệ thống sẽ chuyển sang trang thông tin chi tiết của khách hàng

• Use Case Quản lý sản phẩm:

Bảng 3.7 Use Case Quản lý sản phẩm

Tên Use Case Quản lý sản phẩm

Mô tả Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa thông tin của sản phẩm

Tác nhân chính Chủ cửa hàng, nhân viên Điều kiện kích hoạt Người dùng truy cập vào trang Quản lý sản phẩm

Hậu điều kiện Hệ thống cập nhật lại sản phẩm

1 Người dùng chọn vào tab quản lý sản phẩm ở thanh điều hướng

2 Hệ thống sẽ hiển thị danh sách sản phẩm lên màn hình

6 Hệ thống sẽ chuyển sang trang thông tin chi tiết của sản phẩm

Luồng sự kiện phụ Luồng phụ 1:

1 Người dùng nhấn vào biểu tượng thùng rác với từng sản phẩm

2 Chọn xác nhận để tạm ngừng bán sản phẩm

3 Hệ thống trả về kết quả thay đổi trạng thái của sản phẩm đó và cập nhật lại danh sách sản phẩm

1 Người dùng chọn chỉnh sửa trong trang chi tiết thông tin sản phẩm

4 Hệ thống trả về thông báo kết quả thay đổi thông tin và cập nhật lại thông tin sản phẩm

1 Người dùng nhấn vào button thêm sản phẩm

2 Hệ thống chuyển sang trang thêm sản phẩm với các trường dữ liệu cần điền

4 Người dùng nhấn nút lưu để lưu lại thông tin sản phẩm

5 Hệ thống trả về thông báo kết quả cho người dùng và cập nhật lại danh sách sản phẩm

- Người dùng cung cấp thông tin sản phẩm không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

Use Case quay lại luồng phụ 2.3 đối với luồng chỉnh sửa sản phẩm hoặc luồng phụ 3.4 đối với luồng thêm mới sản phẩm

• Use Case Quản lý danh mục sản phẩm:

Bảng 3.8 UseCase Quản lý danh mục sản phẩm

Tên Use Case Quản lý danh mục sản phẩm

Mô tả Quản lý việc tìm kiếm, xem, thêm, xóa, chỉnh sửa danh mục sản phẩm

Tác nhân chính Chủ cửa hàng, nhân viên Điều kiện kích hoạt Người dùng truy cập vào trang Quản lý danh mục sản phẩm

Hậu điều kiện Hệ thống cập nhật lại danh mục sản phẩm

1 Người dùng chọn vào tab quản lý danh mục sản phẩm ở thanh điều hướng

2 Hệ thống sẽ hiển thị danh sách danh mục lên màn hình

6 Hệ thống sẽ mở form thông tin chi tiết của danh mục sản phẩm

1 Người dùng nhấn vào biểu tượng thùng rác với từng danh mục sản phẩm

2 Chọn xác nhận để xóa danh mục sản phẩm

3 Hệ thống trả về kết quả và cập nhật lại danh sách danh mục sản phẩm

1 Người dùng chọn chỉnh sửa trong form chi tiết thông tin danh mục sản phẩm

4 Hệ thống trả về thông báo kết quả thay đổi thông tin và cập nhật lại danh sách danh mục sản phẩm

1 Người dùng nhấn vào button thêm danh mục sản phẩm

2 Hệ thống mở form thêm danh mục sản phẩm với các trường dữ liệu cần điền

5 Hệ thống trả về thông báo kết quả cho người dùng và cập nhật lại danh sách danh mục sản phẩm

- Người dùng xóa danh mục sản phẩm đang chứa sản phẩm, hệ thống báo lỗi

- Người dùng cung cấp thông tin danh mục sản phẩm không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

Use Case quay lại luồng phụ 2.3 đối với luồng chỉnh sửa danh mục sản phẩm hoặc luồng phụ 3.4 đối với luồng thêm mới danh mục sản phẩm

• Use Case Quản lý khuyến mãi:

Bảng 3.9 Use Case Quản lý khuyến mãi

Tên Use Case Quản lý khuyến mãi

Quản lý khuyến mãi bao gồm các chức năng tìm kiếm, xem, thêm, xóa và chỉnh sửa thông tin khuyến mãi Đối tượng chính sử dụng hệ thống này là chủ cửa hàng và nhân viên Để kích hoạt các tính năng, người dùng cần truy cập vào trang Quản lý khuyến mãi.

Hậu điều kiện Hệ thống cập nhật lại khuyến mãi

1 Người dùng chọn vào tab quản lý khuyến mãi ở thanh điều hướng

2 Hệ thống sẽ hiển thị danh sách khuyến mãi lên màn hình

6 Hệ thống sẽ mở form thông tin chi tiết của khuyến mãi

1 Người dùng nhấn vào biểu tượng thùng rác với từng khuyến mãi

2 Chọn xác nhận để xóa khuyến mãi

3 Hệ thống trả về kết quả và cập nhật lại danh sách mã khuyến mãi

1 Người dùng chọn chỉnh sửa trong form chi tiết thông tin khuyến mãi

4 Hệ thống trả về thông báo kết quả thay đổi thông tin và cập nhật lại danh sách mã khuyến mãi

1 Người dùng nhấn vào button thêm khuyến mãi

2 Hệ thống mở form thêm khuyến mãi với các trường dữ liệu cần điền

5 Hệ thống trả về thông báo kết quả cho người dùng và cập nhật lại danh sách mã khuyến mãi

- Người dùng cung cấp thông tin khuyến mãi không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

Use Case quay lại luồng phụ 2.3 đối với luồng chỉnh sửa mã khuyến mãi hoặc luồng phụ 3.4 đối với luồng thêm mới mã khuyến mãi

• Use Case Quản lý đơn hàng:

Bảng 3.10 Use Case Quản lý đơn hàng

Tên Use Case Quản lý đơn hàng

Quản lý đơn hàng bao gồm việc tìm kiếm, xem và chỉnh sửa trạng thái của các đơn hàng Những người tham gia chính trong quy trình này là chủ cửa hàng và nhân viên Điều kiện để thực hiện các thao tác này là người dùng cần truy cập vào trang Quản lý đơn hàng.

Hậu điều kiện Hệ thống sẵn sàng để chỉnh sửa trạng thái đơn hàng

1 Người dùng chọn vào tab quản lý đơn hàng ở thanh điều hướng

2 Hệ thống sẽ hiển thị danh sách đơn hàng lên màn hình

6 Hệ thống sẽ chuyển sang trang thông tin chi tiết của đơn hàng

1 Người dùng đang trang thông tin chi tiết của đơn hàng

2 Người dùng thay đổi trạng thái trạng thái của đơn hàng

3 Sau khi nhấn xác nhận, hệ thống sẽ trả về kết quả và thay đổi trạng thái của đơn hàng

• Use Case Quản lý doanh thu:

Bảng 3.11 Use Case Quản lý doanh thu

Tên Use Case Quản lý doanh thu

Mô tả Theo dõi doanh thu của cửa hàng

Tác nhân chính Chủ cửa hàng, nhân viên Điều kiện kích hoạt Người dùng truy cập vào Trang chủ

1 Người dùng chọn vào tab quản lý trang chủ ở thanh điều hướng

2 Người dùng có thể xem được tổng sản phẩm, nhân viên, khách hàng, đơn đặt hàng, doanh thu bán hàng, top sản phẩm bán chạy, báo cáo sản phẩm đã bán theo doanh mục và số lượng đã bán với từng sản phẩm

1 Người dùng tùy chọn khoảng thời gian để xem doanh thu

2 Hệ thống hiển thị kết quả doanh thu tương ứng

• Use Case Quản lý thông tin cá nhân:

Bảng 3.12 Use Case Quản lý thông tin cá nhân

Tên Use Case Quản lý thông tin cá nhân

Mô tả Xem thông tin cá nhân, thay đổi thông tin cá nhân

Tác nhân chính Chủ cửa hàng, nhân viên Điều kiện kích hoạt Người dùng chọn vào avatar sau đó chọn thông tin cá nhân

1 Hệ thống hiển thị lên màn hình thông tin cá nhân của người dùng

1 Người dùng chọn chỉnh sửa trong trang chi tiết thông tin cá nhân

4 Hệ thống trả về thông báo kết quả thay đổi thông tin cá nhân

- Người dùng cung cấp thông tin cá nhân không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

Use Case quay lại luồng phụ 1.3

• Use Case Thay đổi mật khẩu:

Bảng 3.13 Use Case Thay đổi mật khẩu

Tên Use Case Thay đổi mật khẩu

Mô tả Thay đổi mật khẩu tài khoản

Tác nhân chính Chủ cửa hàng, nhân viên Điều kiện kích hoạt Trong trang thông tin cá nhân người dùng nhấn vào button thay đổi mật khẩu

1 Nhập thông tin vào các trường mật khẩu cũ, mật khẩu mới, xác nhận lại mật khẩu

2 Hệ thống trả về thông báo kết quả thay đổi mật khẩu Luồng sự kiện phụ Không

- Người dùng nhập mật khẩu cũ, mật khẩu mới hoặc xác nhận mật khẩu không hợp lệ, hệ thống sẽ báo lỗi nhập liệu

+ TH1: Người dùng hủy thay đổi mật khẩu

+ TH2: Người dùng nhập lại thông tin đăng nhập và bấm xác nhận

Bảng 3.14 Use Case Đăng nhập

Tên Use Case Đăng nhập

Mô tả Người dùng sử dụng tài khoản đã có để đăng nhập

Tác nhân chính Người dùng chưa đăng nhập Điều kiện kích hoạt

Người dùng ấn nút đăng nhập, hoặc đăng nhập với Google, hoặc Facebook

Tiền điều kiện Người dùng chưa đăng nhập trước đó hoặc đã đăng xuất Hậu điều kiện Người dùng đăng nhập vào trang web thành công

1 Người dùng truy cập vào trang đăng nhập

2 Người dùng nhập Email, mật khẩu và bấm nút đăng nhập

3 Hệ thống xác thực thông tin tài khoản thành công và chuyển người dùng về trang chủ

2.a Người dùng chọn đăng nhập với Google

3.a Người dùng lựa chọn tài khoản Google

Tiếp tục Use Case 12.3 2.b Người dùng chọn đăng nhập với Facebook

3.b Người dùng lựa chọn tài khoản Facebook

- Hệ thống xác thực thông tin tài khoản không thành công và hiển thị thông báo

+ TH2: Người dùng nhập lại thông tin tài khoản và bấm nút đăng nhập

Bảng 3.15 Use Case Đăng ký

Tên Use Case Đăng ký

Mô tả Người dùng tạo một tài khoản mới

Tác nhân chính Người dùng chưa đăng nhập Điều kiện kích hoạt Người dùng vào trang Đăng ký và nhấn nút đăng ký

Tiền điều kiện Người dùng chưa có tài khoản

Hậu điều kiện - Người dùng đăng ký tài khoản thành công

- Hệ thống lưu thông tin tài khoản mới vào dữ liệu

1 Người dùng truy cập vào trang đăng ký

2 Người dùng nhập họ tên, email, mật khẩu, xác nhận lại mật khẩu, số điện thoại, địa chỉ, giới tính, ngày sinh và bấm nút đăng ký

3 Hệ thống xác thực thông tin người dùng cung cấp là hợp lệ, tạo một tài khoản mới và chuyển người dùng về trang đăng nhập

2.a Người dùng đã có tài khoản và chọn đăng nhập Tiếp tục Use Case 13.2

- Hệ thống xác thực thông tin người dùng cung cấp không hợp lệ hoặc đã được sử dụng và hiển thị thông báo

+ TH1: Người dùng hủy đăng ký

+ TH2: Người dùng nhập lại thông tin tài khoản và bấm nút đăng nhập

• Use Case Quên mật khẩu:

Bảng 3.16 UseCase Quên mật khẩu

Tên Use Case Quên mật khẩu

Mô tả Cấp một mật khẩu mới cho tài khoản người dùng

Người dùng chưa đăng nhập là tác nhân chính khi họ chọn "Quên mật khẩu" trên trang đăng nhập Điều kiện kích hoạt cho hành động này là người dùng phải nhấn vào tùy chọn "Quên mật khẩu".

Hậu điều kiện - Người dùng cập nhật lại mật khẩu thành công

- Hệ thống lưu mật khẩu mới vào dữ liệu

1 Người dùng truy cập vào trang đăng nhập

2 Người dùng chọn “Quên mật khẩu”

3 Người dùng nhập email của tài khoản và bấm xác nhận

4 Hệ thống kiểm tra email tính hợp lệ của email, xác định email có tương ứng với tài khoản đã tồn tại hay không Nếu thỏa mãn tất cả các điều kiện trên, hệ thống gửi cho người dùng một email xác nhận

5 Người dùng bấm vào nút “Đặt lại mật khẩu” trong email và được chuyển đến trang thay đổi mật khẩu

6 Người dùng nhập mật khẩu mới, xác nhận mật khẩu mới và bấm xác nhận

7 Trang web thông báo thay đổi mật khẩu thành công và chuyển người dùng về trang đăng nhập

- Người dùng nhập email tài khoản không hợp lệ + TH1: Người dùng hủy quên mật khẩu

+ TH2: Người dùng nhập lại email Use Case quay lại 14.4

+ TH3: Người dùng quay lại trang đăng nhập Use Case quay lại 14.2

Các yêu cầu đặc biệt Không

• Use Case Thêm sản phẩm vào giỏ hàng:

Bảng 3.17 Use Case Thêm sản phẩm vào giỏ hàng

Tên Use Case Thêm sản phẩm vào giỏ hàng

Mô tả Lưu sản phẩm vào giỏ hàng

Tác nhân chính Người dùng chưa đăng nhập/đã đăng nhập Điều kiện kích hoạt

Người dùng bấm nút “Mua ngay” ở trang chi tiết sản phẩm hoặc bấm nút “Thêm vào giỏ hàng” trong drawer Danh sách yêu thích

Tiền điều kiện Sản phẩm chưa được thêm vào giỏ hàng

Hậu điều kiện - Người dùng thêm sản phẩm vào giỏ hàng thành công

- Hệ thống lưu lại thông tin giỏ hàng của người dùng

1 Người dùng truy cập vào trang chi tiết sản phẩm hoặc mở drawer Danh sách yêu thích

2 Người dùng thay đổi size và số lượng sản phẩm

3 Người dùng bấm “Mua ngay” (đối với trang chi tiết sản phẩm) hoặc “Thêm vào giỏ hàng” (đối với drawer Danh sách yêu thích)

4 Hệ thống thêm sản phẩm vào giỏ hàng

5 Nút “Thêm vào giỏ hàng” trong drawer Danh sách yêu thích sẽ được cập nhật thành “Đã thêm”

6 Hệ thống hiển thị thông báo thêm vào giỏ hàng thành công

Nếu sản phẩm muốn thêm vào giỏ hàng đã tồn tại và có cùng kích thước, hệ thống sẽ chỉ tăng số lượng sản phẩm đó Ngược lại, nếu sản phẩm mới chưa có trong giỏ hàng hoặc có kích thước khác, hệ thống sẽ thêm một sản phẩm mới vào giỏ hàng.

• Use Case Thêm sản phẩm vào Danh sách yêu thích:

Bảng 3.18 Use Case Thêm sản phẩm vào Danh sách yêu thích

Tên Use Case Thêm sản phẩm vào Danh sách yêu thích

Mô tả Lưu sản phẩm vào Danh sách yêu thích

Tác nhân chính Người dùng đã đăng nhập Điều kiện kích hoạt

Người dùng bấm vào biểu tượng hình trái tim ở trang chi tiết sản phẩm

Tiền điều kiện Sản phẩm chưa được thêm vào Danh sách yêu thích

- Người dùng thêm sản phẩm vào Danh sách yêu thích thành công

- Hệ thống lưu lại thông tin Danh sách yêu thích của người dùng

1 Người dùng truy cập vào trang chi tiết sản phẩm

2 Người dùng bấm vào biểu tượng hình trái tim

3 Hệ thống thêm sản phẩm vào Danh sách yêu thích và thông báo thêm thành công

Mở rộng 3.a Nếu sản phẩm đã tồn tại trong Danh sách yêu thích, hệ thống thông báo cho người dùng

• Use Case Xóa sản phẩm khỏi giỏ hàng:

Bảng 3.19 Use Case Xóa sản phẩm khỏi giỏ hàng

Tên Use Case Xóa sản phẩm khỏi giỏ hàng

Mô tả Xóa sản phẩm khỏi giỏ hàng

Người dùng bấm vào nút xóa tương ứng với mỗi sản phẩm trong giỏ hàng

Tiền điều kiện Sản phẩm nằm trong giỏ hàng

Hậu điều kiện - Sản phẩm không còn tồn tại trong giỏ hàng

- Hệ thống lưu lại thông tin giỏ hàng của người dùng

1 Người dùng bấm vào nút xóa

2 Hệ thống hiển thị thông báo để người dùng xác nhận họ có thực sự muốn xóa hay không

3 Người dùng xác nhận muốn xóa

4 Hệ thống thông báo xóa thành công và nút “Đã thêm” trong Danh sách yêu thích được cập nhật thành “Thêm vào giỏ hàng” (nếu sản phẩm còn trong Danh sách yêu thích)

Mở rộng 3.a Người dùng xác nhận hủy và use case dừng lại

• Use Case Xóa sản phẩm khỏi Danh sách yêu thích:

Bảng 3.20 Use Case Xóa sản phẩm khỏi Danh sách yêu thích

Tên Use Case Xóa sản phẩm khỏi Danh sách yêu thích

Mô tả Xóa sản phẩm khỏi Danh sách yêu thích

Người dùng bấm vào nút xóa tương ứng với mỗi sản phẩm trong Danh sách yêu thích

Tiền điều kiện Sản phẩm nằm trong Danh sách yêu thích

- Sản phẩm không còn tồn tại trong Danh sách yêu thích

- Hệ thống lưu lại thông tin Danh sách yêu thích của người dùng

1 Người dùng bấm vào nút xóa

2 Hệ thống hiển thị thông báo để người dùng xác nhận họ có thực sự muốn xóa hay không

3 Người dùng xác nhận muốn xóa

4 Hệ thống thông báo xóa thành công

Mở rộng - Người dùng xác nhận hủy

Bảng 3.21 Use Case Thanh toán

Tên Use Case Thanh toán

Mô tả Thực hiện thanh toán đơn hàng

Người dùng bấm vào nút “Thanh toán” trong drawer Giỏ hàng hoặc trong trang chi tiết giỏ hàng

Tiền điều kiện Đơn hàng chưa được thanh toán

- Giỏ hàng không còn sản phẩm nào

- Đơn hàng được lưu vào lịch sử đặt hàng của người dùng nếu người dùng đã đăng nhập

- Hệ thống lưu lại thông tin thông tin đơn hàng

1 Người dùng mở drawer Giỏ hàng hoặc truy cập trang chi tiết giỏ hàng

2 Người dùng bấm thanh toán và được chuyển đến bước đăng nhập

3 Người dùng đăng nhập thành công và được chuyển đến bước điền thông tin đặt hàng

4 Người dùng cung cấp đầy đủ thông tin, bấm thanh toán và được chuyển đến bước chọn phương thức thanh toán

5 Người dùng chọn phương thức thanh toán bằng VNPay và được chuyển đến trang thanh toán trực tuyến của VNPay

6 Người dùng thanh toán thành công và được chuyển trở lại trang thông báo thanh toán thành công

3.a Người dùng chọn mua hàng mà không cần đăng nhập và được chuyển đến bước điền thông tin đặt hàng

4.a Người dùng chọn địa chỉ giao hàng có sẵn và được chuyển đến bước chọn phương thức thanh toán

5.a Người dùng chọn phương thức thanh toán khi nhận hàng và được chuyển đến trang thông báo đặt hàng thành công Use Case dừng lại

- Người dùng điền thông tin đặt hàng không hợp lệ + TH1: Người dùng thoát khỏi quy trình thanh toán Use Case dừng lại

+ TH2: Người dùng nhập lại thông tin và bấm thanh toán Use Case quay lại 19.5

- Người dùng thanh toán trực tuyến không thành công + TH1: Người dùng thoát khỏi quy trình thanh toán Use Case dừng lại

+ TH2: Người dùng thực hiện thanh toán lại Use Case quay lại 19.6

• Use Case Quản lý mã khuyến mãi:

Bảng 3.22 Use Case Quản lý mã khuyến mãi

Tên Use Case Quản lý mã khuyến mãi

Mô tả Quản lý danh sách mã khuyến mãi

Người dùng truy cập vào trang quản lý thông tin tài khoản và chọn mục “Ưu đãi của bạn”

Tiền điều kiện Người dùng ở trang quản lý thông tin tài khoản

Hậu điều kiện Hệ thống hiển thị danh sách mã khuyến mãi người dùng đã lưu

1 Người dùng truy cập vào trang quản lý thông tin tài khoản

2 Người dùng chọn mục “Ưu đãi của bạn”

3 Trang web hiển thị danh sách mã khuyến mãi người dùng đã lưu trước đó

3.a Người dùng xóa mã khuyến mãi 4.a Hệ thống xóa mã khuyến mãi khỏi danh sách

• Use Case Tìm kiếm sản phẩm:

Bảng 3.23 Use Case Tìm kiếm sản phẩm

Tên Use Case Tìm kiếm sản phẩm

Mô tả Người dùng tìm kiếm sản phẩm

Tác nhân chính Người dùng chưa đăng nhập/đã đăng nhập Điều kiện kích hoạt Người dùng bấm vào icon hình kính lúp

Hậu điều kiện Hệ thống hiển thị danh sách sản phẩm liên quan đến từ khóa tìm kiếm

1 Người dùng bấm vào icon hình kính lúp ở đầu trang

2 Người dùng nhập từ khóa cần tìm kiếm

3 Hệ thống hiển thị danh sách sản phẩm liên quan đến từ khóa

3.a Người dùng chọn một từ khóa được gợi ý sẵn

4.a Hệ thống cập nhật lại danh sách sản phẩm tương ứng

• Use Case Xem danh sách sản phẩm:

Bảng 3.24 Use Case Xem danh sách sản phẩm

Tên Use Case Xem danh sách sản phẩm

Mô tả Người dùng muốn xem danh sách sản phẩm

Tác nhân chính Người dùng chưa đăng nhập/đã đăng nhập Điều kiện kích hoạt Người dùng bấm vào nút xem tất cả

Tiền điều kiện Người dùng ở trang chủ

Hậu điều kiện - Người dùng được chuyển đến trang danh sách sản phẩm

- Hệ thống hiển thị danh sách sản phẩm tương ứng

1 Người dùng bấm vào nút xem tất cả dưới mỗi loại sản phẩm ở trang chủ

2 Người dùng được chuyển đến trang danh sách sản phẩm

3 Hệ thống hiển thị danh sách sản phẩm tương ứng

• Use Case Xem chi tiết sản phẩm:

Bảng 3.25 Use Case Xem chi tiết sản phẩm

Tên Use Case Xem chi tiết sản phẩm

Mô tả Người dùng muốn xem thông tin về sản phẩm

Tác nhân chính Người dùng chưa đăng nhập/đã đăng nhập Điều kiện kích hoạt Người dùng bấm vào một sản phẩm bất kỳ

Hậu điều kiện Hệ thống hiển thị thông tin chi tiết sản phẩm

1 Người dùng bấm vào một sản phẩm bất kỳ

2 Người dùng được chuyển đến trang chi tiết sản phẩm

3 Hệ thống hiển thị thông tin chi tiết sản phẩm

• Use Case Gửi yêu cầu tư vấn:

Bảng 3.26 Use Case Gửi yêu cầu tư vấn

Tên Use Case Gửi yêu cầu tư vấn

Mô tả Người dùng muốn được tư vấn, giải đáp vấn đề

Người dùng bấm vào biểu tượng Messenger ở góc dưới bên phải trang web

Hậu điều kiện Hệ thống hiển thị câu trả lời về những thắc mắc của khách hàng

1 Người dùng bấm vào biểu tượng Messenger ở góc dưới bên phải trang web

2 Hiện thống hiển thị một popup để người dùng tương tác với chatbot

3 Người dùng sử dụng tài khoản Facebook để sử dụng chatbot

4 Người dùng gửi câu hỏi

5 Hệ thống gửi câu hỏi đến ChatGPT,

6 ChatGPT dựa vào thông tin của cửa hàng để trả lời câu hỏi và gửi câu trả lời lại cho chatbot

7 Hệ thống hiển thị câu trả lời

3.a Người dùng chọn sử dụng chatbot với tư khách là khách và không đăng nhập Facebook

• Use Case Quản lý thông tin cá nhân:

Bảng 3.27 Use Case Quản lý thông tin cá nhân

Tên Use Case Quản lý thông tin cá nhân

Mô tả Người dùng thay đổi thông cá nhân

Người dùng chọn mục “Thông tin tài khoản” ở trang quản lý thông tin tài khoản

Hậu điều kiện - Người dùng thay đổi thông tin thành công

- Hệ thống lưu lại thông tin mới của người dùng

1 Người dùng truy cập trang quản lý thông tin tài khoản

2 Người dùng chọn mục “Thông tin tài khoản”

3 Người dùng thay đổi thông tin cá nhân hoặc mật khẩu

4 Người dùng nhấn nút lưu

5 Hệ thống xác thực thông tin người dùng cung cấp là hợp lệ, lưu lại thông tin mới và thông báo lưu thành công

- Người dùng cung cấp thông tin không hợp lệ

• Use Case Quản lý địa chỉ giao hàng:

Bảng 3.28 Use Case Quản lý địa chỉ giao hàng

Tên Use Case Quản lý địa chỉ giao hàng

Mô tả Người dùng quản lý sổ địa chỉ dùng cho việc đặt hàng Tác nhân chính Người dùng đã đăng nhập Điều kiện kích hoạt

Người dùng chọn mục “Địa chỉ giao hàng” ở trang quản lý thông tin tài khoản

Hậu điều kiện Hệ thống hiển thị danh sách địa chỉ người dùng đã thêm trước đó

2 Người dùng chọn mục “Địa chỉ giao hàng”

3 Người dùng thêm/xóa/sửa địa chỉ

4 Hệ thống xác thực thông tin người dùng cung cấp là hợp lệ, lưu lại thông tin và thông báo thành công

- Người dùng xác nhận thao tác xóa địa chỉ

+ TH1: Người dùng hủy Use Case dừng lại

+ TH2: Người dùng xác nhận xóa Use Case quay lại 26.4

- Người dùng cung cấp thông tin địa chỉ không hợp lệ + TH1: Người dùng hủy thay đổi

+ TH2: Người dùng nhập lại thông tin địa chỉ Use Case quay lại 26.4

• Use Case Xem lịch sử mua hàng:

Bảng 3.29 Use Case Xem lịch sử mua hàng

Tên Use Case Xem lịch sử mua hàng

Mô tả Người dùng muốn xem lại danh sách đơn hàng đã đặt Tác nhân chính Người dùng đã đăng nhập Điều kiện kích hoạt

Người dùng chọn mục “Lịch sử mua hàng” ở trang quản lý thông tin tài khoản

Hậu điều kiện Hệ thống hiển thị lịch sử mua hàng của người dùng

2 Người dùng chọn mục “Lịch sử mua hàng”

4 Hệ thống hiển thị một bảng lịch sử mua hàng chứa thông tin chi tiết của từng đơn hàng

• Use Case Lưu mã khuyến mãi:

Bảng 3.30 Use Case Lưu mã khuyến mãi

Tên Use Case Lưu mã khuyến mãi

Mô tả Người dùng muốn lưu lại mã khuyến mãi

Tác nhân chính Người dùng đã đăng nhập Điều kiện kích hoạt Người dùng bấm nút tương ứng với mỗi mã khuyến mãi

Tiền điều kiện Mã ưu đãi chưa tồn tại trong danh sách ưu đãi của người dùng

Hậu điều kiện - Người dùng lưu mã khuyến mãi thành công

- Hệ thống lưu lại danh sách mã khuyến mãi của người dùng

1 Người dùng truy cập trang khuyến mãi

2 Người dùng bấm lưu khuyến mãi

3 Hệ thống lưu lại mã khuyến mãi vào danh sách khuyến mãi của người dùng và thông báo lưu thành công

Thiết kế dữ liệu

3.4.2 Mô tả các bảng dữ liệu:

Bảng 3.31 Mô tả chi tiết bảng Account

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 _id ObjectId PK Mã tài khoản

2 username String Not Null Tên tài khoản

3 password String Not Null Mật khẩu

Mã đặc biệt dùng để khôi phục mật khẩu tài khoản

5 resetTokenExpi ration Date Not Null Thời gian mà mã còn hiệu lực

Bảng 3.32 Mô tả chi tiết bảng Customer

1 _id ObjectId PK Mã khách hàng

2 account ObjectId FK, Not Null Mã tài khoản của khách hàng

3 orders String FK, Not Null Danh sách đơn đặt hàng của khách hàng

4 wishlist Array Not Null Danh sách sản phẩm yêu thích

5 promotions Array FK, Not Null Danh sách mã khuyến mãi

6 cart Array FK, Not Null Danh sách sản phẩm trong giỏ hàng

7 name String Not Null Tên khách hàng

8 address Array Not Null Danh sách địa chỉ

9 email String Not Null Email

10 phone String Not Null Số điện thoại

11 gender String Not Null Giới tính

12 birthday Date Not Null Ngày sinh

13 verified Boolean Not Null Xác thực

Bảng 3.33 Mô tả chi tiết bảng Cart

1 _id ObjectId PK Mã sản phẩm trong giỏ hàng

2 productId ObjectId FK, Not Null Mã sản phẩm

3 size String Not Null Size của sản phẩm

4 quantity Number Not Null Số lượng của sản phẩm

Bảng 3.34 Mô tả chi tiết bảng Address

1 _id ObjectId PK Mã địa chỉ

2 name String Not Null Tên người nhận

3 phone String Not Null Số điện thoại người nhận

4 city String Not Null Tỉnh

5 district String Not Null Huyện

6 ward String Not Null Phường

7 detail String Not Null Địa chỉ nhà

8 isDefault Boolean Not Null Có phải là địa chỉ mặc định

Bảng 3.35 Mô tả chi tiết bảng Category

1 _id ObjectId PK Mã danh mục sản phẩm

2 types Array FK, Not Null Danh sách loại danh mục

3 products Array FK, Not Null Danh sách sản phẩm có liên quan

Bảng 3.36 Mô tả chi tiết bảng Type

1 _id ObjectId PK Mã loại danh mục sản phẩm

2 type String Not Null Tên loại danh mục

3 products Array FK, Not Null Danh sách sản phẩm có liên quan

Bảng 3.37 Mô tả chi tiết bảng Order

1 _id ObjectId PK Mã đơn hàng

2 customer ObjectId FK, Not Null Mã khách hàng đã đặt hàng

3 toName String Not Null Tên người nhận

4 toPhone String Not Null Số điện thoại người nhận

5 toEmail String Not Null Email người nhận

6 toAddress String Not Null Địa chỉ người nhận

7 toNote String Ghi chú của người nhận

8 products Array FK, Not Null Danh sách sản phẩm đã mua

9 totalProductsPrice Number Not Null Tông tiền

10 shippingMethod String Not Null Phương thức giao hàng

11 shippingStatus String Not Null Trạng thái giao hàng

12 paymentMethod String Not Null Phương thức thanh toán

13 paymentStatus String Not Null Trạng thái thanh toán

14 companyName String Tên công ty

15 companyAddress String Địa chỉ công ty

16 companyTaxNum ber String Mã thuế công ty

Bảng 3.38 Mô tả chi tiết bảng Product

1 _id ObjectId PK Mã sản phẩm

2 name String Not Null Tên sản phẩm

3 category ObjectId FK, Not Null Mã danh mục sản phẩm

4 price Number Not Null Giá sản phẩm

5 oldPrice Number Giá cũ (trước khi giảm giá) của sản phẩm

6 description String Not Null Mô tả sản phẩm

7 images Array FK, Not Null

Mã tham chiếu đến danh sách hình ảnh sản phẩm

8 sizes Array FK, Not Null

Mã tham chiếu đến danh sách size sản phẩm

9 totalSold Number Tổng số lượng sản phẩm đã bán

10 state String Trạng thái mở bán của sản phẩm

Bảng 3.39 Mô tả chi tiết bảng Promotion

1 _id ObjectId PK Mã khuyến mãi

2 name String Not Null Tên khuyến mãi

3 description String Not Null Mô tả khuyến mãi

4 percentage Number Not Null Phần trăm khuyến mãi

Giá tiền tối thiểu của đơn hàng để đủ điều kiện áp dụng mã khuyến mãi

6 amount Number Not Null Số lượng mã khuyến mãi phát hành

7 startDate Date Not Null Ngày bắt đầu áp dụng

8 endDate Date Not Null Ngày mã khuyến mãi hết hiệu lực

9 expired Boolean Not Null Mã khuyến mãi đã hết hạn sử dụng hay chưa

Bảng 3.40 Mô tả chi tiết bảng Receipt

1 _id ObjectId PK Mã phiếu nhập hàng

2 supplier String Not Null Tên nhà cung cấp

3 staff ObjectId FK, Not Null Mã nhân viên chịu trách nhiệm nhập hàng

4 date Date Not Null Ngày nhập hàng

5 deliver String Người giao hàng

6 products Array FK, Not Null

Mã tham chiếu đến danh sách sản phẩm của phiếu nhập hàng

Bảng 3.41 Mô tả chi tiết bảng Role

1 _id ObjectId PK Mã vai trò

2 name String Not Null Tên vai trò

Bảng 3.42 Mô tả chi tiết bảng Staff

1 _id ObjectId PK Mã nhân viên

2 account ObjectId FK Mã tài khoản của nhân viên

3 role ObjectId FK, Not Null Mã vai trò của nhân viên

4 name String Not Null Tên nhân viên

5 address String Not Null Địa chỉ nhân viên

6 email String Not Null Địa chỉ email

7 phone String Not Null Số điện thoại

8 gender String Not Null Giới tính

9 birthday Date Not Null Ngày sinh

10 status String Tình trạng làm việc

Bảng 3.43 Mô tả chi tiết bảng ProductImage

1 _id ObjectId PK Mã hình ảnh sản phẩm

2 mainImg String Not Null Url của hình ảnh

3 subImg String Not Null Url của hình ảnh

Bảng 3.44 Mô tả chi tiết bảng ProductSize

1 _id ObjectId PK Mã size sản phẩm

2 name String Not Null Tên size

3 quantity Number Not Null Tổng số lượng sản phẩm

4 sold Number Not Null Số lượng sản phẩm đã bán

Bảng 3.45 Mô tả chi tiết bảng ProductReceipt

1 _id ObjectId PK Mã sản phẩm của hóa đơn

2 productId ObjectId FK, Not Null Mã sản phẩm

3 sizes Array Not Null Danh sách size của sản phẩm

4 importPrice Number Not Null Giá nhập của sản phẩm

TRIỂN KHAI ỨNG DỤNG

TỔNG KẾT

Tiêu đề	Đồ án xây dựng website bán quần áo
Tác giả	Trần Đình Khôi, Bùi Minh Tuấ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 - Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	đồ án
Năm xuất bản	2023
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	129
Dung lượng	5,18 MB