Xây dựng ứng dụng so sánh giá và tự động mua hàng trên các sàn tmđt (các thiết bị đ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

1


ĐỒ ÁN 1
XÂY DỰNG ỨNG DỤNG SO SÁNH GIÁ VÀ TỰ
ĐỘNG MUA HÀNG TRÊN CÁC SÀN TMĐT

GV HƯỚNG DẪN: Ths.Huỳnh Hồ Thị Mộng Trinh
SV THỰC HIỆN:
20520866
20521366

Ngô Quang Vũ
Mai Phạm Quốc Hưng

TP. Hồ Chí Minh, năm 2023 Chí Minh, năm 2023

2


LỜI CẢM ƠN
Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến quý 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 chúng em suốt thời gian qua. Kiến thức mà quý thầy cô đã chia sẻ đã là
nền tảng quan trọng giúp chúng em hoàn thành đề tài này.
Chúng em cũng muốn bày tỏ lòng biết ơn đế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 chúng em hoàn thành đề
tài này. Những lời động viên và góp ý chân tình từ cơ đã là động lực quý giá giúp
chúng em vượt qua khó khăn trong quá trình tìm hiểu và thực hiện đề tài. Trong thời
gian vừa qua, chúng em đã nỗ lực áp dụng những kiến thức nền tảng đã học, học hỏi
và nghiên cứu công nghệ mới để xây dựng đề tài môn học. Tuy nhiên, do kiến thức và
kinh nghiệm cịn hạn chế, khơng tránh khỏi những thiếu sót. Vì vậy, chúng em rất
mong nhận được sự góp ý từ q thầy cơ để hồn thiện thêm kiến thức mà chúng em
đã học, trở thành nền tảng quý báu cho công việc của chúng em trong tương lai.
Cuối cùng, chúng em xin kính chúc q thầy cơ trong khoa Cơng nghệ Phần mềm
và cô Huỳnh Hồ Thị Mộng Trinh một sức khỏe dồi dào và niềm tin để tiếp tục sứ
mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau.

Chân thành cảm ơn thầy cô!
Thành phố Hồ Chí Minh, tháng 7 năm 2023
Nhóm sinh viên thực hiện


NHẬN XÉT CỦA GIẢNG VIÊN
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………

…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
………………


MỤC LỤC

CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI
1.1. Giới thiệu chung

4

1.1.1. Tên đề tài

4

4

1.1.2. Lý do chọn đề tài 4

1.2. Khảo sát một số trang web hiện có

5

1.2.1. Một số website tương tự trên thị trường 6
1.2.2. Nhận xét 7
1.3. Mục tiêu đề ra 8
1.4. Phạm vi, quy mô

9

1.5. Đối tượng nghiên cứu 9
1.5.1. Lý Thuyết 9
1.5.2. Thực tiễn 9
1.6. Phương pháp thực hiện 10
1.7. Nền tảng công nghệ

10

1.8. Kết quả mong đợi

10

1.9. Kế hoạch thực hiện

10

CHƯƠNG 2. CƠ SỞ LÝ THUYẾT 12
2.1. Cheerio

12

2.2. BeautifulSoup
2.3. Flutter

16

2.4. NodeJS

17

14

2.4.1. NodeJS là gì? 17
2.4.2. Cách NodeJS hoạt động

18

2.4.3. Cách NodeJS hoạt động

18

2.5. ExpressJS

19

2.5.1. ExpressJS là gì?

19

2.5.2. Tính năng của ExpressJS
2.6. ExpressJS

20

2.6.1. MongoDB là gì:

20

19


2.6.2. Ưu điểm của MongoDB:

21

CHƯƠNG 3. PHÂN TÍCH ĐẶC TẢ YÊU CẦU

22

3.1. Usecase, đặc tả Usecase 22
3.1.1. Sơ đồ usecase22
3.1.2. Đặc tả Usecase

22

3.2. Sequence Diagram 33
3.2.1. Tìm kiếm sản phẩm 33
3.2.2. Xem thông tin chi tiết sản phẩm
3.2.3. Tạo Order
3.3. Activity Diagram

34

35
35

CHƯƠNG 4. THIẾT KẾ KIẾN TRÚC

36

4.1. Kiến trúc tổng thể 36
4.2. Kiến trúc từng phần
4.2.1. Kiến trúc FE

37

37

4.2.2. Kiến trúc BE 39

CHƯƠNG 5. THIẾT KẾ DỮ LIỆU 39
5.1. Database

39

5.2. Mô tả

40

CHƯƠNG 6. THIẾT KẾ GIAO DIỆN
6.1. Sơ đồ liên kết màn hình

42

6.2. Danh sách màn hình

42

6.2.1. Trang chủ

42

42

6.2.1.1. Màn hình

42

6.2.1.2. Mơ tả màn hình

43

6.2.2. Màn hình danh sách sản phẩm
6.2.2.1. Màn hình

44

6.2.2.2. Mơ tả màn hình
6.2.3. Chi tiết sản phẩm

46

6.2.3.1. Màn hình

46

44

6.2.3.2. Mơ tả màn hình

46

6.2.4. Màn hình khuyến mãi

48
1

44


6.2.4.1. Màn hình

48

6.2.4.2. Mơ tả màn hình

48

CHƯƠNG 7. HƯỚNG PHÁT TRIỂN VÀ CÀI ĐẶT

49

7.1. Môi trường phát triển ứng dụng 49

7.2. Môi trường triển khai ứng dụng 49
7.3. Kết quả đánh giá

49

7.4. Hướng phát triển 49

CHƯƠNG 8. KẾT LUẬN 51
8.1. Kết quả đạt được 51
8.2. Điểm đặc sắc của đề tài

TÀI LIỆU THAM KHẢO

51

53

BẢNG PHÂN CÔNG CÔNG VIỆC 54

MỤC LỤC ẢNH
Hình 1.1. Website websosanh.vn 6
Hình 1.2. shopping.google.com
Hình 1.3. sosanhgia.com

6

7

Hình 2.1. Logo của Cheerio 12
Hình 2.2. Github của Cheerio

13

Hình 2.3. Một số selectors syntax trong Cheerio 13
Hình 2.4. Một số ví dụ về Beautiful Soup 16
Hình 2.5. Logo của Flutter 16
Hình 2.6. Logo của NodeJS 18
Hình 2.7. Logo của NodeJS 20
Hình 3.1. Sơ đồ Usecase

22

Hình 3.2. Sequence Diagram tìm kiếm sản phẩm

33

Hình 3.3. Sequence Diagram xem thơng tin chi tiết sản phẩm 34
Hình 3.4. Sequence Diagram tạo Order 35
Hình 3.5. Activity Diagram nhận báo giá 36

2


Hình 4.1. Mơ hình kiến trúc tổng thể
Hình 4.2. Mơ tả kiến trúc FE

36

37

Hình 5.1. Database 40
Hình 6.1. Sơ đồ liên kết màn hình 42
Hình 6.2. Màn hình trang chủ

43

Hình 6.3. Màn hình danh sách sản phẩm 44
Hình 6.4. Màn hình chi tiết sản phẩm
Hình 6.5. Màn hình khuyến mãi

46

48

MỤC LỤC BẢNG
Bảng so sánh một số UI và chức năng chính của các website so sánh giá
Danh sách Usecase 22
UC1: Tìm kiếm sản phẩm

23

UC2: Lọc sản phẩm 24
UC3: Sắp xếp sản phẩm

25

UC4: Sắp xếp giá tăng dần 26
UC5: Sắp xếp giá giảm dần 28
UC6: Xem thông tin sản phẩm
UC7: So sánh giá

29

30

UC8: Xem chi tiết kỹ thuật 31
UC9: Xem biểu đồ biến động

32

Mô tả thành phần hệ thống:

38

Bảng mô tả Order

40

Bảng mô tả Product 40

3

7


Bảng mơ tả ArrayPriceProduct

41

Bảng mơ tả màn hình trang chủ

43

Bảng mơ tả màn hình danh sách sản phẩm
Bảng mơ tả màn hình chi tiết sản phẩm 46
Bảng mơ tả màn hình khuyến mãi 48

4

44


NỘI DUNG ĐỒ ÁN
CHƯƠNG 1.
1.1.

TỔNG QUAN ĐỀ TÀI

Giới thiệu chung
DANH SÁCH THÀNH VIÊN NHĨM

Tên thành viên
Ngơ Quang Vũ
Mai Phạm Quốc Hưng

1.1.1.

MSSV
20520866
20521366

Tên đề tài

XÂY DỰNG ỨNG DỤNG SO SÁNH GIÁ VÀ TỰ ĐỘNG MUA HÀNG TRÊN CÁC SÀN
TMĐT (CÁC THIẾT BỊ ĐIỆN TỬ)
1.1.2. Lý do chọn đề tài
- Đề tài xây dựng website so sánh giá bán laptop và các thiết bị điện trên các
sàn thương mại điện tử được bọn em lựa chọn với nhiều lý do. Trước hết,
laptop, điện thoại di động, hay các thiết bị điện tử ngày càng trở nên phổ
biến trong cuộc sống hàng ngày. Hiện nay thì mỗi cá nhân các bạn học sinh
sinh viên hay những người đi làm đều sở hữu ít nhất một hay thậm chí là
nhiều các sản phẩm điện tử. Nên nhu cầu mua hàng của các thiết bị điện tử
rất cao và sự phát triển của Internet dẫn đến xu hướng mua hàng mới đó là
mua hàng online trên các sản thương mại điện tử trở nên phổ biến.
-

Tuy nhiên, việc tìm kiếm một sản phẩm ưng ý với giá hợp lý trên các sàn
thương mại điện tử trở nên phức tạp. Hiện nay, có rất nhiều sàn TMĐT bán
cùng một loại sản phẩm hay thậm chí là trên cùng 1 sản sàn TMĐT có nhiều
gian hàng cùng bán 1 sản phẩm với mức giá khác nhau, làm cho người mua
khá bối rối trong việc lựa chọn điểm mua với giá cả phù hợp nhất.

-

Nhận thấy tình trạng này và mong muốn tìm giải pháp để giải quyết vấn đề
trên. Do đó, chúng em đã quyết định chọn đề tài xây dựng website so sánh

5

giá bán laptop và phụ kiện trên các sàn thương mại điện tử. Mục tiêu của
chúng em là giúp người mua có thể dễ dàng xem xét giá cả sản phẩm trên
tất cả các sàn TMĐT và lựa chọn mua với giá hợp lý nhất.
-

Hiện tại, các trang web so sánh giá hiện có thường gặp một số hạn chế:
● Giao diện khó sử dụng, đặc biệt đối với những người mới tiếp xúc với
thiết bị cơng nghệ.
● Các tính năng quan trọng cần thiết vẫn chưa được nổi bật và chưa
cho thấy sự thay đổi giá thành sản phẩm.
● Hơn nữa, màu sắc của các trang web này thường không thu hút
người dùng.

-

Với những vấn đề trên, chúng em quyết định xây dựng một trang web so
sánh giá bán laptop và phụ kiện với giao diện thân thiện, dễ sử dụng đối với
người dùng mới. Chúng em sẽ tập trung vào việc phát triển các tính năng
quan trọng như hiển thị giá cả cạnh tranh từ các sàn TMĐT khác nhau và
cung cấp thông tin chi tiết về sản phẩm để người dùng có thể đưa ra quyết
định mua hàng thơng minh.

-

Bên cạnh đó, chúng em cũng sẽ thiết kế giao diện trực quan và thu hút để
tạo sự hứng thú cho người dùng khi sử dụng trang web của chúng em.

-

Với đề tài này, chúng em hy vọng có thể đóng góp vào việc giải quyết vấn đề

mua sắm laptop và phụ kiện với giá thành hợp lý, đồng thời mang lại trải
nghiệm mua sắm thuận tiện và tiết kiệm thời gian cho người dùng.

1.2.

Khảo sát một số trang web hiện có

6


1.2.1.

Một số website tương tự trên thị trường

Hình 1.1.

Website websosanh.vn

Hình 1.2.

shopping.google.com

7


Hình 1.3.
1.2.2.

sosanhgia.com

Nhận xét

Bảng so sánh một số UI và chức năng chính của các website so sánh giá
Tên trang
web/Chức năng
Tìm kiếm

websosanh.vn

Nhanh chóng,
nhiều bộ lọc

Shopping.google.co
m

sosanhgia.com

Nhanh chóng, nhiều
bộ lọc

Nhanh chóng,
nhiều bộ lọc

Thơng tin chi tiết Đầy đủ
sản phẩm

Khá sơ sài

Đầy đủ

Nhà cung cấp

Đa dạng

Đa dạng

Báo giá (khi giá Khơng có tính
sp quan tâm hạ năng này
xuống)

Khơng có tính năng
này

Khơng có tính
năng này

Lịch sử giá

Khơng có tính
năng này

Khơng có tính năng
này

Khơng có tính
năng này

UI/UX

Nhiều chức năng

nhưng lại khá dư
thừa

Trực quan, dễ nhìn,
dễ sử dụng

Trực quan, dễ
nhìn, dễ sử dụng

Đa dạng

8


Ưu điểm:
-

Giúp người dùng tiết kiệm thời gian và công sức khi tìm kiếm sản phẩm và
so sánh giá cả từ nhiều nhà bán lẻ khác nhau.

-

Cung cấp thông tin chi tiết về sản phẩm, giá cả và đánh giá từ người dùng,
giúp người dùng có thể đưa ra quyết định mua hàng thơng minh hơn.

-

Có thể tìm được giá tốt nhất cho sản phẩm mình đang tìm kiếm, giúp tiết
kiệm được chi phí.

-

Các trang web so sánh giá thường có tính năng báo giá, giúp người dùng có
thể theo dõi giá sản phẩm yêu thích và mua hàng khi giá đạt mức mong
muốn.

-

Các trang web so sánh giá thường có đầy đủ thơng tin về các chương trình
khuyến mãi và mã giảm giá, giúp người dùng mua hàng với giá rẻ hơn.

Nhược điểm:
-

Các trang web so sánh giá không phải lúc nào cũng cập nhật đầy đủ thông
tin về sản phẩm và giá cả mới nhất, do đó có thể gây ra sai sót khi so sánh
giá cả.

-

Các trang web so sánh giá có thể khơng liên kết với tất cả các nhà bán lẻ
trên thị trường, do đó có thể bỏ lỡ một số ưu đãi và chương trình khuyến
mãi tốt từ các nhà bán lẻ khơng có trên trang web so sánh giá.

-

Các trang web so sánh giá có thể khơng có giá tốt nhất cho tất cả các sản
phẩm, do đó người dùng cần phải tìm hiểu nhiều nguồn thông tin và so sánh
giá cả từ nhiều trang web khác nhau.

-

Các trang web so sánh giá có thể bị ảnh hưởng bởi quảng cáo và ưu tiên
những sản phẩm của các đối tác liên kết, không phản ánh đầy đủ sự thật về
các sản phẩm và giá cả.

1.3.
-

Mục tiêu đề ra
Xây dựng website giải quyết các vấn đề sau:

9


● Xem biến động giá.
● Tìm giá tốt nhất cho sản phẩm.
● Xem thông tin mô tả sản phẩm và giá bán trên các sàn TMDT khác.
● Lọc sản phẩm.
● Nhận thông tin khuyến mãi.
● Nhận thông báo khi sản phẩm u thích giảm giá.
1.4.
-

Phạm vi, quy mơ
Mơi trường, platform: mobile
Phạm vi chức năng:
● Biểu đồ đường thể hiện biến động giá của sản phẩm: Có số liệu chi tiết.
Hiển thị rõ sự lên xuống của giá sản phẩm trên 1 sàn thương mại theo
từng tháng.

● Tìm giá tốt nhất cho sản phẩm: Hiển thị danh sách sàn thương mại có
bán sản phẩm, ưu tiên hiển thị các sản phẩm có giá thấp nhất.
● Lọc sản phẩm: Lọc sản phẩm theo số tiền, phân loại,..
● Nhận tin khuyến mãi: Thông tin về các khuyến mãi ưu đãi
● Biến động giá sản phẩm: Biểu đồ thể hiện giá sản phẩm trong ngày (cách
6 tiếng cập nhật giá).
● Báo giá sản phẩm: Khi sản phẩm của user quan tâm giảm đến mức giá
mà user mong muốn thì sẽ có email gửi đến email thông báo cho user.

1.5. Đối tượng nghiên cứu
1.5.1. Lý Thuyết
- Nghiên cứu các framework, lib.
-

Nghiên cứu ngôn ngữ lập trình Javascript.

-

Nghiên cứu Flutter, NodeJS

-

Nghiên cứu MongoDB.

1.5.2. Thực tiễn
- Xây dựng ứng dụng gồm client, server.
-

Xây dựng ứng dụng.

10


-

Xây dựng đồ thị bằng dữ liệu có sẵn.

-

Lấy thơng tin, dữ liệu, giá trên các sàn thương mại điện tử.

-

Tự động cập nhật giá sản phẩm sau một thời gian cụ thể.

-

Tự động gửi mail khi sản phẩm hạ giá.

1.6.
-

Phương pháp thực hiện
Nghiên cứu hiện trạng:
● Tìm hiểu nhu cầu người dùng.
● Tìm hiểu thơng tin về các cơng nghệ thực hiện.
● Nghiên cứu, tham khảo những website tương tự trên thị trường.

-

Tìm hiểu cơng nghệ:
● Tìm hiểu ngơn ngữ, các lib và framework liên quan để thực hiện và tối
ưu hóa hiệu suất.
● Xây dựng ứng dụng và tiến hành kiểm thử, cải tiến.
● Tiến hành triển khai, nhân phản hồi và cải thiện.

1.7.
-

Nền tảng công nghệ
Front-end: Flutter

-

Back-end: NodeJS, ExpressJS

-

Database: MongoDB

1.8.
-

Kết quả mong đợi
Hoàn thiện được website đáp ứng đầy đủ mục tiêu đề ra.

-

Đáp ứng được nhu cầu của người dùng trong thực tế.

-

Ứng dụng có khả năng tương tác với người dùng ở 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.

-

Đáp ứng được mong muốn thực tế của người dùng.

1.9.

Kế hoạch thực hiện

Sprint
1

Nội dung

Thời gian

Tìm hiểu đề tài, công nghệ và những
thông tin liên quan

11

27/2 - 13/3

2

Phân tích yêu cầu, đưa ra danh sách chức

13/3 - 27/3

năng
3

Thiết kế, xây dựng CSDL

27/3 - 10/4

4

Thiết kế UI cơ bản, xây dựng server cơ

10/4 - 24/4

bản
5

Xây dựng các chức năng

24/4 - 8/5

Xây dựng server, kết nối và thiết kế
Database
6

Hoàn thiện chắc chức năng, UI của ứng

8/5 - 22/5

dụng
Hoàn thiện các logic phía server
7

Kiểm thử, triển khai ứng dụng và tiếp

22/5 - 5/6

nhận phản hồi
8

Sửa lỗi, cải tiến và viết báo cáo

12

5/6 - 19/6


CHƯƠNG 2.

CƠ SỞ LÝ THUYẾT

2.1. Cheerio
- Cheerio là một thư viện mã nguồn mở được sử dụng để phân tích và xử lý
HTML hoặc XML trong NodeJS. Nó cung cấp một cú pháp dễ sử dụng, dựa trên

cú pháp CSS, cho phép bạn lựa chọn các phần tử trong tài liệu và thực hiện các
thao tác trên chúng.
-

Cheerio cũng là thư viện khá phổ biến trong Webscraping đặc biệt là trong mơi
trường NodeJS. Cheerio hoạt động với mơ hình DOM nhất quán, rất đơn giản.
Kết quả là việc phân tích cú pháp, thao tác và hiển thị cực kỳ hiệu quả.

Hình 2.1.

Logo của Cheerio

13


Hình 2.2.

-

Github của Cheerio

Hình 2.3. Một số selectors syntax trong Cheerio
Dưới đây là một số đặc điểm chính và lợi ích của Cheerio:
● Dễ sử dụng: Cheerio có cú pháp tương tự jQuery, vì vậy nếu bạn đã quen
thuộc với jQuery, việc sử dụng Cheerio sẽ rất dễ dàng.
● Tương thích với NodeJS: Cheerio được thiết kế để hoạt động trên NodeJS và
khơng u cầu mơi trường trình duyệt. Điều này làm cho nó trở thành một
14

cơng cụ hữu ích khi bạn đang xử lý dữ liệu trên máy chủ.
● Phân tích HTML/XML: Cheerio cho phép bạn phân tích các tài liệu HTML
hoặc XML và trích xuất thơng tin từ chúng. Bạn có thể tìm kiếm các phần tử,
thuộc tính, nội dung văn bản và thậm chí các dạng kết hợp của chúng.
● Xử lý dữ liệu: Cheerio cho phép bạn thay đổi nội dung của các phần tử,
thêm/xóa phần tử, và chỉnh sửa thuộc tính. Bạn có thể sử dụng các phương
thức của Cheerio để thực hiện các thao tác như thêm lớp CSS, thay đổi giá
trị thuộc tính, lấy nội dung HTML và nhiều hơn nữa.
● Tích hợp dễ dàng: Cheerio tích hợp tốt với các công cụ và thư viện khác
trong hệ sinh thái NodeJS. Bạn có thể kết hợp Cheerio với các thư viện như
Axios hoặc Request để tải dữ liệu HTML/XML từ các nguồn bên ngoài và sử
dụng Cheerio để phân tích và xử lý dữ liệu.
-

Với khả năng mạnh mẽ và dễ sử dụng, Cheerio đã trở thành một công cụ phổ
biến cho việc webscraping đặc biệt là trong NodeJS. Từ việc tìm kiếm dữ liệu từ
trang web, xây dựng các ứng dụng liên quan đến dữ liệu, hoặc thực hiện phân
tích dữ liệu tự động, Cheerio là một lựa chọn tuyệt vời để giúp bạn trích xuất
và xử lý dữ liệu một cách hiệu quả từ các trang web.

2.2.
-

BeautifulSoup
Beautiful Soup là một thư viện Python được sử dụng phổ biến để phân tích và
trích xuất dữ liệu từ HTML và XML. Nó cung cấp một cách dễ dàng để phân tích
cú pháp các trang web và tài liệu XML, và trích xuất thơng tin từ chúng.

-

Với Beautiful Soup, bạn có thể xây dựng một cây cấu trúc dữ liệu từ một trang
web hoặc tài liệu XML và dễ dàng tìm kiếm, lấy thơng tin và thay đổi các phần
tử của cây cấu trúc đó.

-

Các chức năng chính của Beautiful Soup bao gồm:

15