Đồ án rút trích và trực quan hóa dữ liệu trong lĩnh vực bất động sản

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN CÔNG HIẾU – 18520743 VŨ CÁT - 18520515 ĐỒ ÁN RÚT TRÍCH VÀ TRỰC QUAN HĨA DỮ LIỆU TRONG LĨNH VỰC BẤT ĐỘNG SẢN Extraction and data visualization in Real Estate KHOA CÔNG NGHỆ PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS TRẦN ANH DŨNG, ThS PHAN TRUNG HIẾU TP HỒ CHÍ MINH, NĂM 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập – Tự Do – Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Rút trích trực quan hóa liệu lĩnh vực bất động sản Cán hướng dẫn: Ths Trần Anh Dũng, ThS Phan Trung Hiếu Thời gian thực hiện: Từ ngày 30/03/2021 đến ngày 30/06/2021 Sinh viên thực hiện: Nguyễn Công Hiếu – 18520743 Vũ Cát - 18520515 Nội dung đề tài: • Mục tiêu: • Xây dựng hệ thống bao gồm chức trang thông tin bất động sản: xem tin bất động sản, tìm kiếm thơng tin như: thơng tin để liên lạc người bán, giá cả, địa chỉ, thể chi tiết thơng tin bất động sản • Xây dựng hệ thống cho phép người dùng tìm kiếm, so sánh thơng tin cách trực quan dựa liệu thu thập từ trang thơng tin khác • Xây dựng trang web thơng tin có tin tức thị trường bất động sản • Xây dựng hệ thống với công nghệ Nodejs, Reactjs, MongoDB Nhóm em chọn cơng nghệ chúng có tính bao qt rộng hơn, Nodejs hỗ trợ bất đồng giúp nhiều phương thức chạy động thời, MongoDB noSQL hỗ trợ dễ dàng việc thêm liệu, không cần khai báo biến mà sử dụng “key: value”, Reactjs frontend facebook tạo ra, hỗ trợ nhiều thư viện, giúp dễ dàng việc xây dựng ứng dụng • Đối tượng: Những người có nhu cầu tìm kiếm chia sẻ thơng tin bất động sản • Tính mới/ khác biệt chức năng: • Thêm ý tưởng: Các trang bất động sản đa số có phương thức hoạt động tương đồng hình thức chia sẻ thơng tin bất động sản, thông tin cung cấp tràn lan, chiều, tính xác thực, khơng có nhận xét từ người dùng Đồng thời trang web khơng có hệ thống so sánh thông tin cách rõ ràng Vì nhóm em định xây dựng trang web thơng tin bất động sản thu thập liệu từ nhiều nguồn thông tin khác nhau, hiển thị trực quan hóa cho người dùng nhận xét dễ dàng lựa chọn theo nhu cầu Chúng em thêm chức recommend thơng tin bất động sản dựa lượt tìm kiếm người dùng dựa thơng tin, địa người dùng để có thơng tin bất động sản cần thiết cho người dùng • Chọn lọc chức năng: Khảo sát qua trang bất động sản lớn Việt Nam diaoconline.vn, batdongsan.com.vn, alonhadat.com.vn,… nhóm nhận thấy: Khi tìm thơng tin bất động sản thích khách hàng khơng thể lưu lại, lần muốn xem thông tin khách hàng phải tìm đến thơng tin Hạn chế việc tìm kiếm thơng tin Vì ứng dụng nhóm có thêm phần danh sách ưa thích, người dùng thấy thích nơi chọn lưu vào danh sách để xem lại sau Các trang bất động sản trình bày theo hình thức đơn giản, khiến người dùng dễ dàng sử dụng lần đầu vào trang web Cũng mà nhóm thiết kế giao diện gọn gàng không rối mắc Nhóm em thu thập tất thơng tin thật chủ để hạn chế thơng tin rác khơng xác khiến người tim kiếm sai thật Ngồi cịn chức trang bất động sản tìm kiếm, đăng tin, sửa tin, xem thơng tin chi tiết • Phạm vi: • Phạm vi địa lý: Ứng dụng sử dụng Việt Nam • Phạm vi chức năng: Quản lý người sử dụng Quản lý viết Quản lý thông tin bất động sản Quản lý biểu đồ Quản lý tìm kiếm thơng tin (recommend viết) • Phương pháp thực hiện: • Làm việc cá nhân, sử dụng request để lấy thông tin từ trang web cụ thể, lưu xuống database xuất lên cho người dùng thấy • Xậy dựng database với mongoDB • Xây dựng hệ thống Restful API với nodejs express • Cơng nghệ sử dụng: • ReacJs • MongoDB • Nodejs • ExpressJs • Postman • PrimeReact, chartjs • Visual Code Lí sử dụng cơng nghệ trên: - Nodejs backend bất đồng bộ, khiến chức chạy xong xong với nhau, điều giúp ứng dụng chạy mượt hơn, khơng có khoảng khắc ứng dụng gần khơng làm - MongoDB noSQL, dạng liệu mã nguồn mở, khai báo thứ mà khơng cần phải sợ sai kiểu liệu MongoDB đọc theo dạng (key : value) - Reactjs frontend nhiều phần mềm sử dụng tính phong phú đa dạng, nhiều thư việc hỗ trợ, nên tuỳ biến phần frontend trở nên đẹp mà không thô cứng - ExpressJs công nghệ sử dụng phần backend Nodejs, giúp xây dựng API để gọi tới MongoDB - PrimeReact, chartjs thư viện hỗ trợ việc xây dựng biểu đồ để trực quan hóa liệu cách dễ dàng - Postman chương trình ngồi để kiểm tra API cách độc lập mà không cần phải thao tác ứng dụng - Visual Code phần mềm để viết thực thi dịng lệnh • Kết mong đợi: - Hoàn thiện ứng dụng web thu thập chia sẻ thông tin bất động sản, đáp ứng đủ nhu cầu - Trực quan hóa liệu thu thập hiển thị cho người dùng • Định hướng phát triển: Mở rộng thêm trang web khác, thêm tính tiện lợi cho người dùng Kế hoạch thực hiện: (thời gian thực tuần) STT Công việc Phase 1: Tìm hiểu xây dựng ứng dụng web có Thời gian thực Phân cơng tuần backend frontend Sprint 1: Tìm hiểu định nghĩa Nodejs + Express + Reactjs + mongodb - Nodejs gì? - Express gì? 1.1 - Reactjs gì? Tuần – (29/3/2021 – Hiếu, 11/4/2021) Cát - Mongodb gì? - Cách kết hợp chúng lại với 2.1 Sprint 2: Xây dựng ứng dụng kết hợp Nodejs + Express + Reactjs - Xây dựng ứng dụng để hiểu luồng Tuần – (12/4/2021 – chạy ngôn ngữ, kết hợp sever nodejs 26/4/2020) Cát reactjs thành Phase 2: Xây dựng ứng dụng thu nhập chia sẻ Hiếu, tuần thông tin trang web 3.1 Sprint 3: Xây dựng RESTful API với database mongodb - Tạo database kết nối mongodb Tuần – (2/5/2021 – Hiếu - Tạo API để lấy thông tin từ đường link cụ 30/5/2021) thể, xuất thông tin trả cho người dùng - Tạo API thêm, sửa, xoá lĩnh vực Sprint 4: Xây dựng Frontend với Reactjs - Tạo trang web với Reactjs 4.1 - Gọi API từ Backend lên Frontend để sử dụng Tuần – (2/5/2021 – 30/5/2021) Cát - Thiết kế chỉnh sửa UI/UX Phase 3: Kiểm thử đánh giá 5.1 tuần Sprint 5: Kiểm thử - Kiểm thử Tuần - 10 (6/6/2021 – Hiếu, - Đánh giá 13/6/2021) Cát Xác nhận CBHD TP HCM, ngày 29 tháng 03 năm 2021 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Lời cảm ơn Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến tập thể quý thầy cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý thầy cô khoa Công nghệ phần mềm giúp cho chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm tác giả xin gửi lời cảm ơn lòng biết ơn sâu sắc tới thầy Trần Anh Dũng, người hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báu giúp tụi em hồn thành báo cáo mơn học Trong thời gian học đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, trình thực khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía thầy/cơ nhằm hồn thiện kiến thức mà em học tập hành trang để em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý thầy/cô! NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… Giảng viên hướng dẫn ThS Trần Anh Dũng MỤC LỤC TÓM TẮT ĐỒ ÁN CHƯƠNG TỔNG QUAN 1.1 Đặt vấn đề 1.2 Phát biểu toán 1.2.1 Giới thiệu hệ thống website “Rút trích trực quan hóa thơng tin bất động sản” 1.2.2 Khảo sát hệ thống liên quan 1.3 Mục tiêu phạm vi đề tài 1.3.1 Mục tiêu 1.3.2 Phạm vi 1.3.3 Đối tượng sử dụng 1.3.4 Kết dự kiến CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Nodejs 2.1.1 Giới thiệu Nodejs 2.1.2 Tại nên sử dụng Nodejs 2.1.3 Áp dụng Nodejs vào đề tài 2.2 ExpressJS framework 2.2.1 Giới thiệu ExpressJS 2.2.2 Tại nên sử dụng ExpressJS 2.2.3 Áp dụng ExpressJS vào đề tài 2.3 MongoDB 2.3.1 Giới thiệu MongoDB 2.3.2 Tại nên sử dụng hệ quản trị sở liệu MongoDB 10 2.3.3 Áp dụng MongoDB vào đề tài 11 2.4 Reactjs 12 2.4.1 Giới thiệu Reactjs 12 4.3.5 Thiết lập biểu đồ: 4.3.5.1 Mô tả: Đây chức cho phép người dùng tìm kiếm thơng tin theo biểu đồ, giúp người dùng có nhìn trực quan thông tin nhà đất Người dùng truy cập vào hệ thống, tìm kiếm thơng tin, hệ thống cung cấp biểu đồ theo yêu cầu người dùng 4.3.5.2 Sơ đồ hoạt động: Hình 4.11 Sơ đồ hoạt động chức thiết lập biểu đồ 38 4.3.5.3 Sơ đồ tuần tự: Hình 4.12 Sơ đồ hoạt động chức thiết lập biểu đồ 39 4.4 Thiết kế kiến trúc: 4.4.1 Mơ hình kiến trúc Hiện nhóm em xây dựng đề tài web Project nhóm kế theo mơ hình: mơ hình MVC (Model-View-Controller) 4.4.2 Mơ tả MVC: mơ hình giúp tương tác người dùng giao diện đồ họa Mơ hình MVC gồm có phần: - Model: bao gồm liệu, trạng thái - View: đại diện Model, View có trách nhiệm render giao diện người dùng (UI) giao tiếp với controller người dùng tương tác với ứng dụng - Controller: phần điều khiển tổng thể xảy ứng dụng Khi View nói với Controller người dùng click vào nút, Controller định làm để tương tác với Model phù hợp Dựa liệu thay đổi Model, Controller định cập nhật lại trạng thái View 4.4.2.1 ExpressJS Express framework hỗ trợ việc phát triển ứng dụng theo mơ hình MVC, mơ hình phổ biến cho việc lập trình web • Cho phép định nghĩa Middleware hỗ trợ cho việc tổ chức tái sử dụng code • Định nghĩa routes request method đến server cách dễ dàng • Hỗ trợ REST API • Và nhiều thứ mà framework hỗ trợ, thử cài đặt xây dựng ứng dụng đơn giản 4.4.2.2 NodeJS server Trong hệ thống này, server sử dụng NodeJS Vậy NodeJS lý sử dụng nó: 40 • Node.js mã nguồn xây dựng dựa tảng Javascript V8 Engine Nó xây dựng để chạy server 4.4.2.3 Cơ sở liệu Hệ thống sử dụng hệ quản trị sở liệu MongoDB, dạng NoSQL không ràng buộc kiểu liệu giúp việc lưu trữ thông tin tiện nghi hơn, liệu lưu trữ server Mongo khơng phải máy tính người dùng Dữ liệu sau cào lưu server Mongo, ghi với : Ngoài hệ sở liệu mongodb cung cấp phương thức CRUD để thuận tiện việc thao tác 4.4.3 Thiết kế sở liệu: 4.4.3.1 Tổng quan sở liệu: Hình 4.13 Thiết kế sở liệu 41 Tên Collection Ý nghĩa Field Thông tin tin tức bất động sản FieldDetail Thông tin chi tiết tin tức bất động sản User Thông tin người dùng hệ thống STT Bảng 4.3 Các collection 4.4.3.2 Mô tả chi tiết collection 4.4.3.2.1 User Thuộc tính Ý nghĩa _id ID người dùng username Tên đăng nhập người dùng email Email người dùng password Mật người dùng STT Bảng 4.4 Thông tin chi tiết collection user 42 4.4.3.2.2 Field Thuộc tính Ý nghĩa _id ID tin tức title Tên tin tức bất động sản img Đường link dẫn đến hình ảnh minh hoạ cho STT tin tức type Thể loại tin tức (mua, bán, thuê, …) user Người đăng tin like Số lượt thích tin tức comment Số lượt comment tin tức Bảng 4.5 Thông tin chi tiết collection field 4.4.3.2.3 FieldDetail Thuộc tính Ý nghĩa _id ID chi tiết tin tức title Tiêu đề đăng image Đường link dẫn tới hình ảnh price Giá tiền area Diện tích address Địa tin tức description Nội dung chi tiết tin tức bất động sản fieldId ID tin tức STT Bảng 4.6 Thông tin chi tiết collection fieldDetail 43 4.4.4 Thiết kế giao diện: 4.4.4.1 Màn hình đăng kí tài khoản: Hình 4.14 Màn hình đăng kí STT Tên đối tượng Chức năg EditText Username Nhập tên tài khoản EditText Email Nhập email sử dụng EditText Password Nhập mật Button Đăng Nhập Chuyển qua hình đăng nhập Button Đăng Ký Thực đăng kí tài khoản - Người dùng cần nhập đầy đủ thông tin, hệ thống cảnh báo người dùng nhập thiếu - Sau đăng kí thành cơng có thơng báo cho người dùng Bảng 4.7 Mô tả thành phần hình đăng kí 44 4.4.4.2 Màn hình đăng nhập: Hình 4.15 Màn hình đăng nhập STT Tên đối tượng Chức năg EditText Username Nhập tên tài khoản EditText Password Nhập mật Button Đăng Ký Chuyển qua hình đăng ký Button Đăng Nhập Thực đăng nhập tài khoản - Người dùng cần nhập đầy đủ thông tin, hệ thống cảnh báo người dùng nhập thiếu - Sau đăng nhập thành công chuyển đến hình trang chủ Bảng 4.8 Mơ tả thành phần hình đăng nhập 45 4.4.4.3 Màn hình trang chủ: Hình 4.16 Màn hình trang chủ 46 4.4.4.4 Màn hình xem thơng tin tìm kiếm: Hình 4.17 Màn hình thơng tin viết 47 4.4.4.5 Màn hình xem chi tiết thơng tin viết: Hình 4.18 Màn hình thơng tin chi tiết viết 48 4.4.4.6 Màn hình xem thơng tin biểu đồ: Hình 4.19 Màn hình thông tin biểu đồ 49 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết luận: Qua trình thực đồ án, nhóm đạt kết quả: Ưu điểm: - Đã tự xây dựng ứng dụng hồn thiện, có back-end front-end, tự xây dựng lên framework API cho hệ thống - Ứng dụng web có tính hệ thống thu thập chia sẻ liệu bất động sản tìm kiếm, xếp,… - Xây dựng ứng dụng theo quy trình cụ thể, sử dụng ngôn ngữ học Nodejs Reactjs kết hợp với tích hợp hỗ trợ để khiến hệ thống đa dạng - Nhóm hoàn thành yêu cầu qua trọng đồ án rút trích liệu trực quan hóa liệu bất động sản, đồng thời tạo hệ thống tìm kiếm xếp thơng tin cho người dùng,… Nhược điểm: - Cịn số tính đề ban đầu nhóm khơng thực thêm vào danh sách yêu thích, thích hay bình luận đăng,… - Ứng dụng cịn hạn chế lượng tin tức - Giao diện chưa đẹp bắt mắt 5.2 Hướng phát triển: Qua trình thực đồ án, tính tới thời điểm tại, em nhận thấy đồ án cịn thiếu sót cần khắc phục phát triển thời gian tới như: - Crawler thêm nhiều tin tức từ nhiều nguồn khác để nội dung trang web phong phú - Phát triển thêm nhiều biểu đồ cụ thể để người dùng dễ dàng so sánh 50 - Hoàn thiện thêm chức đề ban đầu thêm vào tính đăng bài, trang thông tin cá nhân người dùng, - Cải thiện lại giao diện cho bắt mắt - Cải thiện nâng cấp chức tìm kiếm xếp - Giới thiệu sản phẩm tới đông đảo người dùng 51 Chương TÀI LIỆU THAM KHẢO [1] "Cherrio" [Online] Available: https://cheerio.js.org/ [2] "ExpressJS" [Online] Available: https://expressjs.com/ [3] "MongoDB" [Online] Available: https://www.mongodb.com/ [4] "NodeJS" [Online] Available: https://nodejs.org/en/docs/ [5] Tài liệu JavaScript: https://javascript.info/37 [6] Tài liệu React: https://reactjs.org/docs/getting-started.html [7] StackOverFlow: https://stackoverflow.com/ 52 ... trường lúc 1.2 Phát biểu toán 1.2.1 Giới thiệu hệ thống website ? ?Rút trích trực quan hóa thơng tin bất động sản? ?? - Hệ thống thu thập, rút trích có chọn lọc thơng tin bất động sản cách hiệu bao gồm:... ? ?Rút trích trực quan hóa thơng tin bất động sản? ?? - Hệ thống thu thập, rút trích có chọn lọc thông tin bất động sản cách hiệu bao gồm: nội dung, giá cả, địa chỉ, người liên lạc, thơng tin dự án. .. Postman vào đồ án: 15 CHƯƠNG PHÁT BIỂU BÀI TOÁN 16 3.1 Giới thiệu hệ thống website ? ?Rút trích trực quan hóa thơng tin bất động sản? ?? 16 3.2 Khảo sát hệ thống liên quan