sẽ xác nhận tài khoản thông mã otp được gửi đến email đã đăng ký 3 Đăng nhập Người dùng cung cấp email và password mà mình đã đăng ký để đăng nhập vào hệ thống 4 Xem chi tiết sản phẩ
ĐIỂM CHÍNH CÔNG NGHỆ
NestJS
NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xây dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra một môi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng web và API
Mục tiêu chính của NestJS là cung cấp một cấu trúc ứng dụng rõ ràng và dễ quản lý, giúp tăng tính bảo trì và sự tổ chức trong mã nguồn Để đạt được điều này, NestJS triển
CHƯƠNG 1: ĐIỂM CHÍNH CÔNG NGHỆ
12 khai mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắc của Angular, đặc biệt là sử dụng Dependency Injection (DI) và Modules (Các module).
React Native
React Native là các đoạn code đã được viết sẵn (framework) do công ty công nghệ Facebook phát triển Các lập trình viên React Native là người sử dụng những framework này để phát triển nên các hệ thống, nền tảng ứng dụng trên các hệ điều hành như IOS và Android Ngôn ngữ lập trình được sử dụng nhiều nhất là Javascript
Sự ra đời của React Native đã giải quyết được bài toán về hiệu năng và sự phức tạp khi trước đó người ta phải dùng nhiều loại ngôn ngữ native cho mỗi nền tảng di động Chính vì thế lập trình React Native sẽ giúp tiết kiệm được phần lớn thời gian và công sức khi thiết kế và xây dựng nên một ứng dụng đa nền tảng Javascript phù hợp với rất nhiều nền tảng khác nhau
NextJS
Next.js là một open-source React front-end framework được bổ sung các tính năng như Server Side Rendering (SSR) và Static Site Generation (SSG) Next.js được xây dựng dựa trên thư viện React có nghĩa là Next.js lấy những lợi thế của React và bổ sung các tính năng
Server Side Rendering: SSR cho phép máy chủ access tất cả required data và xử lý javaScript để hiển thị lên trang web Theo cơ chế này thì hầu hết các xử lý logic đều ở phía máy chủ Trong đó, máy chủ thực hiện xử lý và tiến hành các thao tác với cơ sở dữ liệu để thông dịch (render) ra thành HTML, sau đó gửi phản hồi cho khách hàng Trình duyệt của khách hàng cũng sẽ chỉ hiển thị HTML này
Search Engine Optimization (SEO): Sử dụng SSR cũng mang lại cho bạn lợi thế về SEO, giúp trang web của bạn hiển thị cao hơn trên các trang kết quả của công cụ tìm kiếm SSR làm cho các trang web xếp hạng tốt hơn cho SEO vì chúng tải nhanh hơn và nhiều nội dung trang web có thể được quét bởi các trình theo dõi SEO
Next.js cũng cho phép bạn chỉnh sửa thẻ của một trang web, điều mà bạn không thể thực hiện trong React Thẻ góp phần vào xếp hạng SEO của trang web
CHƯƠNG 1: ĐIỂM CHÍNH CÔNG NGHỆ
MongoDB
MongoDB là một database hướng tài liệu (document), một dạng NoSQL database
Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh
KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
Khảo sát hiện trạng
Hình 3.1: Giao diện app Điện máy xanh Điểm mạnh:
Giao diện bắt mắt, gây thiện cảm với người dùng
Phân loại sản phẩm đa dạng, cung cấp nhiều sự lựa chọn cho người mua Điểm yếu:
Chưa có tìm kiếm bằng hình ảnh
CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
Hình 3.2: Giao diện app UNIQLO Điểm mạnh:
Giao diện dễ sử dụng
App hỗ trợ quét mã vạch sản phẩm
Có hỗ trợ nhận hàng tại cửa hàng Điểm yếu:
Giao diện còn chưa bắt mắt
Chưa có tìm kiếm bằng hình ảnh
Xác định yêu cầu
3.2.1 Yêu cầu chức năng a) Người dùng chưa đăng nhập
STT Yêu cầu Mô tả
1 Đăng ký Người dùng đăng ký tài khoản mới trong hệ thống, cung cấp email, password và các thông tin khác
2 Xác nhận tài khoản Sau khi đăng ký thành công, người dùng
19 sẽ xác nhận tài khoản thông mã otp được gửi đến email đã đăng ký
3 Đăng nhập Người dùng cung cấp email và password mà mình đã đăng ký để đăng nhập vào hệ thống
4 Xem chi tiết sản phẩm Người dùng chọn vào một sản phẩm để xem thông tin chi tiết của sản phẩm đó
5 Tìm kiếm/ lọc sản phẩm Người dùng tìm kiếm/ lọc sản phẩm mình mong muốn theo nhiều yếu tố như: tên sản phẩm, giá sản phẩm, …
6 Quản lý giỏ hàng Người dùng có thể thêm, xóa, sửa sản phẩm trong giỏ hàng
7 Quên mật khẩu Người dùng nhập email của bản thân, nhập password mới muốn thay đổi, sau đó người dùng xác nhận otp được gửi đến email
8 Tìm kiếm sản phẩm bằng hình ảnh
Người dùng có thể tìm kiếm sản phẩm thông qua hình ảnh
9 Xem mô hình 3D của sản phẩm thông qua công nghệ AR
Người dùng có thể xem mô hình 3D của sản phẩm thông qua camera
10 Sử dụng chatbot để tư vấn về sản phẩm
Người dùng sử dụng chatbot để nhắn tin hỏi thông tin về một sản phẩm
11 Tự tạo thiết kế sản phẩm thông qua AR
Người dùng có thể tự tạo thiết kế thông qua môi trường AR
Bảng 3.1: Bảng yêu cầu chức năng của người dùng chưa đăng nhập b) Khách hàng đã đăng nhập
STT Yêu cầu Mô tả
CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
1 Tìm kiếm/ lọc sản phẩm Người dùng tìm kiếm/ lọc sản phẩm mình mong muốn theo nhiều yếu tố như: tên sản phẩm, giá sản phẩm, …
2 Xem chi tiết sản phẩm Người dùng chọn vào một sản phẩm để xem thông tin chi tiết của sản phẩm đó
3 Quản lý giỏ hàng Người dùng có thể thêm, xóa, sửa sản phẩm trong giỏ hàng
4 Đặt hàng Sau khi có sản phẩm trong giỏ hàng, người dùng tiến hành đặt hàng
5 Quản lý địa chỉ Người dùng có thể thêm, xóa, sửa địa chỉ
6 Quản lý và theo dõi đơn hàng
Người dùng có thể theo dõi trạng thái đơn hàng, hủy đơn hàng khi đơn đó chưa được giao, cập nhật tình trạng đã giao hàng thành công
Người dùng tiến hành thanh toán giỏ hàng của mình, hệ thống hỗ trợ thanh toán trực tuyến thông qua VNPay
8 Đánh giá sản phẩm Sau khi người dùng đặt hàng thành công, người dùng có thể đánh giá sản phẩm
9 Quản lý tài khoản cá nhân
Người dùng xem và chỉnh sửa thông tin cá nhân tài khoản của mình
10 Đổi mật khẩu Người dùng đổi mật khẩu tài khoản của mình
11 Đăng xuất Xóa token tài khoản của người dùng đang lưu trong bộ nhớ
12 Tìm kiếm sản phẩm bằng Người dùng có thể tìm kiếm sản phẩm
21 hình ảnh thông qua hình ảnh
13 Xem mô hình 3D của sản phẩm thông qua công nghệ AR
Người dùng có thể xem mô hình 3D của sản phẩm thông qua camera
14 Sử dụng chatbot để tư vấn về sản phẩm
Người dùng sử dụng chatbot để nhắn tin hỏi thông tin về một sản phẩm
15 Tự tạo thiết kế sản phẩm thông qua AR
Người dùng có thể tự tạo thiết kế thông qua môi trường AR
16 Mua combo sản phẩm dựa vào những mẫu thiết kế có sẵn
Khi thấy một thiết kế ưng ý, người dùng có thể chọn mua một lần toàn bộ các sản phẩm có trong thiết kế
Bảng 3.2: Bảng yêu cầu chức năng của người dùng đã đăng nhập c) Nhân viên
Nhân viên có các chức năng tương tự như người dùng đã đăng nhập cộng thêm các chức năng sau:
STT Yêu cầu Mô tả
1 Xử lý đơn hàng Nhân viên có thể xem, tiến hành xử lý đơn hàng hoặc hủy đơn hàng
2 Quản lý sản phẩm Nhân viên có thể xem, thêm, xóa, sửa một sản phẩm
3 Quản lý hình ảnh banner Nhân viên có thể xem, thêm, xóa, sửa các hình ảnh banner
4 Quản lý thiết kế sẵn Nhân viên có thể xem, thêm, xóa, sửa các thiết kế có sẵn
5 Duyệt đánh giá sản phẩm Nhân viên có thể xem, duyệt đánh giá phù hợp từ người dùng
Bảng 3.3: Bảng yêu cầu chức năng của nhân viên
CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
Quản trị viên có các chức năng tương tự như nhân viên công thêm các chức năng sau:
STT Yêu cầu Mô tả
1 Xem thống kê Quản trị viên có thể xem các thông kê của cửa hàng bao gồm: thống kê doanh thu, sản phẩm, doanh thu trong tuần, …
2 Quản lý tài khoản Quản trị viên có thể thêm tài khoản, thay đổi quyền hoặc cấm tài khoản
3 Quản lý danh mục sản phẩm
Quản trị viên có thể thêm, chỉnh sửa danh mục sản phẩm
Bảng 3.4: Bảng yêu cầu chức năng của quản trị viên
3.2.2 Yêu cầu phi chức năng
Hệ thống gửi phản hồi nhanh và chính xác với từng request của người dùng
Hệ thống có tính mở rộng cao để có thể dễ dàng thêm các tính năng mới trong tương lai hay bảo trì dự án
Giao diện thân thiện, dễ sử dụng ngay cả đối với những người dùng không thành thạo về công nghệ
Hệ thống có tính bảo mật, xác thực và phân quyền chính xác
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
4.1 Thiết kế Sơ đồ ERD
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Usecase Diagram
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Đặc tả Usecase
Mô tả: Người dùng ẩn danh đăng nhập vào hệ thống
Tiền điều kiện: Người dùng đã có tài khoản trong hệ thống
Hậu điều kiện: Lưu token và thông tin của người dùng vào bộ nhớ đệm
Luồng hoạt động: 1 Người dùng bấm vào nút đăng nhập
2 Hệ thống hiển thị form đăng nhập
3 Người dùng nhập email và password và bấm “Đăng nhập”
4 Nếu đăng nhập thành công hệ thống sẽ trả về token và lưu token, thông tin người dùng vào bộ nhớ đệm
Luồng thay thế: Không có
Luồng ngoại lệ: 3a Người dùng nhập email không đúng định dạng, hiện thông báo nhắc nhở người dùng 3b Nếu người dùng nhập sai email và password, hệ thống sẽ hiện thông báo lỗi “Email hoặc password không đúng”
3c Nếu tài khoản chưa được kích hoạt chuyển đến màn hình kích hoạt tài khoản
Bảng 4.1: Đặc tả usecase đăng nhập
Mô tả: Người dùng ẩn danh đăng ký tài khoản mới trong hệ thống
Tiền điều kiện: Không có
Hậu điều kiện: Gửi otp xác thực tới email người dùng
Luồng hoạt động: 1 Người dùng bấm vào đăng ký
2 Hệ thống hiển thị form đăng ký
3 Người dùng nhập các thông tin như tên, email, password
4 Hệ thống xác nhận thông tin hợp lệ
5 Hệ thống tạo một account trong cơ sở dữ liệu nhưng chưa kích hoạt tài khoản
6 Gmail Service sẽ gửi otp xác thực tài khoản tới email người dùng
Luồng thay thế: Không có
Luồng ngoại lệ: 4a Thông tin người dùng nhập không hợp lệ, hệ thống thông báo lỗi 5a Nếu người dùng nhập email đã được đăng ký trong hệ thống, hệ thống thông báo email đã tồn tại
Bảng 4.2: Đặc tả usecase đăng ký
Usecase: Xác nhận tài khoản
Mô tả: Người dùng xác nhận tài khoản sau khi đã đăng ký
Tiền điều kiện: Người dùng đã đăng ký tài khoản nhưng chưa xác thực và hệ thống đã gửi otp đến tới email người dùng
Hậu điều kiện: Tài khoản người dùng được kích hoạt
Luồng hoạt động: 1 Người dùng truy cập vào email
2 Người lây otp trong email và nhập vào hệ thống
3 Hệ thống sẽ kích hoạt tài khoản của người dùng
Luồng thay thế: Không có
Luồng ngoại lệ: 3a Người dùng nhập otp không hợp lệ, hệ thống thông báo lỗi
Bảng 4.3: Đặc tả usecase xác nhận tài khoản
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Mô tả: Người dùng ẩn danh quên mật khẩu và muốn đổi mật khẩu của mình
Tiền điều kiện: Người dùng đã có tài khoản trong hệ thống
Hậu điều kiện: Người dùng đổi mật khẩu mới thành công
Luồng hoạt động: 1 Người dùng vào trang login và bấm vào quên mật khẩu
2 Người dùng nhập email của mình và chọn gửi
3 Hệ thống xác nhận email hợp lệ, gửi otp xác nhận đến email người dùng
4 Người dùng vào email, lấy otp và xác nhận tài khoản
5 Xác nhận tài khoản thành công, hệ thống yêu cầu nhập mật khẩu mới
6 Người dùng nhập mật khẩu mới và chọn xác nhận
Luồng thay thế: Không có
Luồng ngoại lệ: 2a Người dùng nhập email không đúng định dạng, hệ thống báo lỗi 3a Nếu người dùng nhập email không tồn tại trong hệ thống, hiện thông báo email không tồn tại
4a Người dùng nhập otp không hợp lệ, hệ thống báo lỗi 6a Người dùng nhập mật khẩu không hợp lệ, hệ thống báo lỗi
Bảng 4.4: Đặc tả usecase quên mật khẩu
4.3.5 Tìm kiếm/ lọc sản phẩm
Usecase: Tìm kiếm/ lọc sản phẩm
Mô tả: Người dùng tìm kiếm và lọc sản phẩm theo nhiều yếu tố
Actor chính: Guest, User, Employee, Admin
Tiền điều kiện: Không có
Hậu điều kiện: Trả về danh sách sản phẩm tương ứng
Luồng hoạt động: 1 Người dùng vào cửa hàng nhấn vào thanh tìm kiếm
2 Người dùng nhập từ khóa và chọn icon tìm kiếm
3 Hệ thống trả về các kết quả liên quan
4 Người dùng chọn vào icon lọc, hiển thị màn hình lọc
5 Người dùng chọn các tùy chọn mong muốn, sau đó chọn xác nhận
6 Hệ thống trả về các kết quả liên quan
Luồng thay thế: Không có
Luồng ngoại lệ: 3a Nếu không tìm thấy sản phẩm nào, hệ thống hiển thị thông báo không tìm thấy sản phẩm nào
Bảng 4.5: Đặc tả usecase tìm kiếm/ lọc sản phẩm
4.3.6 Tìm kiếm bằng hình ảnh
Usecase: Tìm kiếm bằng hình ảnh
Mô tả: Khách hàng tìm kiếm một sản phẩm thông qua hình ảnh
Actor chính: Guest, User, Employee, Admin
Tiền điều kiện: Không có
Hậu điều kiện: Hiển thị sản phẩm sau theo kết quả tìm kiếm
Luồng hoạt động: 1 Người dùng chọn icon “camera”
2 Người dùng chọn icon “máy ảnh”
3 Người dùng chụp ảnh và xác nhận
4 Hệ thống trả về kết quả liên quan
Luồng thay thế: 2a Người dùng chọn icon “thư viện”
Luồng ngoại lệ: Không có
Bảng 4.6: Đặc tả usecase tìm kiếm bằng hình ảnh
4.3.7 Thêm sản phẩm vào giỏ hàng
Usecase: Thêm sản phẩm vào giỏ hàng
Mô tả: Người dùng thêm một sản phẩm vào giỏ hàng của tài khoản
Actor chính: Guest, User, Employee, Admin
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Tiền điều kiện: Không có
Hậu điều kiện: Sản phẩm được thêm vào giỏ hàng
Luồng hoạt động: 1 Người dùng vào màn hình chi tiết sản phẩm
2 Người dùng nhập số lượng của sản phẩm
3 Người dùng chọn option cho sản phẩm
4 Người dùng chọn icon thêm vào giỏ hàng
5 Hệ thống thông báo thêm vào giỏ hàng thành công
Luồng thay thế: Không có
Luồng ngoại lệ: 2a Nếu người dùng không nhập số lượng không hợp lê, hệ thống thông báo lỗi 4a Người dùng chưa chọn option cho sản phẩm, hệ thống thông báo nhắc nhở
Bảng 4.7: Đặc tả usecase thêm sản phẩm vào giỏ hàng
4.3.8 Cập nhật số lượng trong giỏ hàng
Usecase: Cập nhật số lượng trong giỏ hàng
Mô tả: Người dùng tặng giảm số lượng sản phẩm trong giỏ hàng
Actor chính: Guest, User, Employee, Admin
Tiền điều kiện: Trong giỏ hàng đã có sản phẩm
Hậu điều kiện: Tăng, giảm thành công số lượng sản phẩm trong giỏ hàng
Luồng hoạt động: 1 Người dùng vào màn hình giỏ hàng
2 Người dùng chọn + để tăng số lượng sản phẩm
3 Người dùng chọn – để giảm số lượng sản phẩm
Luồng thay thế: Không có
Luồng ngoại lệ: 2a Người dùng tăng số lượng sản phẩm vượt quá trong kho, hệ thống thông báo nhắc nhở
Bảng 4.8: Đặc tả usecase cập nhật số lượng trong giỏ hàng
4.3.9 Chỉnh sửa thông tin cá nhân
Usecase: Chỉnh sửa thông tin cá nhân
Mô tả: Người dùng chỉnh sửa thông tin cá nhân
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đăng nhập
Hậu điều kiện: Người dùng thay đổi thông tin cá nhân thành công
Luồng hoạt động: 1 Người dùng vào màn hình thông tin cá nhân
2 Người dùng thay đổi thông tin cá nhân như avatar, tên, giới tính, ngày sinh và chọn lưu
3 Hệ thống thông báo cập nhật thành công
Luồng thay thế: Không có
Luồng ngoại lệ: Không có
Bảng 4.9: Đặc tả usecase chỉnh sửa thông tin cá nhân
Mô tả: Người dùng đổi mật khẩu của tài khoản
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đăng nhập
Hậu điều kiện: Người dùng đổi mật khẩu thành công
Luồng hoạt động: 1 Người dùng vào màn hình đổi mật khẩu
2 Người dùng nhập mật khẩu cũ và chọn tiếp tục
3 Người dùng nhập mật khẩu mới và chọn xác nhận
Luồng thay thế: Không có
Luồng ngoại lệ: 2a Mật khẩu người dùng nhập không đúng, hệ thống thông báo lỗi 3a Người dùng nhập mật khẩu mới không đúng định dạng, hệ thống thông báo lỗi
Bảng 4.10: Đặc tả usecase đổi mật khẩu
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Mô tả: Người dùng tiến hành đặt hàng
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đăng nhập
Hậu điều kiện: Đơn hàng được tạo với trạng thái chờ xác nhận
Luồng hoạt động: 1 Người dùng ở màn hình giỏ hàng, chọn đặt hàng, chuyển qua màn hình đặt hàng
2 GHN tính toán phí vận chuyển, trả về màn hình đặt hàng
3 Người dùng chọn địa chỉ
4 Người dùng chọn phương thức thanh toán “Thanh toán khi nhận hàng”
5 Người dùng chọn thanh toán
6 Hệ thống thông báo đặt hàng thành công, xóa sản phẩm trong giỏ hàng, chuyển đến màn hình cảm ơn
Luồng thay thế: 4a Người dùng chọn phương thức thanh toán “VNPay”
6a Hệ thống chuyển hướng đến màn hình thanh toán VNPay 6b Người dùng nhập thông tin thẻ thanh toán và tiến hành thanh toán
Luồng ngoại lệ: 1a Người dùng chưa chọn sản phẩm, hệ thống thông báo chọn sản phẩm 6a Đặt hàng thất bại, hệ thống chuyển hướng đến màn hình đặt hàng thất bại và thông báo lỗi
6b Thanh toán thất bại, hệ thống chuyển hướng đến màn hình đặt hàng thất bại và thông báo lỗi
Bảng 4.11: Đặc tả usecase đặt hàng
Mô tả: Người dùng tự tạo thiết kế thông qua AR
Actor chính: User, Employee, Admin
Tiền điều kiện: Không có
Hậu điều kiện: Thiết kế được tạo
Luồng hoạt động: 1 Tại màn hình mẫu thiết kế, người dùng chọn icon “hộp 3D”
2 Hệ thống hiển thị môi trường AR
3 Người dùng chọn thanh tìm kiếm và nhập sản phẩm muốn tìm
4 Người dùng chọn sản phẩm
5 Hệ thống hiện thị mô hình 3D của sản phẩm
6 Người dùng thao tác phóng to, thu nhỏ, xoay, kéo, xóa mô hình 3D
Luồng thay thế: Không có
Luồng ngoại lệ: 2a Nếu ứng dụng chưa được cấp quyền truy cập camera, hệ thống hiển thị thông báo yêu cầu cấp quyền
Bảng 4.12: Đặc tả usecase tạo thiết kế 3D
Mô tả: Người dùng hủy đơn hàng
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đặt hàng, trạng thái đơn hàng là “chờ xác nhận” hoặc “chờ giao hàng”
Hậu điều kiện: Hủy thành công đơn hàng
Luồng hoạt động: 1 Người dùng vào màn hình đơn hàng, chọn status chờ xác nhận hoặc chờ giao hàng
2 Người dùng chọn hủy đơn hàng
3 Hệ thống hiển thị thông báo xác nhận
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
4 Người dùng chọn xác nhận, hệ thống hủy đơn hàng bên hệ thống, nếu status là chờ giao hàng thì hủy thêm bên đơn vị Giao hàng nhanh, đơn hàng chuyển thành trạng thái đã hủy
Luồng thay thế: Không có
Luồng ngoại lệ: 4a Người dùng chọn hủy
4b Nếu trạng thái đơn hàng là “Chờ giao hàng”, yêu cầu hủy được gửi đến admin
Bảng 4.13: Đặc tả usecase hủy đơn hàng
4.3.14 Xác nhận nhận được hàng
Usecase: Xác nhận nhận được hàng
Mô tả: Người dùng xác nhận nhận được hàng
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đặt hàng và trạng thái đơn hàng là “đang giao hàng”
Hậu điều kiện: Đơn hàng chuyển sang trạng thái đã giao
Luồng hoạt động: 1 Người dùng vào màn hình đơn hàng, chọn status đang giao hàng
2 Người dùng chọn đã nhận được hàng
3 Đơn hàng chuyển qua trạng thái chờ đánh giá
Luồng thay thế: Không có
Luồng ngoại lệ: Không có
Bảng 4.14: Đặc tả usecase xác nhận nhận được hàng
Usecase: Đánh giá sản phẩm
Mô tả: Người dùng đánh giá sản phẩm
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đặt hàng và trạng thái đơn hàng là “chờ đánh giá”
Hậu điều kiện: Đánh giá sản phẩm được lưu vào hệ thống chờ duyệt
Luồng hoạt động: 1 Người dùng vào màn hình đơn hàng, chọn status đã giao hàng
2 Người dùng chọn đánh giá sản phẩm, chuyển qua màn hình đành giá sản phẩm
3 Người dùng chọn số sao, nhập nội dung đánh giá và chọn gửi đánh giá
4 Hệ thống thông báo đánh giá thành công
Luồng thay thế: Không có
Luồng ngoại lệ: 4a Người dùng không đánh giá sản phẩm, sau 3 ngày đơn hàng tự động xác nhận hoàn thành
Bảng 4.15: Đặc tả usecase đánh giá sản phẩm
Mô tả: Người dùng chat với chatbot
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đăng nhập
Hậu điều kiện: Hiển thị danh sách địa chỉ
Luồng hoạt động: 1 Tại màn hình hồ sơ cá nhân, người dùng chọn icon “hỗ trợ”
2 Hệ thống hiển thị giao diện chat và tin nhắn chào của chatbot
3 Người dùng nhập câu hỏi và chọn icon “gửi”
4 Hệ thống hiển thị câu trả lời
Luồng thay thế: Không có
Luồng ngoại lệ: Không có
Bảng 4.16: Đặc tả usecase chat với chatbot
Mô tả: Người dùng thêm một địa chỉ mới
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Actor chính: User, Employee, Admin
Tiền điều kiện: Người dùng đã đăng nhập
Hậu điều kiện: Thêm địa chỉ thành công
Luồng hoạt động: 1 Người dùng vào màn hình địa chỉ
2 Người dùng chọn thêm địa chỉ
3 Người dùng nhập thông tin như tên, số điện thoại, tỉnh, huyện, … và chọn thêm địa chỉ
4 Hệ thống báo thêm địa chỉ thành công
Luồng thay thế: Không có
Luồng ngoại lệ: 2a Số lượng địa chỉ của người dùng hiện tại là 10 và không hiển thị nút thêm địa chỉ
Bảng 4.17: Đặc tả usecase thêm địa chỉ
Mô tả: Nhân viên hoặc quản trị viên thêm sản phẩm vào hệ thống
Tiền điều kiện: Người dùng đăng nhập với vai trò nhân viên hoặc quản trị viên
Hậu điều kiện: Thêm sản phẩm thành công
Luồng hoạt động: 1 Người dùng vào màn hình sản phẩm, chọn thêm sản phẩm
2 Người dùng nhập thông tin sản phẩm
3 Người dùng tạo option cho sản phẩm
4 Người dùng chon lưu, hệ thống thông báo thêm sản phẩm thành công
Luồng thay thế: Không có
Luồng ngoại lệ: 4a Thông tin người dùng nhập không hợp lệ, hệ thống thông báo lỗi
Bảng 4.18: Đặc tả usecase thêm sản phẩm
Usecase: Thêm mẫu thiết kế
Mô tả: Nhân viên hoặc quản trị viên thêm mẫu thiết kế vào hệ thống
Tiền điều kiện: Người dùng đăng nhập với vai trò nhân viên hoặc quản trị viên
Hậu điều kiện: Thêm mẫu thiết kế thành công
Luồng hoạt động: 1 Người dùng vào màn hình thiết kế, chọn thêm thiết kế
2 Người dùng nhập thông tin thiết kế
3 Người dùng chọn sản phẩm vào chọn “Nhập thông tin sản phẩm”
4 Người dùng nhập thông tin cho sản phẩm bao gồm option, số lượng
5 Người dùng chon lưu, hệ thống thông báo thêm thiết kế thành công
Luồng thay thế: Không có
Luồng ngoại lệ: 4a Thông tin người dùng nhập không hợp lệ, hệ thống thông báo lỗi
Bảng 4.19: Đặc tả usecase thêm mẫu thiết kế
Usecase: Xử lý đơn hàng
Mô tả: Nhân viên hoặc quản trị viên cập nhật trạng thái cho một đơn hàng
Tiền điều kiện: Người dùng đăng nhập với vai trò nhân viên hoặc quản trị viên
Hậu điều kiện: Cập nhật trạng thái đơn hàng thành công
Luồng hoạt động: 1 Người dùng vào màn hình đơn hàng, chọn icon chỉnh sửa
2 Người dùng chọn trạng thái cho đơn hàng và chon xác nhận
3 Hệ thống thông báo cập nhật thành công
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Luồng thay thế: 2a Trạng thái chuyển từ “chờ xác nhận” sang “chờ lấy hàng” thì tiến hành tạo đơn hàng ở bên hệ thống Giao hàng nhanh 2b Trạng thái chuyển từ “chờ lấy hàng” sang “đã hủy” thì tiến hành hủy đơn hàng ở hệ thống Giao hàng nhanh
Luồng ngoại lệ: Không có
Bảng 4.20: Đặc tả usecase xử lý đơn hàng
4.3.21 Duyệt đánh giá sản phẩm
Usecase: Duyệt đánh giá sản phẩm
Mô tả: Nhân viên hoặc quản trị viên duyệt đánh giá sản phẩm từ người dùng
Tiền điều kiện: Người dùng đăng nhập với vai trò nhân viên hoặc quản trị viên
Hậu điều kiện: Đánh giá sản phẩm từ người dùng được duyệt
Luồng hoạt động: 1 Người dùng vào màn hình đánh giá, chọn icon duyệt
2 Hệ thống thông báo duyệt đánh giá thành công
Luồng thay thế: Không có
Luồng ngoại lệ: Không có
Bảng 4.21: Đặc tả usecase duyệt đánh giá sản phẩm
4.3.22 Thay đổi quyền người dùng
Usecase: Thay đổi quyền người dùng
Mô tả: Quản trị viên thay đổi quyền người dùng
Tiền điều kiện: Người dùng đăng nhập với vai trò quản trị viên
Hậu điều kiện: Thay đổi quyền người dùng thành công
Luồng hoạt động: 1 Người dùng vào màn hình tài khoản
2 Người dùng chọn icon chỉnh sửa
3 Người dùng chọn vai trò cho người dùng và chọn xác nhận
Luồng thay thế: Không có
Luồng ngoại lệ: Không có
Bảng 4.22: Đặc tả usecase thay đổi quyền người dùng
4.3.23 Thay đổi trạng thái tài khoản
Usecase: Thay đổi trạng thái tài khoản
Mô tả: Quản trị viên khóa tài khoản
Tiền điều kiện: Người dùng đăng nhập với vai trò quản trị viên
Hậu điều kiện: Thay đổi trạng thái tài khoản thành công
Luồng hoạt động: 1 Người dùng vào màn hình tài khoản
2 Người dùng chọn icon khóa tài khoản
3 Màn hình tài khoản được load lại
Luồng thay thế: 2a Người dùng chọn icon mở khóa tài khoản
Luồng ngoại lệ: Không có
Bảng 4.23: Đặc tả usecase thay đổi trạng thái tài khoản
Thiết kế Activity Diagram
Hình 4.3: Activity diagram chức năng đăng nhập
Hình 4.4: Activity diagram chức năng đăng ký
Hình 4.5: Activity diagram chức năng xác nhận tài khoản
Hình 4.6: Activity diagram chức năng quên mật khẩu
4.4.5 Tìm kiếm bằng hình ảnh
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.7: Activity diagram chức năng tìm kiếm bằng hình ảnh
4.4.6 Thêm sản phẩm vào giỏ hàng
Hình 4.8: Activity diagram chức năng thêm sản phẩm vào giỏ hàng
Hình 4.9: Activity diagram chức năng đặt hàng
4.4.8 Chỉnh sửa thông tin cá nhân
Hình 4.10: Activity diagram chức năng chỉnh sửa thông tin cá nhân
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.11: Activity diagram chức năng hủy đơn hàng
Hình 4.12: Activity diagram chức năng đánh giá sản phẩm
Hình 4.13: Activity diagram chức năng thêm địa chỉ
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.14: Activity diagram chức năng đổi mật khẩu
Hình 4.15: Activity diagram chức năng tạo thiết kế 3D
Hình 4.16: Activity diagram chức năng chat với chatbot
Thiết kế Sequence Diagram
Hình 4.17: Sequence diagram chức năng đăng nhập
Hình 4.18: Sequence diagram chức năng đăng ký
Hình 4.19: Sequence diagram chức năng xác nhận tài khoản
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.20: Sequence diagram chức năng quên mật khẩu
4.5.5 Tìm kiếm/ lọc sản phẩm
Hình 4.21: Sequence diagram chức năng tìm kiếm/ lọc sản phẩm
4.5.6 Tìm kiếm bằng hình ảnh
Hình 4.22: Sequence diagram chức năng tìm kiếm bằng hình ảnh
4.5.7 Thêm sản phẩm vào giỏ hàng
Hình 4.23: Sequence diagram chức năng thêm sản phẩm vào giỏ hàng
4.5.8 Cập nhật số lượng trong giỏ hàng
Hình 4.24: Sequence diagram chức năng cập nhật số lượng trong giỏ hàng
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.25: Sequence diagram chức năng đặt hàng
4.5.10 Chỉnh sửa thông tin cá nhân
Hình 4.26: Sequence diagram chức năng chỉnh sửa thông tin cá nhân
Hình 4.27: Sequence diagram chức năng tạo thiết kế 3D
Hình 4.28: Sequence diagram chức năng hủy đơn hàng
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
4.5.13 Xác nhận nhận được hàng
Hình 4.29: Sequence diagram chức năng xác nhận nhận được hàng
Hình 4.30: Sequene diagram chức năng đánh giá sản phẩm
Hình 4.31: Sequence diagram chức năng chat với chatbot
Hình 4.32: Sequence diagram chức năng thêm địa chỉ
Hình 4.33: Sequence diagram chức năng đổi mật khẩu
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.35: Màn hình trang chủ
STT Tên Loại Ghi chú
1 Icon giỏ hàng Button Chuyển hướng đến giỏ hàng
2 Tiêu đề cửa hàng Text Hiển thị tiêu đề cửa hàng
3 Thanh tìm kiếm Button Chuyển hướng đến màn hình cửa hàng
4 Tìm kiếm bằng hình ảnh Button Mở camera
5 Banner cửa hàng Slider Hiển thị các banner của cửa hàng
6 Icon sản phẩm mới Button Chuyển hướng đến màn hình sản phẩm mới
7 Sản phẩm Card Hiển thị tổng quan sản phẩm
8 Thanh điều hướng Navigation Chuyển hướng giữa các màn hình
Bảng 4.24: Thành phần màn hình trang chủ người dùng
Màn hình sản phẩm mới
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.36: Màn hình sản phẩm mới
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại màn hình trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Sản phẩm Card Hiển thị tổng quan sản phẩm
Bảng 4.25: Thành phần màn hình sản phẩm mới
Hình 4.37: Màn hình cửa hàng
Hình 4.38: Modal lọc sản phẩm
STT Tên Loại Ghi chú
1 Icon máy ảnh Button Mở camera điện thoại
2 Ô tìm kiếm Text Input Nhập từ khóa cần tìm kiếm
3 Icon tìm kiếm Button Tìm kiếm sản phẩm
4 Icon lọc Button Mở modal lọc sản phẩm
5 Sản phẩm Card Hiển thị tổng quan sản phẩm
6 Tên chức năng lọc Text Hiển thị tên chức năng lọc
7 Nhập giá thấp nhất Text Input Nhập giá thấp nhất
8 Chọn chế độ sắp xếp Switch
Chọn chế độ sắp xếp
9 Chọn loại Checkbox Chọn loại sản phẩm
10 Loại sản phẩm Card Hiển thị tổng quan loại sản phẩm
11 Chọn chế độ lọc phổ biến
Chọn chế độ lọc phổ biến
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
12 Chọn chế độ lọc mới nhất
Chọn chế độ lọc mới nhất
Bảng 4.26: Thành phần màn hình cửa hàng
Màn hình chi tiết sản phẩm
Hình 4.39: Màn hình chi tiết sản phẩm
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Icon yêu thích Button Thêm sản phẩm vào danh sách yêu thích
3 Tên sản phẩm Text Hiển thị tên sản phẩm
4 Giá sản phẩm Text Hiển thị giá sản phẩm
5 Icon cộng Button Tăng số lượng sản phẩm
6 Icon trừ Button Giảm số lượng sản phẩm
7 Số lượng sản phẩm Text Hiển thị số lượng sản phẩm
8 Màu sản phẩm Card Hiển thị màu sản phẩm, chọn được
9 Size sản phẩm Card Hiển thị size sản phẩm, chọn
10 Số sao sản phẩm Icon Hiển thị số sao sản phẩm
11 Số lượng đã bán Text Hiển thị số lượng sản phẩm đã bán
12 Mô tả sản phẩm Text Hiển thị mô tả sản phẩm
13 Số lượng đánh giá Text Hiển thị số lượng đánh giá
14 Đánh giá sản phẩm Card Thông tin đánh giá sản phẩm
15 Mua ngay Button Chuyển hướng đến màn hình thanh toán
16 Thêm sản phẩm vào giỏ hàng
Button Thêm sản phẩm vào giỏ hàng
Bảng 4.27: Thành phần màn hình chi tiết sản phẩm
Hình 4.40: Màn hình giỏ hàng
STT Tên Loại Ghi chú
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Chọn sản phẩm Checkbox Chọn sản phẩm trong giỏ hàng
4 Sản phẩm Card Hiển thị thông tin tổng quan sản phẩm
5 Icon thùng rác Button Xóa sản phẩm khỏi giỏ hàng
6 Icon cộng Button Tăng số lượng sản phẩm
7 Icon trừ Button Giảm số lượng sản phẩm
8 Số lượng sản phẩm Text Hiển thị số lượng sản phẩm
9 Chọn tất cả Checkbox Chọn tất cả sản phẩm
10 Tổng tiền Text Hiển thị tổng tiền
11 Mua hàng Button Chuyển hướng đến màn hình thanh toán
Bảng 4.28: Thành phần màn hình giỏ hàng
Hình 4.41: Màn hình thanh toán
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Địa chỉ Card Hiển thị thông tin tổng quan địa chỉ
4 Icon chọn địa chỉ Button Chuyển hướng đến màn hình chọn địa chỉ
5 Sản phẩm Card Hiển thị tổng quan sản phẩm
6 Chọn phương thức thanh toán
Selectbox Chọn phương thức thanh toán
7 Phí vận chuyển Text Hiển thị phí vận chuyển
8 Tổng tiền Text Hiển thị tổng tiền đơn hàng
9 Thanh toán Button Tiến hành đặt hàng
Bảng 4.29: Thành phần màn hình thanh toán
Màn hình đặt hàng thành công
Hình 4.42: Màn hình đặt hàng thành công
STT Tên Loại Ghi chú
1 Thông báo thành công Toast Thông báo đặt hàng thành công
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2 Đặt hàng thành công Text Hiển thị trạng thái đặt hàng
3 Cảm ơn người dùng Text Hiển thị lời cảm ơn
4 Tiếp tục mua sắm Button Quay về màn hình trang chủ
Bảng 4.30: Thành phần màn hình đặt hàng thành công
Hình 4.43: Màn hình đăng nhập
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập email Text Input Nhập email
5 Password Text Input Nhập mật khẩu
6 Icon con mắt Button Xem mật khẩu đã nhập
7 Quên mật khẩu Text Chuyển hướng đến màn hình quên mật khẩu
8 Đăng ký Text Chuyển hướng đến màn hình đăng ký
9 Đăng nhập Button Đăng nhập vào tài khoản
Bảng 4.31: Thành phần màn hình đăng nhập
Hình 4.44: Màn hình đăng ký
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập họ tên Text Input Nhập tên người dùng
4 Nhập email Text Input Nhập email
6 Password Text Input Nhập mật khẩu
7 Icon con mắt Button Xem mật khẩu đã nhập
8 Xác nhận mật khẩu Text Input Nhập xác nhận mật khẩu
9 Đăng ký Button Đăng ký tài khoản
Bảng 4.32: Thành phần màn hình đăng ký
Màn hình quên mật khẩu
Hình 4.45: Màn hình quên mật khẩu
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập email Text Input Nhập email
5 Tìm tài khoản Button Tìm tài khoản, mở modal xác nhận tài khoản
6 Thông báo Toast Thông báo xác nhận tài khoản
7 Nhắc nhở xác nhận tại khoản
Text Nhắc nhở xác nhận tại khoản
8 Nhập otp Text Input Nhập otp, chỉ nhận số
9 Bộ đếm thời gian Text Hiển thị thời gian đếm ngược
10 Xác minh Button Xác minh tài khoản
11 Mật khẩu Text Input Nhập mật khẩu
12 Icon con mắt Button Xem mật khẩu đã nhập
13 Xác nhận mật khẩu Text Input Nhập xác nhận mật khẩu
14 Đổi mật khẩu Button Tiến hành đổi mật khẩu
Bảng 4.33: Thành phần màn hình quên mật khẩu
Hình 4.46: Màn hình tài khoản
STT Tên Loại Ghi chú
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1 Ảnh nền Image Hiển thị ảnh nền
2 Ảnh đại diện Image Hiển thị ảnh đại diện
3 Tên người dùng Text Hiển thị tên người dùng
4 Email Text Hiển thị email người dùng
5 Đổi mật khẩu Text Chuyển hướng đến màn hình đổi mật khẩu
6 Sổ địa chỉ Text Chuyển hướng đến màn hình địa chỉ
7 Đơn hàng Text Chuyển hướng đến màn hình lịch sử đơn hàng
8 Giỏ hàng Text Chuyển hướng đến màn hình giỏ hàng
9 Yêu thích Text Chuyển hướng đến màn hình yêu thích
10 Đăng xuất Text Đăng xuất khỏi tài khoản
Bảng 4.34: Thành phần màn hình tài khoản
Màn hình hồ sơ cá nhân
Hình 4.47: Màn hình hồ sơ cá nhân
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Ảnh đại diện Image Picker Chọn ảnh đại diện mới
4 Email Text Hiển thị email người dùng
5 Tên người dùng Text Input Hiển thị tên người dùng
6 Icon edit Button Chỉnh sửa tên người dùng
7 Giới tính Text Input Hiển thị giới tính người dùng
8 Ngày sinh Date Picker Hiện thị ngày sinh của người dùng
9 Lưu Button Lưu thông tin người dùng
Bảng 4.35: Thành phần màn hình hồ sơ cá nhân
Màn hình đổi mật khẩu
Hình 4.48: Màn hình đổi mật khẩu
STT Tên Loại Ghi chú
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập mật khẩu hiện tại Text Input Nhập mật khẩu hiện tại
4 Icon con mắt Button Xem mật khẩu đã nhập
6 Mật khẩu Text Input Nhập mật khẩu
7 Xác nhận mật khẩu Text Input Nhập xác nhận mật khẩu
8 Đổi mật khẩu Button Đổi mật khẩu người dùng
Bảng 4.36: Thành phần màn hình đổi mật khẩu
Màn hình sổ địa chỉ
Hình 4.49: Màn hình sổ địa chỉ
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Địa chỉ Card Hiển thị thông tin địa chỉ
4 Icon edit Button Chuyển hướng sang màn hình sửa địa chỉ
5 Mặc định Text Hiển thị địa chỉ nào là mặc định
6 Thêm địa chỉ Button Chuyến hướng sang màn hình thêm địa chỉ
Bảng 4.37: Thành phần màn hình sổ địa chỉ
Màn hình thêm địa chỉ
Hình 4.50: Màn hình thêm địa chỉ
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2 Tên màn hình Text Hiển thị tên màn hình
3 Nhập họ tên Text Input Nhập họ tên khách hàng
4 Nhập số điện thoại Text Input Nhập số điện thoại khách hàng
5 Chọn tỉnh thành Selectbox Chọn tỉnh thành
6 Chọn quận huyện Selectbox Chọn quận huyện
7 Chọn phường xã Selectbox Chọn phường xã
8 Nhập địa chỉ cụ thể Text Input Nhập địa chỉ cụ thể
9 Đặt làm mặc định Switch
Button Đặt làm địa chỉ mặc định
10 Lưu Button Lưu địa chỉ
Bảng 4.38: Thành phần màn hình thêm địa chỉ
Hình 4.51: Màn hình đơn hàng
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Trạng thái đơn hàng Navigation Điều hướng giữa các trạng thái đơn hàng
4 Đơn hàng Card Hiển thị thông tin tổng quan đơn hàng
5 Đánh giá sản phẩm Button Điều hướng đến màn hình đánh giá sản phẩm
Bảng 4.39: Thành phần màn hình đơn hàng
Màn hình đánh giá sản phẩm
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.52: Màn hình đánh giá sản phẩm
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Sản phẩm Card Hiển thị tổng quan thông tin sản phẩm
4 Số sao Button Chọn số sao
5 Nhập đánh giá Text Input Nhập đánh giá cho sản phẩm
6 Gửi đánh giá Button Gửi đánh giá sản phẩm
Bảng 4.40: Thành phần màn hình đánh giá sản phẩm
Màn hình tạo thiết kế 3D
Hình 4.53: Màn hình tạo thiết kế 3D
STT Tên Loại Ghi chú
1 Icon thêm Button Mở bottom sheet chọn sản phẩm
2 Mô hình 3D Model 3D Hiển thị mô hình 3D
3 Icon thùng rác Button Xóa mô hình 3D khỏi màn hình
4 Nhập sản phẩm Text Input Nhập sản phẩm cần tìm
5 Icon tìm kiếm Button Tìm kiếm sản phẩm
6 Khung sản phẩm Card Hiển thị thông tin sản phẩm
Bảng 4.41: Thành phần màn hình tạo thiết kế 3D
Màn hình chat với Chatbot
Hình 4.54: Màn hình đánh giá sản phẩm
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Khung chat của chatbot TextView Hiển thị tin nhắn từ hệ thống
4 Khung chat của người dùng
TextView Hiển thị tin nhắn từ người dùng
5 Nhập nội dung tin nhắn Text Input Nhập nội dung tin nhắn
6 Gửi tin nhắn Button Gửi tin nhắn
Bảng 4.42: Thành phần màn hình chat với chatbot
Giao diện
Hình 4.35: Màn hình trang chủ
STT Tên Loại Ghi chú
1 Icon giỏ hàng Button Chuyển hướng đến giỏ hàng
2 Tiêu đề cửa hàng Text Hiển thị tiêu đề cửa hàng
3 Thanh tìm kiếm Button Chuyển hướng đến màn hình cửa hàng
4 Tìm kiếm bằng hình ảnh Button Mở camera
5 Banner cửa hàng Slider Hiển thị các banner của cửa hàng
6 Icon sản phẩm mới Button Chuyển hướng đến màn hình sản phẩm mới
7 Sản phẩm Card Hiển thị tổng quan sản phẩm
8 Thanh điều hướng Navigation Chuyển hướng giữa các màn hình
Bảng 4.24: Thành phần màn hình trang chủ người dùng
Màn hình sản phẩm mới
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.36: Màn hình sản phẩm mới
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại màn hình trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Sản phẩm Card Hiển thị tổng quan sản phẩm
Bảng 4.25: Thành phần màn hình sản phẩm mới
Hình 4.37: Màn hình cửa hàng
Hình 4.38: Modal lọc sản phẩm
STT Tên Loại Ghi chú
1 Icon máy ảnh Button Mở camera điện thoại
2 Ô tìm kiếm Text Input Nhập từ khóa cần tìm kiếm
3 Icon tìm kiếm Button Tìm kiếm sản phẩm
4 Icon lọc Button Mở modal lọc sản phẩm
5 Sản phẩm Card Hiển thị tổng quan sản phẩm
6 Tên chức năng lọc Text Hiển thị tên chức năng lọc
7 Nhập giá thấp nhất Text Input Nhập giá thấp nhất
8 Chọn chế độ sắp xếp Switch
Chọn chế độ sắp xếp
9 Chọn loại Checkbox Chọn loại sản phẩm
10 Loại sản phẩm Card Hiển thị tổng quan loại sản phẩm
11 Chọn chế độ lọc phổ biến
Chọn chế độ lọc phổ biến
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
12 Chọn chế độ lọc mới nhất
Chọn chế độ lọc mới nhất
Bảng 4.26: Thành phần màn hình cửa hàng
Màn hình chi tiết sản phẩm
Hình 4.39: Màn hình chi tiết sản phẩm
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Icon yêu thích Button Thêm sản phẩm vào danh sách yêu thích
3 Tên sản phẩm Text Hiển thị tên sản phẩm
4 Giá sản phẩm Text Hiển thị giá sản phẩm
5 Icon cộng Button Tăng số lượng sản phẩm
6 Icon trừ Button Giảm số lượng sản phẩm
7 Số lượng sản phẩm Text Hiển thị số lượng sản phẩm
8 Màu sản phẩm Card Hiển thị màu sản phẩm, chọn được
9 Size sản phẩm Card Hiển thị size sản phẩm, chọn
10 Số sao sản phẩm Icon Hiển thị số sao sản phẩm
11 Số lượng đã bán Text Hiển thị số lượng sản phẩm đã bán
12 Mô tả sản phẩm Text Hiển thị mô tả sản phẩm
13 Số lượng đánh giá Text Hiển thị số lượng đánh giá
14 Đánh giá sản phẩm Card Thông tin đánh giá sản phẩm
15 Mua ngay Button Chuyển hướng đến màn hình thanh toán
16 Thêm sản phẩm vào giỏ hàng
Button Thêm sản phẩm vào giỏ hàng
Bảng 4.27: Thành phần màn hình chi tiết sản phẩm
Hình 4.40: Màn hình giỏ hàng
STT Tên Loại Ghi chú
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Chọn sản phẩm Checkbox Chọn sản phẩm trong giỏ hàng
4 Sản phẩm Card Hiển thị thông tin tổng quan sản phẩm
5 Icon thùng rác Button Xóa sản phẩm khỏi giỏ hàng
6 Icon cộng Button Tăng số lượng sản phẩm
7 Icon trừ Button Giảm số lượng sản phẩm
8 Số lượng sản phẩm Text Hiển thị số lượng sản phẩm
9 Chọn tất cả Checkbox Chọn tất cả sản phẩm
10 Tổng tiền Text Hiển thị tổng tiền
11 Mua hàng Button Chuyển hướng đến màn hình thanh toán
Bảng 4.28: Thành phần màn hình giỏ hàng
Hình 4.41: Màn hình thanh toán
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Địa chỉ Card Hiển thị thông tin tổng quan địa chỉ
4 Icon chọn địa chỉ Button Chuyển hướng đến màn hình chọn địa chỉ
5 Sản phẩm Card Hiển thị tổng quan sản phẩm
6 Chọn phương thức thanh toán
Selectbox Chọn phương thức thanh toán
7 Phí vận chuyển Text Hiển thị phí vận chuyển
8 Tổng tiền Text Hiển thị tổng tiền đơn hàng
9 Thanh toán Button Tiến hành đặt hàng
Bảng 4.29: Thành phần màn hình thanh toán
Màn hình đặt hàng thành công
Hình 4.42: Màn hình đặt hàng thành công
STT Tên Loại Ghi chú
1 Thông báo thành công Toast Thông báo đặt hàng thành công
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2 Đặt hàng thành công Text Hiển thị trạng thái đặt hàng
3 Cảm ơn người dùng Text Hiển thị lời cảm ơn
4 Tiếp tục mua sắm Button Quay về màn hình trang chủ
Bảng 4.30: Thành phần màn hình đặt hàng thành công
Hình 4.43: Màn hình đăng nhập
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập email Text Input Nhập email
5 Password Text Input Nhập mật khẩu
6 Icon con mắt Button Xem mật khẩu đã nhập
7 Quên mật khẩu Text Chuyển hướng đến màn hình quên mật khẩu
8 Đăng ký Text Chuyển hướng đến màn hình đăng ký
9 Đăng nhập Button Đăng nhập vào tài khoản
Bảng 4.31: Thành phần màn hình đăng nhập
Hình 4.44: Màn hình đăng ký
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập họ tên Text Input Nhập tên người dùng
4 Nhập email Text Input Nhập email
6 Password Text Input Nhập mật khẩu
7 Icon con mắt Button Xem mật khẩu đã nhập
8 Xác nhận mật khẩu Text Input Nhập xác nhận mật khẩu
9 Đăng ký Button Đăng ký tài khoản
Bảng 4.32: Thành phần màn hình đăng ký
Màn hình quên mật khẩu
Hình 4.45: Màn hình quên mật khẩu
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập email Text Input Nhập email
5 Tìm tài khoản Button Tìm tài khoản, mở modal xác nhận tài khoản
6 Thông báo Toast Thông báo xác nhận tài khoản
7 Nhắc nhở xác nhận tại khoản
Text Nhắc nhở xác nhận tại khoản
8 Nhập otp Text Input Nhập otp, chỉ nhận số
9 Bộ đếm thời gian Text Hiển thị thời gian đếm ngược
10 Xác minh Button Xác minh tài khoản
11 Mật khẩu Text Input Nhập mật khẩu
12 Icon con mắt Button Xem mật khẩu đã nhập
13 Xác nhận mật khẩu Text Input Nhập xác nhận mật khẩu
14 Đổi mật khẩu Button Tiến hành đổi mật khẩu
Bảng 4.33: Thành phần màn hình quên mật khẩu
Hình 4.46: Màn hình tài khoản
STT Tên Loại Ghi chú
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1 Ảnh nền Image Hiển thị ảnh nền
2 Ảnh đại diện Image Hiển thị ảnh đại diện
3 Tên người dùng Text Hiển thị tên người dùng
4 Email Text Hiển thị email người dùng
5 Đổi mật khẩu Text Chuyển hướng đến màn hình đổi mật khẩu
6 Sổ địa chỉ Text Chuyển hướng đến màn hình địa chỉ
7 Đơn hàng Text Chuyển hướng đến màn hình lịch sử đơn hàng
8 Giỏ hàng Text Chuyển hướng đến màn hình giỏ hàng
9 Yêu thích Text Chuyển hướng đến màn hình yêu thích
10 Đăng xuất Text Đăng xuất khỏi tài khoản
Bảng 4.34: Thành phần màn hình tài khoản
Màn hình hồ sơ cá nhân
Hình 4.47: Màn hình hồ sơ cá nhân
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Ảnh đại diện Image Picker Chọn ảnh đại diện mới
4 Email Text Hiển thị email người dùng
5 Tên người dùng Text Input Hiển thị tên người dùng
6 Icon edit Button Chỉnh sửa tên người dùng
7 Giới tính Text Input Hiển thị giới tính người dùng
8 Ngày sinh Date Picker Hiện thị ngày sinh của người dùng
9 Lưu Button Lưu thông tin người dùng
Bảng 4.35: Thành phần màn hình hồ sơ cá nhân
Màn hình đổi mật khẩu
Hình 4.48: Màn hình đổi mật khẩu
STT Tên Loại Ghi chú
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
1 Icon quay lại Button Quay lại trang trước đó
2 Hình ảnh Image Hiển thị hình ảnh
3 Tên màn hình Text Hiển thị tên màn hình
4 Nhập mật khẩu hiện tại Text Input Nhập mật khẩu hiện tại
4 Icon con mắt Button Xem mật khẩu đã nhập
6 Mật khẩu Text Input Nhập mật khẩu
7 Xác nhận mật khẩu Text Input Nhập xác nhận mật khẩu
8 Đổi mật khẩu Button Đổi mật khẩu người dùng
Bảng 4.36: Thành phần màn hình đổi mật khẩu
Màn hình sổ địa chỉ
Hình 4.49: Màn hình sổ địa chỉ
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Địa chỉ Card Hiển thị thông tin địa chỉ
4 Icon edit Button Chuyển hướng sang màn hình sửa địa chỉ
5 Mặc định Text Hiển thị địa chỉ nào là mặc định
6 Thêm địa chỉ Button Chuyến hướng sang màn hình thêm địa chỉ
Bảng 4.37: Thành phần màn hình sổ địa chỉ
Màn hình thêm địa chỉ
Hình 4.50: Màn hình thêm địa chỉ
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2 Tên màn hình Text Hiển thị tên màn hình
3 Nhập họ tên Text Input Nhập họ tên khách hàng
4 Nhập số điện thoại Text Input Nhập số điện thoại khách hàng
5 Chọn tỉnh thành Selectbox Chọn tỉnh thành
6 Chọn quận huyện Selectbox Chọn quận huyện
7 Chọn phường xã Selectbox Chọn phường xã
8 Nhập địa chỉ cụ thể Text Input Nhập địa chỉ cụ thể
9 Đặt làm mặc định Switch
Button Đặt làm địa chỉ mặc định
10 Lưu Button Lưu địa chỉ
Bảng 4.38: Thành phần màn hình thêm địa chỉ
Hình 4.51: Màn hình đơn hàng
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Trạng thái đơn hàng Navigation Điều hướng giữa các trạng thái đơn hàng
4 Đơn hàng Card Hiển thị thông tin tổng quan đơn hàng
5 Đánh giá sản phẩm Button Điều hướng đến màn hình đánh giá sản phẩm
Bảng 4.39: Thành phần màn hình đơn hàng
Màn hình đánh giá sản phẩm
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Hình 4.52: Màn hình đánh giá sản phẩm
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Sản phẩm Card Hiển thị tổng quan thông tin sản phẩm
4 Số sao Button Chọn số sao
5 Nhập đánh giá Text Input Nhập đánh giá cho sản phẩm
6 Gửi đánh giá Button Gửi đánh giá sản phẩm
Bảng 4.40: Thành phần màn hình đánh giá sản phẩm
Màn hình tạo thiết kế 3D
Hình 4.53: Màn hình tạo thiết kế 3D
STT Tên Loại Ghi chú
1 Icon thêm Button Mở bottom sheet chọn sản phẩm
2 Mô hình 3D Model 3D Hiển thị mô hình 3D
3 Icon thùng rác Button Xóa mô hình 3D khỏi màn hình
4 Nhập sản phẩm Text Input Nhập sản phẩm cần tìm
5 Icon tìm kiếm Button Tìm kiếm sản phẩm
6 Khung sản phẩm Card Hiển thị thông tin sản phẩm
Bảng 4.41: Thành phần màn hình tạo thiết kế 3D
Màn hình chat với Chatbot
Hình 4.54: Màn hình đánh giá sản phẩm
STT Tên Loại Ghi chú
1 Icon quay lại Button Quay lại trang trước đó
2 Tên màn hình Text Hiển thị tên màn hình
3 Khung chat của chatbot TextView Hiển thị tin nhắn từ hệ thống
4 Khung chat của người dùng
TextView Hiển thị tin nhắn từ người dùng
5 Nhập nội dung tin nhắn Text Input Nhập nội dung tin nhắn
6 Gửi tin nhắn Button Gửi tin nhắn
Bảng 4.42: Thành phần màn hình chat với chatbot
CÀI ĐẶT VÀ KIỂM THỬ
Các Bước Cài Đặt
Environment React Native, NextJS, NestJS
IDE Visual Studio Code, Android Studio
Bảng 5.1: Các công cụ phát triển
Clone project từ github: https://github.com/hoangnhatvu/VuDecorShop
Mở terminal, gõ lệnh cd fe_source
Gõ lệnh yarn start:dev
Clone project từ github: https://github.com/hoangnhatvu/VuDecorShop
Mở terminal, gõ lệnh cd fe_source
Clone project từ github: https://github.com/hoangnhatvu/VuDecorShop
Mở terminal, gõ lệnh cd admin
Gõ lệnh yarn run dev
Kiểm thử
Mục đích: Kiểm tra một số chức năng quan trọng của hệ thống
Phương pháp: Kiểm thử hộp đen
Các chức năng kiểm thử
1 Người mua hàng, nhân viên, quản trị viên Đăng nhập vào hệ thống
Kiểm thử chức năng đăng nhập vào hệ thống, khi cung cấp tài khoản và mật khẩu hợp lệ sẽ cấp một phiên làm việc
2 Người mua hàng Thêm đánh giá sau khi mua hàng
Kiểm thử chức năng thêm đánh giá sau khi mua sản phẩm
3 Người mua hàng Thêm sản phẩm vào giỏ hàng
Kiểm thử chức năng thêm sản phẩm vào giỏ hàng của người dùng
4 Người mua hàng Xác nhận tài khoản
Kiểm thử chức năng xác nhận tài khoản sau khi người dùng tạo tài khoản hoặc quên mật khẩu
5 Người mua hàng Đổi mật khẩu Kiểm thử chức năng đổi mật khẩu mới
6 Người mua hàng Đặt hàng Kiểm thử chức năng đặt hàng sau khi chọn sản phẩm từ giỏ hàng
7 Người mua hàng Chỉnh sửa thông tin cá nhân
Kiểm thử chức năng chỉnh sửa thông tin cá nhân
8 Người mua hàng, nhân viên, quản trị viên
Hủy đơn hàng Kiểm thử chức năng hủy đơn hàng khi đơn hàng chưa được vận chuyển
9 Quản trị viên Thêm sản phẩm Kiểm thử chức năng thêm sản phẩm mới
10 Người mua hàng Đăng ký Kiểm thử chức năng đăng ký
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Bảng 5.2: Các chức năng kiểm thử
Expected result Đăng nhập Cho phép người dùng đăng nhập vào hệ thống
LOGIN_01 Đăng nhập với quyền người dùng, với mật khẩu và tài khoản đúng
Chuyển đến trang chủ, hiển thị thông báo đăng nhập thành công
LOGIN_02 Người dùng nhập sai mật khẩu hoặc tài khoản
Thông báo người dùng nhập sai tài khoản hoặc mật khẩu
Cho phép nhân viên đăng nhập vào hệ thống
LOGIN_03 Nhân viên nhập đúng tài khoản và mật khẩu
Chuyển đến trang chủ với phiên làm việc của nhân viên
Cho phép quản trị viên đăng nhập vào hệ thống
LOGIN_04 Quản trị viên nhập đúng tài khoản và mật khẩu
Chuyển đến trang chủ với phiên làm việc của quản trị viên
Bảng 5.3: Kịch bản kiểm thử chức năng đăng nhập
Expected result Đánh giá Cho phép người dùng thêm nhận
REVIEW_01 Người dùng thêm nhận xét
Báo lỗi chỉ có thể thêm nhận
77 xét sau khi mua sản phẩm khi chưa mua sản phẩm xét sau khi mua sản phẩm
REVIEW_02 Người dùng thêm nhận xét khi không chọn sao
Vẫn cho người dùng tạo nhận xét với số sao mặc định
REVIEW_03 Người dùng thêm nhận xét với không nhập nội dung
Hiển thị thông báo thêm nhận xét thành công vì nội dung nhập không bắt buộc
REVIEW_04 Người dùng thêm nhận xét với đầy đủ thông tin, chọn sao, nhập nội dung
Hiển thị thông báo thêm nhận xét thành công
Bảng 5.4: Kịch bản kiểm thử chức năng đánh giá sản phẩm
Thêm sản phẩm vào giỏ hàng
Cho phép người dùng thêm sản phẩm vào giỏ hàng
Người dùng chọn biến thể sản phẩm, nhập số lượng và thêm sản phẩm vào giỏ hàng
Hiển thị thông báo thêm sản phẩm vào giỏ hàng thành công
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Người dùng chọn số lượng nhỏ hơn 1
Người dùng chọn số lượng vượt quá số lượng trong kho và chọn thêm vào giỏ hàng
Thông báo nhắc nhở người dùng giảm số lượng sản phẩm
Bảng 5.5: Kịch bản kiểm thử chức năng thêm sản phẩm vào giỏ hàng
Cho phép người dùng xác nhận tài khoản
Người dùng nhập otp sai định dạng
Hệ thống báo lỗi otp không hợp lệ
Người dùng nhập otp không đúng
Hệ thống báo lỗi otp không hợp lệ
Người dùng nhập otp hết hạn
Hệ thống báo lỗi otp không hợp lệ
Người dùng nhập otp hợp lệ
Hệ thống báo xác minh tài khoản thành công
Bảng 5.6: Kịch bản kiểm thử chức năng xác nhận tài khoản
Function Objective Test Scenario Expected result
Scenario description Đổi mật khẩu
Cho phép người dùng đổi mật khẩu
Người dùng nhập mật khẩu cũ không đúng
Hệ thống báo lỗi mật khẩu cũ không đúng
Người dùng nhập mật khẩu mới không khớp
Hệ thống báo lỗi mật khẩu không khớp
Bảng 5.7: Kịch bản kiểm thử chức năng đổi mật khẩu
Expected result Đặt hàng Cho phép người dùng đặt hàng
ORDER_01 Người dùng không chọn phướng thức thanh toán
Hệ thống thông báo vui lòng chọn phương thức thanh toán
ORDER_02 Người dùng chọn đầy đủ thông tin đặt hàng
Hệ thống thông báo đặt hàng thành công
Bảng 5.8: Kịch bản kiểm thử chức năng đặt hàng
Chỉnh sửa thông tin cá nhân
Cho phép người dùng chỉnh sửa thông tin cá nhân
Người dùng upload ảnh đại diện
Hệ thống thông báo cập nhật thông tin thành công, ảnh đại diện thay đổi
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Người dùng upload ảnh đại diện sai định dạng
Hệ thống thông báo lỗi file sai định dạng
Người dùng nhập các thông tin khác
Hệ thống thông báo cập nhật thông tin thành công, thông tin mới được hiển thị
Bảng 5.9: Kịch bản kiểm thử chức năng chỉnh sửa thông tin cá nhân
Cho phép người dùng, nhân viên hoặc quản trị viên hủy đơn hàng
Người dùng hủy đơn hàng khi đơn hàng ở trạng thái “Chờ xác nhận” Đơn hàng được hủy trong hệ thống
Người dùng hủy đơn hàng khi đơn hàng ở trạng thái “Chờ lấy hàng” Đơn hàng được hủy trong hệ thống và bên Giao hàng nhanh
Bảng 5.10: Kịch bản kiểm thử chức năng hủy đơn hàng
Thêm sản Cho quản trị ADDPROD Người dùng Hệ thống thông
81 phẩm viên thêm một sản phẩm mới
UCT_01 không tạo biến thể cho sản phẩm báo vui lòng tạo biến thể cho sản phẩm
Người dùng nhập đầy đủ thông tin cần thiết
Hệ thống thông báo thêm sản phẩm thành công
Bảng 5.11: Kịch bản kiểm thử chức năng thêm sản phẩm
Expected result Đăng ký Cho phép người dùng đăng ký tài khoản mới
SIGNUP_01 Người dùng nhập email và password không hợp lệ
Hệ thống báo lỗi email và password không hợp lệ
SIGNUP_02 Người dùng nhập email đã tồn tại
Hệ thống thông báo email đã tồn tại
SIGNUP_03 Người dùng nhập đầy đủ thông tin hợp lệ
Hệ thống mở màn hình xác nhận tài khoản
Bảng 5.12: Kịch bản kiểm thử chức năng đăng ký
Test Case ID: LOGIN_01 Test Designed by: Hoàng Nhất Vũ
PostCondition: Chuyển đến trang chủ và cấp một token để xác thực
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Step Test steps Test data Expected result
1 Truy cập màn hình đăng nhập
Chuyển đến trang chủ người dùng đang đăng nhập và cấp một phiên làm việc
2 Hiển thị form đăng nhập
3 Nhập tài khoản và mật khẩu
Tài khoản: hoangnhatvu2 5302@gmail. com Mật khẩu:
Test Case ID: LOGIN_02 Test Designed by: Hoàng Nhất Vũ
PostCondition: Thông báo Sai tài khoản hoặc mật khẩu
Step Test steps Test data Expected result
1 Truy cập màn hình đăng nhập
Thông báo người dùng nhập sai tài
2 Hiển thị form đăng nhập khoản hoặc mật khẩu
3 Nhập tài khoản và mật khẩu
Tài khoản: hoangnhatvu2 5302@gmail. com Mật khẩu:
Test Case ID: LOGIN_03 Test Designed by: Hoàng Nhất Vũ
PostCondition: Phiên làm việc của người dùng có quyền nhân viên
Step Test steps Test data Expected result
1 Truy cập màn hình đăng nhập
Chuyển đến trang chủ với phiên làm việc của nhân viên
2 Hiển thị form đăng nhập
3 Nhập tài khoản và mật khẩu
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Test Case ID: LOGIN_04 Test Designed by: Hoàng Nhất Vũ
PostCondition: Phiên làm việc của người dùng có quyền quản trị viên
Step Test steps Test data Expected result
1 Truy cập màn hình đăng nhập
Chuyển đến trang chủ với phiên làm việc của nhân viên
2 Hiển thị form đăng nhập
3 Nhập tài khoản và mật khẩu
Tài khoản: hoangnhatvu2 5302@gmail. com Mật khẩu:
5.2.2 Chức năng thêm nhận xét
Test Case ID: REVIEW_01 Test Designed by: Hoàng Nhất Vũ
Precondition: Đăng nhập tài khoản
PostCondition: Thông báo lỗi chỉ có thể thêm nhận xét khi đã mua sản phẩm
Step Test steps Test data Expected result
1 Chọn số sao 1 sao Hiển thị thông báo lỗi chỉ có thể thêm nhận xét khi đã mua sản phẩm
2 Nhập nội dung đánh giá
Sản phẩm cực kỳ tệ
Test Case ID: REVIEW_02 Test Designed by: Hoàng Nhất Vũ
Precondition: Đăng nhập tài khoản, đã mua sản phẩm
PostCondition: Thông báo cho người dùng, thêm nhận xét thành công
Step Test steps Test data Expected result
1 Chọn số sao Không chọn Tự động xử lí
5 sao khi người dùng không chọn
2 Nhập nội dung đánh giá
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
3 Nhấn nút gửi số sao, hiển thị thông báo thêm nhận xét thành công
Test Case ID: REVIEW_03 Test Designed by: Hoàng Nhất Vũ
Precondition: Đăng nhập tài khoản, đã mua sản phẩm
PostCondition: Thông báo cho người dùng, thêm nhận xét thành công
Step Test steps Test data Expected result
1 Chọn số sao Không chọn Hiển thị thông báo thêm nhận xét thành công
2 Nhập nội dung đánh giá
Test Case ID: REVIEW_04 Test Designed by: Hoàng Nhất Vũ
Precondition: Đăng nhập tài khoản, đã mua sản phẩm
PostCondition: Thông báo cho người dùng, thêm nhận xét thành công
Step Test steps Test data Expected result
1 Chọn số sao 5 sao Hiển thị thông báo đánh giá sản phẩm thành công
2 Nhập nội dung đánh giá
5.2.3 Chức năng thêm sản phẩm vào giỏ hàng
Test Case ID: ADDCART_01 Test Designed by: Hoàng Nhất Vũ
Precondition: Đăng nhập tài khoản
PostCondition: Thông báo cho người dùng đã thêm sản phẩm vào giỏ hàng
Step Test steps Test data Expected result
1 Chọn số lượng sản phẩm
2 Hiển thị thông báo thêm sản phẩm thành công
2 Nhấn thêm sản phẩm vào giỏ hàng
Test Case ID: ADDCART_02 Test Designed by: Hoàng Nhất Vũ
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Precondition: Đăng nhập tài khoản
PostCondition: Không cho phép chọn số lượng nhỏ hơn 1
Step Test steps Test data Expected result
1 Chọn số lượng sản phẩm
Test Case ID: ADDCART_03 Test Designed by: Hoàng Nhất Vũ
Precondition: Đăng nhập tài khoản
PostCondition: Không cho thêm sản phẩm vào giỏ hàng
Step Test steps Test data Expected result
1 Chọn số lượng sản phẩm
1000 Thông báo nhắc nhở người dùng giảm số lượng sản phẩm
2 Chọn thêm vào giỏ hàng
5.2.4 Chức năng xác nhận tài khoản
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã có tài khoản
PostCondition: Thông báo cho người dùng otp không hợp lệ
Step Test steps Test data Expected result
1 Nhập otp 27hg Hệ thống báo lỗi otp không hợp lệ
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã có tài khoản
PostCondition: Thông báo cho người dùng otp không hợp lệ
Step Test steps Test data Expected result
1 Nhập otp 0000 Hệ thống báo lỗi otp không hợp lệ
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã có tài khoản
PostCondition: Thông báo cho người dùng otp không hợp lệ
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Step Test steps Test data Expected result
5637 Hệ thống báo lỗi otp không hợp lệ
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã có tài khoản
PostCondition: Thông báo cho người dùng xác nhận tài khoản thành công
Step Test steps Test data Expected result
3522 Hệ thống báo xác minh tài khoản thành công
5.2.5 Chức năng đổi mật khẩu
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
PostCondition: Thông báo cho người dùng mật khẩu cũ không đúng
Step Test steps Test data Expected result
Hệ thống báo mật khẩu cũ không đúng
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
PostCondition: Thông báo cho người dùng mật khẩu mới không khớp
Step Test steps Test data Expected result
@Vu58609 Hệ thống báo lỗi mật khẩu không khớp
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Test Case ID: ORDER_01 Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
PostCondition: Thông báo cho người dùng vui lòng chọn phương thức thanh toán
Step Test steps Test data Expected result
1 Chọn địa chỉ vận chuyển Địa chỉ mặc định
Hệ thống thông báo vui lòng chọn phương thức thanh toán
Hệ thống thông báo có lỗi xảy ra
Test Case ID: ORDER_02 Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
PostCondition: Thông báo cho người dùng đặt hàng thành công
Step Test steps Test data Expected result
1 Chọn địa chỉ vận chuyển Địa chỉ mặc định
Hệ thống thông báo đặt
3 Chọn phương thức thanh toán
Thanh toán khi nhận hàng hàng thành công
5.2.7 Chức năng cập nhật thông tin cá nhân
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
PostCondition: Thông báo cho người dùng cập nhật thông tin thành công, hiển thị ảnh đại diện mới
Step Test steps Test data Expected result
1 Chọn ảnh đại diện test.png Hệ thống thông báo cập nhật thông tin thành công, ảnh đại diện thay đổi
Hiển thị hình ảnh cũ
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
PostCondition: Thông báo cho người dùng file sai định dạng
Step Test steps Test data Expected result
Test.pdf Hệ thống thông báo lỗi file sai định dạng
Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập vào tài khoản
PostCondition: Thông báo cho người dùng cập nhật thông tin thành công, hiển thị theo thông tin mới
Step Test steps Test data Expected result
1 Sửa tên người dùng Đỗ Văn Dũng Hệ thống thông báo cập nhật thông tin thành công, thông tin mới được hiển thị
Hiển thị thông tin cũ
5.2.8 Chức năng hủy đơn hàng
Test Designed by: Hoàng Nhất Vũ
Precondition: Đơn hàng ở trạng thái “Chờ xác nhận”
PostCondition: Thông báo cho người dùng hủy đơn hàng thành công
Step Test steps Test data Expected result
1 Chọn hủy đơn hàng Đơn hàng được hủy trong hệ thống
Test Designed by: Hoàng Nhất Vũ
Precondition: Đơn hàng ở trạng thái “Chờ lấy hàng”
PostCondition: Thông báo cho người dùng hủy đơn hàng thành công, đơn hàng được hủy trong hệ thống và Giao hàng nhanh
Step Test steps Test data Expected result
1 Chọn hủy đơn hàng Đơn hàng được hủy trong hệ thống và bên Giao hàng nhanh
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
5.2.9 Chức năng thêm sản phẩm
Test Case ID: ADDPRODUCT_01 Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập với quyển quản trị viên
PostCondition: Thông báo cho người dùng vui lòng tạo biến thể cho sản phẩm
Step Test steps Test data Expected result
Loa Marshall Hệ thống thông báo vui lòng tạo biến thể cho sản phẩm
3 Chọn ảnh sản phẩm test.png
4 Nhập mô tả sản phẩm
Test Case ID: ADDPRODUCT_02 Test Designed by: Hoàng Nhất Vũ
Precondition: Đã đăng nhập với quyển quản trị viên
PostCondition: Thông báo cho người dùng thêm sản phẩm thành công
Step Test steps Test data Expected result
Loa Marshall Hệ thống thông báo
Loa thêm sản phẩm thành công
3 Chọn ảnh sản phẩm test.png
4 Nhập mô tả sản phẩm
9 Nhập số lượng cho biến thể
Test Case ID: SIGNUP_01 Test Designed by: Hoàng Nhất Vũ
PostCondition: Thông báo cho người dùng lỗi email và password không hợp lệ
CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
Step Test steps Test data Expected result
Hệ thống báo lỗi email và password không hợp lệ
Test Case ID: SIGNUP_02 Test Designed by: Hoàng Nhất Vũ
PostCondition: Thông báo cho người dùng email đã tồn tại
Step Test steps Test data Expected result
Hệ thống thông báo email đã tồn tại
Test Case ID: SIGNUP_03 Test Designed by: Hoàng Nhất Vũ
PostCondition: Tạo tài khoản, thông báo cho người dùng xác nhận tài khoản, mở màn hình xác nhận tài khoản
Step Test steps Test data Expected result
Hệ thống thông báo vui lòng xác nhận tài khoản, mở màn hình xác nhận tài khoản
