This document provides an overview and updates on the development of several pages for a PWA project, including finalizing code for the login, register, and nearby dispenser pages. It discusses integrating maintenance progress data with the dashboard page, adding documentation for API services, adjusting the database to support additional maintenance progress steps, and plans for the following week, including meetings to discuss the repairman app and starting repairs app backend code.

1. MUHAMAD ALDY BINTANG
UNIVERSITY OF INDONESIA
2019/07/18

2. OVERVIEW
Manifest for PWA
Giving comment documentation for services in project
Finalize code for
 Login Page
 Register Page
 Nearby Dispenser Page
 Maintenance Progress Page
Integrate maintenance progress with Dashboard page

3. MANIFEST PWA
Manifest is one of the PWA component.
It can display the web app like native app.
Described in manifest.json, like figure beside.
Should run in HTTPS domain
Testing using Netlify to get HTTPS domain.

4. MANIFEST PWA
Add into Home screen
as Native App but still
Web App
https://quirky-booth-
6d3fcf.netlify.com/#/
home
or
https://bit.ly/2LYGfII

5. MANIFEST PWA
Has splash screen
Has icon and name
More details
Inspect Element (Browser) Open as App

6. DOCUMENTATION FOR SERVICE
Reason:
Example:
 To use the easier when imported.
 To see the return value without peeking.
 To see what will be returned be like.
How to documenting:
 Using /** */ comment line.
 This is the basic/standard for Javadoc.
 I use this because it can be displayed when
implement the function
Have done for both services:
 Dispenser API service
 Preference Manager service

7. DOCUMENTATION FOR SERVICE
How to see the documentation:
 Peeking the function when implement them.
 Hold CTRL button if it’s not appeared.

8. FINALIZE WITH LOGIN PAGE

9. FINALIZE WITH LOGIN PAGE

10. FINALIZE WITH REGISTER PAGE
Error handling
 Using Regex to know email
address/password is invalid.
 Using HttpErrorResponse from return value
to get error that from database (email has
been used)
 Check if password and re-enter password
has same input.

11. FINALIZE WITH NEARBY
DISPENSER PAGE
Device ID passed
from Dashboard
Page which is stored
in preference.
Device ID is used to
get data from API
where there is
nearby dispenser.
If dispenser has
cold/warm/hot
water, it will display
color label.

12. RECENTLY MEETING WITH TEAMS
(JULY 17TH)
Planning to build Repairman App.
Delayed because need confirmation about design from Ms. Annie (still
not response until 18:00)
Planning to discuss in July 18th then report to Ms. Annie about
adjustment the API and UI design.

13. CHANGES
Get dispenser repair condition return value:
Before After

14. DATABASE ADJUSTMENT
This for each steps in Maintenance Progress Page
need different time.
From figure beside, it display 4 steps of
maintenance progress.
Next will be 7 steps:
 1 = user report the problem.
 2 = client receive the problem (by Ms. Fang).
 3 = company receive the problem (by Mr. Pang).
 4 = company assign to repairman to do repairment.
 5 = repairment done
 6 = company receive report with pictures
 7 = client receive notify and repairment complete.

15. FINALIZE WITH MAINTENANCE
PROGRESS PAGE
Must perform login
first to get any
maintenance
progress from
dispenser.
It need user’s email
address and
dispenser’s ID.
Check from the API,
display the current
maintenance in
progress
Figures beside still

16. NEED LOGIN TO SEE
MAINTENANCE PROGRESS
IN DASHBOARD PAGE
If user hasn’t report
anything it will display
the same “No report
problem” text as when
user hasn’t logged in.
If user has logged in and
has done report before it
will display link to
Maintenance Progress
page with text “View
maintenance report”.

17. NEXT WEEK PLAN
Meeting with team for User App final build.
Meeting with team and discuss with Ms. Annie via chat for
Repairman App.
Start to develop Repairman App back end code, because Thariq
already work for front end.