50
3.6.8. Thêm vào u thích
Hình 3. 16 DFD Thêm vào danh sách hàng hóa u thích 3.6.9. Tăng giảm số lượng hàng hóa
51
3.6.10. Check hóa đơn
Hình 3. 18 DFD Check hóa đơn 3.6.11. Kiểm tra hóa đơn đã hồn thành 3.6.11. Kiểm tra hóa đơn đã hồn thành
52
3.6.12. Thêm hóa hàng
Hình 3. 20 DFD Thêm hàng hóa 3.6.13. Cập nhật hàng hóa 3.6.13. Cập nhật hàng hóa
53
3.6.14. Xóa hàng hóa
Hình 3. 22 DFD Xóa hàng hóa 3.6.15. Thêm nhân viên 3.6.15. Thêm nhân viên
54
3.6.16. Đổi mật khẩu
Hình 3. 24 DFD Đổi mật khẩu
3.7. Giải pháp
- Sử dụng PostgresSQL để mang đến sự liên kết chặt chẽ giữa các entries - Sử dụng Redux Toolkit để tối ưu tương tác giữa các components
- Lưu ảnh bằng Cloudinary, xử lý thao tác upload ở server-side để tăng tính bảo mật và logic
- Sử dụng MUI để xây dựng UI
55
Chương 4:
THIẾT KẾ TEMPLATE
4.1. Phác thảo layout Website:
56
Hình 4. 1 Home Page Layout 4.1.2.Sign In Page 4.1.2.Sign In Page
57
4.1.3.Sign Up Page
Hình 4. 3 Sign Up Page Layout 4.1.4.Guest Cart Page 4.1.4.Guest Cart Page
58
4.1.5.Display Product Page
Hình 4. 5 Display Product Page Layout
60
Hình 4. 6 Detail Product Page Layout
4.1.7.Product Manager Page
Hình 4. 7 Product Manager Page Layout
61
Hình 4. 8 Staff Manager Page Layout
4.1.9.Add Product Page
Hình 4. 9 Add Product Page Layout 4.1.10.Edit Product Page 4.1.10.Edit Product Page
62
Hình 4. 10 Edit Product Page Layout
63
Hình 4. 11 Drawer Layout 4.1.12.Stock Manager Page 4.1.12.Stock Manager Page
Hình 4. 12 Stock Manager Page Layout
64
Hình 4. 13 Add Stock Modal Layout 4.1.14. Revenue Page 4.1.14. Revenue Page
Hình 4. 14 Revenue Page Layout 4.1.15. Data Analysis Page 4.1.15. Data Analysis Page
65
4.1.16.Detail Product Modal
66
4.1.17. Add Manager Page
Hình 4. 17 Add Manager Page Layout 4.1.18.My Place Page 4.1.18.My Place Page
67
4.1.19.My Cart Page
Hình 4. 19 My Cart Page Layout
4.1.20. My Order Page
68
4.1.21.My Favorite Page
Hình 4. 21 My Favorite Page Layout 4.1.22.Pre-Access To Profile Page 4.1.22.Pre-Access To Profile Page
69
4.1.23.Profile Page
Hình 4. 23 Profile Page Layout
4.1.24.Checkout Now Page
70
4.1.25.Payment Page
Hình 4. 25 Payment Page
4.2.Giao diện Template:
72
Hình 4. 26 Home Page Template
73
Hình 4. 27 Sign In Page Template 4.2.3.Sign Up Page
Hình 4. 28 Sign Up Page Template
74
Hình 4. 29 Guest Cart Page Template 4.2.5.Display Product Page
75
76
Hình 4. 31 Detail Product Page Template 4.2.7.Product Manager Page
Hình 4. 32 Product Manager Page Template
4.2.8.Staff Manager Page
77
4.2.9.Add Product Page
Hình 4. 34 Add Product Page Template
78
Hình 4. 35 Edit Product Page Template
4.2.11.Drawer
79
4.2.12. Stock Manager Page
Hình 4. 37 Stock Manager Page Template 4.2.13. Add Stock Modal
Hình 4. 38 Add Stock Modal Template 4.2.14. Revenue Page
80
4.2.15. Data Analysis Page
Hình 4. 40 Data Analysis Page Template
4.2.16. Detail Product Modal
81
4.2.17. Add Manager Page
Hình 4. 42 Add Manager Page Template 4.2.18. My Place Page
Hình 4. 43 My Place Page Template 4.2.19. My Cart Page
82
Hình 4. 44 My Cart Page Template 4.2.20. My Orders Page
Hình 4. 45 My Orders Page Template
83
Hình 4. 46 My Favorite Page Template
4.2.22. Pre-Access To Profile Page
Hình 4. 47 Pre-Access To Profile Page Template 4.2.23. Profile Page
84
Hình 4. 48 Profile Page Template
4.2.24. Checkout Now Page
85
4.2.25. Payment Page
Hình 4. 50 Payment Page Template
4.3.Thu thập dữ liệu Website:
86
Hình 4. 51 Nguồn thu thập hình ảnh
Hình ảnh các sản phẩm của Website được lấy nguồn từ Thinkpro.com. Nơi đây bán và trưng bày các sản phẩm laptop bao gồm hình ảnh, thơng tin kĩ thuật, giá bán,… và đặc biệt là khá tương đồng với nhu cầu của Comebuy.
87
4.3.2.Xử lý hình ảnh:
• Tạo logo:
Hình 4. 52 Logo của ComeBuy
- Sử dụng Canva để design logo cho hệ thống
4.4.Các kỹ thuật thiết kế:
- Sử dụng Figma để xây dựng cơ bản cho các màn hình.
88 - Dùng thư viện MUI để design UI cho Website để tăng tính đồng nhất
Hình 4. 54 Trang thư viện MUI
- Thư viện MUI cung cấp hầu hết các components con có các mẫu thiết kế tương đồng và có cộng đồng sử dụng khá lớn. Sử dụng trong đồ án khiến cho UI đồng nhất và giảm phát sinh lỗi so với sử dụng các components tự viết.
MUI cung cấp các table để hiển thị dữ liệu có tích hợp filter cho từng column:
- Ngồi ra ta cịn có thể custom các row trong bảng để mang tính riêng biệt cho table của bản thân thay gì sử dụng các kiểu cơ bản của MUI table:
89 - Kết quả đạt được :
- Các biểu đồ được sử dụng từ thư viện Re-chart để tăng tính nổi bật và thể hiện tốt hơn so với việc code thuần
90 - Ví dụ trong hình ảnh trên ngồi sử dụng thư viện thì chúng em cịn custom thêm một ít
về giao diện để phù hợp với đồ án.
- Để có thể hiển thị tên của các sản phẩm thi chiều dọc và đầy đủ như trên hình thì phải custom lại để phần dữ liệu hiển thị được trực quan
- Xây dựng Server Python để sử dụng cho hệ thống Recommend System và Data Analysis cho Admin
Sử dụng thư viện Flask để xây dựng Server thứ 2 cho Website để xử lý các thuật toán của Python hỗ trợ cho 2 chức năng gợi ý sản phẩm và phân tích dữ liệu sản phẩm
91
- (Recommender system) là một dạng công cụ lọc thông tin (information filtering) cho phép suy diễn, dự đoán các sản phẩm, dịch vụ, nội dung mà người dùng có thể quan tâm dựa trên những thông tin thu thập được về người dùng, về các sản phẩm, dịch vụ, về các hoạt động, tương tác cũng như đánh giá của người dùng đối với các sản phẩm, dịch vụ trong quá khứ.
• Dữ liệu sử dụng gồm 1. Product.xlsx
92 2. History.xlsx
93 4. Kết quả sau khi chạy và gắn vào trong website với từng user sẽ có thể hiển thị các
sản phẩm khác nhau :
- Phân tích dữ liệu sử dụng Máy học (Data Analysis) • Chuẩn bị dữ liệu
Bộ data gốc tham khảo từ trang Kaggle: Link : Dataset
94 Với hơn 1.000.000 dòng dữ liệu ban đầu, sau khi scale, chọn lọc và đồng thời thêm một số trường để phù hợp với đồ án. Ta được bộ data mới với khoảng 10000 dịng dữ liệu
96
• Phân tích các thuật tốn
Dựa trên bộ data train thì với nhu cầu bài tốn trên thì nhận dạng đây là dạng bài toán hồi quy nên em tiến hành sử dụng một số model sau đây: Linear Regression, Random Forest, XGBoots. Ngồi ra em cịn thử nghiệm thêm LSTM là một thuật toán học sâu cải tiến từ RNN. Sau đó tiến hành thực hiện tính chỉ số score hoặc chỉ số RMSE cho từng thuật toán để lựa chọn thuật toán cho phù hợp.
• Random Forest
• XGB
• Linear Regression
97 - Như kết quả ở trên cho thấy, thuật toán Random Forest cho kết quả score tốt nhất. nhưng khi áp dụng thực tế thì thuật tốn Radom Forest đơi khi cho ra kết quả có các sản phẩm có chỉ số dự đốn gần như giống nhau nên việc xác định
98 khó khăn hơn đối với chủ cửa hàng có nhu cầu chọn nhiều sản phẩm. Nhưng về mặt số liệu tính tóan thì Random Forest vẫn cho score khá cao so với các thuật tốn cịn lại. Nên khi áp dụng vào đồ án vẫn có thể chấp nhập được.
• Kết hợp thực tế vào đồ án
Hình ảnh thực tế khi áp dụng vào đồ án. Chỉ số Trend index biểu thị mưc độ tiềm năng của sản phẩm đó so với các sản phẩm khác theo tháng. Dựa vào chỉ số này chủ cửa hàng có thể cân nhắc để lựa chọn sản phẩm nhập hàng phù hợp
• Hướng tối ưu:
Trong tương lai nếu có điều kiện phát triển đồ án tiếp tục em sẽ tiến hành tối ưu thuật tốn hiện có để có thể đưa ra con số dự đốn số lượng sản phẩm bán ra trong tháng chứ không những là chỉ số tiềm năng (Trend index). Điều này cần phải nghiên cứu thêm tài liệu và có thể một phần chỉnh sửa bộ data cho phù hợp hơn.
99
Chương 5:
XÂY DỰNG WEBSITE
5.1.Home page:
5.1.1. Giao diện:
Hình 5. 1 Giao diện Home Page 5.1.2.Mô tả:
Bảng 5. 1 Mô tả giao diện Home Page
STT Tên Kiểu Ràng buộc Chức năng
1 Navbar Bar Khơng có Hiển thực những tác vụ tắt
của hệ thống (cart, user, search bar…)
2 productSlider, productLít
Slider Khơng có Cho phép lướt xem qua các
title, sản phẩm nổi bật,..
3 seeMoreBtn Button Khơng có Cho phép người dùng truy
cập vào trang danh sách toàn bộ sản phẩm của hệ thống để phục vụ khám phá, đặt hàng, yêu thích,…
100
STT Biến cố Xử lí
1 Khi nhấn seeMoreBtn Hệ thống di chuyển đến trang productPage hiển thị dnah sách toàn bộ sản phẩm của hệ thống
5.2.Sign In Page
5.2.1.Giao diện
Hình 5. 2 Giao diện Sign In Page 5.2.2.Mơ tả
Bảng 5. 2 Mô tả giao diện Sign In Page
STT Tên Kiểu Ràng buộc Chức năng
1 gotoSignUpBtn Button Khơng có Cho phép người dùng đến
trang đăng kí tài khoản
2 logInBtn Button Khơng có Cho phép người dùng thực
hiện đăng nhập vào hệ thống
3 Email,password TextField Khơng có Nhập thông tin tài khoản để
đăng nhập
4 forgotPassBtn Button Khơng có Cho phép người dùng đi đến
101
STT Biến cố Xử lí
1 Khi nhấn
gotoSignUpBtn
Hệ thống di chuyển đến trang đăng kí
2 Khi nhấn Log In Hệ thống thực hiện kiểm tra thông tin tài khoản bằng api, nếu đúng sẽ di chuyển đến hompage, nếu sai sẽ có thơng báo hiển thị đến người dùng
3 Khi nhấn Forgot Password
Hệ thống di chuyển đến trang reset password để người dùng thực hiện lấy lại mật khẩu
5.3.Sign Up Page
5.3.1.Giao diện
Hình 5. 3 Giao diện Sign Up Page 5.3.2.Mơ tả
Bảng 5. 3 Mô tả giao diện Sign Up Page
STT Tên Kiểu Ràng buộc Chức năng
1 gotoSignInBtn Button Khơng có Cho phép người dùng đến
trang đăng nhập
2 registerBtn Button Phải check
trong modal pháp lí thơng
Cho phép người dùng thực hiện đăng kí tài khoản
102 qua viewBtn
3 Email,password, username,…
TextField Khơng có Nhập thơng tin tài khoản để
đăng kí
4 viewBtn Button Khơng có Cho phép người dùng truy
cập và đọc thơng tin pháp lí trước khi đăng kí tài khoản
STT Biến cố Xử lí
1 Khi nhấn gotoSignIn Hệ thống di chuyển đến trang đăng nhập
2 Khi nhấn Register Hệ thống thực hiện vlaidate các thông tin đucợ cung cấp bởi người dùng xem có hợp lí hay khơng, nếu có sẽ thực hiện gửi mail xác nhận email để người dùng hồn thành đăng kí, nếu khơng thì có thơng báo đến người dùng.
5.4.Guest Cart Page
5.4.1.Giao diện
Hình 5. 4 Giao diện Guest Cart Page 5.4.2.Mô tả
103 Bảng 5. 4 Mô tả giao diện Guest Cart Page
STT Tên Kiểu Ràng buộc Chức năng
2 pagesBreadcrumb Breadcrumb Khơng có Lối tắt di chuyển đến các
page đồng thời cũng là địa chỉ để người dùng biết được mình đang ở đâu trong web
1 Navbar Bar Khơng có Hiển thực những tác vụ tắt
của hệ thống (cart, user, search bar…)
3 CartItem Box Khơng có Hiển thị thơng tin sản phẩm
trong giỏ hàng khách
4 chekcoutNowBtn Button Khơng có Cho phép di chuyển đến
trang đặt hàng và thanh toán
STT Biến cố Xử lí
1 Khi nhấn
checkoutNowBtn
Hệ thống đưa khách đến trang thực hiện đặt hàng và thanh toán (place order and payment page)
5.5.Display Product Page
104
Hình 5. 5 Giao diện Display Product Page
5.5.2.Mơ tả
Bảng 5. 5 Mô tả giao diện Display Product Page
STT Tên Kiểu Ràng buộc Chức năng
2 pagesBreadcrumb Breadcrumb Khơng có Lối tắt di chuyển đến các
page đồng thời cũng là địa chỉ để người dùng biết được mình đang ở đâu trong web
1 Navbar Bar Khơng có Hiển thực những tác vụ tắt
của hệ thống (cart, user, search bar…)
3 CartItem Box Khơng có Hiển thị thơng tin sản phẩm
trong giỏ hàng khách
4 searchProductBar AutoComplete Khơng có Hỗ trợ tìm hàng hóa có trong
hệ thống
5 multiFeaturePicker Selection Khơng có Cho phép người dùng chọn
các đặc điểm của máy tính mà mình cần tìm
6 Price progressBar Khơng có Cho phép người dùng chọn
khoảng giá của máy tính mà mình cần tìm
105
7 optionalFilter Selection Khơng có Cho phép người dùng chọn
các đặc điểm của chiêc máy đang cần tìm
8 productItem Box Khơng có Hiển thị thơng tin sản phẩm
STT Biến cố Xử lí
1 Khi gõ tên vào searchbar
Hệ thống sẽ hiển thị các sản phẩm có tên như yêu cầu
2 Khi thực hiện chọn các option hay nhấn fiter by price
Hệ thống sẽ lọc ra những sản phẩm theo yêu cầu người dùng rồi hiển thị danh sách đó qua màn hình
3 Nhấn vào item Hệ thống sẽ di chuyển đến trang chi tiết sản phẩm tương ứng với productItem được chọn
5.6.Detail Product Page
106
Hình 5. 6 Giao diện Detail Product Page
5.6.2.Mô tả
Bảng 5. 6 Mô tả giao diện Detail Product Page
STT Tên Kiểu Ràng buộc Chức năng
1 pagesBreadcrumb Breadcrumb Khơng có Lối tắt di chuyển đến các
page đồng thời cũng là địa chỉ để người dùng biết được mình đang ở đâu trong web
2 Navbar Bar Khơng có Hiển thực những tác vụ tắt
của hệ thống (cart, user, search bar…)
3 AddToCartBtn Buttn Khơng có Thêm sản phẩm vào giỏ hàng
(GuestCart nếu chưa đăng nhập, Cart khi đã đăng nhập)
4 HotLineBtn Button Khơng có Liên lạc nhanh bằng số điện
thoại
5 BuyNowBtn
(Recommened System Line)
Button Khơng có Cho phép người dùng di
chuyển nhanh đến chi tiết sản phẩm đó
107
6 PostCommentBtn Button Khơng có Cho phép người dùng
comment sản phẩm( Nếu đã đăng nhập)
STT Biến cố Xử lí
1 Nhấn vào Add To
Cart
Thêm sản phẩm vừa chọn vào trong Cart
2 Nhần Buy now Hệ thống sẽ di chuyển đến trang chi tiết sản phẩm tương ứng với productItem được chọn
3 Nhấn vào Post Comment
Thêm Comment vừa chọn vào sản phẩm
5.7.Product Manager Page
5.7.1.Giao diện
Hình 5. 7 Giao diện Product Manager Page
5.7.2.Mô tả
Bảng 5. 7 Mô tả giao diện Product Manager Page
STT Tên Kiểu Ràng buộc Chức năng
1 MenuBtn Butotn Khơng có Nhấn vào để chọn các mục
108
2 AddProductBtn Button Khơng có Hiển thị trang thêm sản phẩm
3 DeleteItemBtn Button Khơng có Xóa Sản Phẩm
4 Item Table Item Khơng có Mở chi tiết sản phẩm đó
5 Left (Right) Button Khơng có Cho phép người dùng di
chuyển qua lại các bảng
STT Biến cố Xử lí
1 Nháy chuột vào MenuBtn Mở Drawer điều hướng tới các mục khác
2 Nháy chuột vào AddProductBtn Mở trang thêm sản phẩm
3 Nháy chuột vào DeleteBtn Xóa sản phẩm
4 Nháy đúp chuột vào Item trong bảng Mở xem chi tiết sản phẩm đó 5 Nháy chuột vào Left (Right) Button
bên dưới bảng
Di chuyển qua lại các bảng
5.8.Staff Manager Page
5.8.1.Giao diện
109
5.8.2.Mô tả
Bảng 5. 8 Mô tả giao diện Staff Manager Page
STT Tên Kiểu Ràng buộc Chức năng
1 MenuBtn Butotn Khơng có Nhấn vào để chọn các mục
khác
2 AddStaffBtn Button Khơng có Hiển thị trang thêm nhân viên
3 DeleteItemBtn Button Khơng có Xóa nhân viên
5 Left (Right) Button Khơng có Cho phép người dùng di