Báo cáo Đồ án 1: Xây dựng Website Shop thời trang FashionSpace

Tài liệu báo cáo đồ án 1: Xây dựng website shop thời trang FashionSpace. Sử dụng ReactJS, NodeJS, tích hợp chatbot và hệ thống khuyến nghị sản phẩm.

• Tác giả: Dương Minh Tài
• 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 Thành phố 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 FashionSpace
• Loại tài liệu: Đồ án
• Năm xuất bản: 2025
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Đồ Án Website Shop Thời Trang FashionSpace

Đồ án Website Shop Thời trang FashionSpace là một dự án học thuật được thực hiện bởi sinh viên Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP. HCM. Đây là một nền tảng thương mại điện tử chuyên về bán lẻ thời trang được xây dựng với công nghệ hiện đại và khả năng mở rộng cao. Dự án nhằm cung cấp trải nghiệm mua sắm trực tuyến toàn diện cho người tiêu dùng, bao gồm duyệt sản phẩm, quản lý giỏ hàng, thanh toán an toàn và theo dõi đơn hàng. FashionSpace tích hợp nhiều tính năng nâng cao như hệ thống chatbot hỗ trợ khách hàng, hệ thống khuyến nghị sản phẩm thông minh và quản lý kho hàng chi tiết. Với thiết kế responsive và giao diện thân thiện, ứng dụng mang đến một giải pháp thương mại điện tử hoàn chỉnh cho ngành thời trang.

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ẽ tại Việt Nam. Nhu cầu xây dựng platform bán hàng trực tuyến hiệu quả ngày càng tăng. Dự án này được chọn để ứng dụng các công nghệ web hiện đại như ReactJS và NodeJS vào thực tế. Đồng thời, nó giúp sinh viên rèn luyện kỹ năng phát triển ứng dụng full-stack, từ frontend đến backend, cũng như kinh nghiệm làm việc nhóm trong môi trường thực tế.

1.2. Mục Tiêu Chính

Mục tiêu chính của đề tài là xây dựng một website shop thời trang chức năng đầy đủ với trải nghiệm người dùng tốt. Ứng dụng cần đáp ứng các yêu cầu về quản lý sản phẩm, xử lý đơn hàng, thanh toán điện tử và hỗ trợ khách hàng. Ngoài ra, dự án nhằm áp dụng các kỹ thuật AI/ML như Dialogflow cho chatbot và hệ thống khuyến nghị sản phẩm để nâng cao giá trị của ứng dụng.

II. Công Nghệ Sử Dụng Trong FashionSpace

FashionSpace được xây dựng trên nền tảng công nghệ MERN Stack (MongoDB, ExpressJS, ReactJS, NodeJS), một bộ công cụ phổ biến và mạnh mẽ cho phát triển ứng dụng web hiện đại. ReactJS được sử dụng cho frontend, cho phép xây dựng giao diện người dùng động và responsive. NodeJS cùng với ExpressJS tạo nên backend mạnh mẽ xử lý logic nghiệp vụ và API. MongoDB là cơ sở dữ liệu NoSQL linh hoạt, phù hợp với cấu trúc dữ liệu phức tạp. Ngoài ra, dự án tích hợp Dialogflow cho chatbot thông minh và TensorFlow cho hệ thống khuyến nghị. Tailwind CSS được sử dụng để styling, giúp thiết kế giao diện nhanh chóng và chuyên nghiệp.

2.1. Frontend với ReactJS và Tailwind CSS

ReactJS cung cấp khả năng xây dựng giao diện component-based hiệu quả, cho phép tái sử dụng code và quản lý state dễ dàng. Tailwind CSS hỗ trợ styling nhanh với utility-first approach, tạo ra giao diện responsive và nhất quán trên tất cả thiết bị. Kết hợp hai công nghệ này, FashionSpace có giao diện hiện đại, mượt mà và tối ưu trải nghiệm người dùng trên mobile, tablet và desktop.

2.2. Backend với NodeJS và MongoDB

NodeJS cùng ExpressJS tạo nên backend scalable và hiệu suất cao, xử lý hàng ngàn request đồng thời. MongoDB cho phép lưu trữ dữ liệu linh hoạt, hỗ trợ các thuộc tính phức tạp của sản phẩm thời trang như kích cỡ, màu sắc, hình ảnh. Kiến trúc này đảm bảo khả năng mở rộng và bảo mật cao cho hệ thống.

III. Các Tính Năng Chính Của Ứng Dụng

FashionSpace cung cấp một bộ tính năng toàn diện cho cả khách hàng và quản trị viên. Khách hàng có thể đăng ký, đăng nhập an toàn, duyệt và tìm kiếm sản phẩm theo danh mục, size, màu sắc. Hệ thống giỏ hàng động cho phép quản lý sản phẩm dễ dàng, với thanh toán an toàn qua nhiều phương thức. Khách hàng có thể theo dõi trạng thái đơn hàng real-time, đánh giá sản phẩm và nhân xét. Chatbot AI hỗ trợ giải đáp câu hỏi 24/7, còn hệ thống khuyến nghị thông minh gợi ý sản phẩm phù hợp. Quản trị viên có quyền quản lý sản phẩm, danh mục, người dùng và xem báo cáo thống kê chi tiết.

3.1. Chức Năng Cho Người Dùng

Người dùng có thể tạo tài khoản cá nhân, quân lý hồ sơ, và khôi phục mật khẩu dễ dàng. Tính năng tìm kiếm và lọc sản phẩm nâng cao giúp tìm các item theo múc tiêu, xem chi tiết sản phẩm với hình ảnh 360 độ. Giỏ hàng thông minh cho phép lưu sản phẩm yêu thích, so sánh giá. Quy trình thanh toán an toàn hỗ trợ nhiều phương thức. Chức năng theo dõi đơn hàng cập nhật trạng thái real-time từ đặt hàng đến giao hàng.

3.2. Chức Năng Cho Quản Trị Viên

Dashboard quản lý toàn diện cho phép quản trị viên thêm, sửa, xóa sản phẩm và danh mục. Tính năng quản lý kho hàng theo dõi tồn kho, quản lý đơn hàng cập nhật trạng thái. Quản lý người dùng bao gồm phê duyệt tài khoản, xử lý khiếu nại. Báo cáo thống kê chi tiết doanh thu, sản phẩm bán chạy, khách hàng trung thành. Hệ thống phản hồi bình luận giúp cải thiện dịch vụ dựa trên feedback khách hàng.

IV. Đổi Mới Công Nghệ Và Hướng Phát Triển

FashionSpace không chỉ là một ứng dụng thương mại điện tử cơ bản, mà còn áp dụng các công nghệ tiên tiến như AI và Machine Learning. Dialogflow được tích hợp để tạo chatbot hội thoại thông minh, hiểu ngữ cảnh và cung cấp hỗ trợ khách hàng chuyên nghiệp. Hệ thống khuyến nghị sản phẩm sử dụng TensorFlow để phân tích hành vi người dùng, gợi ý sản phẩm phù hợp, tăng tỷ lệ chuyển đổi. Dự án có hướng phát triển dài hạn bao gồm mở rộng thanh toán, tích hợp logistics thực tế, nâng cấp giao diện AR/VR để thử quần áo ảo. Các tính năng như push notification, loyalty program, social commerce sẽ được bổ sung trong tương lai.

4.1. Công Nghệ AI ML Được Ứng Dụng

Dialogflow cho phép xây dựng chatbot thông minh có khả năng hiểu natural language processing và phản hồi linh hoạt. TensorFlow được dùng để phát triển hệ thống khuyến nghị collaborative filtering, phân tích mô hình mua sắm của người dùng. Các công nghệ này nâng cao trải nghiệm khách hàng và tối ưu hóa chuyển đổi bán hàng, tạo nên giải pháp thương mại điện tử thông minh.

4.2. Kế Hoạch Mở Rộng Và Cải Thiện

Trong giai đoạn tới, FashionSpace sẽ tích hợp VR/AR cho phép khách hàng thử quần áo ảo trước khi mua. Mobile app native cho iOS/Android sẽ được phát triển để tăng tính tiện lợi. Hệ thống loyalty program sẽ thưởng điểm cho khách hàng trung thành. Social commerce features cho phép chia sẻ sản phẩm trên mạng xã hội. Tích hợp logistics thực tế với các đơn vị giao hàng sẽ hoàn thiện dịch vụ.

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 đề tài, khảo sát hiện trạng, công nghệ sử dụng, và phạm vi đề tài. ● Chương 2: Cơ sở lý thuyết – Tóm lược các nghiên cứu liên quan và kiến thức nền tảng hỗ trợ phát triển hệ thống. ● Chương 3: Phân tích và thiết kế hệ thống – Đặc tả yêu cầu phần mềm, thiết kế hệ thống, cơ sở dữ liệu, và chức năng. ● Chương 4: Xây dựng hệ thống – Trình bày thiết kế giao diện của website cũng như mô tả chi tiết các chức năng chính của từng màn hình ● Chương 5: Kết luận – Tóm tắt các kết quả đạt được và đề xuất hướng phát triển cho sản phẩm trong tương lai.

GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài Trong bối cảnh số hóa hiện nay, thương mại điện tử đã trở thành một phần không thể thiếu trong cuộc sống hiện đại. Sự phát triển mạnh mẽ của công nghệ thông tin đã tạo điều kiện thuận lợi cho việc mua sắm trực tuyến, mang lại sự tiện lợi, tiết kiệm thời gian và công sức cho người tiêu dùng. Đặc biệt, ngành thời trang với tính chất đa dạng và thay đổi nhanh chóng, đang tận dụng tối đa lợi thế của thương mại điện tử để mở rộng phạm vi tiếp cận khách hàng một cách hiệu quả hơn bao giờ hết.

Việc xây dựng một website bán hàng thời trang không chỉ đơn giản là việc tạo ra một cửa hàng trực tuyến mà còn là việc xây dựng một thương hiệu vững mạnh, đồng thời cung cấp một trải nghiệm mua sắm độc đáo và chuyên nghiệp. Một website được thiết kế tinh tế, thân thiện với người dùng, cung cấp thông tin sản phẩm rõ ràng và đầy đủ, có thể giúp các doanh nghiệp thời trang thu hút khách hàng mới, tăng cường tương tác, và củng cố lòng trung thành của khách hàng hiện tại. Nhận thức được tầm quan trọng này, nhóm chúng em đã chọn đề tài "Xây dựng Website shop thời trang - FashionSpace" để nghiên cứu. Với mục tiêu tạo ra một nền tảng thương mại điện tử chuyên nghiệp, chúng em hướng đến việc giúp khách hàng dễ dàng tìm kiếm và chọn lựa những sản phẩm thời trang phù hợp với phong cách và sở thích của mình.

Thông qua việc cung cấp giao diện trực quan, thông tin sản phẩm chi tiết, và các tính năng mua sắm tiện lợi, chúng em mong muốn mang đến cho khách hàng một trải nghiệm mua sắm trực tuyến vượt trội. Mục tiêu đề tài ● Tạo ra một kênh bán hàng hiệu quả: - Mở rộng thị trường: đưa sản phẩm thời trang đến với nhiều khách hàng hơn, không chỉ giới hạn ở khu vực địa lý. - Tăng doanh thu: tối ưu hóa quá trình mua bán, rút ngắn chuỗi cung ứng, giảm chi phí và tăng lợi nhuận. 3 ● Cung cấp trải nghiệm mua sắm tuyệt vời: - Nâng cao trải nghiệm người dùng: thiết kế giao diện trực quan, dễ sử dụng, tính năng tìm kiếm nâng cao, bộ lọc thông minh, và khả năng cá nhân hóa để đáp ứng nhu cầu cụ thể của từng người dùng.

- Thông tin sản phẩm chi tiết: cung cấp đầy đủ thông tin về sản phẩm như hình ảnh, kích thước, chất liệu, màu sắc,. giúp khách hàng đưa ra quyết định mua hàng chính xác; tính năng hỗ trợ mua sắm qua chatbot. - Tích hợp các tính năng như gợi ý sản phẩm, so sánh sản phẩm, đánh giá sản phẩm, tư vấn chọn size thông qua chatbot, thanh toán đa dạng,. ● Thu thập và phân tích dữ liệu: - Hiểu rõ hành vi của khách hàng: thu thập dữ liệu về hành vi mua sắm của khách hàng để đưa ra các chiến lược kinh doanh phù hợp.

- Cá nhân hóa trải nghiệm mua sắm: cung cấp các khuyến mãi, sản phẩm phù hợp với từng khách hàng. Cải thiện dịch vụ: dựa trên dữ liệu thu thập được để cải thiện chất lượng sản phẩm, dịch vụ và trải nghiệm mua sắm của khách hàng. Phạm vi đề tài 1. Phạm vi người dùng ● Người dùng đã đăng nhập: Bất kỳ cá nhân nào đăng ký tài khoản trên FashionSpace đều có quyền truy cập đầy đủ các tính năng của ứng dụng.

● Người dùng chưa đăng nhập: Chỉ được phép tìm kiếm và khám phá sản phẩm. Phạm vi môi trường ● Ứng dụng đa nền tảng: FashionSpace được phát triển để hoạt động trên nhiều nền tảng khác nhau nhằm đáp ứng nhu cầu sử dụng đa dạng của người dùng. Phạm vi chức năng ● Chức năng tạo tài khoản, đăng ký, đăng nhập, quên mật khẩu. ● Chức năng quản lý sản phẩm: ● Chức năng quản lý danh mục sản phẩm.

● Chức năng quản lý màu sắc sản phẩm. ● Chức năng quản lý kích cỡ sản phẩm. ● Chức năng quản lý người dùng. ● Chức năng xem và xuất báo cáo thống kê.

● Chức năng quản lý đơn hàng. ● Chức năng quản lý đánh giá. ● Hệ thống khuyến nghị sản phẩm: Gợi ý sản phẩm cá nhân hóa dựa vào lịch sử mua sắm và hành vi xem sản phẩm của người dùng. ● Chức năng quản lý giỏ hàng và thanh toán trực tuyến: ● Chức năng đánh giá và nhận xét sản phẩm.

● Chức năng tìm kiếm, lọc và sắp xếp sản phẩm tùy theo những tiêu chí khác nhau. ● Xây dựng chatbot: Hỗ trợ khách hàng tìm kiếm sản phẩm, đặt hàng nhanh chóng, cũng như theo dõi đơn hàng một cách tiện lợi. Phương pháp thực hiện ● Nghiên cứu thị trường: phân tích đối thủ cạnh tranh, xu hướng mua sắm trực tuyến, nhu cầu của người dùng. ● Thiết kế giao diện: tạo giao diện thân thiện, trực quan, dễ sử dụng, phù hợp với xu hướng thiết kế hiện đại.

● Phát triển phần mềm: sử dụng các công nghệ phù hợp để xây dựng nền tảng thương mại điện tử, đảm bảo tính ổn định và bảo mật. ● Tích hợp thanh toán: liên kết với các cổng thanh toán uy tín để đảm bảo quá trình thanh toán diễn ra an toàn, nhanh chóng. ● Bảo trì và nâng cấp: cập nhật và nâng cấp hệ thống thường xuyên để đảm bảo hoạt động ổn định và đáp ứng nhu cầu của người dùng. 5 ● Tìm hiểu về AI: tích hợp chatbot hỗ trợ tư vấn 24/7, hệ thống khuyến nghị, gợi ý sản phẩm.

Công nghệ sử dụng ● Cơ sở dữ liệu: MongoDB. ● Front-end: - Ngôn ngữ sử dụng: Javascript. - Thư viện sử dụng: ReactJS. - Framework sử dụng: Tailwind CSS ● Back-end: - Ngôn ngữ sử dụng: Javascript.

- Thư viện sử dụng: ExpressJS và NodeJS. ● Công cụ xây dựng ứng dụng: Visual Studio Code. ● Công cụ thiết kế UI/UX: Figma. ● Quản lý mã nguồn mở: Github.

● Chatbot: DialogFlow sử dụng công nghệ xử lý ngôn ngữ tự nhiên để giao tiếp. ● Hệ thống gợi ý sản phẩm: dựa trên mô hình Model-Based Collaborative Filtering sử dụng thư viện TensorFlow.1: Giới thiệu về JavaScript 2. Giới thiệu JavaScript là một ngôn ngữ lập trình đa năng được phát triển bởi Brendan Eich vào năm 1995. Ban đầu, JavaScript được thiết kế để chạy trên các trình duyệt web nhằm cung cấp các tương tác động cho các trang web.

Qua nhiều năm, JavaScript đã phát triển mạnh mẽ và trở thành một ngôn ngữ phổ biến, không chỉ trong phát triển giao diện người dùng (frontend) mà còn ở phía máy chủ (backend) với sự hỗ trợ của các môi trường như Node. JavaScript hiện nay được sử dụng trong nhiều lĩnh vực khác nhau, bao gồm phát triển web, ứng dụng di động, game và thậm chí trong AI. Ưu điểm ● Đa nền tảng: Chạy được trên hầu hết các trình duyệt và hệ điều hành mà không cần cài đặt bổ sung. ● Cộng đồng lớn: Có rất nhiều tài liệu, thư viện, và công cụ hỗ trợ.

● Tính năng phong phú: Hỗ trợ lập trình hướng đối tượng, hàm, và cả bất đồng bộ. ● Hiệu suất cao: Được tối ưu hóa trên nhiều trình duyệt hiện đại với các công cụ như V8 Engine. Nhược điểm ● Không an toàn: Dễ bị tấn công XSS (Cross-Site Scripting) nếu không được bảo vệ đúng cách. 7 ● Khó bảo trì: Mã nguồn JavaScript lớn dễ trở nên phức tạp nếu không tuân thủ các nguyên tắc tốt.

● Khả năng xử lý đa luồng hạn chế: JavaScript hoạt động đơn luồng, khiến việc xử lý đồng thời gặp khó khăn.2: Giới thiệu về NodeJS 2. Giới thiệu Node.js là một môi trường chạy JavaScript phía máy chủ, được phát triển bởi Ryan Dahl vào năm 2009. Nó cho phép lập trình viên sử dụng JavaScript, vốn thường được dùng ở phía client, để xây dựng các ứng dụng phía server. Được xây dựng trên V8 Engine của Google, Node.js tận dụng kiến trúc non-blocking và event-driven, giúp cải thiện hiệu suất, đặc biệt đối với các ứng dụng thời gian thực như trò chuyện trực tuyến, dịch vụ API và ứng dụng IoT.js đã trở thành một phần quan trọng của hệ sinh thái phát triển web hiện đại, đặc biệt khi kết hợp với các công nghệ khác như ExpressJS và MongoDB.

Ưu điểm ● Hiệu suất cao: Sử dụng kiến trúc non-blocking và event-driven để xử lý hàng nghìn kết nối đồng thời. ● Đa nền tảng: Hỗ trợ các hệ điều hành phổ biến như Windows, macOS, và Linux. ● Hệ sinh thái phong phú: Với npm, Node.js cung cấp hàng ngàn module và thư viện sẵn có. ● Cộng đồng mạnh mẽ: Tài nguyên phong phú và sự hỗ trợ từ cộng đồng.

Nhược điểm ● Không tối ưu cho các tác vụ nặng về CPU: Hiệu suất giảm khi xử lý các tác vụ yêu cầu tính toán phức tạp. ● Callback hell: Dù Promise và async/await đã cải thiện, lập trình viên vẫn cần quen thuộc để tránh lỗi. ● Sự ổn định của module: Một số thư viện không được cập nhật thường xuyên, có thể gây khó khăn trong bảo trì.3: Giới thiệu về ExpressJS 2. Giới thiệu Express.js là một framework web dành cho Node.js, được phát triển bởi TJ Holowaychuk.

Nó giúp đơn giản hóa việc phát triển các ứng dụng web và API bằng cách cung cấp các công cụ và tính năng mạnh mẽ nhưng dễ sử dụng.js được thiết kế theo phong cách tối giản, không áp đặt một cấu trúc chặt chẽ, cho phép lập trình viên tự do tùy chỉnh theo nhu cầu cụ thể. Ưu điểm ● Đơn giản và nhẹ: Thiết kế tối giản, dễ sử dụng, phù hợp cho việc tạo API RESTful. ● Linh hoạt: Dễ dàng tích hợp với middleware và thư viện khác để mở rộng tính năng. ● Tài liệu phong phú: Có tài liệu chi tiết và hỗ trợ rộng rãi từ cộng đồng, giúp dễ dàng tìm kiếm giải pháp khi gặp vấn đề.

Nhược điểm ● Thiếu chuẩn hóa: Tính linh hoạt cao có thể dẫn đến sự không nhất quán trong cách tổ chức mã nguồn giữa các thành viên trong nhóm.