(Đồ án hcmute) xây dựng hệ thống ứng dụng tìm phòng trọ trên di động

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG HỆ THỐNG ỨNG DỤNG TÌM PHỊNG TRỌ TRÊN DI ĐỘNG GVHD: THS NGUYỄN TRẦN THI VĂN SVTH: NGUYỄN THÀNH ĐỒNG SVTH: HỒ NGỌC SƠN HÀ SKL 0 Tp Hồ Chí Minh, tháng 07/2020 an TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM NGUYỄN THÀNH ĐỒNG – 16110311 HỒ NGỌC SƠN HÀ – 16110533 Đề tài: XÂY DỰNG HỆ THỐNG ỨNG DỤNG TÌM PHỊNG TRỌ TRÊN DI ĐỘNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN TRẦN THI VĂN KHÓA 2016 – 2020 an TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM NGUYỄN THÀNH ĐỒNG – 16110311 HỒ NGỌC SƠN HÀ – 16110533 Đề tài: XÂY DỰNG HỆ THỐNG ỨNG DỤNG TÌM PHỊNG TRỌ TRÊN DI ĐỘNG KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN TRẦN THI VĂN KHÓA 2016 – 2020 an ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Thành Đồng MSSV 1: 16110311 Họ tên Sinh viên 2: Hồ Ngọc Sơn Hà MSSV 2: 16110533 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng hệ thống ứng dụng tìm phịng trọ di động Họ tên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an năm 2020 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Thành Đồng MSSV 1: 16110311 Họ tên Sinh viên 2: Hồ Ngọc Sơn Hà MSSV 2: 16110533 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng hệ thống ứng dụng tìm phịng trọ di động Họ tên Giáo viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên phản biện (Ký & ghi rõ họ tên) an năm 2020 LỜI CẢM ƠN Nhóm em xin chân thành cảm ơn khoa Công Nghệ Thông Tin, Bộ môn Công nghệ phần mềm, trường Đại học Sư Phạm Kỹ Thuật Thành phố Hồ Chí Minh tạo điều kiện thuận lợi cho chúng em thực đề tài Chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Trần Thi Văn, giáo viên hướng dẫn tận tình bảo hướng dẫn nhóm em thời gian thực đề tài Bên cạnh đó, chúng em xin gửi lời cảm ơn đến thầy trường nói chung, người giảng dạy tạo điều kiện cho em tích lũy kiến thức quý báu năm học qua Dù cố gắng hoàn thành đề tài khóa luận yêu cầu, khả cịn hạn chế nên chắn khơng tránh khỏi thiếu sót Chúng em mong nhận bảo, nhận xét thầy để nhóm có điều kiện bổ sung, nâng cao ý thức, phục vụ tốt cho công tác thực tế sau Nhóm chúng em xin chân thành cảm ơn! Tp Hồ Chí Minh, ngày tháng năm 2020 Sinh viên thực (Ký & ghi rõ họ tên) an Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa Công nghệ Thông tin ĐỀ CƯƠNG TIỂU LUẬN CHUYÊN NGÀNH Họ tên Sinh viên thực 1: Nguyễn Thành Đồng MSSV: 16110311 Họ tên Sinh viên thực 2: Hồ Ngọc Sơn Hà MSSV: 16110533 Thời gian làm luận văn: Từ 30/3/2020 đến 12/7/2020 (15 tuần) Chuyên ngành: Công nghệ phần mềm Tên luận văn: Xây dựng hệ thống ứng dụng tìm phịng trọ di động GV hướng dẫn: ThS.Nguyễn Trần Thi Văn Nhiệm vụ khóa luận: Tìm hiểu Flutter, Firebase Google Maps Platform Tìm hiểu Serverside Rendering NextJS, React Xây dựng ứng dụng tìm trọ di động với số chức bản: - Đăng nhập, đăng ký, đăng xuất tài khoản - Xem danh sách trọ phịng - Xem thơng tin chi tiết phịng trọ - Tìm kiếm phịng trọ xung quanh vị trí - So sánh thơng tin chi tiết phịng trọ - Thêm, xóa phịng trọ - Đăng, xóa viết diễn đàn - Bình luận, đánh giá viết diễn đàn Xây dựng trang web quản lý cho Admin với số chức sau : - Đăng nhập, đăng xuất tài khoản - Sửa phòng trọ đăng ký ứng dụng - Sửa thông tin tài khoản đăng ký ứng dụng an - Thêm, sửa viết diễn đàn Đề cương viết khóa luận: PHẦN MỞ ĐẦU PHẦN NỘI DUNG CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Tổng quan flutter 1.2 Tổng quan google firebase 1.3 Một số thành phần flutter 1.4 Tổng quan google map API 1.5 Tổng quan redux 1.6 Tổng quan typescript 1.7 Tổng quan nextjs CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 Khảo sát trạng 2.2 Xác định yêu cầu 2.3 Sơ đồ use case 2.4 Mô tả chi tiết use case CHƯƠNG PHÂN TÍCH, MƠ HÌNH HỐ U CẦU, THIẾT KẾ CSDL 3.1 Phân tích chức năng, thiết kế sở liệu 3.2 Mô tả sở liệu CHƯƠNG THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 4.1 Danh sách hình chuyển đổi 4.2 Danh sách hình 4.3 Danh sách xử lý CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG an 5.1 Cài đặt ứng dụng 5.2 Biểu đồ lớp (Class Diagram) 5.3 Kiểm thử ứng dụng PHẦN KẾT THÚC Những kết đạt Ưu điểm đề tài Hạn chế đề tài Hướng phát triển tương lai TÀI LIỆU THAM KHẢO an KẾ HOẠCH THỰC HIỆN Tuần Ngày Nhiệm vụ Phân Sản phẩm cơng 20/3/2020 - Tìm hiểu Serverside Đồng, Hà Tìm hiểu, nghiên cứu ghi chép: Rendering 5/4/2020 Tìm hiểu ReactJS 1+2 Hà • NodeJS, Express • ReactJS • Redux, Redux thunk, Redux Saga Đồng Tìm hiểu NextJS • Serverside Rendering NextJS 6/4/2020 Xây dựng ứng dụng Đồng, Hà Xây dựng Website Admin quản lý - Admin NextJS 26/4/2020 Xây dựng tính viết , phòng NextJS Hà đăng nhập 3+4+5 Xây dựng tính Đồng danh sách, ẩn, thêm, sửa phịng 27/4/2020 7+8 - Tích hợp Tinyrcm cho viết văn Tinyrcm cho báo 3/5/2020 website 4/5/2020 Thêm tính Filter Đồng Xây dựng tính tìm kiếm - để tìm kiếm phịng phịng theo tiêu chí giá, diện 18/5/2020 theo thơng tin cho ứng tích, tính năng: tiền điện, dụng di động nước, phịng ghép, ban cơng,… Thêm tính năm viêt Đồng Tích hợp viết, tìm kiếm, - cho ứng dụng di động xếp chi tiết viết 14/6/2020 ứng dụng di 19/5/2020 9+10+11 Tìm hiểu tích hợp Đồng động 15/6/2020 12 21/6/2020 Tích hợp Right Hà Sidebar chỉnh sửa Appbar an Thêm giao diện tính cho tồn ứng dụng Ghi Xây dựng hệ thống ứng dụng tìm phịng trọ di động Nhập nội dung Nhấn chọn (5) điền nội dung phòng phòng Nhán chọn (6) chọn ảnh muốn Thêm ảnh Chọn vị trí phịng Chọn vị trí phịng đồ (7) Nhập địa Nhấn chọn (8) điền địa phòng Lưu phòng thêm Nhấn chọn (9) để thêm/sửa thơng tin phịng DANH SÁCH BÀI ĐĂNG (ADMIN) Thiết kế giao diện Hình 4.22 Giao diện danh sách đăng (Admin) Mơ tả hình Bảng 51 Mơ tả hình danh sách đăng (Admin) STT Kiểu đối tượng Ý nghĩa Link Đến trang thêm đăng Link Đến trang danh sách đăng Option - Select Đến trang sửa thông tin đăng Option – Select Xóa thơng tin đăng Danh sách xử lý 84 an Ghi Xây dựng hệ thống ứng dụng tìm phịng trọ di động Bảng 52 Danh sách xử lý danh sách đăng (Admin) STT Tên xử lý Đến danh sách đăng Đến trang thêm đăng Đến trang sửa đăng Điều kiện gọi thực Nhấn chọn (1) Nhấn chọn (2) Nhấn chọn (3) muốn sửa Chọn (4) xác nhận “yes” để xóa, Xóa đăng “no” để khơng xóa CẬP NHẬT BÀI ĐĂNG (ADMIN) Thiết kế giao diện Hình 4.23 Giao diện cập nhật đăng (Admin) 85 an Ghi chú Xây dựng hệ thống ứng dụng tìm phịng trọ di động Mơ tả hình Bảng 53 Mơ tả hình cập nhật đăng (Admin) Kiểu đối tượng STT Ý nghĩa Input Nhập tiêu đề đăng Input Nhập mô tả đăng RichTextInput Nhập nội dung đăng Button Thêm đăng Ghi Danh sách xử lý Bảng 54 Danh sách xử lý cập nhật đăng (Admin) STT Điều kiện gọi thực Tên xử lý Nhập tiêu đề Nhấn chọn (1) nhập tiêu đề Nhập giới thiệu Nhấn chọn (2) nhập giới thiệu Ghi chú Nhấn chọn (3) nhập nội dung, sử Nhập nội dung dụng thao tác, công cụ khung văn bản(thêm hình, đường dẫn ) Lưu đăng Nhấn chọn (4) THIẾT KẾ XỬ LÝ Edit User Mô tả - Tại hình quản lý User, người quản lý chọn nút Update Data để chuyển đến hình EditUser - Sau người quản lý nhập thông tin, liệu đưa xuống Database để kiểm tra tính đắn Nếu liệu thơng tin người quản lý nhập vào thay đổi thành công thông báo kết Ngược lại liệu khơng thông báo thay đổi không thành công cho người quản lý 86 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Sơ đồ Hình 4.24 Sơ đồ Edit User Add Room Mơ tả - Tại hình trang chủ, người dùng chọn nút New để chuyển đến hình AddRoom - Sau người quản lý nhập thông tin, liệu đưa xuống Database để kiểm tra tính đắn Nếu liệu thơng tin người dùng nhập thêm vào thành công thông báo kết Ngược lại liệu khơng thơng báo thêm phịng khơng thành cơng cho người dùng 87 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Sơ đồ Hình 4.25 Sơ đồ Add Room Edit Room Mô tả - Tại hình danh sách phịng trọ, người dùng chọn nút Update Data để chuyển đến hình EditRoom - Sau người quản lý nhập thông tin, liệu đưa xuống Database để kiểm tra tính đắn Nếu liệu thơng tin người dùng nhập vào thay đổi thành công thông báo kết Ngược lại liệu khơng thơng báo thay đổi không thành công cho người dùng 88 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Sơ đồ Hình 4.26 Sơ đồ Edit Room 89 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG CÀI ĐẶT ỨNG DỤNG Thiết bị cài ứng dụng bắt buộc sử dụng hệ điều hành Android thỏa yêu cầu sau đây: • Phiên Android 4.4 trở lên (KitKat) • Có thể truy cập Internet Tải ứng dụng cài đặt link: https://drive.google.com/open?id=1t2QIMznmbAAS6zxJFTGeIQepfDrCRO4B Trường hợp yêu cầu xác nhận cho phép cài đặt ứng dụng không rõ nguồn gốc (Unknown source App Installation), vào Cài đặt (Setting) Bảo mật (Secure) Chọn Cho phép cài đặt ứng dụng từ nguồn không rõ nguồn gốc (Allow installation of apps from unknown sources) 90 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động BIỂU ĐỒ LỚP (CLASS DIAGRAM) Ứng dụng tìm kiếm phịng trọ Hình 5.1 Biểu đồ lớp ứng dụng tìm kiếm phịng trọ 91 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Trang quản lý Admin Hình 5.2 Biểu đồ lớp trang quản lý Admin 92 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động KIỂM THỬ ỨNG DỤNG Bảng 55 Kiểm thử ứng dụng ID Mô tả Kết mong đợi Testcase Tiến hành cài đặt Tải ứng dụng Cài đặt ứng dụng ứng dụng thiết máy thành công thiết bị thực 2.Tiến hành cài đặt Chịu trách nhiệm Kết Đồng Pass Hà Pass Đồng Pass bị thực Tiến hành thành Tiến hành tháo gỡ ứng dụng công tháo gỡ ứng ứng dụng thiết Tiến hành gỡ ứng bị thật dụng thiết bị dụng thực 1.Tiến hành mở app Tiến hành thử Tiến hành kiểm nghiệm giao diện Giao diện đơn thử giao diện có app chức giản, dễ sử dụng thích hợp, dễ sử bên thu hút người dùng dụng người dùng Hiểu tính Tiến hành kiểm tra tính realtime lưu data ứng dụng Firebase Database Làm ứng chất realtime lưu dụng database Mở lại ứng dụng, Firebase kiểm tra lại database Đảm bảo ứng load với tốc độ dụng hoạt động tốt nhanh hay chậm khối lượng data lớn 93 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Tiến hành kiểm thử Thu thập ý kiến ứng dụng môi Tiến hành tải trường thực tế với cài đặt app hệ điểu hành Tiến hành sử android từ 7.0 trở dụng app lên (2-3 thiết bị) chức có trong khoảng thời app Cải thiện chất lượng chức Hà Pass Hà Pass app Cải thiện giao diện người dùng gian từ 2-3 ngày từ người dùng 1.Tiến hành cài đặt Tải ứng dụng ứng dụng thiết máy bị thực Tiến hành cài đặt Cài đặt ứng dụng thành công thiết bị thực Tiến hành thành Tiến hành tháo gỡ ứng dụng ứng dụng thiết Tiến hành gỡ ứng bị thật dụng công tháo gỡ ứng dụng thiết bị thực 94 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động PHẦN KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC Tuy thời gian thực đề tài khơng thực dài nhóm tích lũy nhiều kinh nghiệm quý báu làm hành trang cho sau Nhờ giúp đỡ nhiệt tình Giáo viên hướng dẫn, Thầy Cơ mơn q trình học tập với cố gắng, nhóm đạt điểm đáng ý: • Hiểu quy trình xây dựng ứng dụng thực hành cơng việc làm nhóm • Đáp ứng thực yêu cầu công việc giao hạn • Nâng cao khả nghiên cứu, bổ sung kiến thức công nghệ ƯU ĐIỂM CỦA ĐỀ TÀI Qua trình thực đề tài, nhóm rút ưu điểm: • Sử dụng nhiều công nghệ hỗ trợ lập trình mạnh mẽ • Thường xun tiếp xúc với sản phẩm ứng dụng Android giúp nhóm có nhìn tổng quan tiếp thu điểm mạnh sản phẩm qua áp dụng vào ứng dụng đề tài • Đề tài thực phần lớn máy tính giúp tiết kiệm chi phí đầu tư, lưu trữ thông tin dễ dàng gọn nhẹ • Với ứng dụng Flutter, trình phát triễn hỗ trợ mạnh mẽ tài liệu từ Google IDE (Android Studio) dễ tương tác, dễ học áp dụng vào ứng dụng thực tế nhanh HẠN CHẾ CỦA ĐỀ TÀI Bên cạnh ưu điểm mà đề tài đạt được, tồn hạn chế sau: • Gói miễn phí Firebase, có nhiều hạn chế dịch vụ chưa ổn định (Vd : Firestore) 95 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động • Ứng dụng thiên định vị đồ, tốn nhiều chi phí cho sử dụng dịch vụ Google Map APIs HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI Về hoàn thành số chức năng, nhiên nhiều hạn chế bất cập nêu, số hạn chế trải nghiệm người dùng, lỗi framework với cố gắng, nghiên cứu tâm nhóm, đề tài cải thiến hoàn thiện để phát triển tương lai với hướng phát triển: • Ra mắt ứng dụng Google Play Store AppStore • Thu thập liệu trọ tìm nguồn liệu đáng tin cậy • Nâng cấp trải nghiệm người dùng, sử dụng hoạt họa vốn mạnh Flutter 96 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động TÀI LIỆU THAM KHẢO [1] https://topdev.vn/blog/flutter-la-gi/ [2] https://vi.wikipedia.org/wiki/Flutter_(ph%E1%BA%A7n_m%E1%BB%81m) [3] https://viblo.asia/p/tong-quan-ve-flutter-Eb85oyAkZ2G [4] https://firebase.google.com/docs/android/setup [5] https://viblo.asia/p/cung-tim-hieu-ve-firebase-cloud-firestore-ByEZk32YZQ0 [6] https://github.com/flutter/flutter/wiki/The-Engine-architecture?fbclid=IwAR377 iIs1OggHGLVDOhzsfJCu14gNxa2sI3nihRgC3cHF3g6YzKwzArx-k [7] https://techtalk.vn/tim-hieu-ve-google-map-api.html [8] https://developers.google.com/maps/documentation/android-sdk/intro [9] https://developers.google.com/maps/documentation/directions/intro [10] https://developers.google.com/maps/documentation/distance-matrix/intro [11] https://developers.google.com/maps/documentation/geolocation/intro [12] https://developers.google.com/maps/documentation/geocoding/intro [13] https://developers.google.com/maps/documentation/ios-sdk/intro [14] https://topdev.vn/blog/redux-la-gi/ [15] https://o7planning.org/vi/12141/gioi-thieu-ve-redux [16] https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB [17] https://topdev.vn/blog/typescript-la-gi/ [18] https://techblog.vn/nextjs 97 an S an K L 0 ... thường xuyên 22 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Ứng dụng Tìm Trọ Hình 2.4 Ứng dụng tìm trọ Ưu điểm • Giao di? ??n thân thiện, dễ dàng sử dụng • Quy trình tìm trọ đơn giản, khơng... vào ứng dụng an Xây dựng hệ thống ứng dụng tìm phịng trọ di động Phân tích, thiết kế xây dựng ứng dụng tìm trọ di động số chức sau: • Đăng nhập, đăng ký, đăng xuất tài khoản • Xem danh sách trọ. .. xuyên 21 an Xây dựng hệ thống ứng dụng tìm phịng trọ di động App tìm nhà trọ Landber Hình 2.3 Ứng dụng tìm nhà trọ Landber Ưu điểm • Giao di? ??n thân thiện, dễ dàng sử dụng • Quy trình tìm trọ đơn