CHƯƠNG 5. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.2. Giao diện phân hệ khách hàng
Hình 5.35. Giao diện trang Đăng nhập Customer
159
Bảng 5.34. Mô tả giao diện trang Đăng nhập Customer
STT Tên Loại Ghi chú
1 Username Input text Nhập username
2 Password Password Nhập mật khẩu
3 Show password Button Nút hiển thị mật khẩu đã nhập
4 Login Button Button Nút đăng nhập
5 Register Button Button Nút đăng ký
6 Login with Google Button Nút đăng nhập bằng tài khoản Google
5.2.1. Giao diện trang Đăng ký
Hình 5.36. Giao diện trang Đăng ký Bảng 5.35. Mô tả giao diện trang Đăng ký
STT Tên Loại Ghi chú
1 Nhập fullname Input text Nhập thông tin fullname 2 Nhập username Input text Nhập thông tin username 3 Chọn gender Radio button Chọn giới tính
4 Nhập email Email Nhập thông tin email 5 Nhập mật khẩu Password Nhập thông tin password
6 Nhập lại mật khẩu Password Nhập thông tin confirm password 7 Nhấn đăng ký Button Đăng ký tài khoản mới
160
8 Sign in Link text Khi nhấn vào sẽ sang trang đăng nhập
5.2.2. Giao diện Trang chủ khách hàng
Hình 5.37. Giao diện trang chủ khách hàng
Hình 5.38. Giao diện trang chủ khách hàng
161
Hình 5.39. Giao diện trang chủ khách hàng Bảng 5.36. Mô tả giao diện trang Đăng ký
STT Tên Loại Ghi chú
1 Logo Image Khi nhấn vào sẽ về trang home
2 Image search Image Khi nhấn vào sẽ upload image để tìm kiếm 3 Text search Input text Nhập từ khoá cần tìm kiếm
4 Giỏ hàng Button Khi nhấn vào sẽ sang trang giỏ hàng 5 Thông báo Button Khi nhấn vào sẽ sang trang thông báo 6 Log in Link text Khi nhấn vào sẽ sang trang đăng nhập 7 Sign up Link text Khi nhấn vào sẽ sang trang đăng ký 8 Thanh menu Navbar Khi nhấn vào sẽ sang trang đăng nhập 9 Banner sản phẩm Slider
10 Detail Button Khi nhấn vào sẽ chuyển sang xem sản phẩm
11 Buy now Button Khi nhấn vào sẽ mua ngay sản phẩm 12 Sản phẩm mới List
13 Sản phẩm bán chạy
List
14 Sản phẩm có nhiều lượt xem
List
162 15 Sản phẩm được
gợi ý
List
5.2.3. Giao diện Trang cá nhân
Hình 5.40. Giao diện Trang cá nhân Bảng 5.37. Mô tả giao diện Trang cá nhân
STT Tên Loại Ghi chú
1 Thanh menu Menu
2 Thông tin cá nhân Widget
5.2.4. Giao diện trang Quản lý hạng cá nhân
Hình 5.41. Giao diện trang Quản lý hạng cá nhân Bảng 5.38. Mô tả giao diện trang Quản lý hạng cá nhân
STT Tên Loại Ghi chú
163
1 Thanh menu Menu
2 Thông tin hạng cá nhân Widget 5.2.5. Giao diện trang Quản lý Địa chỉ
Hình 5.42. Giao diện trang Quản lý địa chỉ Bảng 5.39. Mô tả giao diện trang Quản lý địa chỉ
STT Tên Loại Ghi chú
1 Thanh menu Menu
2 Danh sách thông tin địa chỉ List 5.2.6. Giao diện trang Đổi mật khẩu
Hình 5.43. Giao diện trang Đổi mật khẩu Bảng 5.40. Mô tả giao diện trang Đổi mật khẩu
STT Tên Loại Ghi chú
164
1 Thanh menu Menu
2 Thông tin đổi mật khẩu Widget 5.2.7. Giao diện trang Xem voucher
Hình 5.44. Giao diện trang Xem voucher Bảng 5.41. Mô tả giao diện trang Xem voucher
STT Tên Loại Ghi chú
1 Thanh menu Menu
2 Thông tin voucher Widget 5.2.8. Giao diện trang Lịch sử đơn hàng
Hình 5.45. Giao diện trang Lịch sử đơn hàng Bảng 5.42. Mô tả giao diện trang Lịch sử đơn hàng
STT Tên Loại Ghi chú
165
1 All Tab Khi nhấn vào sẽ chuyển sang tab All
1.1 Confirming Tab Khi nhấn vào sẽ chuyển sang tab Confirming
1.2 Paying Tab Khi nhấn vào sẽ chuyển sang tab Paying
1.3 Sending Tab Khi nhấn vào sẽ chuyển sang tab Sending
1.4 Delivering Tab Khi nhấn vào sẽ chuyển sang tab Delivering
1.5 Delivered Tab Khi nhấn vào sẽ chuyển sang tab Delivered
1.6 Completed Tab Khi nhấn vào sẽ chuyển sang tab Completed
1.7 Cancelled Tab Khi nhấn vào sẽ chuyển sang tab Cancelled
2 Mã đơn hàng Text
3 Thông tin chi tiết sản phẩm Widget 4 Tổng giá trị đơn hàng Text
5 Detail Button Nhấn để xem chi tiết đơn hàng
5.2.9. Giao diện trang Đánh giá sản phẩm
Hình 5.46. Giao diện trang Đánh giá sản phẩm
166
Bảng 5.43. Mô tả giao diện trang Đánh giá sản phẩm
STT Tên Loại Ghi chú
1 Thông tin sản phẩm Widget 2 Thông tin đánh giá sản phẩm Widget 5.2.10. Giao diện trang Chi tiết đơn hàng
Hình 5.47. Giao diện trang Chi tiết đơn hàng Bảng 5.44. Mô tả giao diện trang Chi tiết đơn hàng
STT Tên Loại Ghi chú
1 Thông tin sản phẩm Widget 2 Thông tin đánh giá sản phẩm Widget
167 5.2.11. Giao diện trang Danh sách sản phẩm
Hình 5.48. Giao diện trang Danh sách sản phẩm
Hình 5.49. Giao diện trang Danh sách sản phẩm Bảng 5.45. Mô tả giao diện trang Danh sách sản phẩm
STT Tên Loại Ghi chú
1 Price Slider
2 Rating Rating
3 Pagination Pagination
168 5.2.12. Giao diện trang Chi tiết sản phẩm
Hình 5.50. Giao diện trang Chi tiết sản phẩm
Hình 5.51. Giao diện trang Chi tiết sản phẩm
169
Hình 5.52. Giao diện trang Chi tiết sản phẩm
Hình 5.53. Giao diện trang Chi tiết sản phẩm Bảng 5.46. Mô tả giao diện trang Chi tiết sản phẩm
STT Tên Loại Ghi chú
1 Ảnh sản phẩm Image 2 Tên sản phẩm Text
3 Đánh giá Rating
4 Lượt xem Text
5 Lượt bán Text
6 Yêu thích Button
170
7 Giá gốc Text
8 Giá hiện tại Text
9 Discount Text
10 Thuộc tính Variation
11 Số lượng Number Nhập số lượng sản phẩm cần mua
12 Nút mua Button Nhấp vào để thêm sản phẩm vào giỏ hàng 13 Nút mua ngay Button Nhấp vào để thêm sản phẩm vào giỏ hàng và
chuyển sang trang Giỏ hàng
14 Mô tả Text
15.1 All Tab
15.2 5 stars Tab
15.3 4 stars Tab
15.4 3 stars Tab
15.5 2 stars Tab
15.6 1 star Tab
15.7 Comment with images
Tab
16 Đánh giá của khách hàng
Widget
17 Sản phẩm đề xuất List 18 Sản phẩm cùng
loại
List
19 Sản phẩm đã xem List
171 5.2.13. Giao diện trang Sản phẩm yêu thích
Hình 5.54. Giao diện trang Sản phẩm yêu thích Bảng 5.47. Mô tả giao diện trang Sản phẩm yêu thích
STT Tên Loại Ghi chú
1 Hình ảnh sản phẩm Image
2 Thông tin sản phẩm Text
3 Xoá sản phẩm yêu thích Button Nhấn vào để xoá sản phẩm khỏi danh sách yêu thích
5.2.14. Giao diện trang Sản phẩm đã xem
Hình 5.55. Giao diện trang Sản phẩm đã xem Bảng 5.48. Mô tả giao diện trang Sản phẩm đã xem
STT Tên Loại Ghi chú
1 Hình ảnh sản phẩm Image
172
2 Thông tin sản phẩm Text
5.2.15. Giao diện trang Sản phẩm bán chạy
Hình 5.56. Giao diện trang Sản phẩm bán chạy Bảng 5.49. Mô tả giao diện trang Sản phẩm bán chạy
STT Tên Loại Ghi chú
1 Hình ảnh sản phẩm Image
2 Thông tin sản phẩm Text
5.2.16. Giao diện trang Sản phẩm mới
Hình 5.57. Giao diện trang Sản phẩm mới Bảng 5.50. Mô tả giao diện trang Sản phẩm mới
STT Tên Loại Ghi chú
173
1 Hình ảnh sản phẩm Image
2 Thông tin sản phẩm Text
5.2.17. Giao diện trang Sản phẩm khuyến mãi
Hình 5.58. Giao diện trang Sản phẩm khuyến mãi Bảng 5.51. Mô tả giao diện trang Sản phẩm khuyến mãi
STT Tên Loại Ghi chú
1 Hình ảnh sản phẩm Image
2 Thông tin sản phẩm Text
5.2.18. Giao diện trang Kết quả tìm kiếm bằng hình ảnh
Hình 5.59. Giao diện trang Kết quả tìm kiếm bằng hình ảnh
174
Bảng 5.52. Mô tả giao diện trang Kết quả tìm kiếm bằng hình ảnh
STT Tên Loại Ghi chú
1 Thông tin sản phẩm List
5.2.19. Giao diện trang Kết quả tìm kiếm bằng từ khoá
Hình 5.60. Giao diện trang Kết quả tìm kiếm bằng từ khoá Bảng 5.53. Mô tả giao diện trang Kết quả tìm kiếm bằng từ khoá
STT Tên Loại Ghi chú
1 Searchbar Input text Khung nhập từ khoá tìm kiếm
2 Price Slider
3 Rating Rating
175 5.2.20. Giao diện trang Thông báo
Hình 5.61. Giao diện trang Thông báo Bảng 5.54. Mô tả giao diện trang Thông báo
STT Tên Loại Ghi chú
1.1 All Tab Tất cả thông báo
1.2 Unread Tab Thông báo chưa đọc
1.3 Read Tab Thông báo đã đọc
2 Thông báo List
5.2.21. Giao diện trang Giỏ hàng
Hình 5.62. Giao diện trang Giỏ hàng
176
Bảng 5.55. Mô tả giao diện trang Giỏ hàng
STT Tên Loại Ghi chú
1 Hình ảnh sản phẩm Image
2 Tên sản phẩm Text
3 Thuộc tính sản phẩm Variation
4 Giá gốc Text
5 Giá hiện tại Text
6 Số lượng Number
7 Tổng tiền tạm tính Text
8 Nút xoá sản phẩm Button Nhấn vào để xoá sản phẩm ra khỏi giỏ hàng
9 Pagination Pagination
10 Page size Text
11 Nút Order Button Nhấn vào để chuyển sang tranh Thanh toán
5.2.22. Giao diện trang Thanh toán
Hình 5.63. Giao diện trang Thanh toán
177
Hình 5.64. Giao diện trang Thanh toán Bảng 5.56. Mô tả giao diện trang Thanh toán
STT Tên Loại Ghi chú
1 Thông tin giao hàng Datagrid
2 Tên sản phẩm Text
3 Thuộc tính sản phẩm Variation 4 Giá tiền mỗi sản phẩm Text
5 Số lượng Number
6 Tổng tiền tạm tính Text Tổng tiền của mỗi món hàng tương ứng với số lượng
7 Tổng tiền Text Tổng tiền của đơn hàng
8 Ghi chú Input text
9 Change address Button Nhấn vào để thay đổi địa chỉ giao hàng 10 Shipping Unit Text Phí giao hàng
11 Choose Voucher Button Nhấn vào để chọn mã khuyến mãi 12 Phương thức thanh toán Ratio
13 Product Price Text Tổng giá tiền của sản phẩm
14 Customer Discount Text Số tiền khách hàng được giảm giá 15 Shipping Fee Text Phí vận chuyển
16 Total Payment Text Tổng tiền phải trả
17 Nút Order Button Nhấn vào để tiến hành đặt hàng
178 5.2.23. Giao diện Chatbot
Hình 5.65. Giao diện Chatbot Bảng 5.57. Mô tả giao diện Chatbot
STT Tên Loại Ghi chú
1 Khung chat Input text
179
CHƯƠNG 6. CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG 6.1. Cài đặt và triển khai hệ thống
Hệ thống được triển khai tại:
+ Hệ thống dành cho khách hàng: http://h2store.xyz/.
+ Hệ thống dành cho quản lý cửa hàng: http://admin.h2store.xyz/.
+ Hệ thống backend: http://be.h2store.xyz/swagger-ui/index.html/.
6.1.1. Cài đặt 6.1.1.1. Backend
Yêu cầu phần mềm:
+ MySQL Server 8.0.29.
+ MongoDB Server 6.0.5.
+ JDK 17.
+ Python 3.11.
+ Nếu chạy project từ source code: Spring Tool Suite 4 (hoặc Eclipse), Apache Maven.
Các bước thiết lập:
+ Cấu hình kết nối database MySQL tại h2-store-be/applications.properties trong thư mục /src/main/resources:
o spring.datasource.url: cấu hình địa chỉ và cổng kết nối đến MySQL Server.
o spring.datasource.username: cấu hình username của database.
o spring.datasource.password: cấu hình password của database.
+ Cấu hình giao tiếp với Frontend tại h2-store-be/applications.properties trong thư mục /src/main/resources:
o com.h2store.h2storebe.security.oauth2.fe-login-url: Cấu hình địa chỉ trả về kết quả đăng nhập bằng Google từ Backend cho Frontend.
o com.h2store.h2storebe.service.payment.return-url: Cấu hình địa chỉ trả về kết quả thanh toán online từ Backend cho Frontend.
+ Thiết lập dữ liệu mẫu cho Backend tại database bằng cách chạy tệp sinh dữ liệu default-mysql-data/data.sql tại thư mục backend để tạo dữ liệu mẫu.
+ Chạy lệnh “pip install -r requirements.txt” trong thư mục h2-store-ai-service.
180
+ Khởi động h2-store-ai-service bằng lệnh “python -m h2_store_ai_service.index” trong thư mục h2-store-ai-service và phải gán các biến môi trường để microservice hoạt động:
o MYSQL_HOSTNAME: địa chỉ của MySQL Server (mặc định là localhost).
o MYSQL_PORT: port của MySQL Server (mặc định là 3306).
o MYSQL_DB_NAME MONGO_DB_NAME,: tên database schema của MySQL và MongoDB mà h2-store-be sử dụng.
o MYSQL_USER, MYSQL_PASS: thông tin xác thực MySQL Server.
o MONGO_URI: URI kết nối với MongoDB.
+ Khởi động h2-store-be bằng file jar (java -Dfile.encoding=UTF-8 -jar h2- store-be-1.0.jar --spring.config.location=application.properties) hoặc từ source code.
6.1.1.2. Frontend
Yêu cầu phần mềm:
+ Visual Studio Code + Nodejs
+ Reactjs ver17 trở lên Các bước cài đặt:
+ Tải source code h2store từ nguồn https://github.com/ttmh2k1/h2store và lưu vào thư mục h2store trong thư mục source_code.
+ Tải source code h2admin từ nguồn https://github.com/ttmh2k1/h2amdin và lưu vào thư mục h2admin trong thư mục source_code.
+ Mở h2store và h2admin bằng Visual Studio Code.
+ Mở terminal trong Visual Studio Code.
+ Chạy lệnh “npm i” hoặc “yarn i” để cài đặt các package.
+ Chạy lệnh “npm start” hoặc “yarn start” để run project.
6.1.2. Triển khai
Yêu cầu: Docker và Docker Compose.
Nếu có thay đổi port của h2store và h2-store-be thì phải cập nhật cả ở file .env chung thư mục với docker-compose.yml.
Tại thư mục gốc source_code chứa docker-compose.yml chạy lệnh “docker compose up -d” và đợi hệ thống khởi động hoàn toàn là đã có thể sử dụng.
181 6.2. Kiểm thử hệ thống
6.2.1. Các chức năng quản lý tài khoản
Bảng 6.1. Thông tin và kết quả kiểm thử các chức năng quản lý tài khoản
TT Testcase Kết quả mong đợi Kết
quả
1 Chức năng đăng nhập Đăng nhập thành công, đúng phân quyền Pass
2 Chức năng đăng ký Đăng ký thành công Pass
3 Xác thực email
Sau khi người dùng nhấn vào đường dẫn trong email xác thực thì có thể đăng nhập vào ứng dụng
Pass
4 Đổi mật khẩu Đổi mật khẩu thành công sau khi người xác thực
OTP thông qua email hoặc số điện thoại Pass
5 Quên mật khẩu
Gửi xác thực OTP thông qua email hoặc số điện thoại đã đăng ký.
Xác thực OTP thành công và cài đặt mật khẩu mới.
Có thể đăng nhập bằng mật khẩu mới.
Pass
6 Đổi thông tin cá nhân Thông tin cá nhân của người dùng thay đổi
thành công Pass
6.2.2. Các chức năng quản lý đơn hàng, giỏ hàng
Bảng 6.2. Thông tin và kết quả kiểm thử các chức năng quản lý đơn hàng, giỏ hàng
TT Testcase Kết quả mong đợi Kết
quả
1 Thêm sản phẩm vào giỏ hàng
Giỏ hàng được cập nhật sản phẩm mới, tổng tiền
được cập nhật Pass
182 2
Thay đổi số lượng sản phẩm trong giỏ hàng
Số lượng sản phẩm trong giỏ hàng thay đổi tương
ứng Pass
3 Đặt hàng Đặt hàng thành công, xuất hiện đơn hàng ở chức
năng Duyệt đơn hàng Pass
4 Duyệt đơn hàng Duyệt thành công, xuất hiện đơn hàng ở chức năng
Giao hàng Pass
5
Shipper xác nhận giao hàng cho đơn hàng
Xác nhận đang giao hàng thành công, đơn hàng xuất hiện ở trang Danh sách đơn hàng đang giao ở cả giao diện người dùng, Admin và Shipper
Pass
6
Shipper xác nhận giao hàng thành công đơn hàng
Xác nhận đã giao hàng thành công, đơn hàng hoàn thành ở cả giao diện người dùng, Admin và Shipper
Pass
7
Khách hàng đánh giá sản phẩm trong đơn hàng
Đánh giá thành công, đánh giá hiện ở trang chi tiết sản phẩm, lượt đánh giá và điểm đánh giá trung bình được cập nhật thành công
8
Admin/khách hàng hủy đơn hàng đã thanh toán online
Hủy thành công, số tiền đã thanh toán được hoàn
trả thành công. Pass
6.2.3. Các chức năng quản lý nhóm sản phẩm, sản phẩm
Bảng 6.3. Thông tin và kết quả kiểm thử các chức năng quản lý nhóm sản phẩm, sản phẩm
TT Testcase Kết quả mong đợi Kết
quả
1 Thêm sản phẩm Thêm sản phẩm thành công, sản phẩm hiển thị
đúng trên hệ thống khách hàng. Pass
2 Ẩn nhóm sản phẩm Ẩn nhóm sản phẩm thành công. Nhóm sản phẩm
không hiển thị trên hệ thống khách hàng. Pass
183
3 Ẩn sản phẩm Ẩn sản phẩm thành công. Sản phẩm không hiển thị
trên hệ thống khách hàng. Pass
4 Chỉnh sửa nhóm sản phẩm
Chỉnh sửa thông tin nhóm sản phẩm thành công.
Danh mục hiển thị đúng thông tin trên hệ thống khách hàng
Pass
5 Chỉnh sửa sản phẩm
Chỉnh sửa thông tin sản phẩm thành công. Sản phẩm hiển thị đúng thông tin trên hệ thống khách hàng
Pass
6.2.4. Kiểm thử các chức năng mang tính chịu tải cao
Bảng 6.4. Thông tin và kết quả kiểm thử các chức năng mang tính chịu tải cao
TT Testcase Kết quả mong đợi Kết
quả
1
Giả lập 1000 khách hàng cùng thực hiện chức năng đặt hàng có sử dụng mã giảm giá (10000 đơn hàng), xác nhận đơn hàng, xác nhận giao hàng và xác nhận giao thành công (thread pool size = 100)
Hệ thống không xảy ra lỗi.
Các số liệu như số lượng tồn kho của biến thể
sản phẩm, cập nhật giá sản phẩm, số lượng bán ra, số lượt sử dụng mã giảm giá đều đúng như mong đợi, không có tình trạng “RACE CONDITION” (tính toán dữ liệu không còn chính xác, không còn đồng bộ do quá nhiều người dùng cùng thực hiện chức năng).
Pass
2
Giả lập 1000 khách hàng cùng thực hiện đánh giá 10000 đơn hàng (thread pool size = 100)
Hệ thống không xảy ra lỗi.
Các số liệu lượt đánh giá (1-5 sao), điểm đánh giá trung bình đều như dự đoán, các đơn hàng được đánh giá xong đều có trạng thái hoàn thành (COMPLETED).
Pass
184 3
Giả lập tạo 502 sản phẩm cùng lúc (thread pool size = 50)
Hệ thống không xảy ra lỗi.
Các sản phẩm đều được tạo đúng như yêu cầu. Pass
4
Giả lập cùng lúc nhập kho sản phẩm 50 lần (thread pool size = 50)
Hệ thống không xảy ra lỗi.
Thông tin về số lượng tồn kho đúng như tính toán.
Pass
6.2.5. Kiểm thử logic xử lý hệ thống
Bảng 6.5. Thông tin và kết quả kiểm thử logic xử lý hệ thống
TT Testcase Kết quả mong đợi Kết
quả
1
Khóa tài khoản khách hàng khi có đơn hàng đang trong trạng thái xử lý (không phải các trạng thái đã hủy và hoàn thành).
Khi khóa tài khoản sẽ chuyển sang trạng thái chờ khóa và khách hàng có để đăng nhập nhưng chỉ có thể sử dụng chức năng xem danh sách đơn hàng, cập nhật đơn hàng và hủy đơn hàng.
Khi tất cả các đơn hàng đều hoàn tất (trạng thái đã hủy hoặc hoàn thành) lập tức khách hàng không thể đăng nhập vào hệ thống được nữa.
Pass
2
Cập nhật mã giảm giá với loại giảm giá là phần trăm và giá trị lớn hơn 100%
Hệ thống thông báo lỗi không hợp lệ Pass
3
Cập nhật mã giảm giá có mã giảm giá trùng và khoảng thời gian hiệu lực của mã giao với mã giảm giá trùng kia
Hệ thống thông báo lỗi không hợp lệ Pass