(Đồ án hcmute) thiết kế và xây dựng ứng dụng business weather

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 THIẾT KẾ VÀ XÂY DỰNG ỨNG DỤNG BUSINESS WEATHER GVHD:NGUYỄN TRẦN THI VĂN SVTT:LÂM QUANG LỊCH MSSV:15110240 SVTH: LƯU QUANG TRUNG MSSV:15110345 SKL 0 Tp Hồ Chí Minh, 2019 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM LÂM QUANG LỊCH 15110240 LƯU QUANG TRUNG 15110345 Đề tài: THIẾT KẾ VÀ XÂY DỰNG ỨNG DỤNG BUSINESS WEATHER KHÓA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN TRẦN THI VĂN Khóa 2015 - 2019 an ĐH SƯ PHẠM KỸ THUẬT TP.HCM 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: Lâm Quang Lịch MSSV: 15110240 Lưu Quang Trung MSSV: 15110345 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Tên đề tài: Thiết kế xây dựng ứng dụng Business Weather 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 … năm 2019 Giáo viên hướng dẫn (Ký ghi rõ họ tên) an ĐH SƯ PHẠM KỸ THUẬT TP.HCM 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: Lâm Quang Lịch MSSV: 15110240 Lưu Quang Trung MSSV: 15110345 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Tên đề tài: Thiết kế xây dựng ứng dụng Business Weather 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 … năm 2019 Giáo viên phản biện (Ký ghi rõ họ tên) an LỜI CẢM ƠN Trong suốt trình học tập trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh, chúng em học nhiều kiến thức, lời khuyên, bảo, giúp đỡ từ thầy cô khoa Công Nghệ Thông Tin để hôm chúng em tạo sản phẩm tốt từ trước đến chúng em thể thông qua đề tài – Khóa Luận Tốt Nghiệp Đầu tiên, nhóm em xin chân thành gửi lời cảm ơn đến Khoa Công nghệ thông tin, trường trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm em thực đề tài Thứ hai, nhóm em xin kính gửi đến thầy Nguyễn Trần Thi Văn lời cảm ơn sâu sắc Trong trình thực đề tài, Thầy hướng dẫn, bảo, giúp đỡ giải đáp thắc mắc chúng em cách tận tình Cuối cùng, nhóm em xin chân thành cảm ơn tập thể Giáo viên Khoa Công nghệ thông tin, trường Đại học Sư phạm kỹ thuật Thành phố Hồ Chí Minh giảng suốt khóa học, kiến thức tảng kiến thức chuyên ngành giúp cho nhóm em hồn thành tốt đề tài Trong q trình thực đề tài, ln có thuận lợi khó khăn, chúng em ln cố gắng giải theo hướng tối ưu chắn khơng thể tránh sai xót Chúng em kính mong nhận ý kiến đóng góp q báu cảm thông Thầy Cô để chúng em học hỏi thêm nhiều học kinh nghiệm hoàn thành tốt tương lai Một lần nhóm em xin chân thành cảm ơn! Sinh viên 1: Lâm Quang Lịch Sinh viên 2: Lưu Quang Trung an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ****** ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Lâm Quang Lịch MSSV: 15110240 Lưu Quang Trung MSSV: 15110345 Thời gian làm khóa luận từ 15/03/2019 đến 28/06/2019 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Tên đề tài: Thiết kế xây dựng ứng dụng Business Weather Họ tên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn Nhiệm vụ thực hiện: Lý thuyết: - Kotlin, Firebase, Database Room, Retrofit, RxJava, Google Maps API, Open Weather Map API, Google Places SDK, React Js Thực hành: - Sử dụng Firebase authentication đăng nhập vào ứng dụng - Ngôn ngữ sử dụng Kotlin - Sử dụng Firebase storage để lưu trữ liệu người dùng - Sử dụng Database Room để lưu liệu dạng local khơng có internet - Sử dụng Retrofit, RxJava để sử dụng chức API (OpenWeatherMap) - Sử dụng chức API Google Maps (Directions API) cung cấp để làm đường tới địa điểm - Sử dụng chức API Open Weather Map (Weather API) cung cấp để làm chức xem chi tiết dự báo thời tiết - Sử dụng Google Places SDK để sử dụng tìm kiếm địa điểm hỗ trợ Google lấy thông tin địa điểm chọn tìm kiếm - Sử dụng React Js để viết website quản lý đối tượng liệu ứng dụng an MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP PHẦN MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 1.2 1.3 1.4 1.5 GIỚI THIỆU VỀ KOTLIN GIỚI THIỆU VỀ FIREBASE & ROOM MÃ NGUỒN MỞ RXJAVA & RETROFIT 10 OPENWEAHTERMAP & GOOGLE APIS 11 GIỚI THIỆU VỀ REACT JS 14 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 19 2.1 KHẢO SÁT HIỆN TRẠNG 19 2.1.1 KHẢO SÁT 19 2.1.1.1 2.1.1.2 2.1.1.3 2.1.1.4 Weather Forecast 19 Best Weather 21 Word weather forecast 22 Thời tiết Việt Nam 24 XÁC ĐỊNH YÊU CẦU 25 2.2 YÊU CẦU CHỨC NĂNG 25 YÊU CẦU PHI CHỨC NĂNG 27 2.2.1 2.2.2 CHƯƠNG 3: PHÂN TÍCH YÊU CẦU VÀ THIẾT KẾ CSDL 28 3.1 MÔ TẢ CÔNG VIỆC 28 3.1.1 3.1.2 3.2 3.3 LƯỢC ĐỒ USECASE DIAGRAM 55 ĐẶC TẢ USECASE MỘT SỐ TÍNH NĂNG CHÍNH 56 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.4 User 28 Admin 50 Nghiệp vụ Add weather place 56 Nghiệp vụ Add favorite place 57 Nghiệp vụ Giving directions 58 Nghiệp vụ Remove activity log 59 Nghiệp vụ Edit profile 60 SEQUENCE DIAGRAM MỘT SỐ TÍNH NĂNG CHÍNH 61 3.4.1 User 61 3.4.1.1 Nghiệp vụ Managing/Add/Remove weather place & View current/other weather 61 3.4.1.2 Nghiệp vụ Managing/Add/Remove favorite place & View favorite place details 62 an 3.4.1.3 Nghiệp vụ Giving directions, Search original point/destination point 63 3.4.1.4 Nghiệp vụ View/Edit profile 64 3.4.1.5 Nghiệp vụ Add temporary weather place 65 3.4.1.6 Nghiệp vụ Add temporary favorite place 66 3.4.2 Admin 67 3.4.2.1 Nghiệp vụ Counting the most searched City 67 3.4.2.2 Nghiệp vụ View/Remove weather place/Search by user 67 3.4.2.3 Nghiệp vụ Managing user/Search by user 68 3.4.2.4 Nghiệp vụ View/Remove favorite place/Search by user 69 3.4.2.5 Nghiệp vụ View/Remove activity log/Search by user 69 3.5 BẢNG MÔ TẢ THUỘC TÍNH 70 3.5.1 3.5.2 3.5.3 3.5.4 3.5.5 3.5.6 3.5.7 3.5.8 users 70 places 70 favoriteplace 70 history 71 tempplace 71 tempfavplace 71 admin 72 statistics 72 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 73 4.1 ỨNG DỤNG BUSINESS WEATHER 73 4.1.1 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 4.1.10 4.1.11 4.2 Giao diện Intro 73 Giao diện Login 74 Giao diện Sign up 75 Giao diện Home 76 Giao diện Favorite Place 77 Giao diện Weather Place Management 78 Giao diện Direction 79 Giao diện History 81 Giao diện Detail Place 82 Giao diện Profile 83 Giao diện Edit Profile 84 WEBSITE QUẢN LÝ 85 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 Trang Login 85 Trang User Management 86 Trang Weather Place Management 87 Trang Favorite Place Management 88 Trang Activity Log Management 89 Trang Searched City Statistics 90 CHƯƠNG 5: CÀI ĐẶT 91 an 5.1 CÀI ĐẶT 91 5.1.1 5.1.2 5.1.3 5.1.4 5.2 Ngôn ngữ lập trình 91 Thư viện 92 Hệ quản trị CSDL 92 Sơ đồ lớp 94 KIỂM THỬ 95 5.2.1 5.2.2 5.2.3 5.2.4 5.2.5 5.2.6 5.2.7 5.2.8 Màn hình Home 95 Màn hình Weather Place Management 97 Màn hình Favorite Place 97 Màn hình Detail Place 98 Màn hình Direction 99 Màn hình History 102 Màn hình Profile 103 Màn hình Edit Profile .104 PHẦN KẾT LUẬN 105 TÀI LIỆU THAM KHẢO 106 MỤC LỤC BẢNG BIỂU Bảng biểu 3.1 Bảng biểu cầu chức nghiệp vụ user 28 Bảng biểu 3.2 Bảng quy định / Công thức liên quan user 29 Bảng biểu 3.3 Bảng yêu cầu chức hệ thống user 35 Bảng biểu 3.4 Bảng biểu cầu chức nghiệp vụ admin 50 Bảng biểu 3.5 Bảng quy định / Công thức liên quan admin 50 Bảng biểu 3.6 Bảng yêu cầu chức hệ thống admin 52 Bảng biểu 3.7 Mô tả Use Case Add weather place 56 Bảng biểu 3.8 Mô tả Use Case Add favorite place 57 Bảng biểu 3.9 Mô tả Use Case Giving directions 58 Bảng biểu 3.10 Mô tả Use Case Remove activity log 59 Bảng biểu 3.11 Mô tả Use Case Edit profile 60 Bảng biểu 3.12 Bảng mơ tả thuộc tính users 70 Bảng biểu 3.13 Bảng mơ tả thuộc tính places 70 Bảng biểu 3.14 Bảng mơ tả thuộc tính favoriteplace 70 Bảng biểu 3.15 Bảng mơ tả thuộc tính history 71 Bảng biểu 3.16 Bảng mơ tả thuộc tính tempplace 71 an Bảng biểu 3.17 Bảng mơ tả thuộc tính tempfavplace 71 Bảng biểu 3.18 Bảng mơ tả thuộc tính admin 72 Bảng biểu 3.19 Bảng mô tả thuộc tính statistics 72 Bảng biểu 4.1 Bảng mô tả xử lý giao diện Intro 73 Bảng biểu 4.2 Bảng mô tả xử lý giao diện Login 74 Bảng biểu 4.3 Bảng mô tả xử lý giao diện Sign up 75 Bảng biểu 4.4 Bảng mô tả xử lý giao diện Home 76 Bảng biểu 4.5 Bảng mô tả xử lý giao diện Favorite Places 77 Bảng biểu 4.6 Bảng mô tả xử lý giao diện Weather Place Management 78 Bảng biểu 4.7 Bảng mô tả xử lý giao diện Direction 80 Bảng biểu 4.8 Bảng mô tả xử lý giao diện History 82 Bảng biểu 4.9 Bảng mô tả xử lý giao diện Detail Place 83 Bảng biểu 4.10 Bảng mô tả xử lý giao diện Profile 83 Bảng biểu 4.11 Bảng mô tả xử lý giao diện Edit Profile 85 Bảng biểu 4.12 Bảng mô tả xử lý giao diện trang Login 85 Bảng biểu 4.13 Bảng mô tả xử lý giao diện trang User Managegment 86 Bảng biểu 4.14 Bảng mô tả xử lý giao diện trang Weather Place Management 87 Bảng biểu 4.15 Bảng mô tả xử lý giao diện trang Favorite Place Management 88 Bảng biểu 4.16 Bảng mô tả xử lý giao diện trang Activity Log Management 89 Bảng biểu 5.1 Kiểm thử hình Home 95 Bảng biểu 5.2 Kiểm thử hình Weather Place Management 97 Bảng biểu 5.3 Kiểm thử hình Favorite Place 97 Bảng biểu 5.4 Kiểm thử hình Detail Place 98 Bảng biểu 5.5 Kiểm thử hình Direction 99 Bảng biểu 5.6 Kiểm thử hình History .102 Bảng biểu 5.7 Kiểm thử hình Profile 103 Bảng biểu 5.8 Kiểm thử hình EditProfile 104 MỤC LỤC HÌNH ẢNH Hình 1.1 Các thành phần Room Hình 2.1 Hình ảnh ứng dụng Weather Forecast 19 Hình 2.2 Hình ảnh ứng dụng Weather Forecast 19 Hình 2.3 Hình ảnh ứng dụng Weather Forecast 20 an CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Firebase kết hợp tảng cloud với hệ thống máy chủ mạnh mẽ tới từ Google, để cung cấp cho API đơn giản, mạnh mẽ đa tảng việc quản lý, sử dụng database Cụ thể Google Firebase cung cấp tới chức sau: - Realtime Database: Firebase lưu trữ liệu database dạng JSON thực đồng database tới tất client theo thời gian thực - Firebase Authentication: Với Firebase bạn dễ dàng tích hợp công nghệ xác thực Google, Facebook, Twitter… hệ thống xác thực mà bạn tự tạo vào ứng dụng bạn tảng Android, iOS Web - Firebase Hosting: Firebase hỗ trợ triển khai ứng dụng web với vài giây với hệ thống Firebase, liệu lưu trữ đám mây đồng thời bảo mật thông qua giao thức truy cập SSL Ngoài ra, sử dụng Firebase có hưởng lợi ích sau: - Triển khai ứng dụng cực nhanh: Với Firebase bạn giảm bớt nhiều thời gian cho việc viết dòng code để quản lý đồng sở liệu, việc diễn hoàn toàn tự động với API Firebase - Bảo mật: Firebase hoạt động dựa tảng cloud thực kết nối thơng qua giao thức bảo mật SSL, bạn bớt lo lắng nhiều việc bảo mật liệu đường truyền client server - Tính linh hoạt khả mở rộng: Firebase cho phép bạn tự xây dựng server riêng để thuận tiện việc quản lý Ngoài ra, Firebase sử dụng NoSQL giúp cho database bạn khơng bị bó buộc bảng trường mà bạn tùy ý xây dựng database theo cấu trúc riêng bạn - Làm việc offline: Trước liệu ghi đến server tất liệu viết vào sở liệu Firebase local Ngay có kết nối lại, client nhận thay đổi mà thiếu đồng hố với trạng thái server 93 an CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ - Giá thành: Google Firebase có nhiều gói dịch vụ với mức dung lượng lưu trữ băng thông khác với mức giá dao động từ Free đến $1500 đủ để đáp ứng nhu cầu tất đối tượng Ngồi bạn cịn khơng chi phí để bảo trì, nâng cấp, khắc phục cố điều có Firebase hỗ trợ 5.1.4 Sơ đồ lớp Hình 5.1 Sơ đồ lớp 94 an CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.2 KIỂM THỬ 5.2.1 Màn hình Home Bảng biểu 5.1 Kiểm thử hình Home ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử - Hiển thị hình thời tiết Pass thời tiết navigation bên giao diện Home vị trí vị trí (Home, thường mặc định mà bạn hữu đăng nhập vào) - Thanh navigation bên Description hiển thị phần tử Home giao diện Home - Thanh toolbar có nội dung “Home” Hiển thị Nhấn vào phần tử - Nếu bạn thêm thời tiết thời tiết navigation bên địa khác trước địa điểm (Home, thường mặc định hiển thị hình thời tiết khác đăng nhập vào) địa điểm thời tiết Dùng ngón tay lướt hình giao diên Home Ngược lại sang phải đến hình thêm Pass địa điểm giao diên Add Location giao diện Home - Thanh navigation bên hiển thị phần tử Home giao diện Home - Thanh toolbar có nội dung “Home” Thêm địa Nhấn vào phần tử - Hiển thị hình thêm địa điểm thời navigation bên điểm giao diện Add tiết (Home, thường mặc định Location đăng nhập vào) - Địa điểm thêm vào hình thêm địa 95 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Dùng ngón tay lướt hình điểm giao diện Add sang phải đến hình cuối Location (giao diên Add Location - Thanh navigation bên giao diện Home) hiển thị phần tử Home Nhấn vào nút “DANH SÁCH giao diện Home THỜI TIẾT” - Thanh toolbar có nội dung Tiếp tục nhấn vào nút “THÊM “Home” ĐỊA ĐIỂM THỜI TIẾT” (giao diện Add Location) Nhập thông tin địa điểm cần tìm kiếm tìm kiếm hỗ trợ Google click chọn vào địa điểm để thêm vào (giao diện tìm kiếm địa điểm) Xóa địa Nhấn vào phần tử - Hiển thị hình thêm địa điểm thời navigation bên điểm giao diện Add tiết (Home, thường mặc định Location đăng nhập vào) - Địa điểm click xóa Dùng ngón tay lướt hình hình thêm địa điểm sang phải đến hình cuối giao diện Add Location (giao diên Add Location biến giao diện Home) - Thanh navigation bên Nhấn vào nút “DANH SÁCH hiển thị phần tử Home THỜI TIẾT” giao diện Home Tiếp tục nhấn vào nút “THÊM - Thanh toolbar có nội dung ĐỊA ĐIỂM THỜI TIẾT” (giao “Home” diện Add Location) Click vào icon xóa địa điểm thời tiết bạn muốn xóa 96 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.2.2 Màn hình Weather Place Management Bảng biểu 5.2 Kiểm thử hình Add Location ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử - Hiển thị hình thêm địa Pass hình navigation bên (Home, điểm giao diện Weather Weather thường mặc định đăng nhập Place Management Place vào) bạn hữu Description Management Dùng ngón tay lướt hình - Thanh navigation bên sang phải đến hình cuối hiển thị phần tử Home (giao diện Weather Place giao diện Home Management) - Thanh toolbar có nội dung Nhấn vào nút “DANH SÁCH “Danh Sách Thời Tiết” THỜI TIẾT” có nút back trở 5.2.3 Màn hình Favorite Place Bảng biểu 5.3 Kiểm thử hình Favorite Place ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử thứ - Hiển thị hình địa điểm u thích Pass hình hai navigation giao diện FavPlace Favorite bên (Favorite) - Thanh navigation bên hiển Description thị phần tử Favorite giao diện Places FavPlace - Thanh toolbar có nội dung “Địa Điểm u Thích” Thêm địa Nhấn vào phần tử thứ - Hiển thị hình địa điểm u thích điểm u hai navigation giao diện FavPlace thích bên (Favorite) - Địa điểm thêm vào hiển thị Click vào nút “+” phía hình u thích giao diện hình FavPlace Nhập thơng tin địa điểm cần tìm kiếm 97 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ tìm kiếm hỗ - Thanh navigation bên hiển trợ Google click thị phần tử Favorite giao diện chọn vào địa điểm để FavPlace thêm vào (giao diện tìm - Thanh toolbar có nội dung kiếm địa điểm) “Favorite Places” Xóa địa Nhấn vào phần tử thứ - Hiển thị hình địa điểm u thích điểm u hai navigation giao diện FavPlace thích bên (Favorite) - Địa điểm xóa hình yêu Click vào optionmenu thích phải biến (BM_FavPlace) địa điểm yêu - Thanh navigation bên hiển thích bạn muốn xóa thị phần tử Favorite giao diện (giao diện FavPlace 2) FavPlace Click vào nút Xóa - Thanh toolbar có nội dung (hiện lên thực “Favorite Places” Pass bước xong) 5.2.4 Màn hình Detail Place Bảng biểu 5.4 Kiểm thử hình Detail Place ID Test Case Test Case Expected Output Result Pass Description Procedure Hiển thị Nhấn vào phần tử - Hiển thị hình chi tiết địa điểm (Giao hình thứ hai diện Detail Place) Detail Place navigation bên - Thanh navigation bên hiển thị (Favorite) phần tử Favorite giao diện Favorite Nhấn vào địa điểm Place yêu thích - Thanh toolbar có nội dung “Thơng Tin Địa Điểm” Chỉ đường Nhấn vào phần tử - Hiển thị hình đường giao đến địa thứ hai diện Direction điểm yêu navigation bên - Thông tin địa điểm đến địa địa thích (Favorite) điểm yêu thích nhấn vào (như giao diện Nhấn vào địa điểm Direction) yêu thích 98 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Nhấn vào icon - Thanh navigation bên hiển thị đường góc phải bên phần tử Direction giao diện Direction hình - Thanh toolbar có nội dung “Chỉ Đường” 5.2.5 Màn hình Direction Bảng biểu 5.5 Kiểm thử hình Direction ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử thứ ba - Hiển thị hình đường Pass hình navigation bên giao diện Direction Direction (Direction) - Thanh navigation bên Description hiển thị phần tử Direction giao diện Direction - Thanh toolbar có nội dung “Chỉ Đường” Chọn địa Nhấn vào phần tử thứ ba - Hiển thị hình đường điểm xuất navigation bên giao diện Direction phát (Direction) - Edittext “Chọn địa điểm xuất Click vào edittext “Chọn phát” có nội dung tên địa điểm địa điểm xuất phát” chọn Nhập thông tin địa điểm - Thanh navigation bên cần tìm kiếm tìm hiển thị phần tử Direction giao kiếm hỗ trợ diện Direction Google click chọn vào - Thanh toolbar có nội dung “Chỉ địa điểm để thêm vào (giao Đường” Pass diện tìm kiếm địa điểm) Chọn địa Nhấn vào phần tử thứ ba - Hiển thị hình đường điểm đến navigation bên giao diện Direction (Direction) - Edittext “Chọn địa điểm đến” Click vào edittext “Chọn có nội dung tên địa điểm chọn địa điểm đến” 99 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Nhập thông tin địa điểm - Thanh navigation bên cần tìm kiếm tìm hiển thị phần tử Direction giao kiếm hỗ trợ diện Direction Google click chọn vào - Thanh toolbar có nội dung “Chỉ địa điểm để thêm vào (giao Đường” diện tìm kiếm địa điểm) Gán vị trí Nhấn vào phần tử thứ ba - Hiển thị hình đường cho navigation bên giao diện Direction địa điểm (Direction) - Edittext “Chọn địa điểm xuất xuất phát Click vào optionmenu phát” có nội dung tên địa điểm bên cạnh phải edittext vị trí bạn “Chọn địa điểm xuất phát” hữu (giao diện Direction 2) - Thanh navigation bên Click vào phần tử “Vị trí hiển thị phần tử Direction giao tại điểm xuất phát” diện Direction (hiện lên thực xong - Thanh toolbar có nội dung “Chỉ bước 2) Đường” Gán vị trí Nhấn vào phần tử thứ ba - Hiển thị hình đường cho navigation bên giao diện Direction địa điểm (Direction) - Edittext “Chọn địa điểm đến” đến Click vào optionmenu có nội dung tên địa điểm vị bên cạnh phải edittext trí bạn hữu “Chọn địa điểm xuất phát” - Thanh navigation bên (giao diện Direction 2) hiển thị phần tử Direction giao Click vào phần tử “Vị trí diện Direction tại điểm đến” (hiện - Thanh toolbar có nội dung “Chỉ lên thực xong bước Đường” Pass Pass 2) Thực Nhấn vào phần tử thứ ba - Hiển thị hình đường nhận navigation bên giao diện Direction đường (Direction) - Trên khung hình maps hiển thị marker điểm xuất phát, 100 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Click vào edittext “Chọn điểm đến đường line vẽ đường địa điểm xuất phát” từ điểm với (mặc định Nhập thông tin địa điểm đường cho hình thức driving) cần tìm kiếm tìm - Các icon hình phương tiện bên kiếm hỗ trợ khung hình maps hiển Google click chọn vào thị thêm thời gian loại địa điểm để thêm vào (giao phương tiện bên phải diện tìm kiếm địa điểm) icon Click vào edittext “Chọn - Thanh navigation bên địa điểm đến” hiển thị phần tử Direction giao Nhập thơng tin địa điểm diện Direction cần tìm kiếm tìm - Thanh toolbar có nội dung “Chỉ kiếm hỗ trợ Đường” Google click chọn vào địa điểm để thêm vào (giao diện tìm kiếm địa điểm) Click vào nút floatingactionbutton đường góc bên phải Đổi phương Nhấn vào phần tử thứ ba - Hiển thị hình đường tiện di navigation bên giao diện Direction chuyển (Direction) - Trên khung hình maps Click vào edittext “Chọn hiển thị marker điểm xuất phát, địa điểm xuất phát” điểm đến đường line vẽ đường Nhập thông tin địa điểm từ điểm với (đường cần tìm kiếm tìm vẽ theo loại phương tiện bạn kiếm hỗ trợ click bước cuối) Google click chọn vào - Các icon hình phương tiện bên địa điểm để thêm vào (giao khung hình maps hiển diện tìm kiếm địa điểm) thị thêm thời gian loại Click vào edittext “Chọn phương tiện bên phải địa điểm đến” icon 101 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Nhập thông tin địa điểm - Thanh navigation bên cần tìm kiếm tìm hiển thị phần tử Direction giao kiếm hỗ trợ diện Direction Google click chọn vào - Thanh toolbar có nội dung “Chỉ địa điểm để thêm vào (giao Đường” diện tìm kiếm địa điểm) Click vào nút floatingactionbutton đường góc bên phải Click vào icon phương tiện bên khung hình maps Thực - Như Test case “Xem - Như Test case “Thực nhận đường bước đường” ta thực đường” hiển thị theo thêm bước: click bất giao diện Direction – bước kỳ phần từ bước hiển Start Pass thị lên giao diện Direction - Stepbystep 5.2.6 Màn hình History Bảng biểu 5.6 Kiểm thử hình History ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử thứ - Hiển thị hình lịch sử tìm kiếm Pass hình tư navigation giao diện History History bên (History) - Thanh navigation bên hiển Description thị phần tử History giao diện History - Thanh toolbar có nội dung “Nhật Ký Hoạt Động” Xóa lịch sử Nhấn vào phần tử thứ - Hiển thị hình lịch sử tìm kiếm tìm kiếm tư navigation giao diện History 102 an Pass CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ bên (giao diện - Địa điểm xóa hình History 1) biến (giao diện History 1) Click vào optionmenu - Thanh navigation bên hiển địa điểm lịch thị phần tử History giao diện sử bạn muốn xóa (giao History diện History 2) - Thanh toolbar có nội dung “Nhật Click vào nút Xóa Ký Hoạt Động” (hiện lên thực bước xong) Xóa tất Nhấn vào phần tử thứ - Hiển thị hình lịch sử tìm kiếm lịch sử tìm tư navigation giao diện History kiếm bên (giao diện - Tất địa điểm hình lịch sử History 1) tìm kiếm biến (giao Pass Click vào optionmenu diện History 1) toolbar (giao - Thanh navigation bên hiển diện History 3) thị phần tử History giao diện Click vào nút Xóa tất History (hiện lên thực - Thanh toolbar có nội dung “Nhật xuong bước 2) Ký Hoạt Động” 5.2.7 Màn hình Profile Bảng biểu 5.7 Kiểm thử hình Profile ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử thứ năm - Hiển thị hình Profile Pass hình (cuối cùng) giao diện Profile Profile navigation bên (Profile) - Thanh navigation bên Description hiển thị phần tử Profile giao diện Profile - Thanh toolbar có nội dung “Profile” 103 an CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Đi đến Nhấn vào phần tử thứ năm - Hiển thị hình Edit Profile hình Edit (cuối cùng) giao diện Edit Profile Profile navigation bên (Profile) - Thanh navigation biến Nhấn vào khung thơng tin - Thanh toolbar có nội dung phía (tên, avatar) “Thơng Tin Cá Nhân” Pass 5.2.8 Màn hình Edit Profile Bảng biểu 5.8 Kiểm thử hình EditProfile ID Test Case Test Case Procedure Expected Output Result Hiển thị Nhấn vào phần tử thứ năm - Hiển thị hình Edit Pass hình Edit (cuối cùng) navigation Profile giao diện Edit Profile bên (Profile) Profile Nhấn vào khung thơng tin - Thanh navigation biến phía (tên, avatar) - Thanh toolbar có nội dung Description “Thông Tin Cá Nhân” Hiển thị Như Test case “Hiển thị - Hiển thị form Edit Profile form Edit hình Edit Profile” giao diện Edit Profile Profile Nhấn nút floatingactionbutton Form góc phải hình (hình - Thanh navigation biến trịn, icon edit) - Thanh toolbar có nội dung “Thông Tin Cá Nhân” 104 an Pass PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC - Hoàn thành đầy đủ tất yêu cầu chức đề - Thời gian thực dự án khơng bị trễ tiến độ - Ứng dụng tương thích với nhiều thiết bị di động android ƯU ĐIỂM - Ứng dụng tích hợp thời tiết đường tạo thuận tiện cho người dùng không cần phải truy xuất ứng dụng bên thứ hai - Ứng dụng điều hướng hình thơng qua navigation bên tạo đơn giản dễ sử dụng cho người dùng - Người dùng theo dõi thời tiết nhiều thành phố khác khơng phải thành phố (vị trí tại) ứng dụng ngày - Ứng dụng lưu trữ địa điểm yêu thích nơi khác tạo điều kiện cho người công tác thường xuyên hay du lịch ghé thăm lần sau thuận tiện việc tìm kiếm lại NHƯỢC ĐIỂM - Ứng dụng sử dụng Google Maps API Open Weather API miễn phí nên cịn hạn chế nhiều tính khơng phép sử dụng - Giao diện ứng dụng tối, khơng phù hợp với thói quen số người dùng khơng thích giao diện tối HƯỚNG PHÁT TRIỂN - Nâng cấp giao diện ứng dụng TravelWeather lên React Native để tương thích thiết bị di động 105 an TÀI LIỆU THAM KHẢO [1] Learn Kotlin, Jet Brains, 15/03/2019, Link: https://kotlinlang.org/docs/reference/ [2] Làm việc với Firebase Realtime Database, Nguyen Manh Quan, 16/03/2019, Link: https://viblo.asia/p/lam-viec-voi-firebase-realtime-database-ZjlvalVXkqJ [3] Ứng dụng Weather Forecast, 25/03/2019, Link: https://developers.google.com/maps/documentation/directions/start [4] Ứng dụng Best Weather, 25/03/2019, Link: https://play.google.com/store/apps/details?id=com.liveweather.showcurrentweather.weath erforecast [5] Ứng dụng World Weather Forecast, 26/03/2019, Link: https://play.google.com/store/apps/details?id=com.great.hbapps.weather.forecast [6] Ứng dụng Thời tiết Việt Nam, 26/03/2019, Link: https://play.google.com/store/apps/details?id=com.bvl.weatherapp [7] Weather API, OpenWeatherMap, 01/04/2019, Link: https://openweathermap.org/api [8] RxJava Retrofit ứng dụng Android, Nguyen Huy Quyet, 05/04/2019, Link: https://viblo.asia/p/rxjava-2-va-retrofit-trong-ung-dung-android-Qbq5QqdE5D8 [9] Places SDK for Android, Google, 15/04/2019, |Link: https://developers.google.com/places/android-sdk/intro [10] Directions API, Google, 01/05/2019, Link: https://play.google.com/store/apps/details?id=com.pule.weather.forecast.radar [11] React Js, Facebook, 05/05/2019, Link: https://reactjs.org/?fbclid=IwAR2oVNIbjINji4gBClEuid2QVNLvdx_WTY8_vbFkxK1WLrrr9Ug6VUDVgM 106 an an ... TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1.1.2 Best Weather Hình 2.6 Hình ảnh ứng dụng Best Weather Hình 2.7 Hình ảnh ứng dụng Best Weather Hình 2.8 Hình ảnh ứng dụng Best Weather Hình 2.9 Hình ảnh ứng dụng. .. 2.5 Hình ảnh ứng dụng Best Weather 21 Hình 2.6 Hình ảnh ứng dụng Best Weather 21 Hình 2.7 Hình ảnh ứng dụng Best Weather 21 Hình 2.8 Hình ảnh ứng dụng Best Weather ... ngơn ngữ Kotlin 2.2 Mục đích ứng dụng Chúng muốn xây dựng ứng dụng thời tiết du lịch Business Weather để thay ứng dụng thời tiết cho phép xem thời tiết vị trí Ứng dụng giúp người dùng lưu trữ