Báo cáo chuyên đề học phần lập trình trên thiết bị di động đề ti xây dựng ứng dụng xem dự báo thời thiết

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG ĐỀ TI: XÂY DỰNG ỨNG DỤNG XEM DỰ BÁO THỜI THIẾT Sinh viên thực : PHẠM ĐỨC ANH PHẠM NĂNG QUYỀN LÊ MINH NGHĨA Giảng hướng dẫn viên : CÙ VIỆT DŨNG Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG MỀM Lớp : D15CNPM4 Khóa : 2022-2025 NGHỆ PHẦN Hà Nội, tháng 12 năm 2022 PHIẾU CHẤM ĐIỂM Sinh viên thực Họ tên Phạm Đức Anh Chữ ký Ghi Chữ ký Ghi Phạm Năng Quyền Lê Minh Nghĩa Giảng viên chấm: Họ tên Giảng viên chấm 1: Giảng viên chấm 2: MỤC LỤC CHƯƠNG 1: GIỚI THIỆU VỀ LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG 1.1 Khái quát lập trình thiết bị di động .1 1.2 Các đặc điểm lập trình thiết bị di động .3 1.3 Vai trò lập trình thiết bị di động đời sống kỹ thuật 1.4 Xu hướng công nghệ tương lai lập trình thiết bị di động CHƯƠNG 2: GIỚI THIỆU VỀ REACT-NATIVE FRAMEWORK 2.1 React – native gì? .6 2.2 Cài đặt môi trường cho React – native máy tính sử dụng điều hành Windows 2.3 Nguyên lý hoạt động React – native Framework 2.4 Ưu điểm nhược điểm React – native Framework .9 CHƯƠNG 3: GIỚI THIỆU VỀ ỨNG DỤNG XEM DỰ BÁO THỜI TIẾT 11 3.1 Giới thiệu đề tài lý chọn đề tài .11 3.2 Các ứng dụng tương tự 12 3.3 Giao diện ứng dụng .15 KẾT LUẬN 18 DANH MỤC HÌNH ẢNH V BẢNG BI Hình 3.1: Giao diện ứng dụng dự báo thời tiết ASUS Weather 13 Hình 3.2: Giao diện ứng dụng dự báo thời tiết Accu Weather 14 Hình 3.3: Giao diện hình ứng dụng 15 Hình 3.4: Giao diện hình tìm kiếm vị trí cần xem thời tiết.16 Hình 3.5: Giao diện trang tin tức 17 Y Bảng 1: Bảng liệt kê hệ điều hành với ngơn ngữ lập trình IDE phổ biến LỜI MỞ ĐẦU Trong lời mở đầu báo cáo “Xây dựng ứng dụng xem dự báo thời tiết”, nhóm em muốn gửi lời cám ơn biết ơn chân thành tới tất người hỗ trợ, giúp đỡ em kiến thức tinh thần trình thực làm Nhóm em xin chân thành gửi lời cảm ơn tới thầy, cô giáo Trường Đại Học Điện Lực nói chung thầy giáo Khoa Cơng nghệ thơng tin nói riêng tận tình giảng dạy, truyền đạt cho nhóm em kiến thức kinh nghiệm quý báu suốt trình học tập Đặc biệt, nhóm em xin gửi lời cảm ơn đến Giáo viên hướng dẫn Cù Việt Dũng, giảng viên Khoa Công nghệ thông tin- Trường Đại Học Điện Lực Thầy tận tình theo sát giúp đỡ, trực tiếp bảo, hướng dẫn suốt trình nghiên cứu học tập nhóm em Trong thời gian học tập với thầy,nhóm em khơng tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu Đây điều cần thiết cho nhóm em q trình học tập cơng tác sau Do thời gian thực có hạn kiến thức nhiều hạn chế nên làm nhóm em chắn khơng tránh khỏi thiếu sót định Nhóm em mong nhận ý kiến đóng góp thầy, giáo bạn để nhóm em có thêm kinh nghiệm tiếp tục hồn thiện đồ án Chúng em xin chân thành cảm ơn! CHƯƠNG 1: GIỚI THIỆU VỀ LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG 1.1 Khái quát lập trình thiết bị di động Con người thu nhận thơng tin qua giác quan, thị giác đóng vai trị quan trọng Những năm trở lại với phát triển phần cứng máy tính, xử lý ảnhvà đồ hoạ phát triển cách mạnh mẽ có nhiều ứng dụng sống Xử lý ảnh đồ hoạ đóng vai trị quan trọng tương tác người – máy Tùy theo tính chất yêu cầu, mức độ đáp ứng hệ thống phải nhanh(ví dụ: hệ thống phanh xe điều khiển thiết bị nhà máy…), chấp nhận mức độ chậm trễ tương đối (như điện thoại di động, máy lạnh, ti-vi…) nhà phát triền phần mềm phải tính tốn để điều chỉnh chương trình cho phù hợp với thiết bị đầu cuối (tính tương thích) Đây đặc tính quan trọng lập trình nhúng Ngày nay, với phát triển mạnh mẽ hãng điện thoại di động, smart phone trở nên phổ biến hết, chiếm thị phần lớn thị trường thiết bị liên lạc cầm tay Kéo theo đó, ngành lập trình thiết bị di động đời phát triển song song vài năm gần Lập trình thiết bị di động, hay nói ngắn gọn lập trình Mobile ngành lậptrình ứng dụng dành riêng cho thiết bị di động Người lập trình ứng dụng cho thiết bị di động truyền thống luôn phải nhớ đầu nguyên tắc "tiết kiệm tối đa tài nguyên" thiết bị, dùng cách để tối ưu hóa độ phức tạp tính tốn lượng nhớ cần sử dụng Tuy nhiên, với phát triển nhanh chóng phần cứng, thiết bị di động đại thường có cấu hình tốt, với CPU xử lý mạnh mẽ, nhớ (RAM) lớn, khiến việc lập trình Recommandé pour toi Suite du document ci-dessous Analysis of the two signals Cong nghe thong tin Include - aaaa Cong nghe thong tin Aucun Resumen Cap 59 Guyton Luis Enrique Silva Díaz Fisiología Humana y Prácticas Aucun 95% (19) Question Paper - FFDBFGDNHFGHMJJMM Remote Sensing & Its Application In Environmental Science 82% (34) cho thiết bị di dộng trở nên dễ dàng hết Các kit phát triển hãng sản xuất hệ điều hành di động thường làm rõ hầu hết tác vụ liên quan đến quản lý nhớ, quản lý tiến trình Lập trình viên quan tâm đến việc tối ưu hóa sử dụng tài nguyên tập trung vào việc "code",phát triển tính cho ứng dụng lập trình cho máy tính cá nhân Đặc trưng di động thiết bị kéo theo đặc trưng lập trình di động mà nhà phát triển cần phải quan tâm như:  Tính "di động" thiệt bị khiến kết nối mạng trở nên bất ổn định khó kiểm soát Các ứng dụng phụ thuộc nhiều vào kết nối Internet cần ý điểm  Lưu lượng Internet trền thiết bị di động thường có chi phí cao so với Internet cố định Điều cần lưu ý phát triển ứng dụng sử dụng nhiều tài nguyên Internet  So với máy tính cá nhân, thiết bị di động đại trang bị thêm nhiều tính giúp việc tương tác với người dùng trở nên thuận tiện (màn hình cảm ứng đa điểm, tương tác giọng nói, cử ), loại kết nối đa dạng(NFC, GPS, 3G, 4G, bluetooth, IR ), cảm biến phong phú giúp trải nghiệm đa dạng (cảm biến ánh sáng, cảm biến tiệm cận, la bàn, cám biến chuyển động, gia tốc kế ) Người lập trình, tùy thuộc vào ứng dụng cụ thể, cóthể sử dụng đến tính đặc biệt để đem đến cho người dùng trải nghiệm tốt thiết bị di động Ngồi hãng phát triển hệ điều hành di động làm công cụ phát triển (SDK) mơi trường phát triển tích hợp (IDE) thuận tiện cho việc viết mã nguồn, biên dịch, gỡ rối, kiểm thử xuất phần mềm Xét theo thị phần thị trường, ba hệ điều hành phổ biến cho thiết bị di động Google's Android, Apple's iOS Microsoft's Windows Phone Mỗi ứng dụng thành công thường phát triển cho hệ Mỗi hệ có chợ ứng dụng hãng (Google có Google Play Store, Apple có Apple AppStore, Microsoft có Windows Phone Store) với nhiều khách hàng tiềm năng, giúp người phát triển phân phối ứng dụng miễn phí có phí với chi phí định Hệ điều hành Ngơn ngữ lập trình Android Java IDE Android Studio, IBM's Eclipse với Google's ADT plugins IOS Objective-C Windows Phone C# Apple' X-Code Microsoft's Visual Studio cho Windows phone Bảng 1: Bảng liệt kê hệ điều hành với ngôn ngữ lập trình IDE phổ biến Ngồi việc phát triển ứng dụng cho hệ điều hành kể trên, lập trình viên lựa chọn thư viện lập trình đa tảng để phát triển ứng dụng, phổ biến như: PhoneGap, Unity, Cocos, AndEngine, LibGDX… Lợi việc sử dụng thư viện đa tảng tiết kiệm chi phí, tìm kiếm lập trình viên am hiểu nhiều hệ điều hành địi hỏi chi phí đắt đỏ thời gian viết code ứng dụng hệ điều hành riêng biệt lớn 1.2 Các đặc điểm lập trình thiết bị di động  Dễ tiếp cận, dễ tìm hiểu dễ học  Giúp lập trình viên tạo ứng dụng cho người sử dụng  Giúp thực hóa ý tưởng lập trình viên  Giúp lập trình viên tạo ứng dụng cầu nối giao tiếp với người giới qua số lượng người download sử dụng ứng dụng 1.3 Vai trị lập trình thiết bị di động đời sống kỹ thuật Bạn tiếp cận với tri thức Bạn thấy kiến thức, cơng nghệ vài năm trước hồn tồn lỗi thời so với tại.Làm việc ngành này, bạn nắm bắt tri thức nhất, công nghệ CHƯƠNG 2: GIỚI THIỆU VỀ REACT-NATIVE FRAMEWORK 2.1 React – native gì? React Native framework giúp lập trình viên viết ứng dụng Native Javascript Đúng vậy, đơn giản Javascript, React Native phủ nhận định nghĩa ứng dụng native đoạn Sự đời React Native giúp cho lập trình viên web viết ứng dụng native để khắc phục điểm yếu ứng dụng web hybrid Và nhờ đó, với kỹ sư thành thạo javascript, bạn chiến đấu mặt trận web, desktop, server mobile Điều khơng có lợi cho lập trình viên web mà giúp cho doanh nghiệp phát triển sản phẩm đầu cuối với nhân lực Khi xây dựng React Native, điều tuyệt vời tích hợp tính Live Reload tương tự tính Hot Replacement Module Webpack Tính Live Reload khác tính Reload, Live Reload tải lại chức năng/tập tin thay đổi, Reload tải lại toàn mã nguồn Ngoài ra, bạn dễ dàng debug javascript Chrome Safari Đối với lỗi thuộc Native phải cần đến XCode cho iOS Android Studio cho Android 2.2 Cài đặt môi trường cho React – native máy tính sử dụng điều hành Windows Bước Cài đặt Chocolate  Mở cmd với quyền quản trị (Run as Administrator)  Ta chạy lệnh sau: @“%SystemRoot %\System32\WindowsPowerShell\v1.0\powershell.exe” -NoProfile -Command -InputFormat None “iex -ExecutionPolicy Bypass ((New-Object System.Net.WebClient).DownloadString(’https://chocolatey.org/i nstall.ps1’))” && SET “PATH=%PATH%;%ALLUSERSPROFILE %\chocolatey\bin” Bước Cài đặt Node.JS, Python2,JDK Windows  Mở terminal windows (cmd) với quyền Administrator (Run as Administrator) chạy dòng lệnh: choco install -y nodejs.install python2 jdk8 Bước Cài đặt React – native CLI  Sau bạn cài Node bước trên, khởi động lại cmd sử dụng npm để thao tác cài đặt React Native CLI dòng lệnh: npm install -g react-native-cli Bước Cài đặt Android Studio  Download Android Studio đây: https://developer.android.com/studio  Khi cài đặt, Chọn thiết lập “Tùy chỉnh” (Custom) nhắc chọn loại cài đặt Đảm bảo mục sau chọn:  Android SDK  Android SDK Platform  Performance (Intel ® HAXM)  Android Virtual Device (phần thay Genymotion: https://www.genymotion.com/)  Thực bước theo hướng dẫn hình cài đặt hoàn thành cài đặt Android Studio Bước Cài đặt Android SDK  Mặc định Android Studio cài đặt Android SDK Tuy nhiên, việc xây dựng ứng dụng React Native yêu cầu sử dụng Android Sdk (Pie)  Các phiên khác Android Sdk chủ động bổ sung cài thêm qua Android Sdk Manage Android Studio  Chọn cài đặt Android Sdk (Pie), bật Android Sdk Manage chọn tối thiểu gói sau:  Android SDK Platform 28  Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image  Tiếp theo, chọn tab “SDK Tools” chọn hộp thoại bên cạnh “Show Package Details”  Tìm kiếm mở rộng mục “Android SDK Build-Tools”, sau đảm bảo 28.0.3 chọn  Cuối cùng, nhấp vào “Apply” để tải xuống cài đặt Android SDK cơng cụ build liên quan Bước Cấu hình ANDROID_HOME enviroment variable  Các công cụ React Native yêu cầu số biến môi trường thiết lập để xây dựng ứng dụng với Native Code  Cài đặt biến môi trường ANDROID_HOME windows  Thay giá trị SDK bạn, Sdk cài đặt thư mục sau: C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk  Bạn tìm vị trí thực tế SDK Android Studio cách: click vào “Preferences” chọn menu Appearance & Behavior → System Settings → Android SDK Bước Thêm platform – tool vào Path  Hãy vào phần biến môi trường Windows bước trên, chọn biến Path , sau click Edit chọn New để nhập thêm platform-tools vào biến Path  Đường dẫn thư mục platform-tools có cấu trúc sau: C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\p latform-tools 2.3 Nguyên lý hoạt động React – native Framework Ứng dụng viết React Native chia làm phần: phần view(hiển thị) phần xử lý Phần hiển thị biên dịch từ javascript map với component hệ thống ví dụ: điều hướng, tab, touch…Phần view lấy cảm hứng từ Virtual DOM React JS, xử lý view thực DOM ảo, sau React Native render lại native view Phần xử lý thực trực tiếp ngơn ngữ javascript: ví dụ “1+1=2”, biểu thức xử lý core thực thi Javascript, thông dịch qua Java hay Swift/Objective-C làm phép tính 10 11 2.4 Ưu điểm nhược điểm React – native Framework Ưu điểm:  Reactjs hiệu quả: Reactjs tạo cho DOM ảo – nơi mà component thực tồn Điều giúp cải thiện hiệu suất nhiều Reactjs tính tốn thay đổi cần cập nhật len DOM thực chúng Điều giúp Reactjs tránh thao tác cần DOM mà nhiều chi phí  Reactjs giúp việc viết đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript Ta them vào đoạn HTML vào hàm render mà không cần phải nối chuỗi Đây đặc tính thú vị Reactjs Nó chuyển đổi đoạn HTML thành hàm khởi tạo đối tượng HTML biến đổi JSX  Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng Sau bạn cài đặt ứng dụng này, bạn có nhìn trực tiếp vào virtual DOM thể bạn xem DOM thông thường  Render tầng server: Một vấn đề với ứng dụng đơn trang tối ưu SEO thời gian tải trang Nếu tất việc xây dựng hiển thị trang thực client, người dung phải chờ cho trang khởi tạo hiển thị lên Điều thực tế chậm Hoặc giả sử người dung vơ hiệu hóa Javascript sao? Reactjs thư viện component, vừa render ngồi trình duyệt sử dụng DOM render chuỗi HTML mà server trả 12  Làm việc với vấn đề test giao diện: Nó dễ để viết test case giao diện virtual DOM cài đặt hồn tồn JS  Hiệu cao ứng dụng có liệu thay đổi liên tục, dễ dàng cho bảo trì sửa lỗi Nhược điểm  React View Library khơng phải MVC framework framework khác Đây thư viện Facebook giúp render phần view Vì React khơng có phần Model Controller, mà phải kết hợp với thư viện khác React khơng có 2-way binding Ajax  Tích hợp Reactjs vào framework MVC truyền thống yêu cầu cần phải cấu hình lại  React nặng so với framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb Angular) Trong Angular framework hồn chỉnh  Khó tiếp cận cho người học Web 13 CHƯƠNG 3: GIỚI THIỆU VỀ ỨNG DỤNG XEM DỰ BÁO THỜI TIẾT 3.1 Giới thiệu đề tài lý chọn đề tài Dự báo thời tiết ngành ứng dụng khoa học cơng nghệ để tiên đốn trạng thái vị trí bầu khí tương lai gấn tới Loài người nỗ lực dự báo thời tiết cách khơng thức từ nhiều thiên niên kỳ trước, việc dự báo thời tiết cách thức kỷ mười chín Cơng tác dự báo thời tiết thực cách thu thập số liệu trạng thái bầu khí áp dụng hiểu biết khoa học trình khí để tiên đốn tiến triển khí Nỗ lực dự báo người chủ yếu dựa sở thay đổi áp suất khí quyển, điều kiện thời tiết, điều kiện bầu trời, mơ hình dự báo sử dụng để dự báo tương lai Những liệu đầu vào người đòi hỏi phải thực việc lựa chọn mơ hình dự báo tốt để làm cho việc dự báo, bao gồm kĩ nhận định phần tham gia, teleconnection (liên hệ từ xa), kiến thức hoạt động mơ hình kiến thức khuynh hướng trái đất Do chất hỗn loạn khí nên cần phải có máy tính để giải phương trình mơ tả bầu khí Những sai số việc đo đạc số liệu đầu vào hiểu biết chưa hoàn thiện hoạt động khí làm cho cơng tác dự báo trở lên xác nhiều địa điểm khoảng thời gian thời gian dự báo tăng lên Việc sử dụng kết hợp liên ứng mô giúp giảm thiểu sai số chọn kết xác khả quan Cảnh báo thời tiết dự báo quan trọng cung cấp thơng tin nhằm bảo vệ sống người tài sản hoạt động trời như; gạt lúa, trồng lúa, đường giao 14 thông Dự báo nhiệt độ lượng mưa quan trọng nông nghiệp, giao thông, Ngày nay, việc dự báo thời tiết phát triển nhiều tảng máy tính, đồng hồ, điện thoại,…Trong điện thoại vơ tiện lợi không để nghe, gọi mà cịn dùng để tra cứu thơng tin, đọc báo, nghe nhạc,… cập nhật thông tin thời tiết 3.2 Các ứng dụng tương tự  ASUS Weather: cung cấp cho bạn thông tin chi tiết nhiệt độ, độ ẩm, khả mưa, cách xác vào thời điểm ngày Và đưa thơng báo thời tiết có diễn biến xấu gió mạnh, mưa lớn, bão tuyết, bão cát, khói bụi,…Ưu điểm ứng dụng:  Đưa dự đoán thời tiết vào thời điểm cụ thể ngày ngày liên tiếp, cung cấp thông tin chi tiết: nhiệt độ, độ ẩm, khả mưa, tia cực tím, tốc độ, hướng gió  Các số RealFeel thể cảm nhận thực tế thể nhiệt độ môi trường thể biểu đồ  Cung cấp số ô nhiễm môi trường Đài Loan, Trung Quốc  Đưa cảnh báo cho người dùng có thời tiết xấu 15 Hình 3.1: Giao diện ứng dụng dự báo thời tiết ASUS Weather  AccuWeather ứng dụng giúp bạn theo dõi thời tiết ngày, tuần cách dễ dàng với thông số về nhiệt độ, RealFeel, độ ẩm, gió hay khí áp theo thời gian thực khu vực bạn sinh sống Hỗ trợ bạn việc lên kế hoạch cho thời gian tới Ưu điểm ứng dụng:  Theo dõi tình hình thời tiết theo thời gian thực khu vực bạn bạn cho phép ứng dụng truy cập vị trí  Dự báo nhiệt độ, RealFeel lượng mưa theo ngày, cụ thể chi tiết 16  Dự báo chi tiết thời tiết ngày tiếp theo, giúp bạn lên kế hoạch cho ngày tới dễ dàng  Bản đồ hoạt ảnh vệ tinh radar,mang lại trải nghiệm kỹ thuật số hấp dẫn trực quan Hình 3.2: Giao diện ứng dụng dự báo thời tiết Accu Weather 17 3.3 Giao diện ứng dụng Hình 3.3: Giao diện hình ứng dụng 18 Hình 3.4: Giao diện hình tìm kiếm vị trí cần xem thời tiết 19 Hình 3.5: Giao diện trang tin tức 20 KẾT LUẬN Sau thời gian tích cực học tập nghiên cứu với hướng dẫn, bảo nhiệt tình thầy giáo giảng dạy mơn – thầy Cù Việt Dũng, nhóm em hồn thành báo cáo với đề tài: “Xây dựn ứng dụng xem dự báo thời tiết” Trong trình nghiên cứu xây dựng lên ứng dụng này, nhóm em cố gắng báo cáo đề tài khơng thể tránh khỏi thiếu sót Chúng em mong nhận đóng góp, bảo thầy, cô Chúng em xin chân thành cảm ơn! 21