PWA Internship Report for Smart Water Dispenser
•Download as PPTX, PDF•
0 likes•36 views
This internship final report summarizes the development of a progressive web application (PWA) for a smart water dispenser. The PWA was created to allow both users and repairmen to interact with the dispenser. For users, the PWA enables reporting problems and viewing maintenance records. For repairmen, it provides a graphical user interface. The internship lasted one month, during which the student worked on the report problem and maintenance pages for users, and the graphical interface for repairmen. The PWA was created using Ionic and integrates with a backend API. It supports features like offline use, push notifications, and multiple photo uploads.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to PWA Internship Report for Smart Water Dispenser
Similar to PWA Internship Report for Smart Water Dispenser (20)
Recently uploaded
Recently uploaded (20)
PWA Internship Report for Smart Water Dispenser
- 1. Internship Final Report PWA for Smart Water Dispenser Submitted by : Thariq Ramadhan Supervisor : Professor Ray-Guang Cheng Mentor : Johnny
- 2. Outline: ● Problem ● Background ● Schedule ● Outcome
- 3. Problem
- 4. Purpose of Interns 1. Learn about PWA(Progressive Web Application) 2. Make PWA for User of Smart Water Dispenser 3. Make PWA for Repairman of Smart Water Dispenser
- 5. Background
- 6. Why PWA (Progressif Web App)?
- 7. PWA (Progressif Web App) PWA is a web application that uses several modern technologies that make the user experience like using a native app (Android / iOS). It can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.
- 8. Characteristic ● Progressive ● Responsive ● Connectivity independent ● App-like ● Fresh ● Safe ● Discoverable ● Re-engageable ● Installable ● Linkable
- 10. Light House
- 11. Schedule
- 12. Working Time Period of Internship : 1 June - 2 July 2019 Working hours : Working from monday to Friday, I enter BMW Lab around 09.20 AM and leave at 06.00 PM. There is weekly presentation once a week.
- 13. Team : - Johnny - > Mentor, API - Annie -> Design - Aldy -> Login, Nearby, Maintenance Progress Page - Ian -> Dashboard, Detail Info Page - Thariq -> Report Problem, Maintenance Records Page
- 14. Outcome
- 15. Work Done ● Student App especially Report Problem and Maintenance Records Page ● Repairman App GUI
- 17. Ionic PWA ng add @angular/pwa
- 18. Maintenance Records Page Use GET method to get maintenance record data from API Need to change structure of data to make it easier to display
- 20. Report Problem Page Have logic when you choose problem Maximal 3 photo with each size under 10 Mb, and can be deleted Format for post is form data cannot be json Use POST method to send data to API
- 21. Result User App Add API Service by Aldy Add Preference by Aldy Add Session by Aldy
- 22. Result Repairman App GUI Can slide the menu Change card display when click Can upload multiple photo GUI is finish so, Aldy and Ian can just implement backend and add additional thing
- 23. Source Code User App https://github.com/ianjoseph2204/NTUST_SmartDispenser Repairman App https://github.com/ianjoseph2204/NTUST_RepairmanApp
- 24. Thank You for Your Attention Any question?
Editor's Notes
- Internet speed: depending on where you live internet may be a nightmare. You may have not realized this, but 60% of the world’s population is still using 2G internet. Slow website load: Do you know how long a user waits to close a website if it’s too slow? Only three seconds! 53% of users abandon a website if it loads too slow. High friction: People don’t want to install native apps. An average user installs 0 applications in a month. Contrast this with how many new web sites they visit each month. Also think about how many apps you downloaded and eventually ended up using just once or very few times? User engagement: Responsive mobile web sites have much more reach than native apps, however they lack basic functionalities like push notifications and offline support. That causes that most of the users of responsive web sites are not actively engaged compared to native apps engagement levels.
- Progressive - Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. App-like - Feels like an app, because the app shell model separates the application functionality from application content. Fresh - Always up-to-date thanks to the service worker update process. Safe - Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with. Discoverable - Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it. Re-engageable - Makes re-engagement easy through features like push notifications. Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store. Linkable - Easily share the application via URL, does not require complex installation.
- PWA Principle How Ionic handles it Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Ionic uses many cutting edge web standards and APIs. Despite the fact that some of those don’t have full support across browsers, Ionic still works. In that sense, Ionic is considered to be progressive. Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. Ionic UI components are known for its flexibility. You can easily build a responsive UI with Ionic. Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. Ionic 4 apps can be easily combined with service workers to make apps work offline. App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model. Ionic framework is mobile first, all of Ionic components even adapt to the different platforms (ios, material design). Fresh - Always up-to-date thanks to the service worker update process. Using different caching strategies inside our service workers we can control the freshness of our cached resources. Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. We can achieve safety for our content by using a hosting provider that has HTTPS support. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. The changes in how the router works in Ionic 4 made discoverability for our apps easy to achieve. Re-engageable - Makes re-engagement easy through features like push notifications. Ionic 4 plays really nice with other libraries and packages that enable us to setup push notifications in a breeze. Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store. Ionic makes easy to achieve all the principles that enable our app to be installed (web app manifest, HTTPS, registered service worker). Linkable - Easily share via URL, does not require complex installation. With the new Ionic 4 router, we don’t have to rely on deep-links anymore to link to the different parts of our web app.