Ứng dụng thực tế ảo trong xây dựng kênh thông tin bất động sản

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN LỚP CỬ NHÂN TÀI NĂNG HUỲNH KHOA NGUYÊN – LÝ ĐĂNG QUANG ỨNG DỤNG THỰC TẾ ẢO TRONG XÂY DỰNG KÊNH THƠNG TIN BẤT ĐỘNG SẢN KHỐ LUẬN TỐT NGHIỆP CỬ NHÂN CNTT TP.HCM, 2018 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN LỚP CỬ NHÂN TÀI NĂNG HUỲNH KHOA NGUYÊN 1412675 LÝ ĐĂNG QUANG 1412426 ỨNG DỤNG THỰC TẾ ẢO TRONG XÂY DỰNG KÊNH THƠNG TIN BẤT ĐỘNG SẢN KHĨA LUẬN TỐT NGHIỆP CỬ NHÂN TIN HỌC GIÁO VIÊN HƯỚNG DẪN TRƯƠNG PHƯỚC LỘC NGUYỄN HUY KHÁNH NIÊN KHÓA 2014 – 2018 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Khóa luận đáp ứng yêu cầu LV cử nhân tin học TP.HCM, ngày …… tháng …… năm 2018 Giáo viên hướng dẫn NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Khóa luận đáp ứng yêu cầu LV cử nhân tin học TP.HCM, ngày …… tháng …… năm 2018 Giáo viên phản biện Lời cảm ơn Lời đầu tiên, chúng em xin chân thành cảm ơn khoa Công nghệ Thông tin trường Đại học Khoa học Tự nhiên TPHCM tạo điều kiện tốt giúp chúng em thực khoá luận tốt nghiệp Chúng em xin chân thành cảm ơn Thầy, Cô khoa Công nghệ Thông tin trường Đại học Khoa học Tự nhiên TP HCM tận tình giảng dạy chúng em suốt năm học vừa qua, giúp chúng em có kiến thức chun mơn q báu, sở để chúng em hồn thành khố luận tốt nghiệp Chúng em xin đặc biệt cảm ơn thầy Trương Phước Lộc thầy Nguyễn Huy Khánh giúp đỡ hướng dẫn chúng em trình làm luận văn Cuối cùng, chúng em xin gửi lời biết ơn sâu sắc đến Cha, Mẹ, bạn bè giúp đỡ động viên chúng em trình học tập, nghiên cứu Với tất cố gắng, chúng em hồn thành khố luận tốt nghiệp Tuy nhiên, chắn khơng tránh khỏi thiếu sót, mong nhận thơng cảm tận tình góp ý q Thầy Cơ bạn TP HCM, tháng năm 2018 Sinh viên thực Huỳnh Khoa Nguyên – Lý Đăng Quang ĐỀ CƯƠNG CHI TIẾT Tên Đề Tài : Ứng dụng thực tế ảo xây dựng kênh thông tin bất động sản Giáo viên hướng dẫn: Trương Phước Lộc - Nguyễn Huy Khánh Thời gian thực : 01/2018 - 06/2018 Sinh viên thực : Huỳnh Khoa Nguyên (1412675) – Lý Đăng Quang (1412426) Loại đề tài : Tìm hiểu công nghệ xây dựng ứng dụng Vấn đề tại: Hiện nhu cầu mua, thuê nhà ngày tăng cao đặc biệt thành phố lớn nước Với phát triển cơng nghệ thơng tin, ngày có nhiều người tìm kiếm nhà mạng website loại hình gia tăng Thế thơng tin nhà website đăng lên dạng văn hình ảnh tĩnh, khiến cho người mua nhà khơng có nhìn chi tiết rõ ràng nhà họ dự định Quá trình tìm kiếm đến tận nơi để xem nhà thường nhiều công sức thời gian người mua bán Mục tiêu đề tài: Thiết kế xây dựng hoàn chỉnh website giới thiệu nhà/căn hộ với đầy đủ chức đáp ứng nhu cầu người thuê nhà Xây dựng trang quản lý giúp cho quản trị viên, người mơi giới hay chủ bất động sản quản lý nhà cách dễ dàng Xây dựng phát triển hồn chỉnh tính “Tham quan ảo” cách ghép hình 360° lại với giúp người dùng có trải nghiệm chân thật không cần phải đến tận nơi để xem nhà Phương pháp thực hiện: Để thiết kế xây dựng website, nhóm định sử dụng Laravel – framework PHP sử dụng mơ hình MVC ưa chuộng + Tìm hiểu Laravel, cấu trúc, cách sử dụng mơ hình MVC Laravel + Tìm hiểu thư viện hỗ trợ Laravel + Tìm hiểu cách vẽ đồ họa HTML5 Canvas, cách sử dụng Krpano xây dựng mơ hình nhà 360° Kết đạt dự kiến: Tìm hiểu áp dụng thành công công nghệ vào xây dựng website, phát triển thành cơng tính “tham quan ảo” cho hệ thống Hệ thống gồm chức sau: Tìm kiếm nhà theo lọc: Người dùng có sử dụng tính để thể dễ dàng tìm kiếm ngơi nhà mong muốn tùy theo tiêu chí (địa điểm, giá tiền) thân Xem chi tiết thông tin nhà: Người dùng xem thơng tin thơng tin chi tiết nhà nhờ tính Thêm vào trang thơng tin chi tiết nhỏ nhóm có tích hợp tính “tham quan ảo” giúp người mua có nhìn trực quan ngơi nhà mà họ tìm kiếm, nhằm tăng tin tưởng cho người mua, giúp họ có định chín xác lựa chọn nhà Website quản trị dành cho người quản trị Cho phép người quản trị đăng chỉnh sửa thơng tin bất động sản theo quyền hạn, xem thống kê liên quan Phân quyền cho người quản trị khác chủ người môi giới bất động sản Kế Hoạch Thực Hiện: 01/2018 – 2/2018: Tìm hiểu hệ thống tương tự, lên ý tưởng tính 02/2018 – 03/2018: Tìm hiểu cơng nghệ cần sử dụng Tìm hiểu PHP, cấu trúc cách sử dụng Laravel Framework Tìm hiểu cách vẽ đồ họa HTML5 Canvas, cách sử dụng Krpano 03/2018 - 06/2018: Tiến hành xây dựng ứng dụng Thiết kế giao diện website Thiết kế sở liệu xây dựng backend Xây dựng phát triển tính Ghép ảnh 360° tính khác 06/2018 - 07/2018 Hồn thiện sửa lỗi Viết báo cáo Xác nhận GVHD Ngày tháng năm 2018 Nhóm SV Thực Huỳnh Khoa Nguyên – Lý Đăng Quang MỤC LỤC Chương Mở đầu 1.1 Tổng quan nhu cầu thực tế: 1.1.1 Toàn cảnh tranh bất động sản 1.1.2 Sự thay đổi lĩnh vực bất động sản thời đại công nghệ 1.1.3 Thực tế ảo – Công cụ tiếp thị tuyệt vời cho ngành bất động sản 1.2 Tổng quan đề tài: 1.3 Cấu trúc báo cáo: Chương 2: Tổng quát 2.1 Khảo sát lựa chọn chức năng: 2.1.1 Mục đích khảo sát: 2.1.2 Khảo sát nhu cầu người dùng 2.1.3 Khảo sát website đăng tin bất động sản thông dụng: 2.1.4 Khảo sát ứng dụng bật áp dụng thực tế ảo bất động sản 2.1.5 Nhận xét 10 2.2 Lựa chọn yêu cầu chức 11 2.2.1 Đối với quản trị viên 11 2.2.2 Đối với người dùng 11 2.2.3 Sơ đồ use-case 12 2.2.4 Danh sách use-case 13 2.3 Tổng kết chương 14 Chương Công nghệ 15 3.1 Tìm hiểu cơng nghệ phát triển web phổ biến 15 3.1.1 Các công nghệ phát triển web phổ biến 15 3.1.2 Lựa chọn công nghệ phát triển web 17 3.1.3 PHP Framework Laravel 17 3.2 Tìm hiểu HTML5 Canvas 24 3.2.1 Lý sử dụng HTML5 Canvas 24 3.2.2 Tổng quan HTML5 Canvas 25 3.2.3 Cách sử dụng HTML5 Canvas 26 3.3 Tìm hiểu Krpano 27 3.3.1 Lý sử dụng Krpano 27 3.3.2 Tổng quan Krpano 28 3.4 Tổng kết chương 30 Chương Hệ thống 31 4.1 Xây dựng kiến trúc 31 4.2 Lựa chọn tìm hiểu công nghệ 32 4.3 Áp dụng Laravel phát triển hệ thống 33 4.3.1 Tổ chức dự án 33 4.3.2 Cơ sở liệu 35 4.3.3 Các thư viện sử dụng 36 4.4 Áp dụng Krpano việc xây dựng mơ hình nhà 360° 36 4.5 Áp dụng HTML5 Canvas để vẽ đồ họa giao diện web 43 4.5.1 Vẽ đối tượng 43 4.5.2 Xử lý kiện liên quan đến đối tượng 45 4.6 Tổng kết chương: 49 Chương Sản phẩm 50 5.1 Trang dành cho người dùng 50 5.2 Trang dành cho người quản trị 57 5.3 Tổng kết chương: 66 Chương Kết quả, thực nghiệm hướng phát triển 67 6.1 Kết đạt được: 67 6.2 Thực nghiệm 68 6.2.1 Quá trình thu thập liệu thực tế 68 6.2.2 Triển khai thực nghiệm 69 6.3 Hướng phát triển: 70 o Trang top Màn hình hiển thị danh sách tồn nhà (nếu tài khoản admin) nhà tạo (nếu tài khoản người mơi giới/chủ bất động sản) Hình 5-15: Giao diện trang top người quản trị o Trang tạo bất động sản Đây trang để người quản trị tạo nhà Phần đầu để người quản trị nhập thông tin tiêu đề, mô tả, chọn tiện nghi nhà, giá tiền, diện tích,… 58 Hình 5-16: Giao diện trang tạo bất động sản - Phần để người quản trị upload hình sơ đồ mặt (floor plan) nhà Hình 5-17: Giao diện trang tạo bất động sản - 59 Phần khu vực để người quản trị upload hình 360° khu vực khác nhà Với hình người quản trị đặt tên cho hình tên hiển thị mơ hình 360° nhà Những hình 360° chụp camera 360 chuyên dụng thông qua ứng dụng Google Street View chạy nhiểu tảng Hình 5-18: Giao diện trang tạo bất động sản - Hình 5-19: Giao diện trang tạo bất động sản - Phần để người quản trị hình ảnh thường(tĩnh) bất động sản Phần cuối để người quản trị nhập vị trí nhà Hệ thống hỗ trợ auto complete cho người quản trị 60 Hình 5-20: Giao diện trang tạo bất động sản - Quay trở lại việc tạo nhà, người quản trị kéo hình ảnh 360° thả chúng vào khu vực sơ đồ mặt (floor plan) Phía cơng cụ có nút với chức sau: o Import: để upload hình sơ đồ mặt (floor plan) o Delete: để xóa sơ đồ mặt upload o Move: dùng để di chuyển điểm hình o Link: dùng để nối đoạn thẳng điểm (để tạo liên kết) o Remove Link: dùng muốn xóa đoạn thẳng Người quản trị điều chỉnh hướng mũi tên (hotspot) theo ý muốn khu vực bên phải o Trang chỉnh sửa thông tin bất động sản Trang chỉnh sửa tương tự trang tạo bất động sản 61 o Trang thơng tin chi tiết bất động sản Hình 5-21: Giao diện trang thông tin chi tiết bất động sản Trang để người dùng xem lại mơ hình 360° vừa tạo/chỉnh sửa Ngồi cịn có tính iframe cho phép người dùng nhúng hình ảnh mơ hình 360° vào trang web khác Có nút Edit để người dùng chỉnh sửa bất động sản, Delete để xóa bất động sản, View Statistics để xem thống kê bất động sản o Trang thống kê bất động sản Trang để người quản trị xem biểu đồ minh họa số lượt xem, số lần request từ người dùng bất động sản mà quản lý 30 ngày gần nhất, xem thống kê khác số lượt xem tồn trang web, tình trạng bất 62 động sản, lịch sử request từ user Có nút để người quản trị xuất kết thống kê thành file csv Hình 5-22: Giao diện trang thống kê bất động sản - Hình 5-23: Giao diện trang thống kê bất động sản - 63 o Trang quản lý danh sách bất động sản Đây trang quản lý danh sách nhà Người quản trị thực thao tác thêm, xố, sửa cho nhà, chức tìm kiếm nhà theo tên, xếp nhà theo tên, ngày tạo, ngày sửa,… Nút bên phải cho phép người quản trị lựa chọn có hiển thị public nhà website người dùng hay khơng Hình 5-24: Giao diện trang quản lý danh sách bất động sản 64 • Trang tạo user Trang để người quản trị (chỉ dành cho đăng nhập với tư cách admin) tạo user Hình 5-25: Giao diện trang tạo user • Trang thơng tin chi tiết user Trang hiển thị thông tin chi tiết user bất động sản mà user quản lý Hình 5-26: Giao diện trang thơng tin chi tiết user 65 • Trang quản lý danh sách user Màn hình để người quản trị (chỉ dành cho đăng nhập với tư cách admin) quản lý user Màn hình có giao diện chức tương tự hình quản lý nhà xóa, tìm kiếm, xếp Hình 5-27: Giao diện trang quản lý danh sách user 5.3 Tổng kết chương: Chương trình bày đặc điểm bật giao diện chức thành phần hệ thống Trang dành cho người dủng trang dành cho người quản trị 66 Chương Kết quả, thực nghiệm hướng phát triển Chương trình bày kết đạt được, kết thực nghiệm đồng thời đưa hướng phát triển cho ứng dụng Chương 6.1 Kết đạt được: Sau thời gian nỗ lực tìm hiểu cơng nghệ Laravel , HTML5 Canvas, Krpano áp dụng chúng việc xây dựng hệ thống, chúng em xây dựng thành công Ứng dụng thực tế ảo xây dựng kênh thông tin bất động sản Tìm hiểu cơng nghệ: • Laravel: Tìm hiểu, nắm vững cấu trúc Laravel, áp dụng mô hình MVC cơng cụ, thư viện hỗ trợ vào dự án • HTML5 Canvas: Tìm hiểu, xây dựng Graphic đồ họa với thẻ Canvas Javascript • Krpano: Tìm hiểu áp dụng Krpano để xây dựng tính “tham quan ảo” cách ghép hình ảnh 360° với Xây dựng trang dành cho người quản trị bao gồm tính sau: • Quản lý tài khoản user (người môi giới/chủ bất động sản) • Quản lý danh sách bất động sản user tạo • Đăng chỉnh sửa bất động sản với thơng tin • Tính tạo chỉnh sửa chuyến “tham quản ảo” hình ảnh 360° • Hiển thị hình ảnh mơ hình 360° qua hệ thống khác thơng qua Iframe • Xem thống kê liên quan đến bất động sản xuất kết dạng file csv Xây dựng trang dành cho người dùng có chức sau: • Xem thơng tin bất động sản đăng • Tìm kiếm bất động sản theo lọc • Đăng ký trở thành thành viên 67 • Danh sách bất động sản u thích • Liên lạc với người môi giới/chủ bất động sản • Trải nghiệm chức “tham quan ảo” bất động sản • Chat với quản trị viên hệ thống qua khung chat Messenger Facebook tích hợp Hiện nhu cầu tìm mua nhà, thuê nhà ngày tăng cao, đặc biệt thành phố lớn nước Hệ thống chúng em với tính “tham quan ảo” tiện ích mẻ so với website Hệ thống giúp cho người mua người bán, đặc biệt cơng ty bất động sản tiết kiệm chi phí, cơng sức lại nhiều có trải nghiệm xem nhà thực tế Chỉ cần vài nhấp chuột, người dùng tự di chuyển, khám phá tồn khơng gian nhà cần mua mà khơng bỏ sót chi tiết, góc cạnh 6.2 Thực nghiệm 6.2.1 Quá trình thu thập liệu thực tế Các hình ảnh 360 hiển thị website chủ yếu thu thập qua Internet nguồn nước Để liệu phong phú thực tế nhóm định lấy liệu thực tế từ hộ chung cư Masteri Thảo Điền quận Có nhiều cách để chụp ảnh 360° Thơng qua ứng dụng Google Street View camera chuyên chụp ảnh 360° hai cách mà nhóm sử dụng đợt thu thập thực tế Google Street View ứng dụng miễn phí tảng điện thoại có tính chụp ảnh 360°, phù hợp để sử dụng phần mềm rộng rãi Còn Ricoh ThetaS camera chuyên dụng để chụp hình quay phim 360° với hình ảnh sắc nét, chuyên nghiệp Để liệu phục vụ cho luận văn đạt chất lượng tốt nhóm lựa chọn sử dụng camera Ricoh ThetaS để chụp Đây kết liệu mà nhóm đạt lần sử dụng camera Ricoh ThetaS: http://dangquangabc.esy.es/detail/21 http://dangquangabc.esy.es/detail/30 68 6.2.2 Triển khai thực nghiệm Để thực nghiệm đồ án thực tế nhóm hosting website lên mạng với địa domain: http://dangquangabc.esy.es Do hoàn thành, hosting website thời gian gần đây, khơng đủ thời gian để có lượng truy cập, kinh nghiệm thực tế lĩnh vực để tạo giao dịch Vì nhóm sử dụng phương pháp “close beta” cách đưa website cho số người có kinh nghiệm lĩnh vực bất động sản sử dụng lấy nhận xét để tiếp thu tiếp tục hoàn thiện website Một số nhận xét mà nhóm nhận đợt thực nghiệm cụ thể sau: Họ tên Công việc Nhận xét Số điện thoại Nguyễn Trưởng phịng cơng ty “Tính tham quan ảo 097.255.3427 Thành Trung Thành An 117 em thú vị, giúp cho khách hàng có nhìn trực quan ngơi nhà Tuy nhiên cần cải thiện chức quản lý admin, theo hướng chun mơn hóa để phù triển khai doanh nghiệp thực tế.” Lê Anh Hộ Trưởng nhóm kinh doanh, “Giao diện trang web phòng kinh doanh số thiết kế đẹp, thông 2.Công ty địa ốc Phước Lộc tin nhà thị 69 0968.374.284 Phát đầy đủ, tính thực tế lần thấy webstite đăng tin Việt Nam, webstie nên có thêm trang tin tức để nhà đầu tư có nhiều liệu mua nhà hơn” Đào Duy Môi giới viên tự do, “Biết dự án từ đợt bạn 0908.183.149 Đức giao dịch viên bất động sản thu thập liệu, tính cơng ty Hosiana VietNam tham quan ảo hấp dẫn Hy vọng dự án sớm triển khai để hợp tác với bạn” 6.3 Hướng phát triển: Với chức xây dựng sẵn, Hệ thống chúng em ban đầu đạt mục tiêu mà nhóm đề luận văn, đáp ứng yêu cầu tính trang đăng tin bất động sản cần có Tuy nhiên, bước khởi đầu phát triển website, để đưa dự án vào thực tiễn nhiều vấn đề cần giải quyết, tính sơ đồ mà nhóm cần phát triển thời gian gần: • Xây dựng hệ thống bảo mật thơng tin chăm sóc khách hàng • Xây dựng trải nghiệm người dùng (UX) cách tối ưu • Tạo subdomain để hỗ trợ tốt cho di động • Áp dụng Chatbot để tư vấn website • Chiến lược truyền thơng cho website 70 Ứng dụng công nghệ thực tế ảo xu hướng tất yếu lĩnh vực sống nói chung bất động sản nói riêng Từ việc giới thiệu thông tin dự án trực quan, tới việc kết nối người mua người bán Việc thay đổi người vài vai trị tìm kiếm khách hàng, cơng cụ truyền thơng… có nhiều sản phẩm ứng dụng cơng nghệ khác tương lai Công nghệ không thay đổi người – người cần đổi để thích nghi với cơng nghệ Nhóm chúng em tin dự án tiềm lĩnh vực bất động sản tương lai cách mẻ Việt Nam, chưa áp dụng rộng rãi thị trường 71 PHỤ LỤC TÀI LIỆU THAM KHẢO [1] CBRE , “CBRE Releases Q4 2017 Quarterly Report Highlights Ho Chi Minh City Market”, 03 Jan 2018, [Online] Available: http://www.cbrevietnam.com/VietnamProperty/pressrelease/cbre-releases-q4-2017-quarterly-report-highlights-ho-chi-minhcity-market [Accessed 15 May 2018] [2] HoREA, “Báo cáo tình hình thị trường bất động sản tháng đầu năm 2018, dự báo thị trường bất động sản tháng cuối năm”, 13 June 2018, pp 4, [Online] Available: http://www.horea.org.vn/media/ftp/78_.pdf [Accessed 17 Jun 2018] [3] Carl Benedikt Frey, Michael A Osborne, “The future of employment: how susceptible are jobs to computerisation?”, pp.71, Sep 2013 [Accessed 18 Jun 2018] [4] Medium.com, “The 20 most innovative companies in Real Estate (or PropTech)”, [Online] Available: https://medium.com/go-weekly-blog/the-20-most-innovativecompanies-in-real-estate-or-proptech-2e0242b80e32 [Accessed 18 Jun 2018] [5] “Top website đăng tin bất động sản lớn Việt Nam” 24 Feb 2018, [Online] Available : https://xn dnghong-dwa24j.vn/top-5-website-dang-tin-bat-dong-san-lonnhat-viet-nam/ [Accessed 19 Jun 2018] [6] Usage statistics and market share of PHP for websites [Online] Available: https://w3techs.com/technologies/details/pl-php/all/all [Accessed 22 June 2018] [7] Medium.com “Most Used PHP Frameworks in 2017” [Online] Available: https://medium.com/@vishva.eleganzit/most-used-php-frameworks-in-201773572e562fe9, [Accessed 22 Jun 2018] [8] Laravel Documentation [Online] Available: https://laravel.com/docs/5.6/readme [Accessed Jun 2018] [9] Canvas API Docs [Online] Available: https://developer.mozilla.org/kab/docs/Web/API/Canvas_API [Accessed 22 Jun 2018] 72 ... tài: ? ?Ứng dụng thực tế ảo kênh thông tin bất động sản? ?? xây dựng nhằm mục đích hỗ trợ đối tượng chính: chủ bất động sản, người môi giới người có nhu cầu th/mua nhà sử dụng cơng nghệ thực tế ảo với... blockchain số thực tế ảo nghiên cứu sử dụng ngày nhiều 1.1.3 Thực tế ảo – Công cụ tiếp thị tuyệt vời cho ngành bất động sản • Thực tế ảo ? Thực tế ảo hệ thống mơ đồ họa máy tính sử dụng để tạo... CÔNG NGHỆ THÔNG TIN LỚP CỬ NHÂN TÀI NĂNG HUỲNH KHOA NGUYÊN 1412675 LÝ ĐĂNG QUANG 1412426 ỨNG DỤNG THỰC TẾ ẢO TRONG XÂY DỰNG KÊNH THƠNG TIN BẤT ĐỘNG SẢN KHĨA LUẬN TỐT NGHIỆP CỬ NHÂN TIN HỌC GIÁO