(TIỂU LUẬN) báo cáo môn học lập TRÌNH ỨNG DỤNG mã NGUỒN mở đề tài lập TRÌNH ỨNG DỤNG XEM THỜI TIẾT và số LIỆU COVID 19

TRƯỜNG ĐẠI HỌC TÂY NGUYÊN KHOA KHTN&CN BÁO CÁO MÔN HỌC LẬP TRÌNH ỨNG DỤNG MÃ NGUỒN MỞ ĐỀ TÀI: LẬP TRÌNH ỨNG DỤNG XEM THỜI TIẾT VÀ SỐ LIỆU COVID 19 Sinh viên: Hoàng Ngọc Thành Lớp: CNTT K18 Khóa: 2018 – 2022 Ngành: Cơng nghệ thơng tin Giảng viên hướng dẫn: ThS Trương Thị Hương Giang Đắk Lắk, tháng 09 năm 2021 TRƯỜNG ĐẠI HỌC TÂY NGUYÊN KHOA KHTN&CN BÁO CÁO MƠN HỌC LẬP TRÌNH ỨNG DỤNG MÃ NGUỒN MỞ ĐỀ TÀI: LẬP TRÌNH ỨNG DỤNG XEM THỜI TIẾT VÀ SỐ LIỆU COVID 19 Sinh viên: Hoàng Ngọc Thành Lớp: CNTT K18 Khóa: 2018 – 2022 Ngành: Công nghệ thông tin Giảng viên hướng dẫn: ThS Trương Thị Hương Giang Đắk Lắk, tháng 09 năm 2021 LƠI CẢM ƠN Trong thời gian làm đồ án môn học, em nhận nhiều giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy cô bạn bè Em xin gửi lời cảm ơn chân thành đến cô Ths Trương Thị Hương Giang, giảng viên khoa Khoa học Tự nhiên Công nghệ, cô tận tình hướng dẫn, bảo em suốt trình đồ án Em xin chân thành cảm ơn thầy cô giáo trường Đại học Tây Ngun nói chung thầy khoa Khoa học Tự nhiên Cơng nghệ nói riêng dạy dỗ cho chúng em kiến thức môn học chuyên ngành Công nghệ thông tin, giúp chúng em có sở lý thuyết vững vàng tạo điều kiện giúp đỡ chúng em suốt trình học tập Cuối cùng, em xin chân thành cảm ơn gia đình bạn bè lng tạo đièu kiện, quan tâm, giúp đỡ động viên em suốt trình học tập hồn thành đồ án Em xin chân thành cảm ơn! MỤC LỤC LƠI CẢM ƠN DANH MỤC HÌNH ẢẢ̉NH ĐẶT VẤN ĐỀ Lý chọn đề tài Mục đích nghiên cứu Đối tượng nghiên cứu Phạm vi nghiên cứu CHƯƠƠ̛NG 1: GIỚI THIỆU VỀ FLUTTER 1.1 Giới thiệu 1.1.1 Giới thiệu chung .8 1.2 Lịch sử phát triển 1.3 Mục tiêu phát triển 1.4 So sánh ưu nhược điểm 1.4.1 Ưu điểm 1.4.2 Nhược điểm 10 1.4.3 So sánh với framework khác 10 1.5 Hướng dẫn cài đặt .10 1.6 Cấu trúc Flutter 15 CHƯƠƠ̛NG 2: PHÂN TÍCH YÊU CẦU 16 2.1 Giới thiệu cách thức giải 16 2.2 Phân tích hệ thống .17 2.3 Yêu cầu hệ thống 17 CHƯƠƠ̛NG 3: XÂY DỰNG ỨNG DỤNG 18 3.1 Tạo ứng dụng Flutter 18 3.2 Xây dựng cấu trúc thư mục 19 3.3 Cài đặt gói bổ sung 19 3.4 Xây dựng bố cục cho ứng dụng 20 3.5 Xây dựng thành phần cho ứng dụng 3.5.1Xây dựng 3.5.2Xây dựng 3.5.3Xây dựng 3.5.4Xây dựng 3.5.5Xây dựng 3.5.6Xây dựng 3.5.7Xây dựng 3.5.8Xây dựng 3.6 Xây dựng chức rest API 3.7 Xây dựng chức nhập vào tìm kiếm c quan CHƯƠƠ̛NG 4: KẾT QUẢẢ̉ 4.1 Cấu trúc thư mục sau hoàn thành dự án 4.2 Kết TÀI LIỆU THAM KHẢẢ̉O DANH MỤC HÌNH ẢẢ̉NH Hình ảnh 1: Biểu đồ so sánh flutter react native Hình ảnh 2: Tải gói flutter SDK 10 Hình ảnh 3: Giải nén flutter SDK 10 Hình ảnh 4: Edit the system enviroment variables 11 Hình ảnh 5: Cấu hình 11 Hình ảnh 6: Path 12 Hình ảnh 7: Dán đường dẫn thư mục flutter SDK 12 Hình ảnh 8: Kiểm tra cài đặt flutter 13 Hình ảnh 9: Sửa lỗi khơng nhận Android Studio .13 Hình ảnh 10: Sửa lỗi Android toolchain 13 Hình ảnh 11: Cài đặt thành cơng .14 Hình ảnh 12: Cấu trúc thư mục flutter .14 Hình ảnh 13: Rest API 15 Hình ảnh 14: Flutter sau tạo 17 Hình ảnh 15: Chương trình demo 17 Hình ảnh 16: Cấu trúc thư mục sau tạo .18 Hình ảnh 17: Các gói bổ sung 19 Hình ảnh 18: Giao diện tìm kiếm thời tiết thành phố 19 Hình ảnh 19: Giao diện thông tinm chi tiết thành phố .20 Hình ảnh 20: Giao diện thơng tin covid giới 20 Hình ảnh 21: Giao diện thơng tin covid tìm kiếm 21 Hình ảnh 22: Kết giao diện dự báo thời tiết .41 Hình ảnh 23: Kết giao diện covid 19 42 ĐẶT VẤN ĐỀ Lý chọn đề tài Do tình hình dịch covid 19 việt nam có chuyển biến phức tạp nên nhu cầu có ứng dụng để xem thơng tin số ca nhiễm bệnh, số ca tử vong ca hồi phục giới nói chung Việt Nam nói riêng từ lý thực tiễn nên e chọn đề tài ứng dụng xem thông tin thời tiết số liệu thống kê covid 19 Ứng dụng xem thời tiết covid mang lại ý nghĩa khoa học thực tiễn giúp người hiểu rõ tính nguy hiểm dịch bệnh Mục đích nghiên cứu Mục đích nghiên cứu giúp cho nắm bắt có nhìn khách quan tính nguy hiểm dịch bệnh nước Việc dịch bệnh covid 19 nguy hiểm thông qua số ca nhiễm số tử vong lớn đáng ngại để người phịng tránh Từ nên mục đích xây dựng ứng dụng xem tình hình dịch covid 19 nhu cầu thiết yếu để đánh giá mức độ thực tế dịch bệnh Đối tượng nghiên cứu Ở đối tượng nghiên cứu dịch bệnh covid 19 hồnh hành giới có Việt Nam Dịch bệnh covid 19 gây náo loạn giới khiến người người nhà nhà đứng ngồi không yên Phạm vi nghiên cứu Vì covid lây lan có mặt hầu giới nên phạm vi nghiên cứu chia làm phần giới Việt Nam CHƯƠƠ̛NG 1: GIỚI THIỆU VỀ FLUTTER 1.1 Giới thiệu 1.1.1 Giới thiệu chung Flutter mobile UI framework Google để tạo giao diện chất lượng cao iOS Android khoảng thời gian ngắn Flutter hoạt động với code sẵn có sử dụng lập trình viên, tổ chức.Flutter hồn tồn miễn phí mã nguồn mở Các ứng dụng xây dựng với Flutter phân biệt với ứng dụng xây dựng cách sử dụng Android SDK, giao diện hiệu suất Hơn nữa, với tinh chỉnh nhỏ, chúng chạy thiết bị iOS Flutter sử dụng Dart, ngôn ngữ nhanh, hướng đối tượng với nhiều tính hữu ích mixin, generic, isolate, static type Flutter có thành phần UI riêng nó, với chế để kết xuất chúng tảng Android iOS Hầu hết thành phần giao diện người dùng, sẵn dùng, phù hợp với nguyên tắc Material Design 1.2 Lịch sử phát triển          Tháng năm 2017 phát hành alpha Tháng năm 2017 phát hành ứng dụng thương mại Tháng năm 2018 phát hành beta Tháng năm 2018 flutter tham gia 100 đại diện dành đầu github Tháng 12 năm 2018 Google phát hành flutter 1.0 ổn định để dung Tháng năm 2019 đại hội giới di động phát hành flutter 1.2 Tháng năm 2019 flutter cho phiên xem trước web Tháng năm 2019 flutter phát hành 1.9 Tháng 12 năm 2019 Flutter interact Flutter 1.12 Dart 2.7 , Flutter web hỗ trợ beta 1.3 Mục tiêu phát triển Flutter phát triển để xây dựng giao diện có hiệu ứng đa dạng phức tạp giúp nâng cao tính tương tác cho sản phẩm, làm cho sản phẩm trở nên đẹp, đa dạng sinh động, giúp lập trình viên giảm nhiều thời gian không cần thiết xây dựng sản phẩm 1.4 So sánh ưu nhược điểm 1.4.1 Ưu điểm Flutter open-source SDK , tức miễn phí mở – cộng đồng developer tham gia phát triển Giao diện đẹp: Flutter cung cấp nhiều widget, với nhiều lựa chọn Giao diện đẹp sắc nét giao diện lập trình ứng dụng (API) chuyển động phong phú, scroll tự nhiên mượt mà tự nhận thức tảng Viết code ứng dụng nhanh hơn: Như bạn biết, tầng Framework Flutter viết Dart- ngôn ngữ hướng đối tượng hỗ trợ JIT(Just In Time), tức hỗ trợ hot reload trình viết code Với hot reload bạn cập nhật ứng dụng nhanh source code bạn thay đổi mà không cần phải build lại việc nhấn nút hot reload Trong trình viết ứng dụng, bạn thấy rõ điểm ưu việt hot reload Flutter dễ học dễ sử dụng cách dùng để tạo ứng dụng di động vô đơn giản Trước bạn dùng Java, Swift, React Native, sử dụng sang Flutter bạn thấy điểm khác biệt rõ nét bạn tạo ứng dụng gốc thực mà khơng cần code nhiều, hạn chế nhiều lỗi Hiệu mạnh mẽ: Static language với syntax đại, compiler linh động AOT (for archive, build prod) JIT (for development, hot reload) Có thể chạy giả lập mobile web, tiện cho việc phát triển Các đo lường số hiệu suất hỗ trợ sẵn giúp lập trình viên kiểm sốt tốt hiệu suất ứng dụng Framework đại: Dễ dàng tạo giao diện người dùng bạn với framework đại Flutter tập hợp platform, layout widget phong phú Giải thách thức giao diện người dùng khó khăn bạn với API mạnh mẽ linh hoạt cho 2D, animation, gesture, hiệu ứng Hỗ trợ đa tảng: Android, iOS, Desktop, Linux, Embbed System Thời gian xây dựng ứng dụng nhanh hơn, chi phí thấp hơn: Viết code nhanh, basecode chạy tảng Android, iOS thời gian test, fix bugs nhanh hơn, tiết kiệm chi phí xây dựng app 1.4.2 Nhược điểm Thư viện Supports hạn chế so với native SDK Vì Flutter SDK phát hành thức vào năm 2017 nên cộng đồng chưa mạnh tảng native Kích thước file lớn: Ví dụ app “Hello world”, App Flutter có kích thước 4.7MB, App Kotlin 550KB, App native Java : 539KB Cũng dễ hiểu thôi, cấu trúc Flutter SDK chứa thư viện để xử lý iOS Android Bộ render UI gần viết lại, khơng liên quan tới UI có sẵn Framework native, dẫn đến memory sử dụng nhiều Phải học thêm ngôn ngữ DART Dù dễ thân thiện rào cản quan trọng cần cân nhắc Mơ hình liệu mới: bloc pattern, DART Streaming; quen với Redux làm phát triển React Native, bạn thời gian để học thêm mô hình liệu Flutter, khơng khó Update nhanh… ngủ dậy sau giấc thấy version tăng số bình thường Hiện stable nhiều hơn, với update bị breaking change (lỗi source cũ) 1.4.3 So sánh với framework khác Hình ảnh 1: Biểu đồ so sánh flutter react native 10 return Column( children: [ buildCard( "Tổng Ca Nhiễm Covid Ghi Nhận", summary?.cases ?? 0, summary?.todayCases ?? 0, kConfirmedColor, ), buildCard( "Tổng Số Ca Hiện Tại", summary?.active ?? 0, summary?.todayCases ?? 0, kActiveColor, ), buildCard( "Tổng Số Ca Hồi Phục", summary?.recovered ?? 0, summary?.todayRecovered ?? 0, kRecoveredColor, ), buildCard( "Tổng Số Ca Chết", summary?.deaths ?? 0, summary?.todayDeaths ?? 0, kDeathColor, ), ], ); } Widget buildCard(String title, int totalCount, int todayCount, Color color) { return Card( elevation: 1, child: Container( height: 90, padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Column( children: [ Text( title, style: TextStyle( color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 14, ), ), Expanded( child: Container(), ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ 33 Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Tổng", style: TextStyle( color: color, fontWeight: FontWeight.bold, fontSize: 15, ), ), Text( totalCount.toString().replaceAllMapped( reg, (Match match) => '${match[1]}.'), style: TextStyle( color: color, fontWeight: FontWeight.bold, fontSize: 28, )) ], ), Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text( "Hôm nay", style: TextStyle( color: color, fontWeight: FontWeight.bold, fontSize: 15, ), ), Text( todayCount.toString().replaceAllMapped( reg, (Match match) => '${match[1]}.'), style: TextStyle( color: color, fontWeight: FontWeight.bold, fontSize: 28, )) ], ), ], ) ], )), ); } 34 3.5.7 Xây dựng tìm kiếm quốc gia Widget build(BuildContext context) { return FutureBuilder( future: countryList, builder: (context, snapshot) { if (snapshot.hasError) { return Center( child: Text("Error"), ); } switch (snapshot.connectionState) { case ConnectionState.waiting: return Center( child: Text("Loading"), ); default: return !snapshot.hasData ? Center( child: Text( "Empty", ), ) : Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 4, vertical: 6), child: Text( "Tên Quốc Gia", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14, ), ), ), TypeAheadFormField( textFieldConfiguration: TextFieldConfiguration( controller: this._typeAheadController, decoration: InputDecoration( hintText: 'Nhập tên quốc gia', 35 hintStyle: TextStyle(fontSize: 16), border: OutlineInputBorder( borderRadius: BorderRadius.circular(15), borderSide: BorderSide( width: 0, style: BorderStyle.none, ), ), filled: true, fillColor: Colors.grey[200], contentPadding: EdgeInsets.all(20), prefixIcon: Padding( padding: EdgeInsets.only(left: 24.0, right: 16.0), child: Icon( Icons.search, color: Colors.black, size: 28, ), ), ), ), suggestionsCallback: CovidService.getCountrySummary, itemBuilder: (context, CountryModel? suggestion) { final country = suggestion!; return ListTile( title: Text(country.country), ); }, transitionBuilder: (context, suggestionsBox, controller) { return suggestionsBox; }, onSuggestionSelected: (CountryModel? suggestion) { this._typeAheadController.text = suggestion?.country ?? ''; setState(() { summaryList = CovidService.getCountrySummary( suggestion!.country); }); }, ), SizedBox(height: 8), FutureBuilder( future: summaryList, builder: (context, snapshot) { if (snapshot.hasError) return Center( child: Text("Error"), ); switch (snapshot.connectionState) { case ConnectionState.waiting: return Center( child: Text("Loading"), 36 ); default: return !snapshot.hasData ? Center( child: Text("Empty"), ) : CountryStatistics( summaryList: snapshot.data as List, ); } }, ), ], ); } }, ); } 3.5.8 Xây dựng giao diện covid 19 quốc gia Phần code giao diện: Widget build(BuildContext context) { return Column( children: [ 37 buildCard( "Số Ca Ghi Nhận", summaryList[summaryList.length - 1].cases, kConfirmedColor, "Số Ca Nhiễm", summaryList[summaryList.length - 1].active, kActiveColor, ), buildCard( "Số Ca Hồi Phục", summaryList[summaryList.length - 1].recovered, kRecoveredColor, "Số Ca Chết", summaryList[summaryList.length - 1].deaths, kDeathColor, ), buildCard( "Ca Nhiễm / Ngày", summaryList[summaryList.length - 1].todayCases, kConfirmedColor, "Ca Nhiễm / Triệu", summaryList[summaryList.length - 1].casesPerOneMillion, kConfirmedColor, ), buildCard( "Ca Hồi Phục / Ngày", summaryList[summaryList.length - 1].todayRecovered, kRecoveredColor, "Ca Chết / Ngày", summaryList[summaryList.length - 1].todayDeaths, kDeathColor, ), ], ); } Widget buildCard(String leftTitle, int leftValue, Color leftColor, String rightTitle, int rightValue, Color rightColor) { return Card( elevation: 1, child: Container( height: 70, padding: EdgeInsets.symmetric(horizontal: 16, vertical: 5), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( leftTitle, style: TextStyle( color: Colors.grey, fontWeight: FontWeight.bold, 38 fontSize: 14, ), ), Text( leftValue toString() replaceAllMapped(reg, (Match match) => '${match[1]}.'), style: TextStyle( color: leftColor, fontWeight: FontWeight.bold, fontSize: 28, ), ), ], ), Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text( rightTitle, style: TextStyle( color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 14, ), ), Text( rightValue toString() replaceAllMapped(reg, (Match match) => '${match[1]}.'), style: TextStyle( color: rightColor, fontWeight: FontWeight.bold, fontSize: 28, ), ), ], ), ], ), ), ); } 3.6 Xây dựng chức rest API class CovidService { var data = []; List results = []; String urlAll = "https://disease.sh/v3/covid-19/all"; String urlCountry = "https://disease.sh/v3/covid-19/countries"; 39 String urlCity = "http://static.pipezero.com/covid/data.json"; Future getGlobalSummary() async { final response = await http.get(Uri.parse(urlAll)); if (response.statusCode == 200) { var summary = GlobalSummaryModel.fromJson(jsonDecode(response.body)); return summary; } else { throw Exception('Unexpected error occured!'); } } static Future getCountrySummary(String query) async { final response = await http.get(Uri.parse("https://disease.sh/v3/covid-19/countries")); if (response.statusCode == 200) { // print(response.body); final List summaryList = json.decode(response.body); return summaryList map((json) => CountryModel.fromJson(json)) where((country) { final countryLower = country.country.toLowerCase(); final queryLower = query.toLowerCase(); return countryLower.contains(queryLower); }).toList(); } else { throw Exception('error'); } } Future getCountryList() async { final response = await http.Client().get(Uri.parse(urlCountry)); if (response.statusCode == 200) { List countries = json.decode(response.body); return countries.map((e) => CountryModel.fromJson(e)).toList(); } else { throw Exception('Unexpected error occured!'); } } Future getCityList() async { final response = await http.Client().get(Uri.parse(urlCity)); if (response.statusCode == 200) { List city = json.decode(response.body); return city.map((e) => CountryModel.fromJson(e)).toList(); } else { throw Exception('Unexpected error occured!'); } } } 40 3.7 Xây dựng chức nhập vào tìm kiếm covid quốc gia từ liên quan Phần code xử lý: TypeAheadFormField( textFieldConfiguration: TextFieldConfiguration( controller: this._typeAheadController, decoration: InputDecoration( hintText: 'Nhập tên quốc gia', hintStyle: TextStyle(fontSize: 16), border: OutlineInputBorder( borderRadius: BorderRadius.circular(15), borderSide: BorderSide( width: 0, style: BorderStyle.none, ), ), filled: true, fillColor: Colors.grey[200], contentPadding: EdgeInsets.all(20), prefixIcon: Padding( padding: EdgeInsets.only(left: 24.0, right: 16.0), 41 child: Icon( Icons.search, color: Colors.black, size: 28, ), ), ), ), suggestionsCallback: CovidService.getCountrySummary, itemBuilder: (context, CountryModel? suggestion) { final country = suggestion!; return ListTile( title: Text(country.country), ); }, transitionBuilder: (context, suggestionsBox, controller) { return suggestionsBox; }, onSuggestionSelected: (CountryModel? suggestion) { this._typeAheadController.text = suggestion?.country ?? ''; setState(() { summaryList = CovidService.getCountrySummary( //snapshot.data!.firstWhere((e) => e.country == suggestion).query suggestion!.country); }); }, ), 42 CHƯƠƠ̛NG 4: KẾT QUẢẢ̉ 4.1 Cấu trúc thư mục sau hồn thành dự án 4.2 Kết Hình ảnh 22: Kết giao diện dự báo thời tiết 43 Hình ảnh 23: Kết giao diện covid 19 44 TÀI LIỆU THAM KHẢẢ̉O [Tiếng Việt] Lập trình ứng dụng mã nguồn mở, ThS Trương Thị Giang Giang [Tiếng Anh] [2] Tài liệu học lập trình Flutter trang web https://docs.flutter.dev/ [1] [3] 45 Tài liệu học lập trình Flutter trang web https://dart.dev/ Ý KIÊN CỦA NGUƠI HUƠNG DẪN Nhạn xet: Đôi vơi khoa luạn tôt nghiẹp (Đanh dâu sau): va ky ten vao y kiên chon lưa Ký tên Đồng ý thông qua báo cáo Không đồng ý thông qua báo cáo Buon Ma Thuọt, thang nam 2021 NGUƠI HUƠNG DẪN (Ky va ghi ro ho ten) 46 Ho va ten sinh vien: Hoàng Ngọc Thành Can bọ huơng dân (ghi ro hoc ham hoc vi): Thạc sĩ Trương Thị Hương Giang Ten đồ án: LẬP TRÌNH ỨNG DỤNG XEM THỜI TIẾT VÀ SỐ LIỆU COVID 19 Điêm: Đak Lak, thang nam 2021 SINH VIEN (Ky va ghi ro ho ten) CAN BỘ HUƠNG DẪN (Ky va ghi ro ho ten) 47 ...TRƯỜNG ĐẠI HỌC TÂY NGUYÊN KHOA KHTN&CN BÁO CÁO MÔN HỌC LẬP TRÌNH ỨNG DỤNG MÃ NGUỒN MỞ ĐỀ TÀI: LẬP TRÌNH ỨNG DỤNG XEM THỜI TIẾT VÀ SỐ LIỆU COVID 19 Sinh viên: Hoàng Ngọc Thành... diện dự báo thời tiết 43 Hình ảnh 23: Kết giao diện covid 19 44 TÀI LIỆU THAM KHẢẢ̉O [Tiếng Việt] Lập trình ứng dụng mã nguồn mở, ThS Trương Thị Giang Giang [Tiếng Anh] [2] Tài liệu học lập trình. .. nói riêng từ lý thực tiễn nên e chọn đề tài ứng dụng xem thông tin thời tiết số liệu thống kê covid 19 Ứng dụng xem thời tiết covid mang lại ý nghĩa khoa học thực tiễn giúp người hiểu rõ tính