Giới thiệu dự án

Dự án Hfood là một hệ thống quản lý và đặt đồ ăn trực tuyến toàn diện được thiết kế theo mô hình kiến trúc Client-Server hiện đại. Dự án phân tách rõ ràng vai trò của Frontend phát triển bằng ReactJS kết hợp Tailwind CSS và Backend xây dựng trên nền tảng Spring Boot. Hệ thống cung cấp cho khách hàng một trải nghiệm mua sắm vô cùng mượt mà và trực quan, từ các khâu duyệt thực đơn phong phú, chọn các biến thể món ăn phù hợp, áp dụng mã giảm giá linh hoạt cho đến việc tiến hành thanh toán trực tuyến và thực hiện đánh giá chất lượng món ăn sau khi nhận hàng. Đây là một tài liệu tham khảo và đồ án mẫu vô cùng lý tưởng cho các bạn sinh viên chuyên ngành Công nghệ thông tin muốn tiếp cận sâu hơn với quy trình phát triển sản phẩm thực tế.

Bài toán thực tế

Trong kỷ nguyên số hóa dịch vụ ăn uống hiện nay, việc xây dựng một hệ thống đặt món trực tuyến không chỉ giúp các cửa hàng tiếp cận khách hàng tốt hơn mà còn tối ưu hóa quy trình vận hành nội bộ. Các chủ cửa hàng thường đối mặt với khó khăn trong việc quản lý thực đơn có nhiều biến thể như kích cỡ và các mức giá khác nhau, cũng như xử lý các phương thức thanh toán không dùng tiền mặt một cách nhanh chóng. Dự án Hfood ra đời nhằm giải quyết triệt để bài toán này. Hệ thống cung cấp giao diện đặt hàng thân thiện, tinh gọn cho khách hàng và đồng thời tích hợp một phân hệ quản trị mạnh mẽ giúp chủ cửa hàng dễ dàng theo dõi trạng thái đơn hàng, kiểm soát doanh thu và tối ưu hóa các chiến dịch khuyến mãi.

Công nghệ sử dụng

Hệ thống được xây dựng trên nền tảng của những công nghệ lập trình phổ biến và được ưa chuộng nhất trong các doanh nghiệp hiện nay. Ở phía máy khách (Frontend), ReactJS được lựa chọn cùng với Vite để tối ưu hóa hiệu năng biên dịch, kết hợp cùng Tailwind CSS giúp tạo nên giao diện Glassmorphism thời thượng và tinh tế. Phía máy chủ (Backend), ứng dụng sử dụng Java Spring Boot v3, kết hợp với Spring Security và JWT (JSON Web Token) nhằm thiết lập cơ chế bảo mật xác thực chặt chẽ cho người dùng. Dữ liệu của hệ thống được quản trị thông qua MySQL Database Server kết hợp với Spring Data JPA để tự động hóa các thao tác truy xuất dữ liệu. Ngoài ra, JavaMail Sender được tích hợp nhằm hỗ trợ gửi mã OTP xác thực đổi mật khẩu trực tiếp qua hòm thư điện tử.

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

Điểm nhấn đáng chú ý nhất của Hfood chính là việc tích hợp hoàn chỉnh và đồng bộ cổng thanh toán trực tuyến VNPay Sandbox. Khách hàng có thể trải nghiệm toàn bộ quy trình thanh toán không tiền mặt từ việc chuyển hướng sang giao diện ngân hàng giả lập NCB, thực hiện giao dịch và nhận kết quả đối soát tự động khi quay lại website. Bên cạnh đó, tính năng đánh giá và xếp hạng món ăn được tích hợp ràng buộc nghiệp vụ vô cùng chặt chẽ: chỉ những khách hàng đã thực sự mua món ăn đó và đơn hàng đã chuyển sang trạng thái hoàn thành thành công mới được quyền để lại nhận xét. Trang Dashboard dành cho Admin cũng là một điểm sáng với các biểu đồ cột và biểu đồ tròn biểu diễn biến động doanh thu 7 ngày qua cũng như tỷ lệ các phương thức thanh toán.

Giá trị học tập

Dự án Hfood mang lại những kiến thức thực tế cực kỳ quý giá cho sinh viên ngành Công nghệ thông tin. Qua dự án này, người học sẽ nắm vững cách thức thiết kế và xây dựng RESTful API chuẩn chỉ, cách triển khai bảo mật dựa trên Token JWT trong Spring Boot, cách cấu hình phân quyền người dùng cũng như quy trình làm việc với cơ sở dữ liệu MySQL thông qua ORM Hibernate. Sinh viên cũng sẽ làm quen với việc kết nối Frontend ReactJS với các API bằng Axios Interceptor, cách quản lý state phức tạp của giỏ hàng và tích hợp dịch vụ của bên thứ ba như gửi email SMTP hay cổng thanh toán trực tuyến.

Khả năng mở rộng

Cấu trúc mã nguồn của Hfood được tổ chức phân lớp rõ ràng (Controller, Service, Repository, DTO, Entity) giúp hệ thống sở hữu khả năng bảo trì và nâng cấp mở rộng vô cùng linh hoạt. Trong tương lai, dự án hoàn toàn có thể phát triển thêm tính năng định vị thời gian thực của shipper, tích hợp thêm nhiều cổng thanh toán điện tử phổ biến khác như Momo, ShopeePay hay Zalopay. Ngoài ra, việc áp dụng công nghệ gợi ý món ăn tự động dựa trên thói quen đặt hàng của người dùng hay nâng cấp hệ thống lên mô hình kiến trúc Microservices khi lưu lượng truy cập gia tăng đột biến cũng là những hướng đi rất khả thi.

ĐIỂM NỔI BẬT

Giao diện Glassmorphism hiện đại và responsive toàn diện trên các thiết bị.
Kiến trúc Client-Server tách biệt giúp tối ưu hóa hiệu năng và bảo mật.
Tích hợp cổng thanh toán trực tuyến VNPay Sandbox thực tế.
Hệ thống phân quyền chi tiết cho Admin và Customer thông qua JWT.
Dashboard quản trị tích hợp biểu đồ thống kê doanh thu và phương thức thanh toán.
Tính năng đánh giá sản phẩm có ràng buộc mua hàng nghiêm ngặt.
Cơ chế gửi mã xác thực OTP khôi phục mật khẩu qua Email thật.
Quản lý sản phẩm linh hoạt với các thuộc tính biến thể và kích cỡ.

CHỨC NĂNG CHÍNH

Đăng ký, đăng nhập tài khoản và phân quyền người dùng với JWT.
Cập nhật thông tin cá nhân, thay đổi mật khẩu và khôi phục mật khẩu qua Email.
Xem danh sách món ăn, lọc theo danh mục, tìm kiếm theo tên và hiển thị món phổ biến.
Xem chi tiết món ăn với nhiều hình ảnh, lựa chọn kích cỡ/biến thể và xem món ăn gợi ý liên quan.
Thêm món ăn vào danh sách yêu thích và quản lý danh sách yêu thích cá nhân.
Quản lý giỏ hàng trực quan: thêm, bớt số lượng, tự động tính tổng tiền.
Áp dụng mã giảm giá voucher với điều kiện đơn hàng tối thiểu.
Đặt hàng và lựa chọn phương thức thanh toán COD hoặc VNPay.
Xem lịch sử đơn hàng, theo dõi trạng thái đơn hàng và hủy đơn hàng khi ở trạng thái chờ duyệt.
Đánh giá chất lượng món ăn (1-5 sao kèm bình luận) sau khi đơn hàng hoàn thành.
Gửi tin nhắn liên hệ hỗ trợ trực tiếp từ giao diện khách hàng.
Admin: Quản lý danh sách đơn hàng và cập nhật trạng thái đơn hàng.
Admin: Thống kê doanh thu, số lượng đơn hàng, khách hàng, sản phẩm và hiển thị biểu đồ phân tích.
Admin: Quản lý món ăn (CRUD), tải ảnh thông qua chuỗi liên kết và cấu hình biến thể giá.
Admin: Quản lý mã giảm giá voucher (CRUD) kèm hạn mức và thời gian hiệu lực.
Admin: Quản lý người dùng (CRUD) tích hợp cơ chế cascade tự động làm sạch dữ liệu liên quan để tránh lỗi khóa ngoại.

Website Đặt Đồ Ăn Trực Tuyến (Spring Boot + ReactJS)