Website Quản Lý Phòng Trọ Tích Hợp AI Tư Vấn Và Cổng Thanh Toán VNPay

MÔ TẢ CHI TIẾT

Giới thiệu dự án

Dự án Website Quản Lý Và Cho Thuê Phòng Trọ là một hệ thống ứng dụng web hoàn chỉnh (Full Stack) được xây dựng phục vụ nhu cầu kết nối giữa người có phòng trọ cho thuê (chủ trọ) và người có nhu cầu thuê phòng (khách thuê), đồng thời hỗ trợ quản trị viên vận hành nền tảng một cách hiệu quả. Dự án được triển khai bằng kiến trúc hiện đại, tách biệt rõ ràng giữa ứng dụng phía máy khách (Frontend ReactJS phát triển bằng Vite) và ứng dụng phía máy chủ (Backend Node.js sử dụng framework Express). Cơ sở dữ liệu MySQL được thiết kế chặt chẽ giúp lưu trữ thông tin phòng trọ, người dùng, bài đăng tin tức, lịch sử thanh toán hóa đơn. Điểm nổi bật về mặt công nghệ của dự án là việc tích hợp cổng thanh toán trực tuyến VNPay để thanh toán gói tin đăng và tích hợp mô hình ngôn ngữ lớn thông qua Gemini AI API để hỗ trợ tư vấn tự động cho khách thuê ngay trên giao diện chat trực tuyến.

Bài toán thực tế

Trong thực tế, việc tìm kiếm phòng trọ của sinh viên và người lao động gặp nhiều khó khăn do thông tin không đồng nhất, thiếu tính xác thực hoặc khó tìm kiếm theo các tiêu chí cụ thể như diện tích, khoảng cách địa lý hay các dịch vụ đi kèm. Về phía các chủ trọ, việc tiếp cận khách thuê mục tiêu cũng đòi hỏi nhiều chi phí quảng cáo nhưng hiệu quả mang lại không cao. Hệ thống được xây dựng nhằm giải quyết triệt để vấn đề này bằng cách cung cấp bộ lọc thông tin phòng trọ chi tiết và bản đồ vị trí trực quan. Đồng thời, dự án áp dụng mô hình thu phí chủ trọ thông qua việc mua các gói giới hạn lượt đăng tin và kiểm duyệt nội dung nghiêm ngặt từ đội ngũ quản trị viên trước khi hiển thị công khai, giúp hạn chế tối đa tin đăng ảo, tin đăng sai sự thật. Hệ thống thanh toán hóa đơn tự động và chatbot hỗ trợ tìm kiếm phòng thông minh giúp nâng cao trải nghiệm người dùng và tối ưu hóa thời gian giao dịch.

Công nghệ sử dụng

Dự án ứng dụng các công nghệ hiện đại và phổ biến trong phát triển web hiện nay:

• Frontend: Framework ReactJS kết hợp với công cụ xây dựng Vite mang lại hiệu năng tải trang nhanh chóng. Sử dụng thư viện React Router DOM để quản lý định tuyến trang, Axios để tương tác bất đồng bộ với API backend. Thiết kế giao diện áp dụng Tailwind CSS phiên bản 4 mới giúp giao diện tối giản, trực quan, hỗ trợ hiển thị tốt trên đa thiết bị (Responsive). Thư viện Recharts được sử dụng để trực quan hóa dữ liệu báo cáo dạng biểu đồ tròn và biểu đồ cột trên trang quản trị. Trình biên tập nội dung phong phú React Quill hỗ trợ soạn thảo bài viết chuẩn HTML.

• Backend: Nền tảng Node.js kết hợp framework Express cung cấp cấu trúc định tuyến API RESTful rõ ràng, xử lý yêu cầu nhanh và dễ bảo trì. Thư viện JsonWebToken (JWT) kết hợp cơ chế lưu trữ token an toàn hỗ trợ bảo mật hệ thống. Dữ liệu được xác thực đầu vào thông qua thư viện Zod. Dịch vụ gửi email thông báo mã OTP đặt lại mật khẩu sử dụng Nodemailer.

• Cơ sở dữ liệu: MySQL đóng vai trò lưu trữ dữ liệu có cấu trúc. Kết nối cơ sở dữ liệu được quản lý hiệu quả qua thư viện mysql2 với cơ chế Connection Pool nhằm tối ưu hóa hiệu suất và tránh nghẽn kết nối khi lượng truy cập tăng cao.

• Cổng thanh toán & Trí tuệ nhân tạo: Tích hợp module VNPay để tạo liên kết thanh toán an toàn và xử lý phản hồi giao dịch trực tuyến từ ngân hàng. Tích hợp thư viện @google/generative-ai để triển khai trợ lý chatbot AI sử dụng mô hình Gemini, được huấn luyện để chỉ khai thác và phản hồi dựa trên nguồn dữ liệu phòng trọ có sẵn trong cơ sở dữ liệu.

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

Hệ thống sở hữu các chức năng hoàn thiện và thực tế:

• Xác thực và phân quyền đa luồng: Phân tách rõ ràng ba giao diện người dùng tương ứng với ba vai trò: Khách thuê (Tenant), Chủ trọ (Landlord) và Quản trị viên (Admin). Hỗ trợ đăng ký, đăng nhập bảo mật và khôi phục mật khẩu thông qua mã OTP gửi tới email người dùng.

• Bộ lọc phòng trọ chuyên sâu: Cho phép lọc nhanh phòng trọ theo khoảng giá thuê, khoảng diện tích phòng, loại hình cư trú (phòng trọ, chung cư mini, nhà nguyên căn, ký túc xá), chính sách giới tính và danh sách checkbox tiện ích cụ thể.

• Nhúng bản đồ Google Maps: Chủ trọ có thể cung cấp đoạn mã iframe Google Maps để tích hợp trực tiếp bản đồ định vị phòng trọ vào trang chi tiết, giúp khách thuê dễ dàng định vị vị trí thực tế của phòng trọ.

• Hệ thống thanh toán mua gói tin đăng: Chủ trọ thực hiện giao dịch mua gói tin (Pro, Premium) thông qua cổng thanh toán VNPay Sandbox. Hệ thống ghi nhận lịch sử giao dịch chi tiết và tự động cập nhật hạn ngạch đăng tin của chủ trọ sau khi giao dịch thành công.

• Quản lý mã giảm giá ưu đãi: Quản trị viên dễ dàng tạo các mã giảm giá áp dụng theo phần trăm hoặc số tiền cố định để thúc đẩy nhu cầu mua gói của chủ trọ.

• Trợ lý AI tư vấn tìm phòng: Chatbot thông minh tự động đọc hiểu nhu cầu tìm kiếm của người dùng, truy vấn cơ sở dữ liệu phòng trọ và đưa ra đề xuất kèm thẻ phòng trực quan để người dùng có thể nhấp chọn xem chi tiết ngay tức thì.

• Quản trị nội dung bài viết và phê duyệt tin đăng: Admin quản lý các chuyên mục blog chia sẻ kiến thức, viết bài mới bằng editor chuyên nghiệp và thực hiện duyệt bài đăng phòng trọ mới của chủ trọ (cho phép chấp nhận hoặc từ chối kèm lý do phản hồi).

Giá trị học tập

Dự án mang lại giá trị học tập lớn đối với sinh viên ngành Công nghệ thông tin:

• Làm chủ quy trình phát triển Full Stack: Nắm rõ cách kết nối và đồng bộ luồng dữ liệu từ Frontend React đến Backend Node.js và lưu trữ xuống MySQL Database.

• Thiết kế cơ sở dữ liệu thực tế: Hiểu cách xây dựng cấu trúc DB chuẩn hóa, cách ràng buộc khóa ngoại, lập chỉ mục tối ưu hóa câu lệnh tìm kiếm nâng cao (như tìm kiếm theo tọa độ, tiện ích dạng dữ liệu JSON).

• Thực hành tích hợp dịch vụ bên thứ ba: Học hỏi cách làm việc với cổng thanh toán VNPay (quy trình băm mã bảo mật checksum, xử lý URL redirect và IPN) và dịch vụ gửi mail qua SMTP Server bằng Nodemailer.

• Tích hợp trí tuệ nhân tạo (GenAI): Tiếp cận phương pháp thiết kế prompt hệ thống, định hình dữ liệu đầu ra dưới dạng cấu trúc JSON để đồng bộ hóa chatbot AI với các component giao diện React.

• Nâng cao tư duy xây dựng kiến trúc: Làm quen với cách phân chia thư mục dự án theo cấu trúc mô hình MVC, viết mã nguồn sạch (Clean Code), viết API tài liệu và cách triển khai các Route Guard bảo mật phía Client.

Khả năng mở rộng

Dự án được thiết kế với cấu trúc module linh hoạt, tạo điều kiện thuận lợi cho việc nâng cấp các tính năng nâng cao:

• Tích hợp Chat Realtime: Phát triển thêm phòng chat trực tiếp bằng Socket.io giữa chủ trọ và khách thuê để trao đổi thông tin nhanh chóng.

• Quản lý hóa đơn dịch vụ hàng tháng: Xây dựng phân hệ quản lý số điện, số nước tiêu thụ của từng phòng trọ theo tháng, tự động tạo hóa đơn và tích hợp nút thanh toán hóa đơn trực tuyến cho người đang thuê.

• Phát triển ứng dụng di động: Xây dựng ứng dụng di động cho hệ điều hành iOS và Android sử dụng nền tảng React Native dựa trên hệ thống RESTful API hiện có của backend.

• Đề xuất phòng trọ bằng Machine Learning: Nâng cấp thuật toán đề xuất phòng trọ dựa trên hành vi tìm kiếm và lịch sử xem phòng trước đó của khách thuê để tối ưu hóa trải nghiệm cá nhân hóa.

ĐIỂM NỔI BẬT

• Giao diện Responsive hiển thị tối ưu trên các thiết bị máy tính và điện thoại di động

• Hệ thống phân quyền rõ ràng cho ba nhóm đối tượng gồm người thuê, chủ trọ và quản trị viên

• Tích hợp cổng thanh toán trực tuyến VNPay xử lý giao dịch mua gói tin cước nhanh chóng

• Trợ lý ảo AI sử dụng mô hình Gemini hỗ trợ tư vấn tìm phòng dựa trên dữ liệu thời gian thực

• Bản đồ Google Maps nhúng trực tiếp giúp định vị vị trí phòng trọ trực quan

• Công cụ quản lý mã giảm giá linh hoạt cho các chiến dịch marketing dịch vụ

• Thống kê báo cáo doanh thu và tương tác bằng biểu đồ trực quan trong trang quản trị

• Tìm kiếm và lọc phòng nâng cao theo nhiều tiêu chí vị trí, giá cả, diện tích và tiện ích đi kèm

CHỨC NĂNG CHÍNH

• Phân hệ Người dùng & Xác thực:

  • Đăng ký tài khoản và phân loại vai trò ngay từ đầu (Chủ trọ hoặc Người thuê).

  • Đăng nhập bảo mật sử dụng cơ chế JSON Web Token (JWT) lưu trữ ở Client.

  • Khôi phục mật khẩu tài khoản qua mã xác thực OTP gửi trực tiếp đến hòm thư điện tử cá nhân.

  • Thay đổi mật khẩu tài khoản và quản lý thông tin hồ sơ (Cập nhật họ tên, số điện thoại, địa chỉ, ảnh đại diện dạng ảnh tải lên trực tiếp).

• Phân hệ Cho thuê & Tìm kiếm Phòng trọ (Dành cho Người thuê):

  • Xem danh sách tin đăng phòng trọ hiển thị công khai dạng lưới thẻ phòng sinh động.

  • Tìm kiếm phòng trọ theo từ khóa trong tiêu đề và mô tả.

  • Bộ lọc tìm kiếm đa năng: Lọc chi tiết theo tỉnh/thành, quận/huyện, phường/xã (sử dụng danh sách địa giới hành chính đồng bộ), lọc theo khoảng giá thuê mong muốn, lọc theo diện tích sử dụng, đối tượng giới tính được thuê, và các tiện ích cụ thể (điều hòa, nóng lạnh, máy giặt, ban công...).

  • Trang chi tiết phòng trọ: Xem slide ảnh phòng chất lượng cao, giá thuê, tiền đặt cọc, thông tin liên lạc của chủ trọ, mô tả chi tiết, tiện ích nổi bật và bản đồ Google Maps vệ tinh.

  • Tính năng Bookmark: Lưu các bài đăng phòng trọ yêu thích vào danh sách riêng để dễ dàng theo dõi lại.

• Phân hệ Quản lý Tin đăng & Thanh toán (Dành cho Chủ trọ):

  • Giao diện thêm tin đăng phòng trọ mới với form nhập liệu đầy đủ: chọn địa chỉ theo cấp bậc hành chính, giá thuê, tiền cọc, sức chứa tối đa, chọn chính sách giới tính, đánh dấu các tiện ích có sẵn, dán mã bản đồ Google Maps và upload nhiều ảnh chụp phòng trọ.

  • Chỉnh sửa thông tin tin đăng phòng trọ hiện có.

  • Quản lý trạng thái bài đăng (Trạng thái Nháp, Chờ Admin duyệt, Đã duyệt hiển thị công khai, Bị từ chối kèm lý do chỉnh sửa từ Admin).

  • Mua gói dịch vụ gia hạn đăng tin (hạn ngạch số bài viết được phép xuất bản trong tháng) thông qua tích hợp cổng thanh toán Sandbox VNPay.

  • Áp dụng coupon mã giảm giá vào hóa đơn thanh toán để được khấu trừ chi phí trực tiếp trước khi thanh toán qua ngân hàng.

• Trợ lý ảo Tư vấn (Tích hợp AI):

  • Khung chat trò chuyện trực quan kết nối trực tiếp với API Gemini AI.

  • Trợ lý AI có khả năng phân tích câu hỏi tiếng Việt của người dùng, đối chiếu với cơ sở dữ liệu phòng trọ thực tế hiện có trong database để trả về câu trả lời chuẩn xác.

  • Hiển thị danh sách thẻ phòng đề xuất ngay dưới tin nhắn chat giúp người dùng bấm xem chi tiết phòng được giới thiệu một cách nhanh chóng.

• Phân hệ Tin tức & Bài viết (Blog):

  • Xem danh sách bài viết chia sẻ kinh nghiệm thuê phòng, tránh lừa đảo, mẹo trang trí không gian sống.

  • Đọc nội dung chi tiết bài viết, lưu trữ bài viết hữu ích.

• Phân hệ Quản trị Hệ thống (Dành cho Admin):

  • Bảng điều khiển thống kê (Admin Dashboard): Hiển thị tổng số lượng tài khoản đăng ký, số lượng phòng trọ trên hệ thống, tổng bài đăng tin tức và biểu đồ doanh thu thanh toán tích lũy theo tháng.

  • Phê duyệt tin đăng phòng trọ: Danh sách các tin đăng đang chờ duyệt. Admin có thể xem chi tiết thông tin, bấm Duyệt để xuất bản công khai hoặc Từ chối và nhập lý do phản hồi cho chủ trọ sửa đổi.

  • Quản lý bài viết (Blog): Viết bài đăng mới với công cụ soạn thảo định dạng phong phú Rich Text Editor, chỉnh sửa hoặc xóa bài viết.

  • Quản lý danh mục bài viết: Thêm, sửa, xóa các chuyên mục bài viết.

  • Quản lý gói cước đăng tin: Định nghĩa các gói dịch vụ (Tên gói, giá tiền, số lượng bài đăng tối đa).

  • Quản lý mã giảm giá: Tạo mới mã coupon (thiết lập mã, giá trị giảm giá, loại giảm theo % hoặc VND, số lần sử dụng tối đa, hạn dùng) để quản lý chiến dịch ưu đãi.

CÔNG NGHỆ SỬ DỤNG

Frontend: ReactJS, Vite, Tailwind CSS, React Router DOM, Axios, Recharts, React Quill, React Icons, React Toastify, DOMPurify.

Backend: Node.js, Express, Nodemon, Morgan.

Database: MySQL, mysql2 (Connection Pool).

Cloud: Không sử dụng.

Thư viện: @google/generative-ai, vnpay, bcryptjs, jsonwebtoken, nodemailer, zod, slugify.

Công cụ: Git, VS Code, MySQL Workbench / phpMyAdmin.