1. Screen flow cho web phía khách hàng
1.7. SCP007 User Info screen
Hình 4. 10.Màn hình thông tin khách hàng
No Name Required Type Reference Note
1 Dropdown thông tin người dùng
Button Click chuyển đến màn
hình SCP007 2 Dropdown đơn hàng
của bạn
Button Click chuyển đến màn
hình SCP008 3 Dropdown đổi mật
khẩu
Button Click chuyển đến màn
hình SCP012
4
Dropdown đăng xuất Button Đăng xuất khỏi tài
khoản và chuyển đến màn hình SCP001 5 Sidebar thông tin
người dùng
Button Click chuyển đến màn
hình SCP007 6 Sidebar đơn hàng của
bạn
Button Click chuyển đến màn
hình SCP008
7 Sidebar đổi sổ địa chỉ Button Click chuyển đến màn
hình SCP010
8 Sidebar đổi mật khẩu Button Click chuyển đến màn
9 Tên người dùng tài khoản
True Input
10 Số điện thoại người dùng
True Input
11 Email đăng ký của tài khoản
True Input
12 Ngày tháng năm sinh True Input
13
Cập nhật tài khoản True Checkbox Nếu check và sẽ có
thể sửa thông tin tài khoản
14 Chọn ảnh Avatar True Input
15 Hiển thị ảnh Avatar Image
16
Cập nhật tài khoản Button Sau khi click sẽ hiển
thị thông báo cập nhật thành công nếu đúng các điều kiện sửa đổi.Nếu sai sẽ hiển thị báo lỗi.
Bảng 4. 7. Mô tả SCP007 User info screen 1.8. SCP008 User order screen
No Name Required Type Reference Note
1 Ngày đặt hàng Text Data từ API
2 Tổng tiền dành cho đơn hàng
Text Data từ API
3 Hình thức thanh toán Text Data từ API
4 Trạng thái đơn hàng Text Data từ API
5 Số lượng đơn hàng trên 1 đơn danh sách
Select- Option
6 Hủy đơn hàng Button Click sẽ hiển thị
thông báo hủy đơn hàng và chuyển trạng thái đơn hàng thanh Cancel
7 Chi tiết đơn hàng Button Click chuyển đến
SCP009
Bảng 4. 8. Mô tả SCP008 User order screen 1.9. SCP009 User order info screen
No Name Required Type Reference Note 1 Thông tin người đặt
hàng
Text Data từ API
2 Trạng thái đơn hàng Text Data từ API
3 Chi tiết sản phẩm đặt Text Data từ API
4 Hủy đơn hàng Text Click vào sẽ chuyển
trạng thái đơn hàng thành “Cancelled” và chuyển đến màn hình
SCP008
Bảng 4. 9. Mô tả SCP009 User order info screen 1.10. SCP010 User address manage screen
Hình 4. 13.Màn hình quản lý sổ địa chỉ
No Name Required Type Reference Note
1 Thêm địa chỉ mới Button Click sẽ chuyển đến
màn hình SCP011 2 Tên người nhập địa
chỉ
Text Data từ API
3 Trạng thái đặt làm địa chỉ mặc định
4 Địa chỉ Text Data từ API
5 Số điện thoại Text Data từ API
6 Chỉnh sửa thông tin Button Click vào chuyển đến
màn hình chỉnh sửa cấu trúc giống màn hình SCP011
7 Xóa địa chỉ Button Click vào xóa đi địa
chỉ đã chọn
Bảng 4. 10. Mô tả SCP010 User address manage screen 1.11. SCP011 User address add screen
Hình 4. 14.Màn hình thêm địa chỉ mới
No Name Required Type Reference Note
1 Họ và tên True Text
2 Số điện thoại True Text
3 Thành phố True Select-
Option
4 Quận huyện True Select-
Option
5 Phường xã True Select-
6 Địa chỉ True Text Gồm số nhà , tên đường và một số chi tiết khác
7 Chọn làm địa chỉ mặc định
True Checkbox Click vào để đặt làm
địa chỉ mặc định
8 Thêm địa chỉ Button Click vào để thêm địa
chỉ mới thành công sẽ thông báo thành công và chuyển đến màn hình SCP010. Nếu có lỗi sẽ báo lỗi ở nơi sai.
9 Hủy thêm địa chỉ Button Chuyển đến màn hình
SC010
Bảng 4. 11. Mô tả SCP011 User address add screen 1.12. SCP012 Change password screen
No Name Required Type Reference Note
1 Mật khẩu cũ True Text
2 Mật khẩu mới True Text
3 Đổi mật khẩu Button Click vào khi thành
công sẽ hiển thị thông báo thành công. Thất bại sẽ hiển thị thông báo lỗi
Bảng 4. 12. Mô tả SCP012 Change password
2. Srceen flow cho web phía admin
1.1. SAP001 Login admin screen
No Name Required Type Reference Note
1 Tài khoản đăng nhập True Input
2 Mật khẩu True Input Hiển thị dưới dạng
“******”
3 Đăng nhập Button Khi click sẽ xác nhận
người dùng, đồng thời vào trang mà hình SAP002
Bảng 4. 13. Mô tả SAP001 Login admin screen 1.2 SAP002 Dashboard screen
Hình 4.2. 2.Màn hình dashboard
No Name Required Type Reference Note
1 Wellcome “Name” DropDown Data từ API
2 Bài viết Button Khi click, chuyển đến
màn hình SAP003
3 Sản phẩm Button Khi click, chuyển đến
màn hình SAP005
4 Màu Button Khi click, chuyển đến
5 Thương hiệu Button Khi click, chuyển đến màn hình SAP008
6 Danh mục Button Khi click, chuyển đến
màn hình SAP009
7 Kích thước Button Khi click, chuyển đến
màn hình SAP0010
8 Đơn hàng Button Khi click, chuyển đến
màn hình SAP0011
9 Tài khoản Button Khi click, chuyển đến
màn hình SAP0012
10 Đánh giá sản phẩm Button Khi click, chuyển đến
màn hình SAP0013
11 Doanh thu Button Khi click, chuyển đến
màn hình SAP0014
Bảng 4. 14. Mô tả SAP002 Dashboard screen 1.3. SAP003 Post Management screen
No Name Required Type Reference Note 1 Filter bài viết theo tên true Input
2 Thêm bài viết Button Khi click, chuyển đến
màn hình SAP007 3 Chọn số lượng bài
viết hiển thị trên 1 trang của bảng
Select- option
4 Số thư tự bài viết Text
5 Tiêu đề bài viết Text Data từ API
6 Ngày đăng bài viết Text Data từ API
7 Trạng thái hiển thị bài viết
Text Data từ API
8 Đăng bài viết Button Khi click thay đổi
trạng thái đăng bài viết từ false thành true
9 Gỡ bài viết Button Khi click thay đổi
trạng thái đăng bài viết từ true thành false
10 Xóa bài viết Button Khi click xóa bài viết
11 Sửa bài viết Button Khi click, chuyển đến
màn hình SAP004
12 Chi tiết bài viết Button Khi click, chuyển đến
màn hình SAP004
1.4. SAP004 Post Add/Post Edit/Post Detail screen
Hình 4.2. 4.Màn hình thêm bài viết 1
No Name Required Type Reference Note
1 Tiêu đề bài viết True Input
2 Mô tả bài viết True Input
3 Ảnh đại diện bài viết True Image- Upload
4 Nội dung bài viết True Input
5 Hiển thị bài viết True Checkbox Click để chọn trạng
thái có hiển thị bài viết hay không
6 Lưu Button Click tạo data trong
database và chuyển về màn hình SAP003
7 Hủy Button Khi click, chuyển đến
màn hình SAP003
Bảng 4. 16. Mô tả SAP004 Post Add/Post Edit/ Post detail screen 1.5. SAP005 Product Management screen
No Name Required Type Reference Note
1 Thêm sản phẩm Button Khi click, chuyển đến
màn hình SAP006
2 Tên sản phẩm Text Data từ API
3 Giá sản phẩm Text Data từ API
4 Thương hiệu sản phẩm
Text Data từ API
5 Danh mục sản phẩm Text Data từ API
6 Chi tiết sản phẩm theo màu
List Data từ API
7 Màu sản phẩm Text Data từ API
8 Kích thước sản phẩm theo màu
Text Data từ API
9 Số lượng sản phẩm Text Data từ API
10 Xóa sản phẩm Button
11 Sửa sản phẩm Button Khi click, chuyển đến
màn hình SAP006
12 Ẩn chi tiết sản phẩm Button Click ẩn thông tin chi
tiết sản phẩm 13 Hiện chi tiết sản
phẩm
Button Click hiện thông tin
chi tiết sản phẩm
1.6. SAP006 Product Add/Edit
No Name Required Type Reference Note
1 Tên sản phẩm True Input
2 Giá True Input
3 Danh mục True Select-
option
Data từ API
4 Thương hiệu True Select-
option
Data từ API
5 Mô tả sản phẩm True Input
6 Màu sản phẩm True Select-
option
Data từ API
7 Kích thước sản phẩm True Select- option
Data từ API
8 Số lượng sản phẩm True Input
9 Xóa kích thước sản phẩm khỏi màu sản phẩm Button 10 Thêm kích thước sản phẩm vào màu sản phẩm Button 11 Ảnh sản phẩm theo màu True Image- upload 12 Loại bỏ màu sản phẩm Button
13 Thêm màu sản phẩm Button
14 Lưu Button Click tạo data trong
database và chuyển về màn hình SAP005
15 Hủy Button Khi click, chuyển đến
màn hình SAP005
1.7. SAP007 Color Management screen
Hình 4.2. 8.Màn hình quản lý màu
No Name Required Type Reference Note
1 Số thứ tự màu Text
2 Tên màu Text Data từ API
3 Xóa màu Button
4 Thêm màu mới Button Click sẽ mở modal
nhập màu mới
5 Tên màu mới True Input
6 Save Button Click sẽ lưu dữ liều
và data và đóng modal
7 Close Button Click đóng modal
Bảng 4. 19. Mô tả SAP007 Color management screen 1.8. SAP008 Brand Management screen
Hình 4.2. 11.Màn hình thên thương hiệu
No Name Required Type Reference Note
1 Số thứ tự thương hiệu Text
2 Tên thương hiệu Text Data từ API
3 Xóa thương hiệu Button
4 Thêm thương hiệu mới
Button Click sẽ mở modal
nhập thương hiệu mới
5 Tên thương hiệu mới True Input
6 Save Button Click sẽ lưu dữ liều
và data và đóng modal
7 Close Button Click đóng modal
1.9. SAP009 Category Management screen
Hình 4.2. 12.Màn hình quản lý danh mục
No Name Required Type Reference Note
1 Số thứ tự danh mục Text
2 Tên danh mục Text Data từ API
3 Giới tính của danh mục
Text Data từ API
4 Xóa danh mục Button
5 Thêm danh mục mới Button Click sẽ mở modal
nhập danh mục mới 6 Nhập tên danh mục mới True Input 7 Chọn giới tính mà danh mục nhắm vào True Select- option
8 Save Button Click sẽ lưu dữ liều
và data và đóng modal
9 Close Button Click đóng modal
Bảng 4. 21. Mô tả SAP009 Category management screen 1.10. SAP010 Size Management screen
Hình 4.2. 15.Màn hình thêm kích thước
No Name Required Type Reference Note
1 Số thứ tự kích thước Text
2 Tên kích thước Text Data từ API
3 Xóa kích thước Button
4 Thêm kích thước mới Button Click sẽ mở modal
nhập kích thước mới
5 Tên kích thước mới True Input
6 Save Button Click sẽ lưu dữ liều
và data và đóng modal
7 Close Button Click đóng modal
1.11. SAP011 Order Management screen
Hình 4.2. 16.Màn hình quản lý đơn hàng
No Name Required Type Reference Note
1 Ngày đặt hàng Text Data từ API
2 Tổng tiền của đơn hàng
Text Data từ API
3 Trạng thái đơn hàng Text Data từ API
4 Chấp thuận đơn hàng Button Click sẽ thay đổi
trạng thái đơn hàng thành “Delivering”
5 Từ chối đơn hàng Button Click sẽ thay đổi
trạng thái đơn hàng thành “Cancelled”
7 Thông tin người đặt hàng
Form Data từ API
8 Ảnh sản phẩm Image Data từ API
9 Thông tin về sản phẩm
Text Data từ API
10 Đơn giá sản phẩm Text Data từ API
11 Số lượng sản phẩm Text Data từ API
12 Tổng giá thành 1 sản phẩm dựa trên số lượng
Text Data từ API
14 Ẩn chi tiết đơn hàng Button
Bảng 4. 23. Mô tả SAP011 Order management 1.12. SAP012 Account Management
No Name Required Type Reference Note
1 Tên tài khoản Text Data từ API
2 Ngày tạo tài khoản Text Data từ API
3 Vài trò của tài khoản Text Data từ API
4 Ngày online gần đây Text Data từ API
5 Số giờ online Text Data từ API
6 Loại tài khoản Text Data từ API Còn có loại tài khoản
Facebook, Google
7 Tình trạng tài khoản Label Data từ API
8 Khóa tài khoản Button
Bảng 4. 24. Mô tả SAP012 Account management 1.13. SAP013 Rating Management screen
No Name Required Type Reference Note
1 Tên danh mục Text
2 Danh mục số lượng theo sao
Text
3 Danh sách sản phẩm phân loại theo sao
Table Data từ API
4 Nút ẩn hiện comment Button
5 Nút xóa comment Button
Bảng 4. 25. Mô tả SAP012 Rating Management Screen 1.14. SAP014 Revenue Management screen
No Name Required Type Reference Note
1 Tên danh mục Text
2 Đơn hàng và doanh thu trong ngày
Text Data từ API
3 Đơn hàng bị hủy trong ngày
Text Data từ API
4 Tỉ lệ doanh thu so với hôm qua
Text Data từ API
5 Tổng doanh thu Text Data từ API Thông số hiện theo
option (6) người dùng chọn
6 Option chọn để thống kê (theo ngày, theo tuần, theo tháng)
Button
7 Biểu đồ thể hiện doanh thu
Chart Data từ API Thông số hiện theo option (6) người dùng chọn
CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ
1. Cài đặt ứng dụng
❖ Máy phải có cài đặt npm ❖ Máy có cài đặt NodeJS ❖ Máy phải cài đặt SQL server
❖ Máy phải cài đặt trước Visual Studio Các bước cài đặt:
Ở bài hướng dẫn này, nhóm sử dụng IDE là Visual Studio Code:
Bước 1: Clone hoặc download project từ link github:
https://github.com/Thanhnhan77620/Khoa-Luan-Tot-Nghiep.git
Bước 2:
Một thư mục có tên là “Khoa-Luan-Tot-Nghiep” sẽ xuất hiện sau khi clone project từ github hoặc giải nén file đính kèm báo cáo. Tiến hành vào thư mục “Khoa-Luan-Tot-Nghiep”
Bước 3:
Sau khi vào được thư mục “Khoa-Luan-Tot-Nghiep” (như hình), Tiến vào thư mục “Reference” và mở file “SQLQuery.sql” để cài đặt database SQL
Hình 5. 2. Thư mục reference
Bước 4: Mở thư mục “Shop-Shose-FE-Client” chúng ta click chuột phải chọn “Open with
Code” để tiến hành cài đặt trang web bên khách hàng. Mở thư mục “Shop-Shose-FE-Manage” click chuột phải chọn “Open with Code” để tiến hành cài đặt trang web bên admin:
Hình 5. 3. Mở front-end bằng visual code
Bước 5: Sau khi mở được project bằng Visual Studio Code, chọn “Terminal” trên thanh
Hình 5. 4. Giao diện visual studio code
Bước 6: Sau khi cửa sổ Command Line tích hợp hiện ra, chạy lệnh “yarn install” (bên manager
front-end sử dụng “npm install”) để cập nhật những thư viện, package còn thiếu trên máy mà Project cần
Bước 7: Sau khi lệnh npm install kết thúc, mở thêm một cửa sổ Command Line nữa bằng cách
nhấn vào nút “Split Terminal” trên thanh taskbar của cửa sổ Command Line. Tạm dừng bên front end chúng ta vào thư mục “Shop-Shose-BE” để khỏi động backend. Nhấn chọn file “Shop-Shose-BE.sln”.
Hình 5. 6. Thư mục back-end
Bước 8: Sau màn hình visual studio hiện lên chúng ta nhấn vào nút khỏi chạy sau đây để khỏi
chạy back-end.
Bước 9: Sau khi nhấn chạy back-end sẽ hiển thị terminal như sau:
Hình 5. 8. Khởi động back-end
Bước 10: Sau khi chạy back-end chúng ta trở về màn hình front-end và tiến khởi màn hình
front end mà chúng ta muốn chạy ở đây là màn hình khác hàng (client). Bằng các gõ lệnh “npm start” vào terminal. Nhấn enter để chạy lệnh:
Bước 11: Terminal cùng hiện ra như hình và trình duyệt web sẽ tự động chạy trang web lên.
Hoặc có thể chạy tay bằng cách mở trình duyệt web và nhập url: https://localhost:3006/
Hình 5. 10. Kết quả chạy thành công React
2. Kiểm thử phần mềm
Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu.
2.1 Chức năng đăng ký
ID Test Case
Description Test steps Expected Output Result
SignUp_001 Đăng ký tài khoản user
1. Nhập các thông tin yêu cầu trên màn hình: địa chỉ Email, Tên đầy đủ, Mật khẩu và xác nhận mật khẩu 2. Nhấn nút Đăng ký
Đăng ký thành công thông báo thành công và đóng Modal đăng ký
Pass
SignUp_002 Kiểm tra bỏ trống những trường đánh dấu sao 1. Bỏ trống các trường đánh dấu