Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động

MỤC LỤC PHẦN MỞ ĐẦU PHẦN NỘI DUNG CHƯƠNG CƠ SỞ LÝ THUYẾT Giới thiệu Flutter Lịch sử phát triển Flutter Đặc điểm Flutter Ưu, nhược điểm Flutter Giới thiệu Google Firebase Lịch sử Firebase Chức Firebase Đặc điểm bật Firebase 10 Ngôn ngữ 10 Cấu hình tác vụ 11 Tài liệu 11 Tổng quan Google Map API 12 Các dịch vụ Google Map APIs 12 Giới thiệu Redux 14 Lịch sử phát triển Redux 14 Đặc điểm Redux 15 Giới thiệu TypeScript 16 Đặc điểm TypeScript 16 Ưu điểm TypeScript 17 Giới thiệu NextJs 18 Đặc điểm NextJs 18 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 20 Ứng dụng tìm nhà trọ Hello Rent 20 Ứng dụng tìm nhà trọ Doong 21 App tìm nhà trọ Landber 22 Ứng dụng Tìm Trọ 23 Yêu cầu chức 23 Yêu cầu phi chức 24 Yêu cầu hệ thống 25 Sơ đồ use case tổng quan 26 Sơ đồ use case cho Finder 27 Sơ đồ use case cho Innkeeper 27 Sơ đồ use case cho Guess 28 Sơ đồ use case cho Admin 28 Sign In 29 Sign Up 29 Search Rooms 30 View Rooms 30 Compare Rooms 31 Manage Rooms 31 Create Post 32 Comment Post 32 Post Rooms 33 Locate Address 34 Manage Users 34 Manage Post 35 CHƯƠNG PHÂN TÍCH, MƠ HÌNH HỐ U CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 36 Xét nghiệp vụ: Search Rooms 36 Xét nghiệp vụ: Add Rooms 38 Xét nghiệp vụ: Edit Rooms 40 Xét nghiệp vụ: Add Post 42 Xét nghiệp vụ: Edit Post 43 Lược đồ quan hệ 45 Cơ sở liệu Firebase dạng Node 46 Mô tả sở liệu 47 CHƯƠNG THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 49 Thiết kế giao diện 49 Mô tả hình 50 Danh sách xử lý 50 Thiết kế giao diện 51 Mơ tả hình 52 Danh sách xử lý 52 Thiết kế giao diện 53 Mơ tả hình 53 Danh sách xử lý 54 Thiết kế giao diện 55 Mơ tả hình 55 Danh sách xử lý 55 Thiết kế giao diện 56 Mơ tả hình 57 Danh sách xử lý 58 Thiết kế giao diện 59 Mô tả hình 60 Danh sách xử lý 60 Thiết kế giao diện 60 Mơ tả hình 62 Danh sách xử lý 63 Thiết kế giao diện 64 Mơ tả hình 65 Danh sách xử lý 65 Thiết kế giao diện 65 Mơ tả hình 66 Danh sách xử lý 67 Thiết kế giao diện 67 Mơ tả hình 68 Danh sách xử lý 69 Thiết kế giao diện 70 Mô tả hình 71 Danh sách xử lý 72 Thiết kế giao diện 74 Mơ tả hình 74 Danh sách xử lý 74 Thiết kế giao diện 75 Mơ tả hình 76 Danh sách xử lý 76 Thiết kế giao diện 77 Mơ tả hình 77 Danh sách xử lý 78 Thiết kế giao diện 78 Mơ tả hình 79 Danh sách xử lý 79 Thiết kế giao diện 79 Mô tả hình 80 Danh sách xử lý 80 Thiết kế giao diện 81 Mơ tả hình 81 Danh sách xử lý 81 Thiết kế giao diện 82 Mơ tả hình 83 Danh sách xử lý 83 Thiết kế giao diện 84 Mơ tả hình 84 Danh sách xử lý 84 Thiết kế giao diện 85 Mơ tả hình 86 Danh sách xử lý 86 Edit User 86 Add Room 87 Edit Room 88 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 90 Ứng dụng tìm kiếm phịng trọ 91 Trang quản lý Admin 92 PHẦN KẾT LUẬN 95 TÀI LIỆU THAM KHẢO 97 DANH SÁCH BẢNG BIỂU Bảng Use Case Sign In 29 Bảng Use Case Sign Up 29 Bảng Use Case Search Rooms 30 Bảng Use Case View Rooms 30 Bảng Use Case Compare Rooms 31 Bảng Use Case Manage Rooms 31 Bảng Use Case Create Post 32 Bảng Use Case Comment Post 32 Bảng Use Case Post Rooms 33 Bảng 10 Use Case Locate Address 34 Bảng 11 Use Case Manage Users 34 Bảng 12 Use Case Manage Post 35 Bảng 13 Mô tả sở liệu User 47 Bảng 14 Mô tả sở liệu Room 47 Bảng 15 Mơ tả hình đăng nhập 50 Bảng 16 Danh sách xử lý đăng nhập 50 Bảng 17 Mơ tả hình đăng ký 52 Bảng 18 Danh sách xử lý đăng ký 52 Bảng 19 Mơ tả hình Sidebar 53 Bảng 20 Danh sách xử lý Sidebar 54 Bảng 21 Mơ tả hình trang About Contact Us 55 Bảng 22 Danh sách xử lý trang About Contact Us 55 Bảng 23 Mơ tả hình trang chủ 57 Bảng 24 Danh sách xử lý trang chủ 58 Bảng 25 Mô tả hình danh sách phịng 60 Bảng 26 Danh sách xử lý danh sách phòng 60 Bảng 27 Mơ tả hình tìm kiếm phòng theo lọc 62 Bảng 28 Danh sách xử lý tìm kiếm phịng theo lọc 63 Bảng 29 Mơ tả hình xử lý tìm phịng theo đồ địa 65 Bảng 30 Danh sách xử lý tìm phịng theo đồ địa 65 Bảng 31 Mơ tả hình so sánh phịng 66 Bảng 32 Danh sách xử lý so sánh phòng 67 Bảng 33 Mơ tả hình danh sách phịng so sánh 68 Bảng 34 Danh sách xử lý danh sách phòng so sánh 69 Bảng 35 Mô tả hình thêm phịng 71 Bảng 36 Danh sách xử lý thêm phòng 72 Bảng 37 Mơ tả hình đăng tải ảnh 74 Bảng 38 Danh sách xử lý đăng tải ảnh 74 Bảng 39 Mơ tả hình chi tiết phịng 76 Bảng 40 Danh sách xử lý chi tiết phòng 76 Bảng 41 Mô tả hình danh sách đăng 77 Bảng 42 Danh sách xử lý danh sách đăng 78 Bảng 43 Mơ tả hình chi tiết đăng 79 Bảng 44 Danh sách xử lý chi tiết đăng 79 Bảng 45 Mơ tả hình đăng nhập (Admin) 80 Bảng 46 Danh sách xử lý đăng nhập (Admin) 80 Bảng 47 Mô tả hình danh sách phịng (Admin) 81 Bảng 48 Danh sách xử lý danh sách phòng (Admin) 81 Bảng 49 Mơ tả hình cập nhật phòng (Admin) 83 Bảng 50 Danh sách xử lý cập nhật phòng (Admin) 83 Bảng 51 Mơ tả hình danh sách đăng (Admin) 84 Bảng 52 Danh sách xử lý danh sách đăng (Admin) 85 Bảng 53 Mơ tả hình cập nhật đăng (Admin) 86 Bảng 54 Danh sách xử lý cập nhật đăng (Admin) 86 Bảng 55 Kiểm thử ứng dụng 93 DANH SÁCH HÌNH ẢNH Hình 1.1 Dịch vụ Firebase Hình 1.2 Cấu trúc Flutter 11 Hình 1.3 Kiến trúc Redux 15 Hình 2.1 Ứng dụng tìm nhà trọ Hello Rent 20 Hình 2.2 Ứng dụng tìm nhà trọ Doong 21 Hình 2.3 Ứng dụng tìm nhà trọ Landber 22 Hình 2.4 Ứng dụng tìm trọ 23 Hình 2.5 Sơ đồ Use Case tổng quan 26 Hình 2.6 Sơ đồ Use Case cho Finder 27 Hình 2.7 Sơ đồ Use Case cho Innkeeper 27 Hình 2.8 Sơ đồ Use Case cho Guess 28 Hình 2.9 Sơ đồ Use Case cho Admin 28 Hình 3.1 Sơ đồ luồng liệu Search Rooms 36 Hình 3.2 Thiết kế sở liệu Search Rooms 38 Hình 3.3 Sơ đồ luồng liệu Add Rooms 38 Hình 3.4 Thiết kế sở liệu Add Rooms 40 Hình 3.5 Sơ đồ luồng liệu Edit Rooms 40 Hình 3.6 Sơ đồ luồng liệu Add Post 42 Hình 3.7 Sơ đồ luồng liệu Edit Post 43 Hình 3.8 Lược đồ quan hệ 45 Hình 3.9 Cơ sở liệu Firebase dạng node 46 Hình 4.1 Giao diện trang đăng nhập 49 Hình 4.2 Giao diện trang đăng ký 51 Hình 4.3 Giao diện Sidebar 53 Hình 4.4 Giao diện trang About Contact Us 55 Hình 4.5 Giao diện trang chủ 56 Hình 4.6 Giao diện tìm kiếm trang chủ 57 Hình 4.7 Giao diện danh sách phòng 59 Hình 4.8 Giao diện tìm phịng theo lọc 60 Hình 4.9 Giao diện tìm thấy phịng theo lọc 61 Hình 4.10 Giao diện khơng tìm thấy phịng theo lọc 61 Xây dựng hệ thống ứng dụng tìm phịng trọ di động Mơ tả hình Bảng 49 Mơ tả hình cập nhật phịng (Admin) STT Kiểu đối tượng Ý nghĩa Input Nhập tên phòng Input Nhập tiêu đề phịng Input Nhập diện tích phịng Input Nhập giá phòng Input Nhập giá điện phòng Input Nhập giá nước phòng Input Nhập thẻ muốn thêm IconButton Xóa thẻ TextArea Nhập mơ tả phòng 10 Button Thêm ảnh đại diện phòng 11 List Checkbox Chọn dịch phòng 12 Map Thao tác với đồ: di chuyển, chọn Ghi địa chỉ, phóng to/thu nhỏ 13 Input Nhập địa phòng 14 Button Lưu thơng tin phịng Danh sách xử lý Bảng 50 Danh sách xử lý cập nhật phòng (Admin) STT Tên xử lý Nhập tên phòng Nhập tiêu đề phòng Nhập giá phòng Nhập thẻ Điều kiện gọi thực Nhấn chọn (1) điền tên phòng Nhấn chọn (2) điền tiêu đề phòng Nhấn chọn (3) điền giá phòng Nhấn chọn (4) điền thẻ phòng, nhấn enter để thêm thẻ 83 Ghi chú 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 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 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 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 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 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 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 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 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 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 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 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 xuyên 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 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 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 ... nhật thường xuyên 22 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 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 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