Ứng dụng dự báo thời tiết đa nền tảng lập trình bằng Flutter với ngôn ngữ Dart dùng để code xây dựng giao diện và chức năng, dữ liệu sử dụng API được lấy từ website của OpenWeatherMap. Ứng dụng xây dựng chạy được trên 2 hệ điều hành IOS và Android với giao diện đơn giản dễ sử dụng nhưng cũng không kém phần hiện đại.
ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN BÁO CÁO ĐỒ ÁN CƠ SỞ ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG Giảng viên hướng dẫn : ThS Võ Hùng Cường Sinh viên thực Trần Đình Hùng - 18IT209 : Đặng Ngọc Đăng Khoa - 18IT217 Đà nẵng, 20 tháng năm 2021 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN ĐỒ ÁN CƠ SỞ ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG Giảng viên hướng dẫn : ThS Võ Hùng Cường Sinh viên thực Trần Đình Hùng - 18IT209 : Đặng Ngọc Đăng Khoa - 18IT217 Đà Nẵng, 20 tháng năm 2021 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG MỞ ĐẦU Hiện Công nghệ thông tin vô phát triển người đều sử dụng máy vi tính điện thoại di động để làm việc việc cập nhật thông tin Do đó việc xây dựng ứng dụng cho điện thoại di động ngành công nghiệp đầy tiềm hứa hẹn nhiều phát triển vượt bậc ngành khoa học kỹ thuật Phần mềm, ứng dụng cho điện thoại di động đa dạng phong phú hệ điều hành di động Các hệ điều hành J2ME, Android, IOS, Hybrid, Web bases Mobile Application phát triển thị trường truyền thông di động Trong vài năm trở lại đây, hệ điều hành Android, IOS đời phát triển mạnh mẽ với kế thừa ưu việt hệ điều hành đời trước kết hợp nhiều công nghệ tiên tiến Adroid IOS đối thủ cạnh tranh mạnh mẽ với hệ điều hành trước đó hệ điều hành di động tương lai nhiều người ưa chuộng Ngày với phát triển nhanh chóng xã hội, nhu cầu du lịch ngày nhiều, với mục đích nghiên cứu, tìm hiểu về ứng dụng android để cập thời tiết dễ sử dụng giúp bạn cập nhật thông tin thời tiết Với mục tiêu sinh viên trường với kiến thức tốt về lập trình di động để có thể làm nhiều việc khác nhau, môn lập trình di động đời Vì vậy, nhóm định chọn đề tài “Ứng dụng dự báo thời tiết đa tảng”, điều đó giúp thực hành để có hội hiểu rõ về lập trình di động – lĩnh vực lập trình thú vị ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG LỜI CẢM ƠN Sau gợi ý về cách tìm hiểu thực lập trình di động để làm đồ án sở Nhóm xây dựng thành công đề tài:” Ứng dụng dự báo thời tiết đa nền tảng” Được hướng dẫn thầy Võ Hùng Cường, nhóm chúng tơi hồn thành nhiệm vụ đề Tuy nhiên, với thời gian kiến thức có hạn, báo cáo có nhiều hạn chế sai sót, mong nhận lời góp ý chân thành thầy giáo hướng dẫn hội đồng báo cáo Nhóm chúng tơi xin bày tỏ lịng biết ơn sâu sắc đến với thầy Võ Hùng Cường bạn giúp nhóm chúng tơi hồn thành nội dung báo cáo Nhóm xin chân thành cảm ơn! ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG MỤC LỤC CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Tên đề tài: .1 1.2 Yêu cầu đề tài: 1.3 Mục đích chọn đề tài: .1 1.4 Phát biểu toán: 1.5 Mơ hình chức năng: 1.6 Mơ Hình Hoạt Động .2 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .3 2.1 Flutter gì? 2.2 Dart gì? .3 2.2.1 Giới thiệu về RxDart 2.2.2 Streams Rxdart 2.3 Giới thiệu về Bloc 2.3.1 Streams gì? 2.3.2 Bloc gì? CHƯƠNG 3: MÔI TRƯỜNG LẬP TRÌNH 3.1 Môi trường hệ điều hành: .9 3.2 Sơ lược về Visual Studio: .9 3.3 Cài đặt Visual Code Studio: 3.4 Tạo project Visual Studio: 12 CHƯƠNG 4: KỸ THUẬT XÂY DỰNG ỨNG DỤNG 15 4.1 Tìm Hiều Về Dịch Vụ OpenWeatherMap 15 4.1.1 Khái Niệm 15 4.1.2 Các Tính Năng Nổi Bật Của API Thời Tiết Open Weather Map 15 4.2 Đăng Ký Và Kích Hoạt Sử Dụng Key API Openweathermap 16 4.3 Khối server làm cơng việc ? .19 4.4 Khối Client làm cơng việc ? .19 4.5 Sơ đồ hoạt động ứng dụng .19 CHƯƠNG 5: TRIỂN KHAI THỰC HIỆN 21 5.1 Giao diện ứng dụng hệ điều hành IOS 21 5.2 Giao diện ứng dụng hệ điều hành Android 23 CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .25 6.1 Kết luận 25 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG 6.2 Hướng phát triển 25 TÀI LIỆU THAM KHẢO 26 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG DANH MỤC HÌNH ẢNH Hình Mơ hình hoạt động Hình Flutter Cross platform Hình BehaviorSubject .4 Hình PublishSubject Hình ReplaySubject Hình BLOC pattern for Flutter Hình Visual Studio Hình Visual Studio tải về 10 Hình Bắt đầu cài đặt Visual Studio 10 Hình 10 Cài đặt Visual Studio 11 Hình 11 Tuỳ chọn cài đặt 11 Hình 12 Cài đặt Visual Stuido 12 Hình 13 Tuỳ chọn tạo project 13 Hình 14 Cài đặt Visual Stuido 13 Hình 15 Tạo project 14 Hình 16 Trang chủ đăng ký tài khoản OpenWeatherMap 16 Hình 17 Trang chủ OpenWeatherMap 17 Hình 18 URL OpenWeatherMap 17 Hình 19 Dữ liệu API trả về .18 Hình 20 Sơ đồ hoạt động ứng dụng 19 Hình 21 Dự báo thời tiết Dubai HĐH IOS 21 Hình 22 Dự báo thời tiết Alaska HĐH IOS 22 Hình 23 Dự báo thời tiết Hà Nội HĐH IOS 22 Hình 24 Dự báo thời tiết TP Hồ Chí Minh HĐH Android 23 Hình 25 Dự báo thời tiết Mumbai HĐH Android 23 Hình 27 Dự báo thời tiết Tromso HĐH Android 24 Hình 26 Dự báo thời tiết Dubai HĐH Android .24 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Tên đề tài: Ứng dụng dự báo thời tiết đa nền tảng 1.2 Yêu cầu đề tài: Xây dựng ứng dụng dự báo thời tiết hiển thị cập nhật liên tục nhiệt độ, độ ẩm,… 1.3 Mục đích chọn đề tài: Chúng tơi chọn đề tài sản phẩm cuối nó ứng dụng nhỏ có thể tra cứu thông tin thời tiết vùng chọn, sản phẩm nhỏ mà bạn có thể dùng ngày Việc tạo sản phẩm có thể dùng tạo cho bạn động lực tốt xem nó thành thân 1.4 Phát biểu toán: Ngày nhu cầu lại, tổ chức kiện người ngày tăng cao Vì vậy, nắm bắt tình hình thời tiết lượng mưa, độ ẩm, nhiệt độ dễ dàng xếp tổ chức kiện, vui chơi cách tốt Hiểu nhu cầu cần thiết đó, nhóm định xây dựng ứng dụng “Dự báo thời tiết đa nền tảng” để giúp người dùng có thể cập nhật tình hình thời tiết cách nhanh nhất, xác để người dùng có thể dễ dàng có định tốt cho dự định đến Tốc độ phát triển nhanh chóng công nghệ di động tạo hội cho lập trình viên tự thể ý tưởng sáng tạo Làm cho ứng dụng ngày thân thiện để đáp ứng nhu cầu sống cá nhân 1.5 Mơ hình chức năng: Ứng dụng Nhập địa điểm Xem Thông Tin Thời Tiết Hiện Tại Hiển Thị Thông Tin Thời Tiết Ngày Tiếp Theo Nhập địa điểm : Ứng dụng cho phép người dùng nhập địa điểm cần ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG tìm Xem thông tin thời tiết : Ứng dụng hiển thị thơng tin tình hình thời tiết lượng mưa, độ ẩm, nhiệt độ Hiển thị thông tin thời tiết ngày : Ứng dụng hiển thị thơng tin tình hình nhiệt độ cao thấp 1.6 Mơ Hình Hoạt Động Hình Mơ hình hoạt động ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Flutter gì? Flutter Cross platform dùng để phát triển ứng dụng di động nguồn mở tạo Google Nó sử dụng để phát triển ứng ứng dụng cho Android iOS, phương thức để tạo ứng dụng cho Google Fuchsia 2.2 Dart gì? Hình Flutter Cross platform Dart ngơn ngữ lập trình web Google phát triển Nó thức cơng bố Hội thảo GOTO ngày 10-12 tháng 10 năm 2011 Aarhus Mục đích Dart để thay JavaScript ngôn ngữ kịch bên trình duyệt web, mà cung cấp lựa chọn đại Năm 2018, Dart dùng để phát triển ứng dụng Flutter Từ đó, Dart lập trình viên đánh giá cao sử dụng nhiều ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG Chọn dự án mà bạn lập trình để cài đặt Visual Studio Studio chức đó là: Class Tuỳ chọn cài đặt phù hợp vớiHình bạn10 vàCài lưuđặtý Visual ln chọn Designer LINQ to SQL Tools Hình 11 Tuỳ chọn cài đặt Sau đó chọn Install chờ Visual Studio cài đặt hồn thành 12 Hình 12 Cài đặt Visual Stuido ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG 3.4 Tạo project Visual Studio: Khi cài đặt xong mở Visual Studio ta chọn “Create a new Project”: Sau bấm vào chức này, ta có: Chọn ngôn ngữ lập trình python, Platform Windows, Project Type Desktop 13 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG Hình 13 Cài đặt Visual Stuido Cuối Hình 14 Tuỳ chọn tạo project 14 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG Project name: Đặt tên cho dự án Ví dụ Tui đặt “HelloWorld” Location: Nơi lưu trữ dự án Nên lưu khác ổ C nha, tạo thư mục không dấu Tiếng Việt để lưu trữ Solution name: Solution có nhiều dự án (nhiều Project) Thông thường lần tạo Project ta có Solution đinh kèm để quản lý nó Nhớ triển khai dự án thường có nhiều Project Như vậy có Solution nhiều dự án để phối hợp giải vấn đề mà ta cần hồn thành Thơng thường nó đặt tên trùng với Project Nên bạn để mặc định hình Và click Create để tạo project Hình 15 Tạo project 15 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG CHƯƠNG 4: KỸ THUẬT XÂY DỰNG ỨNG DỤNG 4.1 Tìm Hiều Về Dịch Vụ OpenWeatherMap 4.1.1 Khái Niệm OpenWeatherMap API cung cấp dịch vụ liệu thời tiết dự báo miễn phí, thích hợp cho dịch vụ đồ ứng dụng web điện thoại thông minh Ý tưởng lấy cảm hứng từ OpenStreetMap Wikipedia nhằm cung cấp thơng tin miễn phí sẵn có cho người OpenWeatherMap cung cấp nhiều liệu thời tiết đồ thời tiết tại, dự báo tuần, lượng mưa, gió, mây, liệu từ trạm thời tiết nhiều thứ khác Dữ liệu thời tiết nhận từ dịch vụ phát sóng khí tượng tồn cầu 40.000 trạm khí tượng Bạn có thể nhận liệu thời tiết cho ứng dụng bạn cách sử dụng chuỗi JSON XML 4.1.2 Các Tính Năng Nổi Bật Của API Thời Tiết Open Weather Map • Dữ liệu thời tiết (Current weather data) Truy cập liệu thời tiết cho vị trí bao gồm 200.000 thành phố Thời tiết thường xun cập nhật dựa mơ hình liệu toàn cầu từ 40.000 trạm thời tiết Dữ liệu có sẵn định dạng JSON, XML HTML Dự báo thời tiết ngày cập nhật liên tục sau Dự báo ngày có sẵn địa điểm thành phố Dự báo ngày bao gồm liệu thời tiết sau Dự báo có sẵn JSON XML Dự báo 16 ngày Dự báo 16 ngày có sẵn địa điểm thành phố Dự báo 16 ngày bao gồm thời tiết hàng ngày Dự báo có sẵn JSON XML Dữ liệu lịch sử thời tiết API OpenWeatherMap cung cấp liệu lịch sử thời tiết cho 37.000 thành phố Dữ liệu lịch sử tháng trước đó có sẵn tài khoản 16 ĐỀ TÀI: ỨNG DỤNG DỰ BÁO THỜI TIẾT ĐA NỀN TẢNG GVHD: VÕ HÙNG CƯỜNG Starter, cho năm trước tài khoản Medium năm History Bulk 4.2 Đăng Ký Và Kích Hoạt Sử Dụng Key API Openweathermap Đầu tiên ta đăng ký tài khoản Open weather API để lấy API Key Ta truy cập đường link https://home.openweathermap.org/users/sign_up để đăng ký tài khoản miễn phí OpenWeatherMap nhận key miễn phí cho tài khoản đó Hình 16 Trang chủ đăng ký tài khoản OpenWeatherMap 17 Khi đăng ký đăng nhập thành công, có API key bên dưới: Hình 17 Trang chủ OpenWeatherMap Kiểm tra chuỗi JSON truy vấn liệu từ API URL lấy thông tin thời tiết theo kinh độ vĩ độ http://api.openweathermap.org/data/2.5/weather?q=HaiPhong&appid=d 0e912badecb079b4f4658f6625cd097 • Được kết Hình 18 URL OpenWeatherMap Hình 19 Dữ liệu API trả về 4.3 Khối server làm cơng việc ? - Tiếp nhận request gửi từ client lên xử lý - Truy vấn đến OpenWeatherMap để lấy liệu thời tiết thông qua URL - Gửi liệu định dạng JSON lấy cho Client - Để xử lý liệu JSON Dart dùng thư viện Dio thư viện Google 4.4 Khối Client làm công việc ? - Tiếp nhận yêu cầu địa danh từ người dùng gửi đến Server để gửi liệu chờ nhận kết trả về - Xử lý liệu định dạng JSON từ Server để tách lấy trường liệu cần thiết - Hiển thị giao diện người dùng tương tác 4.5 Sơ đồ hoạt động ứng dụng Người dùng (user) nhập tên thành phố cần tìm kiếm vào tìm kiếm ứng dụng Hình 20 Sơ đồ hoạt động ứng dụng Client tiếp nhận gửi tên thành phố người dùng nhập lên Server Server nhận tên thành phố từ Client, lấy id thành phố cần tìm gửi yêu cầu đến OpenWeatherMap OpenWeatherMap xử lý trả lại liệu thời tiết thành phố cần tìm cho server theo dạng Json Server gửi liệu nhận từ OpenWeatherMap cho Client Client nhận liệu từ server, xử lý hiển thị thông tin cho người dùng CHƯƠNG 5: TRIỂN KHAI THỰC HIỆN 5.1 Giao diện ứng dụng hệ điều hành IOS Ứng dụng chạy hệ điều hành IOS chạy máy ảo iPhone 12 Pro Max Dự báo thời tiết DuBai vào ngày 27 tháng năm 2021 Dựa vào hình ta có thể thấy nhiệt độ, độ ẩm, áp suất khơng khí, tốc độ gió, khả mưa,… Hình 21 Dự báo thời tiết Dubai HĐH IOS Ứng dụng dự báo thời tiết vòng ngày theo giờ, tiếng lần với khung cố định 0h, 3h, 6h, 9h, 12h, 15h, 18h, 21h, 24h Hình 22 Dự báo thời tiết Alaska HĐH IOS Hình 23 Dự báo thời tiết Hà Nội HĐH IOS 5.2 Giao diện ứng dụng hệ điều hành Android Còn giao diện ứng dụng Android chạy điện thoại SamSung Galaxy Note Với giao diện tương đồng sử dụng chung nguồn code Ứng dụng cho thấy nhiệt độ, độ ẩm, áp suất khơng khí, tốc độ gió, khả mưa,… Hình 24 Dự báo thời tiết TP Hồ Chí Minh HĐH Android Hình 25 Dự báo thời tiết Mumbai HĐH Android Hình 25 Dự báo thời tiết Dubai HĐH Android Hình 24 Dự báo thời tiết Tromso HĐH Android CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết luận Trên sở nghiên cứu mơn lập trình di động Dưới hướng dẫn thầy Võ Hùng Cường, nhóm thiết kế thành công chương trình hiển thị dự báo thời tiết Tuy kết đạt chưa cao, chương trình cịn nhiều điểm hạn chế đó bước mở đầu để nhóm thiết kế ứng dụng hồn thiện Bên cạnh đó q trình xây dựng đồ án nhóm học tập nhiều kiến thức về lập trình di động, quản lý dự án để có thể thiết kế chương trình có chất lượng tốt sau Chúng sinh viên bước đầu học lập trình di động nên chương trình khơng thể tránh khỏi lỗi, điểm chưa hợp lý đó động lực để nhóm có thể làm tốt sau 6.2 Hướng phát triển Dự định tới nhóm việc mở rộng dự án đó xây dựng lại giao diện đẹp tăng tính tương tác lên Phát triển chương trình dự báo nhiều ngày có thể cho phép người dùng quan sát thời tiết qua đồ có biểu đồ hiển thị biểu đồ, hướng gió, dự báo thiên tai, chất lượng khơng khí, … TÀI LIỆU THAM KHẢO 1) https://openweathermap.org/ 2) https://fullstackstation.com/flutter-la-gi/ 3) https://viblo.asia/p/flutter-rxdart-phan-biet-phan-bietbehaviorsubject-publishsubjectreplaysubject-Qpmlew17Krd