Nghiên cứu và xây dựng website thương mại điện tử về sản phẩm chăm sóc da tích hợp hệ khuyến nghị khách hàng trên nền tảng NextJs.

Đồ án tốt nghiệp CHƯƠNG 1: TONG QUAN DE TÀI- Tinh năng review, bình luận, đánh giá sản phẩm: Một trong những cách truyền thông độc đáo và không mất phí chính là từ những đánh giá của chí

Trang 1

TOT NGHIỆP DAI HỌC

Đè tai: “NGHIÊN CUU VA XÂY DUNG WEBSITE THƯƠNG

MAI ĐIỆN TU VE SAN PHAM CHAM SOC DA TÍCH HỢP HỆ

KHUYEN NGHỊ KHACH HANG TREN NEN TANG NEXTJS”

Người hướng dan : TS VU HỮU TIEN Sinh viên thực hiện: | TRƯƠNG THỊ XUAN TƯƠI

Lớp: DI9PTDPT

Hệ: ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

Trang 2

BO THONG TIN VÀ TRUYEN THONG HỌC VIEN CONG NGHỆ BUU CHÍNH VIÊN THONG

¬

yt

SS

ĐÔ AN

TOT NGHIỆP ĐẠI HỌC

Đà tai: “NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE THUONG MẠI

ĐIỆN TỬ VE SAN PHAM CHAM SOC DA TÍCH HỢP HỆ KHUYEN

NGHỊ KHÁCH HANG TREN NEN TANG NEXTJS”

Người hướng dan: TS VŨ HỮU TIEN

Sinh viên thực hiện: TRƯƠNG THỊ XUÂN TƯƠI

Lớp: DI9PTDPT

Hệ: ĐẠI HỌC CHÍNH QUY

Trang 3

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THÔNG CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA ĐA PHƯƠNG TIEN Độc lập — Tự do — Hạnh phúc

ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC

Họ và tên sinh viên: Trương Thị Xuân Tươi

Lớp: DI9PTDPT Khoá: 2019-2023

Ngành đào tạo: Công Nghệ Đa Phương Tiện Hệ đào tạo: Đại học chính quy

1 Tên dé án/khóa luận tốt nghiệp: Nghiên cứu và xây dựng website thương mại điện tử

về sản phâm chăm sóc da tích hợp hệ khuyên nghị khách hàng trên nên tảng NextJs

2 Lý do chọn đề tài:

Làm đẹp và chăm sóc da là một phần quan trọng trong cuộc sống của nhiều phụ nữ và

cả nam giới Đó không chỉ là việc trang điểm và tạo ra vẻ đẹp tạm thời, mà còn là về việc

bảo vệ và duy trì sức sống cho làn da, giúp nó luôn khỏe mạnh và rạng ngời Tuy nhiên,

việc lựa chọn sản pham chăm sóc da phù hợp có thể không dễ dàng, và điều này thường

dẫn đến việc người tiêu dùng phải bỏ nhiều thời gian và công sức dé tìm kiếm thông tin về

các sản phẩm và thương hiệu phù hợp với nhu cầu của họ

Với mục tiêu mang đến các sản phâm chăm sóc da chất lượng từ các nhãn hàng quốc

tế đáng tin cậy nhưng với một mức giá phải chăng, website thương mại điện tử

Glow&Grace sẽ cung cap đa dạng các sản pham skincare với hy vọng rằng phái dep sẽ có

cơ hội tiếp cận với các san phâm chất lượng mà họ xứng đáng có

Một điểm đáng chú ý khác là sự áp dụng của Recommendation Systems, hệ thống sẽ

đưa ra những quảng cáo, gợi ý hướng đúng nhu cầu của từng khách hàng Điểm khác nhau

căn bản giữa các cửa hàng thực và cửa hàng điện tử là khu trưng bày và kho Nguyên tắc

dé thay dé đạt doanh thu cao là trưng ra các sản phẩm phổ biến nhất ở những nơi dễ nhìn

thấy và những sản phẩm ít phổ biến hơn được cất trong kho, cách làm này có một hạn chế

rõ rệt: những sản phâm được trưng ra mang tính phô biến chứ chưa chắc đã phù hợp với

một khách hang cụ thé Một cửa hàng có thé có món hàng một khách hàng tìm kiếm

nhưng có thể không bán được vì khách hàng không nhìn thấy sản phẩm đó trên giá; việc

này dẫn đến việc khách hàng không tiếp cận được sản phẩm ngay cả khi chúng đã được

trưng ra.

_ Ngoài ra, vì không gian có han, cửa hàng không thé trưng ra tất cả các sản phẩm mà

mỗi loại chỉ đưa ra một số lượng nhỏ Ở đây, phan lớn doanh thu (80%) đến từ phan nhỏ

số sản phẩm phổ biến nhất (20%) Néu sap xêp các san pham của cửa hàng theo doanh sỐ

từ cao đến thấp, ta sẽ nhận thấy có thé phần nhỏ các sản phẩm tạo ra phan lớn doanh số;

và một danh sách dài phía sau chỉ tạo ra một lượng nhỏ đóng góp Hiện tượng này còn

được gọi là long tail phenomenon, tức phần đuôi dai của những sản phẩm ít phố biến

Với cửa hàng online, nhược điểm trên hoan toàn có thé tránh được, vì không gian trưng bày của các cửa hàng online gần như là vô tận, mọi sản phẩm đều có thể được trưng

ra Hơn nữa, việc sắp xếp online là linh hoạt, tiện lợi với chi phí chuyên đổi gần như bằng

0 khiến việc mang đúng sản phẩm tới khách hàng trở nên thuận tiện hơn Doanh thu, vì

thế có thể được tăng lên.

Chính vì vậy, em đã lựa chọn đề tài “Nghiên cứu và xây dựng website thương mại

điện tử về sản phẩm chăm sóc da tích hợp hệ khuyến nghị khách hàng trên nên tảng

NextJs” Website có chức năng như xem các sản phâm, thêm sản phẩm vào giỏ hàng, xem

Trang 4

thông tin chi tiết một cửa hàng, thu thập voucher, đặt hàng, hủy đơn, tìm kiếm sản phẩm

tương tự, gợi ý các sản phâm dựa trên mức độ quan tâm của khách hàng,

3 Nội dung chính của đồ an:

Đô án được chia làm các chương như sau:

Chương 1: Tổng quan đề tài Chương này miêu tả bài toán, các chức năng của hệ

thống và cơ sở lý thuyết của đồ án

Chương 2: Phân tích và thiết kế hệ thống Chương này sẽ phân tích kiến trúc tổng quát

của hệ thống, xây dựng biểu dé usecase, biểu đô lớp và biéu đồ tuần tự, thiết kế giao diện cho

website

_ Chương 3: Nghiên cứu va áp dụng Hệ thống gợi ý trong xây dựng website bán các sản

phâm chăm sóc da

Chương 4: Nghiên cứu va xây dựng ứng dụng Back-end cho website Glow&Grace

Chương 5: Nghiên cứu và xây dựng ứng dung Front-end

Chương 6: Đánh giá, nhận xét kết quả.

4 Cơ sở dữ liệu ban dau:

5 Ngày giao dé tài: 20

6 Ngày nộp quyển: ⁄ /2

GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN

(Ký, ghi rõ họ tên) (Ky, ghi rõ họ tên)

TRƯỞNG KHOA(Ký, ghi rõ họ tên)

Trang 5

Đồ án tốt nghiệp NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

NHAN XÉT CUA GIANG VIÊN HƯỚNG DAN

Điêm: (Bằng chữ: )

Hà Nội, ngày thang năm 2023

Giảng viên hướng dẫn

Trương Thị Xuân Tươi - DI9PTDPT

Trang 6

Đồ án tốt nghiệp LỜI CẢM ƠN

LỜI CẢM ƠN

Lời đầu tiên, em xin được gửi lời cảm ơn chân thành đến Ban giám hiệu nhà trường cùng toàn thê thầy cô trong Học viện Công nghệ Bưu chính Viễn Thông đã

luôn đành tâm huyết, sự quan tâm dạy dỗ và đồng hành cùng em trong suốt 4 năm học

tập tại trường Dưới sự dìu dắt của thầy cô mà em ngày một trưởng thành, tự tin với

kiến thức mình có được, em không chỉ tiếp thu được kiến thức, kĩ năng liên quan đến

chuyên môn mà còn có được nhiều kĩ năng sống, bài học từ kinh nghiệm của thầy cô

truyền đạt.

Đặc biệt, em xin gửi lời cảm ơn đến thầy Vũ Hữu Tiến, thầy đã luôn đồng hành,

trợ giúp, giúp đỡ em từng bước trên con đường nghiên cứu, hoàn thành Đồ án tốt

nghiệp Sự kiên nhẫn và sự chia sẻ kiến thức sâu rộng của thay là nguồn động viên quý

báu, đã góp phần quan trọng vào sự thành công của dự án này Nếu không có những sự

chỉ bảo của thay thì thực sự khó khăn dé có thể hoàn thiện tốt nhất đồ án này Một lần

nữa em xin chân thành cảm ơn thay rất nhiều.

Em cũng xin chân thành cảm ơn các Thầy/Cô trong Ban hội đồng đã dành thời gian lắng nghe, góp ý và nhận xét bản đồ án tốt nghiệp của em Sự chấp nhận và đánh giá từ phíaBan hội đồng không chỉ là một phần quan trọng của quá trình kiểm tra ma

còn là nguồn động viên lớn lao đối với em Em cam kết sẽ tiếp tục phát triển và áp

dụng những kiến thức, kinh nghiệm mà em đã học được từ quá trình này vào sự nghiệp

và cuộc sống hàng ngày.

Trong thời gian hoàn thiện đồ án, em đã dồn hết tâm sức của mình để xây dựng

và hoàn thiện bản đồ án này Tuy nhiên, do kiến thức còn hạn hẹp, kinh nghiệm thực tế

chưa nhiều nên không thể tránh khỏi những thiếu sót, em rất mong nhận được sự thông

cảm và góp ý từ quý Thay cô dé bản đồ án của em được hoàn thiện hơn.

Em xin chân thành cảm ơn !

Trương Thị Xuân Tươi - DI9PTDPT

Trang 7

1.2 Phát biểu bài toán

1.3.

1.4.

1.2.1 Mô tả chung

1.2.2 Lý do chọn đề tài

1.2.3 Mục tiêu nghiên cứu

1.2.4 Phương pháp nghiên cứu

Phương pháp tiếp cận giải quyết vấn đề 1.3.1 Mô hình tổng quát

1.4.1.4 Python IDE 1.4.2 Reactjs

1.4.2.1 Giới thiệu chung về React 1.4.2.2 Đặc điểm, tính năng

1.4.2.3 Ưu điểm của React 1.4.2.4 Hạn chế của React

Trang 8

1.4.6.1 Tìm hiểu chung về Postgresql

1.4.6.2 Tính năng của Postgresql 1.4.6.3 Sự khác biệt giữa MySql và Postgresql 1.4.7 Framer Motion

CHUONG 2: PHAN TÍCH VA THIET KE HỆ THONG

2.1 Phân tích hệ thống

2.1.1 Xác định yêu cầu 2.1.2 Bléu đồ usecase và kịch ban

2.1.2.1 Biểu đồ usecase tổng quan của hệ thống

2.1.2.2 Xây dựng kịch bản

2.2 Thiết kế hướng đối tượng

2.2.1 Biểu đồ lớp thiết kế

2.2.2 Thiết kế giao diện của hệ thống

2.2.2.1 Giao diện trang Đăng nhập/ Đăng ký

2.2.3.2 Giao diện Giỏ hàng 2.2.3.3 Giao diện Trang chủ 2.2.2.7 Giao diện Thanh toán 2.2.2.8 Giao diện Cửa hàng

2.2.2.9 Giao diện Dashboard của Admin

2.2.2.10 Giao diện quan lý Sản phâm 2.2.2.11 Giao diện Thêm/ Sửa Sản phẩm

CHƯƠNG 3: NGHIÊN CỨU VÀ ÁP DỤNG HỆ THÓNG GỢI Ý TRONG WEBSITE

THƯƠNG MẠI ĐIỆN TỨ

3.1 Giới thiệu Hệ thống gợi ý

3.1.1 Tổng quan 3.1.2 Thành phần và chu trình của Hệ thống gợi ý 3.2 Các phương pháp của Hệ thống gợi ý

3.2.1 Hệ gợi ý không cá nhân hóa (non-personalized)

3.2.2 Hệ gợi ý cá nhân hóa (personalized)

3.2.2.1 Content-based systems

3.2.2.2 Collaborative filtering

3.3 Khai phá dữ liệu San phâm

3.3.1 Miêu tả dataset 3.3.2 Các độ đo tương tự

3.3.2.1 Cosine similarity 3.3.2.2 Euclidean Distance

Trang 9

Đồ án tốt nghiệp MỤC LỤC

3.3.4.1 Cosine similarity 3.3.4.2 Euclid similarity 3.4 Khai pha dữ liệu người dùng

3.4.1 Phương pháp tiếp cận 3.4.2 Miêu tả về dữ liệu người ding

3.4.3 Dọn dẹp dữ liệu

3.4.3.1 Làm sạch dữ liệu (data cleaning)

3.4.3.2 Chuyển đổi dữ liệu (data transformation)

3.4.3.3 Thu giảm di liệu

3.4.4 Mô hình K Means phân cụm người dùng

3.4.4.1 Khái niệm phân cụm 3.4.4.2 Thuật toán Kmeans

3.4.4.3 Kỹ thuật khuỷu tay Elbow chọn số cụm tối ưu 3.4.5 Đề xuất sản phẩm dựa trên nhóm người dùng

CHƯƠNG 4: NGHIÊN CỨU VÀ XÂY DỰNG ỨNG DỤNG BACKEND CHO WEBSITE

4.1 Phương pháp tiếp cận và giải quyết vấn đề

4.2 Cơ sở dữ liệu

4.2.1 Kết nói tới cơ sở dữ liệu

4.2.2 Tạo Entity 4.3 APIs

4.3.1 Thiết Kế Endpoints API

4.3.2 Xử ly dit liệu và truy vấn

4.4 Quản Lý Người Dùng và Xác Thực

4.4.1 Quản ly người dùng

4.4.2 Xác thực và phân quyền

4.5 Nested Set Model

4.5.1 Giới thiệu về cây phân cấp 4.5.2 Các phương pháp cài đặt và triển khai cây phân cấp

4.5.3 Ứng dung với “Reviews Nested” trong website

4.6 Xây dựng APIs với Flask

4.6.1 Giới thiệu về Flask

4.6.2 Cài đặt và xây dựng APIs Flask

CHƯƠNG 5: NGHIÊN CỨU VÀ XÂY DỰNG ỨNG DỤNG

FRONT-END

5.1 Phương pháp tiếp cận và giải quyết van đề

5.1.1 Client-side rendering va Server-side rendering 5.1.2 Nextjs

5.2 Đề xuất sản phâm với người ding

5.2.1 Giao điện tổng quan

5.2.2 Xây dựng Giao diện Gợi ý sản phẩm 5.3 Quản trị hệ thống

5.4 Đa ngôn ngữ voi Internationalization (118n)

5.4.1 Giới thiệu về Internationalization (¡18n)

5.4.2 Cài đặt và sử dung 11 8next

5.4.2.1 Cai đặt và cầu hình il 8next

5.4.2.2 Ứng dụng ¡18next vào Trang chủ

Trương Thị Xuân Tươi - DI9PTDPT 5

Trang 11

Hình 1.7 Anh minh họa 2

Hình 1.8 Kiến trúc tổng quát của hệ thống

Hình 1.9 Quy trình khai phá dữ liệu lặp CRISP-DM

Hình 1.10 Mô hình Client - Server

Hình 1.11 Top ngôn ngữ lập trình phổ biến năm 2022

Hình 1.17 Top trending library, framework

Hình 2.1 Usecase tổng quan của hệ thống

Hình 2.2 Phân rã usecase Đăng nhập

Hình 2.3 Phân rã usecase Đăng ký

Hình 2.4 Usecase Xem chỉ tiết một sản phẩm

Hình 2.5 Usecase chỉ tiết Đánh giá/Phản hồi đánh giá sản phẩm

Hình 3.3 Vector đặc trưng của Sản phẩm

Hình 3.4 Công thức tính khoảng cách Euclidean

Hình 3.5 Tính tong giá trị null của từng cột

Hình 3.6 Danh sách các sản phẩm tương tự bằng phương pháp Cosine

Hình 3.7 Danh sách các sản phẩm tương tự bằng phương pháp Euclid

Hình 3.8 Quá trình học không giám sát

Hình 3.9 Danh sách các sản phẩm tương tự bằng phương pháp Cosine

Hình 3.10 Tổng các cột có giá trị null

Hình 3.11 Ánh xạ giá tri Gender

Hình 3.12 Chuyên đổi dit liệu về miền [0,1]

Hình 3.13 Minh họa PCA

Hình 3.14 Bài toán chuyển hệ tọa độ

Hình 3.15 Các bước thu giảm chiều dữ liệu

Hình 3.16 Minh họa Thuật toán K-means

Hình 3.17 Tìm k bằng kỹ thuật khủy tay Elbow

Hình 3.18 Virtualize dữ liệu sau khi đã phân cum

Hình 3.19 Virtualize các tâm cụm

Trang 12

Gợi ý thể loại cho người dùng

Cấu hình kết nối Database bằng Typeorm

Import cấu hình vào trong AppModule

Tao Entity

Khai bao Routing Request object

Xử lý dit liệu đầu ra

Truy van tới database

Sử dụng TypeORM truy vấn tới database

publicKey và privateKey accessToken va refreshToken

M6 hinh cay phan cap

Vi dụ phân cấp quan áo giữa nam va nữ

Mô hình phân cấp cha-con

Mô hình dạng cây Materialized Path

Cầu trúc Nested Set Model

Tao router cho api recommend sản pham

Tao router cho viéc training model

Server Side Rendering (SSR) Client Side Rendering (CSR)

Giao diện sản phẩm đề xuất 1 Giao diện sản phẩm đề xuất 2

ApexCharts

Hình 5.10 Internationalization (i18n)

Hình 5.12 Tạo file json với mỗi ngôn ngữ

Hình 5.13 : Giao diện tiếng Anh

Hình 5.14 Giao diện tiếng Hàn

Trương Thị Xuân Tươi - D19PTDPT

Ví dụ bảng trong database theo mô hình phân cấp

Vi dụ bảng theo mô hình Materialized Path

Sơ đồ xác định mối quan hệ giữa các nút của cấu trúc cây

Tao instance của KMeansModel và RecommendModel

Tao router cho api tim những sản phẩm tương tự

DANH MUC HINH ANH

Trang 13

biệt đến bản thân và sức khỏe Làn da không chỉ là biểu tượng của vẻ đẹp ngoại hình mà còn

là gương mặt của sức khỏe và sự tự chủ Nếu xã hội thể hiện sự tiến bộ qua những dấu ấn và

đặc điểm cá nhân, thì làn da, như một phần không thê tách rời của chúng ta, trở thành bức

tranh độc đáo của cuộc sống và thời đại

Quyết định chọn đề tài xây dựng một trang web thương mại điện tử chuyên về các sản

phẩm chăm sóc da không chỉ là sự chọn lựa cho đồ án tốt nghiệp, mà còn là sự phản ánh của

niềm tin sâu sắc về ý nghĩa tỉnh tế của việc chăm sóc làn da Trong một thế giới ngập tràn

thông tin, việc tìm kiếm và chọn lựa các sản phâm chăm sóc da không chỉ là một quá trình

mua săm đơn thuần mà còn là cuộc hành trình khám phá và tôn vinh vẻ đẹp cá nhân

Vì thế, quyết định xây dựng một không gian trực tuyến chuyên biệt dé đưa ra các sảnphẩm chất lượng tới phái đẹp, đánh thức sự tự tin, bên cạnh đó kết nối những người yêu quý

và mong muốn tái tạo làn da Đây là sự kết hợp tinh tế giữa sáng tao và ý thức về sức khỏe

2 Mục tiêu đề tài

Mục tiêu chính của dé tài là tạo ra một trải nghiệm chăm sóc da đặc biệt dành cho phái

nữ, nơi mà họ có thé dé dàng tiếp cận va trải nghiệm các sản phẩm từ các thương hiệu chăm

sóc đa nồi tiếng trên toàn thé giới Với mục tiêu không chỉ luôn đảm bảo chất lượng sản phẩm

mà còn đảm bảo giá cả phải chăng, phù hợp với đa dạng đối tượng, ké cả học sinh và sinh

viên với nguồn thu nhập hạn chế.Mong muốn phái nữ sẽ có cơ hội trải nghiệm những sản

phẩm chăm sóc da chất lượng cao, mà không cân phải đối mặt với gánh nặng tài chính quá

lớn Việc này không chỉ là vê việc bảo vệ làn da khỏi các tác động có hại, mà còn là về việc

tạo ra một tinh thần tự tin, làm tăng cường sự rạng ngời và hạnh phúc trong cuộc sống hàng

ngày.

Với mục tiêu này, tôi hy vọng rằng trang web sẽ trở thành một không gian mở, nơi

phái nữ không chỉ mua sắm mà còn tìm kiếm những thông tin hữu ích vê chăm sóc da, xu

hướng làm đẹp, và cách thức dé họ tự tin hơn về bản thân

3 Bố cục của đồ án

Chương 1: Tổng quan đề tài.

Chương 2: Phân tích và thiết kế hệ thống.

Chương 3: Nghiên cứu và áp dụng Hệ thống gợi ý trong website thương mại điện tử

Chương 4: Nghiên cứu và xây dựng ứng dụng Back-end

Chương 5: Nghiên cứu và xây dựng ứng dụng Front-end

Chương 6: Đánh giá, nhận xét kết quả.

Truong Thị Xuân Tươi - DI9PTDPT 1

Trang 14

Đồ án tốt nghiệp CHƯƠNG 1: TONG QUAN DE TÀI

CHUONG 1: TONG QUAN DE TAI 1.1 Khao sat

1.1.1 Amazon

1.1.1.1 Giới thiệu

Amazon là một công ty công nghệ đa quốc gia của Mỹ có trụ sở tại Seattle, Washington tập trung vào điện toán đám mây, truyền phát kỹ thuật sé, trí tuệ nhân tạo va

thương mại điện tử Công ty nay được coi là một trong những công ty công nghệ Big Four

cùng với Google, Apple và Facebook

Hình 1.1, Công ty Amazon

Amazon duge Jeff Bezos thanh lap vao ngay 5 thang 7 nam 1994, tai Bellevue,

Washington Công ty ban dau kinh doanh như một nha phân phối trực tuyến sách nhưng sau

đó mở rộng thêm dé bán đồ điện tử, phần mềm, trò chơi video, may mặc, đồ nội thất, thực

phẩm, đồ chơi và trang sức Năm 2015, Amazon đã vượt qua Walmart trở thành nhà bán lẻ có

giá trị nhất tại Hoa Kỳ tính theo giá trị vốn hóa thị trường.

Amazon được biết đến với việc làm thay đổi tư duy

của các ngành công nghiệp đã được thiết lập thông qua đôi

mới công nghệ và phát triển quy mô lớn Ngoài ra, Amazon

còn là thị trường thương mại điện tử lớn nhất thế giới, nhà

cung cấp trợ lý AI và nên tảng điện toán đám mây được đo

bằng doanh thu và vốn hóa thị trường

Amazon chuyên cung cấp dịch vụ tải xuống và Hình 1 2: CEO của Amazon Jeff

phát trực tuyên video, âm nhạc, audiobook thông qua co W

các công ty con như Amazon Prine Video, Amazon

Music và Audible

1.1.1.2 Đặc điểm của trang web Amazon

- _ Có đa dạng các mặt hang: Amazon ban đầu là một công ty ban đầu là một công ty bán

sách nhưng đã mở rộng bán đa dạng những loại sản pham/dich vu khac nhau thudc

nhiều lĩnh vực, từ các mặt hang đồ ăn, ebook, CD, đến các sản phẩm công nghệ như phần mềm, trò chơi, đồ may mặc, thực phẩm, trang sức, Đây có lẽ là một trong những lý do lớn nhất khiến Amazon đạt được thành công như hiện nay.

- Nam bắt được nhu cầu và mong muốn của người dùng: Trên thực tế, Amazon còn hiểu

rõ hành vi và nhu cầu khách hàng hơn là chính khách hàng Điều đó được chứng minh

qua trang web của Amazon (cả trang web gốc lẫn trang web Amazon Việt Nam)

Ngoài các chương trình ưu đãi, khuyến mãi và các sản phẩm nổi bật ra thì trang web

này còn đề xuất một số những sản phẩm mà Amazon cho rằng khách hàng sẽ thích

dựa trên hành vi tiêu dùng của khách hàng (lịch sử tìm kiếm sản phẩm trên trang web).

Trang 15

- Tinh năng review, bình luận, đánh giá sản phẩm: Một trong những cách truyền thông

độc đáo và không mất phí chính là từ những đánh giá của chính khách hàng thông qua

quá trình sử dụng

- Luôn luôn bắt kịp xu hướng, phát triển quy trình, cải tiến công nghệ:

1.1.1.3 Hệ thống Đề xuất Sản phẩm

Hệ thống đề xuất của Amazon đã thay đôi cuộc chơi trong thế giới thương mại điện tử

Bằng cách sử dụng Big Data và Machine Learning, Amazon đã có thể tạo các đề xuất được cá

nhân hóa cho khách hàng dựa trên lịch sử mua săm, nhân khâu học và hành vi của họ Dựa

trên quá trình lọc cộng tác, bao gồm việc phân tích hành vi của những người dùng tương tự dé

đưa ra đê xuat được cá nhân hóa Cách tiép cận nay có hiệu qua cao vì nó tinh đên sở thích va

môi quan tâm đa dạng của các khách hàng khác nhau

Hệ thống đề xuất sản phẩm chia làm 3 nội dung chính:

- Events (Sự kiện ): Amazon sẽ theo dõi và lưu trữ dữ liệu của tất cả khách hàng dựa

trên hành vi và hoạt động trên trang web Moi cú click, like mà user tạo nên, sẽ có

một bản ghi sự kiện này được lưu vào database

- Ratings (Đánh giá, nhận xét san pham/ người dùng): liên quan trực tiếp tới việc người

dùng cảm nhận như thé nào về sản phẩm, hệ thống gợi ý có thể truy cập vào tài khoảnrating và phản hồi của người dùng cung cap

- Filtering ( Lọc ): Kỹ thuật loc cộng tác là nền tảng của hệ thống đề xuất của Amazon

để đưa ra đề xuất dựa trên hành vi và sở thích của người dùng Khi làm như vậy,Amazon phân tích lượng lớn dữ liệu, chăng hạn như:

+_ Lịch sử mua hang của khách hàng

+ Hành vi duyét web và xếp hạng của họ

Mục tiêu là xác định các mẫu và điểm tương đồng giữa những người dùng Bằng cách

tìm kiêm những người dùng có cùng sở thích và sở thích, Amazon có thê giới thiệu những sản

phâm mà một người dùng thích cho những người khác có cùng sở thích

Trang 16

Hinh 1.4 Anh minh hoa 1

Hầu hết mọi người đều hiểu Shopee là một website thương mại điện tử, nhưng chính

xác hơn Shopee chính là website cung cap dịch vụ thương mại điện tử Shopee được thành lập

nhằm cung cấp môi trường thương mại điện tử cho các tô chức, cá nhân, doanh nghiệp tiến

hành hoạt động bán hàng online của mình Do vậy, Shopee được tích hợp nhiều tính năng hơn

nhằm da dang hàng hóa buôn bán và phù hợp với nhiều đối tượng khách hàng hon.

Hình 1.5 Shopee

1.1.2.2 Hệ thống Đề xuất sản phẩm

Tiêu chí để những sản phẩm được hiển thị trong mục phô biến :

— Tính tương tác của sản phẩm: Lượt thích, Lượt bình luận, Lượt nhấp, Lượt xem Con số này

sẽ tăng lên nêu người bán tích cực chia sẻ các mặt hàng của họ

Hình 1.6 Ảnh minh hoa 1

— Don hàng đã tạo: Điểm này càng cao thi sản phẩm đã sản xuất được càng nhiều đơn hàng.

Trang 17

Hinh 1.7 Anh minh hoa 2

— Tính mới của san phẩm: Con số này càng cao, người ban càng thường xuyên thay đổi thong

tin sản phâm như mô tả, thẻ băt đâu băng # và còn hàng

— Tính ngẫu nhiên: Hệ thống gán một số ngẫu nhiên cho mỗi sản phẩm Điều này đảm bảo

răng tât cả các hàng hóa đêu có xác suât trúng thưởng như nhau

1.2 Phát biểu bài toán

1.2.1 Mô tả chung

Hệ thống gợi ý (Recommendation System) đã và đang trở thành một phần không thể

thiếu của các ứng mua hàng trực tuyến, việc thấu hiểu người dùng, cá nhân hóa điện tử sẽ

mang đến trải nghiệm tốt hơn Nếu quảng cáo sản phẩm tới đúng người dùng, khả năng các

món hàng sẽ được mua nhiều hơn Nêu gợi ý một sản pham mà người dùng có nhiều khả năng

thích hoặc gợi ý kết bạn đến đúng đối tượng, họ sẽ ở lại trang web lâu hơn và khi đó họ có thê

sẽ nhìn thấy nhiều quảng cáo hơn và lợi nhuận từ quảng cáo sẽ tăng lên

1.2.2 Lý do chọn đề tài

Việc cá nhân hóa trải nghiệm mua sắm là yếu tố quan trọng dé tạo ra một sự kết nối

mạnh mẽ giữa khách hàng và sản pham Việc tích hợp một hệ thống khuyến nghị hiệu quả sẽ

giúp nâng cao sự hài lòng của khách hàng và tăng cường doanh so bán hàng Với phái đẹp,

các vấn đề liên quan đến da mặt rat nhạy cảm, việc sở hữu một lan da khỏe mạnh, tự nhiên sẽ

giúp cho họ trở nên tự tin và quyến rũ hơn, tuy nhiên việc tìm kiếm các liệu pháp chăm sóc da

hay các sản phâm chăm sóc da phù hợp với làn da của mình lại không hề dé dàng.

Vi vậy, Website thương mại điện tử Glow&Grace cung cấp các sản phâm chăm sóc datới từ các thương hiệu mỹ phâm nổi tiếng, tích hợp Recommender System với mục tiêu tích

hợp một hệ thống khuyến nghị khách hàng nhằm tôi ưu hóa trải nghiệm mua sắm và cá nhân

hóa dịch vụ Dé giúp cho phái đẹp có thé được trải nghiệm, sử dung các sản phẩm tốt nhất và

phù hợp nhất với làn da của mình

1.2.3 Mục tiêu nghiên cứu

- - Xây dựng website cung cấp và phân phối các sản phẩm chăm sóc da, tóc đến người

tiêu dùng

- Gợi ý, đề xuất các sản phẩm phù hợp đến từng đối tượng người dùng.

- Cung cấp các giải pháp quản lý đối với chủ cửa hàng: Quản lý sản phẩm, thống kê

danh thu, Thêm/ Cập nhật sản phâm,

1.2.4 Phương pháp nghiên cứu

s% Thu thập dữ liệu:

Trang 18

- San pham: Sử dụng các công cụ phân tích dữ liệu để thu thập thông tin về sản pham

như: tên sản phâm, giá, cách sử dụng, công dụng, sô lượng trong kho,

- Nguoi dùng: Thu thập dữ liệu khi người dùng đăng nhập hoặc đăng ký tài khoản ở

trang web

“ Xirly và phân tích dữ liệu:

- Su dụng các thuật toán học máy và công cụ phân tích dé xử lý dữ liệu đưa ra gợi ý sản

phâm phù hợp nhât đên với người tiêu dùng

1.3 Phương pháp tiếp cận giải quyết van đề

1.3.1 Mô hình tổng quát

Website thương mại điện tử Glow&Grace được triển khai dưới hình thức Single Page

Application với hai phân được phát triển độc lập là: Front-end và Backend Đối với Front-end

sẽ sử dung framework Nextjs, đây là một framework của React cho phép phát triển ứng dung

trên cả client-side va server-side Giao diện sẽ bao gồm hệ thống các giao diện như: trang chủ,

trang tìm kiếm, trang thông tin sản pham, thông tin cửa hàng, lịch sử mua hàng

Về phía Server, sẽ xây dựng các API bằng framework Nestjs cung cấp các chức năng

cho phía giao diện người dùng theo chuẩn Restful API Các thông tin, dữ liệu sẽ được lưu trữ

theo một cấu trúc trong Postgres, đối với server dùng dé training model sẽ sử dụng thư viện

Flask, một framework của Python

R Request equest

a) Quy trình khai phá đữ liệu

Quy trình khai phá dữ liệu theo tiêu chuẩn công nghiệp CRISP-DM coi khai phá dữ liệu là một chuỗi lặp và tương tác gồm các bước bắt đầu với dữ liệu thô (các file csv) và kết

thúc với trí thức tìm được (mô hình) nhằm đáp ứng được yêu cầu của người sử dụng (nhà phát

triển backend)

Trang 19

Hình 1.9 Quy trình khai pha dữ liệu lap CRISP-DM

CRISP — DM chia quá trình khai pha đữ liệu thành 6 giai đoạn Mỗi giai

đoạn có một nhiệm vụ khác nhau:

- _ Giai đoạn 1 (Business understanding): Đây là bước đầu tiên nhằm tìm hiểu nghiệp vụ

bài toán và mục tiêu khai pha dir liệu.

- _ Giai đoạn 2 (Data understanding): Hiểu dit liệu dé có thé đưa ra cách thức thu thập dữ

liệu phù hợp

- Giai đoạn 3 (Data preparation): Chuan bị dữ liệu gồm những nhiệm vụ cơ bản như

chọn lọc, làm sạch, tích hợp, biên đôi và giảm chiêu dữ liệu

- Giai đoạn 4 (Data modeling): Nhiệm vu của giai đoạn này là chon lựa mô hình dữ liệu

đê đáp ứng được nhiệm vụ khai phá dữ liệu theo mục tiêu đưa ra

- _ Giai đoạn 5 (Evaluation): Vì có khá nhiều mô hình khai phá dữ liệu khác nhau có thé

được sử dụng cho bài toán hướng tới, tuy nhiên không phải mô hình nào cũng cho

hiệu quả cao Đồng thời, bản thân khi thay đổi các tham số trong một mô hình cũngkhiến cho hiệu quả mang lại của mô hình đó khác nhau Do vậy việc đánh giá mô hình

khai phá dit liệu là đặc biệt cần thiết.

-_ Giai đoạn 6 (Deployment): Tri thức có được thông qua quá trình khai phá dữ liệu cần

được trình bày theo cách mà các bên liên quan có thê sử dụng khi họ muốn, bảo trì vàgiảm sát để thực hiện các hỗ trợ cho tương lai

b) Ứng dụng backend và frontend

Kịch bản gửi yêu cầu, tiếp nhận yêu cầu, xử lý yêu cầu, trả về kết quả và cuối cùng là

hiển thị lên trên ứng dụng, đó chính là “Mô hình Client-Server” Trong đó thuật ngữ Client

chính là ứng dụng người dùng sử dụng trực tiếp được cài đặt trên điện thoại (hoặc được chạy

trên trình duyét web), và nơi cung cấp dit liệu chính là Server (máy chủ).

Trang 20

a @—-s

Smartphone Internet Server

Laptop

Hình 1.10 Mô hình Client - Server

Các ứng dụng mua săm trực tuyến như Lazada, Tiki, - đều theo một kịch bản là ứng

dụng - Client gửi yêu cau ( đăng nhập, lây danh sách sản phâm, cập nhật thông tin, ) tới

một máy chủ Server Máy chủ - Server tiếp nhận thông tin, xử lý , lưu trữ thông tin xuống co

so dit liệu ( Database ) và tra về kết quả tương ứng cho Client Lúc nay Client sẽ hiển thị

thông tin kết quả đến người dùng

1.4 Công nghệ nền tảng

1.4.1 Python

1.4.1.1 Python là gì

Python là một ngôn ngữ lập trình được sử dụng rộng rãi trong các ứng dụng web, phát

triển phần mềm, khoa học dữ liệu và máy học (ML) Các nhà phát triển su dung Python vì nó

higu qua, dễ học và có thể chạy trên nhiều nền tảng khác nhau Phần mềm Python được tải

xuống miễn phí, tích hợp tốt với tat cả các loại hệ thông và tăng tốc độ phát trién

Theo thống kê của Github vào năm 2022, Python đứng vị trí thứ 2 về top các ngônngữ lập trình được sử dụng nhiêu nhât

Top languages used in 2022

Hình 1.11 Top ngôn ngữ lập trình phổ biến năm 2022

Python được thiết kế với tư tưởng giúp người học dé đọc, dé hiểu và dé nhớ; vì thé

ngôn ngữ Python có hình thức rất sáng sủa, cau trúc rõ ràng, thuận tiện cho người mới học

Cấu trúc của Python cho phép người sử dụng viết mã lệnh với số lần gõ phím tối thiêu, nói

cách khác thì so với các ngôn ngữ lập trình khác, chúng ta có thé sử dụng ít dong code hơn dé

viết ra một chương trình trong Python.

Trang 21

1.4.1.2 Lich sir phat trién

Guido Van Rossum, một lập trình viên máy tính ở Ha Lan, đã tạo ra Python Ông bắt

đầu phát triển ngôn ngữ này vào năm 1989 tại Centrum Wiskunde & Informatica (CWI), ban

đầu chi là một dự án tiêu khién dé giúp ông giết thời gian trong dịp Giáng sinh Tên gọi của

ngôn ngữ nay được lay cảm hứng từ chương trình truyền hình Monty Python's Flying Circus

của dai BBC vi Guido Van Rossum là một “fan cứng” của chương trình nay

Lịch sử các phiên bản Python:

e Guido Van Rossum cho ra mat phiên ban đầu tiên của ngôn ngữ Python (phiên bản

0.9.0) vào năm 1991 Ngôn ngữ này đã bao gồm các tính năng hữu ích như một sốkiểu dữ liệu và hàm dé xử lý lỗi

e Python 1.0 đã được ra mắt vào năm 1994 với các hàm mới dé dé dàng xử lý danh sách

dữ liệu, chăng hạn như ánh xạ, lọc và lược bỏ

e Python 2.0 đã được ra mắt vào ngày 16 tháng 10 năm 2000, với các tính năng hữu ich

mới cho lập trình viên, chăng hạn như ho trợ ký tự Unicode va cach xử lý chi tiét mộtdanh sách nhanh chóng hơn

e Python 3.0 đã được ra mắt vào ngày 3 tháng 12 năm 2008 Phiên bản này bao gồm các

tính năng như hàm in và hỗ trợ nhiêu hon cho việc phân chia số và xử lý lỗi

1.4.1.3 Ứng dụng của Python

a) Khoa học đữ liệu và máy học

Khoa học dữ liệu trích xuất thông tin quý giá từ dit liệu và máy hoc (ML) day máy

tính tự động học hỏi từ dt liệu và đưa ra các dự đoán chính xác Các nhà khoa học dữ liệu sử

dụng Python cho các tác vụ khoa học dữ liệu sau:

e Sửa và loại bỏ dữ liệu không chính xác, hay còn được gọi là làm sạch dữ liệu

e_ Trích xuất và chọn lọc các đặc điểm da dạng cua dt liệu

e Ghi nhãn dữ liệu gan tên có ý nghĩa cho dữ liệu

e Tìm các số liệu thống kê khác nhau từ dit liệu

e Trực quan hóa dữ liệu bang cách sử dụng các biêu đô và đô thị, chăng hạn như biêu đô

đường, biêu đô cột, biêu đồ tân suât và biêu đô tròn

Các nhà khoa học dữ liệu sử dụng những thư viện ML của Python dé đào tạo các mô hình ML

và xây dựng các công cụ phân loại giúp phân loại dữ liệu một cách chính xác Các chuyên gia

từ nhiều lĩnh vực sử dụng những công cụ phân loại dựa trên Python đề thực hiện các tác vụ

phân loại, chăng hạn như phân loại hình ảnh, văn bản cũng như lưu lượng truy cập mạng,

nhận dạng giọng nói và nhận diện khuôn mặt Các nhà khoa học dữ liệu cũng sử dụng Python

cho deep learning, một kỹ thuật ML nâng cao

b) Phát triển phan mêm

Các nhà phát triển phần mềm thường sử dụng Python cho những tác vụ phát triển vàứng dụng phần mềm khác nhau, chang hạn như:

e Theo dõi lỗi trong mã của phan mềm

e Tu động xây dựng phan mềm

e Đảm nhận quan lý dự án phan mềm

e Phát triển nguyên mau phần mềm

Trang 22

e Phát triển các ứng dụng máy tinh bằng cach sử dung những thư viện Giao diện đồ họa

người dùng (GUI)

e Phát triển từ các trò chơi văn bản đơn giản cho đến những trò chơi điện tử phức tạp

c) Tự động hóa kiểm thử phan mém

Kiểm thử phần mềm là quy trình kiểm tra xem kết quả thực tế từ phần mềm có khớp

với kêt quả mong đợi không đê đảm bảo răng phân mêm không có lỗi

e Các nhà phát triển sử dụng khung kiểm thử đơn vị Python, chăng hạn như Unittest,

Robot và PyUnit, để kiểm thử các hàm do họ viết.

e Các kỹ sư kiểm thử phần mềm sử dung Python dé viết các trường hợp kiểm thử cho

nhiều tình huống khác nhau Ví dụ: họ sử dụng ngôn ngữ này dé kiém thir giao dién

người dùng của một ứng dung web, nhiều thành phan của phần mềm và những tính

năng mới.

Các nhà phát triển có thể sử dụng một sỐ công cụ đề tự động chạy tập lệnh kiểm thử Những

công cụ này có tên gọi là công cụ Tích hợp liên tục/Triên khai liên tục (CI/CD)

1.4.1.4 Python IDE

Môi trường phát triển tích hợp (IDE) là phần mềm cung cấp cho các nhà phát triển

công cụ duy nhất họ cần đề viết, chỉnh sửa, kiểm tra và gỡ lỗi mã Một số IDE phô biến như:

a) Pycharm

JetBrains, một công ty phat triển công cụ phần mềm tại Séc, đã tạo ra PyCharm Nó có một

phiên bản cộng đồng miễn phí phù hợp với các ứng dụng Python nhỏ và một phiên bản

chuyên nghiệp trả phí dành cho việc xây dựng các ứng dụng Python quy mô lớn, với đầy đủ

những tính năng sau:

e Tự động hoàn thành và kiểm tra mã

e Xử lý lỗi và sửa lỗi nhanh chóng

e Làm sạch mã mà không thay đôi chức năng

e Hỗ trợ các khung ứng dụng web như Django va Flask

e Hỗ trợ các ngôn ngữ lập trình khác, chăng hạn như JavaScript, CoffeeScript,

TypeScript, AngularJS va Node

e Trinh gỡ lỗi để tìm lỗi trong mã, trình kiểm tra để xác định các vấn đề về hiệu suất

trong mã và trình chạy thử nghiệm dé chạy các bài kiêm thử đơn vi

e Hỗ trợ cơ sở dữ liệu

b) IDLE

Môi trường phat triển và học hỏi tích hợp (IDLE) là Python IDE được cài đặt theo mặc định.

Nó chỉ được phát triên với Python băng bộ công cụ Tkinter GUI và cung câp các tính năng

sau:

e Hoạt động trên nhiều hệ điều hành như Windows, Unix va macOS

e Cung cấp một cửa số shell để chạy các lệnh và hién thị kết quả

e Có trình gỡ lỗi riêng

1.4.2 Reactjs

1.4.2.1 Giới thiệu chung về React

Trang 23

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, ra mắt

vào năm 2013 với mục dich dé xây dựng giao diện người dùng Nó được sử dụng rộng rãi dé

xây dựng các trang web SPA (Single Page Application) và các ứng dụng trên nên tang di

động Nó rất dé sử dụng và cho phép người dùng có thé tao các component UI có thé tái sử

dụng

Hình 1.12 ReactJS1.4.2.2 Đặc điểm, tinh năng

ReactJS là một thư viện có các tính năng hết sức nồi bật bao gồm:

- JSX: viết tắt của JavaScript XML, JSX là một dạng ngôn ngữ cho phép viết các mã

HTML trong React, giúp cho việc thay đôi cay DOM dê dàng hơn băng HTML-style

code đơn giản Nó là một trong những tính năng tôt và dê sử dụng.

const element = <hi>Wel

Hình 1.13 JSX

- Components: Một trang web được xây dựng bang ReactJS là một sự kết hợp nhiều

component, các component cũng như các hàm JavaScript bình thường, giúp tạo ra các

code dé dang bang cách tách các logic ra thành các đoạn code độc lập có thé tái sử

dụng Component có hai dạng dựa trên cách viết, một là dang function component va

hai là class component

- Class component được khai báo với từ khóa class:

import { Component, createRef } from 'rneact';

Hinh 1.14 Class Component

- Virtual DOM: ReactJS tạo một thứ gọi là Virtual DOM (DOM ảo) Đúng như tên gọi,

nó là một copy của DOM thật trên trang web đó ReactJS dùng những DOM ảo đó dé

tìm đúng những DOM thật cần được cập nhật khi có bat ky su kién nao lam cac thanh

phan bên trong nó thay đổi.

Trang 24

VIRTUAL DOM REAL DOM

virtial dom tree real dom tree

Hinh 1.15 Virtual DOM

- Javascript Expressions: Biểu thức JS có thé sử dung trong file jsx hoặc js bằng cach

sử dụng cặp dâu ngoặc nhọn “{}”.

export default function TodoList() {

const name = ‘Gregorio Y Zara‘;

return (

Hình 1.16 Expressions

- Props/ State: State là một object javascript tương tự như props, nó chứa dữ liệu được

sử dụng dé react render Dữ liệu cua state là một private object và được sử dụng bên

trong các component

Props (properties) là data được truyền vào từ component cha và có thể truy cập

ở các component con Nó hoạt động như một object global hoặc như các biên có thê

sử dụng bên trong component.

1.4.2.3 Ưu điểm của React

- ViReactJS sử dụng DOM ảo dé cache cấu trúc dữ liệu trong bộ nhớ và chỉ những thay

đôi cuôi cùng mới được cập nhật vào trong DOM trình duyệt Điêu này làm cho ứng

dụng trở nên nhanh hơn

- Trong những năm gan đây, ReactJS dang trở nên phố biến hơn và được duy trì bởi

Facebook và Instagram Ngoài ra nó cũng được sử dụng bởi các công ty nỗi tiếng như

Apple, Netflix, Theo npm trends, giữa 3 thư viện, framework sử dụng nhiéu nhat

cho việc xây dựng giao điện website: React, Angular va Vue React van luôn giữ top

dau trong việc tải xuống

Trang 25

e @angular/core @ react @® vue

15.530.649 3.394.915

000.000 °

Hình 1.17 Top trending library, framework

- Dé dang cho việc test và debug, vì hầu hết các code đều được thực hiện bằng

JavaScript chứ không phải băng HTML.

1.4.2.4 Hạn chế của React

- Han ché vé SEO: ReactJS str dung cac trang don le, điều này có thé gây khó khăn cho

việc tối ưu hóa SEO, đặc biệt là nếu không có quan lý chuyên đổi trang (routing) thíchhợp

- _ Tốc độ tải trang: Khi sử dụng ReactJS, nhiều mã JavaScript phải được tải xuống trước

khi trang web có thể được tải, điều này có thê làm giảm tốc độ tải trang

- Phat triển ứng dụng phức tap: Khi xây dựng ứng dụng phức tạp, việc quản lý trạng

thái (state management) có thê trở nên khó khăn và phức tạp hơn so với các

framework khác

1.4.3 React-query

1.4.3.1 Tong quan về react-query

React Query là một thư viện quản lý trạng thái và tạo các yêu cầu HTTP trong ứng

dụng React Nó giúp dễ dàng và hiệu quả trong việc lấy và đồng bộ dữ liệu từ API hoặc

nguôn dit liệu khác một cách đơn giản React Query giúp cải thiện hiệu suất ứng dụng và

giảm thiêu việc lặp lại yêu cầu di liệu không cần thiết

fp React Query

Hinh 1.18 React query

1.4.3.2 Ly do str dung React Query

Trước day, dé fetch dữ liệu từ server thi có nhiều cách Một số cách phổ biến là sử

dụng useEffect va useState hay sử dụng thư viện quản ly state (Redux) Tuy nhiên,

react-Trương Thị Xuân Tươi - DI9PTDPT 13

Trang 26

query cung cap nhiều hooks với API cực ki đơn giản dé fetch cũng như update dữ liệu từ

server.

e useQuery: useQuery được sử dung dé refetching, caching và chia sé dit liệu giữa các

component với nhau Dé sử dung hook useQuery, ta phải truyền it nhat 2 tham sô:

o Tham số đầu tiên là queryKey

Resolve data, hoặcThrow error

o Tham số thứ 3 là các options.

e useMutation: useMutation khác với useQuery, được sử dụng dé tao/thay đồi/xóa dữ

liệu ở (ví dụ như đăng ký, đăng nhập) Đề sử dụng hook useMutation, ta phải truyền ít

1.4.3.3 Cách hoạt động của React Query

Cách mà React Query hoạt động trong việc quản lý dữ liệu và caching dựa trên một số

nguyên tắc chính giúp tối ưu hiệu suất và cung cấp trải nghiệm thời gian thực cho người dùng

Bao gôm:

- Autorefetching (Tự động cập nhật): React Query có khả năng tự động cập nhật dữ

liệu từ nguôn gôc thông qua việc polling (lấy dữ liệu định kỳ) hoặc invalidation (cập nhật dữ

liệu khi có thay đôi) Khi bạn định nghĩa một query (truy van) dé lấy đữ liệu từ API, React

Query sẽ tự động theo dõi thời gian và cập nhật lại dữ liệu theo khoảng thời gian bạn định

nghĩa Điều này giúp duy trì thông tin cập nhật và thê hiện đữ liệu mới nhất trên giao diện

- Cache Invalidations (Cập nhật cache): React Query cung cấp cơ chế cập nhật dữ liệudựa trên cache invalidations Khi có thay đổi từ nguồn dữ liệu gốc (chăng hạn như thông tin

mới từ API), React Query sẽ tự động cập nhật lại dữ liệu trong cache của nó Điều này đảm

bảo rằng dữ liệu trên giao diện luôn được đồng bộ với nguồn dữ liệu thực tế.

- Query Keys (Khóa truy van): Mỗi query (truy van) được định nghĩa trong React

Query sẽ có một khóa duy nhất dé xác định nó Khóa này được sử dung để quản lý cache và

xác định cách cập nhật dit liệu Khi có thay đổi trong dữ liệu tương ứng với khóa truy vấn,

React Query sẽ tự động cập nhật dữ liệu trong cache và thông báo cho giao diện dé hiển thị dữ

liệu mới

1.4.3.4 Ưu điểm

- Quan lý trang thái dễ dàng: React Query cung cấp một cơ chế dé sử dụng dé quản ly

trạng thái của các yêu câu dữ liệu Việc này giúp giảm thiểu sự phức tạp trong việc lưu

trữ và theo dõi các trạng thái yêu cầu trong ứng dụng

- Cache thông minh: React Query tự động quản lý cache dữ liệu trả về từ các yêu cầu

trước đó

- _ Đồng bộ dữ liệu linh hoạt: React Query hỗ trợ việc lay dữ liệu từ nhiều nguồn cùng

một lúc và đông bộ hóa chúng Điêu này cho phép ứng dụng lây dữ liệu từ các API

Trang 27

khác nhau và kết hop chúng trong một trạng thái duy nhất, giúp tránh sự không nhất

quán trong dữ liệu.

1.4.3.5 Nhược điểm

- Quan lý cache phức tạp: Mặc dù React Query tự động quản ly cache dữ liệu, đôi khi

việc quản lý cache có thê trở nên phức tạp và khó kiêm soát trong các trường hợp đặc

biệt hoặc khi làm việc với dữ liệu lớn

- Hiệu suất ảnh hưởng: Trong một số trường hợp, việc sử dung cache có thé ảnh hưởng

đên hiệu suât của ứng dụng, đặc biệt khi ban làm việc với đữ liệu phức tạp hoặc lớn

- Trang thái quá nhiều: Trong một số trường hợp, việc sử dung React Query có thé dan

đên việc quan lý quá nhiêu trạng thái và yêu cau, đặc biệt khi ứng dụng có nhiêu thành

phân hoặc trang

1.4.4 Zustand

1.4.4.1 Tổng quan về Zustand

“A small, fast, and scalable bearbones state management solution Zustand has a

comfy API based on hooks It isn't boilerplate or opinionated, but has enough convention to

be explicit and flux-like.”

Thư viện Zustand là một thư viện quản ly trang thái mới va rất được nhiều người quan

tâm hiện nay Nó được xây dung bởi các lập trình viên đã tao ra Jotai và React-springs.

Zustand được biệt đên bởi tinh đơn giản va sử dung hooks mà không cân theo một kiêu mau

nhất định.

Hình 1.19 Zustand

Zustand là giúp quan ly các global state(state management) cho ứng dụng JavaScript,

được thiết kế đặc biệt cho việc phát triển ứng dung React Nó cung cấp một API đơn giản và

trực quan đề quản lý trạng thái trong ứng dụng của bạn

zustand

- Tao một store đầu tiên: store tương ứng với Hook, có thể chứa các kiểu đữ liệu: kiểu

dt liệu nguyên thủy, object, function

Trang 28

ì <h1>{bears} around here </h1>

Hinh 1.22 Gan store vao trong component1.4.4.2 Lý do sử dung Zustand

Van đề chính mà chúng ta gặp phải khi sử dung Redux và các thư viện quản lý trang

thái khác là xử lý nó như một bộ nhớ cache cho trạng thái backend Vì vậy, Zustand có thê nói

là thư viện quan lý trạng thai React phô biên nhật hiện nay

Zustand tích hợp dễ dàng với React thông qua hooks, giúp giảm bớt cú pháp so với

Redux Hồ trợ quản lý trạng thái global trong ứng dụng một cách đơn giản và hiệu quả Ngoài

ra, còn tích hợp săn các tính năng như lazy loading, middleware, và Immer

1.4.4.3 Các khái niệm cơ bản

Store (Kho): Kho (store) là nơi lưu trữ toàn bộ trạng thái của ứng dụng Kho có thê

được coi là một đối tượng JavaScript chứa các phần trạng thái và hành động liên quan

State (Trạng thái): Trạng thái là dữ liệu mà bạn muốn theo dõi và cập nhật trong ứng

dụng của mình Môi phân trạng thái có thê đại diện cho một khía cạnh cụ thê của ứng dụng,

như thông tin người dùng, danh sách sản phâm, trạng thái giao diện, v.v

Actions (Hành động): Hành động là các hàm chứa logic để cập nhật trạng thái trong

kho Môi hành động thường tương ứng với một hoạt động cụ thê trong ứng dụng, chăng hạn

như thêm sản phâm vào giỏ hàng, đăng nhập, đăng ký, v.v

Immer: Thư viện hỗ trợ tạo ra trạng thái mới một cách dễ dàng và bảo đảm tính không

thay đôi trực tiệp

1.4.5 NestJs

1.4.5.1 Tong quan về Nestjs

“Nest (NestJS) is a framework for building efficient, scalable Node.js server-sideapplications It uses progressive JavaScript, is built with and fully supports TypeScript ”

Trang 29

Hình 1.23 Tổng quan về Nestjs

Có thể hiểu rang, NestJS là một framework mã nguồn mở dé phát triển ứng dụng

server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xây

dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript đề tạo ra một môi trường

phát triển hiện đại và mạnh mẽ cho việc xây đựng các ứng dụng web và API.

Mục tiêu chính của NestJS là cung cấp một cầu trúc ứng dụng rõ ràng và dễ quản lý,

giúp tăng tinh bao trì và sự tô chức trong mã nguồn Đề dat được điều này, NestJS triển khai

mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắc của Angular, đặc biệt là sử

dung Dependency Injection (DI) va Modules (Cac module)

1.4.5.2 Cau trúc của NestJS

Cấu trúc NestJS thường được chia thành các phần chính sau:

a) Module

Modules là thành phan tô chức code trong NestJS Chúng giúp bạn xác định phạm vi

của các controllers, providers và các thành phần khác trong ứng dụng Băng cách sử dụng

decorator `\@Modules`, bạn có thé định nghĩa các dependencies giữa các modules và tổ chức

code một cách rõ rang

b) Controller

Trang 30

Controller là thành phan chịu trách nhiệm xử ly các yêu cầu HTTP trong NestJS Bang

việc sử dụng decorator `\@)Controller` và các decorator khác như '@Get`, `\@Post`, `\@Put,

`@Delete`, bạn có thê xác định các route và điêu hướng yêu câu đên các phương thức xử ly

tương tự.

Hình 1.25 Controller trong Nestjsc) Providers

Providers là thành phan chịu trách nhiệm cung cấp dữ liệu, logic cho các controllers

và các thành phân khác trong ứng dụng NestJS Việc sử dung decorator `\)InJectable`, bạn có

thê đánh dâu một class như một provider và sử dụng nó trong các controllers và thành phân

khác

da) Middleware

Middleware là thành phan xử ly các yêu cầu trung gian trong NestJS Sử dung

decorator ‘@Middleware’, bạn định nghĩa được các middleware va áp dụng cho các route

hoặc toàn bộ ứng dụng.

Trang 31

Client Side : ba Middleware h Route Handler

@RequestMapping

Hình 1.27 Cơ chế của Middleware

Triển khai phần mềm trung gian Nest tùy chỉnh trong một hàm hoặc trong một lớp có

@lnjectable() Lớp này phải triển khai giao diện NestMiddleware, trong khi hàm này không

có bất kỳ yêu cầu đặc biệt nào Hãy bắt đầu bằng cách triển khai một tính năng phần mềm

trung gian đơn giản bằng phương thức lớp

e) Pipes và Guards

Pipes là thành phan xử ly và kiểm tra dữ liệu dau vào trong NestJS Sử dung decorator

`@PIpes` bạn sẽ định nghĩa các pipes và áp dung cho các router hoặc các phương thức xử lý.

Guards là thành phần kiểm tra quyền truy cập trong NestJS Khi sử dụng ‘@Guards’, bạn định

nghĩa được các guards và áp dung chúng cho router và các phương thức xử lý

Route Handler Client Side

@RequestMapping

Hinh 1.29 Guard

1.4.5.3 Tính năng

NestJS là một framework phát triển backend mã nguồn mở đáng chú ý, được xây dựng

dựa trên Node.js và sử dụng ngôn ngữ TypeScript hoặc JavaScript

NestJS triển khai mô hình kiến trúc lõi, trong đó mỗi ứng dụng bao gồm ít nhất một

module gốc và có thê có nhiều module con Mỗi module đại diện cho một phan chức năng cụ

thé của ứng dụng, giúp mã nguồn trở nên rõ ràng, tổ chức tốt hơn và dé quan lý.

Trang 32

NestJS hỗ trợ Middleware va Interceptors, giúp ban thực hiện các thao tác chung trước

và sau khi xử lý yêu cau HTTP Điêu này giúp bạn xử lý các yêu cau HTTP trước khi chúng

đên các route xử ly chính và thay đôi response trước khi nó được gửi vê client

1.4.5.4 Ưu điểm của Nesfjs

e NestJS làm cho các ứng dụng của bạn có thể mở rộng, nhanh chóng, hiệu quả và dễ

bảo trì

e Sử dụng TypeScript, cho phép ngôn ngữ lập trình này phan ứng nhanh với những thay

đôi trong JavaScript

e NestJS cung cấp cho các nhà phát triển các ứng dụng độc lap dé xây dựng các ứng

dụng dễ kiểm tra, cập nhật và bảo trì.

e NestJS cho phép bạn xây dựng các ứng dụng Rest API, MVC, Microservices,

Websockets, GraphQL hoặc CRON Job.

1.4.6 Postgresql

1.4.6.1 Tìm hiểu chung về Postgresql

PostgreSQL là một hệ thống quản trị cơ sở dir liệu quan hệ và đối tượng

(object-relational database management system) miễn phí và nguồn mở (RDBMS) tiên tiến nhất hiện

nay khả năng mở rộng cao và tuân thủ các tiêu chuẩn kỹ thuật

`"

Hình 1.30 PostgreSQL

Thời ky dau, PostgreSQL hoạt động của giống như nền tang điều hành Unix Về sau,

PostgreSQL dân thay đôi đê trở nên linh hoạt và có thê khởi chạy trên một sô nên tảng như

Windows, Solaris, Mac OS Đông thời, tích hợp thêm nhiêu tính năng vượt trội khác

Về mặt kỹ thuật, PostgreSQL chính là một mã nguồn mở hoàn toàn miễn phí, xây

dựng theo quy chuẩn SQL99 Nhờ đó, tất cả người dùng đều có quyền sử dụng, tham gia

chỉnh sửa Khác với phần lớn cơ sở dit liệu khác, PostgreSQL hoạt động rất ôn định không

yêu cầu bảo trì cầu kỳ.

1.4.6.2 Tính năng của Postgresql

PostgreSQL mang đến người dùng vô số chức năng hữu ích Cùng với đó là khả năng

vận hành ồn định, tốc độ tối ưu

câu trúc, hình học

e Bảo đảm toàn ven dữ liệu: Dữ liệu trong PostgreSQL luôn được đảm bảo tính toàn vẹn.

e Tính năng thiết lập linh hoạt: PostgreSQL cho phép người dùng thiết lập danh mục từ cơ

bản đến nâng cao, tối ưu ưu hóa tốc độ truy cập, hỗ trợ thống kê trên nhiêu cột, Cùng với

đó là vô số thiết lập khác

Trang 33

1.4.6.3 Sự khác biệt giữa MySql va Postgresql

PostgreSQL và mySQL đều là hai hệ quan trị cơ sở dữ liệu được ứng dụng phô biếnhiện nay Theo thống kê của StackOverflow năm 2023 cho thấy Postgres đã chiếm vị trí đầu

tiên từ MySQL và trở thành co sở dữ liệu được sử dụng nhiều nhất

PostgreSQL

MySQL SQLite

MongoDB

Microsoft SQL Server

Redis

MariaDB

Hình 1.31 Top hệ quan trị CSDL được sử dung nhiễu nhất - 2022

Sau đây là một vài điểm khác biệt giữa Postgresql và MySQL

Điểm khác biệt | Postgresql MySQL

Nonblocking Tuy chỉnh theo câu lệnh thực hiện DDL Cho phép tử thé thao tac DDL thông qua Non trong DD Với thao tác viết, hệ thống có thể tự động bổ sung Bocking.

-block Tích hợp thêm chức năng Non - Blocking kê từ

Trên PostgreSQL, nhóm thao tác DDL là dạng | Phiên ban mySQL.

Alter table Déi với Alter table sẽ tích hợp thêm tiện ich

thay đôi hàng và cột trong bảng.

Tốc độ xóa dữ liệu khá nhanh.

Trinh update giống như insert :

Khả nang update tot, có khả năng ghi đẻ.

Khả năng xử lý | Tích hợp tinh nang Read — committed Mặc định xử lý theo phương thức

repeatable-transaction Nếu không thé chuyên đổi thành Repeatable — read read cho phép giữ nguyên dữ liệu đọc.

đồng nghĩa không xuất hiện Next Key Locking Ứng dụng Next Key Locking nhằm hoàn thiện

tính năng thêm dữ liệu bởi transaction.

1.4.7 Framer Motion

Framer Motion là một thư viện React chuyên về animation (hiệu ú ứng chuyền động) và

motion (chuyên động) được xây dựng dé tối ưu hóa trải nghiệm phát triển giao diện người

dùng

Trang 34

PAGE TRANSITIONS

Hinh 1.32 Framer motion

Framer Motion được Matt Perry phát triển dành riêng cho các ứng dụng, trang web

được xây dựng bằng ReactJS, là một high level library được dung lên từ cái nền móng kiên cố

là Popmotion

Animation API đơn giản:

- Hau hét các hiệu ứng chuyên động sẽ được thực hiện với component <motion /> va

thuộc tinh animate

- Mac định, Motion sẽ tạo ra một hiệu ứng chuyền động phù hợp cho sự chuyển đổi

nhanh chong dựa trên các loại giá tri đang được thực hiện animation

- Cac giá tri trong animate cũng có thé được đặt dưới dạng một chuỗi các keyframes

Điều này sẽ tạo hiệu ứng chuyên động qua từng giá trị theo trình tự

Vi dụ:

<motion.div

animate={{ x: [0, 100, 0] }}

Ho

- Framer Motion có các phím tắt dé thực hiện animation đến một tập hợp các giá trị

khi các cử chi bat dau, chăng hạn như hover, tap, drag, focus và inView

Ngoài ra, Framer Motion cũng có các animation hỗ trợ render 3D Framer Motion 3D

là một thu viện animation đơn giản nhưng mạnh mẽ cho React Three Fiber Nó cung cap hau

hệt các chức năng giông như Framer Motion cho các cảnh 3D

Trang 35

Đồ án tốt nghiệp CHƯƠNG 2: PHAN TÍCH VÀ THIET KE HE THONG

CHUONG 2: PHAN TICH VA THIET KE HE THONG

2.1 Phan tich hé thong

2.1.1 Xác định yêu cầu

- Muc đích: Trang web này chuyên cung cấp sản phẩm skincare từ các thương hiệu nổi

tiếng, nhằm giúp phái nữ có làn da khỏe đẹp.

- Phạm vi của dự án: Xây dựng một nền tảng mua sắm trực tuyến với sự đa dạng về sản

phẩm và dịch vụ, nhằm đáp ứng mong muốn của khách hàng trong việc sở hữu làn da

khỏe đẹp

- Doi tượng sử dụng: Có thé bao gom phụ nữ moi độ tudi, từ người mới bắt đầu quan tâm

đên làm đẹp cho đên những người đã có kinh nghiệm trong việc chăm sóc da

hàng

Hình 2.1 Usecase tổng quan của hệ thống

2.1.2.2 Xây dựng kịch bản

a) Usecase và kịch bản chuân của module “Đăng nhập ”

Trang 36

Đồ án tốt nghiệp CHƯƠNG 2: PHAN TÍCH VÀ THIET KE HỆ THONG

“ Scenario của usecase “Đăng nhập”

Tên usecase Đăng nhập

Mô tả Là người dùng, tôi muốn đăng nhập vào website để sử dụng dịch vụ từ trang

web

Tác nhân chính Khách hàng, Nhà bán hàng

Tiên điều kiện 1 Tài khoản người dùng đã được tạo sẵn

2 Tài khoản người dùng đã được phân quyền

3 Thiết bị của người dùng đã được kết nối internet khi thực hiện đăng nhập.

Kích hoạt Người dùng chọn chức năng “Đăng nhập”

Người dùng đăng nhập ứng dụng thành công

Hệ thống ghi nhận hoạt động đăng nhập thành công vào trang web.

Chuỗi sự kiện

chính

Người dùng truy cập vào trang web Glow&Grace

Hệ thống hiền thị giao diện Trang chủ

Người dùng chọn đăng nhập bằng tài khoản cá nhân

Hệ thong hién thi giao dién dang nhap gom các 6 điền Email, password,

Ghi nhớ đăng nhập và nút Đăng nhập

Hệ thống xác thực thông tin đăng nhập thành công và chuyền đến trang

chủ của ứng dụng.

Trang 37

5.1.a Hệ thống thông báo trường Email không được để trống

5.1.b Người dùng nhập day đủ thông tin và tiến hành các bước tiếp theo 5.2 Người dùng nhập sai username/password và nhân nút Đăng nhập

5.2.a Hệ thống thông báo Tên đăng nhập/Mật khâu không đúng và yêu cầunhập lại

b) Usecase và kịch bản chuẩn của module “Đăng ký”

Usecase Đăng ký

Chọn vai trò đãng ký

<<include>>->

“+ Scenario của usecase “Đăng ký”

Tên usecase Đăng ký

Mô tả Là người dùng, tôi muốn tạo tài khoản dé có thé truy cập vào trang

web.

Tác nhân chính Khách hàng, Nhà bán hàng

Tiền điều kiện Người dùng truy cập vào website

Kích hoạt Người dùng chọn chức năng “Đăng ký”

Đảm bảo tối thiểu Người dùng phải có email và số điện thoại

Đảm bảo thành công Người dùng đăng ký thành công

Hệ thống ghi nhận hoạt động đăng ký thành công vào trang web.

Chuỗi sự kiện chính 1 Nguoi dùng truy cập vào trang web Glow&Grace.

Trang 38

Đồ án tốt nghiệp CHƯƠNG 2: PHAN TÍCH VÀ THIET KE HỆ THONG

2 _ Hệ thống hiển thị giao diện Trang chủ

3 Người dùng chọn đăng nhập bang tài khoản cá nhân

4 Hệ thống hiển thị giao diện đăng nhập gồm các ô điền Email,

password, Ghi nhớ đăng nhập và nút Đăng nhập.

5 Nguoi dùng chọn chức năng Tạo tài khoản

6 Hệ thống hiển thị giao diện Chọn vai trò sử dụng với 2 lựa chọn:

Nhà bán hàng hoặc khách hàng

7 Người dùng chọn “Khách hàng”

Hệ thống hiển thị giao diện với các 6: tên đăng nhập, email, mật

khâu và sô điện thoại

9 Người dùng điền các thông tin và nhắn nút Đăng ký

10 Hệ thống xác nhận đăng ký thành công và chuyên tới giao diện

trang chủ

Ngoại lệ 9.1.Người dùng nhập thiếu thông tin và nhắn nút Đăng ký:

9.1.a Hệ thống thông báo Các trường không được dé trồng.

9.1.b Người dùng nhập đầy đủ thông tin và tiến hành các bước tiếp

theo

9.2 Người dùng nhắn nút Back 9.2.1.Giao diện chọn kiểu người dùng hiện ra 9.2.2.Người dùng thay đổi vai trò từ Khách hàng thành Nhà bán hang

9.2.3.Giao diện nhập thông tin hiện ra và người dùng thực hiện cácthao tác tiép theo

10.1 Hệ thống thông báo email đã được sử dụng vui lòng sử dụngemail khác

c) Usecase và kịch bản chuân cua module “Xem chỉ tiết một sản phâm ”

Trang 39

Hình 2.4 Usecase Xem chỉ tiết một sản phẩm

“* Scenario của usecase “Xem chi tiệt một sản phâm”

Là người dùng, tôi muốn xem các thông tin liên quan đến sản phẩm

Khách hàng, Nhà bán hàng

Người dùng truy cập vào website

Kích hoa Người dùng chọn chức năng “Đăng ký”at

Đảm bảo tối |Người dùng phải có email va số điện thoại

thiểu

Đảm bảo thành | Người dùng đăng ký thành công

công Hệ thống ghi nhận hoạt động đăng ký thành công vào trang web.

Chuỗi sự kiện |1 Người dùng truy cập vào trang web Glow&Grace.

chính Hệ thống hiển thị giao diện Trang chủ

Người dùng chọn đăng nhập băng tài khoản cá nhân

Hệ thống hiển thị giao diện đăng nhập gồm các ô điền Email, password,Ghi nhớ đăng nhập và nút Đăng nhập

Người dùng chọn chức năng Tạo tài khoản

Hệ thống hiển thị giao điện Chọn vai trò sử dụng với 2 lựa chọn: Nhà

bán hàng hoặc khách hàngNgười dùng chọn “Khách hàng”

Hệ thống hiển thị giao diện với các 6: tên đăng nhập, email, mật khâu và

sô điện thoại

Người dùng điền các thông tin và nhắn nút Đăng ký

Hệ thống xác nhận đăng ký thành công và chuyên tới giao diện trang

chủ

Ngoại lệ 9.1.Người dùng nhập thiếu thông tin và nhân nút Đăng ký:

9.1.a Hệ thống thông báo Các trường không được dé trồng.

9.2 Người dùng nhấn nút Back 9.2.1.Giao diện chọn kiểu người dùng hiện ra

9.2.2.Người dùng thay đổi vai trò từ Khách hàng thành Nhà bán hàng

9.2.3.Giao diện nhập thông tin hiện ra và người dùng thực hiện các thao tác

Trang 40

10.1 Hệ thống thông báo email đã được sử dụng vui long sử dung email

khác

d) Usecase và kịch bản chuẩn của module “Đánh giá/Phản hoi đánh giá sản phẩm ”

Usecase Đánh gia/phan hồi đánh giá sản phẩm

¬¬ et Đã nhận hàng

Đánh giá sản phẩm }„

s=include>>

“+ Scenario của usecase “Đánh gia/Phan hôi đánh giá sản phâm”

Đánh giá/Phản hồi đánh giá sản phẩm

Là người dùng, tôi muốn viết nhận xét cho sản phẩm mà tôi đã mua

Đảm bi | Người dùng phải mua hàng và trạng thái của đơn hang là “Đã giao hàng

thiểu thành công”

Hệ thống ghi nhận đánh giá của người dùng về sản phẩm vào trong hệ thống.

Chuỗi sự kiện 1 Tại giao diện trang chủ, người dùng chon chức năng Lịch sử đặt hàng.

chính 2 Hệ thống hiển thị danh sách các đơn mua của người dùng theo thời gian

gần nhất.

Tiêu đề	Nghiên Cứu Và Xây Dựng Website Thương Mại Điện Tử Về Sản Phẩm Chăm Sóc Da Tích Hợp Hệ Khuyến Nghị Khách Hàng Trên Nền Tảng NextJs
Tác giả	Trương Thị Xuân Tươi
Người hướng dẫn	TS. Vũ Hữu Tiến
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Công nghệ Đa phương tiện
Thể loại	Đồ án tốt nghiệp đại học
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	97
Dung lượng	27,17 MB