Báo cáo Đồ án 1: Website TMĐT tích hợp hệ thống khuyến nghị sản phẩm

Báo cáo đồ án Xây dựng website thương mại điện tử tích hợp hệ thống khuyến nghị sản phẩm. Tài liệu trình bày chi tiết phân tích, thiết kế và xây dựng.

• Tác giả: Nguyễn Công Tú
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Đại Học Quốc Gia Tp. Hồ Chí Minh - Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Website Thương Mại Điện Tử Tích Hợp Hệ Thống Khuyến Nghị Sản Phẩm
• Loại tài liệu: Đồ án 1
• Năm xuất bản: 2025
• Địa điểm: Tp. Hồ Chí Minh

Tóm tắt

I. Giới thiệu về đồ án Website Thương mại điện tử tích hợp Hệ thống khuyến nghị sản phẩm

Đồ án website thương mại điện tử là một dự án học thuật được thực hiện tại Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP. Hồ Chí Minh. Dự án này kết hợp hai thành phần chính: xây dựng nền tảng thương mại điện tử hiện đại và tích hợp hệ thống khuyến nghị sản phẩm thông minh. Mục tiêu của đồ án là tạo ra một website TMĐT hoàn chỉnh với trải nghiệm người dùng tối ưu, cho phép khách hàng dễ dàng tìm kiếm, so sánh và mua sắm sản phẩm. Hệ thống khuyến nghị sử dụng các thuật toán thông minh để gợi ý sản phẩm phù hợp dựa trên lịch sử mua hàng, sở thích và hành vi duyệt web của người dùng. Dự án được hướng dẫn bởi ThS Trần Thị Hồng Yến và thực hiện bởi hai sinh viên Nguyễn Công Tú và Bế Ích Tuân.

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

Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, nhu cầu về hệ thống khuyến nghị sản phẩm trở nên cấp thiết. Các nền tảng TMĐT lớn như Shopee, Lazada đều sử dụng công nghệ này để tăng cương bộ người dùng. Đề tài này được chọn để giúp sinh viên thực hành các kỹ năng lập trình web toàn stack, từ frontend đến backend, kết hợp với các thuật toán machine learning cơ bản để xây dựng hệ thống gợi ý thông minh.

1.2. Khảo sát hiện trạng

Hiện nay, các website thương mại điện tử phổ biến thường thiếu tính cá nhân hóa trong việc gợi ý sản phẩm. Phần lớn chỉ dựa vào sắp xếp theo giá hoặc lượt bán. Dự án này nhằm khắc phục vấn đề đó bằng cách xây dựng hệ thống khuyến nghị dựa trên dữ liệu người dùng, giúp tối ưu hóa trải nghiệm mua sắm và tăng tỷ lệ chuyển đổi.

II. Công nghệ và công cụ sử dụng trong xây dựng Website TMĐT

Dự án website thương mại điện tử sử dụng stack công nghệ hiện đại MERN (MongoDB, Express, React, Node.js) để xây dựng ứng dụng web toàn stack. Frontend được phát triển bằng ReactJS - một thư viện JavaScript mạnh mẽ cho việc xây dựng giao diện người dùng động. Styling được thực hiện với Tailwind CSS, một framework CSS tiện ích-first giúp phát triển giao diện nhanh chóng. Backend sử dụng Node.js kết hợp với Express Framework để xây dựng API RESTful hiệu suất cao. Database được quản lý bằng MongoDB, một cơ sở dữ liệu NoSQL linh hoạt, phù hợp cho dữ liệu không cấu trúc của thương mại điện tử. Các công cụ hỗ trợ bao gồm Visual Studio Code, Postman, và Git để quản lý phiên bản code.

2.1. Frontend ReactJS và Tailwind CSS

ReactJS là thư viện JavaScript phổ biến nhất hiện nay, cho phép xây dựng giao diện component-based, tái sử dụng được. Tailwind CSS cung cấp các class CSS được định sẵn, giúp tạo giao diện responsive và đẹp mắt mà không cần viết CSS tùy chỉnh nhiều. Kết hợp hai công nghệ này, đồ án tạo ra website thương mại điện tử với giao diện hiện đại, tương tác mượt mà và tối ưu hóa cho mobile.

2.2. Backend Node.js Express và MongoDB

Node.js cho phép sử dụng JavaScript ở phía server, tạo môi trường phát triển thống nhất. Express Framework đơn giản hóa việc xây dựng API, xử lý routing và middleware. MongoDB lưu trữ dữ liệu sản phẩm, người dùng, đơn hàng một cách linh hoạt. Bộ ba công nghệ này tạo ra backend mạnh mẽ, có khả năng xử lý lượng lớn request từ website thương mại điện tử.

III. Kiến trúc hệ thống và thiết kế Cơ sở dữ liệu

Kiến trúc website thương mại điện tử được thiết kế theo mô hình client-server, với tầng hiển thị (frontend), tầng xử lý logic (backend) và tầng lưu trữ dữ liệu (database) riêng biệt. Hệ thống khuyến nghị sản phẩm được tích hợp tại backend, phân tích hành vi người dùng từ MongoDB và trả về danh sách sản phẩm gợi ý qua API. Cơ sở dữ liệu được thiết kế với các collection chính bao gồm: Users (người dùng), Products (sản phẩm), Orders (đơn hàng), Reviews (đánh giá), Categories (danh mục), Carts (giỏ hàng) và Recommendations (gợi ý). Quan hệ giữa các collection được xây dựng để hỗ trợ các chức năng cốt lõi của thương mại điện tử như tìm kiếm, lọc, gợi ý sản phẩm và quản lý đơn hàng.

3.1. Sơ đồ Use Case và chức năng chính

Website TMĐT hỗ trợ hai loại người dùng chính: người mua và người bán. Người mua có thể đăng nhập, duyệt sản phẩm, xem hệ thống khuyến nghị, quản lý giỏ hàng, đặt hàng, đánh giá sản phẩm và chat với cửa hàng. Người bán có thể quản lý sản phẩm, đơn hàng, khuyến mãi, khách hàng, và xem báo cáo doanh thu. Các use case được biểu diễn chi tiết qua sơ đồ, giúp hiểu rõ quy trình và luồng tương tác trong hệ thống.

3.2. Thiết kế các bảng dữ liệu MongoDB

Mỗi collection trong MongoDB được thiết kế để lưu trữ thông tin cụ thể. Collection Products chứa thông tin chi tiết sản phẩm, giá, hình ảnh, danh mục. Collection Users lưu thông tin người dùng, địa chỉ, lịch sử mua hàng. Collection Orders ghi lại tất cả đơn hàng, trạng thái giao hàng. Hệ thống khuyến nghị sử dụng dữ liệu từ các collection này để phân tích và gợi ý sản phẩm phù hợp cho mỗi người dùng.

IV. Hệ thống Khuyến nghị sản phẩm và kết quả đạt được

Hệ thống khuyến nghị sản phẩm là trái tim của dự án này, sử dụng thuật toán collaborative filtering và content-based filtering để gợi ý sản phẩm phù hợp. Thuật toán phân tích lịch sử mua hàng, đánh giá, thời gian duyệt web của người dùng để xác định các sản phẩm có khả năng được yêu thích cao. Website thương mại điện tử tích hợp các kết quả khuyến nghị vào trang chủ, trang chi tiết sản phẩm và trong email marketing. Dự án đã thành công xây dựng nên một nền tảng TMĐT hoàn chỉnh với giao diện thân thiện, chức năng quản lý đầy đủ cho người bán, trải nghiệp mua sắm tuyệt vời cho người mua. Hệ thống khuyến nghị đã tăng tỷ lệ click-through rate (CTR) lên 35% và tỷ lệ chuyển đổi (conversion rate) tăng 20% so với các sản phẩm không được gợi ý. Dự án đạt được mục tiêu giáo dục, giúp sinh viên thực hành kỹ năng full-stack development và hiểu biết về machine learning.

4.1. Thuật toán khuyến nghị sản phẩm

Hệ thống khuyến nghị sử dụng kết hợp hai phương pháp: Collaborative Filtering so sánh sở thích của người dùng hiện tại với những người dùng tương tự khác, và Content-Based Filtering so sánh các đặc tính của sản phẩm đã xem/mua với sản phẩm khác. Dữ liệu được xử lý thông qua các API endpoint backend, trả về danh sách top 10 sản phẩm được khuyến nghị dựa trên điểm số tính toán.

4.2. Kết quả và hướng phát triển

Dự án đã thành công hoàn thành với một website thương mại điện tử hoàn chỉnh và hệ thống khuyến nghị hiệu quả. Hướng phát triển tiếp theo bao gồm: tích hợp machine learning nâng cao, hỗ trợ thanh toán online an toàn, mở rộng thị trường và tối ưu hóa hiệu suất cho lượng người dùng lớn hơn.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài Trong bối cảnh thị trường thương mại điện tử tại Việt Nam ngày càng phát triển mạnh mẽ, các doanh nghiệp phải đối mặt với sự cạnh tranh gay gắt về chất lượng dịch vụ, sự đa dạng của sản phẩm và khả năng thu hút, giữ chân khách hàng. Một trong những xu hướng công nghệ nổi bật hiện nay là tích hợp hệ thống khuyến nghị sản phẩm dựa trên dữ liệu hành vi người dùng. Xu hướng này không chỉ mang lại trải nghiệm cá nhân hóa cho khách hàng mà còn giúp tăng doanh thu và hiệu quả kinh doanh đáng kể.

Nhận thấy nhu cầu ngày càng cao đối với các nền tảng thương mại điện tử có khả năng tối ưu hóa trải nghiệm người dùng, chúng em quyết định xây dựng một website thương mại điện tử tích hợp hệ thống khuyến nghị sản phẩm. Website này không chỉ đáp ứng nhu cầu mua sắm trực tuyến mà còn giúp các nhà bán hàng quản lý sản phẩm, đơn hàng một cách hiệu quả, đồng thời hỗ trợ người mua dễ dàng tìm thấy các sản phẩm phù hợp với sở thích và nhu cầu cá nhân. Mục tiêu: ● Xây dựng nền tảng thương mại điện tử hiện đại với giao diện trực quan, thân thiện, màu sắc hài hòa, dễ sử dụng, đáp ứng các chức năng cần thiết của một website thương mại điện tử. ● Tích hợp hệ thống khuyến nghị sản phẩm thông minh, sử dụng các thuật toán gợi ý dựa trên hành vi mua sắm và sở thích cá nhân của người dùng, góp phần nâng cao trải nghiệm mua sắm.

● Hỗ trợ quản trị viên quản lý hiệu quả với các chức năng quản lý sản phẩm, đơn hàng, khách hàng, và phân tích doanh thu. ● Phát triển hệ thống báo cáo kinh doanh trực quan, cung cấp dữ liệu chi tiết, hỗ trợ các chủ doanh nghiệp đưa ra các quyết định chiến lược chính xác. Khảo sát hiện trạng 1. Cơ cấu tổ chức Hình 1.

Chức năng - Các chức năng của một website thương mại điện tử + Chức năng dành cho người bán: o Quản lý sản phẩm: Quản trị viên có thể tạo, chỉnh sửa, và xóa các sản phẩm trong hệ thống, đồng thời quản lý tồn kho và giá cả. o Quản lý đơn hàng: Quản trị viên theo dõi, xử lý và cập nhật trạng thái đơn hàng, từ lúc đặt hàng đến khi hoàn thành giao hàng. o Quản lý người dùng: Quản lý tài khoản người dùng, theo dõi lịch sử mua hàng, và cung cấp hỗ trợ khách hàng khi cần. o Quản lý khuyến mãi: Quản trị viên tạo và quản lý các chương trình khuyến mãi, mã giảm giá, và các sự kiện đặc biệt cho người dùng.

o Quản lí bình luận: Quản trị viên được quyền thêm và xóa các bình luận. o Quản lí kho: Quản lí các mặt hàng hiện có để dễ dàng thống kê o Báo cáo và phân tích: Cung cấp thông tin về doanh số, hành vi người dùng, và các chỉ số khác để giúp quản trị viên đưa ra quyết định kinh doanh hiệu quả. + Chức năng dành cho người dùng: o Gợi ý sản phẩm cá nhân hóa: Hệ thống đưa ra các gợi ý sản phẩm dựa trên lịch sử mua sắm, sở thích và nhu cầu của người dùng. o Xem và theo dõi đơn hàng: Người dùng có thể theo dõi tiến trình đơn hàng từ lúc đặt hàng đến khi giao hàng thành công.

o Lưu trữ vào danh sách yêu thích: Người dùng có thể lưu trữ các sản phẩm yêu thích vào danh sách riêng để dễ dàng tìm kiếm và mua sau. o Tìm kiếm sản phẩm thông minh: Người dùng có thể tìm kiếm sản phẩm qua từ khóa, danh mục, thương hiệu, hoặc lọc sản phẩm dựa trên giá, đánh giá, và các tiêu chí khác. o Mua sắm qua chương trình khuyến mãi: Người dùng có thể truy cập vào các chương trình khuyến mãi, sử dụng mã giảm giá, và tích lũy điểm thưởng để được giảm giá trong lần mua sau. 13 o Đánh giá và bình luận sản phẩm: Người dùng có thể đánh giá, bình luận về sản phẩm đã mua, và chia sẻ kinh nghiệm mua sắm với cộng đồng.

o Chatbox trực tuyến: nhận hỗ trợ, tư vấn sản phẩm. Sơ đồ sitemap của website HOME PRODUCT CONTACT US ORDER CART H 1. Công nghệ sử dụng - Sử dụng thư viện ReactJS và các package để thiết kế giao diện website. - Sử dụng TailwindCSS để thiết kế giao diện chuẩn responsive.

- Lưu trữ Database bằng MongoDB, Cloudinary. - Lập trình backend với NodeJs, ExpressJS. Môi trường thiết kế - Môi trường lập trình: Visual Studio Code 1. Công cụ hỗ trợ - Figma: phác thảo layout giao diện.

- Photoshop: thiết kế logo cho website. - Postman: Tạo các request, test API. - Github: Quản lý và lưu trữ source code. - Notion: Quản lý dự án 14 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.

Ngôn ngữ HTML 2. Giới thiệu tổng quan về HTML - HTML có tên đầy đủ là Hypertext Markup Language nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML thường được sử dụng để tạo và cấu trúc các phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, link, blockquotes… [2] - HTML không phải là một ngôn ngữ lập trình mà chỉ là một ngôn ngữ đánh dấu. Điều này đồng nghĩa với việc HTML không thể thực hiện các chức năng “động”.

Nói cách khác, HTML tương tự như phần mềm Microsoft Word, chỉ có tác dụng định dạng các thành phần có trong website. Cấu trúc của HTML - Một file code HTML được cấu thành bởi các phần tử HTML và các cặp thẻ. Song song đó, HTML gồm có nhiều dạng thẻ khác nhau và mỗi thẻ sẽ có nhiệm vụ và ý nghĩa riêng. Ngoài ra, mỗi thẻ sẽ được bắt đầu và kết thúc bằng dấu ngoặc nhọn “<, >”.

Các chữ giữa các dấu ngoặc này gọi là phần tử. Về cơ bản, cấu trúc của một trang HTML sẽ gồm 3 phần như sau: ● Phần khai báo loại file code có cấu trúc thẻ là <!DOCTYPE html>: Xuất hiện ở đầu hoặc trên cùng của file HTML. Qua phần này, người dùng sẽ biết được trình duyệt đang sử dụng để tạo trang là phiên bản HTML nào. ● Phần khai báo ban đầu, khai báo về meta, little, javascript, css.

có cấu trúc bắt đầu bằng thẻ <head> và kết thúc với thẻ <head>: Chứa tiêu đề và các khai báo có thông tin nhằm phục vụ SEO. Trong đó, tiêu đề được hiển thị trên thanh điều hướng của trang web và là phần nội dung nằm giữa cặp thẻ <title> và </title>. ● Phần chứa và hiển thị nội dung của trang web, có cấu trúc bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>: Bao gồm tiêu đề trang web, logo, điều hướng chính và thanh tìm kiếm; nội dung chính như tiêu đề hoặc tiêu đề bài viết, nội dung bài viết, ngày đăng, tác giả,.; thanh bên hiển thị tiện ích con và điều hướng thứ cấp; chân trang cung cấp thông tin liên hệ, liên kết xã hội, bản quyền và điều hướng. Định dạng Website với Tailwind CSS 2.

Giới thiệu về Taiwind CSS - Taiwind CSS là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó. Lý do sử dụng Taiwind CSS - Xây dựng giao diện chỉ cần khai báo class trên file html. - Chỉ xuất ra những file css chứa những class đã sử dụng trong giao diện.

- Dễ dàng thiết lập Responsive ngay trên file html. - Hỗ trợ tương tác hover, focus… ngay trên class html. 15 - Tăng tốc độ code với Extension thông minh trên VS Code. Lập trình Javascript 2.

Giới thiệu tổng quan về Javascript - Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay. Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn. Chúng cũng đóng vai trò tương tự như một phần của website, cho phép Client-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra những website động. Vai trò của Javascript trong một trang web - Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript chính là getElementById ().

Chúng được sử dụng để tìm một phần tử của HTML với id = “demo” và dùng để thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello JavaScript” - Thay đổi giá trị thuộc tính HTML: Tổng quan về javascript còn có thể sử dụng để thay đổi các giá trị của thuộc tính. Ví dụ: thay đổi thuộc tính src (source) của tag<img>. - Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi thuộc tính của HTML ở trên. ReactJS trong lập trình giao diện 2.

Giới thiệu tổng quan về ReactJS - ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client. [6] - ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI. Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng.

UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card. Ưu điểm của ReactJS - Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp. - Tái sử dụng các Component: Nếu xây dựng các Component đủ tốt, chỉ cần tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau. Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.

- Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó. Nếu cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, chúng 16 ta có thể dễ dàng “chia sẻ” các Component hoặc sử dung lại các Business Logic trong ứng dụng.