Đồ án xây dựng website bán giày thể thao và báo cáo kinh doanh thông minh
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.67 MB, 59 trang )
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
ĐỒ ÁN MÔN HỌC
ĐỒ ÁN 2
XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO
VÀ BÁO CÁO KINH DOANH THÔNG MINH
Giảng viên hướng dẫn :
ThS. Trần Thị Hồng Yến
Sinh viên thực hiện 1 :
Nguyễn Ngọc Tuân
Mã sinh viên 1
19522473
:
Sinh viên thực hiện 2 :
Văn Quốc Huy
Mã sinh viên 2
:
19520607
Lớp
:
SE122.N11
Tp HCM, tháng 12 năm 2022
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC
Độc Lập - Tự Do - Hạnh Phúc
CÔNG NGHỆ THÔNG TIN
ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO
VÀ BÁO CÁO KINH DOANH THÔNG MINH
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 05/09/2022 đến tháng 31/12/2022
Sinh viên thực hiện:
Nguyễn Ngọc Tuân – 19522473
Văn Quốc Huy - 19520607
Nội dung đề tài:
• Giới thiệu:
Một đơi giày thể thao tốt luôn tạo cảm giác êm ái và nhẹ nhàng cho đôi chân của
người sử dụng mỗi khi chạy bộ hay chơi các loại thể thao khác nhau. Nhưng việc chọn
cho mình một đơi giày ưng ý cả về bề ngoài cũng như chất lượng thường tốn rất nhiều
thời gian khi phải ra trực tiếp các cửa hàng bán giày truyền thống. Trong khi đó cuộc
sống chúng ta ngày càng trở nên bận rộn và hình thức mua hàng online đang dần trở
thành xu hướng và đang dần thay thế kiểu mua hàng trực tiếp. Đây ch ính là cơ hội để
đưa công nghệ thông tin vào lĩnh vực kinh doanh nói chung và bán giày thể thao nói
riêng.
Mạng internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng
trở nên một công cụ không thể thiếu, là nền tảng để truyền tải, tra o đổi thơng tin trên
tồn cầu. Bằng internet, chúng ta đã thực hiện được những công việc với tốc độ nhanh
hơn, chi phí thấp hơn so với cách thức truyền thống. Trong hoạt động sản xuất, kinh
doanh, thương mại điện tử đã được khẳng định được xúc tiến và thúc đẩy sự phát triển
của doanh nghiệp. Đối với một cửa hàng, việc quảng bá và giới thiệu sản phẩm đến
khách hàng đáp ứng nhu cầu mua sắm ngày càng cao của khách hàng là rất cần thiết.
Chính vì những ưu điểm trên của internet là tốc độ, chi phí thấp kết h ợp với nhu cầu
mua hàng online của thị trường, chúng em chọn thực hiện đề tài "Xây dựng website bán
giày thể thao và báo cáo kinh doanh thông minh". Cửa hàng có thể đưa các sản phẩm
lên website của mình và quản lý website đó, khách hàng có thể thỏa thích c họn lựa mẫu
mã, đặt mua hàng mà không cần đến cửa hàng, cửa hàng sẽ gửi sản phẩm đến tận tay
khách hàng, đồng thời website là nơi giúp cửa hàng quảng bá tốt nhất các sản phẩm mà
mình bán ra. Bên cạnh đó, nhóm sử dụng cơng nghệ Power BI giúp tạo dashboard, báo
cáo kinh doanh cho cửa hàng, từ đó giúp chủ cửa hàng có cái nhìn tổng quan về bức
tranh tài chính và tình hình kinh doanh của cửa hàng
• Mục tiêu:
o Xây dựng được website bán giày thể thao với nội dung phong phú, giao
diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần
thiết của một website bán hàng trực tuyến.
o Xây dựng được website dành cho quản trị viên với các chức năng quản lý
thông tin đa dạng và tiện dụng.
o Xây dựng báo cáo kinh doanh thông minh với bố cục rõ ràng, thông tin cụ
thể cho chủ cửa hàng.
• Phạm vi mơi trường:
o Triển khai sản phẩm đề tài trên mơi trường web.
• Phạm vi chức năng:
o Đăng nhập, đăng ký tài khoản.
o Quản lý danh mục, sản phẩm.
o Quản lý khách hàng, tài khoản.
o Quản lý đơn đặt hàng, giỏ hàng, thanh toán.
o Tìm kiếm, tra cứu theo bộ lọc.
o Thống kê báo cáo.
• Đối tượng:
o Người dùng khách.
o Người dùng có tài khoản.
o Quản trị viên (Admin).
• Phương pháp thực hiện:
o Tìm hiểu về cơng nghệ xây dựng website gồm: ReactJS, NodeJS,
MongoDB và công cụ xây dựng báo cáo thông minh bao gồm: các khái
niệm về dữ liệu, ngôn ngữ DAX, Power BI.
o Khảo sát các website bán hàng hiện có trên thị trường, đặc biệt là các
website bán giày thể thao, từ đó tiến hành phân tích, xác định các yêu cầu,
tính năng cụ thể cho đề tài.
o Phân tích và thiết kế hệ thống website.
o Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện cho
website.
o Xây dựng website cho người dùng và website cho quản trị viên.
o Xây dựng biểu đồ và các cơng thức tính tốn cho báo cáo thơng minh.
o Tiến hành triển khai và kiểm thử.
• Công nghệ:
o Front-end: ReactJS
o Back-end: NodeJS, ExpressJS, Stripe
o Database: MongoDB
o Source control: Github
o Báo cáo thông minh: Power BI, ngôn ngữ DAX
• Kết quả mong đợi
o Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài.
o Hiểu rõ các nghiệp vụ, chức năng của một website bán hàng trực tuyến.
o Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần
mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án
phần mềm để xây dựng website sản phẩm đề tài.
o Xây dựng được website bán hàng trực tuyến đáp ứng được các yêu cầu về
giao diện và chức năng đã đề ra.
o Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức
năng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn
trong tương lai.
o Xây dựng báo cáo thông minh giúp chủ cửa hàng có cái nhìn nhanh chóng,
trực quan về các số liệu kinh doanh, qua đó có thể điều chỉnh các kế hoạch,
chiến lược trong tương lai để phát triển doanh số.
Kế hoạch thực hiện:
Thời gian
Nguyễn Ngọc Tuân
Văn Quốc Huy
05/09/2022 Tìm hiểu đề tài, đánh giá thị trường, xác định các chức năng của hệ thống.
–
18/09/2022
19/09/2022 Tìm hiểu, nghiên cứu cơng nghệ cho website và báo cáo.
–
09/10/2022
10/10/2022 Tìm hiểu quy trình thiết kế UX/UI và
–
thiết kế giao diện cho website.
23/10/2022
Phân tích và thiết kế hệ thống website,
database.
24/10/2022 Code giao diện cho client gồm các
–
trang web login, register, homepage,
13/11/2022 product, product-detail, checkout,
payment, user-info, orders, cart, …
Cài đặt phần back-end:
+ Thiết kế hệ thống theo mơ hình MVC.
+ Xây dựng model, controller, routes.
+ Áp dụng JWT để xử lý xác thực user.
14/11/2022 Code giao diện cho admin gồm các
+ Sử dụng Stripe cho thanh toán online.
–
trang web login, homepage, products, + Sử dụng Redux Toolkit, Axios để kết
04/12/2022 users, orders, …
nối backend và frontend.
05/12/2022 Tìm hiểu về Power BI, ngơn ngữ DAX, cách kết nối database với Power BI.
–
11/12/2022
12/12/2022 Hoàn thiện báo cáo thơng minh bằng
–
Power BI.
25/12/2022
Kiểm thử và hồn thiện website.
26/12/2022 Viết báo cáo cho chương 1, 2, 3
–
31/12/2022
Viết báo cáo chương 4 và các phần còn
lại.
TP. HCM, ngày 25 tháng 12 năm 2022
Xác nhận của CBHD
Sinh viên
Sinh viên
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
ThS. Trần Thị Hồng Yến
Nguyễn Ngọc Tuân
Văn Quốc Huy
LỜI CẢM ƠN
Đầu tiên, nhóm thực hiện đề tài “Xây dựng website bán giày thể thao và báo cáo kinh
doanh thông minh” xin gửi lời cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi
trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến
thức nền tảng vững chắc để nhóm có thể tự tìm hiểu và hồn thiện đề tài này một cách tốt nhất.
Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến vì sự tận tình hướng
dẫn cũng như những góp ý, đề xuất q báu của cơ dành cho nhóm trong q trình thực hiện
đồ án.
Trong suốt thời gian qua, nhóm đã tự tìm hiểu các cơng nghệ mới và kết hợp với những
kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để thực hiện đề tài này. Với
quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản phẩm còn thiếu, sản phẩm đồ án cuối
cùng có thể sẽ mắc phải một số sai sót và chúng em rất mong sẽ nhận được những góp ý của
cơ để bổ sung, cải tiến sản phẩm cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp
theo sẽ chỉn chu và hoàn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm quý giá để
đáp ứng tốt cho những công việc thực tế trong tương lai.
Một lần nữa, xin cảm ơn cơ vì đã đồng hành cùng chúng em trong suốt học kỳ I của
năm học này.
Sinh viên thực hiện
Nguyễn Ngọc Tuân - Văn Quốc Huy
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
Tp.HCM, ngày … tháng 01 năm 2023
GVHD
ThS. Trần Thị Hồng Yến
MỤC LỤC
Chương 1: GIỚI THIỆU ĐỀ TÀI .....................................................................................................3
1.1. Tên đề tài: ...............................................................................................................................3
1.2. Mô tả đề tài:............................................................................................................................3
1.3. Lý do chọn đề tài: ..................................................................................................................4
1.4. Khảo sát hiện trạng:...............................................................................................................4
1.5. Công nghệ sử dụng:...............................................................................................................5
1.6. Môi trường thiết kế:...............................................................................................................5
1.7. Công cụ hỗ trợ: ......................................................................................................................5
Chương 2: CƠ SỞ LÝ THUYẾT ......................................................................................................6
2.1. Tổng quan về ReactJS:..........................................................................................................6
2.1.1. Giới thiệu về ReactJS:...........................................................................................................6
2.1.2. Khái niệm cơ bản trong ReactJS: ........................................................................................6
2.1.2.1.
Virtual DOM:..................................................................................................................6
2.1.2.2.
JSX: ..................................................................................................................................6
2.1.3. Cách ReactJS hoạt động: ......................................................................................................7
2.1.4. Ưu điểm của ReactJS: ...........................................................................................................8
2.2. NodeJS: ...................................................................................................................................8
2.2.1. NodeJS là gì?..........................................................................................................................8
2.2.2. Cách NodeJS hoạt động:.......................................................................................................9
2.2.3. Ưu điểm của NodeJS: ...........................................................................................................9
2.3. ExpressJS:...............................................................................................................................9
2.3.1. ExpressJS là gì? .....................................................................................................................9
2.3.2. Tính năng của ExpressJS:.................................................................................................. 10
2.4. MongoDB: ........................................................................................................................... 10
2.4.1. MongoDB là gì: .................................................................................................................. 10
2.4.2. Một số câu lệnh cơ bản: ..................................................................................................... 11
2.4.3. Ưu điểm của MongoDB: ................................................................................................... 11
2.5. Power BI: ............................................................................................................................. 12
2.5.1. Power BI là gì?.................................................................................................................... 12
2.5.2. Tính năng của Power BI: ................................................................................................... 12
Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ...................................................................... 13
3.1. Sơ đồ Use-case:................................................................................................................... 13
3.1.1. Đăng nhập:........................................................................................................................... 13
3.1.2. Đăng xuất: ........................................................................................................................... 14
3.1.3. Đăng ký thành viên: ........................................................................................................... 14
3.1.4. Đổi thông tin: ...................................................................................................................... 15
3.1.5. Xem thông tin sản phẩm: ................................................................................................... 17
3.1.6. Tìm kiếm sản phẩm: ........................................................................................................... 18
3.1.7. Thêm giỏ hàng .................................................................................................................... 18
3.1.8. Kiểm tra giỏ hàng ............................................................................................................... 19
3.1.9. Đơn hàng của tơi ................................................................................................................. 21
3.1.10.
Sản phẩm u thích ..................................................................................................... 22
3.1.11.
Quản lý đơn hàng ........................................................................................................ 23
3.1.12.
Quản lý sản phẩm ........................................................................................................ 24
3.1.13.
Quản lý khách hàng..................................................................................................... 27
Chương 4: THIẾT KẾ GIAO DIỆN .............................................................................................. 31
4.1. Trang đăng nhập, đăng ký: ................................................................................................ 31
4.1.1. Giao diện: ............................................................................................................................ 31
4.1.2. Mô tả: ................................................................................................................................... 31
4.2. Trang chủ:............................................................................................................................ 32
4.2.1. Giao diện: ............................................................................................................................ 32
4.2.2. Mô tả: ................................................................................................................................... 33
4.3. Trang thông tin cá nhân: .................................................................................................... 33
4.3.1. Giao diện: ............................................................................................................................ 33
4.3.2. Mô tả: ................................................................................................................................... 34
4.4. Trang đơn hàng: .................................................................................................................. 34
4.4.1. Giao diện: ............................................................................................................................ 34
4.4.2. Mô tả: ................................................................................................................................... 34
4.5. Trang bài hát yêu thích: ..................................................................................................... 34
4.5.1. Giao diện: ............................................................................................................................ 34
4.5.2. Mô tả: ................................................................................................................................... 35
4.6. Trang danh sách sản phẩm theo loại: ............................................................................... 35
4.6.1. Giao diện: ............................................................................................................................ 35
4.6.2. Mô tả: ................................................................................................................................... 35
4.7. Trang chi tiết sản phẩm: .................................................................................................... 36
4.7.1. Giao diện: ............................................................................................................................ 36
4.7.2. Mô tả: ................................................................................................................................... 36
4.8. Chi tiết giỏ hàng: ................................................................................................................ 36
4.8.1. Giao diện: ............................................................................................................................ 36
4.8.2. Mô tả: ................................................................................................................................... 37
4.9. Trang thanh tốn hóa đơn .................................................................................................. 37
4.9.1. Giao diện.............................................................................................................................. 37
4.9.2. Mô tả .................................................................................................................................... 37
4.10. Trang chủ Admin ................................................................................................................ 38
4.10.1.
Giao diện ...................................................................................................................... 38
4.10.2.
Mô tả ............................................................................................................................. 38
4.11. Trang Admin quản lý tài khoản (Users) .......................................................................... 38
4.11.1.
Giao diện ...................................................................................................................... 38
4.11.2.
Mô tả ............................................................................................................................. 39
4.12. Trang Admin thêm người dùng (New User) ................................................................... 39
4.12.1.
Giao diện ...................................................................................................................... 39
4.12.2.
Mô tả ............................................................................................................................. 39
4.13. Trang Admin chỉnh sửa thông tin người dùng (Edit User) ........................................... 40
4.13.1.
Giao diện ...................................................................................................................... 40
4.13.2.
Mô tả ............................................................................................................................. 40
4.14. Trang Admin quản lý sản phẩm (Products) .................................................................... 41
4.14.1.
Giao diện ...................................................................................................................... 41
4.14.2.
Mô tả ............................................................................................................................. 41
4.15. Trang Admin thêm sản phẩm (New Product) ................................................................. 41
4.15.1.
Giao diện ...................................................................................................................... 41
4.15.2.
Mô tả ............................................................................................................................. 41
4.16. Trang Admin chỉnh sửa thông tin sản phẩm (Edit Product) ......................................... 42
4.16.1.
Giao diện ...................................................................................................................... 42
4.16.2.
Mô tả ............................................................................................................................. 42
4.17. Báo cáo kinh doanh PowerBI............................................................................................ 43
4.17.1.
Giao diện ...................................................................................................................... 43
4.17.2.
Mô tả ............................................................................................................................. 43
KẾT LUẬN ........................................................................................................................................ 44
TÀI LIỆU THAM KHẢO................................................................................................................ 45
MỤC LỤC HÌNH ẢNH
Hình 2.1: Mơ tả cách Virtual DOM hoạt động.................................................................................6
Hình 2.2: Một đoạn code mẫu về JSX. ..............................................................................................7
Hình 2.3: Ví dụ về tạo một element trong React..............................................................................7
Hình 2.4: Ví dụ về React được viết bằng JSX..................................................................................8
Hình 2.5: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website. ............ 10
Hình 2.6: Hình ảnh một dashboard trên PowerBI. ........................................................................ 12
Hình 3.1: Sơ đồ use-case tổng quát................................................................................................. 13
Hình 3.2: Sơ đồ use-case đăng nhập............................................................................................... 13
Hình 3.3: Sơ đồ use-case đăng xuất................................................................................................ 14
Hình 3.4: Sơ đồ use-case đăng ký thành viên................................................................................ 14
Hình 3.5: Sơ đồ use-case đổi thơng tin ........................................................................................... 15
Hình 3.6: Sơ đồ use-case xem thơng tin sản phẩm ....................................................................... 17
Hình 3.7: Sơ đồ use-case tìm kiếm sản phẩm................................................................................ 18
Hình 3.8: Sơ đồ use-case thêm giỏ hàng ........................................................................................ 18
Hình 3.9: Sơ đồ use-case kiểm tra giỏ hàng .................................................................................. 19
Hình 3.10: Sơ đồ use-case đơn hàng của tơi .................................................................................. 21
Hình 3.11: Sơ đồ use-case sản phẩm u thích ............................................................................. 22
Hình 3.12: Sơ đồ use-case quản lý đơn hàng................................................................................. 23
Hình 3.13: Sơ đồ use-case quản lý sản phẩm ................................................................................ 24
Hình 3.14: Sơ đồ use-case quản lý khách hàng ............................................................................. 27
Hình 4.1. Giao diện nút đăng ký, đăng nhập ở bên phải trên thanh header. .............................. 31
Hình 4.2. Giao diện nút trang đăng nhập sau khi click SIGN IN. .............................................. 31
Hình 4.3. Giao diện nút trang đăng ký sau khi click REGISTER............................................... 31
Hình 4.4. Giao diện của trang chủ................................................................................................... 32
Hình 4.5. Một số chức năng ở header tài khoản được sử dụng sau khi đăng nhập................... 33
Hình 4.6: Giao diện sản phẩm ở trang chủ cho phép chọn vào mục u thích. ........................ 33
Hình 4.7: Giao diện trang thơng tin cá nhân của tài khoản đã đăng nhập. ................................ 33
Hình 4.8: Giao diện trang đơn hàng................................................................................................ 34
Hình 4.9: Giao diện trang sản phẩm u thích. ............................................................................. 34
Hình 4.10: Giao diện trang danh sách sản phẩm theo loại........................................................... 35
Hình 4.11: Giao diện trang chi tiết sản phẩm. ............................................................................... 36
Hình 4.12: Giao diện chi tiết giỏ hàng............................................................................................ 36
Hình 4.13: Giao diện thanh tốn hóa đơn. ..................................................................................... 37
Hình 4.14: Giao diện trang chủ admin. .......................................................................................... 38
Hình 4.15: Giao diện trang admin quản lý tài khoản.................................................................... 38
Hình 4.16: Giao diện trang admin thêm người dùng. ................................................................... 39
Hình 4.17: Giao diện trang admin chỉnh sửa thơng tin người dùng. .......................................... 40
Hình 4.18: Giao diện trang admin quản lý sản phẩm ................................................................... 41
Hình 4.19: Giao diện trang admin thêm sản phẩm. ...................................................................... 41
Hình 4.20: Giao diện trang admin chỉnh sửa thông tin sản phẩm. .............................................. 42
Hình 4.21: Giao diện báo cáo kinh doanh Power BI. ................................................................... 43
DANH MỤC BẢNG
Bảng 3.1: Đặc tả đăng nhập: ............................................................................................................ 13
Bảng 3.2: Đặc tả đăng xuất: ............................................................................................................. 14
Bảng 3.3: Đặc tả đăng ký thành viên:............................................................................................. 15
Bảng 3.4: Đặc tả đổi thông tin: ........................................................................................................ 15
Bảng 3.5: Đặc tả đổi mật khẩu: ....................................................................................................... 16
Bảng 3.6: Đặc tả đổi thông tin cá nhân: ......................................................................................... 16
Bảng 3.7: Đặc tả đổi địa chỉ:............................................................................................................ 17
Bảng 3.8: Đặc tả xem thông tin sản phẩm: .................................................................................... 17
Bảng 3.9: Đặc tả tìm kiếm sản phẩm: ............................................................................................. 18
Bảng 3.10: Đặc tả tìm kiếm: ............................................................................................................ 18
Bảng 3.11: Đặc tả kiểm tra giỏ hàng: ............................................................................................. 19
Bảng 3.12: Đặc tả xóa giỏ hàng: ..................................................................................................... 19
Bảng 3.13: Đặc tả thanh toán đơn hàng: ........................................................................................ 20
Bảng 3.14: Đặc tả đơn hàng của tôi: ............................................................................................... 21
Bảng 3.15: Đặc tả theo giõi đơn hàng: ........................................................................................... 21
Bảng 3.16: Đặc tả xác nhận đơn hàng ............................................................................................ 22
Bảng 3.17: Đặc tả xác sản phẩm yêu thích .................................................................................... 22
Bảng 3.18: Đặc tả quản lý đơn hàng ............................................................................................... 23
Bảng 3.19: Đặc tả admin xóa đơn hàng.......................................................................................... 23
Bảng 3.20: Đặc tả admin xác nhận thanh toán đơn hàng ............................................................. 24
Bảng 3.21: Đặc tả admin quản lý sản phẩm................................................................................... 24
Bảng 3.22: Đặc tả admin tìm kiếm sản phẩm ................................................................................ 25
Bảng 3.23: Đặc tả admin thêm sản phẩm....................................................................................... 25
Bảng 3.24: Đặc tả admin xóa sản phẩm ......................................................................................... 26
Bảng 3.25: Đặc tả admin sửa sản phẩm.......................................................................................... 26
Bảng 3.26: Đặc tả admin quản lý khách hàng ............................................................................... 27
Bảng 3.27: Đặc tả admin thêm khách hàng ................................................................................... 28
Bảng 3.28: Đặc tả admin xóa khách hàng ...................................................................................... 28
Bảng 3.29: Đặc tả admin sửa khách hàng ...................................................................................... 29
Bảng 3.30: Đặc tả admin tìm kiếm khách hàng............................................................................. 30
1
DANH MỤC VIẾT TẮT
STT
Ký hiệu chữ viết tắt
Chữ viết đầy đủ
1
CSDL
Cơ sở dữ liệu
2
API
Application program interface
3
DOM
Document Object Model
4
RDBMS
Relational Database Management System
2
Chương 1:
GIỚI THIỆU ĐỀ TÀI
1.1. Tên đề tài:
XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO VÀ
BÁO CÁO KINH DOANH THÔNG MINH
1.2. Mơ tả đề tài:
Thể thao giúp chúng ta có sức khỏe và tinh thần thoải mái, thư giãn sau những ngày
làm việc và học tập căng thẳng hằng ngày, đi kèm với những mơn thể thao ấy như bóng đá, cầu
lơng, bóng chuyền, … khơng thể thiếu đi sự trợ giúp của những đôi giày thể thao chuyên dụng.
Giày thể thao mang lại trải nghiệm tốt nhất, dễ chịu, thoải mãi đố i với đôi chân khi sử dụng
trong lúc tập luyện hay vui chơi thể thao. Tuy nhiên, việc lựa chọn cho mình một đơi giày thể
thao ưng ý về màu sắc, chất liệu, giá cả là chuyện khá tốn thời gian, hơn nữa với cuộc sống bận
rộn như ngày nay việc đi đến cửa hàng mua một đôi giày thể thao cũng làm cho ta mất thời
gian cũng như khơng có nhiều lựa chọn theo ý muốn. Chính vì thế hình thức mua giày thể thao
online sẽ giúp người tiêu dùng có nhiều lựa chọn hơn và khơng tốn gian của mình.
Với sự phát triển nhanh chóng của internet, hình thức mua hàng qua mạng trở nên phổ
biến và dần thay thế cách bán hàng truyền thống. Các website mua bán hàng qua mạng giúp
người dùng có nhiều lựa chọn về mẫu mã, giá cả và trên hết là tiết kiệm thời gian. Thấy được
sự quan trọng và lợi ích này nhóm chúng em đã quyết dịnh xây dựng dự án “Xây dựng website
bán giày thể thao và báo cáo kinh doanh thông minh”.
Đề tài được lấy ý tưởng từ các trang thương mại điện tử như Tiki, Lazada, Shopee , ...
Với mặt hàng là những đôi giày thể thao đa dạng về màu sắc, kích thước, giới tính và thương
hiệu. Website bán giày thể thao với mục tiêu mang lại trải nghiệm tốt cho người dùng, chúng
em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một website mua hàng
trực tuyến đồng thời nhóm cũng xây dựng trang quản lý cho chủ cửa hàng kèm theo đó là báo
cáo kinh doanh được nhóm xây dựng dựa trên cơng nghệ PowerBi nhằm giúp chủ cửa hàng
không những thuận tiện trong việc bán giày thể thao mà cịn có cái nhìn tổng quan về bức tranh
tài chính để từ đó có định hướng phát triển cửa hàng trong tương lai.
Website bán giày thể thao được xây dựng bằng Reactjs kết hợp với nhiều thư viện hỗ
trợ khác giúp tạo giao diện đẹp cùng trải nghiệm tốt cho khách hàng. Website còn liên kết với
Stripe bên thứ ba giúp thanh toán trực tuyến nhanh chóng. Ngồi ra, đề tài cịn có báo cáo kinh
3
doanh được xây dựng trên công nghệ PowerBi giúp chủ cửa hàng có cái nhình t ổng quan về
bức tranh tài chính.
1.3. Lý do chọn đề tài:
Với sự phát triển của Internet, nhu cầu mua hàng trực tuyến trên không gian mạng trở
nên phổ biến và đang dần thay thế hình thức bán hàng truyền thống với ưu điểm nhanh, tiện
lợi, ít chi phí mà trên hết là trải nghiệm của khách hàng. Trước đây khi hình thức mua hàng
trực tuyến chưa phổ biến đa phần chúng ta đều phải đi ra cửa hàng mới có thể mua được món
đồ mà mình đang cần và đơi khi cửa hàng hết hàng hoặc khơng có mẫu mã mà ta muốn kèm
theo đó là người dùng khơng được so sánh giữa các sản phẩm, điều này dẫn đến trải nghiệm
không tốt cũng như tốn thời gian đối với người tiêu dùng. Hình thức mua hàng trực tuyến được
sinh ra để khắc phục những bất cập trên.
Các website mua hàng trực tuyến hiện nay rất phổ biến có thể kể đến như Tiki, Lazada,
Shopee, … Nhưng để tìm kiếm một website bán giày thể thao thì khá ít và đa phần những
website này có giao diện cịn khá đơn giản cũng như chưa có nhiều mẫu mã, hình ảnh của sản
phẩm giúp người tiêu dùng lựa chọn.
Chúng em quyết định lựa chọn đề tài “Xây dựng website bán giày thể thao và báo cáo
thơng minh” vì mong muốn ủng hộ mọi người trong việc luyện tập thể thao, rèn luyện sức
khỏe, bảo vệ đơi chân của mình, kèm theo đó là mong muốn tạo ra một website mang lại trải
nghiệm tốt nhất cho người dùng với giao bắt mắt, dễ sử dụng, nhiều hình ảnh, mẫu mã giúp
mọi người tiết kiệm được thời gian, chi phí, có nhiều lựa chọn hơn khi chọn lựa một đơi giày
thể thao cho mình. Bên cạnh đó nhóm cịn xây dựng “Báo cáo thơng minh” giúp ch ủ cửa hàng
có thể thuận tiện trong việc theo giõi mua bán, cũng như định hướng phát triển cửa hàng của
mình.
1.4. Khảo sát hiện trạng:
Hiện nay, thị trường đã có rất nhiều website bán giày thể thao trực tuyến nổi tiếng
được mọi người biết đến như trivela.vn, neymarsport.com, thegioigiaythethao.com.vn, … Với
giao diện bắt mắt, dễ sử dụng, cùng với số lượng giày thể thao khổng lồ, mẫu mã đa dạng,
chúng nhanh chóng trở thành những website bán giày thể thao trực tuyến hàng đầu. Các chức
năng của những website này đều tập trung vào trải nghiệm mua hàng thoải mái nhất cho người
dùng với nhiều lựa chọn về mẫu mã, kích thước, màu sắc, giới tính.
Chúng em cũng sẽ xây dựng một website bán giày thể thao trực tuyến với những tính
năng mua hàng cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng,
4
kết hợp với trang thanh toán Stripe bên thứ ba giúp thuận tiện hơn trong việc thanh tốn hóa
đơn, và sự bảo mật, uy tín từ phía cửa hàng đối với người dùng. Bên cạnh đó chúng em cịn
xây dựng báo cáo kinh doanh thông minh giúp chủ cửa hàng thuận tiện trong việc theo giõi
kinh doanh và định hướng phát triển của cửa hàng.
1.5. Công nghệ sử dụng:
-
ReactJS
-
NodeJS
-
ExpressJS
-
Axios
-
MongoDB
-
Stripe
-
Power BI
1.6. Mơi trường thiết kế:
-
Visual Studio Code.
1.7. Cơng cụ hỗ trợ:
-
Trình duyệt Cốc Cốc, Chrome, FireFox.
5
Chương 2:
CƠ SỞ LÝ THUYẾT
2.1. Tổng quan về ReactJS:
2.1.1.
Giới thiệu về ReactJS:
ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra
mắt vào 2013. ReactJS hỗ trợ việc xây dựng những thành phần trên website có tính tương tác
cao, có trạng thái và có thể sử dụng lại được.
Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu khơng chỉ
thực hiện được trên tầng server mà còn ở dưới client. React so sánh sự thay đổi giữa các giá trị
của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM (Document
Object Model).
2.1.2.
Khái niệm cơ bản trong ReactJS:
2.1.2.1.
Virtual DOM:
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có
trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ
phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý.
React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này. Virtual DOM là
một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ
liệu thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá
việc re-render DOM tree thật.
Hình 2.1: Mơ tả cách Virtual DOM hoạt động.
2.1.2.2.
JSX:
-
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript.
-
Đặc điểm:
6
• Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã
Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã
tương đương viết trực tiếp bằng Javascript.
• Safer: an tồn hơn. Ngược với Javascript, JSX là kiểu statically -typed, nghĩa là nó
được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát
hiện ngay trong q trình biên dịch. Ngồi ra, nó cũng cung cấp tính năng gỡ lỗi
khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy
rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng.
Hình 2.2: Một đoạn code mẫu về JSX.
2.1.2.3.
-
Props và State:
Props: giúp các component tương tác với nhau, component nhận input gọi là props, và
trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
-
State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render
lại để cập nhật UI.
2.1.3. Cách ReactJS hoạt động:
-
Tạo đại diện của nút DOM thông qua tạo hàm Element trong React. Đây là một ví dụ:
Hình 2.3: Ví dụ về tạo một element trong React.
-
Cú pháp trong HTML code ở trên rất giống với XML components. Tuy nhiên, thay vì
sử dụng DOM class truyền thống, React sử dụng className.
-
Thẻ JSX có tên thẻ, con và thuộc tính. Dấu ngoặc kép trong các thuộc tính JSX đại diện
cho chuỗi. Yếu tố này tương tự như JavaScript.
-
Ngoài ra, các giá trị số và biểu thức phải được viết bên trong dấu ngoặc nhọn.
7
Hình 2.4: Ví dụ về React được viết bằng JSX.
• <MyCounter> được gọi là Số đếm, hiển thị biểu thức số là giá trị của nó.
• GameScores là một đối tượng theo nghĩa đen có hai cặp giá trị prop.
• <DashboardUnit> là khối XML được render trên trang.
• scores={GameScores}}: thuộc tính điểm nhận được giá trị từ GameScores, đã
được xác định trước đó.
2.1.4. Ưu điểm của ReactJS:
-
Phù hợp với đa dạng thể loại website.
-
Tái sử dụng các Component.
-
Có thể sử dụng cho cả Mobile application.
-
Thân thiện với SEO.
-
Debug dễ dàng.
-
Công cụ phát triển web hot nhất hiện nay.
2.2. NodeJS:
2.2.1.
NodeJS là gì?
Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript
Engine – trình thơng dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng được các ứng
dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp
một cách nhanh chóng và dễ dàng mở rộng.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới
Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng
Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp
nhất.
Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại
California, Hoa Kỳ.
8
2.2.2.
Cách NodeJS hoạt động:
Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông
qua các tác vụ thời gian thực một cách nhanh chóng. Bởi vì, Node js có khả năng mở rộng
nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng
cao.
Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu
cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng
không hiệu quả. Chính vì lẽ đó giải pháp mà Node js đưa ra là sử dụng luồng đơn (Single Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng
chục ngàn kết nối đồng thời.
2.2.3. Ưu điểm của NodeJS:
-
Tốc độ cực nhanh: Được xây dựng dựa trên engine JavaScript V8 của Google Chrome,
do đó các thư viện của nó có khả năng thực thi code chỉ rất nhanh.
-
NPM: Với hơn 50,000 package khác nhau, các developer có thể dễ dàng lựa chọn bất
kỳ tính năng nào để xây dựng cho ứng dụng của mình.
-
Lập trình khơng đồng bộ: Mọi API của Node.JS đều có tính khơng đồng bộ (nonblocking), do đó một server dựa trên Node.JS không cần phải đợi API trả về dữ liệu.
-
Không có buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âm thanh
hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữ liệu theo
từng phần (chunk).
-
Đơn luồng: Node.JS sử dụng mơ hình đơn luồng với vịng lặp sự kiện. Do đó các ứng
dụng có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyền thống như
Apache HTTP Server.
-
Khả năng mở rộng cao: Server NodeJS phản hồi theo hướng non-blocking, do đó nó có
thể mở rộng vô cùng dễ dàng, tạo ra các luồng giới hạn để xử lý request.
2.3. ExpressJS:
2.3.1.
ExpressJS là gì?
Express.js là một framework mã nguồn mở miễn phí cho Node.js. Express.js được sử
dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản v à nhanh chóng.
Express hỗ rợ các phương thức HTTP và midleware tạo ra môt API vô cùng mạnh
mẽ và dễ sử dụng.
9
2.3.2. Tính năng của ExpressJS:
-
Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dưới dạng các hàm
để dễ dàng sử dụng ở bất kỳ đâu trong chương trình. Điều này đã loại bỏ nhu cầu viết
mã từ đó tiết kiệm được thời gian.
-
Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cập vào
cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác. Phần mềm
Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của
Express.js.
-
Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của
website với sự trợ giúp của URL.
-
Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cung cấp cho phép
các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML
ở phía máy chủ.
-
Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết đi việc
gỡ lỗi. Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định
chính xác các phần ứng dụng web có lỗi.
Hình 2.5: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website.
2.4. MongoDB:
2.4.1.
-
MongoDB là gì:
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được
hàng triệu người sử dụng.
-
MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong
document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh.
10
-
Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL
hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng
khái niệm là collection thay vì bảng.
-
So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với
row, MongoDB sẽ dùng các document thay cho row trong RDBMS.
-
Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ
không cần tuân theo một cấu trúc nhất định.
-
Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn
ngữ truy vấn MongoDB.
2.4.2.
Một số câu lệnh cơ bản:
CSDL
Tạo csdl
use test;
Tạo bảng
db.createCollection('students');
Tạo bản ghi
db.students.insert({ name:huy, gender: 'male'});
Cập nhật
db.students.update({ _id: 1 },{$set:{ name: huy update' }});
Xóa bản ghi
db.students.remove({ _id: 1});
Tìm kiếm all
db.students.find({});
Tìm kiếm
db.students.find({ name: huy });
2.4.3.
-
MongoDB
Ưu điểm của MongoDB:
Do 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 kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ
liệu, nên bạn muốn gì thì cứ insert vào thoải mái.
-
Dữ liệu trong MongoDB khơng có sự ràng buộc lẫn nhau, khơng có join như trong
RDBMS nên khi insert, xóa hay update nó khơng cần phải mất thời gian kiểm tra xem
có thỏa mãn các ràng buộc dữ liệu như trong RDBMS.
-
MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái niệm
cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta
chỉ cần thêm một node với vào cluster:
-
Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông
tin đạt hiệu suất cao nhất.
11
