Xây dựng ứng dụng hỗ trợ giao dịch bất động sản

TÓM TẮT Trong bối cảnh thị trường bất động sản ngày phát triển, nhu cầu bán, cho thuê, tìm mua, tìm thuê bất động sản ngày lớn Khi triển khai kinh doanh dự án bất động sản, bán cho thuê nhà, đất…, điều băn khoăn truyền tải thông tin đến với nhiều khách hàng có nhu cầu Ngược lại, khách hàng có nhu cầu mua, thuê bất động sản mong muốn tìm kiếm bất động sản phù hợp nhất, đảm bảo tính an toàn, tiện lợi pháp lý cao Tuy nhiên, người có nhu cầu giao dịch bất động sản gặp nhiều khó khăn việc quảng cáo tìm kiếm thơng tin bất động sản Làm để quảng cáo tìm kiếm thơng tin bất động sản nhanh chóng, tin cậy, xác, tiết kiệm thời gian, cơng sức, giúp cho giao dịch bất động sản trở nên dễ dàng, nhanh chóng, thuận tiện hiệu Quan trọng hơn, khách có nhu cầu giao dịch liên hệ trực tiếp với người bán, thông qua trung gian Như vậy, người mua tránh phải phí cho “cị” nhà đất Vì thay tới tìm đối tác để bàn dự án, kế hoạch tham khảo trước website hay ứng dụng để tìm dự án mà mong muốn, giúp tiết kiệm thời gian công sức nhiều Ý tưởng xây dựng website ứng dụng giao dịch bất động sản đời với mong muốn trở thành sàn giao dịch bất động sản đáp ứng hồn tồn tiêu chí ii SUMMARY In the context of the growing real estate market, the demand for selling, renting, buying and buying real estate is growing When implementing a real estate project, selling or renting a house, land , the most disturbing thing is how to convey the information to many customers in need In contrast, for customers who want to buy or rent real estate, they want to find the most suitable real estate, ensuring high safety, convenience and legal status However, those who have a need for real estate transactions have had difficulty in advertising as well as finding information about real estate How to advertise and find real estate information quickly, reliably, accurately, saving time and effort, making real estate transactions easy, fast and convenient and more efficient More importantly, customers wishing to transact can contact the seller directly, not through intermediaries Thus, the buyer will avoid having to pay for "the stork" of land So instead of looking for partners to talk about projects and plans, we can now consult in advance on the website or on the application to find the projects we want, it Help us save a lot of time and effort The idea of building a real estate website and application was born with the desire to become a real estate trading floor that can fully meet those criteria iii MỤC LỤC LỜI CẢM ƠN i TÓM TẮT ii MỤC LỤC iv DANH MỤC CÁC CHỮ VIẾT TẮT ix DANH MỤC CÁC BẢNG BIỂU .x DANH MỤC CÁC HÌNH ẢNH BIỂU ĐỒ xi CHƯƠNG TỔNG QUAN 1.1 Khảo sát trạng .1 1.2 Mục tiêu đề tài 1.3 Nội dung 1.4 Phương pháp nghiên cứu 1.5 Ý nghĩa khoa học thực tiễn CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu ReactJS .3 2.1.1 React 2.1.2 Một số khái niệm React 2.1.2.1 Virtual DOM 2.1.2.2 Giới thiệu JSX 2.1.2.3 Giới thiệu components 2.1.2.4 Props State 2.1.2.5 React-router 2.1.2.5.1 BrowserRouter HashRouter 2.1.2.5.2 Route 2.1.3 Ưu điểm nhược điểm ReactJS 2.2 Giới thiệu sơ lược Sping Framework 2.2.1 Spring Core 2.2.2 Spring Bean 10 2.2.3 Dependency Injection (DI) 10 2.2.4 Spring Context 11 2.2.5 Các dự án Spring Framework .11 iv 2.3 Cơ sở liệu MYSQL .12 2.3.1 Giới thiệu sở liệu MYSQL 12 2.3.2 Mục đích sử dụng sở liệu 12 2.3.2.1 Lưu trữ 12 2.3.2.2 Truy cập 13 2.3.2.3 Tổ chức 13 2.3.2.4 Xử lí 13 2.3.3 Các thao tác cập nhật liệu 13 2.3.3.1 SELECT (Truy vấn liệu): 13 2.3.3.2 INSERT (Thêm liệu): 13 2.3.3.3 UPDATE (Cập nhật liệu): 14 2.3.3.4 DELETE (Xóa liệu): 14 2.3.4 Các hàm thông dụng MySQL 14 2.3.4.1 Các hàm phát biểu GROUP BY 14 2.3.4.2 Các hàm xử lí chuỗi: 14 2.3.4.3 Các hàm xử lí thời gian 14 2.3.4.4 Các hàm toán học 14 2.4 React Native .15 2.4.1 Lịch sử 15 2.4.2 Giới thiệu React Native 15 2.4.3 Ưu điểm nhược điểm 16 2.4.4 Công cụ phát triển 17 2.4.5 Thư viện component 19 2.4.5.1 Thư viện redux 20 2.4.5.2 Gới thiệu 20 2.4.5.3 Cấu trúc 20 2.4.5.4 Nguyên lý hoạt động Redux 21 2.4.5.5 Một số nguyên tắc Redux 22 2.4.6 Vòng đời React-Native .23 2.4.6.1 Constructor(props) 23 2.4.6.2 ComponentWillMount() 23 2.4.6.3 Render() 23 2.4.6.4 ComponentDidMount() 24 v 2.4.6.5 ComponentWillReceiveProps(nextProps) 24 2.4.6.6 ShouldComponentUpdate(nextProps, nextState) 24 2.4.6.7 ComponentWillUpdate(nextProps, nextState) 24 2.4.6.8 ComponentDidUpdate(prevProps, prevState) 24 2.4.6.9 ComponentWillUnmount() 24 2.4.7 Cấu trúc thư mục ứng dụng react native .24 2.5 Tìm hiểu Google Maps Api 25 2.5.1 Giới Thiệu Google Maps Google Maps Api 25 2.5.2 Google Maps Overlays (Lớp phủ) 26 2.5.2.1 Thêm marker 26 2.5.2.2 Polyline 27 2.5.2.3 Polygon 27 2.5.2.4 Circle 27 2.5.2.5 InfoWindow 28 2.6 Giới thiệu Nodejs 28 2.6.1 Khái niệm Node js 28 2.6.2 Ứng dụng NodeJS .28 2.6.3 Cách thức hoạt động nodejs 28 2.6.4 Ưu điểm NodeJS 29 2.6.5 Nhược điểm: .29 2.6.6 Các NodeJS framework sử dụng phổ biến 30 2.6.6.1 Express 30 2.6.6.2 SocketIO 30 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG 31 3.1 Phân tích yêu cầu .31 3.1.1 Nghiệp vụ 31 3.1.1.1 Đối tượng sử dụng 31 3.1.1.2 Chức 31 3.1.2 Phạm vi toán 31 3.2 Mơ hình hóa hệ thống 31 3.2.1 Yêu cầu chức nghiệp vụ 31 3.2.2 Yêu cầu chức hệ thống 33 3.2.3 Yêu cầu phi chức 33 vi 3.2.4 Xác định tác nhân .33 3.3 Thiết kế xử lí 34 3.3.1 Use case .34 3.3.2 Đặc tả usecase 34 3.3.2.1 Use case Đăng nhập 34 3.3.2.2 Use case Đăng ký 35 3.3.2.3 Use case Đăng xuất 36 3.3.2.4 Use case Tìm kiếm 36 3.3.2.5 Use case Chỉnh sửa thông tin tài khoản 37 3.3.2.6 Use case Quản lí hộ 37 3.3.2.7 Use case thay đổi mật 38 3.3.2.8 Use case quản lý yêu thích 38 3.3.2.9 Use case bình luận 39 3.3.2.10 Use case đặt mua 39 3.3.2.11 Use case quản lý chi tiết hộ 40 3.3.3 Sequence diagram 41 3.3.3.1 Đăng nhập 41 3.3.3.2 Đăng ký 41 3.3.3.3 Đăng xuất 42 3.3.3.4 Tìm kiếm 42 3.3.3.5 Bình luận 43 3.3.3.6 Chỉnh sửa thông tin tài khoản 43 3.3.3.7 Quản lý hộ 44 3.3.3.8 Đổi mật 44 3.3.3.9 Quản lý yêu thích 45 3.3.3.10 Đặt mua 45 3.3.3.11 Quản lý chi tiết hộ 46 3.3.4 Sơ đồ lớp – Class Diagram 47 3.3.4.1 Lớp Controller 47 3.3.4.2 Lớp Model 47 3.3.4.3 Lớp View 48 3.3.4.4 Class Diagram 48 3.3.5 Thiết kế sở liệu 49 3.3.5.1 Quan hệ bảng 49 vii 3.3.5.2 Danh sách chi tiết thuộc tính bảng 50 3.3.6 Thiết kế giao diện .53 3.3.6.1 Danh sách hình 53 3.3.6.2 Sơ đồ liên kiết hình 53 3.3.6.3 Đặc tả hình 55 3.3.6.4 Web 55 3.3.6.5 Ứng Dụng 65 3.3.7 Hiện thực hệ thống 77 3.3.7.1 Công nghệ sử dụng 77 3.3.7.2 Môi trường lập trình 77 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 79 4.1 Tổng kết 79 4.1.1 Về mặt lý thuyết .79 4.1.2 Về mặt thực 79 4.2 Hạn chế .80 4.3 Hướng phát triển đề tài .80 TÀI LIỆU THAM KHẢO 82 viii DANH MỤC CÁC CHỮ VIẾT TẮT EJB : Enterprise JavaBeans DI : Dependency Injection JMX : Java Management Extensions RMI : Remote Method Invocation ix DANH MỤC CÁC BẢNG BIỂU Bảng 3.1: Chức nghiệp vụ khách hàng 32 Bảng 3.2: Chức nghiệp vụ quản trị hệ thống 32 Bảng 3.3: Yêu cầu chức hệ thống 33 Bảng 3.4: Yêu cầu phi chức 33 Bảng 3.5: Tác nhân 33 Bảng 3.6: Bảng mô tả bảng sở liệu .49 Bảng 3.7: Chi tiết thuộc tính bảng ‘TaiKhoan’ .50 Bảng 3.8: Chi tiết thuộc tính bảng ‘ThongTinTaiKhoan’ 50 Bảng 3.9: Chi tiết thuộc tính bảng ‘YeuThich’ 50 Bảng 3.10: Chi tiết thuộc tính bảng ‘BinhLuan’ 51 Bảng 3.11: Chi tiết thuộc tính bảng ‘ViTri’ 51 Bảng 3.12: Chi tiết thuộc tính bảng ‘CanHo’ 51 Bảng 3.13: Chi tiết thuộc tính bảng ‘HoSoPhapLy’ 52 Bảng 3.14: Chi tiết thuộc tính bảng TienIchKhu’ 52 Bảng 3.15: Chi tiết thuộc tính bảng ‘MatBang’ 52 Bảng 3.16: Chi tiết thuộc tính bảng ‘MauThietKe’ .52 x DANH MỤC CÁC HÌNH ẢNH BIỂU ĐỒ Hình ảnh : 2.1.1 giới thiệu Reactjs Hình ảnh : 2.1.2 Virtual DOM Hình ảnh : 2.1.3 Dữ liệu chia thành components Hình ảnh : 2.2.1 Lược đồ mô tả mối quan hệ Spring Core với thành phần khác 10 Hình ảnh : 2.4.1 Redux flow 22 Hình ảnh : 2.4.2 Vịng đời React-native 23 Hình ảnh : 3.3.1 Lược dồ chức Use case 34 Hình ảnh : 3.3.2 Sequence diagram đăng nhập 41 Hình ảnh : 3.3.3 Sequence diagram đăng kí 41 Hình ảnh : 3.3.4 Sequence diagram đăng xuất .42 Hình ảnh : 3.3.5 Sequence diagram tìm kiếm .42 Hình ảnh : 3.3.6 Sequence diagram bình luận .43 Hình ảnh : 3.3.7 Sequence diagram chỉnh sửa thông tin tài khoản 43 Hình ảnh : 3.3.8 Sequence diagram quản lý hộ .44 Hình ảnh : 3.3.9 Sequence diagram đổi mật .44 Hình ảnh : 3.3.10 Sequence diagram quản lý yêu thích 45 Hình ảnh : 3.3.11 Sequence diagram đặt mua .45 Hình ảnh : 3.3.12 Sequence diagram quản lý chi tiết hộ 46 Hình ảnh : 3.3.13 Class Diagram lớp controller 47 Hình ảnh : 3.3.14 Class Diagram lớp model 47 Hình ảnh : 3.3.15 Class Diagram lớp view 48 Hình ảnh : 3.3.16 Class Diagram thông tin hộ 48 Hình ảnh : 3.3.17 Quan hệ bảng .49 Hình ảnh : 3.3.18 Sơ đồ liên kết hình dành cho người dùng 54 Hình ảnh : 3.3.19 Màn hình Login 55 Hình ảnh : 3.3.20 Màn hình đăng kí 55 Hình ảnh : 3.3.21 Giao diện trang Home 56 Hình ảnh : 3.3.22 Thanh tìm kiếm 57 Hình ảnh : 3.3.23 Trang Location 57 Hình ảnh : 3.3.24 Trang show dự án .58 Hình ảnh : 3.3.25 Trang Contact 59 Hình ảnh : 3.3.26 Trang Dashboard 61 Hình ảnh : 3.3.27 Trang Home Admin 62 Hình ảnh : 3.3.28 Trang Quản lý dự án 62 Hình ảnh : 3.3.29 Trang chỉnh sửa thông tin dự án .63 Hình ảnh : 3.3.30 Trang quản lý comment 63 Hình ảnh : 3.3.31 Trang quản lý Favorite 64 Hình ảnh : 3.3.32 Màn hình bắt đầu .65 xi CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.35 Màn hình đăng kí 68 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.36 Màn hìn khám phá 69 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.37 Màn hình u Thích 70 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.38 Màn hình vị trí 71 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.39 Màn hình cá nhân 72 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.40 Màn hình chi tiết hộ 73 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.41 Màn hình đặt mua 74 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.42 Màn hình đổi mật 75 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG Hình ảnh : 3.3.44 Màn hình cập nhật thơng tin Hình ảnh : 3.3.43 Màn hình cạp nhật thơng tin 76 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG 3.3.7 Hiện thực hệ thống 3.3.7.1 Cơng nghệ sử dụng Web: Phía server: sử dụng java spring, sở dữu liệu mysql Phía client: sử dụng Reactjs để lập trình Mobile: Phía server: sử dụng nodejs, sở dữu liệu dùng mysql Phía client: sử dụng React Native để lập trình 3.3.7.2 Mơi trường lập trình Sử dụng cơng cụ visual studuo code để lập trình quản lý code - Visual Studio Code trình biên tập mã phát triển Microsoft dành cho Windows, Linux macOS.Hỗ trợ nhiều ngơn ngữ lập trình phù hợp với nhu cầu lập trình viên - Là cơng cụ sử dụng miễn phí trả phí - Sublime Text khác với IDE khác điểm nhẹ, linh hoạt, cài đặt dễ dàng, dễ sử dụng, cung cấp nhiều tính tiện lợi cho lập trình viên - Thời gian khởi động Sublime Text nhanh, rơi vào khoảng 3-5 giây, khác với IDE khác thường phải chờ tầm 10 giây để mở lên - Hỗ trợ nhận diện, tô màu từ khóa cho 20 ngơn ngữ khác HTML, CSS, Javascript, PHP,… Sử dụng xampp để tạo server cho sở dữu liệu Xampp chương trình tạo máy chủ Web (Web Server) tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server công cụ phpMyAdmin Khơng Appserv, Xampp có chương trình quản lý tiện lợi, cho phép chủ động bật tắt khởi động lại dịch vụ máy chủ lúc Xampp mã nguồn mở máy chủ web đa phát triển Apache Friends, bao gồm chủ yếu Apache HTTP Server, MariaDB database, interpreters dành cho đối tượng sử dụng ngôn ngữ PHP Perl Xampp viết tắt Cross-Platform (đa tảng-X), Apache (A), MariaDB (M), PHP (P) Perl (P) Nó phân bố Apache nhẹ đơn giản, khiến lập trình viên dễ dàng tạo máy chủ web local để kiểm tra triển khai trang web Tất thứ cần cho phát triển trang web - Apache (ứng dụng máy chủ), Cơ sở 77 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG liệu (MariaDB) ngơn ngữ lập trình (PHP) gói gọn tệp Xampp đa tảng chạy tốt Linux, Windows Mac Hầu hết việc triển khai máy chủ web thực tế sử dụng thành phần XAMPP nên dễ dàng để chuyển từ máy chủ local sang máy chủ online 78 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Tổng kết Trong thời gian bắt đầu nhận đề tài đến sau trải qua việc phân tích tìm kiếm hướng giải để thực đề tài nhìn chung nhóm hồn thành mục tiêu mong muốn mà ban đầu đặt Qua việc tự học tìm kiếm thơng tin qua mạng để thực đề tài, nhóm em biết hiểu quy trình xây dựng ứng dụng cách sử dụng công cụ hỗ trợ cho việc lập trình, cách phân tích sở liệu, việc giải vấn đề… Qua giúp nhóm em cải thiện nhiều kỹ có thêm nhiều kinh nghiệm 4.1.1 Về mặt lý thuyết Sau thời gian học tập thực nhóm hiểu về: - Hoạt động sử dụng thành thạo Reactjs, React Native, React-routerSpring Framework, Nodejs - Cách tạo, sử dụng sở liệu hệ quản trị sở liệu MySQL - Tìm hiểu, phân tích hệ thống xây dựng website ứng dụng hỗ trợ - giao dịch bất động sản Biết cách cấu hình sử dụng số thư viện đặc biệt : react-map, redux, redux saga Biết cách tạo restful api bằng nodejs 4.1.2 Về mặt thực Xây dựng website ứng dụng hỗ trợ giao dịch bất động sản: - Đối với thành viên: + Chức đăng kí - + Chức đăng nhập + Chức đăng xuất + Chức tìm hộ + Chức bình luận + Chức đặt mua hộ + Cập nhật chỉnh sửa thông tin cá nhân thành viên tên, mật khẩu… + Chức thêm xóa mục u thích + Chức xem thông tin chi tiết hộ Đối với người quản trị: 79 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN + Chức đăng nhập, đăng xuất + Chức quản lý hộ + Chức quản lý chi tiết hộ + Có tồn chức thành viên 4.2 Hạn chế Nhìn chung website ứng dụng đạt kết đáng tự hào q trình xây dựng Nhưng cịn vài hạn chế số tính chẳng hạn : - Chưa tích hợp tính hỗ trợ đặt cọc bằng thẻ ứng dụng web Chưa tích hợp tính mơ hình trí tuệ nhân tạo (trong việc đề xuất hiển thị hộ) vào dự án - Chưa cấp quyền đăng tải tin tức dành cho khách hàng - Chưa có tính thơng báo cho khách hàng - Ứng dụng chưa cho người dùng xem hết toàn cảnh dự án 4.3 Hướng phát triển đề tài Đề tài xây dựng website mang tiêu chí tối ưu tìm kiếm cho người đề tài khơng nhỏ Với lượng thời gian kiến thức cịn hạn chế nên đề tài mang tính nhằm giúp người dùng tìm kiếm tham khảo dự án quan tâm nhiều Nếu nói việc tham khảo xong đặt mua đề tài chưa thể bao quát hết Do hướng phát triển đề tài thiếu Để có nhìn xa tương lai mang lại sự thỏa mãn cho người, đề tài “Xây dựng ứng dụng website hỗ trợ giao dịch bất động sản” cần phải có hướng phát triển sau: - Việc mua bán bất động sản gặp nhều vấn đề giấy tờ pháp lý việc mua bán oline bất tiện việc xác thực Nên toán đặt cọc mua bất động - - sản cần liên kết với quan có thẩm quền Áp dụng thuật tốn ghi nhớ loại hộ(phong cách , nguyên hộ hay chung cư …) mà khách hàng hay xem mục yêu thích khách hàng để lần đăng nhập đề xuất hiển thị loại hộ đầu tiên hình Người dùng cấp quyền để đăng tải dự án phải sự phê duyệt người quản trị Thêm chức thông báo cho khách hàng người quản trị thêm hộ 80 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN - Sẽ cập nhật thêm hình ảnh 3D 360 độ để người dùng xem chi tiết tồn cảnh dự án Với hướng phát triển trên, nhóm tin rằng tương lai ứng dụng web phát triển thị trường người dùng, với tính giúp cho người dùng hài lòng dự án mà họ muốn nhắm tới để đầu tư 81 TÀI LIỆU THAM KHẢO [1] [2] http://online.khoapham.vn/ https://reactjs.org/tutorial/tutorial.html [3] https://nordiccoder.com/blog/tong-quan-ve-react-native/ [4] https://developers.google.com/maps/documentation/javascript/tutorial [5] https://code.tutsplus.com/vi/articles/tools-for-react-native-development-cms-29791 https://viblo.asia/p/tong-quan-ve-node-js-AeJ1vOdQRkby https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html [6] [7] 82 ... hợp ứng dụng Web ứng dụng mobile Tức chúng vừa cài đặt lên điện thoại người dùng giống ứng dụng Native bình thường người dùng tìm thấy chúng chợ ứng dụng khó nhận đâu ứng dụng Native đâu ứng dụng. .. dự án 1.2 Mục tiêu đề tài Xây dựng website mobile ứng dụng hỗ trợ người dùng giao dịch dự án bất động sản 1.3 Nội dung Tìm hiểu lý thuyết cơng nghệ, thuật toán áp dụng để thực đề tài - Reactjs,... NodeJS xây dựng Proxy phân vùng luồng liệu để đảm bảo tối đa hoạt động cho luồng liệu khác • Ứng dụng Web thời gian thực Với sự đời ứng dụng di động & HTML nên Node.js hiệu xây dựng ứng dụng