Smart Water Dispenser PWA Summary Project

1. SMART WATER
DISPENSER PWA
Team Member:
• Ian Joseph
• Muhamad Aldy B.
• Thariq Ramadhan
Supervisor:
Prof. Ray-Guang Cheng
Mentor:
楊博洋 (Johnny)

2. OUR MENTOR
JOHNNYWANG
Hobby: Play basketball, love hip hop music
Home:Taipei, Shezidao
Favorite food: Sushi
Current project: Cloud Engineering

3. OUR MENTOR
JOHNNY WANG
● Work on build the API for Smart Dispenser.
● Expert on Python, MongoDB.
● Has a good skill on team work, create
bonding between friends, and determination
to achieve the best practice.
● Funny guy and has big smile.

4. OUR GOAL
USE PROGRESSIVE WEB APPLICATION
(PWA) TO DEVELOP A MANAGEMENT
SYSTEM FORTHE SMART DISPENSER

5. OVERVIEW OF
SMART
DISPENSER
● A water dispenser which has IoT
devices to track the system.
● It can sends water temperatures and
conditions using “meter”.
● Using Mr. Johnny API to retrieve the
data and processed into PWA.

6. OVERVIEW OF
SMART DISPENSER
● More than 100 smart water dispensers are
monitored using IoT devices in NTUST.
● Each of smart dispenser has their own unique
code as a Device ID.
● Problem: How the student report a problem
when a problem occurred on the dispenser?

7. PWA
A progressive web application for student
to monitor, report a problem, & track the
smart dispenser in our campus.

8. CHARACTERISTIC
● Progressive
● Responsive
● Connectivity independent
● App-like
● Fresh
https://en.wikipedia.org/wiki/Progressive_web_applications#Characteristics
● Save
● Discoverable
● Re-engageable
● Installable
● Linkable

9. ANGULAR
● Using Typescript (TS) language to
code the back end.
● Similar to Javascript with object
oriented concept.
IONIC
● Framework to build PWA.
● Has many library using AngularJs.
● Use HTML, SCSS, andTS.

10. WHY PWA?

11. WHY PWA?

12. ADVANCE OF PWA
Source: Freecodecamp, 26 March 2018, ProgressiveWeb Apps: Bridging the gap between web and mobile apps

13. ADVANCE OF PWA
1. More Comfortable, user doesn’t have to install the
application on their smartphone.
2. Low storage usage on user’s smartphone (Only use
cache).
3. One time development for both Android & iOS.

14. WHY IONIC?
● All components & libraries are ready to use once the project is
generated.
● Has great documentation and community.
● Work with AngularJs and RxJs (on Ionic 5).
● https://ionicframework.com/docs/api/

15. STUDENT
APP
● Detect where the other smart dispenser
nearby them.
● Show the records of maintenance.
● Send a report when problem occured.
● Student can use this PWA by register and
login.
● Track the smart dispenser status and get
notification when maintenance is done.

16. STUDENT APP
FEATURE
DETECT NEARBY
DISPENSERS
● It can find where the nearest dispenser
besides it, divided into same building
and nearby building.
● Use the filter to get only smart dispenser
has cold water, warm water, hot water,
even mixed of them.
● Choose one of the nearby dispenser to
see the details.

17. STUDENT APP FEATURE
DETECT NEARBY DISPENSERS

18. STUDENT APP FEATURE
SEE THE MAINTENANCE RECORDS
● See the list of all maintenance records
of smart dispenser.
● It listing from year to month to date.
● Click one of them to see the detail of
the progress.

19. STUDENT APP FEATURE
SEE THE MAINTENANCE RECORDS

20. STUDENT APP
FEATURE
SEND REPORT
● Send a report problem to campus if any
problem was found.
● Must login to get the access.
● Can register if not has account yet.
● Choose one of the problem, upload the
photo (max. 3 photos), and check if want to
track the dispenser.

21. STUDENT APP FEATURE
AUTHENTICATION

22. STUDENT APP

23. STUDENT APP
PROGRESS OF BUILD
● Every week has meeting with mentor and team.
● 3 weeks to build the App.
● 1 weeks to maintain and fix bugs with real condition.
● Now to maintain and gives improvement if needed.

24. ON GOING WORK
● Use PWA to develop a management system for
Repairman.
● Repairman is the one who responsible for repairing
a problem and do the repairment of smart
dispenser.

25. PWA TEAM
MEMBER