MÔ TẢ CHI TIẾT

Giới thiệu dự án

Dự án FlowerAIShop là giải pháp thương mại điện tử hoàn chỉnh dành cho cửa hàng bán hoa tươi trực tuyến. Được xây dựng trên nền tảng công nghệ hiện đại ReactJS cho giao diện người dùng và Spring Boot cho hệ thống dịch vụ backend, hệ thống mang đến trải nghiệm mua sắm mượt mà, trực quan. Điểm đặc biệt của dự án là việc tích hợp trợ lý trí tuệ nhân tạo FlowerAI Assistant kết nối trực tiếp với danh mục sản phẩm của cửa hàng để đưa ra những lời khuyên mua sắm chính xác, phù hợp nhất với nhu cầu khách hàng. Bên cạnh đó, hệ thống quản trị admin cung cấp các công cụ báo cáo doanh thu dưới dạng biểu đồ động có tính tương tác cao giúp tối ưu hóa quy trình vận hành.

Bài toán thực tế

Trong mô hình kinh doanh hoa tươi truyền thống, khách hàng thường gặp khó khăn khi lựa chọn mẫu hoa phù hợp với các dịp tặng khác nhau như sinh nhật, khai trương, ngày lễ tình nhân nếu không có nhân viên tư vấn túc trực. Đồng thời, chủ doanh nghiệp cần các số liệu báo cáo doanh thu rõ ràng theo mốc thời gian để đưa ra các kế hoạch nhập hàng và tiếp thị hiệu quả. FlowerAIShop giải quyết các vấn đề này bằng cách tự động hóa khâu tư vấn khách hàng qua chatbot thông minh hoạt động liên tục, đồng thời cung cấp công cụ phân tích doanh số và quản lý đơn hàng chuyên nghiệp cho quản trị viên.

Công nghệ sử dụng

Hệ thống sử dụng các công nghệ hiện đại đảm bảo tính ổn định và bảo mật cao. Backend được phát triển bằng Spring Boot Framework kết hợp Spring Security và JSON Web Token (JWT) để xác thực và phân quyền người dùng. Dữ liệu được quản lý thông qua cơ sở dữ liệu MySQL thông qua lớp giao tiếp Spring Data JPA giúp thao tác dữ liệu an toàn, tin cậy. Trợ lý tư vấn sử dụng API Google Gemini kết nối thông minh với kho dữ liệu thực tế của hệ thống. Frontend được triển khai bằng thư viện ReactJS kết hợp TypeScript và Vite để tối ưu hóa hiệu năng tải trang và trải nghiệm người dùng. Giao diện được thiết kế hiện đại, responsive hoàn toàn trên đa thiết bị từ máy tính để bàn đến điện thoại di động.

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

Điểm nhấn của dự án nằm ở sự tích hợp đồng bộ giữa chatbot AI và luồng xử lý đơn hàng. Chatbot tự động phân tích câu hỏi của khách hàng, trích xuất dữ liệu sản phẩm tương thích và hiển thị trực tiếp dưới dạng các thẻ sản phẩm nằm ngang đẹp mắt có đính kèm giá bán, hình ảnh và liên kết mua hàng nhanh. Đối với luồng đặt hàng, hệ thống hỗ trợ cả thanh toán trực tuyến qua cổng Sandbox VNPAY lẫn hình thức thanh toán khi nhận hàng (COD). Trang quản trị admin sở hữu biểu đồ doanh thu tương tác cao cho phép nhấn trực tiếp vào từng cột ngày để truy cập danh sách đơn hàng chi tiết, thực hiện tìm kiếm, sắp xếp đa tiêu chí và cập nhật trạng thái đơn hàng tức thì.

Giá trị học tập

Dự án là tài liệu tham khảo chất lượng cao cho sinh viên ngành Công nghệ thông tin làm đồ án tốt nghiệp hoặc bài tập lớn. Sinh viên sẽ học được cách thiết kế và xây dựng hệ thống kiến trúc Client-Server tách biệt, phương pháp triển khai xác thực người dùng an toàn bằng JWT. Đồng thời, dự án hướng dẫn cách tích hợp dịch vụ bên thứ ba bao gồm cổng thanh toán trực tuyến VNPAY và mô hình ngôn ngữ lớn Google Gemini API. Bên cạnh đó, sinh viên có cơ hội học hỏi kỹ thuật tối ưu hóa hiệu năng render trong ReactJS, kỹ thuật tương tác biểu đồ động, xây dựng các thành phần giao diện tái sử dụng và thiết kế cơ sở dữ liệu chuẩn hóa cho luồng đặt hàng thương mại điện tử thực tế.

Khả năng mở rộng

Hệ thống có cấu trúc mã nguồn mô-đun hóa rõ ràng, tạo điều kiện thuận lợi để mở rộng các tính năng nâng cao trong tương lai. Lập trình viên có thể tích hợp thêm các phương thức thanh toán ví điện tử khác như MoMo, ShopeePay hoặc phát triển thêm hệ thống gợi ý sản phẩm tự động dựa trên lịch sử mua sắm của người dùng. Ngoài ra, khả năng mở rộng chatbot AI để hỗ trợ nhiều ngôn ngữ hoặc tích hợp thêm tính năng xử lý cuộc gọi tự động cũng hoàn toàn khả thi. Việc xây dựng thêm ứng dụng di động cho cả khách hàng và quản lý cửa hàng dựa trên hệ thống API RESTful có sẵn cũng rất dễ dàng.

ĐIỂM NỔI BẬT

Trợ lý ảo FlowerAI tự động quét cơ sở dữ liệu để đưa ra tư vấn phù hợp
Trình render Markdown sang JSX loại bỏ hoàn toàn các ký tự thô của chatbot
Thẻ sản phẩm gợi ý hiển thị trực quan dưới câu trả lời của chatbot
Biểu đồ doanh thu tương tác cho phép click vào cột ngày để xem danh sách đơn
Hỗ trợ hai phương thức thanh toán trực quan gồm cổng VNPAY và COD
Trang quản trị đầy đủ các tính năng tìm kiếm, phân trang và sắp xếp đơn hàng
Bộ lọc trạng thái đơn hàng tích hợp tính năng đồng bộ và cập nhật biểu đồ tức thì
Thiết kế responsive tương thích hoàn toàn với các thiết bị di động và máy tính

CHỨC NĂNG CHÍNH

Đăng ký, đăng nhập tài khoản người dùng và quản trị viên bảo mật bằng JWT
Duyệt danh mục sản phẩm, tìm kiếm hoa theo từ khóa và phân trang hiển thị
Xem chi tiết sản phẩm hoa kèm hình ảnh, giá bán và mô tả chi tiết
Đặt hàng trực tuyến, nhập thông tin người nhận, số điện thoại, địa chỉ và lời nhắn thiệp
Lựa chọn phương thức thanh toán trực tiếp qua VNPAY hoặc thanh toán tiền mặt COD
Xem lịch sử đơn hàng cá nhân cùng chi tiết từng sản phẩm và phương thức thanh toán đã chọn
Trò chuyện tư vấn tìm hoa cùng AI Assistant tích hợp gợi ý nhanh
Bảng điều khiển quản trị hiển thị biểu đồ doanh số lọc theo thời gian ngày, tháng, năm
Xem danh sách đơn hàng theo ngày click từ biểu đồ với tính năng tìm kiếm, sắp xếp và phân trang
Cập nhật trạng thái đơn hàng trực tiếp từ bảng quản trị làm thay đổi biểu đồ doanh thu theo thời gian thực
Quản lý sản phẩm hoa tươi và danh mục hoa thông qua các API nghiệp vụ CRUD đầy đủ

CÔNG NGHỆ SỬ DỤNG

Frontend

ReactJS 19
TypeScript
Vite
Chart.js / React-ChartJS-2
React Router DOM

Backend

Spring Boot 3
Spring Security (JWT)
Hibernate / JPA
Google Gemini API Client
SDK thanh toán VNPAY

Database

MySQL 8

Thư viện

Spring Data JPA
Lombok
BCrypt

Công cụ

Maven
Postman
npm

Website bán hoa tích hợp chatbot tư vấn thông minh