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

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 1 Lý do chọn đề tài ​Do tình hình dịch covid 19 tại việt nam có nhưng chuyển biến phức tạp nên nhu cầu có một ứng dụng để xem thông tin về số ca nhiễm bệnh, số ca tử vong và những ca hồi phục trên cả thế giới nói chung và Việt Nam nói riêng từ đó lý do thực tiễn đó nên e đã chọn đề tài ứng dụng xem thông tin thời tiết và số liệu thống kê covid 19. ​Ứng dụng xem thời tiết và covid mang lại ý nghĩa khoa học thực tiễn giúp mọi người hiểu rõ hơn về tính nguy hiểm của dịch bệnh. 2 Mục đích nghiên cứu ​Mục đích nghiên cứu là giúp cho chúng ta nắm bắt và có cái nhìn khách quan và tính nguy hiểm của dịch bệnh trong và ngoài nước. ​Việc dịch bệnh covid 19 rất nguy hiểm thông qua số ca nhiễm và số cả tử vong lớn là rất đáng ngại để mọ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 là nhu cầu thiết yếu để có thể đánh giá mức độ thực tế của dịch bệnh 3 Đối tượng nghiên cứu ​Ở đây đối tượng nghiên cứu là dịch bệnh covid 19 đang hoành hành trên cả thế giới trong đó có Việt Nam. Dịch bệnh do covid 19 gây ra sự náo loạn trên cả thế giới khiến người người nhà nhà đứng ngồi không yên. 4 Phạm vi nghiên cứu ​Vì covid đã lây lan và có mặt trên hầu hết các nước trên thế giới nên phạm vi nghiên cứu đã chia làm 2 phần trong đó là thế giới và Việt Nam

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 18103080 TRƯỜNG ĐẠI HỌC TÂY NGUN 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: Hồ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 18103080 Đắ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ệ, 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 q trình học tập hồn thành đồ án Em xin chân thành cảm ơn! MỤC LỤC DANH MỤC HÌNH ẢNH ĐẶ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 1.5 Hướng dẫn cài đặt Đầu tiên vào trang web Flutter để tiến hành cài đặt theo đường link sau https://flutter.dev/docs/get-started/install/windows Hình ảnh 2: Tải gói flutter SDK Sau giải nén bỏ vào Documents Hình ảnh 3: Giải nén flutter SDK Tiếp theo coppy đường dẫn có chứa tệp flutter bỏ vào Edit the system enviroment variables 10 Phần code giao diện: Widget build(BuildContext context) { 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(), 31 ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ 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, )) ], ), ], ) ], )), ); } 32 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( 33 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), 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( 34 child: Text("Loading"), ); 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) { 35 return Column( children: [ 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, 36 style: TextStyle( color: Colors.grey, fontWeight: FontWeight.bold, 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 = []; 37 List results = []; String urlAll = "https://disease.sh/v3/covid-19/all"; String urlCountry = "https://disease.sh/v3/covid-19/countries"; 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 { 38 throw Exception('Unexpected error occured!'); } } } 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, 39 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( //snapshot.data!.firstWhere((e) => e.country == suggestion).query suggestion!.country); }); }, ), 40 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 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ÀI LIỆU THAM KHẢO [Tiếng Việt] [1] 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/ [3] Tài liệu học lập trình Flutter trang web https://dart.dev/ 43 Ý KIẾN CỦA NGƯỜI HƯỚNG DẪN Nhận xét: Đối với khóa luận tốt nghiệp (Đánh dấu sau): ký tên vào ý kiến chọn lựa Ký tên Đồng ý thông qua báo cáo Không đồng ý thông qua báo cáo Buôn Ma Thuột, ngày tháng năm 2021 NGƯỜI HƯỚNG DẪN (Ký ghi rõ họ tên) 44 Họ tên sinh viên: Hoàng Ngọc Thành Cán hướng dẫn (ghi rõ học hàm học vị): Thạc sĩ Trương Thị Hương Giang Tên đồ án: LẬP TRÌNH ỨNG DỤNG XEM THỜI TIẾT VÀ SỐ LIỆU COVID 19 Điểm: Đăk Lăk, ngày tháng năm 2021 SINH VIÊN (Ký ghi rõ họ tên) XÁC NHẬN CÁN BỘ HƯỚNG DẪN CHỦ TỊCH HỘI ĐỒNG (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) 45 ... cách thức giải Khi xây dựng ứng dụng xem thông tin thời tiết xem số lượng ca nhiễm Covid 19 có phần Backend Fontend Backend có nhiệm vụ lấy liệu thời tiết covid 19 ( nhiệt độ, độ ẩm, số ca nhiễm,... 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 để... tượng nghiên cứu dịch bệnh covid 19 hoà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