Đồ án tìm hiểu cách tối ưu hóa dữ liệu cho website và xây dựng website bán hàng chuẩn seo

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

NGUYỄN PHƯỚC BÌNH – 20520143
TRẦN THANH TRÍ – 20520328

BÁO CÁO ĐỒ ÁN 1
TÌM HIỂU CÁCH TỐI ƯU HÓA DỮ LIỆU CHO WEBSITE VÀ
XÂY DỰNG WEBSITE BÁN HÀNG CHUẨN SEO

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

TP. HỒ CHÍ MINH, 2023


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 nghiên
cứu cách tối ưu hóa dữ liệu cho website xây dựng một website bán hàng hướng tới mặt
hàng chính là các thiết bị điện tử chuẩn SEO.
Đồ á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, nghiên cứu cách tối ưu khi xử lí dữ liệu kết hợp tuân thủ các tiêu chuẩn SEO của
trang web.
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 .......................................................................................................... 1
1.1 Lý do chọn đề tài ...................................................................................................... 1
1.2 Mục đích chọn đề tài ............................................................................................... 2
1.3 Đối tượng và phạm vi nghiên cứu .......................................................................... 2
1.3.1 Đối tượng nghiên cứu ....................................................................................... 2
1.3.2 Phạm vi nghiên cứu .......................................................................................... 2
Chương 2. TỔNG QUAN .................................................................................................. 3
2.1 Một số vấn đề còn tồn tại ........................................................................................ 3
2.2 Vấn đề nghiên cứu ................................................................................................... 4
Chương 3. NGHIÊN CỨU ................................................................................................ 4
3.1 Các công nghệ sử dụng ............................................................................................ 4
3.1.1 Node.js – Express Framework......................................................................... 4
3.1.2 ReactJS Library ................................................................................................ 5
3.1.3 Redis ................................................................................................................... 5
3.2 Kỹ thuật lấy nguồn dữ liệu ..................................................................................... 6
3.3 Hosting website ........................................................................................................ 6
3.4 Một số kĩ thuật tối ưu trong việc xử lí dữ liệu ...................................................... 7
3.5 Tiêu chí đánh giá cho website đạt chuẩn SEO ...................................................... 7
Chương 4. CÁCH THỰC HIỆN ...................................................................................... 8
4.1 Phân tích các cơng nghệ và cách ứng dụng vào đồ án ......................................... 8

4.2 Cơ sở dữ liệu ............................................................................................................ 9
4.2.1 Mô hình dữ liệu quan hệ cho cơ sở dữ liệu .................................................. 10


4.2.2 Danh sách chi tiết các quan hệ trong dữ liệu ............................................... 10
4.2.3 Mô tả các quan hệ ........................................................................................... 11
4.2.3.1 SANPHAM ................................................................................................... 11
4.2.3.2 LOAISANPHAM ......................................................................................... 11
4.2.3.3 THUONGHIEU ........................................................................................... 12
4.2.3.4 THONGSO ................................................................................................... 12
4.2.3.5 SP_TS ............................................................................................................ 12
4.3 Kiến trúc hệ thống ................................................................................................. 13
4.3.1 Kiến trúc tổng quan........................................................................................ 13
4.3.2 Mô tả kiến trúc ................................................................................................ 14
4.4 Kiến trúc mã nguồn ............................................................................................... 16
4.4.1 Link source code đồ án nhóm ........................................................................ 16
4.4.2 Cấu trúc mã nguồn phía client-side .............................................................. 16
4.4.3 Cấu trúc mã nguốn phía server-side............................................................. 16
4.4.3.1 Các thành phần trường yêu cầu ................................................................. 16
4.4.3.2 Cấu trúc các module project ...................................................................... 16
4.5 Cách thu thập dữ liệu (crawl) từ một website .................................................... 17
4.5.1 Cấu trúc của module product crawl ............................................................. 17
4.5.2 Phân tích bài tốn ........................................................................................... 17
4.6 Kiểm thử REStfull Web Server được tạo............................................................ 17
4.6.1 Lấy thông tin tất cả sản phẩm ....................................................................... 17
4.6.2 Lấy thông tin sản phẩm theo loại sản phẩm ................................................ 18
4.6.3 Lấy thông tin sản phẩm theo bộ lọc .............................................................. 19
4.7 Website bán hàng chuẩn SEO .............................................................................. 20

4.7.1 Danh sách các giao diện màn hình ................................................................ 20
4.7.1.1 Màn hình trang chủ ..................................................................................... 21
4.7.1.2 Màn hình loại sản phẩm.............................................................................. 23
4.7.1.3 Màn hình chi tiết sản phẩm ........................................................................ 25
4.7.2 Các bước đưa website lên trên thanh tìm kiếm của Google. ...................... 26
4.7.2.1 Các nền tảng và công cụ để triển khai và quản lý web trên google. ....... 26
4.7.2.2 Các bước đưa trang web lên thanh tìm kiếm của Google. ...................... 26
4.7.3 Đánh giá hiệu suất trang web bằng PageSpeed Insights ............................ 26
4.7.3.1 Đánh giá hiệu suất của trang chủ............................................................... 27
4.7.3.2 Đánh giá hiệu suất của trang loại sản phẩm ............................................. 29
4.7.3.3 Đánh giá hiệu suất của trang chi tiết sản phẩm........................................ 31
4.7.4 Hiển thị của website trên thanh tìm kiếm trên Google ............................... 32
Chương 5. KẾT LUẬN ................................................................................................... 33
5.1 Các kết quả đạt được............................................................................................. 33
5.2 Nhược điểm và hạn chế ......................................................................................... 33
Chương 6. HƯỚNG PHÁT TRIỂN ............................................................................... 33
6.1 Hướng phát triển về mặt tính năng ..................................................................... 33
6.2 Hướng phát về mặt kỉ thuật ................................................................................. 34
Chương 7. TÀI LIỆU THAM KHẢO............................................................................ 34


DANH MỤC HÌNH
Hình 1 Mơ hình dữ liệu quan hệ cho cơ sở dữ liệu ........................................................... 10
Hình 2 Kiến trúc luồng xử lí giữa client-side và server-side ............................................ 14
Hình 3 Kiến trúc xử lí giữa client và server. ..................................................................... 15
Hình 4 Minh chứng request tất cả sản phẩm lần đầu. ....................................................... 17
Hình 5 Minh chứng request tất cả sản phẩm. .................................................................... 18
Hình 6 Minh chứng request tất cả sản phẩm loại smartphone lần đầu. ............................. 19
Hình 7 Minh chứng request tất cả sản phẩm loại smartphone. ......................................... 19
Hình 8 Minh chứng request tất cả sản phẩm loại smartphone theo thông số. ................... 20

Hình 9 Màn hình trang chủ (phần 1) ................................................................................. 21
Hình 10 Màn hình trang chủ (phần 2) ............................................................................... 22
Hình 11 Màn hình loại sản phẩm (phần 1) ........................................................................ 23
Hình 12 Màn hình loại sản phẩm (phần 2) ........................................................................ 24
Hình 13 Màn hình chi tiết sản phẩm. ................................................................................ 25
Hình 14 Minh chứng đánh giá hiệu suất của trang chủ. .................................................... 27
Hình 15 Minh chứng đánh giá chuẩn SEO của trang chủ. ................................................ 28
Hình 16 Minh chứng đánh giá hiệu suất của trang loại sản phẩm. ................................... 29
Hình 17 Minh chứng đánh giá chuẩn SEO của trang loại sản phẩm................................. 30
Hình 18 Minh chứng đánh giá hiệu suất của trang chi tiết sản phẩm. .............................. 31
Hình 19 Minh chứng đánh giá chuẩn SEO của trang chi tiết sản phẩm............................ 32
Hình 20 Minh chứng hiển thị của website trên thanh tìm kiếm trên Google. ................... 33


DANH MỤC BẢNG
Bảng 1 Danh sách chi tiết các quan hệ. ............................................................................. 10
Bảng 2 Mô tả quan hệ SANPHAM ................................................................................... 11
Bảng 3 Mô tả quan hệ LOAISANPHAM.......................................................................... 11
Bảng 4 Mô tả quan hệ THUONGHIEU ............................................................................ 12
Bảng 5 Mô tả quan hệ SANPHAM ................................................................................... 12
Bảng 6 Mô tả quan hệ SP_TS............................................................................................ 13
Bảng 7 Mô tả quan hệ PHIENBANSANPHAM ............................................................... 13


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) chuẩn SEO 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à CellphoneS, đồ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.
− 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 và trang web đã được
hiển thị trên thanh tìm kiếm của google đâ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 q 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 phục vụ cho việc mua sắm trực tuyến khơng cịn quá 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ử.
− Tối ưu hóa dữ liệu cho website là một yếu tố quan trọng để cải thiện hiệu suất và tốc
độ tải trang của website. Dữ liệu tối ưu hóa giúp giảm băng thơng mạng cần thiết và
cải thiện trải nghiệm người dùng, đồng thời tăng khả năng tìm kiếm và xếp hạng của
website trên các cơng cụ tìm kiếm.
− Xây dựng website bán hàng chuẩn SEO giúp tăng khả năng tiếp cận với khách hàng
tiềm năng thông qua việc nâng cao thứ hạng trang web trên các cơng cụ tìm kiếm

như Google. Điều này có thể đem lại lợi ích lớn cho doanh nghiệp bằng cách thu hút
lưu lượng truy cập tự nhiên và tăng doanh số bán hàng, trong thời đại công nghệ
thông tin phát triển nhanh chóng, sự cạnh tranh giữa các website bán hàng ngày càng
khốc liệt. Hiểu và áp dụng các phương pháp tối ưu hóa dữ liệu cũng như các tiêu
chuẩn SEO sẽ giúp website của tôi nổi bật và đạt được sự tin tưởng từ người dùng.
− 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, nhóm đã quyết định tìm hiểu cách tối ưu hóa dữ liệu cho website và xây
dựng website bán hàng chuẩn SEO.
1


1.2 Mục đích chọn đề tài
− Bằng việc tối ưu hóa dữ liệu, trang web sẽ có tốc độ tải trang nhanh hơn, trải nghiệm
người dùng tốt hơn và cải thiện vị trí trên các cơng cụ tìm kiếm. Đồng thời, xây dựng
một trang web chuẩn SEO giúp thu hút lượng khách hàng tiềm năng lớn hơn, tăng
khả năng tiếp cận và tăng doanh số bán hàng. Nhờ việc nghiên cứu và áp dụng những
kỹ thuật tiên tiến này, nó giúp xây dựng một trang web vượt trội, nổi bật trong đám
đông cạnh tranh và mang lại thành công kinh doanh bền vững trong thị trường kỹ
thuật số hiện nay.
− Về mặt chức năng, website bán hàng đòi hỏi cần thực hiện rất nhiều bài toá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
u cầu phát triển tính tối ưu hóa trang web, xử lí dữ liệu, và hơn hết là đảm bảo
chuẩn SEO cho trang web...
− Từ đó, trong q trình thực hiện đồ án, nhóm sẽ thực hiện xây dựng được một website
bán hàng với các tiêu chuẩn SEO kết hợp với nghiên cứu việc tối ưu hóa dữ liệu cho

website 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
−

Một số kĩ thuật xử lí dữ liệu trong website 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.

−

Xây dựng website tuân thủ các tiêu chí để đánh giá một website chuẩn SEO.

1.3.2 Phạm vi nghiên cứu
−

Vì đồ án sẽ tập trung vào việc tối ưu hóa dữ liệu và xây dựng website tuân thủ
các tiêu chuẩn SEO 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.
2


−

Phần server được xây dựng trên công nghệ NodeJs dựa trên ExpressJs Framwork
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.

−

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
− Như đã trình bày ở phần lí do chọn đề tài, việc xây dựng một website bán hàng
online sẽ có hai phương thức chính để tiếp cận: xây dựng dựa trên các bản thiết kế
có sẵn (template) hoặc xây dựng trang web theo ý muốn nhờ vào việc gia công.
− Đối với việc xây dựng dựa trên các bản thiết kế có sẵn: có rất nhiều nền tảng hiện
tại đã cung cấp việc tạo lập trang web bán hàng rất đơn giản và nhanh chóng chỉ
nhờ vào việc kéo thả như WordPress, Wix… Tuy nhiên vẫn còn nhiều hạn chế trong
cách tiếp cận này:
• Phần lớn nghiệp vụ bán hàng và giao diện sẽ được cố định theo một số khn
mẫu và khó tùy biến theo ý muốn nếu cần những chức năng phức tạp hơn như
quản lí mã khuyến mãi, q khuyến mãi, chương trình giảm giá, kiểm duyệt…
• Hiệu suất trang web, dung lượng và các chức năng nâng cao buộc người dùng
phải bỏ thêm kinh phí mới có thể trải nghiệm được, và khơng được hồn tiền khi
các tính năng khơng thõa mãn u cầu của khách hàng.
• Khi có lỗi hoặc trang web bị tấn cơng mạng, việc xử lí trực tiếp như gỡ lỗi, khơi
phục dữ liệu, thiết kế lại cơ chế bảo mật… sẽ rất khó khăn vì khơng có nguồn
liên hệ cụ thể.
− Đối với việc xây dựng dựa trên gia công: Cần địi hỏi nguồn gia cơng có chất lượng
tốt trong việc nắm bắt yêu cầu và ứng dụng các công nghệ bắt kịp xu hướng web
hiện đại, và tốn nhiều chi phí về mặt thời gian và kinh phí hơn nhưng sẽ đảm bảo

về chất lượng và nguồn liên hệ bảo trì, phát triển khi cần.

3


− Một số hạn chế vẫn còn tồn đọng trong việc xây dựng theo phương pháp phát triển
web truyền thống:
• Phụ thuộc vào một ngôn ngữ hoặc cần nhúng script vào phía giao diện HTML
như JSP (Java), CSHTML (C#), PHP…
• Giao diện thiếu sự “mượt” và hiệu suất (performance) do phải redirect trang liên
tục – một trong những điều tối kị trong phát triển website thương mại điện tử,
do sử dụng cơ chế server-side rendering để xử lí nghiệp vụ.
• Việc đóng gói thành phần và server phụ thuộc hồn tồn vào một sản phẩm, nếu
có sự cố xảy ra bất kì ở phía server có thể khiến website hồn tồn bị “sập” và
khơng thể sử dụng.
• Thiếu nguồn hỗ trợ về phía giao diện, phần giao diện được xây dựng bằng
HTML, CSS, VanillaJS địi hỏi gia cơng nhiều thời gian.
2.2 Vấn đề nghiên cứu
− Các công nghệ áp dụng để xây dựng trang web với giao diện thân thiện, chịu tải tốt,
dễ bảo trì, phát triển và giải quyết được bài toán nghiệp vụ.
− 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.
− Tiêu chí đánh giá cho website đạt chuẩn SEO

Chương 3. NGHIÊN CỨU
3.1 Các công nghệ sử dụng

3.1.1 Node.js – Express Framework
−

Node.js là một nền tảng phát triển dựa trên JavaScript, được xây dựng dựa trên
JavaScript Engine V8 của Google Chrome. Nó cho phép chạy mã JavaScript ở
phía máy chủ, thay vì chỉ chạy trên trình duyệt. Node.js cung cấp một môi trường
4


thích hợp để xây dựng các ứng dụng web và các dịch vụ mạng khác, nhờ vào
khả năng xử lý các u cầu I/O khơng đồng bộ.
−

Node.js có hiệu suất cao nhờ kiến trúc không đồng bộ và sử dụng sự kiện I/O
non-blocking. Điều này cho phép xử lý hàng ngàn kết nối đồng thời mà không
gây block luồng xử lý.

−

Express là một framework web cho Node.js, được xây dựng trên cơ sở của
Node.js. Nó cung cấp một cách đơn giản và linh hoạt để xây dựng các ứng dụng
web và API. Express giúp giảm bớt cơng việc lập trình viên bằng cách cung cấp
các tính năng và cơng cụ cần thiết để xử lý yêu cầu và phản hồi HTTP, quản lý
định tuyến, xử lý lỗi, và tạo các middleware.

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 MongoDB

5


− MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) phổ biến. Nó
được phát triển để xử lý các ứng dụng web và dịch vụ mạng có yêu cầu cao về

lưu trữ dữ liệu.
− MongoDB được thiết kế để có hiệu suất cao. Nó sử dụng cơ chế lưu trữ dữ liệu
trên bộ nhớ (in-memory storage), cung cấp tốc độ truy vấn nhanh chóng. Ngồi
ra, MongoDB hỗ trợ các truy vấn phong phú và một số tính năng như indexing,
sharding và replica sets để tối ưu hóa hiệu suất.
3.2 Kỹ thuật lấy nguồn dữ liệu
− Hai nguồn dữ liệu chính của website được lấy từ 2 website celllphones và
thegioididong.
− Cả 2 website của cellphoneS và thegioididong đều thiết kế dưới các công nghệ lõi là
HTML, CSS nên nhóm đã thực hiện lấy dữ liệu qua các automation bằng thư viện có
sẵn của nodejs. Sau đó trích xuất dữ liệu trong cellphones và thế giới di động cho
tồn bộ sản phẩm , thơng số của laptop, smartphone.
− Ứng dụng các thư viện trong Nodejs, nhóm đã thực hiện crawl dữ liệu bằng thư viện
puppeteer để trích xuất dữ liệu và axios để request đến các website của cellphones
và thegioididong.
3.3 Hosting website
− Để 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ư Netlify, Azure.
− Phần frontend được deploy trên Netlify do nhà cung cấp này có gói hỗ trợ deploy
các sản phẩm ReactJs. Phần backend được deploy trên Azure do Azure là 1 trong
những cloud service hosting tốt nhất và Azure cũng có gói hỗ trợ dành cho học sinh/
sinh viên.
− 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
Singapo, phần nào sẽ ảnh hưởng đến tốc độ của ứng dụng.
6


− 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 cơ sở dữ liệu để giảm thời gian truy xuất dữ liệu.
− 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 quá 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.
3.5 Tiêu chí đánh giá cho website đạt chuẩn SEO
− Tốc độ tải trang: Trang web nên được thiết kế để tải nhanh để đảm bảo trải nghiệm
tốt cho người dùng và cải thiện vị trí của trang web trong kết quả tìm kiếm.
− Thân thiện với thiết bị di động: Trang web phải được thiết kế để tương thích với các
thiết bị di động và đảm bảo trải nghiệm người dùng thuận tiện trên các thiết bị di
động.
− Phải có sitemap: Sitemap sẽ là bản đồ điều hướng, giúp các bot của google có thể dễ
dàng và nhanh chóng thu thập được dữ liệu nội dung trên website của bạn.
− Phần code hiển thị website.
• Có thành phần Tittle, Meta description.
• Mỗi trang website chỉ có duy nhất 1 thẻ H1.
• Không trùng lặp thẻ heading trong các trang website.
− Tối ưu trải nghiệm người dùng: phải có bộ lọc, có thanh tìm kiếm chung.
− Các tính năng CMS (Content Management System).
• Table of contents (mục lục bài viết): Giúp người dùng nắm bắt được những nội
dung chính đồng thời dễ dàng điều hướng bài viết. Table of contents còn giúp
website hiển thị sitelink trên trang tìm kiếm.

7


• Schema là đoạn code javascript với nhiệm vụ chính là đánh dấu dữ liệu có cấu

trúc. Tối ưu cấu trúc schema sẽ giúp việc cung cấp dữ liệu cho cơng cụ tìm kiếm
trên Google dễ dàng, điều phối hợp lý hơn và đúng đối tượng người dùng.
• Được quyền chọn thẻ canonical: Thẻ canonical là nguồn gốc khai báo cho
Googlebot biết chính xác đây là URL gốc, và đáng tin cậy để khai thác, thu thập
dữ liệu tại chính URL này. Việc tối ưu thẻ canonical sẽ giúp website tránh khỏi
tình trạng bị Google đánh giá trùng lặp nội dung do chính URL có một hay nhiều
bản sao khác.

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à MongoDB: các ưu thế về công nghệ đã được mô tả tại mục 3.1.
− Node.Js – Express Framework: Node.js là một môi trường chạy mã JavaScript phía
máy chủ, trong khi Express là một framework Node.js phổ biến được sử dụng để xây
dựng ứng dụng web. Kết hợp nhau, Node.js và Express Framework cung cấp nhiều
ưu điểm và hỗ trợ tốt cho việc phát triển ứng dụng web. Dưới đây là một số điểm nổi
bật:
• Hiệu suất cao: Node.js xây dựng trên kiến trúc sự kiện không đồng bộ, cho phép
xử lý hàng ngàn kết nối đồng thời mà không gây block IO. Điều này giúp ứng
dụng của bạn chạy nhanh và đáng tin cậy.
• Mã JavaScript đơn nhất: Sử dụng cùng một ngơn ngữ (JavaScript) trên cả phía
máy chủ và phía máy khách (trình duyệt) giúp tiết kiệm thời gian và cơng sức
trong việc xây dựng ứng dụng web. Bạn có thể chia sẻ mã giữa phía máy chủ và
phía máy khách, tạo ra kiến trúc đơn giản và dễ bảo trì.
• Hỗ trợ routing linh hoạt: Express Framework cung cấp cú pháp đơn giản và mạnh
mẽ để định nghĩa các tuyến đường (routes) trong ứng dụng. Bạn có thể xử lý các
yêu cầu HTTP, tạo và xử lý các tham số động, và quản lý các định tuyến phức
tạp dễ dàng.

8

• Middleware mạnh mẽ: Express cho phép bạn sử dụng middleware để xử lý các
yêu cầu HTTP trước khi chúng được chuyển đến các xử lý chính của ứng dụng.
Điều này rất hữu ích để thực hiện các chức năng như xác thực, ghi nhật ký, nén
dữ liệu và nhiều hơn nữa. Cộng đồng Node.js có nhiều middleware sẵn có, giúp
bạn dễ dàng mở rộng ứng dụng của mình.
• Hệ sinh thái phong phú: Node.js và Express Framework được hỗ trợ bởi một hệ
sinh thái lớn các module và gói phần mềm (npm) đã được xây dựng bởi cộng
đồng. Bạn có thể tìm và sử dụng hàng ngàn module có sẵn để giảm thời gian và
cơng sức phát triển.
• Dễ dàng tích hợp với cơ sở dữ liệu: Express cho phép bạn dễ dàng kết nối và làm
việc với các cơ sở dữ liệu phổ biến như MongoDB, MySQL, PostgreSQL và
nhiều hơn nữa. Các thư viện ORM (Object-Relational Mapping) như Mongoose
cũng cung cấp một cách tiện lợi để tương tác với cơ sở dữ liệu.
• Xử lý các yêu cầu RESTful: Express Framework hỗ trợ tốt việc xây dựng các
API RESTful. Bạn có thể dễ dàng định nghĩa các phương thức HTTP như GET,
POST, PUT và DELETE cho các tài nguyên của ứng dụng.
− 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.
4.2 Cơ sở dữ liệu
9

4.2.1 Mơ hình dữ liệu quan hệ cho cơ sở dữ liệu

Hình 1 Mơ hình dữ liệu quan hệ cho cơ sở dữ liệu
4.2.2 Danh sách chi tiết các quan hệ trong dữ liệu
STT

Tên quan hệ

Diễn giải

1

SANPHAM

Lưu trữ thông tin sản phẩm.

2

LOAISANPHAM

Lưu trữ thông tin các loại sản phẩm.

3

THUONGHIEU

Lưu trữ thông tin các loại thương hiệu.

4

THONGSO

Lưu trữ thông tin các thông số kỹ thuật.

5

SP_TS

6

PHIENBANSANPHAM

Lưu trữ thông tin thông số kỹ thuật cho từng sản
phẩm cụ thể.
Lưu trữ thông tin các phiên bản khác của sản phẩm.

Bảng 1 Danh sách chi tiết các quan hệ.
10


4.2.3 Mơ tả các quan hệ
4.2.3.1 SANPHAM
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

MaSanPham

ObjectId

Mã sản phẩm

2

MaLoaiSanPham

ObjectId

Mã loại sản phẩm

3

MaThuongHieu

ObjectId

Mã thương hiệu

4

HinhAnh

String

Hình ảnh sản phẩm

5

MoTa

String

Mơ tả thơng tin sản phẩm

6

SoLuongHangTon

Int

Số lượng sản phẩm cịn lại

7

GiaBan

Int

Giá bán của sản phẩm
Trạng thái của sản phẩm

8

TrangThai

String

(còn sản xuất, ngưng sản
xuất,…)

Bảng 2 Mô tả quan hệ SANPHAM
4.2.3.2 LOAISANPHAM
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

MaLoaiSanPham

ObjectId

Mã loại sản phẩm

2

TenLoaiSanPham

String

Tên loại sản phẩm

3

MoTa

String

Mơ tả thông tin loại sản phẩm
Trạng thái của loại sản phẩm

4

TrangThai

String

(cịn sản xuất, ngưng sản
xuất,…)

Bảng 3 Mơ tả quan hệ LOAISANPHAM
11


4.2.3.3 THUONGHIEU
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

MaThuongHieu

ObjectId

Mã thương hiệu

2

TenThuongHieu

String

Tên thương hiệu

3

MoTa

String

Mơ tả thơng tin thương hiệu
Trạng thái của thương hiệu

4

TrangThai

String

(cịn cung cấp, ngưng cung
cấp,…)

Bảng 4 Mô tả quan hệ THUONGHIEU
4.2.3.4 THONGSO
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

MaThongSo

ObjectId

Mã thơng số kỹ thuật

2

TenThongSo

String

Tên thơng số kỹ thuật

3

MoTa

String

Mô tả thông tin thương hiệu
Trạng thái của thương hiệu

4

TrangThai

String

(hoạt động, ngưng hoạt
động,…)

5

DonVi

String

Đơn vị của thông số kỹ thuật

Bảng 5 Mơ tả quan hệ SANPHAM
4.2.3.5 SP_TS
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

MaSanPham

ObjectId

Mã sản phẩm

2

MaThongSo

ObjectId

Mã thông số kỹ thuật
12


3

MoTa

Mô tả thông tin

String

Trạng thái của thông số trên sản
4

TrangThai

phẩm (hoạt động, ngưng hoạt

String

động,…)
5

GiaTri

Giá trị của thông số trên sản phẩm

String

Bảng 6 Mơ tả quan hệ SP_TS
4.2.3.6 PHIENBANSANPHAM
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

MaPhienBan

ObjectId

Mã phiên bản sản phẩm

2

MaSanPham

ObjectId

Mã sản phẩm

3

TenPhienBan

String

Tên phiên bản

4

TenHienThi

String

Tên phiên bản để hiển thị

5

ImgL

String

Hình ảnh lớn của phiên bản

6

ImgS

String

Hình ảnh nhỏ của phiên bản

7

Mota

String

Mô tả phiên bản sản phẩm

8

GiaBan

Int

Giá bán của phiên bản sản phẩm

9

SoLuongHangTon

Int

Số lượng hàng còn lại
Trạng thái của phiên bản sản

10

TrangThai

String

phẩm (còn sản xuất, ngưng sản
xuất,…)

Bảng 7 Mô tả quan hệ PHIENBANSANPHAM
4.3 Kiến trúc hệ thống
4.3.1 Kiến trúc tổng quan

13


− 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 MongoDB.

Hình 2 Kiến trúc luồng xử lí giữa client-side và server-side
4.3.2 Mơ tả kiến trúc

14


− 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 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 xây dựng và triển khai bởi
ExpressJs với máy chủ là localhost nhằm xử lí yê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á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.

15


4.4 Kiến trúc mã nguồn
4.4.1 Link source code đồ án nhóm
− Backend: />− Frontend: />4.4.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.4.3 Cấu trúc mã nguốn phía server-side
4.4.3.1 Các thành phần trường yêu cầu
− Package manager npm.
4.4.3.2 Cấu trúc các module project

− Config: chứa các file config cho website, server Redis và kết nối csdl
Mongodb.
− Router: 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.
− Controller: Điều khiển sự tương tác của của các router đến các service
− Service: Cài đặt lớp trung gian của Controller và các Model .
− Model: Truy vấn và thao tác đến cơ sở dữ liệu nhờ mongoose.
16


4.5 Cách thu thập dữ liệu (crawl) từ một website
− Trong phần này, nội dung sẽ sử dụng puppeteer và axios để crawl dữ liệu cần thiết
từ website thegioididong và cellphoneS. Kĩ thuật lấy nguồn dữ liệu đã được mô tả
tại mục 3.2.
4.5.1 Cấu trúc của module product crawl
− Base: chứa file excel crawl dữ liệu của sản phẩm như tên, giá tiền, thông số,
image link và các sản phẩm liên quan
4.5.2 Phân tích bài tốn
− Dữ liệu của website được lấy bằng cách request đến server của website
thegioididong và cellphoneS dưới dạng file html.
− Sau khi crawl dữ liệu, sử dụng puppeteer để tách dữ liệu cần thiết và ghi vào file
excel.
− Từ các file dữ liệu đã được tạo, dùng thư viện XLSX để đọc file và ghi vào
database.
4.6 Kiểm thử REStfull Web Server được tạo
4.6.1 Lấy thông tin tất cả sản phẩm
− Lần request đầu tiên khi bắt đầu chạy server tốc độ request 790ms.

Hình 4 Minh chứng request tất cả sản phẩm lần đầu.
17