Báo cáo Đồ án 1: Xây dựng website shop thời trang có chatbot tư vấn

Tải báo cáo đồ án Xây dựng website shop thời trang tích hợp chatbot tư vấn. Tài liệu trình bày đầy đủ phân tích, thiết kế hệ thống và công nghệ.

• Tác giả: Đinh Như Thông
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Tp. Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng Website Shop Thời trang Tích hợp Chatbot Tư vấn
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: Tp. Hồ Chí Minh

Tóm tắt

I. Giới thiệu về đồ án Website Shop Thời trang Tích hợp Chatbot Tư vấn

Đồ án Website Shop Thời trang Tích hợp Chatbot Tư vấn là một dự án học tập được thực hiện bởi sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin, ĐH Quốc gia TP.HCM. Dự án này kết hợp giữa xây dựng nền tảng thương mại điện tử và công nghệ trí tuệ nhân tạo (AI) để tạo ra một hệ thống bán hàng thông minh. Mục tiêu chính là phát triển một website shop thời trang chuyên nghiệp với tính năng chatbot tư vấn sản phẩm tự động. Hệ thống này giúp cải thiện trải nghiệm khách hàng, tăng tương tác thời gian thực và hỗ trợ bán hàng hiệu quả hơn.

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

Ngành thương mại điện tử thời trang đang phát triển mạnh mẽ với nhu cầu từ khách hàng ngày càng cao. Tuy nhiên, nhiều website shop hiện tại vẫn thiếu các tính năng tương tác và tư vấn khách hàng tự động. Đề tài này được chọn để giải quyết vấn đề này bằng cách tích hợp chatbot AI hiện đại, giúp cung cấp dịch vụ tư vấn 24/7 mà không cần can thiệp con người.

1.2. Mục tiêu và phạm vi dự án

Mục tiêu chính của dự án là xây dựng một nền tảng thương mại điện tử hoàn chỉnh cho ngành thời trang với các chức năng quản lý sản phẩm, đơn hàng và khách hàng. Phạm vi dự án bao gồm: trang chủ, cửa hàng sản phẩm, giỏ hàng, thanh toán, quản lý tài khoản, và chatbot tư vấn tích hợp.

II. Công nghệ sử dụng trong xây dựng Website Shop Thời trang

Để phát triển website shop thời trang tích hợp chatbot, dự án sử dụng stack công nghệ hiện đại và phổ biến. Phía frontend được xây dựng với ReactJS để tạo giao diện người dùng động và tương tác. Phía backend sử dụng Node.js và Express.js để xử lý logic ứng dụng. Cơ sở dữ liệu MongoDB được chọn để lưu trữ dữ liệu linh hoạt. Để tích hợp chatbot AI, dự án sử dụng Dialogflow CX - một nền tảng xử lý ngôn ngữ tự nhiên mạnh mẽ. Firebase được sử dụng cho các dịch vụ như xác thực người dùng và lưu trữ ảnh.

2.1. Frontend ReactJS và Redux Toolkit

ReactJS là thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Redux Toolkit được sử dụng để quản lý trạng thái ứng dụng toàn cục. Kết hợp này cho phép tái sử dụng component, quản lý state hiệu quả, và tăng tốc độ phát triển. Giao diện người dùng trở nên responsive, tương tác mượt mà và dễ bảo trì.

2.2. Backend Node.js Express và MongoDB

Node.js cung cấp môi trường chạy JavaScript phía server. Express.js là framework web framework nhẹ nhưng mạnh mẽ để xây dựng API RESTful. MongoDB là cơ sở dữ liệu NoSQL linh hoạt, phù hợp cho dữ liệu không có cấu trúc cố định. Bộ ba này cho phép xử lý request nhanh chóng, quản lý dữ liệu hiệu quả, và dễ dàng mở rộng.

2.3. Chatbot AI Dialogflow CX và Firebase

Dialogflow CX là nền tảng xử lý ngôn ngữ tự nhiên của Google, giúp xây dựng chatbot thông minh hiểu được ý định người dùng. Firebase cung cấp xác thực an toàn, lưu trữ dữ liệu đáng tin cậy, và API realtime. Tổ hợp này tạo ra chatbot tư vấn sản phẩm tự động, phản hồi nhanh và chính xác.

III. Thiết kế hệ thống Website Shop Thời trang Tích hợp Chatbot

Thiết kế hệ thống được xây dựng dựa trên mô hình client-server tiêu chuẩn. Kiến trúc ứng dụng chia thành ba lớp chính: lớp giao diện người dùng (Presentation Layer), lớp xử lý logic ứng dụng (Application Layer), và lớp cơ sở dữ liệu (Data Layer). Giao tiếp giữa các lớp được thực hiện thông qua RESTful API với JWT Authentication để bảo mật dữ liệu. Hệ thống quản lý bao gồm các module chính: quản lý sản phẩm, quản lý đơn hàng, quản lý khách hàng, và module chatbot AI.

3.1. Phân tích yêu cầu chức năng

Yêu cầu chức năng bao gồm: đăng ký/đăng nhập người dùng, tìm kiếm và xem sản phẩm, thêm sản phẩm vào giỏ hàng, thanh toán đơn hàng, quản lý thông tin cá nhân, xem lịch sử đơn hàng, nhận tư vấn từ chatbot AI, và quản lý sản phẩm/đơn hàng cho chủ shop.

3.2. Thiết kế cơ sở dữ liệu

Cơ sở dữ liệu MongoDB được thiết kế với các collection chính: Users (khách hàng và chủ shop), Products (thông tin sản phẩm thời trang), Orders (đơn hàng), Cart (giỏ hàng), Conversations (lịch sử chat chatbot). Mô hình dữ liệu được chuẩn hóa để tránh lặp dữ liệu và đảm bảo tính toàn vẹn.

IV. Các tính năng chính và lợi ích của Website Shop Thời trang Tích hợp Chatbot

Website shop thời trang này cung cấp nhiều tính năng hiện đại để nâng cao trải nghiệm mua sắm của khách hàng. Chatbot tư vấn AI có khả năng hiểu ngôn ngữ tự nhiên, trả lời câu hỏi về sản phẩm, gợi ý trang phục phù hợp, và xử lý các yêu cầu khách hàng 24/7. Giao diện thân thiện giúp khách hàng dễ dàng duyệt sản phẩm, so sánh giá, đọc đánh giá, và hoàn thành giao dịch. Hệ thống quản lý cho phép chủ shop quản lý kho hàng hiệu quả, theo dõi doanh thu, và phân tích dữ liệu khách hàng để tối ưu hóa chiến lược bán hàng.

4.1. Tính năng Chatbot tư vấn thông minh

Chatbot AI tích hợp Dialogflow CX có thể nhận diện ý định của người dùng, xác định thông tin sản phẩm phù hợp, và cung cấp đề xuất cá nhân hóa. Chatbot có khả năng xử lý đa ngôn ngữ, học hỏi từ cuộc trò chuyện, và chuyển tiếp sang nhân viên hỗ trợ khi cần. Điều này giảm bớt áp lực cho đội ngũ nhân viên và tăng sự hài lòng khách hàng.

4.2. Lợi ích cho khách hàng và chủ shop

Khách hàng được hưởng lợi từ hỗ trợ tư vấn tức thì, giao diện dễ sử dụng, thanh toán an toàn, và theo dõi đơn hàng thời gian thực. Chủ shop được lợi từ tối ưu hóa chi phí nhân lực, tăng hiệu suất bán hàng, thu thập dữ liệu khách hàng, phân tích xu hướng thị trường, và nâng cao thương hiệu qua công nghệ hiện đại.

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

Chương 1 – Giới thiệu đề tài: Trình bày lý do chọn đề tài, mục tiêu, phạm vi, đối tượng sử dụng, phương pháp thực hiện, công nghệ sử dụng và kết quả mong đợi.  Chương 2 – Cơ sở lý thuyết: Trình bày một số vấn đề mà các nghiên cứu trong và ngoài nước đưa ra, từ đó đưa ra giải pháp. Đồng thời trình bày về các kiến thức nền tảng sử dụng để phục vụ cho đồ án.  Chương 3 – Phân tích và thiết kế hệ thống: Đặc tả và mô hình hóa các yêu cầu phần mềm; trình bày các bản thiết kế của đồ án, bao gồm thiết kế hệ thống, thiết kế đối tượng, thiết kế dữ liệu và thiết kế giao diện.

 Chương 4 – Xây dựng Website: Trình bày quy trình cài đặt, kiểm thử và triển khai sản phẩm.  Chương 5 – Kết luận: Kết luận lại những vấn đề đã giải quyết và trình bày ở các phần trước và nêu ra hướng phát triển cho sản phẩm trong tương lai. GIỚI THIỆU ĐỀ TÀI Trong chương này cung cấp tổng quan về lý do, mục tiêu và phạm vi của đề tài, cũng như phương pháp tiếp cận. Các mục chính bao gồm:  Lý do chọn đề tài  Mục tiêu nghiên cứu  Phạm vi nghiên cứu  Phương pháp nghiên cứu  Công nghệ sử dụng 1.

Lý do chọn đề tài Trong thời đại công nghệ phát triển nhanh chóng, ngành thời trang không chỉ dừng lại ở việc cung cấp sản phẩm, mà còn phải đáp ứng được nhu cầu trải nghiệm mua sắm tiện lợi, hiện đại và mang tính cá nhân hóa cao. Các shop thời trang trực tuyến hiện nay phần lớn đã đáp ứng được nhu cầu cơ bản của khách hàng, như hiển thị sản phẩm, thanh toán trực tuyến, hay quản lý đơn hàng. Tuy nhiên, những vấn đề như thiếu tính tương tác, gợi ý sản phẩm chưa chính xác, và khó khăn trong việc hỗ trợ khách hàng vẫn còn tồn tại. Để giải quyết các hạn chế này, việc tích hợp công nghệ chatbot thông minh vào hệ thống website shop thời trang là một giải pháp mang tính thực tiễn cao.

Chatbot không chỉ hỗ trợ khách hàng trong việc tìm kiếm, gợi ý sản phẩm mà còn cải thiện đáng kể hiệu quả giao tiếp giữa shop và khách hàng, từ đó nâng cao trải nghiệm mua sắm. Đề tài “Xây dựng website shop thời trang tích hợp chatbot tư vấn” được thực hiện nhằm mang đến giải pháp công nghệ hiện đại, giúp shop thời trang không chỉ tối ưu hóa quản lý bán hàng mà còn xây dựng mối quan hệ tốt hơn với khách hàng, phù hợp với xu hướng chuyển đổi số trong kinh doanh hiện nay. Mục tiêu đề tài  Xây dựng một website shop thời trang với giao diện thân thiện, trực quan, hài hòa, đáp ứng được các chức năng cần thiết của một website thương mại điện tử. 3  Tích hợp chatbot tư vấn giúp khách hàng tìm kiếm và gợi ý sản phẩm.

 Nâng cao trải nghiệm người dùng và hỗ trợ chủ shop trong việc quản lý bán hàng.  Đảm bảo hệ thống hoạt động ổn định, dễ mở rộng và đáp ứng nhu cầu sử dụng thực tế. Đối tượng nghiên cứu 1. Các công nghệ  Website bán hàng trực tuyến: Nghiên cứu và áp dụng các công nghệ web hiện đại như HTML, CSS, JavaScript, ReactJS để xây dựng giao diện người dùng và xử lý các yêu cầu từ khách hàng.

 Chatbot tư vấn: Nghiên cứu và tích hợp công nghệ chatbot (sử dụng nền tảng như Dialogflow hoặc Rasa) để tạo ra hệ thống tư vấn tự động cho khách hàng.  Backend và cơ sở dữ liệu: Nghiên cứu các công nghệ backend như Node.js và MongoDB để xử lý các yêu cầu, quản lý sản phẩm và đơn hàng.  Giao tiếp giữa các hệ thống: Sử dụng các API và WebSocket để đảm bảo việc giao tiếp mượt mà giữa các thành phần hệ thống, đặc biệt là giữa frontend và chatbot. Đối tượng người dùng  Khách hàng: Người sử dụng website để tìm kiếm, chọn mua sản phẩm thời trang và tương tác với chatbot tư vấn.

 Chủ shop: Người quản lý các sản phẩm, đơn hàng và các phản hồi từ khách hàng, sử dụng công cụ quản lý để tối ưu hóa bán hàng. Phạm vi nghiên cứu Phạm vi nghiên cứu của đề tài này tập trung vào việc xây dựng và triển khai một website bán hàng thời trang tích hợp chatbot tư vấn. Nghiên cứu sẽ bao gồm từ việc thiết kế giao diện người dùng, phát triển chức năng cho khách hàng và chủ shop, đến việc tích hợp chatbot để cải thiện trải nghiệm người dùng. Phương pháp thực hiện  Phương pháp nghiên cứu tài liệu: Tìm hiểu các nghiên cứu, tài liệu liên quan đến xây dựng website bán hàng và chatbot tư vấn.

 Phương pháp phân tích yêu cầu: Thu thập yêu cầu từ người dùng và chủ shop để xây dựng các tính năng chính của website và chatbot.  Phương pháp thiết kế và phát triển hệ thống: Xây dựng hệ thống website và chatbot, thực hiện phát triển frontend và backend, tích hợp các công nghệ cần thiết.  Phương pháp kiểm thử: Thực hiện kiểm thử chức năng của hệ thống, đảm bảo website và chatbot hoạt động đúng và hiệu quả.  Phương pháp đánh giá: Đánh giá hiệu quả của website và chatbot qua phản hồi của người dùng và các chỉ số như tốc độ truy cập, tỷ lệ chuyển đổi bán hàng 1.

Công nghệ sử dụng  Công cụ thiết kế UI/UX: Figma.  Ngôn ngữ sử dụng: Javascript.  Xây dựng website: HTML, CSS, Javascript.  Thư viện/Framework sử dụng chính: o Front-end: ReactJS.

o Back-end: NodeJS, ExpressJS, MongoDB, Firebase.  Database: MongoDB, Firebase.  Source Control: GitHub.  Các công cụ hỗ trợ khác (có thể có): Postman, Docker, Kubernetes, v.

CƠ SỞ LÝ THUYẾT Trong chương này trình bày những nền tảng lý thuyết và công cụ hỗ trợ cho quá trình phát triển hệ thống. Tổng quản về HTML Hình CƠ SỞ LÝ THUYẾT.1 Giới thiệu HTML 2. HTML là gì? HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng để xác định cấu trúc, ý nghĩa, và mục đích của tài liệu web. Không phải ngôn ngữ lập trình, HTML sử dụng các thẻ để định nghĩa nội dung và phục vụ các mục đích của trang web.

Vai trò của HTML  Xây dựng cấu trúc web: Tạo và khai báo các loại nội dung như văn bản, hình ảnh, video, nhạc.  Phân chia và định dạng nội dung: Chia đoạn, định dạng văn bản, đặt tiêu đề, ngắt dòng, tạo danh sách, ký tự đặc biệt.  Tạo liên kết và chèn hình ảnh: Gồm liên kết nội bộ, liên kết ngoài, và ảnh minh họa.  Định kiểu mẫu: Hiển thị văn bản, hình ảnh, bảng,.

giúp trang web đồng nhất và dễ quản lý.  Xác định thuộc tính trang: Bao gồm màu sắc, kích thước, vị trí, và các thông tin khác. Tổng quan về CSS Hình CƠ SỞ LÝ THUYẾT.2 Giới thiệu CSS 2. CSS là gì? CSS (Cascading Style Sheets) là ngôn ngữ định dạng dùng để mô tả cách trình bày của trang web như màu sắc, bố cục, và phông chữ, giúp nội dung trở nên trực quan và phong cách hơn.

CSS hoạt động độc lập với HTML và tuân theo chuẩn W3C, hỗ trợ bất kỳ ngôn ngữ đánh dấu dựa trên XML. Vai trò của CSS  Tạo giao diện trực quan và thu hút cho website.  Xây dựng phong cách và định nghĩa nội dung từ HTML.  Tương thích với nhiều thiết bị, cải thiện trải nghiệm người dùng.

 Tạo hiệu ứng, bố cục độc đáo, tăng tính tương tác.  Giảm mã nguồn, tiết kiệm thời gian và tăng tốc độ tải trang. Tổng quan về Javascript Hình CƠ SỞ LÝ THUYẾT.3 Giới thiệu Javascript 7 2. JavaScript là gì? JavaScript (JS) là ngôn ngữ lập trình phổ biến, được tạo ra bởi Brendan Eich vào năm 1995.

Nó giúp biến các trang web tĩnh thành trang động, cung cấp tính năng tương tác, cải thiện hiệu suất và nâng cao trải nghiệm người dùng. JavaScript thường được sử dụng kết hợp với HTML và CSS để thực hiện các tính năng như Slideshow, Pop-up quảng cáo và Autocomplete. Vai trò của JavaScript  Tạo hiệu ứng động và bố cục chuyển động với thư viện ảnh.  Xây dựng trò chơi, hoạt hình 2D/3D và các ứng dụng cơ sở dữ liệu phức tạp.

 Tăng cường hành vi người dùng với các tính năng như xác nhận hộp thoại và lời kêu gọi hành động.  Kiểm soát hành vi mặc định của trình duyệt, ví dụ như xử lý biểu mẫu đăng ký và đăng nhập.  Xử lý dữ liệu phía máy khách, giảm tải cho máy chủ và cải thiện tốc độ trang. Tổng quan về RESTful API Hình CƠ SỞ LÝ THUYẾT.4 Giới thiệu RESTful API 2.

RESTful API là gì? RESTful API là một tiêu chuẩn thiết kế API cho các ứng dụng web, dựa trên kiến trúc REST (Representational State Transfer). Nó cho phép quản lý và truyền 8 tải tài nguyên (như văn bản, hình ảnh, âm thanh, video, hoặc dữ liệu động) qua giao thức HTTP. RESTful API sử dụng các phương thức HTTP như GET, POST, PUT, DELETE để thao tác tài nguyên thông qua các điểm cuối URL. Vai trò của RESTfull API  Quản lý tài nguyên hiệu quả: RESTful API định nghĩa cách sử dụng các HTTP methods và URL để quản lý tài nguyên một cách rõ ràng và nhất quán.

 Tăng khả năng tích hợp: Cho phép các ứng dụng (web, mobile, IoT, .) giao tiếp với nhau dễ dàng, bất kể ngôn ngữ hoặc nền tảng.  Hỗ trợ mở rộng hệ thống: Nhờ tính phi trạng thái và khả năng lưu bộ nhớ đệm, RESTful API giúp hệ thống linh hoạt và dễ dàng mở rộng quy mô.  Độc lập công nghệ: RESTful API không phụ thuộc vào ngôn ngữ lập trình hoặc nền tảng, giúp cả client và server tự do lựa chọn công nghệ mà không ảnh hưởng đến giao tiếp.  Đơn giản và linh hoạt: Dễ triển khai, quản lý và hỗ trợ phân tách hoàn toàn giữa client và server, giúp phát triển và bảo trì hệ thống dễ dàng hơn.

Tổng quan về JSON Web Token (JWT) Authentication Hình CƠ SỞ LÝ THUYẾT.5 Giới thiệu JSON Web Token JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) nhằm xác minh thông tin an toàn giữa các bên Client-Server dưới dạng JSON object. Thông tin này 9 có thể được xác minh và tin cậy vì nó được ký điện tử - digitally signed. JWT có thể được ký bằng cách sử dụng một secret (với thuật toán HMAC) hoặc cặp public/private key dùng chuẩn RSA hoặc ECDSA. Signed tokens có thể xác minh tính toàn vẹn của các claim có trong đó, trong khi encrypted tokens ẩn các claim từ các bên khác.

Khi token được đăng ký bởi các cặp public/private keys, signature cũng xác nhận rằng chỉ có bên giữ private key mới là nơi đã đăng ký nó 2.