(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động(Đồ án tốt nghiệp) Xây dựng hệ thống ứng dụng tìm phòng trọ trên di động
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 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 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) 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 - 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 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 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 Tìm hiểu NextJS Đồng • 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 Thêm giao diện tính cho tồn ứng dụng Ghi Chỉnh sửa cửa sổ Đồng Tìm lỗi sửa đổi giao diện cho ứng dụng Homepage, ListRoom, DetailRoom CompareRooms 22/6/2020 28/6/2020 13 Tích hợp Firebase Đồng Firebase để tích hợp vào hệ thống, RemoteConfig Nghiên cứu tính tích hợp tùy chỉnh liên quan Hà đến triển khai ứng dụng môi thêm trường vá lỗi môi trường sản Firebase A/B phẩm thực tế Testing, Function 29/6/2020 Tìm hiểu thêm tính Tìm kiếm lỗi Hà Tìm kiếm lỗi lớn trang - hệ thống ứng dụng website, lỗi giao diện 5/7/2020 điện thoại website logic cửa sổ ứng admin dụng tích hợp vào hệ thống 14 Vá lỗi hệ thống Đồng Vá lỗi tiếp tục sửa lỗi giao diện 6/7/2020 15 Tổng hợp sử đổi Đồng, Hà - Tổng hợp tài liệu trình hồn tất báo cáo 12/7/2020 làm - Tổ chức nội dùng trình chiếu cho khóa luận - Quay video demo sản phẩm Tp Hồ Chí Minh, ngày tháng Ý kiến giáo viên hướng dẫn Người viết đề cương (ký ghi rõ họ tên) (ký ghi rõ họ tên) năm 2020 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 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 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 S K L 0 ... 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