MÔ TẢ CHI TIẾT

Giới thiệu dự án

Fashion Pro là một dự án website thương mại điện tử chuyên biệt dành cho thời trang nam theo phong cách tối giản hiện đại. Dự án được phát triển nhằm mục tiêu cung cấp giải pháp mua sắm trực tuyến toàn diện, mượt mà cho khách hàng, đồng thời tối ưu hóa quy trình vận hành và quản lý bán hàng cho quản trị viên. Với sự kết hợp giữa kiến trúc Single Page Application (SPA) hiện đại ở Frontend và hệ thống RESTful API mạnh mẽ ở Backend, dự án mang đến trải nghiệm người dùng tối ưu cùng khả năng mở rộng linh hoạt.

Bài toán thực tế

Trong lĩnh vực bán lẻ thời trang trực tuyến, các doanh nghiệp thường gặp khó khăn trong việc quản trị dữ liệu sản phẩm đa dạng (nhiều màu sắc, kích thước khác nhau) dẫn đến sai lệch tồn kho. Đồng thời, việc tính toán phí vận chuyển thủ công và quy trình thanh toán phức tạp làm tăng tỷ lệ bỏ giỏ hàng của khách hàng. Thêm vào đó, việc hỗ trợ và phản hồi khách hàng 24/7 đòi hỏi chi phí nhân sự lớn.

Dự án Fashion Pro giải quyết triệt để các bài toán trên thông qua việc đồng bộ hóa dữ liệu tồn kho theo biến thể chi tiết, tích hợp tự động API tỉnh thành Việt Nam để chuẩn hóa địa chỉ giao hàng, liên kết cổng thanh toán trực tuyến VNPay, tích hợp chatbot tư vấn thông minh dựa trên trí tuệ nhân tạo và cung cấp hệ thống báo cáo doanh thu trực quan giúp nhà quản trị đưa ra quyết định kinh doanh kịp thời.

Công nghệ sử dụng

Dự án sử dụng các công nghệ hiện đại phổ biến để đảm bảo tính ổn định và tốc độ xử lý nhanh. Ở phía Frontend, ReactJS kết hợp với Vite cung cấp một ứng dụng Single Page Application (SPA) phản hồi nhanh chóng, giao diện được xây dựng linh hoạt bằng Tailwind CSS 3 và hệ thống biểu đồ sử dụng Recharts.

Phía Backend được phát triển trên nền tảng Node.js và Express, đảm bảo hiệu suất xử lý bất đồng bộ cao. Hệ quản trị cơ sở dữ liệu MySQL được quản lý trực quan thông qua Sequelize ORM giúp bảo mật và tối ưu hóa truy vấn dữ liệu. Đặc biệt, hệ thống tích hợp thư viện Google Generative AI (sử dụng các mô hình ngôn ngữ lớn của Gemini như Gemini 2.5 Flash và Gemini 2.0 Flash) để xây dựng chatbot thông minh tư vấn thời trang cho khách hàng theo thời gian thực. Bên cạnh đó, các thư viện bổ trợ như Sharp giúp nén và tối ưu hóa hình ảnh trực tiếp trên server, Nodemailer xử lý việc gửi mã OTP khôi phục mật khẩu bảo mật qua giao thức SMTP.

Chức năng nổi bật

Điểm nhấn đặc biệt của hệ thống là tính năng Trợ lý ảo Chatbot AI tư vấn trang phục. Không giống như các chatbot kịch bản thông thường, Chatbot AI tại Fashion Pro có khả năng hiểu ngôn ngữ tự nhiên của khách hàng, tự động truy vấn dữ liệu sản phẩm thực tế từ cơ sở dữ liệu để đưa ra các gợi ý trang phục phù hợp nhất với phong cách, kích thước, màu sắc và ngân sách mong muốn của khách hàng.

Một điểm sáng khác là hệ thống Dashboard quản trị toàn diện, tích hợp trực quan biểu đồ doanh thu theo ngày và tháng, tỷ lệ đơn hàng và phương thức thanh toán, hỗ trợ quản trị viên theo dõi hoạt động kinh doanh và xuất báo cáo CSV nhanh chóng. Quy trình mua hàng cũng được tối ưu hóa với việc tích hợp API tỉnh thành Việt Nam để chọn địa điểm nhận hàng chuẩn xác, cùng với cơ chế thanh toán đa dạng gồm COD và thanh toán online qua cổng VNPay với độ bảo mật cao nhờ kiểm tra checksum SHA512.

Giá trị học tập

Đây là tài liệu tham khảo và học tập giá trị dành cho sinh viên ngành Công nghệ thông tin và Phát triển phần mềm. Qua dự án này, người học có thể làm quen với việc thiết kế hệ thống cơ sở dữ liệu quan hệ phức tạp (quản lý quan hệ 1-nhiều giữa sản phẩm và các biến thể sản phẩm, chi tiết đơn hàng).

Dự án giúp củng cố kiến thức về xây dựng RESTful API chuẩn mực với Node.js, xử lý xác thực bằng JSON Web Token (JWT) an toàn, phân quyền truy cập (RBAC), và tích hợp các API bên thứ ba phổ biến như cổng thanh toán VNPay và API vị trí địa lý. Hơn nữa, việc tiếp cận tích hợp AI thế hệ mới (Gemini API) vào một ứng dụng web thực tế giúp học viên bắt kịp xu hướng phát triển phần mềm thông minh hiện nay.

Khả năng mở rộng

Mã nguồn của hệ thống được tổ chức rõ ràng theo cấu trúc module giúp dễ dàng phát triển và nâng cấp các tính năng mới trong tương lai. Dự án có thể được mở rộng bằng cách tích hợp các dịch vụ lưu trữ đám mây chuyên dụng như Cloudinary hay Amazon S3 để quản lý tệp tin hình ảnh thay vì lưu trữ dạng Base64.

Ngoài ra, việc áp dụng cơ chế Refresh Token và Token Blacklist sẽ tăng cường tính bảo mật cho hệ thống xác thực. Nhà phát triển cũng có thể xây dựng thêm hệ thống đánh giá sản phẩm (Review/Rating) từ người dùng, tích hợp công cụ khuyến nghị sản phẩm tự động dựa trên lịch sử xem hàng của khách, hoặc ứng dụng Redis để tối ưu hóa bộ nhớ đệm (caching) cho các dữ liệu dashboard phức tạp.

ĐIỂM NỔI BẬT

Tích hợp trợ lý ảo Chatbot AI tư vấn và đề xuất sản phẩm dựa trên Gemini API
Hệ thống quản lý biến thể sản phẩm chi tiết theo màu sắc, kích cỡ, SKU và tồn kho
Dashboard admin trực quan hóa dữ liệu doanh thu, sản phẩm bán chạy bằng Recharts
Tích hợp cổng thanh toán trực tuyến VNPay qua cơ chế đối chiếu checksum SHA512
Tự động lấy dữ liệu địa chỉ giao hàng thông qua API tỉnh thành Việt Nam
Quản lý chiến dịch Flash Sale và áp dụng mã giảm giá Coupon tự động theo điều kiện
Hệ thống bảo mật cao với phân quyền JWT, mã hóa bcrypt và xác thực OTP qua email
Thiết kế giao diện hiện đại với Tailwind CSS, responsive hoàn toàn trên di động và tablet

CHỨC NĂNG CHÍNH

Xác thực và phân quyền (Auth):
- Đăng ký tài khoản khách hàng mới.
- Đăng nhập hệ thống bằng JWT, quản lý phiên làm việc ở Client.
- Lấy lại mật khẩu: gửi mã OTP xác thực qua email (Nodemailer SMTP) và đặt mật khẩu mới.
- Phân quyền người dùng chi tiết (Role-based access control - RBAC) giữa khách hàng (user) và quản trị viên (admin).
Mua sắm phía người dùng (Client-side Shopping):
- Xem danh mục sản phẩm và lọc sản phẩm theo danh mục.
- Tìm kiếm sản phẩm theo từ khóa, sắp xếp theo giá cả, ngày đăng, tên sản phẩm.
- Xem thông tin chi tiết sản phẩm, lựa chọn các biến thể kích thước (size), màu sắc và tự động hiển thị giá phụ trội tương ứng.
- Quản lý giỏ hàng: thêm sản phẩm, cập nhật số lượng, tự động lấy biến thể đầu tiên làm mặc định nếu thiếu thông tin, xóa sản phẩm khỏi giỏ.
- Áp dụng mã giảm giá Coupon trực tiếp vào đơn hàng.
- Đặt hàng và thanh toán: hỗ trợ thanh toán COD (thanh toán khi nhận hàng) hoặc VNPay (thanh toán online qua ví điện tử/ngân hàng).
- Tích hợp API tỉnh/thành để chọn địa chỉ nhận hàng chính xác (Tỉnh/Thành phố, Quận/Huyện, Phường/Xã).
- Theo dõi trạng thái đơn hàng cá nhân trực tiếp.
- Xem danh sách bài viết/blog và xem bài viết chi tiết để cập nhật tin tức thời trang.
- Gửi yêu cầu hỗ trợ/liên hệ tới Admin qua form chuyên biệt.
- Trải nghiệm tư vấn mua sắm với Chatbot AI tích hợp công nghệ Gemini của Google, tự động phân tích câu hỏi của khách hàng để gợi ý sản phẩm phù hợp thực tế.
Hệ thống quản trị (Admin Dashboard & Management):
- Trang tổng quan (Dashboard) trực quan: hiển thị các biểu đồ doanh thu theo ngày/tháng, tỷ lệ trạng thái đơn hàng, tỷ lệ phương thức thanh toán, thống kê top sản phẩm bán chạy.
- Xuất báo cáo doanh thu ra file CSV theo khoảng thời gian mong muốn.
- Quản lý danh mục (Categories): tạo mới, cập nhật, xóa danh mục sản phẩm.
- Quản lý sản phẩm (Products): CRUD sản phẩm, tối ưu dung lượng ảnh tải lên bằng thư viện Sharp trên Server.
- Quản lý biến thể sản phẩm (Product Variants): quản trị SKU, màu sắc, size, số lượng tồn kho và giá phụ trội của từng biến thể.
- Quản lý đơn hàng (Orders): duyệt đơn, chuyển đổi trạng thái giao hàng, kiểm tra trạng thái thanh toán.
- Quản lý mã giảm giá (Coupons): thiết lập giá trị giảm (theo phần trăm hoặc số tiền cố định), điều kiện đơn hàng tối thiểu, giới hạn sử dụng, thời hạn áp dụng.
- Quản lý chiến dịch Flash Sale: tạo và cập nhật các chương trình khuyến mãi theo mốc thời gian.
- Quản lý bài viết blog (Posts): soạn thảo bài viết với trình soạn thảo rich text (React Quill), chỉnh sửa trạng thái xuất bản (Draft/Published) và đăng tải hình ảnh đại diện.
- Quản lý Banner: đăng tải và thiết lập banner quảng cáo trên trang chủ.
- Quản lý yêu cầu hỗ trợ (Support Requests): tiếp nhận thông tin liên hệ và phản hồi cho khách hàng.

CÔNG NGHỆ SỬ DỤNG

Frontend: React 18, Vite 5, Tailwind CSS 3, React Router DOM 6, Axios, Recharts (vẽ biểu đồ), React Quill (soạn thảo văn bản), React Icons.
Backend: Node.js, Express 4, Sequelize 6 (ORM), MySQL2, jsonwebtoken (JWT), bcryptjs (mã hóa mật khẩu), sharp (xử lý và tối ưu ảnh), nodemailer (gửi email OTP), sanitize-html (bảo mật tránh tấn công XSS).
Database: MySQL.
Cloud/AI: Google Generative AI (Gemini 2.5 Flash, Gemini 2.0 Flash) tích hợp làm Chatbot tư vấn thời trang thông minh.
Thư viện/Công cụ khác: Dotenv, Cors, Nodemon, Docker & Docker Compose.

Đồ án website bán quần áo thời trang tích hợp Chatbot AI và thanh toán VNPay