Phát triển website so sánh giá bán laptop và phụ kiện trên các sàn thương mại điện tử

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
-----🙞🙞🙞🙞🙞-----

BÁO CÁO ĐỒ ÁN 2 – LỚP SE121.N11

ĐỀ TÀI:
PHÁT TRIỂN WEBSITE SO SÁNH GIÁ BÁN LAPTOP
VÀ PHỤ KIỆN TRÊN CÁC SÀN THƯƠNG MẠI ĐIỆN
TỬ

GVHD: Ths.Huỳnh Hồ Thị Mộng Trinh


Sinh viên thực hiện:

Mai Long Thành

19522232

Nguyễn Thiện Sua

19522144

Thành phố HCM, tháng 6 năm 2023

2


LỜI CẢM ƠN

Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn q thầy cơ khoa Cơng nghệ
Phần mềm, trường Đại Học Công Nghệ Thông Tin, ĐHQG TP.HCM, đã tận tình
hướng dẫn nhóm trong suốt thời gian qua. Những kiến thức mà thầy cô đã truyền đạt
là nền tảng quan trọng để nhóm có thể hồn thành đề tài này.
Nhóm tác giả xin gửi lời cảm ơn chân thành đến ThS. Huỳnh Hồ Thị Mộng Trinh,
cảm ơn cô đã tận tình hướng dẫn và tạo điều kiện tốt nhất cho nhóm hồn thành đề tài
này. Những lời động viên, góp ý chân tình của cơ là động lực q báu để nhóm vượt
qua những khó khăn khi tìm hiểu và thực hiện đề tài. Trong thời gian qua, nhóm tác
giả đã cố gắng vận dụng những kiến thức nền tảng đã học, kết hợp học hỏi và tìm hiểu
cơng nghệ mới để ứng dụng xây dựng đề tài môn học. Tuy nhiên trong quá trình thực
hiện, do kiến thức và kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi những thiếu sót.
Chính vì vậy, nhóm tác giả rất mong nhận được sự góp ý từ q thầy cơ để nhóm hồn
thiện thêm những kiến thức mà nhóm đã học tập, làm hành trang q báu cho nhóm
trong cơng việc sau này. Mọi đóng góp xin vui lịng gửi về email:
hoặc
Sau cùng, nhóm tác giả xin kính chúc quý thầy cô ở khoa Công nghệ phần mềm và
cô Huỳnh Hồ Thị Mộng Trinh thật dồi dào sức khỏe, niềm tin để tiếp tục thực hiện sứ
mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau.
Xin chân thành cảm ơn q thầy cơ !
Nhóm tác giả

3


NHẬN XÉT
(Của giáo viên hướng dẫn)
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................

.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................
.........................................................................................................................

4


DANH SÁCH THÀNH VIÊN NHÓM
Tên thành viên
Mai Long Thành
Nguyễn Thiện Sua

MSSV
19522232
19522144

5

TỔNG QUAN BÁO CÁO
TÊN ĐỀ TÀI: Phát triển xây dựng website so sánh giá bán laptop và phụ kiện trên
các sàn thương mại điện tử.
GIẢNG VIÊN HƯỚNG DẪN: Huỳnh Hồ Thị Mộng Trinh.
THỜI GIAN THỰC HIỆN: Từ ngày 27/02/2023 đến hết ngày 04/07/2023.
NỘI DUNG:
1. Lý do chọn đề tài
-

Máy tính, laptop đang dần trở nên phổ biến trong cuộc sống với giá thành ngày
càng có xu hướng giảm. Hơn nữa, mức thu nhập của mọi người tăng cao, nên ai
cũng có thể sở hữu một chiếc máy tính, laptop để phục vụ cơng việc của mình.

-

Hiện nay để tìm mua một laptop thì sẽ có rất nhiều sàn thương mại điện tử
bn bán với giá thành khác nhau. Do đó người mua sẽ khá là mơ hồ trong việc
lựa chọn điểm mua với giá thành hợp lý nhất.

-

Cũng đã từng là khách hàng loay hoay trong việc lựa chọn sàn thương mại mua
laptop có giá thành hợp lý nhất, chúng em hiểu rõ và mong muốn tìm kiếm
được giải pháp để giải quyết được tình trạng đó. Chúng em quyết định chọn đề
tài này để giúp những người có nhu cầu mua laptop hoặc phụ kiện máy tính có
thể xem xét giá cả sản phẩm trên tất cả sàn thương mại và lựa chọn mua với giá
hợp lý nhất.
Hiện trạng các trang web so sánh hiện nay:
+ Giao diện khó dùng cho những người mới tiếp xúc với thiết bị cơng
nghệ.

+ Thiếu một số tính năng cần thiết.
+ Các tính năng quan trọng chưa thực sự nổi bật.
+ Chưa cho thấy sự thay đổi giá thành sản phẩm.
+ Màu sắc không thu hút.

6


=> Với những vấn đề trên, chúng em quyết định lựa chọn đề tài xây dựng
website so sánh giá bán laptop và phụ kiện trên các sàn thương mại điện tử để
tiến hành nghiên cứu và xây dựng.
2. Những gì đã làm được ở đồ án 1

- Tìm giá tốt nhất cho sản phẩm.
- Có biểu đồ đường thể hiện tỉ lệ lên xuống của 1 sản phẩm trên nhiều sàn
(3 sàn thương mại).
- Xem biến động giá.
- Xem tháng giảm giá nhiều nhất.
3. Mục tiêu đề ra
-

Phát triển thêm chức năng và tối ưu website từ đồ án 1:

+ Đăng nhập/đăng xuất.
+ Xác thực người dùng.
+ Thêm vào danh sách yêu thích.
+ Tối ưu cache, tốc độ load trang.
+ Thêm validate cho các component form.
+ Tự động đặt hàng.
+ Nhận tin khuyến mãi.

4. Phạm vi, quy mô
-

Môi trường, platform: website

-

Phạm vi: so sánh giá trên 3 sàn thương mại điện tử: An phát computer, An
Khang và GearVN.

-

Phạm vi chức năng:
● Đăng nhập/đăng xuất
○ Đăng nhập với username và password.
● Xác thực người dùng
○ Hiển thị permission dựa trên role của user.
○ Chặn user cố ý truy cập vào màn hình khơng được phép truy cập
● Thêm vào danh sách yêu thích
7


○ Thêm sản phẩm vào danh sách yêu thích.
○ Load danh sách yêu thích dựa theo user.
○ Loại bỏ sản phẩm trong danh sách yêu thích.
● Nhận tin khuyến mãi
○ Thơng báo tự động khi có flash sale của sản phẩm mà khách hàng
quan tâm vào email mà khách hàng cung cấp.
● Tự động đặt hàng
○ Tự động đặt hàng khi sản phẩm có giá thấp hơn hoặc bằng giá

người dùng setup.
5. Đối tượng sử dụng: Tất cả người dùng có nhu cầu muốn so sánh giá và tìm
mua laptop và phụ kiện máy tính.
6. Phương pháp thực hiện:
-

Phương pháp làm việc: Làm việc nhóm 2 thành viên thơng qua cả 2 phương
thức online và offline dưới sự hướng dẫn của giảng viên hướng dẫn.

-

Phương pháp nghiên cứu:
+ Phân tích nhu cầu sử dụng của đối tượng người dùng.
+ Nghiên cứu tài liệu các công nghệ liên quan.
+ Kiểm tra, tham khảo các website khác để tối ưu hóa trang web.

-

Phương pháp cơng nghệ:
+ Tìm hiểu về các ngơn ngữ mới và áp dụng framework vào để tối ưu hóa
hiệu suất.
+ Xây dựng giao diện web để tương tác với người dùng và nhận phản hồi,
sửa chữa nếu cần thiết để đưa ra sản phẩm hồn chỉnh nhất.
+ Tìm hiểu cách thức hoạt động của các tính năng trang web.

7. Nền tảng công nghệ:
-

Front-end: html, css, javascript, ReactJS.

-

Back-end: ASP.NET core.

-

Database: MySQL.

-

Validate form: React hook form, class – validator.

-

Xác thực: JWT.
8


-

Tự động đặt hàng: Selenium.

-

Tối ưu tải trang: Lazy loading Technology.

8. Kết quả mong đợi:
-

Hoàn thiện được website đáp ứng đầy đủ mục tiêu đề ra.

-

Trang web có thể thực hiện chính xác u cầu của khách hàng.

-

Trang web có khả năng tương tác với người dùng với mức độ ổn định.

-

Các chức năng của website hoạt động đúng đắn, chính xác, dễ sử dụng.

9. Hướng phát triển:
-

Trang blog.

-

Thêm ngơn ngữ tiếng Anh.

-

Liên kết đến các trang review sản phẩm.

-

Thêm chatbot hỗ trợ.

-

Thêm forum công nghệ.

-

Mở rộng thêm nhiều sản phẩm hơn.

-

Tổng hợp voucher của các sàn thương mại điện tử.

10. Kế hoạch làm việc:
-

Thời gian thực hiện: Từ ngày 27/02/2023 đến hết ngày 17/07/2023.

-

Quy trình làm việc được lên kế hoạch triển khai như sau:
+ Giai đoạn 1 (27/02/2023 - 24/04/2023): Hoàn thiện được sơ bộ front end và chức năng cơ bản. Giai đoạn này gồm 4 sprint:
+ Sprint 1 (27/02/2023 -> 04/03/2023): tìm hiểu cơng nghệ, khảo
sát các trang web liên quan.
+ Sprint 2 (06/03/2023 -> 16/03/2023): phân tích yêu cầu.
+ Sprint 3 (17/03/2023 -> 24/03/2023): xây dựng CSDL, xử lý
ngôn ngữ tự nhiên.
+ Sprint 4 (25/03/2023 -> 24/04/2023): xây dựng website, xây
dựng server, xây dựng một số chức năng cơ bản.
+ Giai đoạn 2 (25/05/2023 - 25/06/2023): Tiếp tục hồn thiện các chức
năng cịn lại và triển khai viết báo cáo. Giai đoạn này gồm 2 sprint:

9


+ Sprint 5 (25/05/2023 -> 21/06/2023: hoàn thiện các chức năng
cịn lại ở giai đoạn 1, tìm và sửa lỗi trong quá trình xây dựng
chức năng.
+ Sprint 6 (22/06/2023 -> 25/06/2023): Triển khai sản phẩm, viết
báo cáo.
+ Giai đoạn 3 (26/06/2023 - 30/06/2023) Kiểm tra lỗi và hoàn thiện sản
phẩm. Giai đoạn này gồm 2 sprint:
+ Sprint 7 (26/06/2023 -> 28/06/2023): Kiểm tra lại tổng quan sản
phẩm và sửa lỗi.
+ Sprint 8 (29/06/2023 -> 30/06/2023): kiểm tra file báo cáo, chỉnh
sửa hoặc thay đổi nếu có.
11. Phân cơng cơng việc:
-

Cơng việc chung:
+ Phân tích yêu cầu.
+ Khảo sát trang web.
+ Tìm hiểu cơng nghệ.
+ Viết báo cáo.

 Cơng việc riêng:
+ Mai Long Thành: front-end, UX/UI design, tối ưu hóa website.
+ Nguyễn Thiện Sua: back-end.

Mục lụcc lục lụcc
CHƯƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI.............................................................13

1.1 Sơ lược đồ án 1.........................................................................................13
10


1.2 Mục tiêu đề tài..........................................................................................14
1.3 Đối tượng nghiên cứu...............................................................................14
1.3.1 Lý Thuyết........................................................................................14
1.3.2 Thực Tiễn........................................................................................14
1.4 Các bước nghiên cứu................................................................................15
1.5 Bố cục đề tài.............................................................................................15
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT......................................................................15
2.1 Tanstack (React query).............................................................................15
2.2 Kỹ thuật Lazyloading................................................................................19
2.3 React hook form.......................................................................................20
2.4 Phân quyền với JWT.................................................................................21
2.5 Selenium...................................................................................................23
CHƯƠNG 3. PHÂN TÍCH ĐẶC TẢ YÊU CẦU.................................................24
3.1 Usecase, đặc tả usecase.............................................................................24
3.1.1 Sơ đồ usecase..................................................................................24
3.1.2 Đặc tả usecase.................................................................................25
3.2 Sequence diagram.....................................................................................38
3.2.1 Tìm kiếm sản phẩm.........................................................................38
3.3 Activity diagram.......................................................................................39
3.3.1 Nhận ưu đãi khuyến mãi..................................................................39
3.4 Collaboration diagram..............................................................................40
3.4.1 Sắp xếp danh sách sản phẩm...........................................................40
CHƯƠNG 4. THIẾT KẾ KIẾN TRÚC.................................................................41
4.1 Kiến trúc tổng thể.....................................................................................41
4.2 Kiến trúc từng thành phần.........................................................................41
4.2.1 Website (client)...............................................................................41

4.2.2 MySQL............................................................................................42
CHƯƠNG 5. THIẾT KẾ DỮ LIỆU......................................................................43
5.1 Sơ đồ logic................................................................................................43
5.2 Mô tả sơ đồ logic......................................................................................43
CHƯƠNG 6. THIẾT KẾ GIAO DIỆN.................................................................45
11


6.1 Sơ đồ các màn hình...................................................................................45
6.2 Danh sách các màn hình...........................................................................45
6.3 Mơ tả các màn hình...................................................................................46
6.3.1 Trang chủ........................................................................................46
6.3.2 Trang tìm kiếm................................................................................47
6.3.3 Màn hình thơng tin sản phẩm..........................................................48
6.3.4 Trang đăng nhập..............................................................................50
6.3.5 Trang đăng ký..................................................................................51
6.3.6 Trang hướng dẫn.............................................................................52
6.3.7 Trang danh sách yêu thích...............................................................53
6.3.8 Trang danh sách theo dõi.................................................................54
6.3.9 Trang danh sách địa chỉ...................................................................54
CHƯƠNG 7. PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG....................................55
7.1 Môi trường phát triển ứng dụng................................................................55
7.2 Môi trường triển khai ứng dụng................................................................56
7.3 Kết quả đánh giá.......................................................................................56
CHƯƠNG 8. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.......................................56
8.1 Kết luận.....................................................................................................56
8.2 Kết quả đạt được.......................................................................................57
8.3 Điểm đặc sắc của đề tài.............................................................................58
8.4 Hướng phát triển.......................................................................................58
TÀI LIỆU THAM KHẢO.....................................................................................58

BẢNG PHÂN CÔNG CÔNG VIỆC.....................................................................59

CHƯƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI
1.1 Sơ lược đồ án 1
- Các tính năng đã hồn thành:
 Đăng nhập/ đăng xuất.
12


 Đăng ký tài khoản.
 Xem danh sách sản phẩm.
 Tìm kiếm sản phẩm.
 So sánh giá.
 Biểu đồ hiển thị giá theo từng thời điểm.
 Quản lí thơng tin cá nhân.
 Cho người dùng tự thêm một sản phẩm trên sàn thương mại bất kì để theo dõi
giá sản phẩm.
 Phân trang.
- Các công nghệ đã sử dụng:
 Front-end: reactjs.
 Back-end: ASP.NET.
- Kết quả đạt được:
 Website hoàn thiện với đầy đủ chức năng đã đặt ra.
 Thực hiện chính xác yêu cầu của khách hàng.
Các vấn đề cần phải xử lý trong website mà đề tài đặt ra trong đồ án 2 là:
ST

Tên yêu cầu

T

Khía cạnh

1

Danh sách xem sản phẩm yêu thích

User

2

Validate input của người dùng

User

3

Danh sách địa điểm

User

4

Tự động đặt hàng

User

5

Danh sách sản phẩm đang theo dõi

User

13


ST

Tên yêu cầu

T

6

Khía cạnh

Điều hướng đến các trang sản phẩm trên sàn thương mại.

User

1.2 Mục tiêu đề tài
Mục tiêu đề tài là nghiên cứu các thuật tốn, cơng nghệ giúp tối ưu những chức năng
đã làm được ở đồ án 1 ngoài ra thêm một vài chức năng nâng cao tạo nên một website
so sánh giá các sản phẩm công nghệ hồn chỉnh – tối ưu hố về mọi mặt, mang lại một
sản phẩm chất lượng.
1.3 Đối tượng nghiên cứu
1.3.1 Lý Thuyết
1. Nghiên cứu kỹ thuật lazyload.
2. Nghiên cứu cách validate form với useForm, class validator.
3. Nghiên cứu tối ưu hóa việc call api với use query.

4. Nghiên cứu xác thực người dùng.
5. Nghiên cứu tự động đặt hàng với selenium
1.3.2 Thực Tiễn
1. Xây dựng ứng dụng gồm client, server.
2. Xây dựng website bằng tiếng Việt.
3. Xây dựng đồ thị bằng dữ liệu có sẵn.
4. Lấy thơng tin, dữ liệu, giá trên các sàn thương mại điện tử.
5. Tự động cập nhật giá sản phẩm sau một thời gian cụ thể.
6. Tự động gửi mail khi có ưu đãi khuyến mãi.
1.4 Các bước nghiên cứu
1. Phân tích yêu cầu.
2. Lựa chọn công nghệ.
3. Nghiên cứu cơ sở lý thuyết dựa trên công nghệ đã chọn.
14


4. Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn.
5. Kiểm tra, tham khảo các ứng dụng khác để tối ưu hóa ứng dụng.
1.5 Bố cục đề tài
 Cơ sở lý thuyết.
 Phân tích thiết kế.
 Giải pháp xây dựng.
 Triển khai ứng dụng.
 Kết luận và hướng phát triển.

CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
Những gì đã nghiên cứu được trong đồ án 1:
 Framework front-end: reactjs.
 Framework back-end: ASP.NET.
 Ngơn ngữ lập trình javascript.

 Cơ sở dữ liệu MySQL.
 Đồ án 2 sẽ dựa trên cơ sở lý thuyết đã nghiên cứu trong đồ án 1, đồng thời
nghiên cứu, áp dụng cách tối ưu và clean source code.
2.1 Tanstack (React query)

Hình 2.1. logo TanStack

15


1. Giới thiệu
React Query là một thư viện quản lý trạng thái và thực hiện yêu cầu mạng
trong ứng dụng React. Nó cung cấp các cơng cụ và API cho phép bạn quản lý
trạng thái ứng dụng, cache dữ liệu, và thực hiện các yêu cầu HTTP hoặc bất kỳ
yêu cầu mạng nào khác.
Thư viện React Query giúp giảm bớt công việc phức tạp liên quan đến quản lý
trạng thái ứng dụng, tối ưu hóa việc truy vấn dữ liệu từ API và cung cấp các
khả năng như caching, tải lại dữ liệu tự động, xử lý lỗi và các tùy chọn tương
tác khác với dữ liệu.
React Query sử dụng các khái niệm như "query" (truy vấn), "mutation" (điều
chỉnh) và "invalidate" (vơ hiệu hóa) để mơ tả các hoạt động quan trọng trong
việc truy vấn và cập nhật dữ liệu. Nó cung cấp các hook như useQuery,
useMutation, và useQueryClient để bạn có thể tận dụng các tính năng này trong
ứng dụng React của mình.
Với React Query, bạn có thể xây dựng các ứng dụng React hiệu quả với khả
năng quản lý trạng thái dễ dàng và tối ưu hóa giao tiếp với API.
2. Cách triển khai react query
1. Cài đặt React Query: Sử dụng npm hoặc yarn để cài đặt React Query
bằng cách chạy lệnh sau trong thư mục dự án:

2. Cung cấp React Query cho ứng dụng: Tại file gốc của ứng dụng React
(thường là index.js hoặc App.js), nhập React Query và bọc ứng dụng
của trong một QueryClientProvider, như sau:

16


3. Sử dụng hook useQuery trong các thành phần của bạn: Trong các thành
phần React, bạn có thể sử dụng hook useQuery để thực hiện các yêu
cầu và quản lý trạng thái dữ liệu.

17


18


2.2 Kỹ thuật Lazyloading

Lazy loading (tải chậm) là một kỹ thuật trong lập trình và thiết kế giao diện
người dùng nhằm giảm thời gian tải và tối ưu hóa hiệu suất ứng dụng. Khi áp dụng
lazy loading, các tài nguyên như hình ảnh, video, hoặc mã nguồn JavaScript được tải
vào ứng dụng theo nhu cầu thực sự của người dùng, thay vì tải tất cả tài nguyên cùng
lúc khi trang web hoặc ứng dụng được mở.
Khi một trang web hoặc ứng dụng được tải lần đầu, chỉ những phần cần thiết
ban đầu được tải, trong khi các phần còn lại được trì hỗn tải cho đến khi cần thiết. Ví
dụ, khi người dùng cuộn trang xuống để xem thêm nội dung, các hình ảnh mới sẽ
được tải khi chúng hiển thị trong tầm nhìn của người dùng. Điều này giúp giảm thời
gian tải ban đầu, tăng tốc độ tải trang và giảm tải cho máy chủ.
Trong ngữ cảnh của ứng dụng web, lazy loading có thể được thực hiện bằng

cách sử dụng thuộc tính loading="lazy" trong các thẻ <img> hoặc <video>, hoặc
thông qua việc sử dụng các thư viện tải chậm chuyên dụng như LazyLoad hay
Intersection Observer API.
Các framework JavaScript như React và Angular cũng cung cấp các cơ chế
lazy loading cho các thành phần hoặc tập tin JavaScript để tối ưu hiệu suất ứng dụng.
Điều này đảm bảo rằng chỉ những thành phần cần thiết cho trang hiện tại được tải,
19


trong khi các thành phần không cần thiết được tải khi cần thiết (ví dụ: khi người dùng
chuyển đổi đến một trang khác).
2.3 React hook form

Trong React, để quản lý và xử lý biểu mẫu (form), bạn có thể sử dụng hook
useForm từ thư viện React Hook Form. React Hook Form là một thư viện hỗ trợ quản
lý biểu mẫu hiệu quả trong React, giúp bạn xử lý kiểm tra, gửi và xác thực dữ liệu một
cách dễ dàng
Cách triển khai:
1. Cài đặt React Hook Form: Sử dụng npm hoặc yarn để cài đặt React Hook Form
bằng cách chạy lệnh sau trong thư mục dự án.

2. Sử dụng useForm trong thành phần.

20