Bối cảnh và vấn đề nghiên cứu

  • Lý do chọn đề tài, bối cảnh thực tiễn
    Trong bối cảnh đô thị hoá nhanh chóng và dân số tăng cao tại các thành phố lớn, nhu cầu tìm kiếm phòng trọ của sinh viên, người lao động di cư và các cá nhân khác trở nên cấp thiết. Các phương pháp tìm kiếm truyền thống đòi hỏi người thuê phải tự di chuyển, mất thời gian và thiếu thông tin chi tiết, gây bất tiện và rủi ro. Đặc biệt, việc thiếu một nền tảng trực tuyến minh bạch, cung cấp hình ảnh, đánh giá và cho phép giao tiếp trực tiếp giữa người thuê và chủ trọ khiến việc lựa chọn phòng trọ khó khăn. Vì vậy, việc xây dựng website tìm kiếm phòng trọ được xem là giải pháp số hoá, giúp người thuê nhanh chóng tiếp cận thông tin, so sánh và liên hệ với chủ trọ.

  • Mục tiêu và câu hỏi/nhiệm vụ nghiên cứu

    1. Xây dựng nền tảng trực tuyến hiện đại, thuận tiện và minh bạch, kết nối người thuê và chủ trọ.
    2. Cung cấp các chức năng chính: danh sách phòng trọ, tìm kiếm thông minh, hiển thị chi tiết, quản lý tin cho thuê, lưu trữ tìm kiếm/ưa thích, và thông báo.
    3. Đánh giá khả năng đáp ứng các yêu cầu phi chức năng: trải nghiệm người dùng (UX), hiệu năng, tính ổn định, bảo mật và khả năng mở rộng.
  • Đối tượng, phạm vi (không gian, thời gian) nghiên cứu

    • Đối tượng: Người dùng cuối (người thuê, người cho thuê), quản trị viên hệ thống và các nhà phát triển phần mềm.
    • Phạm vi không gian: Hoàn toàn thực hiện trên môi trường web, có thể truy cập từ bất kỳ địa điểm nào có kết nối internet.
    • Phạm vi thời gian: Thu thập yêu cầu và thực hiện phát triển từ 14/01/2025 đến 17/06/2025; triển khai và kiểm thử kết thúc vào 01/06/2025.

Cơ sở lý thuyết và phương pháp

  • Khung lý thuyết, khái niệm, mô hình

    • Kiến trúc hệ thống: Kiến trúc front‑end / back‑end tách biệt, giao tiếp qua RESTful API. Front‑end sử dụng ReactJS (với Shadcn UI và Tailwind CSS), back‑end dùng Spring Boot (kèm Spring Data JPA).
    • Công nghệ bảo mật: JSON Web Token (JWT) để xác thực và phân quyền.
    • Giao tiếp thời gian thực: WebSocket cho các tính năng như chat và cập nhật thông báo.
    • Quản lý đa phương tiện: Cloudinary làm dịch vụ lưu trữ, biến đổi và phân phối hình ảnh/video.
  • Phương pháp nghiên cứu thực tế

    • Khảo sát hiện trạng: Phân tích và so sánh bốn website hiện có (Nhatot, Batdongsan, Muaban, Phongtro123) dựa trên bảng đánh giá chức năng và hạn chế.
    • Phân tích‑tổng hợp: Tổng hợp yêu cầu chức năng và phi chức năng từ khảo sát, tài liệu đề tài và các chuẩn công nghệ.
    • Thiết kế hệ thống: Sử dụng mô hình use case (hình 15) và class diagram (hình 29) để mô tả các tác nhân và quan hệ dữ liệu.
    • Triển khai: Lập trình front‑end bằng ReactJS, back‑end bằng Spring Boot, cơ sở dữ liệu MySQL.
    • Kiểm thử: Thực hiện kiểm thử chức năng cho cả phân hệ người dùng và quản trị viên (bảng 51, 52), kiểm tra API, giao diện và luồng dữ liệu thời gian thực.
  • Nguồn dữ liệu

    • Tài liệu nghiên cứu: Các giấy tờ, biểu mẫu và bản mô tả yêu cầu trong đề cương.
    • Dữ liệu khảo sát: Bảng đánh giá chức năng, hạn chế của các website hiện có (bảng 1‑4).
    • Cơ sở dữ liệu hệ thống: Các bảng MySQL như User, Post, Post_Image, Favorite_Post, Report_Post, Chat_Group, Chat_Message, SearchInformation, PaymentHistory, Notification, Follower, Room (bảng 22‑35).

Nội dung chính theo từng chương

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

  • Trình bày kiến trúc hệ thống tách biệt front‑end (ReactJS) và back‑end (Spring Boot).
  • Phân tích ưu, nhược điểm của ReactJS (hiệu năng cao, component‑based, cộng đồng lớn) và Spring Boot (cấu hình tự động, mở rộng microservices).
  • Giới thiệu MySQL (mã nguồn mở, hiệu năng đọc‑ghi tốt) và WebSocket (giao thức hai chiều, giảm độ trễ).
  • Đánh giá Cloudinary trong việc quản lý hình ảnh/video (tối ưu tự động, CDN toàn cầu).

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ TIẾP NHẬN YÊU CẦU

  • Khảo sát hiện trạng: So sánh chức năng của Nhatot, Batdongsan, Muaban, Phongtro123 (bảng 1‑4).
    • Ví dụ: Nhatot cung cấp chức năng đăng tin, lọc, nhưng chưa có xác thực tài khoản; Batdongsan thiếu chatbot hỗ trợ; Muaban chưa có báo cáo vi phạm; Phongtro123 chưa có tính năng đánh giá người đăng.
  • Tiếp nhận yêu cầu: Phân loại yêu cầu chức năng cho khách, người thuê, người cho thuê và quản trị viên (bảng 5‑8).
    • Các chức năng gồm: đăng ký, đăng nhập, xem danh sách, chi tiết, lưu ưa thích, lưu tiêu chí tìm kiếm, kích hoạt tài khoản chủ trọ, quản lý tin đăng, báo cáo vi phạm, chat, thống kê, quản lý người dùng.

CHƯƠNG 3: MÔ HÌNH HOÁ YÊU CẦU

  • Lược đồ Use Case (hình 15) chi tiết 20+ trường hợp sử dụng, bao gồm: xem bài viết, tìm kiếm phòng trọ, kích hoạt tài khoản chủ trọ, báo cáo bài viết, lưu ưa thích, lưu tiêu chí tìm kiếm, nhắn tin, mua lượt đăng, duyệt bài viết, duyệt quyền chủ trọ, v.v.
  • Đặc tả Use Case: Mô tả luồng chính, pre‑condition, post‑condition và các luồng thay thế (bảng 9‑14).

CHƯƠNG 4: THIẾT KẾ HỆ THỐNG

  • Lược đồ quan hệ (hình 28) và class diagram (hình 29) mô tả 15 bảng dữ liệu chính.
  • Thiết kế CSDL: Các bảng quan trọng như Post, Post_Image, Favorite_Post, Report_Post, Chat_Group, Chat_Message và User được thiết kế với khóa ngoại liên kết chặt chẽ, hỗ trợ truy vấn nhanh cho các chức năng tìm kiếm và lưu trữ.

CHƯƠNG 5: THIẾT KẾ GIAO DIỆN

  • Giao diện người dùng: Thiết kế bằng Figma, áp dụng Shadcn UI và Tailwind CSS để tạo các màn hình:
    • Trang chủ, trang tìm kiếm, trang chi tiết bài đăng, trang đăng tin, trang chỉnh sửa cá nhân, trang kích hoạt tài khoản, trang quản trị viên, trang chat, trang thanh toán, v.v. (hình 30‑47).
  • Giao diện quản trị: Quản lý bài đăng, báo cáo, người dùng, thống kê doanh thu và quyền chủ trọ.

CHƯƠNG 6: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

  • Triển khai:
    • Cơ sở dữ liệu: MySQL triển khai trên Railway.
    • Back‑end: Spring Boot triển khai trên Render.
    • Front‑end: ReactJS triển khai trên Vercel.
  • Kiểm thử:
    • Kiểm thử chức năng người dùng (bảng 51) và quản trị viên (bảng 52) bao gồm đăng ký, đăng nhập, CRUD bài đăng, lưu ưa thích, gửi báo cáo, quản lý tài khoản.
    • Kiểm thử API, bảo mật JWT, kết nối WebSocket và tích hợp Cloudinary.

Thiết kế và triển khai

  • Kiến trúc tổng thể:

    • Frontend (ReactJS) → API Gateway (REST) → Backend (Spring Boot) → MySQL.
    • WebSocket được gắn vào server Spring Boot để xử lý chat thời gian thực và thông báo.
    • Cloudinary chịu trách nhiệm lưu trữ, chuyển đổi và CDN phục vụ ảnh/video trên giao diện.
  • Công nghệ chi tiết

    Thành phần Công nghệ Mục đích
    Giao diện ReactJS, Shadcn UI, Tailwind CSS Xây dựng UI hiện đại, responsive
    Backend Spring Boot, Spring Data JPA, Spring Security Xây dựng API, quản lý DB, bảo mật
    DB MySQL Lưu trữ dữ liệu người dùng, bài đăng, tin nhắn
    Xác thực JSON Web Token (JWT) Xác thực người dùng, phân quyền
    Real‑time WebSocket Chat và thông báo tức thời
    Media Cloudinary Lưu trữ, tối ưu hình ảnh/video
  • Kiểm thử

    • Unit test cho các service Spring Boot (JUnit, Mockito).
    • Integration test cho API (Postman/Newman).
    • UI test cho React (React Testing Library).
    • Kiểm thử tải nhẹ (Postman) và tải cao (Locust) để đánh giá hiệu năng.

Kết quả và đóng góp

  • Kết quả chính

    • Hoàn thành website tìm kiếm phòng trọ với đầy đủ 9 chức năng chính (đăng tin, tìm kiếm, lọc, chi tiết, lưu ưa thích, lưu tiêu chí, chat, báo cáo, quản trị).
    • Áp dụng JWT cho xác thực, WebSocket cho chat thời gian thực, và Cloudinary cho quản lý đa phương tiện.
    • Đạt được tốc độ phản hồi API trung bình < 200 ms trong môi trường thử nghiệm (kết quả thu thập từ log kiểm thử).
    • Đã triển khai trên các môi trường cloud (Railway, Render, Vercel) và chứng minh khả năng độc lập môi trường.
  • Giải pháp/kiến nghị

    • Đề xuất mở rộng hệ thống tìm kiếm dựa trên AI (gợi ý phòng trọ theo lịch sử người dùng).
    • Tích hợp công cụ xác thực danh tính (OCR nhận dạng CCCD) để giảm rủi ro gian lận.
    • Cải tiến giao diện đa ngôn ngữ cho người dùng quốc tế.
  • Đóng góp so với nghiên cứu trước

    • So với các website đã khảo sát, đề tài cung cấp xác thực tài khoản chủ trọ, chat thời gian thực, quản lý thanh toán và hệ thống báo cáo vi phạm – những tính năng mà các hệ thống hiện có hầu như thiếu.
    • Đề xuất kiến trúc front‑end/back‑end tách biệt với JWT, giúp nâng cao bảo mật và khả năng mở rộng hơn các hệ thống monolithic đã tồn tại.

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế

    • Đánh giá người dùng chỉ dựa trên phản hồi nội bộ và chưa thực hiện thử nghiệm A/B trên người dùng thực tế.
    • Không có phân tích hiệu năng chi tiết dưới tải lớn (hơn 10 000 người dùng đồng thời).
    • Chưa tích hợp cơ chế thanh toán đa nền tảng (ví điện tử, ngân hàng).
  • Hướng nghiên cứu tiếp

    • Thực hiện nghiên cứu người dùng rộng rãi để đo lường trải nghiệm (UX) và tối ưu hoá giao diện.
    • Mở rộng công cụ tìm kiếm AI (machine learning) để gợi ý phòng trọ phù hợp hơn dựa trên lịch sử và sở thích.
    • Nâng cấp hệ thống bảo mật bằng OAuth 2.0 và Multi‑Factor Authentication.
    • Tích hợp hệ thống thanh toán toàn diện (PayPal, VNPay, MoMo).

Giá trị tham khảo

  • Đối tượng:
    • Sinh viên công nghệ thông tin – học phần thiết kế hệ thống, phát triển web full‑stack.
    • Giảng viên và nghiên cứu viên – tham khảo quy trình khảo sát, thiết kế kiến trúc và kiểm thử ứng dụng web.
    • Nhà phát triển phần mềm – phần mã nguồn UI (ReactJS + Shadcn UI) và back‑end (Spring Boot) là mẫu thực tế cho dự án tương tự.
  • Phần đáng tham khảo:
    • Chương 1 & 2: Cơ sở lý thuyết và phân tích các công nghệ hiện đại (ReactJS, Spring Boot, JWT, WebSocket, Cloudinary).
    • Chương 4 & 5: Thiết kế CSDL và giao diện chi tiết, kèm diagram và mẫu Figma.
    • Chương 6: Quy trình triển khai trên môi trường cloud và chiến lược kiểm thử.

Câu hỏi thường gặp

  1. Backend của hệ thống được xây dựng bằng công nghệ nào?
    Backend sử dụng Spring Boot (Java) kết hợp với Spring Data JPA để truy xuất MySQL, và Spring Security với JSON Web Token để thực hiện xác thực và phân quyền.

  2. Làm thế nào để người dùng đăng ký và kích hoạt tài khoản chủ trọ?
    Người dùng tải lên ảnh CCCD (mặt trước và mặt sau) qua giao diện, hệ thống kiểm tra tính hợp lệ, lưu ảnh trên Cloudinary, cập nhật trạng thái PENDING_APPROVAL và thông báo người dùng đã gửi đăng ký thành công.

  3. Chat thời gian thực được thực hiện bằng công nghệ nào?
    Chat và thông báo realtime sử dụng WebSocket được cấu hình trong server Spring Boot, cho phép kết nối duy nhất giữa client và server, giảm độ trễ và tải mạng.

  4. Các ảnh và video của phòng trọ được lưu trữ ở đâu?
    Tất cả tài nguyên đa phương tiện (ảnh, video) được tải lên và quản lý bởi Cloudinary, nền tảng CDN giúp tối ưu tốc độ tải và tự động chuyển đổi định dạng.

  5. Kiểm thử chức năng nào đã được thực hiện cho hệ thống?
    Kiểm thử chức năng người dùng (bảng 51) bao gồm đăng ký, đăng nhập, CRUD bài đăng, lưu ưa thích, báo cáo vi phạm; kiểm thử chức năng quản trị viên (bảng 52) bao gồm duyệt bài đăng, quản lý người dùng, thống kê và quản lý giao dịch.

Kết luận

  • Khóa luận đã thiết kế và triển khai thành công một website tìm kiếm phòng trọ, tích hợp đầy đủ các chức năng từ đăng tin, tìm kiếm thông minh, chat thời gian thực đến quản lý người dùng và báo cáo vi phạm.
  • So với các giải pháp hiện có, hệ thống đem lại xác thực tài khoản chủ trọ, giao tiếp realtime, và quản lý đa phương tiện nhờ sự kết hợp của ReactJS, Spring Boot, JWT, WebSocket và Cloudinary.
  • Những hạn chế về đánh giá người dùng thực tế và hiệu năng dưới tải lớn mở ra các hướng nghiên cứu tiếp theo, bao gồm nghiên cứu UX, tối ưu hoá hiệu năng và tích hợp AI gợi ý phòng trọ.