Đê tài xây dựng website bán giày thể thao và báo cáo kinh doanh thông minh

Bên cạnh đó, nhóm sử dụng công nghệ Power BI giúptạ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ìntổng quan về bức tranh tài chính và tình hình kinh doa

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

ĐỀ 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ủangườ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ọncho 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ềuthờ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ộcsố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óiriê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àngtrở nên một công cụ không thể thiếu, là nền tảng để truyền tải, trao đổi thông tin trêntoàn cầu Bằng internet, chúng ta đã thực hiện được những công việc với tốc độ nhanhhơ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, kinhdoanh, thương mại điện tử đã được khẳng định được xúc tiến và thúc đẩy sự phát triểncủ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 đếnkhá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

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

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 nhucầu mua hàng online của thị trường, chúng em chọn thực hiện đề tài "Xây dựngwebsite bán giày thể thao và báo cáo kinh doanh thông minh" Cửa hàng có thể đưa cácsản phẩm lên website của mình và quản lý website đó, khách hàng có thể thỏa thíchchọ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ảnphẩ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ấtcá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úptạ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ìntổ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ú, giaodiệ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ăngcầ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

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áiniệ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ácwebsite 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 chowebsite

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 toá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ầnmềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự ánphầ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ứcnăng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễntrong 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 nhanhchó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

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

–

04/12/2022

Code giao diện cho admin gồm các trang web login, homepage, products,users, orders, …

+ Sử dụng Stripe cho thanh toán online.+ Sử dụng Redux Toolkit, Axios để kết nối backend và frontend

Hoàn thiện báo cáo thông minh bằng

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

ThS Trần Thị Hồng Yến

TP HCM, ngày 25 tháng 12 năm 2022 Sinh viên Sinh viên

(Ký tên và ghi rõ họ tên) (Ký tên và ghi rõ họ tê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 kinhdoanh 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ôitrườ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ếnthức nền tảng vững chắc để nhóm có thể tự tìm hiểu và hoàn thiện đề tài này một cách tốtnhấ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ìnhhướng dẫn cũng như những góp ý, đề xuất quý báu của cô dành cho nhóm trong quá trìnhthự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ớinhữ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àinà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ữnggó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ảnphẩ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ệmquý 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 trongsuố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 yê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 toá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 yê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 yê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 yê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 toá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

DANH MỤC VIẾT TẮT

17

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ênphổ 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ạnggiú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ựngwebsite 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ươnghiệ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 muahà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ửahà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ớiStripe bên thứ ba giúp thanh toán trực tuyến nhanh chóng Ngoài ra, đề tài còn có báo cáo

kinh 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ệnlợ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àngtrự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èmtheo đó 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ệmkhô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ầnnhữ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 ảnhcủ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áothô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ứckhỏ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ảinghiệ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úpmọ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àythể 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ửahà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àngcủ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ớigiao 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ứcnă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 chongườ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ínhnă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,

19

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 toá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ònxâ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õikinh doanh và định hướng phát triển của cửa hàng.

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

Chương 2:

CƠ SỞ LÝ THUYẾT

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, ramắ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áccao, 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 (DocumentObject 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 toá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

21

- Đặc điểm:

 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 toà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ẽ đượcphát hiện ngay trong quá trình biên dịch Ngoà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ờirender 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 đạidiệ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

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

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ớiLinux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạngJavascript 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ấpnhấ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ỳ

23

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ộ

(non-blocking), 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

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áchà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ầuviế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ầnmề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ứcnă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áicủ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 chophé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ẫuHTML ở 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 điviệ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ăngxá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.

- 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ẽ ứngvớ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ưutrữ 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 quangôn ngữ truy vấn MongoDB

2.4.2 Một số câu lệnh cơ bản:

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 Ư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ộtcollection 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ư trongRDBMS 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ệmcluster 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 tachỉ 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ấnthông tin đạt hiệu suất cao nhất

- Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượttruy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng.

- Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơnhẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủlớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần

sử dụng

2.5.2 Tính năng của Power BI:

- Cho phép người dùng được truy cập từ nhiều nguồn và tự động hóa quy trình xử lý dữliệu

-

-

-

-

Hình 2.6: Hình ảnh một dashboard trên PowerBI

27

Chương 3:

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Hình 3.1: Sơ đồ use-case tổng quát

3.1.1 Đăng nhập:

Hình 3.2: Sơ đồ use-case đăng nhập.

Bảng 3.1: Đặc tả đăng nhập:

Tên Use – Case   Đăng nhập  

Mô tả   Use-Case cho phép người dùng đăng nhập vào hệ thống 

Điều kiện kích hoạt   Người dùng chọn Login  

Tiền điều kiện   Đã có tài khoản  

Hậu điều kiện   Người dùng đăng nhập vào hệ thống thành công 

Luồng sự kiện chính   1 Hệ thống hiển thị màn hình đăng nhập  

2 Người dùng nhập tên người dùng và mật khẩu 

3 Hệ thống kiểm tra thông tin đăng nhập 

4 Nếu thông tin hợp lệ hệ thống thông báo đăng nhập thành công 

5 Kết thúc Use-case Luồng sự kiện phụ    Mật khẩu hoặc tên đăng nhập sai:  

1 Hệ thống hiển thị lại màn hình đăng nhập để người dùng nhập lại thông tin kèm theo thông báo tên đăng nhập hoặc mật khẩu sai.  

2 Quay lại bước 2 của Luồng sự kiện chính.  

3.1.2 Đăng xuất:

Hình 3.3: Sơ đồ use-case đăng xuất.

Bảng 3.2: Đặc tả đăng xuất:

Tên Use – Case   Đăng xuất 

 Mô tả   Use-Case cho phép người dùng đăng xuất ra khỏi hệ thống 

Điều kiện kích hoạt   Người dùng chọn Log out  

Tiền điều kiện   Đã đăng nhập 

Hậu điều kiện   Người dùng đăng xuất ra khỏi hệ thống thành công 

Luồng sự kiện chính   1 Hệ thống đăng xuất người dùng và đưa về trang

trước đó 

2 Kết thúc Use-case 

Luồng sự kiện phụ    Mật khẩu hoặc tên đăng nhập sai:  

1 Hệ thống hiển thị lại màn hình đăng nhập để người dùng nhập lại thông tin kèm theo thông báo tên đăng nhập hoặc mật khẩu sai.  

2 Quay lại bước 2 của Luồng sự kiện chính.  

3.1.3 Đăng ký thành viên:

Hình 3.4: Sơ đồ use-case đăng ký thành viên.

29

Bảng 3.3: Đặc tả đăng ký thành viên:

Tên Use – Case   Đăng ký thành viên

 Mô tả   Use-Case cho phép người dùng đăng ký tài khoản

Điều kiện kích hoạt   Khi người dùng nhấn vào nút Register nằm trong trang chủ 

Tiền điều kiện   Có tài khoản email hợp lệ 

Có tài khoản tên người dùng hợp lệHậu điều kiện   Người dùng đăng ký thành công 

Luồng sự kiện chính   1 Hệ thống hiển thị màn hình đăng ký  

2 Người dùng nhập thông tin  

3 Hệ thống kiểm tra tài khoản vừa nhập gồm: Email, username, password confirm password

4 Nếu tất cả đều hợp lệ hệ thống thông báo đăng ký thành công  

5 Kết thúc Use-case  

Luồng sự kiện phụ    Email đã tồn tại:  

1 Hệ thống hiển thị thông báo lỗi

2 Quay lại bước 3 của Luồng sự kiện chính

 Username đã tồn tại:  

3 Hệ thống hiển thị thông báo lỗi

4 Quay lại bước 3 của Luồng sự kiện chính

3.1.4 Đổi thông tin:

Hình 3.5: Sơ đồ use-case đổi thông tin

Bảng 3.4: Đặc tả đổi thông tin:

Tên Use – Case   Đổi thông tin

Mô tả   Use-Case cho phép người dùng thay đổi thông tin

Điều kiện kích hoạt   Người dùng chon My Profile

Tiền điều kiện   Đã đăng nhập tài khoản vào website

Hậu điều kiện   Người dùng vào được trang đổi thông tin 

Luồng sự kiện chính   1 Hiển thị trang thay đổi thông tin

2 Kết thực Use-caseLuồng sự kiện phụ  

Bảng 3.5: Đặc tả đổi mật khẩu:

Tên Use – Case   Đổi mật khẩu

Mô tả   Use-case đổi mật khẩu cho phép người dùng đổi mật khẩu

Điều kiện kích hoạt   Người dùng chọn vào phần đổi mật khẩu

Tiền điều kiện   Người dùng đã có tài khoản đăng nhập và đăng nhập vào websiteHậu điều kiện   Hệ thống thay đổi và cập nhật mật khẩu mới cho người dùngLuồng sự kiện chính   1 Người dùng chọn phần đổi mật khẩu

2 Người dùng nhập mật khẩu cũ

3 Người dùng nhập mật khẩu mới

4 Người dùng confirm mật khẩu mới

5 Hệ thống thực hiện thay đổi và cập nhật mật khẩu mới

Bảng 3.6: Đặc tả đổi thông tin cá nhân:

Tên Use – Case   Đổi thông tin cá nhân

Mô tả   Use-case đổi thông tin cá nhân cho phép người dùng đổi thông tin

cá nhân

Điều kiện kích hoạt   Người dùng chọn vào phần đổi thông tin cá nhân

Tiền điều kiện   Người dùng đã có tài khoản đăng nhập và đăng nhập vào websiteHậu điều kiện   Hệ thống thay đổi và cập nhật thông tin mới cho người dùngLuồng sự kiện chính   1 Người dùng nhập họ tên