Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Progressive Web App về dự báo thời tiết
Similar to Progressive Web App về dự báo thời tiết (20)
Progressive Web App về dự báo thời tiết
- 1. TRƯỜNG CAO ĐẲNG NGHỀ BÁCH KHOA HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN Sinh viên thực hiện: Nguyễn Tiến Trung Giáo viên hướng dẫn: Nguyễn Thu Vân Lớp: Lập trình máy tính 1 ỨNG DỤNG DỰ BÁO THỜI TIẾT
- 2. Nội dung • Vấn đề và phương pháp để giải quyết bài toán • Tổng quan về đề tài • Các công nghệ phát triển ứng dụng • Phân tích thiết kế hệ thống • Giao diện ứng dụng • Kết luận và hướng phát triển cho ứng dụng
- 3. Vấn đề cần giải quyết • Trang web có thể sử dụng được khi không có mạng • Tốc độ tải tức thì • Giao diện thân thiện Phương pháp giải quyết Ứng dụng công nghệ Progressive Web Apps
- 4. Website cho thiết bị di động
- 5. 1999 GoogleNokia 7110 Yahoo 2004 Wapsite Website cho thiết bị di động
- 6. Phiên bản mobile của website trên thiết bị di động 2009 Website cho thiết bị di động
- 7. Responsive Web Design 2013 Website cho thiết bị di động
- 8. Tổng quan về ứng dụng di động
- 9. Ola Vitalk Game java 2005 Những ứng dụng java chạy trên các dòng máy Symbian Tổng quan về ứng dụng di động
- 10. 2008 iPhone 3G và sự ra đời của App Store trên iOS Tổng quan về ứng dụng di động
- 11. Ứng dụng trên thiết bị di động Tổng quan về ứng dụng di động
- 12. Các công nghệ phát triển ứng dụng Web-based App Hybrid App Native App
- 13. Native App Android Studio Android Xcode iOS Ưu điểm: • Hiệu năng • Khả năng truy cập phần cứng • Chế độ ngoại tuyến Nhược điểm: • Không đa nền tảng • Hạn chế phiên bản cũ • Chi phí cao • Bảo trì mất thời gian Các công nghệ phát triển ứng dụng
- 14. Web based - App Các công nghệ phát triển ứng dụng Ưu điểm: • Chi phí thấp • Không mất nhiều thời gian bảo trì, phát triển • Cập nhật trực tuyến Nhược điểm: • Hiệu năng thấp • Bắt buộc có Internet • Trải nghiệm không thân thiện
- 15. Ưu điểm: • Ít tốn kém • Không mất nhiều thời gian bảo trì, phát triển • Tận dụng được tính năng của thiết bị Nhược điểm: • Hiệu năng thấp • Bắt buộc có Internet • Trải nghiệm không thân thiện Hybrid App Các công nghệ phát triển ứng dụng
- 16. Công nghệ Progressive Web Apps PWA là sự kết hợp tốt nhất giữa native app và công nghệ web
- 17. Sự tin cậy Sự thu hút Tốc độ Ba yếu tố chính PWA đem lại cho người dùng Công nghệ Progressive Web Apps
- 18. Bảng so sánh PWA với các công nghệ khác Công nghệ Progressive Web Apps
- 19. Một số trang web ứng dụng công nghệ PWA
- 21. Google Maps - (google.com/maps)
- 22. Thành phần tạo nên Progressive Web Apps
- 23. Những thành phần chính và phụ của PWA Công nghệ Progressive Web Apps
- 24. Service Worker
- 25. Công nghệ Progressive Web Apps Service Worker là thành phần cốt lõi của một PWA
- 26. HTTPS
- 27. Web App Mainfest
- 28. Công nghệ Progressive Web Apps Tập tin Mainfest dạng JSON
- 29. Và các thành phần phụ khác
- 30. Công nghệ Progressive Web Apps Push NofiticationApp Shell Mode
- 31. Ngôn ngữ sử dụng
- 32. HTML JavaScriptCSS3 Ngôn ngữ sử dụng
- 33. Phân tích thiết kế hệ thống
- 34. Phân tích thiết kế hệ thống Người dùng Xem Xóa Thêm Giao diện Use case tổng quát hệ thống
- 35. Chọn thành phố Xem Thêm HủyCSDL Thành phố Sơ đồ hoạt động chức năng thêm thành phố Phân tích thiết kế hệ thống
- 36. Xem CSDL Thành phố Xóa Sơ đồ hoạt động chức năng xóa thành phố Phân tích thiết kế hệ thống
- 37. Xem CSDL Thành phố Giao diện CSDL Thời tiết API Yahoo Weather Sơ đồ hoạt động chức năng xem thời tiết Phân tích thiết kế hệ thống
- 38. Phân tích thiết kế hệ thống Cơ sở dữ liệu LocalStorage
- 39. Phân tích thiết kế hệ thống Cơ sở dữ liệu WeatherPWA
- 40. Phân tích thiết kế hệ thống Cơ sở dữ liệu WeatherData
- 41. Giao diện ứng dụng iPhone 8 Plus/ iPhone X
- 42. Thêm biểu tượng vào homescreen trên thiết bị iOS
- 44. Kết luận • Đem lại thông tin thời tiết cho người dùng lúc cần thiết • Trải nghiệm người dùng đơn giản • Tốc độ tải và khả năng xử lý tức thời • Đẩy thông báo thời gian trước khi có mưa • Tự động lấy thông tin thời tiết dưới nền • Thông tin thời tiết cụ thể hơn Hướng phát triển
- 45. Em xin cảm ơn thầy cô
Editor's Notes
- RWD sẽ chia nội dung trang web thành các bố cục linh hoạt, có thể tùy biến theo từng kích cỡ thiết bị từ.....
- Ứng dụng di động là phần mềm ứng dụng được thiết kế để chạy trên điện thoại thông minh, máy tính bảng và các thiết bị di động khác. Ứng dụng di động ban đầu được cung cấp với mục đích thông tin tổng quát và các dịch vụ thông dụng trên mạng toàn cầu, bao gồm email, lịch, danh bạ, và thị trường chứng khoán và thông tin thời tiết.
- Service worker chịu trách nhiệm cache tất cả file, serve push notifications, content update, data manipulation,... Service Worker làm việc độc lập khỏi bất kỳ ứng dụng hoặc website nào đã có trên web server, làm việc với event listener và các lệnh như “fetch” (giống với lệnh “Get/Post/Set”). service worker sau đó sẽ thao túng những event này với phản hồi phù hợp (tùy vào việc có internet hay không), tạo điều khiện cho offline page tùy chỉnh.
- HTTPS (viết tắt của HTTP Secure – HTTP An toàn) là phiên bản bảo mật của giao thức HTTP. HTTPS sử dụng mã hóa để tăng tính bảo mật và riêng tư.
- Là một file json chứa các thông tin cho ứng dụng của bạn, như là cách hiển thị ở màn hình home, hiển thị trên web,... Nó còn có thể sử dụng để thêm màu cho giao diện, cài đặt icons cho màn hình home, và một màn hình splash screen với một vài thông tin đơn giản.
- Service Worker lưu trữ giao diện người dùng cơ bản hoặc được gọi là cái vỏ (shell) của RWD. Shell này sẽ cung cấp một khung tĩnh, một lớp hay kiến trúc vào nội dung có thể được tải một cách nhanh chóng cũng như một cách linh hoạt, cho phép người dùng có thể sử dụng dù tình trạng mạng có thế nào đi nữa. Vì Service Worker hoạt động độc lập như là một process chạy ngầm, nên việc này đẩy thông báo là hoàn toàn khả thi ngay cả khi ứng dụng đã đóng.