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

Trong giai đoạn 2017–2018, thị trường bất động sản tại Việt Nam, đặc biệt là khu vực Thành phố Hồ Chí Minh, ghi nhận sự chuyển dịch mạnh mẽ sang phân khúc nhà ở đáp ứng nhu cầu thực tế của người dân. Theo các số liệu báo cáo thị trường năm 2017, nguồn cung căn hộ chung cư tại Thành phố Hồ Chí Minh đạt 31.106 căn, trong đó hơn 64% thuộc phân khúc căn hộ trung cấp với mức giá dao động từ 18 đến 34 triệu đồng/m² (tăng 24% so với năm 2015). Hiệp hội Bất động sản Thành phố Hồ Chí Minh (HoREA) cũng đưa ra dự báo trong năm 2018 rằng phân khúc căn hộ trung cấp sẽ tiếp tục giữ vai trò chủ đạo với sức mua ổn định. Cùng với xu hướng ứng dụng công nghệ thông tin vào lĩnh vực bất động sản (PropTech) và dự báo từ nghiên cứu của Đại học Oxford về việc 97% công việc liên quan đến ngành bất động sản sẽ được tự động hóa và máy tính hóa, các phương thức giao dịch truyền thống đang dần chuyển sang nền tảng số.

Tuy nhiên, các cổng thông tin và website đăng tin bất động sản phổ biến thời điểm đó chủ yếu hiển thị thông tin dưới dạng văn bản mô tả và hình ảnh tĩnh 2D. Hạn chế này khiến người tìm kiếm không thể hình dung toàn diện về bố cục, không gian thực tế và kết cấu của căn hộ, dẫn đến việc phải dành nhiều thời gian và chi phí đi lại để trực tiếp kiểm tra nhiều căn nhà trước khi đưa ra quyết định. Xuất phát từ thực tế đó, đề tài khóa luận "Ứng dụng thực tế ảo trong xây dựng kênh thông tin bất động sản" được thực hiện nhằm ứng dụng công nghệ ảnh toàn cảnh 360 độ (Panorama/Virtual Reality) trên nền tảng web để giải quyết bài toán trải nghiệm không gian cho người dùng.

Nhiệm vụ và mục tiêu nghiên cứu của đề tài bao gồm ba nội dung chính:

  1. Thiết kế và xây dựng hoàn chỉnh website giới thiệu nhà/căn hộ với đầy đủ các chức năng cơ bản phục vụ nhu cầu tìm kiếm, tra cứu của người mua và thuê nhà.
  2. Xây dựng phân hệ quản trị (CMS) hỗ trợ quản trị viên, chủ bất động sản và người môi giới quản lý danh sách, chỉnh sửa dữ liệu và theo dõi số liệu thống kê.
  3. Nghiên cứu và tích hợp tính năng "Tham quan ảo" thông qua việc liên kết các bức ảnh 360 độ bằng các điểm tương tác (hotspot), cho phép người dùng quan sát đa chiều và chuyển đổi linh hoạt giữa các phòng trong căn nhà.
  • Đối tượng nghiên cứu: Các đối tượng tham gia hệ sinh thái giao dịch bất động sản trực tuyến gồm người có nhu cầu thuê/mua nhà, chủ bất động sản, người môi giới và quy trình ứng dụng công nghệ thực tế ảo dựa trên ảnh 360 độ trong trình diễn không gian nhà ở.
  • Phạm vi nghiên cứu:
    • Không gian: Thị trường nhà ở và phân khúc căn hộ tại địa bàn Thành phố Hồ Chí Minh.
    • Thời gian thực hiện: Từ tháng 01/2018 đến tháng 06/2018.

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

Khóa luận kết hợp nền tảng lý thuyết phát triển phần mềm kiến trúc MVC, công nghệ xử lý đồ họa web hai chiều (2D Canvas) và kỹ thuật chuyển đổi hình chiếu toàn cảnh hình cầu sang không gian tương tác ảo.

  • Khung công nghệ và mô hình lý thuyết:

    • Mô hình kiến trúc Model-View-Controller (MVC): Áp dụng để phân tách độc lập giữa tầng xử lý nghiệp vụ (Business Logic), tầng dữ liệu (Database) và tầng giao diện người dùng (UI).
    • Hệ tọa độ đồ họa HTML5 Canvas: Sử dụng không gian 2D với gốc tọa độ (0, 0) tại góc trên bên trái, trục X mở rộng sang phải và trục Y mở rộng xuống dưới, thông qua API 2D Context (getContext('2d')) để vẽ các điểm nút và đường liên kết.
    • Hình chiếu đẳng chữ nhật (Equirectangular Projection) và thư viện Krpano: Biến đổi ảnh 360 độ dạng phẳng bọc quanh khối cầu ảo. Điểm tương tác (hotspot) được định vị qua hệ tọa độ cầu gồm góc xoay ngang ath (từ -180° đến +180°) và góc nâng dọc atv (từ -90° đến +90°), cấu hình và lưu trữ thông qua cấu trúc tệp tin XML.
  • Phương pháp nghiên cứu:

    • Phương pháp điều tra khảo sát định lượng: Thu thập dữ liệu thực tế bằng bảng câu hỏi trực tuyến qua Google biểu mẫu đối với nhóm công dân đang sinh sống tại TP.HCM (độ tuổi 22–30, thu nhập 15–30+ triệu đồng/tháng, từng giao dịch nhà qua mạng, dung lượng mẫu n ~ 50). Thang đo xếp hạng độ ưu tiên từ 1 đến 5 điểm cho các tiêu chí chọn nhà và thống kê tỷ lệ phần trăm các khó khăn gặp phải.
    • Phương pháp phân tích và đối sánh hệ thống: Khảo sát và đánh giá ưu - nhược điểm của các website đăng tin hiện có tại Việt Nam (Chợ Tốt, Batdongsan.com.vn, Alonhadat) và ứng dụng thực tế ảo chuyên dụng quốc tế (MatterportVR).
    • Phương pháp thiết kế và kỹ nghệ phần mềm: Đặc tả yêu cầu người dùng, xây dựng biểu đồ ca sử dụng (Use-Case Diagrams), thiết kế cơ sở dữ liệu quan hệ và lập trình triển khai mã nguồn.
  • Nguồn dữ liệu:

    • Số liệu sơ cấp: Kết quả khảo sát 50 người dùng tại TP.HCM, bộ ảnh chụp 360 độ thực tế tại các căn hộ và các sơ đồ mặt bằng (floor plan).
    • Số liệu thứ cấp: Báo cáo thị trường bất động sản TP.HCM 2017, dữ liệu thống kê từ HoREA năm 2018, nghiên cứu của Đại học Oxford và số liệu phân tích công nghệ từ Medium.com.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình 3 thành phần chính: Website dành cho người dùng, Website dành cho người quản trị và Hệ thống cơ sở dữ liệu.

+-------------------------------------------------------------------+
|                        KIẾN TRÚC HỆ THỐNG                         |
+-------------------------------------------------------------------+
| 1. Phân hệ Người dùng:                                            |
|    - Tìm kiếm theo bộ lọc, xem chi tiết BĐS                       |
|    - Trình diễn Virtual Tour 360° (Krpano Viewer)                 |
|    - Danh sách yêu thích, biểu mẫu liên hệ                        |
+-------------------------------------------------------------------+
| 2. Phân hệ Quản trị:                                              |
|    - Quản lý & phân quyền tài khoản (Admin, Chủ nhà/Môi giới)     |
|    - Công cụ biên tập Tour 360° tương tác trên HTML5 Canvas       |
|    - Thống kê lượt xem/yêu cầu, xuất dữ liệu CSV, nhúng Iframe    |
+-------------------------------------------------------------------+
| 3. Tầng Dịch vụ & Cơ sở dữ liệu:                                  |
|    - Framework: PHP / Laravel (Routing, Controller, Eloquent ORM) |
|    - CSDL: MySQL (8 bảng dữ liệu quan hệ)                         |
|    - Thư viện: Krpano XML, Carbon, Mailgun, Upload, Faker         |
+-------------------------------------------------------------------+
  • Ngăn xếp công nghệ (Technology Stack):

    • Backend: Ngôn ngữ PHP, Laravel Framework (sử dụng Routing, Controller, Blade Template Engine, Eloquent ORM, Migration, Artisan CLI).
    • Frontend & Đồ họa: HTML5 Canvas, JavaScript, CSS/LESS biên dịch bằng GruntJS, thư viện giao diện JQueryUI và Font Awesome.
    • Xử lý ảnh 360 độ: Thư viện Krpano (hỗ trợ render trên HTML5 và Flash).
    • Cơ sở dữ liệu: Hệ quản trị cơ sở dữ liệu quan hệ MySQL.
    • Thư viện phụ trợ: Carbon Datetime (xử lý thời gian), Mailgun (gửi nhận email thông báo), Upload (kiểm tra định dạng và kích thước tệp tin), Faker (sinh dữ liệu giả định phục vụ kiểm thử).
  • Thiết kế Cơ sở dữ liệu: Hệ thống quản lý thông tin thông qua 8 bảng quan hệ:

    • houses: Lưu trữ thông tin chi tiết của căn nhà (tiêu đề, địa chỉ, giá cả, số phòng, diện tích).
    • images: Lưu trữ đường dẫn tệp ảnh 360 độ của từng phòng/khu vực.
    • plan_images: Lưu trữ sơ đồ mặt bằng tổng thể (floor plan).
    • category: Phân loại danh mục loại hình bất động sản.
    • users: Quản lý danh sách tài khoản người dùng và quản trị viên.
    • roles: Lưu trữ cấu hình vai trò và phân quyền (Admin, User/Chủ nhà/Môi giới).
    • view_stat: Lưu trữ lịch sử và số lượng lượt xem bất động sản.
    • request_stat: Lưu trữ các yêu cầu liên hệ từ khách hàng để xuất thống kê.
  • Cấu trúc cấu hình và biên tập mô hình 360 độ: Nhóm tác giả tinh giản cấu trúc tệp XML trong Krpano để tối ưu hóa hiệu năng tải trang, bao gồm các thẻ: <krpano>, <include>, <layer>, <scene> (chứa <preview>, <image>, <hotspot>, <view>), và <autorotate>.

    Trên giao diện quản trị, tương tác đồ họa trên HTML5 Canvas được xây dựng để hỗ trợ người quản trị tạo sơ đồ trực quan:

    • Xử lý sự kiện đặt điểm tọa độ (point) đại diện cho từng căn phòng trên sơ đồ mặt bằng.
    • Xử lý sự kiện nối các điểm bằng đoạn thẳng (line) để thiết lập liên kết không gian.
    • Xử lý sự kiện xoay cung tròn hình quạt để quy định góc nhìn ban đầu (view).
    • Hệ thống tính toán tự động và chuyển đổi từ tọa độ màn hình sang tọa độ cầu (screentosphere) để sinh mã XML lưu trữ trên máy chủ, xác định vị trí của các mũi tên điều hướng (hotspot).

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

Chương 1. Tổng quan và nhu cầu thực tế

Chương 1 phác thảo bức tranh thị trường bất động sản Thành phố Hồ Chí Minh năm 2017–2018 với sự chiếm lĩnh của phân khúc nhà ở trung cấp (64% thị phần, giá 18–34 triệu đồng/m²). Chương này cũng trích dẫn nhận định từ Đại học Oxford về tiềm năng máy tính hóa 97% công việc ngành bất động sản và nêu bật lợi ích của công nghệ thực tế ảo đối với cả ba nhóm: người mua nhà (tiết kiệm thời gian, xem chi tiết không gian), người môi giới (tăng tốc độ bán, lưu trữ thông tin trực quan) và chủ sở hữu (công cụ tiếp thị hiện đại, rút ngắn chu kỳ giao dịch).

Chương 2: Tổng quát

Trình bày chi tiết dữ liệu khảo sát thực tế trên 50 người dùng tại TP.HCM. Kết quả chỉ ra các tiêu chí được ưu tiên hàng đầu khi thuê/mua nhà gồm Giá tiền (205 điểm) và Bố cục căn nhà (197 điểm). Khảo sát cũng phát hiện các rào cản chính khi tìm nhà online: ảnh tĩnh không trực quan (32%), thông tin không được xác minh (24%), môi trường không phù hợp (18%), khiến 62% người tìm nhà mất 15–20 ngày và 74% phải xem từ 5–10 căn thực tế. Chương 2 cũng phân tích ưu - nhược điểm của Chợ Tốt, Batdongsan.com.vn, Alonhadat và MatterportVR (camera chuyên dụng đắt đỏ lên tới 4.500 USD), từ đó xác định các biểu đồ Use-case cho Quản trị viên và Người dùng.

Chương 3: Công nghệ

So sánh các công nghệ phát triển web gồm PHP, Python, Java và ASP.NET, đưa ra lý do lựa chọn PHP và Laravel Framework dựa trên tính phổ biến (83,5% website toàn cầu sử dụng PHP), cộng đồng hỗ trợ lớn và chi phí thấp. Chương này giải thích chi tiết kiến trúc MVC, Eloquent ORM, Blade Template trong Laravel; nguyên lý hoạt động và hệ trục tọa độ Cartesian tùy biến của HTML5 Canvas; cùng tổng quan về thư viện Krpano, ngôn ngữ kịch bản XML và các hàm điều khiển set(), if(), js(), copy(), screentosphere(), addhotspot().

Chương 4: Hệ thống

Trình bày chi tiết kiến trúc tổng thể 3 thành phần của hệ thống. Mô tả cấu trúc mã nguồn dự án theo chuẩn thư mục của Laravel (app, routes, resources, storage,...). Đặc tả thiết kế 8 bảng trong cơ sở dữ liệu MySQL. Hướng dẫn chi tiết cách áp dụng Krpano thông qua tệp XML tùy biến, giải thuật chuyển đổi tọa độ cầu ath/atv, và phương thức bắt các sự kiện đồ họa trên HTML5 Canvas (di chuyển điểm, xoay cung quạt góc nhìn, tạo/xóa liên kết giữa các điểm ảnh 360).

Chương 5: Sản phẩm

Minh họa toàn bộ giao diện thực tế của hệ thống sau khi xây dựng hoàn thiện:

  • Phân hệ Người dùng: Giao diện trang chủ, danh sách bất động sản với bộ lọc nâng cao, trang chi tiết tích hợp khung xem 360 độ tương tác, trang danh sách yêu thích và biểu mẫu liên hệ.
  • Phân hệ Quản trị: Giao diện đăng nhập, bảng điều khiển tổng quan (dashboard), màn hình tạo mới và biên tập bất động sản 5 bước, công cụ cấu hình tour 360 độ, trang thống kê lượt xem/yêu cầu liên hệ, và màn hình quản lý/phân quyền người dùng.

Chương 6: Kết quả, thực nghiệm và hướng phát triển

Đánh giá toàn diện các mục tiêu chức năng đã hoàn thành, quy trình thu thập dữ liệu ảnh 360 độ thực tế tại căn hộ, quá trình chạy thử nghiệm hệ thống và đề xuất các định hướng nghiên cứu hoàn thiện trong tương lai.

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

Kết quả khảo sát thực nghiệm nhu cầu người dùng (n = 50)

Cuộc khảo sát do nhóm tác giả thực hiện trên tập khách hàng tiềm năng tại TP.HCM mang lại các số liệu cụ thể làm cơ sở định hình chức năng hệ thống:

Thứ hạng Tiêu chí lựa chọn thuê/mua nhà Điểm số đánh giá (Thang 1–5)
1 Giá tiền 205
2 Bố cục căn nhà 197
3 Vị trí 169
4 Tiện ích đi kèm 93
5 Dân trí 72

Về thực trạng tìm kiếm nhà trực tuyến:

  • 32% người được hỏi đánh giá hình ảnh 2D tĩnh không cung cấp được cái nhìn tổng quan, rõ ràng.
  • 24% gặp tình trạng thông tin không được xác minh, sai lệch so với thực tế.
  • 18% nhận thấy dân cư và môi trường xung quanh không phù hợp sau khi đến xem.
  • 62% mất thời gian trung bình từ 15 đến 20 ngày để tìm được căn nhà ưng ý.
  • 74% phải trực tiếp đến xem từ 5 đến 10 căn nhà khác nhau.

Đóng góp kỹ thuật và giải pháp của đề tài

  1. Xây dựng giải pháp Virtual Tour chi phí thấp: Khắc phục nhược điểm của các hệ thống thương mại chuyên dụng như MatterportVR (đòi hỏi camera 3D đắt tiền khoảng 4.500 USD và phần mềm đóng phí cao) bằng việc kết hợp thư viện Krpano nguồn mở và hình ảnh 360 độ tiêu chuẩn, giúp giảm chi phí triển khai và dễ tiếp cận tại thị trường Việt Nam.
  2. Phát triển công cụ biên tập sơ đồ mặt bằng tương tác trên Web: Ứng dụng HTML5 Canvas để tạo ra công cụ quản trị trực quan, cho phép người quản trị tự tải lên ảnh sơ đồ tầng (floor plan), cắm các điểm chụp, xoay góc nhìn và nối liên kết giữa các phòng mà không cần can thiệp thủ công vào mã nguồn XML.
  3. Hoàn thiện kênh thông tin bất động sản đa phân quyền: Xây dựng hoàn chỉnh cổng thông tin phân quyền 2 cấp độ (Admin và User/Chủ nhà/Môi giới), tích hợp tính năng lọc tìm kiếm, lưu trữ danh mục yêu thích, nhúng tour ảo vào website khác qua thẻ iframe, và trích xuất dữ liệu thống kê ra tệp CSV.

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

  • Hạn chế:

    • Quy mô khảo sát người dùng còn hạn chế (khoảng 50 mẫu tại khu vực TP.HCM, tập trung ở nhóm tuổi 22–30).
    • Hệ thống phụ thuộc vào chất lượng tệp ảnh 360 độ tải lên; việc xử lý và tải các tệp ảnh panorama dung lượng cao có thể ảnh hưởng đến tốc độ load của trình duyệt nếu đường truyền mạng không ổn định.
    • Các thao tác cấu hình sơ đồ mặt bằng và liên kết hotspot đòi hỏi người quản trị phải nhập liệu tuần tự theo từng khu vực không gian.
  • Hướng nghiên cứu tiếp:

    • Tối ưu hóa thuật toán nén và phân mảnh hình ảnh (multi-resolution tiling) để tăng tốc độ tải mô hình 360 độ trên các thiết bị di động có cấu hình yếu.
    • Mở rộng hỗ trợ tương thích hoàn toàn với các thiết bị kính thực tế ảo di động (VR Headsets, Google Cardboard, WebVR API) nhằm nâng cao trải nghiệm đắm chìm cho người dùng.
    • Nghiên cứu cơ chế tự động nhận diện không gian và tự động nối ghép các điểm hotspot dựa trên kỹ thuật thị giác máy tính thay vì thao tác cấu hình thủ công trên Canvas.

Giá trị tham khảo

Khóa luận là tài liệu tham khảo phù hợp cho:

  • Sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm: Cung cấp tài liệu mẫu về cấu trúc một đồ án ứng dụng web hoàn chỉnh theo mô hình MVC sử dụng Laravel Framework, cùng phương pháp tổ chức cơ sở dữ liệu quan hệ với MySQL.
  • Kỹ sư phát triển Web Frontend và Đồ họa tương tác: Cung cấp ví dụ thực tiễn về cách điều khiển đối tượng, bắt sự kiện chuột trên HTML5 Canvas API và kỹ thuật tích hợp thư viện Krpano để xây dựng các tour tham quan ảo 360 độ.
  • Các đơn vị nghiên cứu giải pháp Công nghệ Bất động sản (PropTech): Cung cấp dữ liệu khảo sát hành vi người dùng tại TP.HCM năm 2018 và mô hình kênh thông tin trực quan hóa không gian nhà ở với chi phí đầu tư thấp.

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

1. Khảo sát thực tế trong khóa luận chỉ ra hai yếu tố nào có ảnh hưởng lớn nhất đến quyết định thuê/mua nhà của người dùng?
Dữ liệu khảo sát trên 50 người dùng tại TP.HCM xác định hai yếu tố có điểm số ưu tiên cao nhất là Giá tiền (đạt 205 điểm) và Bố cục căn nhà (đạt 197 điểm), xếp trên các yếu tố Vị trí (169 điểm), Tiện ích đi kèm (93 điểm) và Dân trí (72 điểm).

2. Khóa luận giải quyết rào cản chi phí cao của giải pháp thực tế ảo MatterportVR bằng phương án nào?
Nhóm tác giả thay thế thiết bị quét 3D chuyên dụng giá khoảng 4.500 USD và nền tảng đóng của Matterport bằng cách sử dụng các tệp ảnh 360 độ thông thường kết hợp thư viện Krpano và công cụ biên tập sơ đồ tọa độ trên nền HTML5 Canvas, giúp hệ thống hoạt động nhẹ nhàng trên trình duyệt web với chi phí tối thiểu.

3. Cấu trúc tệp XML trong Krpano được nhóm tác giả tinh chỉnh gồm những thẻ chính nào?
Tệp cấu hình XML tùy biến bao gồm thẻ gốc <krpano>, thẻ nhúng tài nguyên <include>, thẻ định nghĩa giao diện/nút bấm <layer>, thẻ chứa từng không gian phòng <scene> (bên trong gồm <preview>, <image>, <hotspot>, <view>), và thẻ tự động quay <autorotate>.

4. Điểm tương tác chuyển phòng (hotspot) trong không gian 360 độ được xác định bởi những thông số tọa độ nào?
Mỗi hotspot được định vị bằng hai thông số tọa độ hình cầu: góc xoay ngang ath (horizontal) có giá trị từ -180° đến +180°, và góc nâng dọc atv (vertical) có giá trị từ -90° đến +90°.

5. Cơ sở dữ liệu MySQL của hệ thống được tổ chức gồm những bảng nào để phục vụ lưu trữ và thống kê?
Cơ sở dữ liệu gồm 8 bảng: houses (thông tin nhà), images (ảnh 360 độ), plan_images (sơ đồ tầng), category (loại nhà), users (tài khoản), roles (phân quyền), view_stat (thống kê lượt xem), và request_stat (thống kê yêu cầu liên hệ).

Kết luận

Khóa luận tốt nghiệp cử nhân CNTT của Huỳnh Khoa Nguyên và Lý Đăng Quang đã giải quyết vấn đề hạn chế của hình ảnh tĩnh trên các website bất động sản truyền thống bằng giải pháp tham quan ảo 360 độ. Thông qua việc kết hợp Laravel Framework, thư viện Krpano và đồ họa HTML5 Canvas, nhóm tác giả đã xây dựng thành công một hệ thống kênh thông tin hoàn chỉnh với công cụ biên tập tour trực quan và cơ chế phân quyền linh hoạt. Đây là tài liệu tham khảo có giá trị ứng dụng cao cho việc nghiên cứu và triển khai các giải pháp WebVR chi phí thấp trong lĩnh vực thương mại điện tử và dịch vụ bất động sản.