Đối tượng nghiên cứu của đề tài Đề tài tập trung nghiên cứu vào ba đối tượng sử dụng chính của hệ thống website bao gồm: - Người sử dụng cuối: Bao gồm những người trực tiếp sử dụng hệ t
Tính cấp thiết của đề tài
Dân số Việt Nam đang trong giai đoạn dân số vàng, với tỷ lệ gia tăng dân số tự nhiên vẫn ở mức cao Điều này dẫn đến nhu cầu về nhà ở, căn hộ, văn phòng, tăng mạnh Đồng thời, nền kinh tế Việt Nam đang phát triển ổn định, thu nhập của người dân ngày càng được cải thiện, tạo điều kiện cho họ chi tiêu nhiều hơn cho các sản phẩm nội thất Lối sống của con người hiện nay cũng có xu hướng thay đổi theo hướng hiện đại và tiện nghi hơn, đòi hỏi những sản phẩm nội thất có thể tích hợp nhiều tính năng, giúp tiết kiệm không gian và thời gian sử dụng
Trong thời đại công nghệ số, việc tham gia vào các hoạt động kinh doanh trên các nền tảng thương mại điện tử không chỉ trở nên quan trọng mà còn là yếu tố quyết định đến sự thành công của các doanh nghiệp trong ngành này Sự gia tăng về tính tiện lợi, nhanh chóng và đa dạng trong lựa chọn sản phẩm đã thúc đẩy nhu cầu mua sắm trực tuyến phát triển không ngừng Môi trường kinh doanh ngày càng chuyển hướng từ truyền thống sang trực tuyến, đặt ra yêu cầu cao về sự tiện lợi và tính linh hoạt
Việc xây dựng một hệ thống website sàn thương mại điện tử bán bán đồ nội thất sẽ giúp khách hàng dễ dàng truy cập, tìm kiếm sản phẩm, và thực hiện giao dịch mọi lúc, mọi nơi Hơn thế nữa, một hệ thống website tốt sẽ mở rộng thị trường, tiếp cận khách hàng trên khắp các khu vực, tăng cơ hội kinh doanh và tạo ra nguồn thu nhập đáng kể cho các cửa hàng vừa và nhỏ hay các doanh nghiệp lớn Ngoài ra, hệ thống còn tối ưu hóa việc quản lý khách hàng, sản phẩm, theo dõi đơn hàng một cách hiệu quả hơn thông qua các công cụ quản trị tiện ích
Nhận thấy được tiềm năng và lợi ích mà một hệ thống website thương mại điện tử mang lại, nhóm chúng tôi đã quyết định lựa chọn đề tài “Xây dựng sàn thương mại điện tử bán hàng nội thất Fnest” làm mục tiêu nghiên cứu và phát triển cho đồ án tốt nghiệp của mình
Mục đích của đề tài
Xây dựng một hệ thống website sàn thương mại điện tử bán đồ nội thất với đầy đủ chức năng của một sàn thương mại điện tử Hệ thống website được sử dụng cho khách hàng, người bán và quản trị viên hệ thống
Xây dựng website với giao diện thân thiện, thao tác dễ dàng, tiện dụng Ngoài ra, đảm bảo giao diện theo xu hướng hiện đại, truy cập được trên đa thiết bị
Hệ thống xử lý đảm bảo tính chính xác, tốc độ, hiệu suất cao, có tính bảo trì, nâng cấp và mở rộng dễ dàng.
Phương pháp thực hiện đề tài
- Thực hiện khảo sát các hệ thống website tương tự, rút ra được ưu nhược điểm để phát triển đề tài
- Tham khảo ý kiến, đóng góp, đề xuất của GVHD
- Thu thập thông tin về nhu cầu sử dụng, yêu cầu chức năng, yêu cầu kiến thức và kỹ năng thực hiện đề tài
- Tìm hiểu công nghệ hiện đại, tối ưu hiệu suất để triển khai vào hệ thống.
Kết quả dự kiến đạt được
- Xây dựng được hệ thống sàn thương mại điện tử bán đồ nội thất đầy đủ các tính năng theo mô tả yêu cầu
- Đáp ứng được các vấn đề liên quan đến bảo mật thông tin, hiệu suất, lưu trữ chính xác, hiệu quả và đáng tin cậy
- Giao diện thân thiện, đẹp, đảm bảo truy cập trên đa thiết bị, thao tác dễ dàng, tiện lợi, nhanh chóng, đáp ứng đầy đủ nhu cầu khách hàng.
CƠ SỞ LÝ THUYẾT
Ngôn ngữ lập trình Java
Java là một ngôn ngữ lập trình được phát triển bởi công ty Sun Microsystems Ngôn ngữ này đã được khởi đầu và phát triển dưới sự lãnh đạo của James Gosling Java đã ra mắt vào năm 1995 như một phần quan trọng của nền tảng Java của Sun Microsystems, và phiên bản đầu tiên của nó được gọi là Java 1.0 hoặc J2SE (Java 2 Platform, Standard Edition)
Phiên bản mới nhất của Java Standard Edition (SE) là Java SE 8 Với sự phát triển của Java và sự phổ biến rộng rãi của ngôn ngữ này, nhiều cấu hình khác nhau đã được xây dựng để phù hợp với các loại nền tảng khác nhau Ví dụ, J2EE được sử dụng cho ứng dụng doanh nghiệp, còn J2ME được sử dụng cho ứng dụng di động
Các phiên bản J2 mới đã được đổi tên thành Java SE, Java EE và Java ME tương ứng Java được đảm bảo có khả năng "Viết Một Lần, Chạy Ở Bất Kỳ Nơi Nào." Điều này có nghĩa là mã Java có thể được viết một lần và chạy trên nhiều nền tảng khác nhau mà không cần phải sửa đổi
- Hướng đối tượng: Trong Java, mọi thứ được coi là đối tượng Java được thiết kế dựa trên mô hình hướng đối tượng, Usecase này cho phép việc mở rộng mã nguồn dễ dàng
- Độc lập nền tảng: Mã Java được biên dịch thành mã bytecode độc lập với nền tảng, có thể chạy trên nhiều nền tảng khác nhau thông qua máy ảo (JVM)
- Đơn giản: Java được thiết kế để dễ học và hiểu, đặc biệt đơn giản nếu đã nắm vững các khái niệm cơ bản của lập trình hướng đối tượng
- An toàn: Java có tính năng bảo mật mạnh mẽ, Usecase này cho phép phát triển các hệ thống không bị nhiễm virus và an toàn trước các cuộc tấn công
- Phân tán: Java được thiết kế để hoạt động trong môi trường phân tán của internet
1 Tài liệu tham khảo [4] Introduction to Java
- Mạnh mẽ: Java tập trung vào kiểm tra lỗi ở cả thời gian biên dịch và thời gian chạy, giúp ngăn ngừa nhiều tình huống lỗi
- Đa luồng: Java hỗ trợ đa luồng, Usecase này cho phép viết các ứng dụng có khả năng thực hiện nhiều nhiệm vụ cùng một lúc
- Thông dịch: Mã bytecode Java được biên dịch ngay lập tức thành mã máy tại thời điểm thực thi, không cần lưu trữ trước
- Hiệu suất cao: Java sử dụng JIT compilers để biên dịch mã bytecode thành mã máy tại thời điểm thực thi Điều này có nghĩa rằng mã bytecode được tối ưu hóa và thích nghi với nền tảng cụ thể mà ứng dụng Java đang chạy trên Khi mã được biên dịch thành mã máy, nó thường chạy nhanh hơn và hiệu suất cao hơn so với việc thông dịch mã nguồn
- Linh hoạt: Java được coi là linh hoạt hơn so với C hoặc C++ vì nó được thiết kế để thích nghi với môi trường phát triển Các chương trình Java sở hữu lượng lớn thông tin tại runtime có thể được sử dụng để xác minh hay giải quyết các truy cập vào các đối tượng tại runtime
- Hiệu suất kém: Java tốn nhiều bộ nhớ và chạy chậm hơn so với các ngôn ngữ gần máy tính như C/C++
- Giao diện người dùng không hấp dẫn: Tạo giao diện người dùng đẹp và phức tạp trong Java có thể gặp khó khăn và không đồng nhất
- Thiếu tính năng sao lưu dữ liệu: Java không tập trung vào sao lưu dữ liệu, điều này làm mất điểm trong việc quản lý dữ liệu
- Yêu cầu nhiều bộ nhớ: Java đòi hỏi nhiều bộ nhớ hơn so với các ngôn ngữ khác và có thể ảnh hưởng đến hiệu suất trong quá trình thu gom rác
- Mã lập trình phức tạp: Mã Java thường dài và phức tạp, làm giảm tính đọc hiểu của mã
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
Spring Framework
1.2.1 Tổng quan về Spring Framework 2
Spring là framework phát triển ứng dụng phổ biến nhất cho Java doanh nghiệp Hàng triệu nhà phát triển trên khắp thế giới sử dụng Spring Framework để tạo mã hiệu suất cao, dễ kiểm tra và có thể tái sử dụng
Spring framework là một nền tảng Java mã nguồn mở Ban đầu được viết bởi Rod Johnson và được phát hành lần đầu dưới giấy phép Apache 2.0 vào tháng 6 năm
Spring nhẹ nhàng về kích thước và có tính minh bạch cao Phiên bản cơ bản của spring framework có kích thước khoảng 2MB
Các tính năng chính của Spring Framework có thể được sử dụng để phát triển bất kỳ ứng dụng Java nào, nhưng cũng có các phần mở rộng để xây dựng ứng dụng web trên nền tảng Java EE Spring framework hướng đến mục tiêu là làm cho việc phát triển J2EE dễ dàng hơn và thúc đẩy các quy tắc lập trình tốt thông qua việc kích hoạt mô hình lập trình POJO
Spring là một hệ thống module Usecase này cho phép lựa chọn những module nào phù hợp mà không cần phải sử dụng tất cả Spring cung cấp khoảng 20 module khác nhau có thể sử dụng dựa trên yêu cầu của ứng dụng
Spring được xây dựng dựa trên 2 khái niệm nền tảng là Dependency injection và AOP (Aspect Oriented Programming)
Một vài lợi ích nổi bật của spring framework:
- Spring cho phép nhà phát triển phát triển ứng dụng doanh nghiệp sử dụng các đối tượng POJO (Plain Old Java Objects) Lợi ích của việc sử dụng chỉ POJOs là không cần một sản phẩm container EJB như một máy chủ ứng dụng, mà có thể chọn sử dụng chỉ một máy chủ servlet mạnh như Tomcat hoặc một số sản phẩm thương mại khác
- Web framework của spring mà một MVC web framework được thiết kế tốt, cung cấp một lựa chọn tốt hơn so với các web framework khác như Struts hoặc các web framework quá phức tạp hoặc ít phổ biến khác
- Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các logging framework, JEE, các thư viện tạo lịch trình (Quartz và JDK timer)…
2 Tài liệu tham khảo [3] Spring Framework
- Kiểm thử ứng dụng viết bằng Spring đơn giản vì mã phụ thuộc vào môi trường được chuyển vào khung làm việc này Hơn nữa, bằng cách sử dụng JavaBean-style POJOs, việc sử dụng dependency injection để chèn dữ liệu kiểm thử trở nên dễ dàng
Spring Boot là một công cụ mã nguồn mở được sử dụng để phát triển ứng dụng Java dễ dàng hơn bằng cách sử dụng các framework dựa trên Java để tạo ra các dịch vụ nhỏ (microservice) và ứng dụng web Nó được phát triển dựa trên nền tảng Java và được thiết kế để giúp các nhà phát triển tạo ra các ứng dụng một cách nhanh chóng và hiệu quả
Spring Boot có các đặc điểm chính sau đây:
- Tích hợp sẵn: Spring Boot tích hợp sẵn các framework và thư viện phổ biến như Spring Framework, Spring Data, và Spring Security, giúp giảm thiểu công việc tích hợp và cấu hình
- Cấu hình tự động: Nó cung cấp cấu hình tự động dựa trên tiêu chuẩn và quy ước, giúp giảm bớt việc cấu hình thủ công và tối ưu hóa việc sử dụng các giá trị mặc định
- Máy chủ nhúng: Spring Boot đi kèm với các máy chủ nhúng như Tomcat, Jetty hoặc Undertow, loại bỏ nhu cầu phải cài đặt máy chủ ngoài cùng và Usecase này cho phép triển khai ứng dụng dễ dàng
- Quản lý dependencies: Nó cung cấp quản lý dependencies thông qua công cụ quản lý dự án như Maven hoặc Gradle, giúp bạn quản lý các phiên bản thư viện và dependencies một cách dễ dàng
- Annotation-based: Spring Boot sử dụng các Annotation để đánh dấu và cấu hình các thành phần của ứng dụng, giúp làm cho mã nguồn trở nên dễ đọc và dễ hiểu hơn
- Tích hợp dễ dàng với các công cụ phát triển: Nó có tích hợp tốt với các công cụ phát triển như Spring Tool Suite (STS) và IntelliJ IDEA, giúp tạo và quản lý dự án dễ dàng hơn
- Giảm thiểu boilerplate code: Spring Boot giúp giảm đi lượng mã boilerplate, giúp bạn tập trung vào viết mã chức năng thay vì việc cấu hình và khởi tạo các thành phần cơ bản
3 Tài liệu tham khảo [5] Spring Boot - Introduction
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
Restful API
RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) tuân theo các nguyên tắc của REST (REpresentational State Transfer), để tiện cho việc quản lý các resource Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP
RESTful API sử dụng các phương thức HTTP để thực hiện các tác vụ trên các tài nguyên Các phương thức HTTP phổ biến được sử dụng trong RESTful API bao gồm:
4 Tài liệu tham khảo [1] Restful API là gì?
- GET: Trả về dữ liệu về một tài nguyên
- POST: Tạo một tài nguyên mới
- PUT: Cập nhật một tài nguyên hiện có
- DELETE: Xóa một tài nguyên
RESTful API có một số ưu điểm như: Dễ sử dụng và dễ hiểu, hiệu quả và hiệu suất cao, có thể mở rộng và linh hoạt Đây là một công cụ quan trọng cho các nhà phát triển ứng dụng RESTful API giúp các ứng dụng có thể giao tiếp với nhau một cách hiệu quả và dễ dàng
Hình 1 2 Cấu trúc RESTful API
Python
1.4.1 Tổng quan về Python và Flask 5
Python là một ngôn ngữ lập trình mạnh mẽ và linh hoạt, được thiết kế với mục tiêu dễ đọc và dễ viết Được phát triển bởi Guido van Rossum và ra mắt lần đầu vào năm 1991, Python đã nhanh chóng trở thành một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới nhờ cú pháp rõ ràng, thư viện phong phú và khả năng mở rộng cao Một số tính năng nổi bật của Python bao gồm:
- Đa nền tảng: Python có thể chạy trên nhiều hệ điều hành khác nhau như Windows, macOS, và Linux
- Thư viện phong phú: Python có sẵn nhiều thư viện và framework giúp lập trình viên dễ dàng phát triển các ứng dụng từ web, dữ liệu lớn đến trí tuệ nhân tạo
- Dễ học và sử dụng: Cú pháp của Python đơn giản và dễ hiểu, làm cho nó trở thành ngôn ngữ lý tưởng cho người mới bắt đầu học lập trình
5 Tài liệu tham khảo [7] - Python flask introduction
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
Flask là một microframework cho Python được thiết kế để giúp lập trình viên xây dựng các ứng dụng web một cách dễ dàng và nhanh chóng Flask được phát triển bởi Armin Ronacher và ra mắt vào năm 2010 Một số đặc điểm chính của Flask bao gồm:
- Nhẹ và mô-đun hóa: Flask không đi kèm với nhiều tính năng mặc định như các framework lớn khác, cho phép lập trình viên tự do lựa chọn và tích hợp các module cần thiết cho dự án của mình
- Dễ sử dụng: Flask có cú pháp đơn giản và trực quan, giúp lập trình viên dễ dàng khởi tạo và quản lý các ứng dụng web
- Khả năng mở rộng: Dù là một microframework, Flask vẫn hỗ trợ mở rộng thông qua các plugin và extension, cho phép lập trình viên thêm vào các tính năng như quản lý cơ sở dữ liệu, xác thực người dùng, và nhiều hơn nữa
1.4.2 Thuật toán ALS (Alternating Least Squares) 6
ALS (Alternating Least Squares) là một thuật toán phân rã ma trận được sử dụng phổ biến trong hệ thống gợi ý, đặc biệt là với dữ liệu implicit feedback (phản hồi ngầm), như số lượng mua hàng, lượt xem sản phẩm, hoặc các tương tác không có đánh giá rõ ràng Thuật toán này giúp tìm ra các yếu tố tiềm ẩn từ dữ liệu tương tác của người dùng và sản phẩm, từ đó đưa ra gợi ý chính xác
- Bước 1 - Phân rã ma trận: ALS phân rã ma trận đánh giá R thành hai ma trận yếu tố người dùng U và sản phẩm V Mục tiêu là tối ưu hóa các ma trận này để R ≈ UV T
- Bước 2 - Tối ưu hóa xen kẽ: ALS tối ưu hóa xen kẽ các ma trận U và V Đầu tiên, giữ U cố định và tối ưu hóa V bằng cách giải các bài toán hồi quy tuyến tính Sau đó, giữ V cố định và tối ưu hóa U theo cách tương tự Quá trình này lặp lại cho đến khi hội tụ
Dữ liệu đầu vào: Ma trận tương tác người dùng và sản phẩm, với các giá trị biểu thị số lượng hoặc mức độ tương tác (qty)
Dữ liệu đầu ra: Ma trận yếu tố người dùng U và sản phẩm V để dự đoán các tương tác chưa biết
6 Tài liệu tham khảo [8], [9] - Matrix Factorization Techniques for Recommender Systems
- Khả năng xử lý tốt dữ liệu implicit feedback
- Giảm chiều dữ liệu, giảm thiểu nhiễu
- Dễ dàng mở rộng cho dữ liệu lớn thông qua việc tối ưu hóa song song Nhược điểm:
- Yêu cầu tài nguyên tính toán cao cho các tập dữ liệu lớn
- Cần thiết lập các tham số hyperparameter như số lượng yếu tố tiềm ẩn và hệ số regularization
- Quá trình hội tụ có thể chậm đối với dữ liệu rất lớn hoặc phức tạp
1.4.3 Thuật toán SVD (Singular Value Decomposition) 7
SVD (Singular Value Decomposition) là một kỹ thuật giảm chiều dữ liệu mạnh mẽ trong lĩnh vực học máy và phân tích dữ liệu Được sử dụng rộng rãi trong hệ thống gợi ý, SVD giúp trích xuất các yếu tố tiềm ẩn từ dữ liệu đánh giá người dùng và sản phẩm, từ đó đưa ra các dự đoán chính xác về sở thích của người dùng
- Bước 1 - Phân rã ma trận: SVD phân rã ma trận đánh giá R thành ba ma trận U, Ʃ, V T , trong đó U và V là các ma trận trực giao và Ʃ là ma trận đường chéo chứa các giá trị kỳ dị
- Bước 2 - Giảm chiều dữ liệu: Chọn một số lượng nhỏ các giá trị kỳ dị lớn nhất để giảm chiều dữ liệu, tạo ra ma trận ước lượng R’
- Bước 3 - Dự đoán: Sử dụng ma trận ước lượng R’ để dự đoán với các giá trị đã biết
Dữ liệu đầu vào: Ma trận đánh giá người dùng và sản phẩm R với các giá trị đã biết
Dữ liệu đầu ra: Ma trận dự đoán R’ chứa các giá trị đánh giá được ước lượng cho các mục chưa được đánh giá Ưu điểm:
- Giảm chiều dữ liệu, giảm thiểu nhiễu
- Khả năng phát hiện các yếu tố tiềm ẩn và tương quan phức tạp trong dữ liệu
7 Tài liệu tham khảo [8], [9] - Matrix Factorization Techniques for Recommender Systems
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
- Cải thiện độ chính xác của các dự đoán
- Yêu cầu tài nguyên tính toán cao cho các tập dữ liệu lớn
- Nhạy cảm với dữ liệu thiếu và nhiễu
- Cần tối ưu hóa số lượng yếu tố tiềm ẩn để đạt kết quả tốt nhất.
ReactJS
React JS là một thư viện JavaScript mã nguồn mở và miễn phí để xây dựng giao diện người dùng (UI) dựa trên các thành phần UI riêng lẻ Nó được phát triển và duy trì bởi Meta và cộng đồng các nhà phát triển và công ty cá nhân
- Thành phần (Components): React xây dựng giao diện bằng cách chia UI thành các thành phần riêng lẻ Mỗi thành phần có thể là một phần của giao diện người dùng, như một nút, một biểu mẫu, hoặc thậm chí là toàn bộ trang web Components là đối tượng JavaScript có khả năng tái sử dụng và có mục tiêu chính là định rõ cách hiển thị
UI dựa trên trạng thái (state) và thuộc tính (props) Các thành phần React JS có thể được tái sử dụng ở nhiều nơi khác nhau Điều này giúp tiết kiệm thời gian và công sức cho các nhà phát triển
- JSX (JavaScript XML): Viết tắt của JavaScript Extension là JSX (JavaScript XML), đây là một phần của React Extension JSX Usecase này cho phép viết mã HTML bên trong JavaScript để xây dựng giao diện người dùng và quản lý các thành phần (components) trong ứng dụng React Các thành phần này có khả năng tái sử dụng và có thể tồn tại như các đoạn mã độc lập có khả năng nhận trạng thái (state) và thuộc tính (props) Trang web được xây dựng bằng ReactJS sử dụng một cấu trúc dựa trên các thành phần, không như trang web truyền thống dựa trên một template duy nhất
8 Tài liệu tham khảo [2] ReactJS là gì? Những điều bạn chưa biết về ReactJS
- Virtual DOM: React sử dụng Virtual DOM để cải thiện hiệu suất Virtual DOM là một biểu diễn ảo của DOM thực tế và Usecase này cho phép React tối ưu hóa quá trình cập nhật giao diện bằng cách chỉ cập nhật các phần thay đổi thay vì cả trang Điều này giúp tối ưu hóa hiệu suất ứng dụng và làm cho React nhanh hơn so với việc cập nhật DOM thủ công
- Cập nhật tự động: React cung cấp cơ chế tự động cập nhật giao diện người dùng khi trạng thái (state) của ứng dụng thay đổi Khi dữ liệu thay đổi, React sẽ tái render các thành phần liên quan dựa trên sự thay đổi này
- Quản lý trạng thái (State Management): React Usecase này cho phép bạn quản lý trạng thái của ứng dụng thông qua trạng thái cục bộ (local state) và sử dụng thư viện bên ngoài như Redux để quản lý trạng thái toàn cục
- Cộng đồng lớn và hệ sinh thái mạnh mẽ: React có một cộng đồng lớn với nhiều tài liệu chi tiết, cụ thể Ngoài ra, nó có nhiều thư viện và công cụ hỗ trợ như React Router cho định tuyến, Material-UI, Tailwind CSS phục vụ cho các giao diện người trở nên tối ưu, độc đáo hơn
- Kích thước: Reactjs có kích thước khoảng 40KB, lớn hơn một số thư viện JavaScript khác Điều này có thể là một vấn đề đối với các ứng dụng web có dung lượng thấp
- Cú pháp phức tạp của JSX: Dù JSX giúp viết mã giao diện dễ đọc hơn, nhưng đôi khi nó có thể trở nên phức tạp đặc biệt khi cần kết hợp nhiều phần tử JSX hoặc điều kiện hiển thị phần của JSX
- Khả năng khó tiếp cận cho người mới: React yêu cầu thời gian và khả năng học tập, nghiên cứu khá cao, đặc biệt đối với người mới bắt đầu hoặc những người không quen với cú pháp JSX và khái niệm của React như components, props và state Đặc biệt là tốc độ phát triển của react rất nhanh và rất khó bắt kịp trong thời gian ngắn.
Typescript
TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh
9 Tài liệu tham khảo [3] Tìm hiểu TypeScript và kiến thức cơ bản
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
15 và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side và server-side
- Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên có thể chạy bất kỳ ở đâu miễn ở đó có hỗ trợ biên dịch Javascript Ngoài ra có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn
- TypeScript cho phép định nghĩa kiểu cho các biến, hàm, và đối tượng, giúp phát hiện lỗi ngay trong quá trình viết mã thay vì khi chạy chương trình Điều này giúp giảm thiểu lỗi và cải thiện chất lượng mã
- TypeScript hỗ trợ các tính năng mới của ECMAScript, cho phép lập trình viên sử dụng các tính năng mới mà không cần phải đợi các trình duyệt hỗ trợ
- Hiện nay các Javascript Framework như React JS, Angular JS đã dần khuyến khích nên sử dụng TypeScript để phát triển giúp cho code rõ ràng và dễ hiểu hơn Ngoài ra nó còn giúp cho việc bảo trì và mở rộng trở nên dễ dàng hơn trong tương lai
- TypeScript cần được biên dịch thành JavaScript trước khi chạy trên trình duyệt hoặc Node.js, điều này có thể làm phức tạp quá trình xây dựng và triển khai ứng dụng
- TypeScript có thể đòi hỏi cấu hình phức tạp, đặc biệt là khi tích hợp vào các dự án lớn hoặc sử dụng với các công cụ khác nhau
- Việc học TypeScript có thể tốn thời gian, đặc biệt đối với những lập trình viên đã quen với JavaScript Cần phải hiểu rõ về kiểu tĩnh và cách TypeScript hoạt động.
Tailwind CSS
Tailwind CSS là một framework CSS tiện ích (utility-first) cho phép bạn xây dựng giao diện người dùng trực tiếp trong HTML bằng cách sử dụng các lớp tiện ích
16 nhỏ Không giống như các framework CSS truyền thống như Bootstrap hoặc Foundation, Tailwind CSS không cung cấp sẵn các thành phần UI mà thay vào đó cung cấp các lớp CSS nhỏ để tạo kiểu cho các thành phần
Tailwind CSS cho phép tùy chỉnh dễ dàng thông qua tệp cấu hình, giúp bạn có thể tạo ra giao diện theo ý muốn một cách nhanh chóng và dễ dàng Với cách tiếp cận utility-first, bạn có thể tái sử dụng các lớp tiện ích nhỏ trên nhiều phần khác nhau của dự án, giúp giảm thiểu mã CSS không cần thiết Tailwind CSS có thể loại bỏ các lớp CSS không sử dụng khi build dự án, giúp giảm kích thước tệp CSS cuối cùng và tăng hiệu suất tải trang Tailwind CSS còn dễ dàng tích hợp với các công cụ xây dựng hiện đại như Webpack, PostCSS, và các framework JavaScript phổ biến như React, Vue, và Angular
KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Khảo sát hiện trạng
Những năm gần đây, nhu cầu sử dụng đồ nội thất đã trở thành một khía cạnh quan trọng trong cuộc sống hàng ngày của mọi người Không chỉ đơn giản là các vật dụng trang trí, đồ nội thất ngày nay đã trở thành biểu tượng của sự thoải mái, cá nhân hóa không gian sống và thể hiện phong cách cá nhân
Người tiêu dùng ngày càng đặt nhiều quan tâm vào việc lựa chọn đồ nội thất không chỉ vì mục đích sử dụng mà còn để tạo ra không gian sống thẩm mỹ, phản ánh cá nhân hóa và phong cách của họ Nhu cầu này không chỉ tập trung vào sự tiện ích mà còn vào khả năng tạo ra một môi trường sống ấm cúng, thoải mái và phản ánh giá trị cá nhân Đồng thời, với sự phổ biến của mô hình kinh doanh trực tuyến, nhu cầu mua sắm đồ nội thất qua các website đã gia tăng đáng kể Người tiêu dùng ngày nay tìm kiếm sự thuận tiện, đa dạng về lựa chọn sản phẩm, và trải nghiệm mua sắm trực tuyến tốt nhất để đáp ứng nhu cầu của họ.
Khảo sát một số hệ thống liên quan
2.2.1 Điện máy chợ lớn Điện Máy – Nội Thất Chợ Lớn là website bán lẻ đồ điện tử và nội thất lớn tại Việt Nam Đây là một tên tuổi tiên phong trong lĩnh vực này, chuyên cung cấp các sản phẩm trong các danh mục Điện tử, Điện lạnh, Di động, Vi tính, Gia dụng, Viễn thông và Nội thất, với phong cách phục vụ chuyên nghiệp và hiện đại
Thương hiệu này tự định vị mình là một đơn vị bán lẻ đáng tin cậy và gần gũi với khách hàng Họ đã tối ưu hóa chi phí để đảm bảo rằng sản phẩm của họ mang đến cho người tiêu dùng chất lượng tốt và giá cả hợp lý, đồng thời chăm sóc hậu đãi một cách chu đáo
Hình 2 1 Điện máy chợ lớn
Hình 2 2 Điện máy chợ lớn
Hình 2 3 Điện máy chợ lớn
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 4 Điện máy chợ lớn
Hình 2 5 Điện máy chợ lớn
Hình 2 6 Điện máy chợ lớn
Hình 2 7 Điện máy chợ lớn
Hình 2 8 Điện máy chợ lớn
Hình 2 9 Điện máy chợ lớn
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 10 Điện máy chợ lớn
Hình 2 11 Điện máy chợ lớn
Hình 2 12 Điện máy chợ lớn
Hình 2 13 Điện máy chợ lớn
Hình 2 14 Điện máy chợ lớn
Hình 2 15 Điện máy chợ lớn
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 16 Điện máy chợ lớn
Hình 2 17 Điện máy chợ lớn
● Trang chi tiết sản phẩm
Hình 2 18 Điện máy chợ lớn
Hình 2 19 Điện máy chợ lớn
Hình 2 20 Điện máy chợ lớn
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 21 Điện máy chợ lớn
Hình 2 22 Điện máy chợ lớn Bảng 2 1 Ưu, nhược điểm điện máy chợ lớn Ưu điểm Nhược điểm
- Sản phẩm tương đối đa dạng
- Giao diện đơn giản, dễ sử dụng, thân thiện
- Thanh toán bằng nhiều hình thức, hỗ trợ trả góp
- Sản phẩm hiện thị phù hợp theo nhu cầu tìm kiếm của khách hàng
- Giao diện chưa tối ưu, khi đặt hàng người dùng phải vào xem chi tiết sản phẩm mới thêm vào giỏ hàng được
- Chưa có nhiều phản hồi và đánh giá của khách hàng về sản phẩm
- Có nhiều mã giảm giá cho khách hàng
2.2.2 Nội thất Đồ gỗ Việt
Là một trong những cơ sở chuyên sản xuất các vật dụng nội thất uy tín và chất lượng hàng đầu tại TP HCM, Nội Thất Đồ Gỗ Việt là sự lựa chọn cho khách hàng có nhu cầu đặt mua các sản phẩm nội thất gỗ (Tủ quần áo, bàn ghế gỗ, kệ đựng tivi, bàn làm việc, bàn thờ, ) để trang trí cho ngôi nhà, văn phòng công ty hoặc khách sạn Nội Thất Đồ Gỗ Việt có xưởng gỗ riêng, bán trực tiếp các sản phẩm của mình, không đi qua bất kỳ một khâu trung gian nào
Hình 2 23 Nội thất đồ gỗ Việt
Hình 2 24 Nội thất đồ gỗ Việt
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 25 Nội thất đồ gỗ Việt
Hình 2 26 Nội thất đồ gỗ Việt
Hình 2 27 Nội thất đồ gỗ Việt
Hình 2 28 Nội thất đồ gỗ Việt
Hình 2 29 Nội thất đồ gỗ Việt
● Trang chi tiết sản phẩm
Hình 2 30 Nội thất đồ gỗ Việt
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 31 Nội thất đồ gỗ Việt
Hình 2 32 Nội thất đồ gỗ Việt
Hình 2 33 Nội thất đồ gỗ Việt
Hình 2 34 Nội thất đồ gỗ Việt
Hình 2 35 Nội thất đồ gỗ Việt Hình 2 36 Nội thất đồ gỗ Việt
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Hình 2 37 Nội thất đồ gỗ Việt Bảng 2 2 Ưu, nhược điểm nội thất đồ gỗ Việt Ưu điểm Nhược điểm
- Sản phẩm tương đối đa dạng
- Giao diện đơn giản, dễ sử dụng, thân thiện, hiển thị danh mục sản phẩm cụ thể
- Thanh toán bằng nhiều hình thức, hỗ trợ trả góp
- Sản phẩm hiển thị phù hợp theo nhu cầu tìm kiếm của khách hàng
- Giao diện chưa tối ưu, khi đặt hàng người dùng phải vào xem chi tiết sản phẩm mới thêm vào giỏ hàng được
- Chưa có nhiều phản hồi và đánh giá của khách hàng về sản phẩm Không hiển thị đánh giá của khách hàng của từng sản phẩm
- Phương thức thanh toán hạn chế, không có trang thanh toán riêng
- Khách hàng không có tài khoản cá nhân làm cho việc quản lý đơn hàng khó khăn
Phân tích yêu cầu của đề tài
Xây dựng một hệ thống sàn thương mại điện tử trong đó khách hàng có thể lựa chọn các sản phẩm yêu thích, mua hàng, đặt hàng, thanh toán và theo dõi trạng thái các đơn hàng Cửa hàng (người bán) có thể đăng bán sản phẩm, thiết lập cửa hàng, thêm các ưu đãi hoặc chương trình khuyến mãi để quảng bá cửa hàng, thống kê doanh thu, quản lý đơn hàng và chăm sóc khách hàng của mình Ngoài ra, hệ thống cung cấp website
32 quản trị dùng để quản lý người dùng, quản lý danh mục hệ thống, quản lý cửa hàng, báo cáo thống kê doanh thu,… Đồng thời hệ thống phải đảm bảo hoạt động ổn định, bảo mật thông tin người dùng, logic xử lý chặt chẽ, dữ liệu đúng đắn và nhất quán, tuân theo các quy chuẩn thiết kế phần mềm
2.3.1 Yêu cầu chức năng o Yêu cầu chức năng nghiệp vụ
Bảng 2 3 Yêu cầu chức năng nghiệp vụ đối với khách hàng
STT Tên yêu cầu Loại yêu cầu Mô tả/ Ràng buộc Ghi chú
Lưu trữ Mỗi email chỉ cho phép đăng ký tài khoản một lần
Kết xuất Đã có tài khoản được đăng ký
3 Quản lý thông tin tài khoản cá nhân
Lưu trữ Đã đăng nhập vào hệ thống
Xem thông tin cá nhân, chỉnh sửa thông tin cá nhân, đổi mật khẩu
4 Đổi mật khẩu Lưu trữ Đã đăng nhập vào hệ thống
5 Đặt hàng Lưu trữ Đã đăng nhập vào hệ thống
6 Xem chi tiết sản phẩm
8 Lọc sản phẩm Tra cứu Lọc theo danh mục, điểm đánh giá, địa điểm bán sản phẩm, khoảng giá
9 Quản lý giỏ hàng Lưu trữ Thay đổi số lượng hoặc xóa sản phẩm khỏi giỏ hàng
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
10 Quản lý ví cá nhân
Lưu trữ Đã đăng nhập vào hệ thống
Nạp, rút tiền, xem lịch sử giao dịch từ ví cá nhân
Lưu trữ Đã đăng nhập vào hệ thống, đơn hàng đã được giao thành công
12 Quản lý sản phẩm yêu thích
Lưu trữ Đã đăng nhập vào hệ thống
Xem, xóa sản phẩm khỏi danh sách yêu thích
13 Thêm sản phẩm vào giỏ hàng
14 Hủy đơn hàng Lưu trữ Đã đăng nhập vào hệ thống
Kết xuất Đã đăng nhập vào hệ thống
Xem trạng thái các đơn hàng đã đặt theo trạng thái
16 Trò chuyện với người bán
Lưu trữ Đã đăng nhập vào hệ thống
Xem, gửi tin nhắn đến cửa hàng
Bảng 2 4 Yêu cầu chức năng nghiệp vụ đối với cửa hàng (người bán)
STT Tên yêu cầu Loại yêu cầu Mô tả/Ràng buộc Ghi chú
Kết xuất Đã có tài khoản được đăng ký
2 Đăng ký tài khoản người bán
Lưu trữ Mỗi email chỉ cho phép đăng ký tài khoản một lần
3 Quản lý thông tin cửa hàng
Lưu trữ Đã đăng nhập vào hệ thống
Xem và chỉnh sửa thông tin cá nhân, thông tin cửa hàng, thông tin định danh và thuế
Lưu trữ Đã đăng nhập vào hệ thống
Xem, cập nhật trạng thái các đơn hàng của khách hàng
Lưu trữ Đã đăng nhập vào hệ thống
Thêm, sửa, xóa danh mục của cửa hàng
Lưu trữ Đã đăng nhập vào hệ thống
Thêm, sửa, xóa sản phẩm của cửa hàng
Lưu trữ Đã đăng nhập vào hệ thống
Thêm, sửa, xóa khuyến mãi của cửa hàng
7 Quản lý quảng cáo sản phẩm
Lưu trữ Đã đăng nhập vào hệ thống Đăng ký các gói quảng cáo sản phẩm của cửa hàng
Kết xuất Đã đăng nhập vào hệ thống
Xem thống kê doanh thu, lợi nhuận từ đơn hàng của cửa hàng
9 Quản lý ví cá nhân
Lưu trữ Đã đăng nhập vào hệ thống
Nạp, rút tiền, xem lịch sử giao dịch từ ví cá nhân
10 Quản lý yêu cầu hoàn đơn
Lưu trữ Đã đăng nhập vào hệ thống
Xem, giải quyết yêu cầu, khiếu nại yêu cầu hoàn đơn từ khách hàng
11 Quản lý đánh giá sản phẩm
Lưu trữ Đã đăng nhập vào hệ thống
Xem, trả lời đánh giá của khách hàng về sản phẩm đã mua
12 Quản lý tin nhắn Lưu trữ Đã đăng nhập vào hệ thống
Xem, trả lời tin nhắn từ khách hàng
Bảng 2 5 Yêu cầu chức năng nghiệp vụ đối với quản trị viên STT Tên yêu cầu Loại yêu cầu Mô tả/Ràng buộc Ghi chú
Kết xuất Đã có tài khoản được cấp
2 Xem thông tin tài khoản cá nhân
Lưu trữ Đã đăng nhập vào hệ thống
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
3 Quản lý danh mục hệ thống
Lưu trữ Đã đăng nhập vào hệ thống
Thêm, sửa, xóa danh mục sản phẩm của hệ thống
Lưu trữ Đã đăng nhập vào hệ thống
Xem, vô hiệu hóa/hủy vô hiệu hóa tài khoản người dùng
Lưu trữ Đã đăng nhập vào hệ thống
Thêm, vô hiệu hóa/hủy vô hiệu hóa tài khoản được phân quyền
Kết xuất Đã đăng nhập vào hệ thống
Xem báo cáo, thống kê doanh thu về đơn hàng, quảng cáo theo ngày, tháng, năm
Lưu trữ Đã đăng nhập vào hệ thống
Xem, xác nhận yêu cầu rút tiền thành công từ người dùng
9 Quản lý báo cáo vi phạm sản phẩm, cửa hàng
Lưu trữ Đã đăng nhập vào hệ thống
Xem, xử lý các sản phẩm, cửa hàng bị tố cáo vi phạm
10 Quản lý khiếu nại hoàn đơn
Lưu trữ Đã đăng nhập vào hệ thống
Xem, xử lý các yêu cầu khiếu nại về việc hoàn đơn của cửa hàng
Kết xuất Đã đăng nhập vào hệ thống
Xem thông tin cửa hàng, thông tin chi tiết các sản phẩm, thông tin các đơn hàng của cửa hàng
12 Tra cứu cửa hàng, đơn hàng
Tra cứu Đã đăng nhập vào hệ thống
Tìm kiếm thông tin của cửa hàng theo tên Tìm kiếm thông tin đơn hàng theo mã đơn hàng
36 o Yêu cầu chức năng hệ thống
Bảng 2 6 Yêu cầu chức năng hệ thống
STT Chức năng Mô tả chi tiết Ghi chú
Hệ thống đảm bảo chỉ người dùng đã xác thực mới có thể truy cập vào các chức năng và tài nguyên của hệ thống
Hệ thống cung cấp các chức năng để thêm, xem, sửa, và xóa các dữ liệu trong hệ thống
● Quản trị viên hệ thống (System Admin): có quyền sử dụng tất cả các chức năng của hệ thống quản lý
● Quản trị viên theo vai trò: có quyền sử dụng các chức năng thuộc vai trò quản lý của mình
● Cửa hàng (người bán): Có quyền đăng bán sản phẩm, quản lý cửa hàng, cập nhật trạng thái đơn hàng của cửa hàng
● Khách hàng: Được quyền sử dụng các chức năng tùy vào trạng thái đăng nhập của hệ thống người mua hàng
● Hệ thống có nhiều tài khoản thuộc các vai trò mặc định: Quản trị viên, Nhân viên, Khách hàng
Gửi mã xác thực OTP email
Hệ thống gửi otp qua email thông qua google
OTP sẽ được tạo bên trong hệ thống và lưu trong bộ nhớ (sử dụng LoadingCache của Google Guava)
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
5 Định danh người dùng bằng JWT
Hệ thống sử dụng JWT để xác thực người dùng đã đăng nhập
JWT sẽ hết hạn sau 7 ngày kể từ thời gian cấp token
6 Đăng nhập thông qua OAuth
Hệ thống hỗ trợ xác thực thông qua OAuth và hiện tại chỉ hỗ trợ Google OAuth (hệ thống khách hàng)
Khi đăng ký thông qua OAuth, một username ngẫu nhiên sẽ được cấp Sau đó người dùng sẽ thực hiện thay đổi username
Hệ thống sử dụng MySQL để lưu trữ dữ liệu chính cho hệ thống
Hệ thống áp dụng hướng tiếp cận CodeFirst giúp đơn giản hoá thao tác với cơ sở dữ liệu; tập trung vào mã nguồn và từ mã nguồn cơ sở dữ liệu sẽ được tạo một cách hoàn toàn tự động; đồng bộ hóa cấu trúc cơ sở dữ liệu với mã nguồn; giảm phụ thuộc vào loại cơ sở dữ liệu sử dụng
Hệ thống sử dụng Bcrypt để mã hóa trước khi lưu trữ những thông tin tuyệt mật như mật khẩu
9 Lọc, tìm kiếm dữ liệu
Hệ thống sử dụng JPA CriteriaBuilder kết hợp với các interface Repository để thực hiện tìm kiếm và lọc dữ liệu
Bằng cách dùng annotation @Query để tự định nghĩa các câu truy vấn cơ sở dữ liệu hoặc viết theo cách JPA CriteriaBuilder
10 Xác thực dữ liệu đầu vào
Hệ thống sử dụng tính năng Validation của Javax để validate dữ liệu của request đầu vào
Quản lý trạng thái đơn hàng Đơn hàng có các trạng thái:
● UNPAID: Chở thanh toán bởi người mua Có thể hủy bởi người mua
● TO_SHIP: Được chuyển sang từ UNPAID thể hiện đơn hàng đã được chuẩn bị để vận chuyển Số lượng sản phẩm đã bán trong cơ sở dữ liệu đối với sản phẩm thuộc đơn hàng tăng lên, số lượng còn lại giảm xuống theo số lượng sản phẩm được đặt trong đơn hàng Có thể hủy bởi người mua
● SHIPPING: thể hiện đơn hàng đang được vận chuyển Không thể hủy đơn hàng nữa
● COMPLETED: Đơn hàng đã được giao đến tay người mua
● FAILED_DELIVERY: Đơn hàng tạm thời giao thất bại hoặc giao thất bại
● CANCELLED: Đơn hàng bị hủy trước đó
● REFUNDED: Đơn hàng đã được hoàn tiền
Khi đặt đơn hàng, việc chuyển trạng thái sẽ do cửa hàng đảm nhận, các luồng thực hiện như sau:
● UNPAID – TO_SHIP – SHIPPING – COMPLETED
● UNPAID – TO_SHIP – SHIPPING – FAILED_DELIVE
● UNPAID – TO_SHIP – SHIPPING – COMPLETED – REFUNDED
Khóa/hủy khóa tài khoản người mua
Người quản lý (hệ thống quản lý) có thể khóa/hủy khóa tài khoản của người mua
CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG
Một sản phẩm có thể có nhiều phân loại sản phẩm (bao gồm nhiều lựa chọn khác nhau dựa trên thuộc tính sản phẩm như kích thước) Sản phẩm có thể thuộc một hoặc nhiều nhóm sản phẩm (nhóm loại sản phẩm - category, nhóm phòng - room, nhóm bộ sưu tập - collection)
14 Quản lý mã giảm giá
Các mã giảm giá có thể có mã trùng nhau nhưng phải đảm bảo khoảng thời gian hiệu lực không giao nhau
2.3.2 Yêu cầu phi chức năng
Bảng 2 7 Yêu cầu phi chức năng
STT Nội dung Tiêu chuẩn Mô tả chi tiết
1 Tốc độ xử lý tương tác và phản hồi người dùng
Hiệu quả Phản hồi các tương tác của người dùng nhanh chóng
2 Tốc độ tìm kiếm và độ chính xác
Hiệu quả Trả về kết quả tìm kiếm trong thời gian ngắn và chính xác
3 Giao diện thân thiện Tiện dụng Giao diện trung tính, phù hợp với mọi đối tượng người dùng
4 Dễ dàng thao tác Tiện dụng Bố trí các nút bấm, giao diện, nhập xuất tiện dụng, đơn giản, gần gũi với người dùng
5 Dễ dàng nâng cấp khi có yêu cầu
6 Tương thích với hầu hết các trình duyệt
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 3.1 Lược đồ Usecase
3.2 Đặc tả Usecase Đặc tả Usecase phía Người mua
3.2.1 Đặc tả usecase Đăng ký
Bảng 3 1 Đặc tả usecase Đăng ký
Mô tả Usecase Usecase này cho phép khách hàng đăng ký tài khoản trên hệ thống người mua Actor chính Khách hàng chưa có tài khoản trên hệ thống
MÔ HÌNH HÓA YÊU CẦU
Lược đồ Usecase
Đặc tả Usecase
Đặc tả Usecase phía Người mua
3.2.1 Đặc tả usecase Đăng ký
Bảng 3 1 Đặc tả usecase Đăng ký
Mô tả Usecase Usecase này cho phép khách hàng đăng ký tài khoản trên hệ thống người mua Actor chính Khách hàng chưa có tài khoản trên hệ thống
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
Tiền điều kiện Không có
Hậu điều kiện - Tài khoản được tạo thành công trên hệ thống người mua
- Thông báo đăng ký tài khoản thành công
1 Khách hàng truy cập vào trang đăng ký tài khoản
2 Hệ thống hiển thị form đăng ký tài khoản
3 Khách hàng nhập đầy đủ thông tin bao gồm: tên đăng nhập, email, họ và tên, mật khẩu, xác nhận mật khẩu, ngày sinh và nhấn nút Đăng ký
4 Hệ thống kiểm tra thông tin hợp lệ
5 Hệ thống hiển thị thông báo yêu cầu xác nhận email để hoàn thành việc đăng ký
Luồng thay thế Không có
Luồng ngoại lệ 4a Hệ thống kiểm tra thông tin không hợp lệ
5a Hệ thống thông báo thất bại Usecase kết thúc
3.2.2 Đặc tả usecase Đăng nhập
Bảng 3 2 Đặc tả usecase Đăng nhập
Mô tả Usecase Usecase này cho phép người dùng đăng nhập tài khoản vào hệ thống Actor chính Người mua, Người bán, Quản trị viên
Tiền điều kiện Người dùng đã có tài khoản còn hoạt động/tài khoản gmail
Hậu điều kiện Đăng nhập thành công vào hệ thống
1 Người dùng truy cập vào trang đăng nhập tài khoản
2 Hệ thống hiển thị form đăng nhập
3 Người dùng nhập thông tin đăng nhập tài (tên đăng nhập, mật khẩu) và chọn nút Đăng nhập
4 Hệ thống kiểm tra thông tin hợp lệ
5 Hệ thống đăng nhập thành công và chuyển tới Trang chủ
3a Khách hàng chọn “Đăng nhập với Google”
3a1 Hệ thống chuyển sang trang đăng nhập Google
3a2 Khách hàng đăng nhập tài khoản Google
3a3 Google gửi thông tin đăng nhập thành công về hệ thống
Tiếp tục thực hiện bước 4, 5
Luồng ngoại lệ 3a3a Đăng nhập Google thất bại, Usecase kết thúc
4a Hệ thống kiểm tra thông tin không hợp lệ, Usecase kết thúc 3.2.3 Đặc tả usecase Đăng xuất
Bảng 3 3 Đặc tả usecase Đăng xuất
Mô tả Usecase Usecase này cho phép người dùng đăng xuất khỏi hệ thống
Tiền điều kiện Người dùng đã đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Chuyển hướng người dùng đến trang đăng nhập hoặc trang chủ
1 Người dùng click chọn nút đăng xuất
2 Hệ thống hiển thị hộp thoại xác nhận đăng xuất
3 Người dùng chọn đồng ý đăng xuất
4 Hệ thống hiện thông báo thao tác thành công và chuyển hướng trang Luồng thay thế Không có
Luồng ngoại lệ 4a Người dùng chọn hủy thao tác Usecase dừng lại
3.2.4 Đặc tả usecase Đổi mật khẩu
Bảng 3 4 Đặc tả usecase Đổi mật khẩu
Tên Usecase Đổi mật khẩu
Mô tả Usecase Usecase này cho phép khách hàng đổi mật khẩu tài khoản
Actor chính Khách hàng (Customer)
Tiền điều kiện Khách hàng đã đăng nhập thành công vào hệ thống
- Mật khẩu của khách hàng được thay đổi và lưu thành công trên hệ thống
- Hệ thống hiển thị thông báo thay đổi thành công
1 Khách hàng vào trang Quản lý tài khoản
2 Hệ thống hiển thị các thông tin cá nhân của khách hàng
3 Khách hàng chọn chức năng Đổi mật khẩu
4 Hệ thống hiển thị form thay đổi mật khẩu
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
5 Khách hàng nhập mật khẩu cũ, mật khẩu mới, mật khẩu xác nhận và nhấn Lưu
6 Hệ thống kiểm tra thông tin hợp lệ Hiển thị thông báo thay đổi thông tin thành công
3a Người dùng chọn chức năng Đổi mật khẩu, Xem địa chỉ, Xem đơn hàng
Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ Thông báo lỗi Usecase kết thúc
3.2.5 Đặc tả usecase Lấy lại mật khẩu
Bảng 3 5 Đặc tả usecase Lấy lại mật khẩu
Tên Usecase Lấy lại mật khẩu
Mô tả Usecase Usecase này cho phép người dùng lấy lại mật khẩu cá nhân
Actor chính Người dùng (có tài khoản ở hệ thống)
Tiền điều kiện Có tài khoản ở hệ thống
- Thông báo các thao tác thành công
- Mật khẩu mới được cấp cho người dùng
- Các thay đổi được lưu vào hệ thống
1 Khách hàng truy cập đến trang đăng nhập
2 Khách hàng chọn mục quên mật khẩu?
3 Hệ thống hiển thị form điền email
4 Người dùng nhập email và bấm nhận mã
5 Hệ thống hiển thị form điền mã otp
6 Người dùng nhập otp từ email và bấm khôi phục mật khẩu
7 Hệ thống thông báo thao tác thành công, gửi mật khẩu qua email và lưu các thay đổi
Luồng thay thế Không có
Luồng ngoại lệ 7a Hệ thống thông báo thao tác thất bại và hiển thị nguyên nhân
3.2.6 Đặc tả usecase Quản lý giỏ hàng
Bảng 3 6 Đặc tả usecase Quản lý giỏ hàng
Tên Usecase Quản lý giỏ hàng
Mô tả Usecase Usecase này cho phép khách hàng thêm/xóa sản phẩm, cập nhật số lượng sản phẩm trong giỏ hàng
Actor chính Người mua (Buyer), Khách (Guest)
Tiền điều kiện Không có
Hậu điều kiện Các mục của giỏ hàng hiển thị chính xác với mỗi thao tác của người dùng với giỏ hàng
1 Khách hàng vào trang Giỏ hàng Hệ thống hiển thị các sản phẩm đã thêm vào
2 Thêm sản phẩm: người dùng nhấn vào dấu cộng bên cạnh sản phẩm để tăng số lượng hoặc dấu trừ để giảm số lượng sản phẩm Nếu số lượng sản phẩm bằng 0 thì sản phẩm bị xóa khỏi giỏ hàng
3 Hệ thống kiểm tra số lượng phù hợp, cập nhật dữ liệu và hiển thị trên giỏ hàng
2a Xóa sản phẩm khỏi giỏ hàng: người dùng chọn nút xóa để xóa sản phẩm khỏi giỏ hàng
Luồng ngoại lệ 3a Số lượng sản phẩm không đủ, đã vượt qua số lượng trong kho, hệ thống thông báo lỗi Usecase dừng lại
3.2.7 Đặc tả usecase Xem chi tiết sản phẩm
Bảng 3 7 Đặc tả usecase Xem chi tiết sản phẩm
Tên Usecase Xem chi tiết sản phẩm
Mô tả Usecase Usecase này cho phép khách hàng xem thông tin chi tiết của sản phẩm Actor chính Người mua (Buyer), Khách (Guest)
Tiền điều kiện Không có
Hậu điều kiện Không có
Luồng hoạt động 1 Người mua truy cập trang chi tiết sản phẩm
2 Hệ thống hiển thị đầy đủ tất cả các thông tin của sản phẩm
Luồng thay thế Không có
Luồng ngoại lệ Không có
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
3.2.8 Đặc tả usecase Thêm sản phẩm vào danh sách yêu thích
Bảng 3 8 Đặc tả usecase Thêm sản phẩm vào danh sách yêu thích
Tên Usecase Thêm sản phẩm vào danh sách yêu thích
Mô tả Usecase Usecase này cho phép người mua thêm sản phẩm vào danh sách yêu thích Actor chính Người mua (Buyer)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện Thông báo kết quả các thao tác và lưu các thay đổi
1 Người mua truy cập trang chi tiết sản phẩm
2 Hệ thống hiển thị thông tin chi tiết sản phẩm
3 Người mua chọn biểu tượng trái tim
4 Hệ thống lưu dữ liệu và thông báo thao tác thành công
Luồng thay thế Không có
Luồng ngoại lệ Không có
3.2.9 Đặc tả usecase Lọc sản phẩm
Bảng 3 9 Đặc tả usecase Lọc sản phẩm
Tên Usecase Lọc sản phẩm
Mô tả Usecase Usecase này cho phép người mua lọc sản phẩm theo nhiều tiêu chí Actor chính Người mua (Buyer), Khách (Guest)
Tiền điều kiện Không có
Hậu điều kiện Trang web hiển thị chính xác những sản phẩm dựa theo các tiêu chí đã chọn
1 Người mua chọn các tiêu chí lọc
2 Người mua nhấp chọn nút “Lọc sản phẩm”
3 Hệ thống hiển thị màn hình gồm các sản phẩm theo các tiêu chí lọc
2a Người mua nhấp chọn nút “Đặt lại”
3a Hệ thống khôi phục các giá trị lọc người mua đã chọn về như ban đầu Usecase dừng lại
3b Hệ thống hiển thị thông báo không có sản phẩm theo tiêu chí lọc
Luồng ngoại lệ Không có
3.2.10 Đặc tả usecase Tìm kiếm sản phẩm
Bảng 3 10 Đặc tả usecase Tìm kiếm sản phẩm
Tên Usecase Tìm kiếm sản phẩm
Mô tả Usecase Usecase này cho phép người mua tìm kiếm sản phẩm theo từ khóa
Actor chính Người mua (Buyer), Khách (Guest)
Tiền điều kiện Không có
Hậu điều kiện Trang web hiển thị những sản phẩm dựa theo từ khóa dùng để tìm kiếm
1 Khách hàng nhập từ khóa tìm kiếm (tìm kiếm theo tên sản phẩm)
2 Khách hàng click chọn nút tìm kiếm hoặc nhấn enter
3 Hệ thống hiển thị màn hình gồm các sản phẩm theo từ khóa tìm kiếm
Luồng thay thế 3a Hệ thống hiển thị thông báo không tìm thấy sản phẩm theo từ khóa
Luồng ngoại lệ Không có
3.2.11 Đặc tả usecase Đặt hàng
Bảng 3 11 Đặc tả usecase Đặt hàng
Mô tả Usecase Usecase này cho phép người mua đặt hàng
Actor chính Người mua (Buyer)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người dùng truy cập đến giỏ hàng
2 Người dùng chọn đặt hàng
3 Hệ thống hiển thị trang đặt hàng
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
4 Người dùng điền các thông tin còn thiếu
5 Hệ thống xác nhận đơn hàng hợp lệ
6 Hệ thống thông báo đặt hàng thành công
Luồng thay thế Không có
Luồng ngoại lệ 5b Hệ thống xác nhận đơn hàng không hợp lệ để tạo
6b Hệ thống thông báo đặt hàng thất bại
3.2.12 Đặc tả usecase Yêu cầu hoàn đơn
Bảng 3 12 Đặc tả usecase Yêu cầu hoàn đơn
Tên Usecase Yêu cầu hoàn đơn
Mô tả Usecase Usecase này cho người mua gửi yêu cầu hoàn đơn
Actor chính Người mua (Buyer)
- Đăng nhập thành công vào hệ thống
- Trạng thái đơn hàng muốn yêu cầu hoàn phải ở trạng thái “đã giao” và đã được thanh toán
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người mua chọn mục quản lý đơn hàng
2 Hệ thống hiển thị danh sách các đơn hàng
3 Người dùng chọn đơn hàng muốn yêu cầu hoàn đơn
4 Hệ thống hiển thị form thông tin hoàn đơn
5 Người mua nhập các thông tin yêu cầu hoàn đơn và bấm gửi
6 Hệ thống kiểm tra đơn hàng hợp lệ để hoàn đơn
7 Thông báo thao tác thành công và lưu vào hệ thống
Luồng thay thế Không có
Luồng ngoại lệ 6a Hệ thống kiểm tra đơn hàng không hợp lệ để hoàn đơn
7a Hệ thống thông báo thất bại Usecase dừng lại
3.2.13 Đặc tả usecase Đánh giá sản phẩm
Bảng 3 13 Đặc tả usecase Đánh giá sản phẩm
Tên Usecase Đánh giá sản phẩm
Mô tả Usecase Usecase này cho phép người mua đánh giá sản phẩm sau khi mua Actor chính Người mua (Buyer)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người mua truy cập đến trang đánh giá sản phẩm
2 Hệ thống hiển thị form thông tin đánh giá sản phẩm
3 Người dùng nhập thông tin đánh giá sản phẩm và gửi
4 Hệ thống hiện thông báo thao tác thành công và lưu các thay đổi
Luồng thay thế Không có
Luồng ngoại lệ Không có
3.2.14 Đặc tả usecase Quản lý ví cá nhân
Bảng 3 14 Đặc tả usecase Quản lý ví cá nhân
Tên Usecase Quản lý ví cá nhân
Mô tả Usecase Usecase này cho phép người mua, người bán quản lý ví cá nhân Actor chính Người mua (Buyer), Người bán (Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người dùng truy cập trang quản lý ví cá nhân
2 Hệ thống hiển thị thông tin ví cá nhân
3 Người dùng nhập số tiền và bấm nạp tiền
4 Hệ thống chuyển hướng đến giao diện nạp tiền VNPay
5 Người dùng thực hiện các bước theo VNPay để nạp tiền
6 Hệ thống cập nhật tiền trong ví
7 Hệ thống thông báo thành công
3a Người dùng chọn rút tiền
4a Hệ thống hiển thị form điền thông tin rút tiền
5a Người dùng điền thông tin và bấm gửi yêu cầu
6a Hệ thống kiểm tra yêu cầu rút tiền hợp lệ
7a Hệ thống tạo dữ liệu và thông báo thao tác thành công Luồng ngoại lệ 6a1 Hệ thống kiểm tra yêu cầu rút tiền không hợp lệ
7a1 Hệ thống thông báo thao tác thất bại, usecase dừng lại
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
3.2.15 Đặc tả usecase Trò chuyện với cửa hàng
Bảng 3 15 Đặc tả usecase Trò chuyện với cửa hàng
Tên Usecase Trò chuyện với cửa hàng
Mô tả Usecase Usecase này cho phép phép người mua trò chuyện với cửa hàng Actor chính Người mua (Buyer), Người bán (Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý
Hậu điều kiện - Dữ liệu được hiển thị theo thời gian thực
- Các thay đổi được lưu vào hệ thống
1 Người mua truy cập trang cửa hàng
2 Hệ thống hiển thị trang cửa hàng
3 Người mua chọn nút bắt đầu trò chuyện
4 Hệ thống hiển thị khung chat cùng danh sách tin nhắn đã nhắn
5 Người mua nhập nội dung và bấm gửi hoặc enter
6 Hệ thống lưu dữ liệu
7 Hệ thống hiển thị khung chat cùng danh sách tin nhắn
Luồng thay thế Không có
Luồng ngoại lệ Không có
3.2.16 Đặc tả usecase Quản lý thông tin cá nhân
Bảng 3 16 Đặc tả usecase Quản lý thông tin cá nhân
Tên Usecase Quản lý thông tin cá nhân
Mô tả Usecase Usecase này cho phép người mua quản lý thông tin cá nhân Actor chính Người mua (Buyer)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người dùng chọn mục thông tin cá nhân
2 Hệ thống hiển thị chi tiết thông tin cá nhân của người dùng
3 Người dùng chọn Sửa hồ sơ
4 Hệ thống hiển thị form thay đổi thông tin
5 Nhập thông tin thay đổi và nhấn Lưu
6 Hệ thống kiểm tra thông tin hợp lệ Hệ thống lưu thay đổi và thông báo thao tác thành công
Luồng thay thế Không có
Luồng ngoại lệ 6a Hệ thống thông báo thao tác thất bại và hiển thị nguyên nhân 3.2.17 Đặc tả usecase Báo cáo vi phạm
Bảng 3 17 Đặc tả usecase Báo cáo vi phạm
Tên Usecase Báo cáo vi phạm
Mô tả Usecase Usecase này cho phép người dùng gửi báo cáo vi phạm sản phẩm Actor chính Người dùng (có tài khoản ở hệ thống)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người dùng truy cập trang chi tiết sản phẩm
2 Hệ thống hiển thị thông tin chi tiết sản phẩm
3 Người dùng chọn nút báo cáo vi phạm
4 Hệ thống hiện form điền thông tin báo cáo vi phạm
5 Nhập nội dung báo cáo vi phạm và bấm gửi
6 Hệ thống thông báo thao tác thành công và lưu dữ liệu
Luồng thay thế Không có
Luồng ngoại lệ Không có
3.2.18 Đặc tả usecase Quản lý thông báo cá nhân
Bảng 3 18 Đặc tả usecase Quản lý thông báo cá nhân
Tên Usecase Quản lý thông báo cá nhân
Mô tả Usecase Usecase này cho phép người mua quản lý thông báo cá nhân Actor chính Người mua (Buyer)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện Các thay đổi được lưu vào hệ thống
1 Người mua chọn chức năng quản lý thông báo
2 Hệ thống hiển thị trang thông báo cá nhân
3 Người mua chọn loại thông báo muốn xem
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
4 Hệ thống hiển thị danh sách thông báo theo loại thông báo tương ứng
Luồng thay thế 3a Chọn một hoặc nhiều thông báo muốn đánh dấu đã đọc
4a Thông báo thao tác thành công và lưu các thay đổi Luồng ngoại lệ Không có
3.2.19 Đặc tả usecase Hủy đơn hàng
Bảng 3 19 Đặc tả usecase Hủy đơn hàng
Tên Usecase Hủy đơn hàng
Mô tả Usecase Usecase này cho phép người mua hủy đơn hàng đã tạo
Actor chính Người mua (Buyer)
Tiền điều kiện - Đăng nhập thành công vào hệ thống
- Trạng thái đơn hàng muốn hủy chưa chuyển sang “đang giao”
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người dùng truy cập đến trang danh sách đơn hàng
2 Người dùng chọn đơn hàng cần hủy và chọn Hủy đơn hàng
3 Hệ thống hiện thông báo xác nhận hủy đơn hàng
4 Người dùng xác nhận hủy
5 Hệ thống xác nhận đơn hàng hợp lệ
6 Hệ thống thông báo hủy đơn hàng thành công
Luồng thay thế Không có
4a Người dùng chọn không hủy Usecase dừng lại
5b Hệ thống xác nhận đơn hàng không hợp lệ để hủy (đơn hàng đang được giao, …) Usecase dừng lại
3.2.20 Đặc tả usecase Thanh toán online
Bảng 3 20 Đặc tả usecase Thanh toán online
Tên Usecase Thanh toán online
Mô tả Usecase Usecase này cho phép người mua thanh toán trực tuyến cho đơn hàng đã đặt trước đó
Actor chính Người mua (Buyer)
Tiền điều kiện Đăng nhập thành công vào hệ thống
Hậu điều kiện - Thông báo các thao tác thành công
- Các thay đổi được lưu vào hệ thống
1 Người mua vào mục quản lý đơn hàng
2 Hệ thống hiển thị danh sách tất cả các đơn hàng của người mua
3 Người mua chọn đơn hàng cần thanh toán và bấm thanh toán
4 Hệ thống kiểm tra thông tin hợp lệ
5 Thông báo thành công và lưu các thay đổi
Luồng thay thế Không có
Luồng ngoại lệ 4a Hệ thống kiểm tra thông tin không hợp lệ Usecase dừng lại Đặc tả usecase phía Người bán
3.2.21 Đặc tả usecase Đăng ký cửa hàng
Bảng 3 21 Đặc tả usecase Đăng ký cửa hàng
Tên Usecase Đăng ký cửa hàng
Mô tả Usecase Usecase này cho phép người dùng đăng ký tài khoản người bán trên hệ thống khách hàng Actor chính Khách hàng chưa có tài khoản trên hệ thống
Tiền điều kiện Không có
Hậu điều kiện - Tài khoản được tạo thành công trên hệ thống khách hàng
- Thông báo đăng ký tài khoản người bán thành công
1 Khách hàng truy cập vào trang đăng ký tài khoản cho người bán
2 Hệ thống hiển thị form đăng ký tài khoản người bán
3 Khách hàng nhập đầy đủ thông tin bao gồm: email, họ và tên, số điện thoại, ngày sinh, giới tính, mật khẩu, xác nhận mật khẩu và nhấn nút Đăng ký
4 Hệ thống kiểm tra thông tin và email hợp lệ Hệ thống gửi mã xác nhận qua email vừa đăng ký và chuyển đến trang nhập mã xác nhận
5 Khách hàng nhập mã xác nhận được gửi qua email và nhấn nút Xác nhận
6 Hệ thống kiểm tra mã xác nhận hợp lệ
7 Hệ thống thông báo đăng ký tài khoản thành công và chuyển đến trang đăng nhập dành cho người bán
Luồng thay thế 3a Người dùng chọn “Đăng nhập”
3b Hệ thống chuyển hướng tới trang Đăng nhập của người bán
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
4a Hệ thống kiểm tra thông tin không hợp lệ
5a Hệ thống thông báo thất bại Usecase kết thúc
6a Hệ thống kiểm tra mã xác nhận không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
3.2.22 Đặc tả usecase Quản lý danh mục
Bảng 3 22 Đặc tả usecase Quản lý danh mục
Tên Usecase Quản lý danh mục
Mô tả Usecase Usecase này cho phép người bán xem tất cả các sản phẩm thuộc danh mục, thêm, sửa, xóa danh mục sản phẩm của cửa hàng
Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán của người bán
Hậu điều kiện - Thông báo khi các thao tác thêm, sửa, xóa được thực hiện thành công
- Lưu thay đổi vào hệ thống
1 Người bán chọn chức năng Danh mục hàng ở phần Quản lý hàng hóa trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả danh mục của cửa hàng
3 Người bán chọn nút Thêm danh mục
4 Hệ thống hiển thị form nhập tên danh mục
5 Người bán nhập tên danh mục và nhấn nút Lưu
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công
3a.1 Người bán chọn nút Chỉnh sửa 3a.2 Hệ thống hiển thị form nhập tên danh mục Tiếp tục các bước 4 ,5 ,6 , 7
3b.1 Người bán chọn nút Xóa 3b.2 Hệ thống hiển thị thông báo Xác nhận xóa danh mục 3b.3 Người bán nhấn nút Xác nhận để xóa hoặc Hủy để kết thúc Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
3.2.23 Đặc tả usecase Quản lý sản phẩm
Bảng 3 23 Đặc tả usecase Quản lý sản phẩm
Tên Usecase Quản lý sản phẩm
Mô tả Usecase Usecase này cho phép người bán thêm, cập nhật, xóa, xem chi tiết, tìm kiếm sản phẩm của cửa hàng
Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán của người bán
Hậu điều kiện - Thông báo khi các thao tác thêm, sửa, xóa thực hiện thành công
- Lưu thay đổi vào hệ thống
1 Người bán chọn chức năng Tất cả ở phần Quản lý hàng hóa trên thanh Sidebar
2 Hệ thống hiển thị danh sách tất cả sản phẩm của cửa hàng
3 Người bán chọn nút Thêm sản phẩm
4 Hệ thống hiển thị form nhập thông tin bao gồm: Tên sản phẩm, chất liệu, mô tả, số lượng trong kho, giá nhập, giá bán, danh mục của cửa hàng, danh mục của sàn, tình trạng, chiều dài, chiều rộng, chiều cao, cân nặng, thumbnail và hình ảnh sản phẩm
5 Người bán nhập đầy đủ thông tin và nhấn nút Thêm sản phẩm
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công
3a.1 Người bán chọn nút Chỉnh sửa 3a.2 Hệ thống hiển thị form nhập thông tin cần chỉnh sửa
3a.3 Người bán nhập thông tin cần chỉnh sửa và nhấn nút Lưu
Tiếp tục các bước 5 ,6 , 7 3b.1 Người bán chọn nút Xóa 3b.2 Hệ thống hiển thị thông báo Xác nhận xóa sản phẩm 3b.3 Người bán nhấn nút Xác nhận để xóa hoặc Hủy để kết thúc Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
3.2.24 Đặc tả usecase Quản lý doanh thu
Bảng 3 24 Đặc tả usecase Quản lý doanh thu
Tên Usecase Quản lý doanh thu
Usecase này cho phép người bán:
- Xem thống kê tổng đơn hàng, tổng giá trị tất cả các đơn hàng đang vận chuyển, tổng lợi nhuận thu được theo tháng và năm
- Xem chi tiết doanh thu của từng đơn hàng Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán của người bán
Hậu điều kiện - Nhận được chi tiết lợi nhuận của từng đơn hàng của cửa hàng
- Nhận được các thông số thống kê liên quan đến lợi nhuận đơn hàng
1 Người bán chọn chức năng Doanh thu ở phần Quản lý tài chính trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả doanh thu theo đơn hàng, tổng số đơn hàng, tổng giá trị của tất cả các đơn hàng đang vận chuyển, tổng lợi nhuận của cửa hàng theo tháng và năm hiện tại
3 Người bán chọn tháng và năm cần xem doanh thu
4 Hệ thống hiển thị dữ liệu về doanh thu của tháng và năm đã chọn Luồng thay thế Không có
Luồng ngoại lệ Không có
3.2.25 Đặc tả usecase Quản lý đánh giá
Bảng 3 25 Đặc tả usecase Quản lý đánh giá
Tên Usecase Quản lý đánh giá
Mô tả Usecase Usecase này cho phép người bán xem tất cả các đánh giá của khách hàng về sản phẩm sau khi mua và phản hồi đánh giá của khách hàng Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán của người bán Hậu điều kiện - Xem thông tin đánh giá của khách hàng về sản phẩm sau khi mua
- Phản hồi đánh giá của khách hàng thành công
1 Người bán chọn chức năng Quản lý đánh giá ở phần Chăm sóc khách hàng trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả đánh giá của khách hàng theo trạng thái phản hồi của người bán
3 Người bán chọn nút Phản hồi để phản hồi đánh giá của người mua về sản phẩm
4 Hệ thống hiển thị form nhập nội dung phản hồi
5 Người bán nhập thông tin phản hồi đánh giá và nhấn nút Gửi
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công
Luồng thay thế Không có
Luồng ngoại lệ 5a Người bán chọn nút Hủy Usecase kết thúc
3.2.26 Đặc tả usecase Quản lý tin nhắn (Chat)
Bảng 3 26 Quản lý tin nhắn (Chat)
Tên Usecase Quản lý tin nhắn (Chat)
Mô tả Usecase Usecase này cho phép người bán xem, trả lời tất cả tin nhắn của khách hàng gửi tới cửa hàng Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán của người bán
Hậu điều kiện - Xem tất cả các tin nhắn của một khách hàng gửi tới cửa hàng
- Trò chuyện, phản hồi tin nhắn với khách hàng thành công
1 Người bán chọn chức năng Quản lý chat ở phần Chăm sóc khách hàng trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả khách hàng nhắn tin tới cửa hàng ở thanh Sidebar thuộc khung chat
3 Người bán nhấn chọn đoạn hội thoại
4 Hệ thống hiển thị danh sách tất cả tin nhắn trong đoạn hội thoại của khách hàng hiện tại
5 Người bán nhập nội dung tin nhắn ở ô nhập thông tin và nhấn nút Gửi
6 Hệ thống lưu tin nhắn và gửi đến người nhận
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
Luồng thay thế Không có
Luồng ngoại lệ Không có
3.2.27 Đặc tả Usecase Quản lý báo cáo vi phạm
Bảng 3 27 Đặc tả usecase Quản lý báo cáo vi phạm
Tên Usecase Quản lý báo cáo vi phạm
Mô tả Usecase Usecase này cho phép người bán xem, giải trình các yêu cầu của quản trị viên hệ thống về việc báo cáo sản phẩm vi phạm từ phía khách hàng Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán của người bán Hậu điều kiện Giải trình báo cáo sản phẩm vi phạm thành công
1 Người bán chọn chức năng Báo cáo vi phạm ở phần Quản lý hàng hóa trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả các yêu cầu giải trình vi phạm
3 Người bán nhấn chọn Giải trình
4 Hệ thống hiển thị form nhập thông tin giải trình bao gồm hình ảnh minh chứng và mô tả chi tiết nội dung giải trình
5 Người bán điền tất cả các thông tin và nhấn nút Gửi
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công
Luồng thay thế Không có
Luồng ngoại lệ 5a Người bán nhấn nút Hủy Usecase kết thúc
3.2.28 Đặc tả usecase Quản lý thông báo cá nhân
Bảng 3 28 Đặc tả usecase Quản lý thông báo cá nhân
Tên Usecase Quản lý thông báo cá nhân
Mô tả Usecase Usecase này cho phép người bán xem chi tiết thông báo của hệ thống đến tài khoản Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán Hậu điều kiện - Danh sách tất cả các thông báo của hệ thống đến tài khoản
- Các cập nhật, thay đổi(nếu có) được thực hiện thành công
1 Người bán chọn chức năng Thông báo ở phần Quản lý cửa hàng trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả các thông báo theo loại: tài khoản và báo cáo
3 Người bán chọn loại loại thông báo cần xem
4 Hệ thống hiển thị tất cả các thông báo theo loại được chọn
1a Người bán chọn vào biểu tượng thông báo trên thanh header góc trên bên phải màn hình
1b Hệ thống hiển thị các thông báo theo loại Người bán chọn Xem tất cả
Luồng ngoại lệ 3a Người bạn chọn nút Đánh dấu tất cả đã đọc
3b Hệ thống lưu dữ liệu và thông báo thao tác thành công
3.2.29 Đặc tả usecase Quản lý đơn hàng
Bảng 3 29 Đặc tả usecase Quản lý đơn hàng
Tên Usecase Quản lý đơn hàng
Usecase này cho phép người bán:
- Xem, tìm kiếm, lọc theo trạng thái, cập nhật trạng thái của đơn hàng
- Xuất báo cáo tất cả các đơn hàng của cửa hàng
Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán
- Thông báo khi cập nhật trạng thái đơn hàng được thực hiện thành công
- Lưu thay đổi vào hệ thống
1 Người bán chọn chức năng Tất cả ở phần Quản lý đơn hàng trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả đơn hàng của cửa hàng theo trạng thái
3 Người bán chọn nút Cập nhật trạng thái để cập nhật trạng thái của đơn hàng
4 Hệ thống hiển thị thông báo Xác nhận cập nhật trạng thái đơn hàng
5 Người bán chọn nút Xác nhận
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công Hệ thống thông báo sự thay đổi của đơn hàng về phía khách hàng
3a.1 Người bán chọn nút Xuất báo cáo 3a.2 Hệ thống xuất báo cáo dưới dạng file Excel và Usecase này cho phép tải về
3b.1 Người bán Tìm kiếm đơn hàng bằng mã đơn trên ô tìm kiếm 3b.2 Hệ thống hiển thị đơn hàng theo mã đơn cần tìm
Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
3.2.30 Đặc tả usecase Quản lý hoàn đơn
Bảng 3 30 Đặc tả usecase Quản lý hoàn đơn
Tên Usecase Quản lý đơn hàng
Usecase này cho phép người bán xem chi tiết yêu cầu hoàn đơn từ khách hàng, xác nhận hoàn tiền đơn hàng hoặc gửi khiếu nại hoàn đơn lên hệ thống nếu không đồng ý
Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán
- Thông báo khi cập nhật trạng thái đơn hàng được thực hiện thành công hoặc gửi khiếu nại thành công
- Lưu thay đổi vào hệ thống
1 Người bán chọn chức năng Trả hàng/Hoàn tiền ở phần Quản lý đơn hàng trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả các yêu cầu hoàn trả đơn của khách hàng theo trạng thái xử lý
3 Người bán chọn nút Đồng ý hoàn trả để xác nhận yêu cầu hoàn trả của khách hàng
4 Hệ thống hiển thị thông báo Xác nhận đồng ý hoàn trả đơn hàng
5 Người bán chọn nút Xác nhận
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công Hệ thống thông báo sự thay đổi của đơn hàng về phía khách hàng
3a Người bán chọn nút Gửi khiếu nại dể khiếu nại yêu cầu hoàn tiền của khách hàng lên hệ thống
4a Hệ thống hiển thị form nhập thông tin khiếu nại bao gồm: lý do giải trình khiếu nại và hình ảnh minh chứng
5a Người bán chọn nút Gửi Tiếp tục các bước 6,7
Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
3.2.31 Đặc tả usecase Quản lý khuyến mãi
Bảng 3 31 Đặc tả usecase Quản lý khuyến mãi
Tên Usecase Quản lý khuyến mãi
Mô tả Usecase Usecase này cho phép người bán tạo, xem, xóa, sửa các khuyến mãi của cửa hàng Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán
Hậu điều kiện - Thông báo khi các thao tác được thực hiện thành công
- Lưu thay đổi vào hệ thống
1 Người bán chọn chức năng Khuyến mãi của shop ở phần Kênh marketing trên thanh Sidebar
2 Hệ thống hiển danh sách tất cả các khuyến mãi của cửa hàng
3 Người bán chọn nút Tạo ngay để tạo khuyến mãi
4 Hệ thống hiển thị form nhập thông tin khuyến mãi bao gồm: loại khuyến mãi (mặc định áp dụng cho toàn cửa hàng), tên chương trình, mã khuyến mãi, ngày bắt đầu, ngày kết thúc, mức giảm theo số tiền, giá trị tối thiểu của đơn hàng, tổng số lượt khuyến mãi, số lượt sử dụng tối đa của một tài khoản
5 Người bán nhập đầy đủ các thông tin và nhấn nút Gửi
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công Hệ thống thông báo khuyến mãi sản phẩm về phía khách hàng đã theo dõi cửa hàng
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU
4a Người bán chọn loại khuyến mãi áp dụng cho sản phẩm Hệ thống hiển thị danh sách tất cả các sản phẩm của cửa hàng
5a Người bán chọn sản phẩm áp dụng khuyến mãi, nhập đầy đủ tất cả các thông tin và nhấn nút Gửi
Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
3.2.32 Đặc tả usecase Quản lý thông tin cửa hàng
Bảng 3 32 Đặc tả usecase Quản lý thông tin cửa hàng
Tên Usecase Quản lý thông tin cửa hàng
Mô tả Usecase Usecase này cho phép người bán xem, cập nhật thông tin về chủ sở hữu, thông tin cửa hàng, thông tin thuế, thông tin định danh
Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán
Hậu điều kiện - Thông báo khi các thao tác cập nhật được thực hiện thành công
- Lưu thay đổi vào hệ thống
1 Người bán chọn chức năng Hồ sơ ở phần Quản lý shop trên thanh Sidebar
2 Hệ thống hiển các thông tin về chủ sở hữu, cửa hàng, thuế và định danh theo dạng tab
3 Người bán chọn nút Cập nhật thông tin
4 Hệ thống hiển thị form nhập thông tin
5 Người bán nhập đầy đủ các thông tin và nhấn nút Lưu
6 Hệ thống kiểm tra thông tin hợp lệ
7 Hệ thống lưu thông tin và thông báo thao tác thành công Hệ thống thông báo thay đổi thành công về tài khoản người bán Luồng thay thế 5a Người bán chọn nút Hủy Usecase kết thúc
Luồng ngoại lệ 6a Hệ thống kiểm tra thông tin không hợp lệ
7a Hệ thống thông báo thất bại Usecase kết thúc
3.2.33 Đặc tả usecase Đăng ký quảng cáo
Bảng 3 33 Đặc tả Usecase Đăng ký quảng cáo
Tên Usecase Quản lý thông tin cửa hàng
Mô tả Usecase Usecase này cho phép người bán xem, cập nhật thông tin về chủ sở hữu, thông tin cửa hàng, thông tin thuế, thông tin định danh
Actor chính Người bán ̣(Seller)
Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý cửa hàng của người bán
Hậu điều kiện - Thông báo khi các thao tác cập nhật được thực hiện thành công
- Lưu thay đổi vào hệ thống
8 Người bán chọn chức năng Hồ sơ ở phần Quản lý shop trên thanh Sidebar
9 Hệ thống hiển các thông tin về chủ sở hữu, cửa hàng, thuế và định danh theo dạng tab
10 Người bán chọn nút Cập nhật thông tin
11 Hệ thống hiển thị form nhập thông tin
12 Người bán nhập đầy đủ các thông tin và nhấn nút Lưu
13 Hệ thống kiểm tra thông tin hợp lệ
THIẾT KẾ PHẦN MỀM
Lược đồ ERD
4.2 Lược đồ tuần tự (Sequence diagram)
4.2.1 Lược đồ tuần tự Quản lý quảng cáo
Hình 4 2 Lược đồ tuần tự Quản lý quảng cáo
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.2 Lược đồ tuần tự Quản lý khuyến mãi
Hình 4 3 Lược đồ tuần tự Quản lý khuyến mãi
4.2.3 Lược đồ tuần tự Đăng ký
Hình 4 4 Lược đồ tuần tự Đăng ký
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.4 Lược đồ tuần tự Thêm sản phẩm vào danh sách yêu thích
Hình 4 5 Lược đồ tuần tự Thêm sản phẩm vào danh sách yêu thích
4.2.5 Lược đồ tuần tự Đặt hàng
Hình 4 6 Lược đồ tuần tự Đặt hàng
4.2.6 Lược đồ tuần tự Quản lý ví cá nhân
Hình 4 7 Lược đồ tuận tự Quản lý ví cá nhân
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.7 Lược đồ tuần tự Trò chuyện với cửa hàng
Hình 4 8 Lược đồ tuần tự Trò chuyện với cửa hàng
4.2.8 Lược đồ tuần tự Báo cáo vi phạm
Hình 4 9 Lược đồ tuần tự Báo cáo vi phạm
4.2.9 Lược đồ tuần tự Quản lý thông báo cá nhân
Hình 4 10 Lược đồ tuần tự Quản lý thông báo cá nhân
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.10 Lược đồ tuần tự Hủy đơn hàng
Hình 4 11 Lược đồ tuần tự Hủy đơn hàng
4.2.11 Lược đồ tuần tự Thanh toán online
Hình 4 12 Lược đồ tuần tự Thanh toán online
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.12 Lược đồ tuần tự Báo cáo thống kê hệ thống
Hình 4 13 Lược đồ tuần tự Báo cáo thống kê hệ thống
4.2.13 Lược đồ tuần tự Quản lý yêu cầu rút tiền
Hình 4 14 Lược đồ tuần tự Quản lý yêu cầu rút tiền
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.14 Lược đồ tuần tự Báo cáo sản phẩm vi phạm
Hình 4 15 Lược đồ tuần tự Báo cáo sản phẩm vi phạm
4.2.15 Lược đồ tuần tự Báo cáo cửa hàng vi phạm
Hình 4 16 Lược đồ tuần tự Báo cáo cửa hàng vi phạm
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.16 Lược đồ tuần tự Quản lý khiếu nại hoàn đơn
Hình 4 17 Lược đồ tuần tự Quản lý khiếu nại hoàn đơn
4.2.17 Lược đồ tuần tự Đăng ký cửa hàng
Hình 4 18 Lược đồ tuần tự Đăng ký cửa hàng
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.18 Lược đồ tuần tự Quản lý danh mục của cửa hàng
Hình 4 19 Lược đồ tuần tự Quản lý danh mục của cửa hàng
4.2.19 Lược đồ tuần tự Quản lý sản phẩm của cửa hàng
Hình 4 20 Lược đồ tuần tự Quản lý sản phẩm của cửa hàng
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.20 Lược đồ tuần tự Quản lý đánh giá sản phẩm
Hình 4 21 Lược đồ tuần tự Quản lý đánh giá sản phẩm
4.2.21 Lược đồ tuần tự Đăng nhập
Hình 4 22 Lược đồ tuần tự Đăng nhập
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM
4.2.22 Lược đồ tuần tự Quản lý thông tin cá nhân
Hình 4 23 Lược đồ tuần tự Quản lý thông tin cá nhân
4.4 Sơ đồ cấu trúc hệ thống
Hình 4 24 Sơ đồ cấu trúc hệ thống
Cấu trúc hệ thống bao gồm web server, microservice và third-party services
- Backend server (furniture-market-be) sử dụng Java Spring boot Backend server sẽ xử lý các yêu cầu HTTP từ client, kết nối và tương tác với cơ sở dữ liệu, thực hiện công việc xác thực và phân quyền Ngoài ra, backend server còn đảm nhận công việc xử lý logic nghiệp vụ, bảo mật, tương tác và tích hợp các dịch vụ của bên thứ ba đồng thời cung cấp RESTful API đề frontend có thể tương tác với các chức năng
- Frontend server (fnestmall và fnestadmin) sử dụng framework React với ngôn ngữ TypeScript Frontend server này thuộc loại Client-side rendering (Chạy ở phía máy của người dùng, do đó client browser sẽ giao tiếp với backend server để lấy dữ liệu render tại phía người dùng hoặc thực hiện các chức năng)
- Microservice (furniture-market-ai-service) đóng vai trò là hệ thống đề xuất sản phẩm (thực hiện bằng các thuật toán machine learning)
- Third-party services bao gồm:
+ Google APIs & Services cung cấp chức năng đăng nhập bằng Google và gửi thông tin qua mail
+ Google cloud storage cung cấp chức năng lưu trữ và quản lý file của hệ thống + VNPay cung cấp dịch vụ thanh toán online
+ GHN API (Giao hàng nhanh) cung cấp chức năng tính phí vận chuyển.
Sơ đồ cấu trúc hệ thống
Hình 4 24 Sơ đồ cấu trúc hệ thống
Cấu trúc hệ thống bao gồm web server, microservice và third-party services
- Backend server (furniture-market-be) sử dụng Java Spring boot Backend server sẽ xử lý các yêu cầu HTTP từ client, kết nối và tương tác với cơ sở dữ liệu, thực hiện công việc xác thực và phân quyền Ngoài ra, backend server còn đảm nhận công việc xử lý logic nghiệp vụ, bảo mật, tương tác và tích hợp các dịch vụ của bên thứ ba đồng thời cung cấp RESTful API đề frontend có thể tương tác với các chức năng
- Frontend server (fnestmall và fnestadmin) sử dụng framework React với ngôn ngữ TypeScript Frontend server này thuộc loại Client-side rendering (Chạy ở phía máy của người dùng, do đó client browser sẽ giao tiếp với backend server để lấy dữ liệu render tại phía người dùng hoặc thực hiện các chức năng)
- Microservice (furniture-market-ai-service) đóng vai trò là hệ thống đề xuất sản phẩm (thực hiện bằng các thuật toán machine learning)
- Third-party services bao gồm:
+ Google APIs & Services cung cấp chức năng đăng nhập bằng Google và gửi thông tin qua mail
+ Google cloud storage cung cấp chức năng lưu trữ và quản lý file của hệ thống + VNPay cung cấp dịch vụ thanh toán online
+ GHN API (Giao hàng nhanh) cung cấp chức năng tính phí vận chuyển.
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Giao diện phân hệ Khách hàng
5.1.1 Giao diện trang đăng nhập cho người mua
Hình 5 1 Giao diện trang đăng nhập cho người mua Bảng 5 1 Mô tả giao diện trang đăng nhập cho người mua
STT Tên Loại Ghi chú
1 Email Input text Nhập email
2 Mật khẩu Password Nhập mật khẩu
3 Nút đăng nhập Button Nút đăng nhập
4 Link trang đăng ký Link Nút chuyển tới trang đăng ký
5.1.2 Giao diện trang đăng ký tài khoản người mua
Hình 5 2 Giao diện trang đăng ký tài khoản người mua Bảng 5 2 Mô tả giao diện trang đăng ký tài khoản người mua
STT Tên Loại Ghi chú
1 Email Input text Nhập email
2 Họ và tên Input text Nhập họ và tên người bán
3 Số điện thoại Input text Nhập số điện thoại
5 Giới tính Select Chọn giới tính
6 Mật khẩu Password Nhập mật khẩu
7 Xác nhận mật khẩu Password Nhập mật khẩu xác nhận
8 Nút Đăng ký Button Gửi yêu cầu đăng ký tài khoản
9 Link trang đăng nhập Link Chuyển hướng tới trang đăng nhập
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.1.3 Giao diện trang quản lý sản phẩm yêu thích
Hình 5 3 Giao diện trang quản lý sản phẩm yêu thích Bảng 5 3 Mô tả giao diện trang quản lý sản phẩm yêu thích
STT Tên Loại Ghi chú
1 Mục sản phẩm Link Chuyển tới trang chi tiết sản phẩm
2 Nút bỏ yêu thích Button Bỏ yêu thích sản phẩm
5.1.4 Giao diện trang chi tiết sản phẩm
Hình 5 4 Giao diện trang chi tiết sản phẩm Bảng 5 4 Mô tả giao diện trang chi tiết sản phẩm
STT Tên Loại Ghi chú
1 Nút báo cáo Button Gửi báo cáo vi phạm
2 Nút thêm vào giỏ hàng Button Thêm sản phẩm vào giỏ hàng
3 Nút yêu thích sản phẩm Button Yêu thích sản phẩm
5.1.5 Giao diện trang tìm kiếm, lọc sản phẩm
Hình 5 5 Giao diện trang tìm kiếm, lọc sản phẩm Bảng 5 5 Mô tả giao diện trang tìm kiếm, lọc sản phẩm
STT Tên Loại Ghi chú
1 Bộ lọc Sidebar Chọn các tiêu chí lọc
2 Nút bán chạy Button Lọc các sản phẩm bán chạy
3 Nút mới nhất Button Lọc các sản phẩm mới nhất
4 Loại sắp xếp Select Chọn loại sắp xếp
5 Ô tìm kiếm Input text Nhập từ khóa tìm kiếm
5.1.6 Giao diện trang quản lý giỏ hàng
Hình 5 6 Giao diện trang quản lý giỏ hàng Bảng 5 6 Mô tả giao diện trang quản lý giỏ hàng
STT Tên Loại Ghi chú
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
1 Nút điều chỉnh số lượng Button Điều chỉnh số lượng sản phẩm
2 Nút xóa mục sản phẩm Button Xóa mục sản phẩm khỏi giỏ hàng
3 Nút khám phá ngay Button Chuyển hướng đến trang sản phẩm
4 Nút xóa tất cả Button Xóa tất cả sản phẩm khỏi giỏ hàng
5 Nút đặt hàng Button Gửi yêu cầu đặt hàng
5.1.7 Giao diện trang đặt hàng
Hình 5 7 Giao diện trang đặt hàng (1)
Hình 5 8 Giao diện trang đặt hàng (2) Bảng 5 7 Mô tả giao diện trang đặt hàng
STT Tên Loại Ghi chú
1 Nút thay đổi địa chỉ giao hàng Button Điều hướng đến trang quản lý địa chỉ giao hàng
2 Nút chọn voucher Button Hiển thị các voucher có thể chọn
3 Nút thanh toán khi nhận hàng Button Chọn phương thức thanh toán là
4 Nút số dư ví Button Chọn phương thức thanh toán là trả bằng ví
5 Nút đặt hàng Button Gửi yêu cầu đặt hàng
5.1.8 Giao diện trang đánh giá sản phẩm
Hình 5 9 Giao diện trang đánh giá sản phẩm Bảng 5 8 Mô tả giao diện trang đánh giá sản phẩm
STT Tên Loại Ghi chú
1 Ô nhập liệu đánh giá Input text Nhập nội dung đánh giá
2 Nút chọn số sao Button Chọn số sao đánh giá
3 Nút gửi đánh giá Button Gửi đánh giá
5.1.9 Giao diện trang quản lý ví cá nhân
Hình 5 10 Giao diện trang quản lý ví cá nhân Bảng 5 9 Mô tả giao diện trang quản lý cá nhân
STT Tên Loại Ghi chú
1 Nút yêu cầu nạp tiền Button Nạp tiền vào ví qua VN Pay
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
2 Nút yêu cầu rút tiền Button Tạo yêu cầu rút tiền
5.1.10 Giao diện trang quản lý thông tin cá nhân
Hình 5 11 Giao diện trang quản lý thông tin cá nhân Bảng 5 10 Mô tả giao diện trang quản lý thông tin cá nhân
STT Tên Loại Ghi chú
1 Nút cập nhật Button Cập nhật ảnh đại diện
2 Nút thay đổi thông tin Button Cập nhật thông tin cá nhân
3 Nút đổi mật khẩu Button Thay đổi mật khẩu
5.1.11 Giao diện trang báo cáo vi phạm
Hình 5 12 Giao diện trang báo cáo vi phạm Bảng 5 11 Mô tả giao diện trang báo cáo vi phạm
STT Tên Loại Ghi chú
1 Lý do báo cáo Select Chọn lý do báo cáo
2 Ô nhập mô tả báo cáo Input text Nhập mô tả chi tiết báo cáo vi phạm
3 Nút gửi báo cáo Button Gửi báo cáo vi phạm
4 Nút hủy Button Hủy báo cáo vi phạm
5.1.12 Giao diện quản lý thông báo cá nhân
Hình 5 13 Giao diện quản lý thông báo cá nhân
Mô tả giao diện quản lý thông báo cá nhân
STT Tên Loại Ghi chú
1 Thanh điều hướng thông báo Sidebar
Giao diện phân hệ Người bán
5.2.1 Giao diện trang Đăng nhập dành cho cửa hàng
Hình 5 14 Giao diện trang đăng nhập dành cho cửa hàng Bảng 5 12 Mô tả giao diện trang đăng nhập dành cho cửa hàng
STT Tên Loại Ghi chú
1 Email Input text Nhập email
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
2 Password Password Nhập mật khẩu
3 Login Button Button Nút đăng nhập
4 Register Button Link Nút chuyển tới trang đăng ký
5.2.2 Giao diện trang Đăng ký cửa hàng
Hình 5 15 Giao diện trang đăng ký cửa hàng Bảng 5 13 Mô tả giao diện trang đăng ký cửa hàng
STT Tên Loại Ghi chú
1 Email Input text Nhập email
2 Họ và tên Input text Nhập họ và tên người bán
3 Số điện thoại Input text Nhập số điện thoại
5 Giới tính Select Chọn giới tính
6 Mật khẩu Password Nhập mật khẩu
7 Xác nhận mật khẩu Password Nhập mật khẩu xác nhận
8 Đồng ý điều khoản Checkbox Nhấn chọn đồng ý điều khoản
10 Đăng nhập Link Chuyển hướng tới trang đăng nhập
5.2.3 Giao diện trang Dashboard của cửa hàng
Hình 5 16 Giao diện trang Dashboard của cửa hàng (1)
Hình 5 17 Giao diện trang Dashboard của cửa hàng (2) Bảng 5 14 Mô tả giao diện trang Dashboard của cửa hàng
STT Tên Loại Ghi chú
2 Tổng doanh thu trong tháng Widget
3 Tổng đơn hàng trong tháng Widget
4 Tổng sản phẩm bán được trong tháng
5 Sản phẩm bán chạy nhất tháng Widget
6 Biểu đồ doanh thu từ đơn hàng Line Chart Biểu đồ doanh thu từ đơn hàng theo ngày trong tháng
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
7 Biểu đồ thống kê đơn hàng Bar Chart Thống kê số lượng đơn hàng theo ngày trong tháng
8 Phần trăm sản phẩm bán được trên tổng số
5.2.4 Giao diện trang Danh mục của cửa hàng
Hình 5 18 Giao diện trang danh mục của cửa hàng
Hình 5 19 Giao diện trang xem chi tiết sản phẩm của danh mục
Hình 5 20 Giao diện chỉnh sửa danh mục
Hình 5 21 Giao diện xác nhận xóa danh mục Bảng 5 15 Mô tả giao diện trang danh mục của cửa hàng
STT Tên Loại Ghi chú
1 Nút thêm danh mục Button
2 Danh sách toàn bộ các danh mục của cửa hàng
3 Nút xem sản phẩm của danh mục
Button Nhấn vào để xem tất cả các sản phẩm thuộc danh mục
4 Nút chỉnh sửa danh mục Button
5 Nút xóa danh mục Button
6 Phân trang cho dữ liệu bảng Pagination
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.2.5 Giao diện trang Tất cả sản phẩm của cửa hàng
Hình 5 22 Giao diện trang Tất cả sản phẩm của cửa hàng
Hình 5 23 Giao diện mở rộng xem chi tiết một sản phẩm Bảng 5 16 Mô tả giao diện trang Tất cả sản phẩm của cửa hàng
STT Tên Loại Ghi chú
1 Thanh điều hướng Tab Hiển thị sản phẩm theo danh mục của cửa hàng
2 Ô tìm kiếm Input Text Tìm kiếm sản phẩm theo tên
3 Nút thêm sản phẩm Button
4 Danh sách sản phẩm Data Table
5 Nút chỉnh sửa danh mục Button
6 Nút xóa danh mục Button
7 Phân trang cho bảng dữ liệu Pagination
8 Nút mở rộng Button Nhấn vào nút mở rộng để xem chi tiết một sản phẩm cụ thể
5.2.6 Giao diện trang Thêm sản phẩm
Hình 5 24 Giao diện trang thêm sản phẩm Bảng 5 17 Mô tả giao diện thêm sản phẩm
STT Tên Loại Ghi chú
2 Chọn hình ảnh Input Image
3 Nhập tên sản phẩm Input Text
4 Nhập chất liệu sản phẩm Input Text
5 Nhập mô tả sản phẩm Input Text
6 Nhập số lượng trong kho Input
7 Nhập giá nhập sản phẩm Input
8 Nhập giá bán sản phẩm Input
9 Chọn danh mục của cửa hàng Select
10 Chọn danh mục của hệ thống Select
11 Chọn tình trạng sản phẩm Select
12 Sản phẩm nổi bật Checkbox
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
17 Nút thêm sản phẩm Button
5.2.6 Giao diện trang Chỉnh sửa sản phẩm
Hình 5 25 Giao diện trang chỉnh sửa sản phẩm Bảng 5 18 Mô tả giao diện trang chỉnh sửa sản phẩm
STT Tên Loại Ghi chú
2 Chọn hình ảnh Input Image
3 Nhập tên sản phẩm Input Text
4 Nhập chất liệu sản phẩm Input Text
5 Nhập mô tả sản phẩm Input Text
6 Nhập số lượng trong kho Input
7 Nhập giá nhập sản phẩm Input
8 Nhập giá bán sản phẩm Input
9 Chọn danh mục của cửa hàng Select
10 Chọn danh mục của hệ thống Select
11 Chọn tình trạng sản phẩm Select
12 Sản phẩm nổi bật Checkbox
17 Nút thêm sản phẩm Button
5.2.7 Giao diện trang Sản phẩm bị báo cáo vi phạm
Hình 5 26 Giao diện trang sản phẩm bị báo cáo vi phạm Bảng 5 19 Mô tả giao diện trang sản phẩm bị báo cáo vi phạm
STT Tên Loại Ghi chú
1 Danh sách các sản phẩm bị báo cáo vi phạm Data Table
3 Phân trang cho dữ liệu bảng Pagination
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.2.8 Giao diện trang Tất cả đơn hàng của cửa hàng
Hình 5 27 Giao diện trang tất cả đơn hàng của cửa hàng
Hình 5 28 Giao diện mở rộng xem chi tiết một đơn hàng Bảng 5 20 Mô tả giao diện trang tất cả đơn hàng của cửa hàng
STT Tên Loại Ghi chú
1 Thanh điều hướng Tab Hiển thị đơn hàng theo trạng thái
2 Nút xuất báo cáo Button Xuất báo cáo tất cả các đơn hàng dưới dạng file excel
3 Danh sách đơn hàng Data Table
4 Nút cập nhật trạng thái đơn hàng
5 Nút mở rộng Button Nhấn vào nút mở rộng để xem chi tiết một đơn hàng cụ thể
6 Phân trang cho bảng dữ liệu Pagination
5.2.9 Giao diện trang Các đơn hàng yêu cầu hoàn tiền
Hình 5 29 Giao diện trang các đơn hàng yêu cầu hoàn tiền
Hình 5 30 Giao diện xác nhận đồng ý hoàn trả
Hình 5 31 Giao diện gửi khiếu nại hoàn trả đơn hàng
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Bảng 5 21 Mô tả giao diện tất cả yêu cầu hoàn trả đơn hàng
STT Tên Loại Ghi chú
1 Danh sách tất cả các đơn hàng Data Table
2 Trạng thái đơn Button Chọn trạng thái hiển thị dữ liệu bảng:
Chưa xác nhận và Đã xác nhận
5 Phân trang cho bảng dữ liệu Pagination
5.2.10 Giao diện trang Chi tiết doanh thu của cửa hàng
Hình 5 32 Giao diện trang chi tiết doanh thu của cửa hàng
Bảng 5 22 Mô tả trang chi tiết doanh thu của cửa hàng
STT Tên Loại Ghi chú
1 Danh sách tất cả các đơn hàng kèm chi tiết lợi nhuận Data Table
2 Chọn tháng Button Chọn tháng để hiển thị thống kê doanh thu chi tiết
3 Chọn năm Button Chọn năm để hiển thị thống kê doanh thu chi tiết
4 Phân trang cho bảng dữ liệu Pagination
5 Tổng số đơn hàng trong tháng Widget
6 Tổng giá trị các đơn đang vận chuyển trong tháng Widget
7 Tổng lợi nhuận thu được trong tháng Widget
5.2.11 Giao diện trang Ví cá nhân
Hình 5 33 Giao diện trang ví cá nhân Bảng 5 23 Mô tả trang ví cá nhân
STT Tên Loại Ghi chú
1 Thanh điều hướng Tab Điều hướng giữa hai trang Số dư ví và lịch sử giao dịch
2 Số dư tài khoản hiện tại Text
3 Nạp tiền vào ví Button
4 Tạo yêu cầu rút tiền Button
5.2.12 Giao diện trang Quản lý tin nhắn của cửa hàng
Hình 5 34 Giao diện trang quản lý tin nhắn của cửa hàng
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Bảng 5 24 Mô tả giao diện quản lý tin nhắn của cửa hàng
STT Tên Loại Ghi chú
1 Thanh bên hiển thị người dùng nhắn tin đến Tab
2 Nội dung cuộc trò chuyện Text
3 Ô nhập nội dung tin nhắn Input Text
4 Nút gửi tin nhắn Button
5.2.12 Giao diện trang Quản lý đánh giá của khách hàng
Hình 5 35 Giao diện trang quản lý đánh giá của khách hàng
Hình 5 36 Giao diện phản hồi đánh giá Bảng 5 25 Mô tả giao diện trang quản lý đánh giá của khách hàng
STT Tên Loại Ghi chú
1 Danh sách các đánh giá của khách hàng về sản phẩm Data Table
2 Trạng thái chưa phản hồi Button Chọn trạng thái hiển thị dữ liệu bảng:
2 Trạng thái đã phản hồi Button Chọn trạng thái hiển thị dữ liệu bảng: Đã phản hồi
4 Nút phản hồi đánh giá Button
5 Phân trang cho bảng dữ liệu Pagination
5.2.13 Giao diện trang Chiến dịch quảng cáo của cửa hàng
Hình 5 37 Giao diện trang chiến dịch quảng cáo của cửa hàng
Hình 5 38 Giao diện tạo chiến dịch quảng cáo (1)
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Hình 5 39 Giao diện tạo chiến dịch quảng cáo (2) Bảng 5 26 Mô tả giao diện trang chiến dịch quảng cáo của cửa hàng
STT Tên Loại Ghi chú
2 Danh sách các chiến dịch quảng cáo của cửa hàng Data Table
3 Phân trang cho bảng dữ liệu Pagination
4 Chọn gói đăng ký Select Có 3 gói cần chọn: basic, medium, premium
5 Chọn sản phẩm đăng ký quảng cáo Checkbox
6 Nhập từ khóa Input Text
8 Danh sách từ khóa Badge
5.2.14 Giao diện trang Khuyến mãi của cửa hàng
Hình 5 40 Giao diện trang khuyến mãi của cửa hàng
Hình 5 41 Giao diện tạo khuyến mãi Bảng 5 27 Mô tả giao diện trang khuyến mãi của cửa hàng
STT Tên Loại Ghi chú
1 Tạo chương trình giảm giá Button
2 Danh sách các chương trình giảm giá của cửa hàng Data Table
3 Chỉnh sửa giảm giá Button
5 Phân trang cho bảng dữ liệu Pagination
6 Chọn loại giảm giá Select
Có 2 loại mã giảm giá: Áp dụng cho toàn cửa hàng và áp dụng cho các sản phẩm chỉ định
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Chọn sản phẩm khi tạo giảm giá áp dụng cho một số sản phẩm được chọn
8 Nhập tên chương trình giảm giá Input Text
9 Nhập mã giảm giá Input Text
10 Chọn ngày bắt đầu DateTime
11 Chọn ngày kết thúc DateTime
12 Nhập mức giảm giá Input
13 Nhập giá trị tối thiểu đơn mua Input
14 Nhập tổng số lượt sử dụng tối đa của mã giảm
15 Nhập tổng lượt sử dụng tối đa của một tài khoản
5.2.14 Giao diện trang Quản lý thông tin cửa hàng
Hình 5 42 Giao diện trang quản lý thông tin cửa hàng
Hình 5 43 Giao diện cập nhật ảnh đại diện
Hình 5 44 Giao diện cập nhật thông tin cá nhân
Hình 5 45 Giao diện đổi mật khẩu
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Hình 5 46 Giao diện thông tin cửa hàng
Hình 5 47 Giao diện thông tin thuế
Hình 5 48 Giao diện thông tin định danh
Bảng 5 28 Mô tả giao diện quản lý thông tin cửa hàng
STT Tên Loại Ghi chú
2 Cập nhật ảnh đại diện Button
3 Cập nhật thông tin Button Nút cập nhật thông tin cá nhân
6 Cập nhật thông tin Button Nút cập nhật thông tin cửa hàng
7 Cập nhật thông tin Button Nút cập nhật thông tin về thuế
8 Cập nhật thông tin Button Nút cập nhật thông tin định danh 5.2.15 Giao diện cập nhật thông tin cửa hàng
Hình 5 49 Giao diện cập nhật thông tin cửa hàng Bảng 5 29 Mô tả giao diện cập nhật thông tin cửa hàng
STT Tên Loại Ghi chú
1 Nhập tên cửa hàng Input Text
2 Nhập tên người đại diện Button
3 Tải lên logo Input Image
4 Tải lên ảnh bìa Input Image
5 Tải lên banner thông tin Input Image
8 Chọn tỉnh, thành phố Select
9 Nhập địa chỉ cụ thể Input Text
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
10 Nhập mô tả cửa hàng Input Text
5.2.16 Giao diện cập nhật thông tin thuế
Hình 5 50 Giao diện cập nhật thông tin thuế Bảng 5 30 Mô tả giao diện cập nhật thông tin thuế
STT Tên Loại Ghi chú
1 Chọn loại hình thuế Select
2 Nhập mã số thuế Input Text
5.2.17 Giao diện cập nhật thông tin định danh
Hình 5 51 Giao diện cập nhật thông tin định danh
Bảng 5 31 Mô tả giao diện cập nhật thông tin định danh
STT Tên Loại Ghi chú
1 Nhập mã số căn cước công dân/định danh điện tử Input Text
2 Nhập họ và tên Input Text
3 Tải lên hình ảnh CCCD mặt trước
4 Tải lên hình ảnh CCCD mặt sau
Giao diện phân hệ Quản trị viên
5.3.1 Giao diện trang Đăng nhập
Hình 5 52 Giao diện đăng nhập phân hệ quản trị Bảng 5 32 Mô tả giao diện trang đăng nhập phía quản trị viên
STT Tên Loại Ghi chú
2 Password Password Nhập mật khẩu
3 Login Button Button Nút đăng nhập
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Hình 5 53 Giao diện trang Dashboard (1)
Hình 5 54 Giao diện trang Dashboard (2)
Hình 5 55 Giao diện trang Dashboard (3)
Bảng 5 33 Mô tả giao diện trang Dashboard
STT Tên Loại Ghi chú
2 Hoa hồng đơn hàng Widget Tổng lợi nhuận hoa hồng từ tất cả các đơn hàng trong tháng
3 Hoa hồng quảng cáo Widget Tổng lợi nhuận hoa hồng từ quảng cáo trong tháng
4 Tổng số người mua Widget
5 Tổng số cửa hàng Widget
6 Biểu đồ thống kê hoa hồng theo đơn hàng từng ngày Line Chart
7 Biểu đồ thống kê hoa hồng theo đăng ký quảng cáo từng ngày Line Chart
8 Biểu đồ thống kê số lượng đơn hàng từng ngày Bar Chart
5.3.3 Giao diện trang Quản lý danh mục hệ thống
Hình 5 56 Giao diện trang quản lý danh mục hệ thống
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Hình 5 57 Giao diện thêm danh mục hệ thống
Hình 5 58 Giao diện xem chi tiết danh mục
Hình 5 59 Giao diện chỉnh sửa danh mục hệ thống
Hình 5 60 Giao diện xóa danh mục hệ thống Bảng 5 34 Mô tả giao diện trang quản lý danh mục hệ thống
STT Tên Loại Ghi chú
2 Nút thêm danh mục Button
3 Danh sách các danh mục của hệ thống Data Table
4 Nút xem chi tiết Button
5 Nút chỉnh sửa danh mục Button
6 Nút xóa danh mục Button
7 Thêm danh mục Modal Form thêm danh mục hệ thống
8 Xem chi tiết danh mục Modal
9 Chỉnh sửa danh mục Modal Form chỉnh sửa danh mục hệ thống
10 Thông báo xác nhận xóa danh mục
11 Phân trang cho bảng dữ liệu Pagination
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.3.4 Giao diện trang Quản lý người dùng hệ thống
Hình 5 61 Giao diện trang quản lý người dùng hệ thống
Hình 5 62 Giao diện xem chi tiết người dùng
Hình 5 63 Giao diện thông báo xác nhận vô hiệu hóa/hủy vô hiệu hóa người dùng
Bảng 5 35 Mô tả giao diện trang quản lý người dùng hệ thống
STT Tên Loại Ghi chú
2 Danh sách tất cả người dùng của hệ thống Data Table
3 Phân trang cho bảng dữ liệu Pagination
4 Xem chi tiết người dùng Button
5 Nút vô hiệu hóa/hủy vô hiệu hóa người dùng Button
6 Thông báo xác nhận vô hiệu hóa/hủy vô hiệu hóa
Popup Confirm 5.3.5 Giao diện trang Phân quyền hệ thống
Hình 5 64 Giao diện phân quyền hệ thống Bảng 5 36 Mô tả giao diện phân quyền hệ thống
STT Tên Loại Ghi chú
2 Nút thêm phân quyền Button
3 Danh sách tất cả người dùng được phân quyền của hệ thống Data Table
4 Xem chi tiết người dùng Button
5 Vô hiệu hóa/ hủy vô hiệu hóa người dùng Button
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
6 Phân trang cho bảng dữ liệu Pagination
5.3.6 Giao diện trang Quản lý cửa hàng hệ thống
Hình 5 65 Giao diện quản lý cửa hàng hệ thống
Hình 5 66 Giao diện thông tin chi tiết cửa hàng
Hình 5 67 Giao diện danh sách tất cả sản phẩm của cửa hàng
Hình 5 68 Giao diện tất cả các đơn hàng của cửa hàng Bảng 5 37 Mô tả giao diện quản lý cửa hàng hệ thống
STT Tên Loại Ghi chú
1 Danh sách tất cả các cửa hàng của hệ thống Data Table
2 Xem chi tiết thông tin cửa hàng Button
3 Xem tất cả các sản phẩm của cửa hàng Button
4 Xem tất cả các đơn hàng của cửa hàng Button
5 Phân trang cho bảng dữ liệu Pagination
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.3.7 Giao diện trang Quản lý báo cáo sản phẩm vi phạm
Hình 5 69 Giao diện quản lý báo cáo vi phạm sản phẩm
Hình 5 70 Giao diện xem chi tiết báo cáo, giải trình từ cửa hàng Bảng 5 38 Mô tả giao diện quản lý báo cáo sản phẩm vi phạm
STT Tên Loại Ghi chú
1 Danh sách tất cả các báo cáo vi phạm về sản phẩm của hệ thống Data Table
2 Xem chi tiết báo cáo Button
Chi tiết báo cáo của người mua về sản phẩm vi phạm và thông tin giải trình (nếu có) của người bán
3 Yêu cầu giải trình Button
4 Phân trang cho bảng dữ liệu Pagination
5.3.8 Giao diện trang Quản lý báo cáo cửa hàng vi phạm
Hình 5 71 Giao diện quản lý báo cáo cửa hàng vi phạm
Hình 5 72 Giao diện xem chi tiết báo cáo, giải trình từ cửa hàng Bảng 5 39 Mô tả giao diện quản lý báo cáo cửa hàng vi phạm
STT Tên Loại Ghi chú
1 Danh sách tất cả các báo cáo vi phạm về cửa hàng của hệ thống Data Table
2 Xem chi tiết báo cáo Button
Chi tiết báo cáo của người mua về sản phẩm vi phạm và thông tin giải trình (nếu có) của người bán
3 Yêu cầu giải trình Button
4 Phân trang cho bảng dữ liệu Pagination
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.3.9 Giao diện trang Quản lý khiếu nại hoàn đơn hệ thống
Hình 5 73 Giao diện quản lý khiếu nại hoàn đơn hệ thống
Hình 5 74 Giao diện xem chi tiết khiếu nại hoàn đơn Bảng 5 40 Mô tả giao diện quản lý khiếu nại hoàn đơn hệ thống
STT Tên Loại Ghi chú
1 Danh sách tất cả các khiếu nại hoàn đơn của cửa hàng Data Table Các khiếu nại được hiển thị theo trạng thái xử lý
2 Xem chi tiết khiếu nại Button
Chi tiết khiếu nại bao gồm yêu cầu hoàn trả của người mua và khiếu nại không đồng ý hoàn trả của cửa hàng
4 Từ chối hoàn trả Button
5 Phân trang cho bảng dữ liệu Pagination
5.3.10 Giao diện trang Quản lý sản phẩm đăng ký quảng cáo
Hình 5 75 Giao diện quản lý sản phẩm đăng ký quảng cáo Bảng 5 41 Mô tả giao diện quản lý sản phẩm đăng ký quảng cáo
STT Tên Loại Ghi chú
1 Danh sách tất cả các sản phẩm đăng ký quảng cáo của hệ thống Data Table
2 Phân trang cho bảng dữ liệu Pagination
5.3.11 Giao diện Tìm kiếm cửa hàng hệ thống
Hình 5 76 Giao diện kết quả tìm kiếm cửa hàng
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.3.12 Giao diện tìm kiếm đơn hàng hệ thống
Hình 5 77 Giao diện tìm kiếm đơn hàng hệ thống
5.3.13 Giao diện trang Chi tiết đơn hàng
Hình 5 78 Giao diện chi tiết đơn hàng
5.3.14 Giao diện trang Chi tiết cửa hàng
Hình 5 79 Giao diện trang chi tiết cửa hàng (1)
Hình 5 80 Giao diện trang chi tiết cửa hàng (2)
CÀI ĐẶT, TRIỂN KHAI VÀ KIỂM THỬ HỆ THỐNG
Kiểm thử hệ thống
● Sử dụng lệnh docker network create gateway-network để tạo network cho các container
● Sử dụng lệnh docker-compose up -d để chạy file docker-compose.yml
● Truy cập vào địa chỉ: http://:8080/swagger-ui.html để đến trang tài liệu hóa của hệ thống api
6.2.1 Các chức năng quản lý tài khoản
Bảng 6 1 Bảng thống kê kiểm thử các chức năng quản lý tài khoản
STT Testcase Kết quả mong đợi Kết quả
1 Chức năng đăng nhập Đăng nhập thành công, đúng vai trò Pass
2 Chức năng đăng ký Đăng ký thành công tài khoản khách hàng và tài khoản cửa hàng Pass
Sau khi người dùng nhập otp được gửi qua email, nếu hợp lệ email sẽ được xác thực
4 Đổi mật khẩu Đổi mật khẩu thành công Pass
Xác thực thành công otp qua email sẽ được cập một mật khẩu ngẫu nhiên mới
6 Đổi thông tin cá nhân Thông tin cá nhân của người dùng được đổi tành công Pass
6.2.2 Các chức năng quản lý đơn hàng, giỏ hàng, sản phẩm yêu thích
Bảng 6 2 Bảng thống kê kiểm thử các chức năng quản lý đơn hàng, giỏ hàng, sản phẩm yêu
STT Testcase Kết quả mong đợi Kết quả
1 Thêm sản phẩm vào danh sách sản phẩm yêu thích
Trong danh sách sản phẩm yêu thích xuất hiện sản phẩm vừa thêm
2 Xóa sản phẩm yêu thích Sản phẩm biến mất khỏi danh sách sản phẩm yêu thích Pass
3 Thêm sản phẩm vào giỏ hàng Giỏ hàng được cập nhật sản phẩm mới, tổng tiền được cập nhật Pass
4 Thay đổi số lượng sản phẩm trong giỏ hàng
Số lượng sản phẩm trong giỏ hàng thay đổi tương ứng Pass
5 Đặt hàng Đặt hàng thành công Pass
6 Cửa hàng cập nhật trạng thái của đơn hàng
Trạng thái của đơn hàng được thay đổi Pass
7 Khách hàng hủy đơn đặt hàng khi chưa vận chuyển Hủy đơn hàng thành công Pass
8 Khách hàng đánh giá sản phẩm cho đơn hàng đã được giao Đánh giá thành công, thông tin đánh giá xuất hiện ở trang chi tiết sản phẩm
Khách hàng yêu cầu hoàn đơn sau khi đơn hàng đã giao và đã được thanh toán
Trạng thái đơn hàng thay đổi Cập nhật tiền trong ví người mua và cửa hàng
6.2.3 Các chức năng quản lý đơn hàng, giỏ hàng, sản phẩm yêu thích
Bảng 6 3 Bảng thống kê kiểm thử các chức năng quản lý danh mục, sản phẩm
STT Testcase Kết quả mong đợi Kết quả
1 Thêm danh mục hệ thống
Thêm danh mục hệ thống thành công, danh mục hệ thống xuất hiện trên hệ thống khách hàng
2 Sửa danh mục hệ thống
Sửa thành công, thông tin mới được cập nhật theo trên hệ thống khách hàng
3 Xóa danh mục hệ thống
Xóa thành công, danh mục hệ thống bị xóa không xuất hiện trên hệ thống khách hàng nữa
4 Thêm danh mục của cửa hàng
Thêm danh mục của cửa hàng thành công, danh mục của cửa hàng xuất hiện trên hệ thống khách hàng
5 Sửa danh mục của cửa hàng
Sửa thành công, thông tin mới được cập nhật theo trên hệ thống khách hàng
CHƯƠNG 6 CÀI ĐẶT, TRIỂN KHAI VÀ KIỂM THỬ HỆ THỐNG
6 Xóa danh mục của cửa hàng
Xóa thành công, danh mục của cửa hàng bị xóa không xuất hiện trên hệ thống khách hàng nữa
Thêm sản phẩm thành công, phòng xuất hiện trên hệ thống khách hàng
Sửa thành công, thông tin mới được cập nhật theo trên hệ thống khách hàng
Xóa thành công, sản phẩm bị xóa không xuất hiện trên hệ thống khách hàng nữa
10 Báo cáo sản phẩm vi phạm Khách hàng báo cáo sản phẩm vi phạm thành công Pass
11 Gửi giải trình sản phẩm bị báo cáo vi phạm
Cửa hàng gửi giải trình cho hệ thống thành công khi có yêu cầu Pass
6.2.4 Các chức năng nạp tiền, yêu cầu rút tiền
Bảng 6 4 Bảng thống kê kiểm thử các chức năng nạp tiền, yêu cầu rút tiền
STT Testcase Kết quả mong đợi Kết quả
1 Nạp tiền vào tài khoản thông qua ví VNPAY
Khách hàng, cửa hàng thực hiện thao tác nạp tiền qua VNPAY, tiền được cộng vào ví cá nhân
Khách hàng, cửa hàng tạo yêu cầu rút tiền Sau khi được hệ thống duyệt và chuyển tiền thì yêu cầu rút tiền được thực hiện thành công
3 Kiểm tra lịch sử giao dịch
Hiển thị lịch sử giao dịch của ví cá nhân với các trạng thái: nạp, rút hoặc lợi nhuận từ đơn hàng (đối với cửa hàng)
6.2.5 Các logic xử lý hệ thống
Bảng 6 5 Bảng thống kê kiểm thử các logic xử lý hệ thống
STT Testcase Kết quả mong đợi Kết quả
1 Tài khoản người dùng bị ở trạng thái cấm hoạt động
Không cho phép sử dụng tài nguyên của hệ thống Pass
2 Cập nhật sản phẩm đã có khách hàng đặt hàng
Không thay đổi thông tin sản phẩm trong đơn hàng đã đặt Pass
3 Thêm và xóa hình ảnh sản phẩm
Thêm và xóa thành công, đồng thời xóa ảnh cũ khỏi bên thứ ba (google cloud storage)
4 Email của người dùng chưa được xác nhận
Không cho phép sử dụng tài nguyên hệ thống Pass
Cửa hàng của người bán chưa bổ sung đầy đủ thông tin về thuế, định danh
Không cho phép sử dụng tài nguyên của hệ thống người bán Pass
Kết quả đạt được
Qua quá trình học tập, tìm hiểu và thực hiện dự án học phần Khóa luận tốt nghiệp chuyên ngành công nghệ phần mềm, chúng em đã đạt được những kết quả đáng mong đợi dưới đây:
Nhóm đã tìm hiểu, nghiên cứu và nắm vững những kiến thức chuyên môn và nghiệp vụ như:
- Kiến thức về lập trình web, bảo mật thông tin, bảo mật web, các nguyên tắc lập trình, kỹ thuật lập trình, design pattern
- Kiến thức về lập trình hướng đối tượng, lập trình với ngôn ngữ Java và JavaScript, Python
- Kiến thức về ReactJS, Spring Framework và Spring Boot, Flask framework
- Kiến thức về thiết kế và triển khai RESTful API để giao tiếp giữa frontend và backend, giữa backend và microservice
- Kiến thức về cơ sở dữ liệu MySQL và Spring Data JPA để tương tác với cơ sở dữ liệu
- Kiến thức về triển khai oauth bằng google sign-in api
- Kiến thức về tích hợp thanh toán online vnpay
- Kiến thức về gửi email tự động thông qua google api
- Kiến thức về lưu trữ tệp tin bằng google cloud service
- Kiến thức về xây dựng giao diện người dùng với ReactJS
- Kiến thức về quản lý trạng thái ứng dụng sử dụng thư viện Redux
- Kiến thức về React Router
- Kiến thức về kết nối backend, frontend, microservice, third-party service để tạo thành một hệ thống hoàn chỉnh
- Kiến thức về các nghiệp vụ liên quan đến dự án
- Kiến thức về đóng gói ứng dụng, tích hợp tự động và triển khai ứng dụng lên một máy chủ hoặc môi trường production một cách bảo mật, an toàn
- Kiến thức về lên kế hoạch quản lý khi phát triển một dự án phần mềm
- Kiến thức về kiểm thử dự án phần mềm
Nhóm đã trau dồi được các kỹ năng thông qua quá trình thực hiện dự án như:
- Các kỹ năng làm việc nhóm, thuyết trình, giao tiếp, tư duy phản biện, sáng tạo
- Kỹ năng tự học sử dụng tài liệu tiếng Anh
- Kỹ năng giải quyết vấn đề
- Kỹ năng sử dụng các công cụ xây dựng, phát triển, triển khai, kiểm thử, quản lý mã nguồn của dự án phần mềm như: Trello, Gitlab, IDE Intelij, VS Code, Docker, Cloudflare, Azure virtual machine
1.3 Về hiệu quả của sản phẩm
Sau khi thực hiện đề tài xây dựng website kinh doanh mặt hàng nội thất, hệ thống đã đạt được những chức năng, tiêu chuẩn và yêu cầu đã đề ra, bao gồm:
- Giao diện người hấp dẫn, thuận tiện: o Thiết kế giao diện người dùng hấp dẫn, dễ sử dụng, và tiện ích o Cung cấp nhiều lựa chọn và chức năng nâng cao trải nghiệm mua sắm
- Truy cập trực tuyến, bỏ qua rào cản địa lý: o Khả năng truy cập từ mọi nơi, Usecase này cho phép mua hàng, bán hàng trực tuyến và vượt qua rào cản địa lý o Mở rộng thị trường kinh doanh và tiếp cận nhiều khách hàng, người bán tiềm năng hơn
- Sử dụng trí tuệ nhân tạo: o Áp dụng trí tuệ nhân tạo vào xây dựng hệ thống gợi ý sản phẩm cho người mua với độ chính xác cao o Gợi ý sản phẩm theo nhu cầu mua sắm của người dùng, giúp nâng cao trải nghiệm mua sắm của người dùng
- Quản trị hiệu quả cửa hàng: o Chức năng quản trị đa dạng, giúp quản lý cửa hàng và hoạt động kinh doanh nhanh chóng và hiệu quả o Hệ thống quản lý sản phẩm, đặt hàng linh hoạt
- Thu thập đánh giá và nhận xét: o Hệ thống thu thập đánh giá và nhận xét từ khách hàng về sản phẩm và trải nghiệm mua sắm thông qua nhiều chức năng như: Đánh giá sản phẩm, báo cáo vi phạm, gửi tin nhắn trực tiếp,…
146 o Phản hồi từ khách hàng giúp cửa hàng cải thiện dịch vụ và chất lượng sản phẩm
- Hiệu năng và độ ổn định: o Hiệu suất hoạt động tốt, đảm bảo tính ổn định và tính chính xác của các tính năng và dữ liệu o Lưu trữ thông tin đáng tin cậy, đảm bảo an toàn và bảo mật
- Hệ thống quản lý của người bán, của quản trị viên và khách hàng tách biệt: o Cung cấp hệ thống quản lý chặt chẽ cho người bán, bao gồm quản lý đơn đặt hàng, sản phẩm, khuyến mãi, quảng cáo, trò chuyện, đánh giá, o Cung cấp hệ thống mua hàng của khách hàng cung cấp đầy đủ tiện ích và chức năng phục vụ cho nhu cầu mua sắm của khách hàng o Hệ thống quản lý sàn thương mại điện tử giúp theo dõi thông tin và nhu cầu của khách hàng, người bán
Những cải tiến này đều đáp ứng nhu cầu cụ thể của website sàn thương mại điện tử mặt hàng nội thất, mang lại trải nghiệm mua sắm tốt nhất cho khách hàng, đáp ứng nhu cầu kinh doanh của người bán và nhu cầu quản lý hệ thống sàn thương mại điện tử của quản trị viên được hiệu quả.
Ưu và nhược điểm
- Hoàn thành đầy đủ các chức năng của hệ thống theo bản đặc tả usecase
- Sản phẩm đảm bảo được trải nghiệm của người dùng về cả giao diện lẫn chức năng
- Sản phẩm hoạt động ổn định, đáng tin cậy
- Đáp ứng được nhu cầu cấp thiết của người dùng về việc mua và bán mặt hàng nội thất trực tuyến
- Sản phẩm có khả năng mở rộng trong tương lai
- Tích hợp được các dịch vụ từ bên thứ 3 nhằm cung cấp thêm nhiều tiện ích cho người dùng
- Ứng dụng trí tuệ nhân tạo đã nâng cao tính tự động và chính xác của hệ thống
- Sản phẩm được xây dựng từ các công cụ, framework có cộng đồng phát triển lớn, thuận tiện trong việc bảo trì và mở rộng sản phẩm
- Hệ thống được triển khai dễ dàng, tiết kiệm thời gian
- Có thể truy cập website của hệ thống từ các thiết bị khác nhau
- Chưa cải thiện tốc độ khi lưu lượng truy cập đồng thời cao
- Do sử dụng dịch vụ bên thứ ba ở chính sách dùng thử/miễn phí nên có hạn chế về các chức năng như thanh toán, tính phí vận chuyển.
Hướng phát triển
Sản phẩm hiện tại vẫn còn nhiều khía cạnh có thể tận dụng để làm cho hệ thống trở nên linh hoạt, hiện đại và thân thiện với người dùng Dưới đây là một số hướng phát triển mà nhóm đã hoạch định:
- Tích hợp hệ thống thanh toán an toàn và linh hoạt: o Mở rộng phương thức thanh toán, bao gồm cả thanh toán bằng ví điện tử, thẻ tín dụng và các phương thức thanh toán trực tuyến khác o Tích hợp cổng thanh toán an toàn và đáng tin cậy
- Phát triển ứng dụng di động: o Xây dựng ứng dụng di động để cung cấp trải nghiệm mua sắm di động thuận lợi hơn o Hỗ trợ cả hai hệ điều hành iOS và Android
- Chương trình khách hàng thân thiện: o Tích hợp chương trình khách hàng thân thiện với việc tích điểm, ưu đãi và khuyến mãi đặc biệt o Tổ chức các sự kiện và chương trình khuyến mãi để tăng tương tác và trung thành từ phía khách hàng
- Phát triển hệ thống phản hồi và đánh giá: o Mở rộng hệ thống đánh giá và phản hồi, bao gồm cả hình ảnh và video từ người dùng o Tích hợp chức năng hỏi đáp giúp người mua và người bán tương tác
- Tối ưu hóa hiệu năng và bảo mật: o Tối ưu hóa hiệu năng của trang web để đảm bảo thời gian tải nhanh và trải nghiệm người dùng mượt mà
148 o Tăng cường bảo mật với các biện pháp như HTTPS, mã hóa dữ liệu, và kiểm soát truy cập
- Kích thích xã hội và nguồn lực cộng đồng: o Tạo cộng đồng trực tuyến xung quanh nội dung và chia sẻ về trang trí nội thất o Kích thích việc chia sẻ ảnh và thông tin từ khách hàng về cách họ sử dụng sản phẩm
Những hướng phát triển này sẽ giúp cải thiện và mở rộng ứng dụng , tạo ra một trải nghiệm mua sắm trực tuyến tốt nhất cho khách hàng và đồng thời tối ưu hóa quản lý cửa hàng
DANH MỤC TÀI LIỆU THAM KHẢO
[1] RESTful API là gì? 04/07/2024, https://viblo.asia/p/restful-api-la-gi-1Je5EDJ4lnL
[2] ReactJS là gì? Những điều bạn chưa biết về ReactJS, 11/09/2023, https://aptech.fpt.edu.vn/reactjs-la-gi.html
[3] Tìm hiểu TypeScript và kiến thức cơ bản, 01/07/2024, https://viblo.asia/p/tim-hieu- typescript-va-kien-thuc-co-ban-PmeRQpnyGoB
[4] Spring Framework, 05/07/2023, https://spring.io/projects/spring-framework
[5] Introduction to Java, 06/07/2024, https://www.geeksforgeeks.org/introduction-to-java/
[6] Spring Boot - Introduction, 11/09/2023, https://www.tutorialspoint.com/spring_boot/spring_boot_introduction.htm
[7] Python flask introduction, 07/07/2024, https://pythongeeks.org/python-flask-introduction/
[8] Understanding flask framework, 08/07/2024, https://www.analyticsvidhya.com/blog/2021/10/flask-python/
STT Thời gian Nội dung báo cáo
- Trình bày đề xuất những chức năng cần cải tiến và phát triển những tính năng mới trong hệ thống từ tiểu luận chuyên ngành
- Tham khảo góp ý của GVHD để hoàn tất đề cương chi tiết luận văn
- Trình bày các tính năng đã xây dựng được
- Tham khảo góp ý của GVHD về các tính năng thực hiện tiếp theo
- Đề xuất phát triển mô hình microservice gợi ý sản phẩm
- Báo cáo tổng thể toàn bộ hệ thống đã xây dựng
- Chỉnh sửa báo cáo, slide trình chiếu theo hướng dẫn
- Chỉnh sửa một số tính năng chưa hợp lý theo góp ý của GVHD