Xây dựng WEBSITE bán hàng với dữ liệu lớn

ĐẠ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

VƯƠNG THỊNH ĐẠT – 17520343
ĐINH HOÀNG NHI – 17520853

BÁO CÁO ĐỒ ÁN 2
XÂY DỰNG WEBSITE BÁN HÀNG VỚI DỮ LIỆU LỚN

GIẢNG VIÊN HƯỚNG DẪN
THS. HUỲNH HỒ THỊ MỘNG TRINH

TP. HỒ CHÍ MINH, 2021


LỜI MỞ ĐẦU
Ngày nay, nhờ có kĩ thuật số cuộc sống của con người được cải thiện rất nhiều,
nhanh chóng và thuận tiện hơn. Thương mại điện tử đang có xu hướng phát triển mạnh
qua từng ngày. Chúng ta có thể đặt những món hàng mình u thích ngay tại nhà chỉ
trong vòng vài phút bằng những ứng dụng mua hàng trên điện thoại hoặc thông qua các
website bán hàng online. Từ đó có thể thấy nó giúp chúng ta tiết kiệm được khối lượng
lớn thời gian để có thể tập trung vào những cơng việc khác.
Từ đó có thể thấy được các lợi ích mà một website thương mại điện tử mang lại sẽ
tạo thành một thế mạnh để phát triển nền kinh tế đất nước. Ở đồ án này, chúng em xây
dựng một website thương mại điện tử hướng tới mặt hàng chính là laptop, tuy nhiên với
sự cải tiến về công nghệ và kĩ thuật đã được xây dựng từ đồ án 1, kèm theo việc sẽ tập
trung vào lượng dữ liệu thực tế lớn của một số trang thương mại điện tử.
Đồ án vẫn sẽ giữ lại những chức năng quan trọng của một website bán hàng
online, tuy nhiên sẽ tập trung cải thiện hơn về mặt công nghệ sử dụng cũng như khối

lượng dữ liệu đầu vào và nghiên cứu cách tối ưu khi xử lí dữ liệu.
Nhóm cũng xin gửi lời cảm ơn chân thành nhất đến cơ Huỳnh Hồ Thị Mộng Trinh
vì đã hỗ trợ nhiều ý tưởng và kĩ thuật trong quá trình phát triển đồ án này.
Chúng em xin chân thành cảm ơn!
Nhóm thực hiện đồ án.


MỤC LỤC
Chương 1. MỞ ĐẦU........................................................................................................9
1.1. Lí do chọn đề tài....................................................................................................9
1.2. Mục đích chọn đề tài.............................................................................................9
1.3. Đối tượng và phạm vi nghiên cứu:.....................................................................10
1.3.1. Đối tượng nghiên cứu.....................................................................................10
1.3.2. Phạm vi nghiên cứu........................................................................................10
Chương 2. TỔNG QUAN...............................................................................................11
2.1. Một số vấn đề còn tồn tại từ đồ án 1..................................................................11
2.2. Vấn đề nghiên cứu...............................................................................................11
Chương 3. NGHIÊN CỨU.............................................................................................12
3.1. Các công nghệ sử dụng để cải tiến ứng dụng....................................................12
3.1.1. Java Spring Framework..................................................................................12
3.1.2. ReactJS Library..............................................................................................12
3.1.3. Redis............................................................................................................... 12
3.1.4. MariaDB.........................................................................................................12
3.1.5. Python 3.........................................................................................................13
3.2. Kĩ thuật lấy nguồn dữ liệu..................................................................................13
3.3. Hosting ứng dụng................................................................................................13
3.4. Một số kĩ thuật tối ưu trong việc xử lí dữ liệu...................................................14
Chương 4. CÁCH THỰC HIỆN...................................................................................14
4.1. Phân tích các cơng nghệ và cách ứng dụng vào đồ án......................................14
4.2. Kiến trúc hệ thống:.............................................................................................15

4.2.1. Kiến trúc tổng quan:.......................................................................................15


4.2.2. Mô tả kiến trúc:..............................................................................................17
4.3. Kiến trúc mã nguồn:...........................................................................................18
4.3.1. Link source code đồ án nhóm:........................................................................18
/>4.3.2. Cấu trúc mã nguồn phía client-side:...............................................................18
4.3.3 Cấu trúc mã nguồn phía server-side:...............................................................18
4.4. Cách crawl dữ liệu từ một website:...................................................................19
4.4.1. Cấu trúc của module laptop-store-crawl:........................................................19
4.4.2. Phân tích bài tốn:..........................................................................................19
4.5. Kiểm thử RESTful Web Service được tạo:........................................................20
4.5.1. Kiểm thử RESTful Web Service bằng Postman:............................................20
4.5.2. Thao tác trên Website:....................................................................................22
4.5.3. Ghi chú...........................................................................................................23
4.6. Phương pháp xử lí một số bài toán cơ bản:.......................................................24
4.6.1. Phân quyền người dùng truy cập trang:..........................................................24
4.6.2. Bảo mật và xác thực thông tin người dùng:....................................................24
4.6.3. Tối ưu hóa tốc độ tải trang:.............................................................................24
4.6.4. Tối ưu hóa cơng cụ tìm kiếm (SEO):..............................................................24
4.6.5. Bài tốn xử lí số lượng:..................................................................................25
4.6.6. Xác thực địa chỉ tại Việt Nam:........................................................................25
4.6.7. Nguồn dữ liệu mẫu:........................................................................................25
4.6.8. Tối ưu dữ liệu:................................................................................................25
4.7. Chức năng của các thành phần giao diện:.........................................................26
4.7.1. Mục lục điều hướng:.......................................................................................26


4.7.2. Thanh tìm kiếm theo tên:................................................................................26
4.7.3. Bộ lọc tìm kiếm:.............................................................................................26

4.7.4. Biển quảng cáo:..............................................................................................28
4.7.5. Phân mục sản phẩm........................................................................................28
4.7.6. Mô tả tổng quan sản phẩm:.............................................................................29
4.7.7. Thông tin chi tiết sản phẩm:...........................................................................31
4.7.8. Danh mục sản phẩm tương tự:........................................................................32
4.7.9. Mục hỏi đáp sản phẩm:...................................................................................32
4.7.10. Mục đánh giá sản phẩm:...............................................................................34
4.7.11. Danh mục giỏ hàng:......................................................................................35
4.7.12. Màn hình tạo đơn đặt hàng:..........................................................................36
4.7.13. Mục lục điều hướng quản lí thơng tin cá nhân:.............................................37
4.7.14. Các màn hình quản lí thơng tin cá nhân:.......................................................38
4.7.15. Các màn hình quản lí thơng tin cửa hàng:....................................................42
Chương 5. KẾT LUẬN..................................................................................................46
5.1 Các kết quả đạt được...........................................................................................46
5.2 Nhược điểm và hạn chế........................................................................................47
Chương 6. HƯỚNG PHÁT TRIỂN..............................................................................48
6.1. Hướng phát triển về mặt tính năng:..................................................................48
6.2. Hướng phát triển về mặt kĩ thuật:.....................................................................48
Chương 7. TÀI LIỆU THAM KHẢO...........................................................................49


DANH MỤC HÌNH
Hình 1. Kiến trúc luồng xử lí giữa client-side và server-side...........................................16
Hình 2. ERD Cơ sở dữ liệu cho đồ án..............................................................................17
Hình 3. Kiến trúc xử lí giữa client và server của một microservice..................................18
Hình 4. URL Endpoint và Content-Type header..............................................................21
Hình 5. Request body theo chuẩn JSON..........................................................................21
Hình 6. Bearer Token JWT...............................................................................................21
Hình 7. Response khi request thành cơng.........................................................................22
Hình 8. Database sau khi thực hiện request......................................................................22

Hình 9. Response khi request Unauthorized.....................................................................22
Hình 10. Các trường thơng tin được nhập........................................................................23
Hình 11. Popup thơng báo khi u cầu khơng thể thực hiện............................................22
Hình 12. Danh sách địa chỉ đã bao gồm địa chỉ vừa tạo khi xử lí u cầu thành cơng.....24
Hình 13. Phần code thực hiện POST request sử dụng Axios............................................23
Hình 14. Mục lục điều hướng...........................................................................................26
Hình 15. Thanh tìm kiếm theo tên....................................................................................26
Hình 16. Bảng lọc tìm kiếm.............................................................................................27
Hình 17. Biển quảng cáo..................................................................................................29
Hình 18. Phân mục sản phẩm.........................................................................................290
Hình 19. Mơ tả tổng quan sản phẩm.................................................................................30
Hình 20. Thơng tin chi tiết sản phẩm...............................................................................32
Hình 21. Danh mục sản phẩm tương tự............................................................................33
Hình 22. Mục hỏi đáp sản phẩm.......................................................................................34
Hình 23. Mục đánh giá sản phẩm.....................................................................................35
Hình 24. Danh mục giỏ hàng...........................................................................................36
Hình 25. Màn hình tạo đơn đặt hàng................................................................................37
Hình 26. Mục lục điều hướng quản lí thơng tin cá nhân...................................................38
Hình 27. Màn hình quản lí thơng tin người dùng.............................................................39
Hình 28. Màn hình quản lí sổ địa chỉ giao hàng...............................................................39


Hình 29. Màn hình quản lí mật khẩu................................................................................39
Hình 30. Màn hình danh sách đơn hàng...........................................................................39
Hình 31. Màn hình theo dõi trạng thái đơn hàng..............................................................40
Hình 32. Màn hình theo dõi các cột mốc..........................................................................41
Hình 33. Màn hình quản lí danh sách các đơn hàng.........................................................43
Hình 34. Màn hình quản lí danh sách laptop....................................................................44
Hình 35. Màn hình quản lí danh sách q khuyến mãi.....................................................45
Hình 36. Màn hình quản lí đánh giá.................................................................................46

Hình 37. Màn hình quản lí hỏi đáp và trả lời....................................................................47


TÓM TẮT ĐỒ ÁN
 Đồ án tập trung nghiên cứu hai vấn đề chính: cách thiết kế mơ hình ứng dụng web (ở
cấp độ cơ bản) và xử lí dữ liệu với khối lượng data khá lớn từ các nguồn dữ liệu thực
tế.
 Nhóm đã tiếp cận thơng qua việc sử dụng và phân tích từ các sản phẩm thực tế như các
trang web thương mại điện tử lớn như thegioididong và Tiki, đồng thời tìm hiểu thêm
về một số yêu cầu kĩ thuật cần có trong trang web bán hàng online và xu hướng phát
triển web hiện đại, cộng thêm những kiến thức đã được cung cấp từ các thầy cô khoa
Công nghệ phần mềm để lên kế hoạch thực hiện và triển khai thực hiện đề tài này.
 Đồ án đã có một số thay đổi và cải tiến về cấu trúc, code base cũng như công nghệ sử
dụng so với đồ án 1, tuy nhiên các công nghệ chủ đạo là Java và ReatJS vẫn giữ
nguyên.
 Sau hơn 3 tháng nghiên cứu, phân tích, tìm hiểu và bảo trì, sản phẩm của nhóm đã có
những cái tiến đáng kể về mặt xử lí khối lượng dữ liệu khá lớn và vẫn có khả năng
scale với lượng data lớn hơn từ 5 – 10 lần nhưng vẫn đảm bảo hiệu năng, đây cũng có
thể xem như là một thành cơng trong việc xây dựng đồ án của nhóm.
 Trong quá trình tìm hiểu và phát triển đồ án dĩ nhiên khơng thể tránh khỏi những thiếu
sót, nhóm cũng rất mong có thể nhận được sự đánh giá và góp ý từ các thầy cơ để có
thêm kinh nghiệm trong việc phát triển phần mềm cần ứng dụng kiến thức của những
kĩ thuật này trong tương lai.


Chương 1. MỞ ĐẦU
1.1. Lí do chọn đề tài


Website thương mại điện tử phục vụ cho việc mua sắm trực tuyến khơng

cịn q xa lạ trong thời đại cơng nghệ ngày nay. Tuy nhiên việc xây dựng
một trang web thương mại điện tử địi hỏi khá nhiều chi phí thực hiện: nếu
sử dụng các template phục vụ tạo sẵn sẽ bị hạn chế về nhiều tính năng,
chức năng, hiệu suất trang web và chi phí duy trì; mặt khác, nếu cần xây
dựng một trang web theo ý muốn lại đòi hỏi nhiều về kĩ thuật và chi phí
phát triển, cũng như áp dụng nhiều công nghệ mới cho việc phát triển một



website bán hàng thương mại điện tử.
Các bài toán về việc xây dựng một trang web bán hàng online ln đầy
tính thử thách và hấp dẫn với các lập trình viên, đặc biệt là về mặt kĩ
thuật lập trình, song song đó nếu thực hiện tốt, sản phẩm có thể trở thành



khung mẫu (template) tùy biến theo từng đối tượng khách hàng.
Trong đồ án môn học này, kết hợp cùng các kiến thức đã học về quy
trinh, tìm hiểu nghiệp vụ, công nghệ phát triển phần mềm và đặc biệt là kĩ
thuật xây dựng một website thương mại điện tử, đồng thời nhằm cải thiện
những thiếu sót trong đồ án 1 và định hướng phát triển của giảng viên
hướng dẫn. Nhóm đã quyết định xây dựng một website bán hàng với dữ
liệu lớn với nhiều cải tiến hơn về mặt kĩ thuật, đồ án 2 cũng có thể gọi là
một dự án bảo trì và nâng cấp từ đồ án 1.

1.2. Mục đích chọn đề tài


Về tính kĩ thuật, việc bảo trì và nâng cấp một website khi lượng dữ liêu
đầu vào lớn là điều bắt buộc cần thực hiện so với một website chỉ xử lí

lượng dữ liệu nhỏ ban đầu; đồng thời sẽ có những cải tiến và áp dụng nhiều



kĩ thuật hơn khi khối lượng dữ liệu tăng cao…
Về mặt chức năng, website thương mại điện tử địi hỏi cần thực hiện rất
nhiều bài tốn nghiệp vụ cần vận dụng các kiến thức về phân tích và xây
dựng phần mềm, đồng thời còn yêu cầu phát triển tính bảo mật, tối ưu hóa


trang web, xử lí dữ liệu, và hơn hết là đảm bảo tốc độ tải trang không quá


lâu với lượng dữ liệu lớn...
Từ đó, trong q trình thực hiện đồ án, nhóm sẽ thực hiện bảo trì được
một website bán hàng thương mại điện tử với dữ liệu lớn có đủ khả năng
ứng dụng thực tiễn lẫn nghiên cứu và áp dụng các công nghệ mới trong xu
thế phát triển web hiện đại.

1.3. Đối tượng và phạm vi nghiên cứu:
1.3.1. Đối tượng nghiên cứu
 Quy trình kiến trúc ứng dụng web và một số công nghệ sử dụng khi khối lượng
dữ liệu đầu vào lớn và cần chịu tải cao.
 Một số kĩ thuật xử lí dữ liệu trong website thương mai điện tử nhằm tối ưu hiệu
suất trang web trong việc xử lí các yêu cầu người dùng.
1.3.2. Phạm vi nghiên cứu
 Vì đồ án sẽ tập trung vào việc bảo trì, nâng cấp cũng như có sự thay đổi về mặt
dữ liệu, nên phần lớn các nội dung trình bày sẽ thiên nhiều về hướng kĩ thuật và
kiến trúc.
 Phần giao diện của website được xây dựng dựa trên bộ thư viện Javascript do

Facebook phát hành là ReactJS – một trong các framework phát triển giao diện
web (front-end) phổ biến nhất hiện tại.
 Phần server được xây dựng trên công nghệ Java Spring với nhiều công nghệ hỗ
trợ đi kèm khác phục vụ rất tốt cho việc phát triển ứng dụng web như Spring
MVC, Spring Security, Spring Data…
 Ngồi ra nhóm cịn nghiên cứu một số kĩ thuật, cơng nghệ cho website khi có
dữ liệu đầu vào lớn.


Chương 2. TỔNG QUAN
2.1. Một số vấn đề còn tồn tại từ đồ án 1


Cơng nghệ sử dụng phía backend đã cũ và chỉ phù hợp với các hệ thống
rất lớn (Microservice, Karaf, Kafka…) và tính hạ tầng khá sâu, phụ thuộc
nhiều vào các cơng nghệ lỗi, nên địi hỏi nhiều nỗ lực và chi phí bảo trì,



nâng cấp trong việc thêm mới tính năng hoặc thay đổi.
Kiến trúc phía server vẫn còn sơ sài, còn một số lỗ hổng và khơng tốt cho



việc scale khi có nhiều u cầu, tính năng cũng như dữ liệu.
Cơng nghệ sử dụng phía frontend cần cải thiện về code base cũng như
cần thay đổi một số cơng nghệ sử dụng để có thể tối ưu hiệu suất tải trang



hơn.
Lượng dữ liệu đầu vào trong vẫn có khối lượng nhỏ, mang tính thử
nghiệm để vận hành website, chưa có thể đảm bảo tính ứng dụng thực tiễn



cao khi được sử dụng trong thực tế.
Các kĩ thuật áp dụng chỉ tập trung vào hoàn thiện tính năng nhanh nhất
nhưng chưa tính đến việc scale up khi khối lượng dữ liệu và xử lí tăng cao,
cũng như chưa thể deploy để hiểu rõ hơn về hiệu năng trong môi trường
thực tế.

2.2. Vấn đề nghiên cứu



Các công nghệ áp dụng để nâng cấp và bảo trì sản phẩm từ đồ án 1.
Kĩ thuật lấy nguồn dữ liệu và tạo các bộ dữ liệu lớn và phương thức tối ưu



khi dữ liệu tăng cao.
Hosting ứng dụng và ảnh hưởng của chúng đến với hiệu suất xử lí dữ liệu



và hiệu năng trang web.
Một số kĩ thuật tối ưu trong việc xử lí dữ liệu để phục vụ các yêu cầu tài
nguyên từ phía người dùng.




Chương 3. NGHIÊN CỨU
3.1. Các công nghệ sử dụng để cải tiến ứng dụng
3.1.1. Java Spring Framework
 Công nghệ, hoặc cũng có thể xem là một hệ sinh thái để xây dựng ứng dụng
phân tán, nhưng phổ biến nhất vẫn được sử dụng trong phát triển ứng dụng web.
 Mã nguồn mở, cộng đồng lớn và là nền tảng đã trưởng thành, cung cấp rất nhiều
bộ Integration API cho phát triển server, backend.
 Framework đáng tin cậy và phổ biến nhất trong nền tảng Java cho đến thời điểm
hiện tại.
3.1.2. ReactJS Library
 Thư viện mã nguồn mở hỗ trợ phát triển giao diện Web phổ biến nhất thời điểm
hiện tại do Facebook phát hành.
 Tiếp cận với tư duy theo hướng thành phần (component), hỗ trợ nhiều bộ giao
diện cũng như cơng nghệ, tính năng khơng ngừng cập nhật với cộng đồng lớn.
 Hỗ trợ các thư viện và API phát triển (Hook, Redux, Axios…) cũng như tính
tương thích với một số công nghệ frontend rất tốt và liên tục cập nhật.
 Framework đáng tin cậy và phổ biến nhất trong lập tình web frontend trong thời
điểm hiện tại.
3.1.3. Redis
 Kho chứa dữ liệu hướng cấu trúc mã nguồn mở, thường được sử dụng làm
database, cache hoặc message broker.
 Công nghệ phổ biến nhất hiện tại trong cache nhằm tăng hiệu suất đọc dữ liệu.
 Khả năng cải thiện tốc độ đọc có thể tăng từ 3 – 10 lần, rất phù hợp với các ứng
dụng thường xuyên lấy data từ server, đặc biệt là website thương mại điện tử,
blog hoặc tin tức.
3.1.4. MariaDB
 Cơ sở dữ liệu quan hệ mã nguồn mở, được phát triển dựa trên phần lớn cấu trúc

của MySQL, tuy nhiên đã có nhiều cải thiện hơn về mặt hiệu năng.
 Hỗ trợ số connection lớn, storage engine nhiều và tốc độ đọc ghi dữ liệu tốt
trong cơ sở dữ liệu quan hệ khá tốt và liên tục được cải thiện.


3.1.5. Python 3
 Ngơn ngữ lập trình được hỗ trợ nhiều thư viện mã nguồn mở rất phù hợp về các
khía cạnh liên quan đến việc xử lí dữ liệu, cú pháp đơn giản và cộng đồng phát
triển đông đảo.
 Tuy nhiên, trong phạm vi đồ án, nhóm chỉ sử dụng python về mảng crawl dữ
liệu từ các website thương mại điện tử.
3.2. Kĩ thuật lấy nguồn dữ liệu



Hai nguồn dữ liệu chính được lấy từ hai website thegioididong và Tiki.
Các thông tin sản phẩm của Tiki được thiết kế giao tiếp thông qua Restful
API và không bị giới hạn trong số lượng request vừa đủ để thực hiện crawl
dữ liệu, nhóm có thể gửi các request để lấy thơng tin hình ảnh một số



laptop, đánh giá, câu hỏi.
Tuy nhiên nguồn thơng số dữ liệu chính vẫn đến từ thegioididong, nhưng
chỉ được thiết kế dưới các công nghệ web lõi là HTML, CSS và VanillaJS
nên nhóm đã thực lấy dữ liệu thơng qua các automation step bằng Selenium
và trích xuất dữ liệu cho tồn bộ sản phẩm, thơng số của các laptop trong



thegioididong.
Ứng dụng các thư viện hỗ trợ trong Python 3, thực hiện crawl dữ liệu bằng
Selenium với website thegioididong và Request với website Tiki.

3.3. Hosting ứng dụng


Để giảm thiểu thời gian trong việc tìm hiểu hosting ứng dụng và nghiên cứu
về hosting, server, nhóm đã thực hiện deploy các thành phần của ứng dụng
lên các nền tảng đám mây do các nhà phát hành đáng tin cậy cung cấp như



Heroku, Azure.
Tuy nhiên do một số hạn chế về mặt kinh phí và hỗ trợ từ phía nhà cung
cấp, nhóm chỉ có thể sử dụng các gói hosting giá rẻ và phải thực hiện trên



các server đặt tại Mĩ, phần nào sẽ ảnh hưởng đến tốc độ của ứng dụng.
Khi sử dụng các cloud service hosting từ các nhà phát hành lớn sẽ được hỗ
trợ theo dõi metric rất tốt, giúp có cái nhìn tổng quan hơn về sản phẩm
trong thực tế.


3.4. Một số kĩ thuật tối ưu trong việc xử lí dữ liệu




Cài đặt index cho các trường trong table.
Caching dữ liệu phía server và người dùng.
Tối ưu hóa dung lượng và hiển thị hình ảnh trên các trang màn hình thích



hợp.
Kĩ thuật phân trang nhằm giảm thiểu việc tải các dữ liệu q lớn khơng cần



thiết.
Tối ưu hóa frontend bằng việc hạn chế quá nhiều CSS và các thư viện giao
diện.

Chương 4. CÁCH THỰC HIỆN
4.1. Phân tích các cơng nghệ và cách ứng dụng vào đồ án
 Redis và MariaDB: các ưu thế về công nghệ đã được mô tả tại mục 3.1.
 Java Spring Framework: hỗ trợ rất nhiều các API cho việc phát triển ứng dụng
phân tán, cụ thể nhóm đã tìm hiểu thực hiện ứng dụng các thư viện sau:
 Spring Boot: cung cấp môi trường để vận hành các thư viện trong
Spring.
 Spring MVC: sử dụng @RestController nhằm tạo các controller xử
lí yêu cầu HTTP Request từ phía người dùng, đồng thời cũng cung
cấp template để xử lí lỗi rất thuận tiện.
 Spring Data: cung cấp các syntax PSQL, HQL, transaction template
và annotation do Hibernate cung cấp, rất thuận tiện và tường minh
trong việc cài đặt các phương thức giao tiếp với cơ sở dữ liệu và
rollback khi cần.
 Spring Security: thực hiện bảo mật quyền truy cập các URL và

HTTP request thông qua việc xác thực người dùng.
 Các thư viện integrate khác trong Java: Lombok (giảm boiler plate
code trong việc define các Model, DTO), JWT, BCrypt, Redis
Caching...
 ReactJS Library: hỗ trợ tạo giao diện và các component rất tốt, nhóm đã tìm
hiểu và chọn ra một số cơng nghệ, thư viện có thể xem như là best-practice
cho việc phát triển:


 React Hook: các API do React cung cấp nhằm tạo tính “động” của
một trang web như thay đổi trạng thái, lưu trữ thuộc tính, hàm...
 Redux Toolkit: thư viện cung cấp các API quản lí State Management
trong Redux được đơn giản hóa và thuận tiện hơn cho việc phát
triển.
 Styled Component và Tailwind Css: các framework CSS có thể tích
hợp với React nhằm viết CSS nhanh và rõ ràng hơn.
 Các thư viện khác: Axios (dùng cho các giao thức HTTP) và các
component giao diện.
 Python 3: hỗ trợ nhiều thư viện cho việc phân tích và crawl dữ liệu như
Selenium, Requests, BeautifulSoup… với cú pháp đơn giản và dễ triển khai.
4.2. Kiến trúc hệ thống:
4.2.1. Kiến trúc tổng quan:
 Phần giao diện (Frontend): Xây dựng giao diện dựa trên thư viện ReactJS
nhằm tạo các web component nhằm hiện thị thông tin và giúp người dùng tương
tác với website, các yêu cầu của người dùng sẽ được gọi thông qua Web
Services do phía server cung cấp để xử lí nghiệp vụ.
 Phần server (Backend): Ứng dụng Spring MVC định nghĩa các Web Services
cho việc xử lí yêu cầu nghiệp vụ dựa trên các giao thức HTTP và endpoint URL
qua RESTful API. Sau đó các Web Services sẽ được khởi tạo dựa trên phương
thức triển khai mơ hình Multi Service Instances per Host. Các phần code xử lí

nghiệp vụ sẽ được cài đặt tại các tầng dưới nơi các Controller sẽ gọi đến.
 Mơ hình kiến trúc chính của đồ án dựa trên 2 mẫu thiết kế (Design Pattern)
chính là MVC (Model – View – Controller) kết hợp 3-layers Pattern.
 Cơ sở dữ liệu cho đồ án sử dụng hệ quản trị cơ sở dữ liệu MariaDB.


Hình 1. Kiến trúc luồng xử lí giữa client-side và server-side

Hình 2. ERD Cơ sở dữ liệu cho đồ án


4.2.2. Mơ tả kiến trúc:
 Phía client đảm nhiệm việc hiển thị các thông tin của website như danh sách
sản phẩm, chi tiết, màn hình quản lí và các thành phần hiển thị để người dùng
thao tác như nút nhấn, hình chọn…
 Phía server gồm các RESTful Web Service được cung cấp bởi Tomcat (do
Spring Boot) với máy chủ là localhost nhằm xử lí u cầu nghiệp vụ, truy cập
thơng qua các URL Endpoint và Allowed Method (các phương thức HTTP được
cho phép).
 Các thơng tin, thao tác xử lí ở phía Client sẽ thơng qua API Caller gọi đến
RESTful Web Service được cung cấp bởi Tomcat.
 Các implement của Web Service sử dụng các Repository để thao tác với
database, xử lí nghiệp vụ dữ liệu theo yêu cầu của người dùng.
 Service sau khi thực hiện yêu cầu sẽ trả về các thông tin cần thiết lại client để
tiếp tục xử lí nghiệp vụ thơng qua response body, header và status code.

Hình 3. Kiến trúc xử lí giữa client và server của một microservice


4.3. Kiến trúc mã nguồn:

4.3.1. Link source code đồ án nhóm:

/>4.3.2. Cấu trúc mã nguồn phía client-side:
 Thành phần mơi trường yêu cầu: package manager npm.
 Cách chia cây thư mục, components được chia theo kiểu đệ quy thư mục: một
màn hình sẽ gồm các thành phần và màn hình con, màn hình con cũng gồm các
thành phần và màn hình con khác… cứ thế đến khi màn hình đã được chia nhỏ
nhất đến mức có thể đảm bảo đủ đơn giản.
 Phần giao diện thực hiện việc khởi tạo các UI-component nhằm hiển thị các
thơng tin (hình ảnh, bảng, thông số…), hoặc giúp người dùng tương tác (nút
nhấn, đường dẫn…).
 Đối với việc tương tác với phía server side, thư mục /service/api sẽ chứa các
API calller sử dụng thư viện Axios đảm nhận việc gọi đến các RESTful Web
Services do phía server-side cung cấp, xử lí các request, response và handle
error giữa client và server.
4.3.3 Cấu trúc mã nguồn phía server-side:
4.3.3.1. Thành phần mơi trường u cầu:
 Java Spring Framework.
 Tomcat Server.
 Project Manager Tool Maven version 3.6.3.
 Java SDK version 11.
 Docker Desktop (không bắt buộc).
4.3.3.2. Cấu trúc các module project Java:
 laptop-store-api: gồm các thành phần kết nối trung gian trong việc xử lí dữ
liệu, cụ thể là trong các trường hợp: giao tiếp giữa ứng dụng Java với
Database MariaDB, truy xuất thông tin từ request được client gửi đến server,
trả về response cần thiết từ server lại cho client.


 laptop-store-application:.gồm các file config cho website, server Redis, và

sản phẩm đã được export để deploy.
 laptop-store-repository: truy xuất và thao tác với cơ sở dữ liệu nhờ công
nghệ Spring Data JPA, tập trung vào việc lưu trữ và truy vấn dữ liệu.
 laptop-store-rest: cài đặt và cung cấp các RESTful Web Services – phương
thức giao tiếp giữa client-side và server-side.
 laptop-store-security: tiền xử lí các request được gửi từ client đến server
nhằm thực hiện xác thực người dùng và xác minh quyền hạn truy cập tài
nguyên, đảm bảo tính bảo mật của request trước khi thực hiện các nghiệp vụ
cần thiết.
 laptop-store-service: cài đặt lớp trung gian của rest service và repository
(DAO).
4.4. Cách crawl dữ liệu từ một website:


Trong phần này, nội dung sẽ tập trung vào việc sử dụng Python 3 để crawl
dữ liệu cần thiết từ website Tiki và thegioididong. Kĩ thuật lấy nguồn dữ
liệu đã được mô tả tại mục 3.2.

4.4.1. Cấu trúc của module laptop-store-crawl:





addresses: tạo ngẫu nhiên các địa chỉ cho một user.
base: chứa các file crawl dữ liệu của các laptop, image và các promotions.
files: chứa các file dữ liệu dạng txt.
orders: tạo ngẫu nhiên các order của từng giai đoạn (đã giao, huỷ, đóng gói,

…).

 questions: crawl dữ liệu bằng selenium từ website thegioididong, sau đó insert
vào database các questions ngẫu nhiên.
 ratings: tạo ngẫu nhiên các ratings cho từng laptops.
 users: đăng ký các tài khoản ngẫu nhiên.
4.4.2. Phân tích bài tốn:
 Dữ liệu có thể lấy được bằng cách gửi các request đến server của website Tiki
hoặc từ file html của website thegioididong.
 Sau khi crawl dữ liệu, ghi dữ liệu vào các file excel hoặc file text (txt).
 Từ các file dữ liệu đã được tạo, dùng Python 3 để thêm dữ liệu vào database.


4.5. Kiểm thử RESTful Web Service được tạo:
4.5.1. Kiểm thử RESTful Web Service bằng Postman:
4.5.1.1. Trường hợp request hợp lệ:
 Request hợp lệ bao gồm các trường thông tin thõa mãn các tiêu chí của
RESTful Web Service đã được thiết kế như sau:
 Địa chỉ URL endpoint hợp lệ (http://localhost:8081/api/addresses).
 Phương thức HTTP hợp lệ (POST).
 Dữ liệu đầu vào là JSON với các field và value bind chính xác theo
AddressInput.
 Authorization Header chứa Bearer JWT của người dùng thõa mãn quyền
hạn thực hiện.
 Content-Type Header đúng kiểu “application/json”.

Hình 4. URL Endpoint và Content-Type header

Hình 5. Request body theo chuẩn JSON

Hình 1. Bearer Token JWT

 Kết quả sau khi thực hiện request: server trả về code 201 (Created), thông báo rằng
dữ liệu địa chỉ đã được tạo thành công.


Hình 7. Response khi request thành cơng

 Kiểm tra dữ liệu trong database MariaDB:

Hình 8. Database sau khi thực hiện request
4.5.1.2. Trường hợp request không hợp lệ:
 Request không hợp lệ có thể có nhiều trường hợp như: JWT hết hạn
(expire), người dùng khơng có quyền hạn thực hiện request, JWT không hợp
lệ, server không ổn định, database lỗi, kiểu dữ liệu đầu vào khơng phù hợp,
…
 Nhóm sẽ thực hiện kiểm thử trường hợp request không chứa
Authorization Header và nhận được kết quả trả về từ server là code 401
(Unauthorized), thơng báo rằng người dùng khơng có quyền hạn thực hiện
request.

Hình 9. Response khi request Unauthorized


4.5.2. Thao tác trên Website:
 Sau khi người dùng đăng nhập và đến trang tạo địa chỉ giao hàng mới, thực hiện
các thao tác sau:
 Điền đầy đủ các trường thông tin hợp lệ vào các input tương ứng.
 Nhấn button “Lưu địa chỉ để thực hiện lưu”.
 Nếu tạo địa chỉ thành công, trang web sẽ redirect về trang danh sách địa chỉ vừa
chứa địa chỉ mà người dùng vừa tạo mới.
 Nếu có lỗi xảy ra, một popup sẽ hiện lên thông báo lỗi và địa chỉ không được

tạo.

Hình 2. Các trường thơng tin được nhập

Hình 3. Popup thông báo khi yêu cầu không thể thực hiện


Hình 12. Danh sách địa chỉ đã bao gồm địa chỉ vừa tạo khi xử lí u cầu thành cơng

Hình 13. Phần code thực hiện POST request sử dụng Axios đã config base URL là /api
4.5.3. Ghi chú
 Toàn bộ mục 4.5 tập trung vào việc kiểm thử một Microservice, cụ thể là
RESTful Web Service, đối với các nghiệp vụ khác, việc tiếp cận, thiết kế và
triển khai cũng sẽ theo trình tự tương tự như trên.


4.6. Phương pháp xử lí một số bài tốn cơ bản:
4.6.1. Phân quyền người dùng truy cập trang:
 Thiết kế database chứa trường lưu trữ vai trò người dùng (khách mua hàng hoặc
quản lí).
 Khi người dùng đăng nhập, client thực hiện gửi request yêu cầu lấy thông tin
người dùng, trong đó sẽ chứa role người dùng, từ đó client sẽ giới hạn các page
mà người dùng đó có thể truy cập.
4.6.2. Bảo mật và xác thực thông tin người dùng:

 Phần xác thực thông tin người dùng đã được mô tả tại mục 4.6.3 sử dụng JWT.
 Bảo mật thông tin người dùng: mật khẩu người dùng sẽ không lưu trực tiếp
trong database mà sẽ nhờ thư viện third-party BCrypt do java cung cấp để lưu
chuỗi mật khẩu đã được mã hóa.
 Các thao tác so sánh mật khẩu bản chất chỉ so sánh với chuỗi mã hóa, để tránh

trường hợp database bị chiếm quyền kiểm soát.
4.6.3. Tối ưu hóa tốc độ tải trang:
 Kĩ thuật lazy-loading: được cài đặt ở phía client-side, trang web sẽ hiển thị hình
ảnh sản phẩm khi người dùng lăn chuột gần đến vị trí hiển thị của sản phẩm đó
để giảm xử lí và tăng thời gian hiển thị trang màn hình.
 Kĩ thuật optimize hình ảnh: hình ảnh của laptop sẽ được convert sang dạng JPG
(dạng hình ảnh phổ biến nhất dùng trong website thương mại điện tử vì kích
thước nhẹ nhưng vẫn đảm bảo chất lượng).
 Hình ảnh laptop sẽ được tạo thành 3 loại: thumbnail (ảnh nhỏ), image (ảnh vừa)
và big_image (ảnh lớn), tùy vào từng trang sẽ sử dụng kích thước ảnh thích hợp
để tối đa hóa tốc độ tải trang (ảnh kích thước càng lớn thì tải dữ liệu càng lâu).
4.6.4. Tối ưu hóa cơng cụ tìm kiếm (SEO):
 Nhóm chỉ áp dụng kĩ thuật đơn giản là tạo các alt-name (tên thay thế) dựa trên
tên sản phẩm mà người dùng nhập vào, từ đó tối ưu hóa vào đường link của
trang chi tiết và trang so sánh sản phẩm bằng cách chèn vào đoạn alt-name đó.


4.6.5. Bài tốn xử lí số lượng:
 Website đã hỗ trợ xử lí được số lượng trong một số trường hợp giao hàng như:
sau khi đóng gói đơn hàng và khi đơn hàng bị hủy.
4.6.6. Xác thực địa chỉ tại Việt Nam:
 Thiết kế các trường nhập địa chỉ là các input select.
 Dữ liệu được crawl từ website tiki gồm tất cả các tỉnh thành, quận huyện,
phường xã trên Việt Nam và được lưu tại folder laptop-store-addresses.
4.6.7. Nguồn dữ liệu mẫu:
 Các dữ liệu về laptop được tham khảo tại hai trang thegioididong.com và
tiki.vn.
 Ngồi ra nguồn hình ảnh chất lượng cao với độ phân giải 1200x1200 pixel được
sử dụng làm nguồn ảnh đầu vào cho các laptop, được crawl từ website Tiki.
4.6.8. Tối ưu dữ liệu:

 Kĩ thuật cài đặt index cho các trường trong table: được cài đặt cho từng table ở
database, nếu không cài index, database engine sẽ thực hiện tìm từ row đầu tiên.
Nếu một tables có hàng trăm ngàn, hàng triệu dịng dữ liệu hoặc lớn hơn nữa,
thì việc cài đặt index là một giải pháp để tiết kiệm thời gian cho việc tìm kiếm
dữ liệu trong bảng.
 Caching dữ liệu phía server và người dùng: được thực hiện bằng cách cài đặt
một server Redis cho việc caching dữ liệu. Khi người dùng truy cập vào trang
web, một request sẽ được gửi đi để lấy thông tin hiển thị cho người dùng. Nếu
chúng ta có cài đặt caching thì server sẽ check xem có dữ liệu đã được cache
tương ứng với request hay không. Nếu có, server sẽ lấy dữ liệu từ cache và phản
hồi lại cho client. Nếu khơng có, server cần phải gửi request đến cho database
để lấy dữ liệu.
 Kĩ thuật phân trang: khi chúng ta có quá nhiều dữ liệu, và màn hình thì chỉ có
giới hạn, chúng ta khơng cần thiết phải hiển thị toàn bộ dữ liệu lên màn hình mà
chỉ cần lấy một vài dữ liệu để hiển thị, và tuỳ theo nhu cầu người dùng để hiển