Tài khoản 1.1 Đăng nhập - Hệ thống phải cung cấp chức năng đăng nhập an toàn cho phép người dùng đã đăng ký truy cập thông tin cá nhân của họ - Quá trình đăng nhập cần yêu cầu người dùng
CÔNG NGHỆ SỬ DỤNG
React JS
Hình 1: Thư viện React JS
- Khái niệm: React JS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook (nay là Meta) để xây dựng giao diện người dùng (UI) cho các ứng dụng web Được ra mắt lần đầu vào năm 2013, React đã nhanh chóng trở thành một trong những công cụ phổ biến nhất trong lập trình front-end, được sử dụng bởi nhiều công ty lớn và dự án trên toàn thế giới
• React sử dụng mô hình kiến trúc dựa trên các thành phần (component), giúp tạo ra các giao diện người dùng có cấu trúc và dễ quản lý Mỗi component đều có thể chứa logic và state riêng, giúp dễ dàng tái sử dụng và bảo trì
• React sử dụng Virtual DOM để tối ưu hóa hiệu suất Khi một component thay đổi, thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thực sự cần thay đổi, giúp tăng tốc độ và hiệu suất của ứng dụng
• JSX là một cú pháp mở rộng cho JavaScript, giúp viết code cho các component trở nên dễ dàng và trực quan hơn Với JSX, bạn có thể viết HTML trong JavaScript một cách mạch lạc và tự nhiên
Next JS
- Khái niệm: Next.js là một framework dựa trên React, được thiết kế để hỗ trợ phát triển ứng dụng web với các tính năng như Server-Side Rendering (SSR) và Static Site Generation (SSG) Được phát triển bởi Vercel (trước đây là Zeit), Next.js nhằm mục đích cung cấp một giải pháp toàn diện cho việc xây dựng các ứng dụng web hiệu suất cao và tối ưu hóa cho SEO
• Next.js cho phép render các trang web trên server, giúp tăng tốc độ tải trang và cải thiện hiệu suất SEO SSR đặc biệt hữu ích cho các trang web có nội dung động và cần được tối ưu hóa cho các công cụ tìm kiếm
• Framework này cũng hỗ trợ việc tạo ra các trang web tĩnh, có thể được phục vụ từ CDN, giúp giảm đáng kể thời gian tải trang và cung cấp trải nghiệm người dùng nhanh chóng
• Next.js tự động tối ưu hóa các trang web dựa trên yêu cầu của người dùng, bao gồm việc tải hình ảnh lười (lazy loading) và tách mã (code splitting), điều này giúp cải thiện hiệu suất tổng thể
Node JS
Hình 3: Môi trường Node JS
- Khái niệm: Node.js là một môi trường chạy mã nguồn mở dựa trên JavaScript, được xây dựng trên V8, động cơ JavaScript của Google Chrome Nó cho phép phát triển các ứng dụng mạng nhanh chóng và mở rộng quy mô dễ dàng Node.js được phát triển bởi Ryan Dahl vào năm 2009 và đã trở thành một công cụ phổ biến trong việc phát triển phần mềm, đặc biệt là về phía server-side trong các ứng dụng web
• Node.js sử dụng mô hình I/O không chặn (non-blocking I/O), giúp xử lý nhiều kết nối cùng lúc một cách hiệu quả Điều này làm cho Node.js rất phù hợp cho việc xây dựng các ứng dụng mạng có hiệu suất cao, như chơi game trực tuyến, chat, hoặc các ứng dụng cần xử lý một lượng lớn dữ liệu thời gian thực
• Node.js mở rộng khả năng của JavaScript từ client-side đến server-side, giúp các nhà phát triển có thể sử dụng một ngôn ngữ duy nhất cho cả frontend và backend, đơn giản hóa quá trình phát triển
• Với cộng đồng lập trình viên lớn và sôi động, Node.js có một hệ sinh thái thư viện mạnh mẽ, được quản lý thông qua npm (Node Package Manager), giúp dễ dàng tìm và sử dụng hàng ngàn module và công cụ
MySQL
Hình 4: Cơ sở dữ liệu MySQL
- MySQL là gì? MySQL là 1 hệ thống quản trị về cơ sở dữ liệu với mã nguồn mở (được gọi tắt là RDBMS) và đang hoạt động theo mô hình dạng client-server Đối với RDBMS - Relational Database Management System thì MySQL đã được tích hợp apache và PHP Được phát hành chính thức từ thập niên 90s, MySQL hiện đang quản lý dữ liệu qua những cơ sở dữ liệu, với mỗi một cơ sở dữ liệu hoàn toàn có thể có rất nhiều những bản quan hệ có chứa dữ liệu Ngoài ra, MySQL cũng có cùng 1 cách thức truy xuất cũng như mã lệnh tương tự cùng với ngôn ngữ SQL Vậy quá trình hình thành cũng như phát triển MySQL là gì? Hãy cùng giải đáp chi tiết ở phần sau đây
• Nhanh chóng: Nhờ vào việc đưa ra một số những tiêu chuẩn và cho phép MySQL làm việc hiệu quả cũng như tiết kiệm chi phí, giúp gia tăng tốc độ thực thi
• Mạnh mẽ và khả năng mở rộng: MySQL hoàn toàn có thể xử lý số lượng lớn dữ liệu và đặc biệt hơn thế nữa thì nó còn có thể mở rộng nếu như cần thiết
• Đa tính năng: Ưu điểm MySQL là gì? MySQL hiện đang hỗ trợ nhiều những chức năng SQL rất được mong chờ từ 1 hệ quản trị CSDL quan hệ cả gián tiếp cũng như trực tiếp
• Độ bảo mật cao: MySQL là gì? Hiện tại nó đang rất thích hợp cho những ứng dụng truy cập CSDL thông qua internet khi sở hữu rất nhiều những tính năng về bảo mật và thậm chí là đang ở cấp cao.
Tailwind CSS
- Khái niệm: Tailwind CSS là một framework CSS mã nguồn mở được thiết kế để tạo ra các giao diện người dùng nhanh chóng và hiệu quả thông qua việc sử dụng các lớp tiện ích (utility classes) Được phát triển bởi Adam Wathan và ra mắt lần đầu vào năm 2017, Tailwind CSS nhanh chóng trở nên phổ biến trong cộng đồng phát triển web nhờ vào cách tiếp cận "first utility" độc đáo của nó
• Tailwind CSS cung cấp hàng ngàn lớp tiện ích để nhanh chóng áp dụng các kiểu dáng trực tiếp vào HTML, giúp tạo ra các giao diện mà không cần viết nhiều CSS tùy chỉnh
• Dễ dàng tùy chỉnh và mở rộng Tailwind CSS cho phép bạn tùy chỉnh cấu hình để phù hợp với yêu cầu thiết kế của dự án, bao gồm màu sắc, font, kích thước biên (margin) và padding, v.v
• Hỗ trợ thiết kế đáp ứng (responsive design) một cách thuận tiện thông qua các lớp tiện ích dựa trên các breakpoints
Prisma
Hình 6: Thư viện hỗ trợ Prisma
- Khái niệm: Prisma là một thư viện ORM cho Node.js và TypeScript cho phép tạo ra một lớp trừu tượng (abstraction layer) giữa ứng dụng và cơ sở dữ liệu Prisma cung cấp một API đơn giản và mạnh mẽ để thao tác với cơ sở dữ liệu mà không cần viết câu lệnh SQL Prisma hỗ trợ nhiều loại cơ sở dữ liệu khác nhau, như MySQL, PostgreSQL, MongoDB, SQLite và SQL Server Có thể sử dụng Prisma với nhiều ngôn ngữ lập trình khác nhau, như JavaScript, TypeScript, Python, Go và Ruby
• Tăng năng suất: Không phải viết nhiều câu lệnh SQL hay lo lắng về các chi tiết kỹ thuật của cơ sở dữ liệu Chỉ cần tập trung vào logic của ứng dụng và sử dụng API của Prisma để thao tác với dữ liệu một cách dễ dàng và nhanh chóng
• Tăng chất lượng: Không phải đối mặt với các lỗi hay rủi ro do viết sai câu lệnh SQL hay quản lý kém cơ sở dữ liệu Prisma giúp đảm bảo tính nhất quán, an toàn và hiệu năng của ứng dụng bằng cách tự động kiểm tra và tối ưu hóa các truy vấn và các thay đổi của cơ sở dữ liệu
• Tăng khả năng mở rộng: Không phải lo lắng về việc thay đổi loại cơ sở dữ liệu hay ngôn ngữ lập trình khi phát triển ứng dụng Prisma cho phép chuyển đổi một cách linh hoạt và dễ dàng giữa các cơ sở dữ liệu khác nhau và các ngôn ngữ lập trình khác nhau mà không ảnh hưởng đến logic của ứng dụng
HỆ THỐNG MUA SẮM TRỰC TUYẾN
Đặt vấn đề
Trong bối cảnh số hóa ngày càng tăng, việc xây dựng một hệ thống mua sắm trực tuyến hiệu quả, bảo mật và dễ sử dụng là cực kỳ quan trọng Để đạt được điều này, một số thách thức cần được giải quyết:
• Trải Nghiệm Người Dùng: Cần tạo ra một trải nghiệm người dùng mượt mà và tương tác cao
• Hiệu Suất và Tối Ưu Hóa: Website cần được tối ưu hóa cho hiệu suất và tốc độ tải trang
• Bảo Mật và Quản Lý Dữ Liệu: Đảm bảo an toàn thông tin cá nhân và giao dịch
• Quản Lý Hậu Cần và Hàng Tồn Kho: Cần có hệ thống quản lý hiệu quả và chính xác
• SEO và Tiếp Thị: Tối ưu hóa cho công cụ tìm kiếm và chiến lược marketing đa kênh.
Hướng giải quyết
1 Front-End: React.js và Tailwind CSS
• React.js: Sử dụng cho việc xây dựng giao diện người dùng React.js với mô hình component-based giúp tạo ra giao diện động, nhanh chóng và tối ưu hóa hiệu suất
• Tailwind CSS: Framework CSS hiện đại giúp nhanh chóng thiết kế giao diện người dùng mà không cần viết nhiều CSS tùy chỉnh
2 Server-Side Rendering: Next.js
• Next.js: Framework của React hỗ trợ server-side rendering (SSR), giúp cải thiện tốc độ tải trang và SEO Next.js cũng cung cấp các tính năng như routing và tối ưu hóa ảnh, hữu ích cho việc xây dựng website thương mại điện tử
3 Back-End: Node.js và MySQL, Prisma
• Node.js: Môi trường JavaScript server-side cho phép xây dựng các ứng dụng mạng nhanh chóng và hiệu quả Nó phù hợp cho xử lý các tác vụ không đồng bộ, quản lý yêu cầu đa người dùng
• MySQL-Prisma: Prisma hỗ trợ nhiều loại cơ sở dữ liệu khác nhau, như
MySQL, PostgreSQL, MongoDB, SQLite và SQL Server Có thể sử dụng Prisma với nhiều ngôn ngữ lập trình khác nhau, như JavaScript, TypeScript, Python, Go và Ruby.4 Tích Hợp và Quản Lý
• Phát triển API RESTful bằng Node.js để kết nối front-end và back-end
• Sử dụng Clerk Doc để bảo mật thông tin người dùng
5 Quản Lý Trạng Thái và Routing
• Sử dụng Redux của Redux ToolKits để quản lý trạng thái toàn cục
• Next.js hỗ trợ routing động giúp quản lý các trang và đường dẫn một cách hiệu quả
6 Tối Ưu Hóa Hiệu Suất và SEO
• Tận dụng SSR của Next.js để cải thiện hiệu suất tải trang và SEO
• Sử dụng các công cụ và kỹ thuật tối ưu hóa như Lazy Loading, code splitting, và caching
7 Bảo Mật và Quản Lý Dữ Liệu
• Áp dụng các biện pháp bảo mật như mã hóa dữ liệu, bảo vệ Bcrypt
• Tích hợp các giải pháp backup và phục hồi dữ liệu cho MongoDB.
Xác định yêu cầu
ID Tác nhân Mô tả
A-01 Khách hàng tiềm năng Người dùng chưa đăng nhập website HV Shop
A-02 Khách hàng Người dùng đã đăng nhập website HV Shop là khách hàng của cửa hàng
A-03 Người quản lý Người dùng đã đăng nhập website HV Shop là người quản lý của cửa hàng
Bảng 1: Tác nhân hệ thống
ID Tên của yêu cầu Sự ưu tiên Biểu đồ Test case
1.5 Nhắn tin với người quản lý và khách hàng
1.7 Thêm địa chỉ giao hàng
2.1 Xem sản phẩm Quan trọng
2.3 Đánh giá sản phẩm Cao
2.4 Thêm sản phẩm Quan trọng
2.5 Sửa sản phẩm Quan trọng
2.6 Xóa sản phẩm Quan trọng
3.3 Cập nhập trạng thái đơn hàng
4.1 Thay đổi số lượng sản phẩm
5.1 Thêm mã giảm giá Trung bình
5.2 Sửa mã giảm giá Trung bình
5.3 Xóa mã giảm giá Trung bình
6.1 Thêm danh mục Quan trọng
6.2 Sửa danh mục Quan trọng
6.3 Xóa danh mục Quan trọng
Bảng 2: Yêu cầu chức năng
4.3.3 Mô tả yêu cầu chức năng
- Hệ thống phải cung cấp chức năng đăng nhập an toàn cho phép người dùng đã đăng ký truy cập thông tin cá nhân của họ
- Quá trình đăng nhập cần yêu cầu người dùng nhập email và mật khẩu
- Sau khi xác thực thành công, hệ thống sẽ xác minh thông tin xác thực của người dùng và cấp truy cập vào thông tin cá nhân của họ
- Nếu nhập sai thông tin đăng nhập hoặc tài khoản chưa được xác nhận, hệ thống sẽ hiển thị thông báo lỗi và nhắc người dùng thử lại thông tin đăng nhập của họ
- Trang đăng nhập phải có hướng dẫn rõ ràng về cách nhập thông tin đăng nhập và thân thiện với người dùng để điều hướng dễ dàng
- Hệ thống phải cung cấp chức năng đăng ký an toàn cho phép người dùng chưa đăng ký tạo tài khoản mới
- Quá trình đăng ký cần yêu cầu người dùng nhập các thông tin sau: Tên người dùng, mật khẩu, địa chỉ email
- Mật khẩu phải đáp ứng chính sách tiêu chuẩn, yêu cầu ít nhất 8 ký tự, bao gồm một chữ in hoa và một ký tự đặc biệt
- Địa chỉ email phải là duy nhất
- Sau khi xác nhận thành công, hệ thống sẽ tạo tài khoản mới cho người dùng và gửi email xác nhận đến địa chỉ email của người dùng
- Nếu nhập sai thông tin đăng ký, hệ thống sẽ hiển thị thông báo lỗi và nhắc người dùng nhập lại thông tin đăng ký của họ
- Trang đăng ký phải có hướng dẫn rõ ràng về cách nhập thông tin đăng ký và thân thiện với người dùng để điều hướng dễ dàng
- Hệ thống phải cung cấp chức năng đổi mật khẩu an toàn cho phép người dùng đã đăng ký thay đổi mật khẩu của họ
- Quá trình đổi mật khẩu cần yêu cầu người dùng nhập các thông tin sau: mật khẩu hiện tại, mật khẩu mới, xác nhận mật khẩu mới
- Mật khẩu mới phải đáp ứng chính sách tiêu chuẩn, yêu cầu ít nhất 8 ký - tự, bao gồm một chữ in hoa và một ký tự đặc biệt
- Sau khi xác nhận thành công, hệ thống sẽ cập nhật mật khẩu mới cho người dùng
- Nếu nhập sai thông tin đổi mật khẩu, hệ thống sẽ hiển thị thông báo lỗi và nhắc người dùng nhập lại thông tin đổi mật khẩu của họ
- Trang đổi mật khẩu phải có hướng dẫn rõ ràng về cách đổi mật khẩu và thân thiện với người dùng để điều hướng dễ dàng
- Chức năng Quên Mật Khẩu: Hệ thống cần cung cấp chức năng quên mật khẩu để hỗ trợ người dùng khi họ không thể nhớ mật khẩu của mình
- Yêu Cầu Nhập Thông Tin: Khi người dùng chọn "Quên Mật Khẩu", họ sẽ được yêu cầu nhập địa chỉ email hoặc tên người dùng đã đăng ký trên hệ thống
- Xác Minh Danh Tính Người Dùng: Hệ thống sẽ kiểm tra thông tin nhập vào và gửi một email xác nhận đến địa chỉ email đã đăng ký Email này sẽ chứa một liên kết để đặt lại mật khẩu
- Đặt Lại Mật Khẩu: Liên kết đặt lại mật khẩu sẽ dẫn người dùng đến một trang web nơi họ có thể tạo mật khẩu mới Mật khẩu mới này cũng cần phải tuân theo các chính sách mật khẩu (ít nhất 8 ký tự, bao gồm một chữ in hoa và một ký tự đặc biệt)
- Xác Nhận và Đăng Nhập: Sau khi đặt lại mật khẩu thành công, hệ thống sẽ thông báo cho người dùng và hướng dẫn họ quay trở lại trang đăng nhập để truy cập vào tài khoản của họ với mật khẩu mới
- Bảo Mật và Quyền Riêng Tư: Quá trình đặt lại mật khẩu phải đảm bảo an toàn, không tiết lộ thông tin cá nhân hoặc tài khoản của người dùng cho bên thứ ba
1.5 Nhắn tin với người quản lý và khách hàng
- Chức năng Nhắn Tin: Hệ thống cần cung cấp một tính năng cho phép người quản lý trang web và khách hàng có thể trao đổi thông tin qua tin nhắn
- Truy Cập Tính Năng Nhắn Tin: Người dùng đã đăng ký và đăng nhập thành công vào hệ thống sẽ có quyền truy cập vào tính năng nhắn tin
- Giao Diện Người Dùng: Giao diện nhắn tin phải thân thiện, dễ sử dụng, với khả năng hiển thị lịch sử tin nhắn và thông báo tin nhắn mới
- Bảo Mật Thông Tin: Tin nhắn giữa người quản lý và khách hàng phải được mã hóa và bảo vệ để đảm bảo quyền riêng tư và bảo mật thông tin
- Thông Báo Lỗi và Hỗ Trợ: Nếu có sự cố trong quá trình gửi hoặc nhận tin nhắn, hệ thống phải hiển thị thông báo lỗi rõ ràng và cung cấp hỗ trợ khi cần thiết
- Quyền Truy Cập: Chỉ những người dùng đã xác thực và người quản lý có quyền truy cập vào tính năng nhắn tin Khách hàng không thể nhắn tin với người dùng khác ngoài người quản lý
- Hướng Dẫn Sử Dụng: Trang nhắn tin cần có hướng dẫn sử dụng rõ ràng, giúp người dùng biết cách gửi, nhận và quản lý tin nhắn của mình
- Phản Hồi Nhanh Chóng: Hệ thống nên được thiết kế để khuyến khích và hỗ trợ phản hồi nhanh chóng từ phía người quản lý, nhằm tăng cường sự hài lòng của khách hàng
- Chức năng Đăng Xuất: Hệ thống cần cung cấp chức năng đăng xuất để người dùng có thể an toàn thoát khỏi tài khoản của họ
- Truy Cập Chức năng Đăng Xuất: Người dùng đã đăng nhập thành công vào hệ thống nên dễ dàng tìm thấy tùy chọn để đăng xuất, thường được đặt ở phần đầu trang hoặc trong menu cài đặt tài khoản
- Xác Nhận Đăng Xuất: Khi chọn đăng xuất, hệ thống có thể hiển thị một hộp thoại xác nhận để đảm bảo rằng người dùng muốn thoát khỏi tài khoản của mình
- Hoàn Thành Quá Trình Đăng Xuất: Sau khi người dùng xác nhận, hệ thống sẽ đăng xuất người dùng khỏi tài khoản của họ, đảm bảo rằng không còn dữ liệu cá nhân hoặc phiên làm việc nào được lưu trữ trong trình duyệt
- Thông Báo Đăng Xuất Thành Công: Hệ thống sẽ hiển thị thông báo hoặc trang xác nhận rằng người dùng đã đăng xuất thành công
- Bảo Mật và Quyền Riêng Tư: Quá trình đăng xuất phải đảm bảo rằng mọi thông tin cá nhân và lịch sử duyệt web của người dùng không còn được truy cập trên thiết bị đó sau khi họ đăng xuất
1.7 Thêm địa chỉ giao hàng
Sơ đồ use case
4.4.1 Mô hình Use case toàn hệ thống
Hình 7: Sơ đồ usecase toàn hệ thống
Người dùng Những người có nhu cầu sử dụng ứng dụng (đã đăng ký hoặc chưa đăng ký tài khoản) có quyền truy cập vào tài nguyên dùng chung và những tài khoản đã đăng ký có thể sử dụng tài nguyên tốt hơn
Người quản lý Là người nắm quyền toàn bộ hoạt động trên ứng dụng và quản lý các tài nguyên
Bảng 7: Mô tả các Actors
Vai trò ID Tên Use case Mô tả Use case
UC01 Nhắn tin với người quản lý
Cho phép người dùng nhắn tin với người quản lý
UC02 Khám phá sản phẩm
Cho phép người dùng tìm kiếm sản phẩm, lọc sản phẩm theo các thông tin (danh mục, giá, chất liệu, màu sắc, …), xem chi tiết thông tin sản phẩm và đặt hàng sản phẩm đang xem
UC03 Sử dụng mã giảm giá
Cho phép người dùng sử dụng mã giảm giá để giảm giá cho đơn hàng đang đặt
UC04 Danh sách yêu thích
Người dùng có thể thêm những sản phẩm đã xem vào danh sách yêu thích để tiện theo dõi hơn
UC05 Quản lý giỏ hàng
Cho phép người dùng tăng hoặc giảm số lượng hoặc xóa sản phẩm trong giỏ hàng và thanh toán những sản phẩm đã chọn trong giỏ hàng
UC05 Quản lý đơn hàng
Cho phép người dùng xem chi tiết những đơn hàng đã đặt và hủy đơn những đơn hàng chưa được vận
Cho phép người dùng đăng ký tài khoản bằng email và hệ thống sẽ gửi email xác nhận để người dùng xác nhận tài khoản
Cho phép người dùng sử dụng tài khoản đã đăng ký hoặc những tài khoản có sẵn khác như google, github, twitter, … để đăng nhập tài khoản
UC08 Quản lý tài khoản
Cho phép người dùng đăng xuất tài khoản đã đăng nhập trên website, đổi mật khẩu tài khoản và sử dụng email xác nhận quên mật khẩu để lấy lại mật khẩu của tài khoản
UC09 Phương thức thanh toán
Cho phép người dùng chọn phương thức thanh toán mặc định
UC10 Quản lý địa chỉ
Cho phép người dùng thêm địa chỉ giao hàng, xóa những địa chỉ giao hàng đã thêm và chọn địa chỉ giao hàng mặc định
UC11 Đánh giá sản phẩm
Cho phép người dùng đánh giá sản phẩm đã mua kèm theo hình ảnh
UC12 Quản lý đơn hàng
Cho phép người dùng xem chi tiết những đơn hàng đã đặt và hủy đơn những đơn hàng chưa được vận chuyển
UC21 Kiểm tra tình trạng đơn hàng
Cho phép người dùng theo dõi tình trạng đơn hàng qua email
UC13 Quản lý mã giảm giá
Cho phép người quản lý thêm, sửa, xóa mã giảm giá
UC14 Thống kê doanh thu
Cho phép người quản lý xem các thông tin như: doanh thu, các số lượng sản phẩm, đơn hàng, khách hàng so với tháng trước, các sản phẩm, danh mục bán chạy nhất trong tháng, …
UC15 Quản lý danh mục
Cho phép người quản lý thêm, cập nhập và xóa các danh mục
UC16 Quản lý danh mục phụ
Cho phép người quản lý thêm, cập nhập và xóa các danh mục phụ
UC17 Quản lý sản phẩm
Cho phép người quản lý thêm, cập nhập, xóa và thêm sản phẩm con vô một sản phẩm hiện có sẵn
UC18 Quản lý tài khoản
Cho phép admin xem danh sách tài khoản của khách hàng và thông tin chi tiết của người dùng, đơn hàng, địa chỉ của họ
UC19 Quản lý đơn hàng
Cho phép admin xem danh sách các đơn hàng mà khách hàng đã đặt và quản lý trạng thái của các đơn hàng
UC20 Nhắn tin với khách hàng
Cho phép admin xem thống kê doanh thu bán hàng
Name Khám phá sản phẩm
Short Description Cho phép người dùng tìm kiếm sản phẩm, lọc sản phẩm, xem chi tiết thông tin sản phẩm và thêm sản phẩm mà người dùng đang xem vào giỏ hàng
1 Nhấp chọn thanh tìm kiếm ở màn hình trang chủ
2 Nhập từ khóa để tìm kiếm
3 Hệ thống sẽ lọc danh sách sản phẩm theo từ khóa
4 Tại màn hính danh sách sản phẩm, người dùng chọn những button “danh mục” ở phía thanh navigation bar để lọc ra những sản phẩm theo danh mục
5 Người dùng có thể chọn những checkbox bên thanh sidebar bên trái màn hình để lọc sản phẩm theo các thuộc tính như: danh mục, màu sắc, thương hiệu, chất liệu,…
6 Người dùng có thể chọn selectedbox bên trong thanh navigation bar về phía bên trái để sắp xếp sản phẩm theo giá, độ yêu thích, ngày thêm mới, cũ
7 Hệ thống sẽ lọc sản phẩm theo những lựa chọn của người dùng
Xem chi tiết sản phẩm
8 Chọn sản phẩm muốn xem chi tiết
9 Hệ thống lấy dữ liệu từ database và hiển thị giao
41 diện chi tiết sản phẩm
10 Tại màn hình chi tiết sản phẩm, người dùng chọn button “Thêm vào giỏ hàng”
11 Hệ thống thông báo thêm thành công
Alternative Flow 11a Hệ thống hiển thị công hoặc thất bại nếu số lượng sản phẩm người dung mua vượt quá số lượng hiện có của cửa hàng Use-case tiếp tục ở bước 10
Pre-Condition Đã đăng nhập tài khoản
Bảng 9: Use case Khám phá sản phẩm - UC02
Name Sử dụng mã giảm giá
Cho phép người dùng sử dụng mã giảm giá để giảm giá theo phần trăm để giảm giá tổng số tiền phải trả cho đơn hàng
1 Tại màn hình đặt hàng người dùng click vào input field “mã giảm giá”
2 Nhập mã giảm giá vào input field trên và bấm button “xác nhận” để sử dụng mã giảm giá
3 Hệ thống sẽ trừ số phần trăm của mã giá vào tổng số tiền của đơn hàng
Alternative Flow 3a Hệ thống hiển thị thông báo lỗi do không tìm thấy mã giảm giá trong database Use-case tiếp tục ở bước 2 Special Requirement Không.
- Đã đăng nhập tài khoản
- Bắt buộc phải có sản phẩm trong giỏ hàng
Bảng 10: Use case Sử dụng mã giảm giá - UC03
Name Quản lý giỏ hàng
Cho phép người dùng thay đổi số lượng sản phẩm mà mình đã đặt và thanh toán các sản phẩm đã thêm trước đó trong giỏ hàng
1 Tại thanh navigation ở phía trên đầu trang click vào icon “Giỏ Hàng”
2 Hệ thống chuyển hướng đến trang “Giỏ hàng”
3 Người dùng click button “+” ở mỗi sản phẩm để tăng số lượng và button “-” để giảm số lượng
4 Hệ thống cập nhật số lượng ở database và hiển thị lên màn hình
5 Người dùng chọn những sản phẩm mình muốn thanh toán
6 Người dùng chọn địa chỉ giao hàng
7 Người dùng chọn phương thức thanh toán
8 Người dùng click vào button “Thanh Toán” để thanh toán những sản phẩm người dùng đã chọn trong giỏ hàng
- Đã đăng nhập tài khoản
- Bắt buộc phải có sản phẩm trong giỏ hàng
- Bắt buộc phải có địa chỉ giao hàng
- Bắt buộc phải có phương thức thanh toán
Bảng 11: Use case Quản lý giỏ hàng - UC05
Short Description Cho phép người dùng đăng ký tài khoản bằng email và gửi mail xác nhận tài khoản
2 Tại màn hình đăng ký, nhập các thông tin như email, họ và tên, mật khẩu
3 Chọn button “Đăng Ký” để nhận email xác nhận tài khoản
4 Hệ thống sẽ gửi email xác nhận qua email người dùng đã nhập
5 Người dùng vô mail và xem mail xác nhận vào click vào button “Xác Nhận Tài Khoản” trong email
6 Hệ thống sẽ chuyển hướng đến trang xác nhận tài khoản và kiểm tra mã xác nhận có hợp lệ hay không
7 Hệ thống sẽ lưu trạng thái đã đăng ký phiên làm việc của người dùng
8 Hệ thống chuyển hướng về trang chủ
6a Hệ thống hiển thị thông báo tài khoản chưa được xác nhận do người dùng chưa vô email xác nhận hoặc nhập email sai Use-case tiếp tục ở bước 5
Bảng 12: Use case Đăng ký - UC06
Short Description Người dùng đăng nhập bằng tài khoản đã đăng ký và các tài khoản có sẵn khác như google, github, twitter,…
Basic Flow 1 Chọn “Đăng nhập”
2 Tại màn hình đăng nhập, nhập email và mật khẩu hoặc chọn vào icon của các tài khoản có sẵn khác
3 Click vào nút “Đăng nhập” để đăng nhập vào tài khoản
4 Hệ thống kiểm tra email và mật khẩu
5 Hệ thống lưu lại trạng thái đã đăng nhập phiên làm việc của người dùng
6 Hệ thống chuyển hướng về trang chủ
4a Hệ thống sẽ hiển thị thông báo email hoặc password không hợp lệ Use-case tiếp tục ở bước 3
Pre-Condition Đã có tài khoản
Bảng 13: Use case Đăng nhập - UC07
Name Quản lý tài khoản
Short Description Cho phép người dùng quản lý tài khoản của mình như đăng xuất, đổi mật khẩu, quên mật khẩu
Basic Flow Đăng xuất tài khoản
1 Tại thanh navigation ở góc trên màn hình, di chuyển vào tên tài khoản của người dùng và bấm button “Đăng Xuất”
2 Hệ thống sẽ xóa token được lưu trong local storage của trình duyệt người dùng
Thay đổi mật khẩu tài khoản
1 Tại thanh navigation ở góc trên màn hình, di chuyển vào tên tài khoản của người dùng và bấm button “Tài khoản”
2 Hệ thống sẽ điều hướng đến màn hình quản lý tài khoản, người dùng chọn button “Thay đổi mật khẩu” bên thanh sidebar bên trái màn hình
3 Hệ thống sẽ điều hướng đến màn hình đổi mật khẩu tài khoản của người dùng
4 Người dùng điền mật khẩu hiện tại, mật khẩu mới và xác nhận lại mật khẩu mới, người dùng bấm nút xác nhận để đổi mật khẩu của tài khoản
5 Hệ thống sẽ truy xuất lên database và sửa lại thông tin về mật khẩu
6 Trong màn hình đăng nhập bấm vào button “Quên mật khẩu”
7 Hệ thống sẽ chuyển hướng đến màn hình quên mật khẩu, người dùng sẽ tiến hành điền email đã đăng ký tài khoản
8 Hệ thống sẽ hiện thị thông báo đã gửi email đổi lại mật khẩu vào email người dùng đã đăng ký
9 Người dùng vào địa chỉ mail đã đăng ký để lấy liên kết đến trang đổi mật khẩu
10 Hệ thống sẽ chuyển đến trang quên mật khẩu, người dùng điền mật khẩu mới và xác nhận mật khẩu
11 Hệ thống sẽ truy xuất lên database để tiến hành đổi mật khẩu
Alternative Flow 4a Hệ thống hiển thị thông báo mật khẩu hiện tại sai
Use-case tiếp tục ở bước 3
- Đã đăng nhập tài khoản người dùng (đăng xuất, đổi mật khẩu)
- Đã đăng ký tài khoản người dùng (quên mật khẩu) Post-Condition Không.
Bảng 14: Use case Quản lý tài khoản - UC08
Name Phương thúc thanh toán
Short Description Cho phép người dùng đặt phương thức thanh toán mặc định cho các lần thanh toán hóa đơn tiếp theop.
1 Tại thanh navigation ở góc trên màn hình, di chuyển vào tên tài khoản của người dùng và bấm button “Tài khoản”
2 Hệ thống sẽ điều hướng đến màn hình quản lý tài khoản, người dùng chọn button “Phương Thức Thanh Toán” bên thanh sidebar bên trái màn hình
3 Hệ thống sẽ chuyển đến màn hình danh sách phương thức thanh toán, người dùng sẽ click check vào một trong những phương thức trên màn hình để đặt phương thức thanh toán mặc định
4 Hệ thống sẽ truy xuất lên database và lưu phương thức thanh toán người dùng chọn vào tài khoản của người dùng
Pre-Condition Người dùng đã đăng nhập
Bảng 15: Use case Phương thức thanh toán - UC09
Name Quản lý địa chỉ
Short Description Cho phép người dùng thêm địa chỉ, xóa địa chỉ, chọn địa chỉ chính để giao hàng
1 Tại thanh navigation ở góc trên màn hình, di chuyển vào tên tài khoản của người dùng và bấm button “Tài khoản”
2 Hệ thống sẽ điều hướng đến màn hình quản lý tài khoản, người dùng chọn button “Địa Chỉ Giao Hàng” bên thanh sidebar bên trái màn hình
3 Hệ thống sẽ chuyển đến màn hình địa chỉ giao hàng
4 Người dùng bấm vào button “Thêm địa chỉ” ở trên màn hình, hệ thống sẽ hiển thị danh sách các input để người dùng điền các thông tin vào như: địa chỉ, thành phố, tỉnh, mã bưu chính, quốc gia,…
5 Sau khi điền xong người dùng bấm button “Xác Nhận” để thêm địa chỉ mới vào tài khoản
6 Tại màn hình phần danh sách các địa chỉ bấm vào icon “thùng rác” để xóa địa chỉ tương ứng
7 Hệ thống sẽ truy xuất lên database và xóa địa chỉ trong tài khoản người dùng
8 Tại màn hình phần danh sách các địa chỉ giao hàng, người dùng bấm vào địa chỉ bất kì trong danh sách để đặt làm địa chỉ giao hàng chính
9 Hệ thống sẽ truy xuất lên database và cập nhập địa chỉ giao hàng chính trong tài khoản người dùng
Pre-Condition Người dùng đã đăng nhập tài khoản
Bảng 16: Use case Quản lý địa chỉ - UC10
Name Quản lý đơn hàng
Short Description Cho phép người dùng kiểm tra, theo dõi những đơn hàng mình đã và đang đặt, xem chi tiết và hủy đơn hàng
1 Tại thanh navigation ở góc trên màn hình, di chuyển vào tên tài khoản của người dùng và bấm button “Tài khoản”
2 Hệ thống sẽ điều hướng đến màn hình quản lý tài khoản, người dùng chọn button “Đơn Hàng Của Tôi” bên thanh sidebar bên trái màn hình
3 Hệ thống sẽ điều hướng đến màn hình danh sách đơn hàng, người dùng có thể chọn các tab phía trên danh sách đơn hàng trong màn hình để lọc đơn hàng theo các thông tin như: tất cả, đã thanh toán, chưa thanh toán, đang được xử lý, đang giao hàng, đã hoàn thành, …
4 Người dùng bấm vào icon “mở rộng” để xem chi tiết đơn hàng
5 Hệ thống sẽ điều hướng đến trang chi tiết đơn hàng
6 Tại màn hình chi tiết đơn hàng bấm vào button
“Hủy Đơn Hàng” để hủy sản phẩm
7 Hệ thống sẽ hiển thị thông báo hủy đơn đặt hàng thành công
8 Hệ thống sẽ truy xuất lên database và cập nhập lại trạng thái đơn hàng
- Người dùng đã đăng nhập tài khoản
- Người dùng đã đặt ít nhất 1 đơn hàng Post-Condition Không
Bảng 17: Use case Quản lý đơn hàng - UC12
Name Quản lý mã giảm giá
Short Description Cho phép người quản lý thêm, sửa, xóa mã giảm giá
1 Tại màn hình quản lý, bấm vào button “Mã Giảm Giá” bên thanh sidebar bên trái
2 Hệ thống sẽ điều hướng đến màn hình quản lý mã giảm giá
3 Người quản lý điền các thông tin như: mã giảm giá, phần trăm giảm giá, ngày bắt đầu, ngày hết hạn vào các input tương ứng hiển thị trên màn hình và bấm button “Thêm Mã Giảm Giá” để thêm mã giảm giá
4 Hệ thống kiểm tra định dạng thông tin và sẽ hiển thị thông báo thêm mã giảm giá thành công
5 Hệ thống lưu thông tin vào database và cập nhật lại danh sách mã giảm giá
6 Trong màn hình quản lý mã giảm giá người quản lý nhấp vào icon “cây bút” tương ứng với mã giảm giá muốn sửa
7 Hệ thống sẽ hiện thị những input chứa thông tin của mã giảm giá người quản lý vừa chọn, người quản lý sửa những thông tin cần sửa trong những input và bấm vào button “Xác Nhận” để cập nhập mã giảm giá
8 Hệ thống kiểm tra định dạng thông tin và sẽ hiển thị thông báo sửa mã giảm giá thành công
9 Hệ thống truy xuất vào database tiến hành sửa mã giảm giá người quản lý chọn theo những thông tin vừa nhập và cập nhập lại danh sách mã giảm giá
10 Trong màn hình quản lý mã giảm giá người quản lý nhấp vào icon “thùng rác” tương ứng với mã giảm giá muốn xóa
11 Hệ thống sẽ hiển thị thông báo xóa mã giảm giá thành công
12 Hệ thống truy xuất vào database tiến hành xóa mã giảm giá người quản lý chọn và cập nhập lại danh sách mã giảm giá
4a Hệ thống thông báo thông tin nhập vào không hợp lệ Use-case tiếp tục ở bước 3
8a Hệ thống thông báo thông tin nhập vào không hợp lệ Use-case tiếp tục ở bước 7
Pre-Condition Người quản lý đã đăng nhập tài khoản quản trị viên Post-Condition Không.
Bảng 18: Use case Quản lý mã giảm giá - UC13
Name Thống kê doanh thu
Short Description Cho phép người quản lý xem doanh thu của cửa hàng
1 Tại màn hình quản lý, bấm vào button “Overview” bên thanh border trên cùng
2 Hệ thống sẽ điều hướng đến màn hình thống kê doanh thu
Pre-Condition Người quản lý đã đăng nhập tài khoản quản trị viên Post-Condition Không.
Bảng 19: Use case Thống kê doanh thu - UC14
Name Quản lý danh mục
Short Description Cho phép người quản lý thêm, sửa, xóa các danh mục của cửa hàng
1 Tại màn hình quản lý, bấm vào button “Categories” bên thanh border trên cùng
2 Hệ thống sẽ điều hướng đến màn hình quản lý danh mục
3 Người quản lý điền tên danh mục vào input tương ứng hiển thị trên màn hình và bấm button “Thêm
Danh Mục” để thêm danh mục
4 Hệ thống kiểm tra định dạng thông tin và sẽ hiển thị thông báo thêm danh mục thành công
5 Hệ thống lưu thông tin vào database và cập nhật lại danh sách danh mục
6 Trong màn hình quản lý danh mục người quản lý nhấp vào icon “cây bút” tương ứng với danh mục muốn sửa
Sơ đồ activity
4.5.1 Sơ đồ activity đăng nhập
Hình 8: Sơ đồ activity đăng nhập – AD-01
4.5.2 Sơ đồ activity khám phá sản phẩm
Hình 9: Sơ đồ activity khám phá sản phẩm – AD-02
Sơ đồ sequence
4.6.1 Sơ đồ sequence đánh giá sản phẩm
Hình 10: Sơ đồ sequence đánh giá sản phẩm – SD-01
4.6.2 Sơ đồ sequence thêm sản phẩm
Hình 11: Sơ đồ sequence thêm sản phẩm – SD-02
4.6.3 Sơ đồ sequence cập nhập sản phẩm
Hình 12: Sơ đồ sequence cập nhập sản phẩm – SD-03
Sơ đồ class
Lược đồ cơ sở dữ liệu
Hình 14: Lược đồ cơ sở dữ liệu
Kiến trúc hệ thống
Hình 15: Kiến trúc hệ thống
Thiết kế giao diện
4.10.1 Màn hình đăng nhập và đăng ký tài khoản
4.10.1.1 Màn hình đăng nhập và đăng ký
Hình 16: Màn hình đăng nhập và đăng ký
4.10.1.2 Màn hình xác nhận tài khoản
Hình 17: Màn hình xác nhận tài khoản
Hình 18: Màn hình trang chủ
4.10.3 Màn hình danh sách sản phẩm
Hình 19: Màn hình danh sách sản phẩm
4.10.4 Màn hình chi tiết sản phẩm
Hình 20: Màn chi tiết sản phẩm
4.10.5 Màn hình cửa sổ nhỏ sản phẩm
Hình 26: Màn cửa sổ nhỏ sản phẩm
Hình 21: Màn hình giỏ hàng
Hình 22: Màn hình thanh toán
4.10.7.2 Màn hình thanh toán bằng Link
Hình 23: Màn hình thanh toán bằng Link
4.10.7.3 Màn hình thanh toán bằng thẻ tín dụng
Hình 24: Màn hình thanh toán bằng thẻ tín dụng
4.10.8 Màn hình quản lý tài khoản
Hình 25: Màn hình quản lý tài khoản
4.10.9 Màn hình bảo mật tài khoản
Hình 26: Màn hình bảo mật tài khoản
Hình 27: Màn hình danh sách đơn hàng
4.10.14 Màn hình bảng điều khiển
Hình 28: Màn hình bảng điều khiển
4.10.15 Màn hình thống kê doanh thu
Hình 29: Màn hình thống kê doanh thu
4.10.16 Màn hình quản lý người dùng
Hình 30: Màn hình quản lý người dùng
4.10.17 Màn hình quản lý sản phẩm
4.10.17.1 Màn hình danh sách sản phẩm
Hình 31: Màn hình quản lý sản phẩm
4.10.17.2 Màn hình thêm sản phẩm
Hình 32: Màn hình thêm sản phẩm
4.10.17.3 Màn hình danh sửa sản phẩm
Hình 33: Màn hình sửa sản phẩm
4.10.18 Màn hình quản lý danh mục
Hình 34: Màn hình quản lý danh mục
4.10.19 Màn hình quản lý kích thước và màu sắc
Hình 35: Màn hình quản lý kích thước và màu sắc
4.10.20 Màn hình quản lý biển quảng cáo
Hình 36: Màn hình quản lý biển quảng cáo
Cài đặt
4.11.1 Công cụ & Cơ sở hạ tầng
Ngôn ngữ lập trình Javascript phiên bản ES6
Kiểm soát phiên bản Github
Bảng 9: Công cụ và cơ sở hạ tầng
Các tài liệu, sơ đồ và hồ sơ liên quan Google Drive
Bảng 10: Quản lý tài liệu
Bảng 11: Quản lý mã nguồn
Kiểm thử
Thử nghiệm gia tăng được áp dụng cho Hùng Vũ Shop cho một số mục đích:
- Mỗi Mô-đun cung cấp một vai trò rõ ràng trong cấu trúc dự án
- Một số chức năng kiểm tra có thể bắt đầu ở bước đầu của quá trình phát triển
- Tập trung vào việc kiểm tra các đơn vị hoặc thành phần riêng lẻ của ứng dụng phần mềm một cách biệt lập, thường ở cấp độ mã
4.12.2 Kết quả kiểm tra đăng nhập
ID Tính năng Phần Điều kiện trước
Login_001 Đăng nhập Không nhập vào bất cứ thứ gì
Truy cập web, mở màn hình đăng nhập
Không nhập bất cứ thứ gì
1 Thông báo: “Vui lòng nhập email và mật khẩu”
1 Thông báo: “Vui lòng nhập email và mật khẩu”
Login_002 Đăng nhập Nhập sai email và mật khẩu
Truy cập web, mở màn hình đăng nhập
1 Thông báo “Email hoặc mật khẩu bị sai vui lòng nhập lại”
1 Thông báo “Email hoặc mật khẩu bị sai vui lòng nhập lại”
Login_003 Đăng nhập Nhập đúng email và mật khẩu
Truy cập web, mở màn hình đăng nhập
Chuyển hướng đến trang chủ
Chuyển hướng đến trang chủ
Bảng 12: Kết quả kiểm tra đăng nhập
4.12.3 Kết quả kiểm tra đăng ký
ID Tính năng Phần Điều kiện trước
Register_001 Đăng ký Không nhập vào bất cứ thứ gì
Truy cập web, mở màn hình đăng ký
Không nhập bất cứ thứ gì
1 Thông báo: “Vui lòng nhập email và mật khẩu”
1 Thông báo: “Vui lòng nhập email và mật khẩu”
Register_002 Đăng ký Nhập sai định dạng email và mật khẩu
Truy cập web, mở màn hình đăng ký
1 Nhập sai định dạng email
2 Nhập sai định dạng mật khẩu
1 Thông báo “Email hoặc mật khẩu bị sai định dạng vui lòng nhập lại”
1 Thông báo “Email hoặc mật khẩu bị sai định dạng vui lòng nhập lại”
Register_003 Đăng ký Nhập đúng email và mật khẩu
Truy cập web, mở màn hình đăng nhập
Chuyển hướng đến trang chủ
Chuyển hướng đến trang chủ
Bảng 13: Bảng kết quả kiểm tra đăng ký
Bảo trì
BREART, trang web bán hàng trực tuyến, được bảo trì định kỳ 6 tháng một lần Trong thời gian này thời gian bảo trì, em cập nhật phiên bản phần mềm và thêm các tính năng mới dựa trên nhu cầu cụ thể nhu cầu của chủ cửa hàng Điều này đảm bảo rằng Hùng Vũ Shop luôn cập nhật và cung cấp cho chủ cửa hàng những thông tin mới nhất công nghệ và chức năng được cải thiện, cho phép họ hợp lý hóa hoạt động và cung cấp dịch vụ tốt hơn trải nghiệm của khách.
