Bài tập nhóm môn lập trình thiết bị di động đề tài xây dựng ứng dụng dự báo thời tiết

OpenWeather APIOpenWeather và API của nó đóng vai trò quan trọng trong việc cung cấp thông tin thờitiết chính xác và đáng tin cậy cho các nhà phát triển và ứng dụng trên toàn thế giới.Op

lOMoARcPSD|11346942 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN  BÀI TẬP NHÓM ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG DỰ BÁO THỜI TIẾT MÔN: LẬP TRÌNH THIẾT BỊ DI ĐỘNG Giáo viên: Huỳnh Tuấn Anh Lớp học phần: 62.CNTT-1 Thành viên nhóm: Nguyễn Hoàng Đăng Quang – 62134138 Phạm Huỳnh Đức Vinh - 62132711 Trương Tuấn Lộc - 62131020 Niên khóa: 2022 – 2023 lOMoARcPSD|11346942 NHẬN XÉT CỦA GIÁO VIÊN lOMoARcPSD|11346942 Mục Lục Chương TỔNG QUAN ĐỀ TÀI 1.1.GIỚI THIỆU CHUNG VỀ LĨNH VỰC NGHIÊN CỨU 1.1.1 .Giới thiệu ứng dụng dự báo thời tiết 1.1.2 Giới thiệu sơ lược Flutter Chương CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu công cụ thư viện cần thiết 2.1.1 OpenWeather API 2.1.2 Thư viện Intl 2.1.3.Thư viện http Chương XÂY DỰNG ỨNG DỤNG 10 3.1 Model .10 3.1.1 Hour_Forecast_model.dart 10 3.1.2 Weather_model.dart 12 3.2 Page 13 3.2.1 WeatherPage.dart 13 3.2.2 SearchPage.dart 19 3.3 Provider 22 3.3.1 WeatherProvider.dart 22 3.4 Services 22 3.4.1 Weather_API_Service.dart 22 3.5 Widget 23 3.5.1 Current_Weather.dart 23 3.5.2 DailyList_Widget.dart 24 3.5.3 MyList.dart 26 3.6 WeatherApp.dart 28 Chương Giao diện ứng dụng kết luận .29 4.1 Giao diện ứng dụng 29 4.2 Kết luận 30 lOMoARcPSD|11346942 Chương TỔNG QUAN ĐỀ TÀI 1.1 GIỚI THIỆU CHUNG VỀ LĨNH VỰC NGHIÊN CỨU 1.1.1 Giới thiệu ứng dụng dự báo thời tiết Hiện nay, có nhiều phần mềm dự báo thời tiết đa dạng phong phú, giúp người dùng truy cập nhận thông tin thời tiết cách thuận tiện xác Dưới số phần mềm dự báo thời tiết phổ biến đáng ý: AccuWeather: AccuWeather ứng dụng dự báo thời tiết phổ biến Với khả cung cấp thông tin thời tiết chi tiết xác, AccuWeather có giao diện trực quan tính cung cấp dự báo tương lai gần xa Hình 1- AccuWeather The Weather Channel: The Weather Channel phần mềm dự báo thời tiết đáng tin cậy, kết hợp liệu từ nguồn thời tiết đáng tin cậy chuyên gia thời tiết Với tính radar thời tiết, cảnh báo thời tiết thông báo cập nhật tức thì, người dùng ln cập nhật điều kiện thời tiết lOMoARcPSD|11346942 Hình – The Weather Channel Weather Underground: Weather Underground cộng đồng dự báo thời tiết trực tuyến, nơi người dùng chia sẻ thơng tin dự báo thời tiết khu vực họ Phần mềm cung cấp thông tin chi tiết đáng tin cậy nhiệt độ, độ ẩm, gió, mưa nhiều yếu tố thời tiết khác Hình – Weather Underground lOMoARcPSD|11346942 Dark Sky: Dark Sky ứng dụng dự báo thời tiết tiếng với khả dự báo xác tương lai gần Đặc điểm bật Dark Sky khả cung cấp thông báo cập nhật thời tiết tức cảnh báo mưa vịng Hình – Ứng dụng Dark Sky Weather WeatherBug: WeatherBug ứng dụng dự báo thời tiết đa tảng với tính theo dõi thời tiết theo thời gian thực Nó cung cấp thơng tin chi tiết nhiệt độ, gió, áp suất khơng khí điều kiện thời tiết nhiều địa điểm giới Hình – WeatherBug Những phần mềm dự báo thời tiết số ví dụ Hiện nay, thị trường cung cấp nhiều lựa chọn cho người dùng để truy cập thông tin thời tiết lên kế hoạch cho hoạt động dựa dự báo đáng tin cậy Do nhóm chúng em định thực xây dựng giao diện ứng dụng mô tả cách thức hoạt động ứng dụng dự báo thời tiết lOMoARcPSD|11346942 1.1.2 Giới thiệu sơ lược Flutter Flutter framework mã nguồn mở, tiếng phát triển Google, Flutter giúp xây dựng ứng dụng di động nhanh chóng hiệu iOS Android từ mã nguồn Hình - Flutter Với Flutter, nhà phát triển viết mã lần triển khai ứng dụng nhiều tảng cách dễ dàng Điều giúp giảm đáng kể thời gian công sức phát triển, đồng thời tạo ứng dụng đa tảng chất lượng cao Không cần phải viết lại mã nguồn cho tảng, Flutter cho phép nhà phát triển tập trung vào việc xây dựng trải nghiệm người dùng tốt Flutter đánh giá dễ học Với sử dụng ngơn ngữ lập trình Dart, ngôn ngữ đơn giản dễ tiếp cận, nhà phát triển nhanh chóng làm quen với Flutter bắt đầu xây dựng ứng dụng Flutter cung cấp tài liệu phong phú, ví dụ ví dụ thực tế giúp người học hiểu rõ cách sử dụng framework xây dựng ứng dụng từ đầu Điểm mạnh bật khác Flutter tốc độ Với sử dụng công nghệ gọi "Hot Reload", Flutter cho phép nhà phát triển thấy thay đổi áp dụng ứng dụng mà không cần phải tải lại toàn ứng dụng Điều giúp tăng nhanh trình phát triển kiểm tra, cho phép nhà phát triển chỉnh sửa cải thiện ứng dụng cách nhanh chóng linh hoạt lOMoARcPSD|11346942 Tóm lại, Flutter framework mạnh mẽ linh hoạt, mang lại lợi ích đáng kể tốc độ, dễ học khả đa tảng Đây công cụ tuyệt vời cho nhà phát triển ứng dụng di động để xây dựng ứng dụng tương tác, đẹp mắt hiệu iOS Android Chương CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu công cụ thư viện cần thiết 2.1.1 OpenWeather API OpenWeather API đóng vai trị quan trọng việc cung cấp thơng tin thời tiết xác đáng tin cậy cho nhà phát triển ứng dụng toàn giới OpenWeather dịch vụ hàng đầu lĩnh vực dự báo thời tiết, API cung cấp cách tiếp cận dễ dàng mạnh mẽ để truy xuất liệu thời tiết thông qua giao diện lập trình ứng dụng Với OpenWeather API, ta có khả lấy thơng tin thời tiết tại, dự báo tương lai thời tiết lịch sử cho địa điểm giới Dữ liệu thời tiết cung cấp OpenWeather cập nhật thường xuyên từ nguồn đáng tin cậy, đảm bảo ứng dụng ta cung cấp thơng tin xác đáng tin cậy thời tiết cho người dùng API OpenWeather hỗ trợ định dạng phản hồi JSON XML, cho phép ta dễ dàng xử lý liệu tích hợp vào ứng dụng ta Bằng cách sử dụng API này, ta hiển thị thơng tin thời tiết trực quan giao diện người dùng, tạo biểu đồ thời tiết, cung cấp dự báo lời khuyên trang phục, sử dụng liệu thời tiết để thực chức khác kế hoạch hàng ngày 2.1.2 Thư viện Intl Thư viện intl.dart thư viện quan trọng Flutter để làm việc với quốc tế hóa (internationalization) định dạng ngơn ngữ (localization) Nó cung cấp cơng cụ mạnh mẽ để dịch chuỗi, định dạng số ngày tháng theo ngôn ngữ quy tắc định dạng cụ thể Dưới số chi tiết chức định dạng ngày tháng thư viện intl.dart: lOMoARcPSD|11346942 DateFormat: - DateFormat cho phép ta định dạng ngày tháng theo ngôn ngữ vùng địa lý cụ thể Bạn sử dụng ký tự đặc biệt để xác định định dạng ngày tháng, ví dụ: dd/MM/yyyy để hiển thị ngày/tháng/năm - Thư viện hỗ trợ số định dạng ngày tháng phổ biến DateFormat.yMd() (ngày/tháng/năm), DateFormat.Hm() (giờ:phút), DateFormat.yMMMMd() (ngày tháng năm dài) DateTimeFormat: - DateTimeFormat giúp ta định dạng ngày tháng theo tùy chọn ngôn ngữ vùng địa lý Bạn xác định thành phần cụ thể ngày, tháng, năm, giờ, phút giây để hiển thị theo cú pháp mong muốn - Ví dụ: DateTimeFormat(locale).format(dateTime) định dạng ngày tháng theo quy tắc định dạng ngôn ngữ vùng địa lý Với thư viện intl.dart, ta định dạng ngày tháng theo ngôn ngữ vùng địa lý cụ thể, làm cho ứng dụng ta dễ dàng tương thích với người dùng toàn cầu 2.1.3.Thư viện http Thư viện http.dart Flutter cung cấp công cụ để thực yêu cầu HTTP tương tác với REST API Nó thư viện mạnh mẽ linh hoạt, cho phép ta gửi yêu cầu HTTP, nhận phản hồi xử lý liệu trả từ dịch vụ web Các tính quan trọng http.dart việc làm việc với REST API bao gồm: Gửi yêu cầu HTTP: Bạn sử dụng lớp http.Client để gửi yêu cầu HTTP GET, POST, PUT, DELETE PATCH đến REST API Với http.Client, ta xác định URL, tham số, tiêu đề nội dung yêu cầu Xử lý phản hồi: http.dart cho phép ta nhận phản hồi từ REST API xử lý liệu trả Bạn truy cập thành phần phản hồi mã trạng thái, tiêu đề nội dung để xử lý liệu dễ dàng lOMoARcPSD|11346942 Định dạng liệu: Thư viện hỗ trợ định dạng liệu phổ biến JSON, XML định dạng tùy chỉnh khác Bạn chuyển đổi liệu từ thành đối tượng Dart sử dụng gói hỗ trợ dart:convert Xử lý lỗi: http.dart cung cấp chế để xử lý lỗi trình gửi yêu cầu nhận phản hồi từ REST API Bạn kiểm tra mã trạng thái phản hồi để xác định xem u cầu có thành cơng hay khơng xử lý tình lỗi cách phù hợp Xác thực: Thư viện cung cấp chế để xác thực với REST API cách thêm tiêu đề xác thực vào yêu cầu Bạn truyền thông tin xác thực mã thông báo (token) thông tin đăng nhập để xác thực với API Với http.dart, ta tương tác với REST API, gửi yêu cầu, nhận phản hồi xử lý liệu trả cách dễ dàng Thư viện giúp ta xây dựng ứng dụng Flutter kết nối với dịch vụ web tương tác với tài nguyên từ REST API cách linh hoạt tiện lợi Chương XÂY DỰNG ỨNG DỤNG 3.1 Model 3.1.1 Hour_Forecast_model.dart class Hourly_Model { List? hourlydt; List? hourlytemp; List? hourlyicon; Hourly_Model({ required this.hourlydt, required this.hourlytemp, required this.hourlyicon}); Map toJson() { return { 'hourlydt': this.hourlydt, 'hourlytemp': this.hourlytemp, 'hourlyicon': this.hourlyicon, }; } factory Hourly_Model.fromJson(dynamic json) { return Hourly_Model( hourlydt: [ json["list"][0]["dt"].toString(), json["list"][1]["dt"].toString(), lOMoARcPSD|11346942 ), ], ), ), ), ), ), ], ), ), Padding( padding: const EdgeInsets.only(top: 200.0, left: 20.0), child: Align( alignment: Alignment.topLeft, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( child: Text( "Today".toUpperCase(), style: TextStyle( fontSize: 16, color: Colors.black45, fontWeight: FontWeight.bold), ), ), SizedBox( height: 170, width: MediaQuery.of(context).size.width - 40, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: 5, itemBuilder: (BuildContext context, index) { return HourlyWidget( "${weatherData2!.hourlytemp?[index]}", "${weatherData2!.hourlyicon?[index]}", "${weatherData2?.hourlydt?[index]}", index, ); }), ), SizedBox( height: 30, ), Container( margin: const EdgeInsets.all(12), height: 350, padding: const EdgeInsets.all(15), decoration: BoxDecoration( color: Colors.deepPurple[50], borderRadius: BorderRadius.circular(20), ), child: Column( children: [ Text( "Forecast for days :", style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.w500, letterSpacing: 0.5, color: Colors.black, ), ), const SizedBox( Downloaded by Quang Tr?n (tranquang141994@gmail.com) lOMoARcPSD|11346942 height: 30, ), SizedBox( height: 250, width: 350, child: ListView.builder( itemCount: 5, itemBuilder: (BuildContext context, index) { return DailyForcast( "${weatherData2?.hourlydt![index]}", "${weatherData2?.hourlyicon?[index]}", "${weatherData2?.hourlytemp?[index]}", ); }), ), ], ), ), ], ), ), ), ], ), ), ), Trang chủ chia thành hai phần Nếu liệu thời tiết chưa cung cấp (Provider.of(context).weatherData==nullvàProvider.of(context).weatherData2 == null), trang chủ hiển thị SearchPage để người dùng tìm kiếm thơng tin thời tiết cho thành phố cụ thể Ngược lại, liệu thời tiết cung cấp, trang chủ hiển thị Container chứa thành phần hiển thị thơng tin thời tiết Trong Container, có SafeArea để đảm bảo hiển thị an toàn thiết bị Bên SafeArea, có ListView để chứa thành phần khác Các thành phần bao gồm: Phần tiêu đề nút menu: Được hiển thị bên trang chủ Nút menu hành động cụ thể xử lý mã Phần hiển thị thông tin thời tiết tại: Hiển thị tên thành phố, ngày tại, điều kiện thời tiết, nhiệt độ biểu tượng thời tiết Thông tin lấy từ weatherData thông qua Provider Chi tiết thời tiết tại: Hiển thị thông tin tốc độ gió, độ ẩm độ che phủ mây Thông tin truyền vào hàm currentWeatherDetails hiển thị widget Downloaded by Quang Tr?n (tranquang141994@gmail.com) lOMoARcPSD|11346942 Dự báo theo giờ: Hiển thị thông tin thời tiết dự báo theo cho hôm Mỗi mục hiển thị widget HourlyWidget, hiển thị nhiệt độ, biểu tượng thời gian Dự báo ngày: Hiển thị thông tin dự báo thời tiết cho ngày Mỗi mục hiển thị widget DailyForcast, hiển thị biểu tượng, nhiệt độ ngày 3.2.2 SearchPage.dart import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:weatherforecast/Models/Hour_Forecast_model.dart'; import ' /Models/Weather_model.dart'; import ' /Provider/WeatherProvider.dart'; import ' /Services/Weather_API_Service.dart'; String? cityName ; class SearchPage extends StatelessWidget { SearchPage({this.updateUi}); VoidCallback? updateUi; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Search a City"), ), body: SafeArea( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Center( child: SizedBox( width: 300.0, height: 100.0, child: Padding( padding: const EdgeInsets.only(top: 10.0), child: Column( children: [ TextField( style: TextStyle( fontSize: 20, ), onSubmitted: (data) async { cityName = data; WeatherService Service = WeatherService(); weatherModel weather1 = await Service.getWeather(CityName: cityName!); Hourly_Model weather2 = (await Service.getHourlyWeather(CityName: cityName!)) as Hourly_Model; Provider.of(context, listen: false) .weatherData = weather1; Provider.of(context, listen: false) .weatherData2 = weather2; Navigator.of(context).maybePop() ; Downloaded by Quang Tr?n (tranquang141994@gmail.com) lOMoARcPSD|11346942 }, decoration: InputDecoration( contentPadding: EdgeInsets.symmetric( vertical: 10, horizontal: 20), suffixIcon: GestureDetector( onTap: () async { WeatherService Service = WeatherService(); weatherModel weather1 = await Service.getWeather(CityName: cityName!); Hourly_Model weather2 = (await Service.getHourlyWeather(CityName: cityName!)) as Hourly_Model; Provider.of(context, listen: false) weatherData = weather1; Provider.of(context, listen: false) .weatherData2 = weather2; Navigator.of(context).maybePop() ; }, child: Icon(Icons.search)), hintText: "Nhập đ椃⌀a điऀm", border: OutlineInputBorder( borderRadius: BorderRadius.circular(30.0), ), ), ) ], ), ), ), ), ], ), ), ); } } -Các đối số SearchPage updateUi, VoidCallback sử dụng để cập nhật giao diện người dùng Trong build method, định nghĩa Scaffold để tạo trang có tiêu đề "Search a City" Phần thân (body) Scaffold bao gồm SafeArea chứa cột (Column) Trong cột chính, có Center widget để thành phần bên Bên Center, có SizedBox với chiều rộng 300.0 chiều cao 100.0 để giới hạn kích thước thành phần Bên SizedBox, có Padding để thêm khoảng cách phía cho thành phần Trong Padding, có Column để chứa thành phần khác Downloaded by Quang Tr?n (tranquang141994@gmail.com)