My final presentation of the Smart Water Dispenser PWA project.

1. INTERNSHIP FINAL REPORT
JULY - AUGUST 2019
Submitted by:
● Ian Joseph 章 利 安
● Muhamad Aldy Bintang
Supervisor: Prof. Ray-Guang Cheng
Mentor: Johnny
BMW Lab

2. MAIN GOAL
Use Progressive Web Apps (PWA) to Develop A
Management System for Smart Water Dispenser
Objectives:
● Build User App using PWA for the student/user.
● Build Repairman App using PWA for the repairman.
2

3. OUTLINE
Introduction
● What is Progressive Web Application
● Reasons why using PWA
● Advantages and disadvantages
● Ionic the Framework of PWA
● Example of PWA
Division of work
● Aldy’s part
● Ian’s part
● Thariq’s part
Work done
● User/Student App
● Repairman App
Demonstration
3

4. INTRODUCTION
4

5. BASIC THEORY
● Yellow icon is native app.
● Red icon is PWA.
● Purple icon is normal web app.
Progressive Web Application (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.
5

6. REASONS TO USE PWA
People like to access
information using
native app.
On random case,
people more preferable
to access web app.
6

7. REASONS TO USE PWA
Based on how user
spent their time,
native app is more
preferable than
mobile web app.
Mobile web app is web
application with
mobile device
support, e.g.
m.facebook.com.
7

8. PWA CHARACTERISTIC
Progressive:
● Run in browser.
● No need to be installed first.
Responsive:
● UI designed with adjustment of any
kind of device.
Connectivity Independent:
● Has service worker to cache local
data and assets.
Application-Like:
● Built on app-shell model.
● Has feature to access hardware.
Safe & Secure:
● Can only be run on HTTPS.
Installable:
● Optionally can be installed to home
screen.
● No need to be update via store.
A. Gambhir and G. Raj, "Analysis of Cache in Service Worker and Performance Scoring of Progressive Web Application," 2018 International
Conference on Advances in Computing and Communication Engineering (ICACCE), Paris, 2018, pp. 294-299.
8

9. ADVANTAGES
Service Worker
● Store some data and assets at
the first time visit.
● When about go offline/slow
network, fetch data from cache.
Manifest
● Store web information in single
file where normal website state
in all pages.
● Store the web characteristics,
e.g. icons pixel, display mode.
TLS (Transport Layer Security)
● Only can be run over HTTPS to
secure data exchange between
server and client.
9

10. DISADVANTAGES
Not-so-app-like
● Not all device support PWA, e.g.
iOS under 11.3.
● Not all browser version support
PWA, e.g. minimum Chrome
ver. 40 (January 2015), Firefox
ver. 44 (January 2016).
● Limited access to some
hardware components of the
device.
Lack during Installation
● Cannot be found on store like
native app, after all PWA is web
application.
● No engagement during “Add to
Homescreen”, lack of user
agreement or UELA.
Medium.com, 2019, Progressive Web App
(PWA): what they are, pros and cons and the
main examples on the market, [Online] 10

11. INTRODUCE TO IONIC 4
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, and TS.
● Could generate .apk & .ipa files.
11

12. ● Ionic is a framework to build PWA.
● Instead of build by using Javascript
from scratch, Ionic can build for us.
● Once create project, it automatically
generate all components, e.g. libraries,
assets folder, pages.
● Has great documentation and
community.
● Work with AngularJs, Vue Js, and
React Js (on Ionic 5).
● Responsive UI design, can be
controlled, modelled.
● All import modules and libraries easily
to download with Node Js.
WHAT’S MORE
ABOUT IONIC 4
AND PWA
12

13. Install through Node JS
HOW TO START
IONIC
1. Install Node Js.
2. Open command-line terminal then type npm
install -g ionic
3. Install Angular for Ionic using npm install
@angular/cli.
4. To import some Angular components for Ionic,
npm install @ionic/angular.
5. Install npm install @angular/pwa to add
PWA components, e.g. service worker,
manifest, icons.
6. Start new project with ionic start myProject
blank.
7. Go to our project by cd myProject and start
with ionic serve to run locally in browser.
13

14. ● src folder contains the
project files.
● app folder contains main
resources of PWA.
● assets folder contains
icons and images.
● theme folder contains
main Ionic theme CSS.
IONIC PROJECT
INTERFACE
14

15. Every pages has three main
components:
● HTML, using HTML5 and
Angular modules.
● SCSS, sassy CSS to
support theme for HTML.
● TS, typescript back-end
code, similar to
Javascript with OOP
concept.
IONIC PROJECT
INTERFACE
OOP= Object-Oriented
Programming, concept
which dealing with class,
object, etc.
15

16. PWA OVER THE
WORLD
Has responsive UI design
when opened with desktop or
mobile.
Try to open
app.starbucks.com
DESKTOP MODE
MOBILEDEVICEMODE
More example PWA:
● Instagram
● Tinder
● Google Maps
16

17. LIGHTHOUSE
Google web developer tool to audit a website in
order to know the performance and best practice,
include to know PWA score.
Can be used via:
● Chrome add-ons
● npm install -g lighthouse
17

18. RUN THROUGH CLI
> lighthouse https://app.starbucks.com
18

19. Challenge In
this Job
1. The developer team are not able to
have a meeting with Mrs.Annie as our
client to discuss the workflow of the
apps.
2. Some design components cannot be
implemented in the real HTML & CSS
code.
(ex: components resolution is
different with the actual size when
implemented)
3. First time using Ionic, need more time
to discover and master some
features.

20. DIVISION OF
WORK
20

21. 21PWA TEAM

22. DIVISION OF WORK
Name Working
weeks
Working
hours
Tasks for User/Student App Tasks for Repairman App
Aldy 9 weeks
(1 June -
29 August)
9 hours
(09:00 -
18:00)
● Authentication pages
● Nearby dispenser page
● Maintenance progress page
● Authentication pages
● Home page
● Profile page
Ian 9 weeks
(1 June -
29 August)
● Dashboard page
● Detailed information page
● Report repair page
● Scan QR-Code
Thariq 5 weeks
(1 June - 1
July)
● Maintenance records page
● Report problem page
● Home page
22

23. ALDY’S TASK
BEFORE INTERNSHIP PERIOD
Tasks overview:
● Learning about PWA basic concept.
● Learning how to use Ionic 4 and
Angular JS.
● Learning how to develop simple PWA.
● Already done with Login and Register
page.
● Already done with Nearby dispenser
page.
● Already done with Maintenance
progress page.
● Above is Simple timer app by following
https://www.youtube.com/watch?v=qT
dwUpQRptc
● Here is my documentation =
https://hackmd.io/@muhamadaldy/Bk
QAlWewV
23

24. Authentication Pages
● Login page
○ login.page.html
○ login.page.scss
○ login.page.ts
● Register page
○ register.page.html
○ register.page.scss
○ register.page.ts
● Forgot Password page
○ forgot-password.page.html
○ forgot-password.page.scss
○ forgot-password.page.ts
● Reset Password page
○ reset-password.page.html
○ reset-password.page.scss
○ reset-password.page.ts
ALDY’S TASK
WORK DONE ON USER/STUDENT APP & REPAIRMAN APP
24

25. REPAIRMAN APP:
Home Page (*with Thariq)
● home.page.html
● home.page.scss
● home.page.ts
Profile Page
● profile.page.html
● profile.page.scss
● profile.page.ts
STUDENT APP:
Nearby Dispenser Page
● nearby-dispenser.page.html
● nearby-dispenser.page.scss
● nearby-dispenser.page.ts
Maintenance Record Page
● maintenance-record.page.html
● maintenance-record.page.scss
● maintenance-record.page.ts
ALDY’S TASK
WORK DONE ON USER/STUDENT APP & REPAIRMAN APP
25

26. THARIQ’S TASK
BRIEFLY EXPLAINED WHICH RELATED TO PWA PROJECT
26
User/Student App:
● Report Problem page
○ report-problem.page.html
○ report-problem.page.scss
○ report-problem.page.ts
● Maintenance Records page
○ maintenance-records.page.html
○ maintenance-records.page.scss
○ Maintenance-records.page.ts
Repairman App:
● Home page:
○ home.page.html
○ home.page.scss
Other tasks:
● Giving documentation.

27. IAN’S TASK
BEFORE INTERNSHIP PERIOD
27
Tasks Overview:
● Learning about PWA
● Learning about Ionic
● Learn about how to retrieve GET & POST request in Ion
● Learn to Create a QR code generator & scanner with Ionic
● Learn how to generate Ionic project into Android apk
● Done with the UI of Dashboard page

28. IAN’S TASK
AFTER JOINING THE LAB
28
Repairman App:
Report Repair Page (Repairman App)
● report-repair.page.html
● report-repair.page.scss
● report-repair.page.ts
QR Code Scanner (Repairman App)
● qrcode-scanner.page.html
● qrcode-scanner.page.scss
● qrcode-scanner.page.ts
STUDENT APP:
Dashboard Page
● dashboard.page.html
● dashboard.page.scss
● dashboard.page.ts
Detailed Information Page
● detailed-information.page.html
● detailed-information.page.scss
● detailed-information.page.ts
Github Repository
● Create & Manage the Github Repository for Student App & Repairman App.

29. 29SCAN & TRY ME!
Repairman App
Email / ID : 2
Password : pass2
Student App

30. ALDY’S WORK RESULT
30

31. Dispenser API service
A service to handle all API URL from Johnny to
access the database to perform POST/GET
data.
Preference Manager service
A service which help to store/get data from
local storage, named local preference.
Static Variables class
Use to store the KEY pair name and global
variable. 31
ALDY’S TASK
WORK DONE ON USER/STUDENT APP & REPAIRMAN APP

32. ● Some pages or system are
restricted if user hasn’t
logged in yet.
● Login prompt also applied
when user session time
has over than 5 minutes,
the limit time.
STUDENT APP
LOGIN PROMPT

33. ● Login action need email
address and password
● Registration need email
address and password,
then verification account
link is sent into mailbox.
● Data is saved into
database.
LOGIN AND REGISTER
PAGE

34. ● Forgot password need email
address to reset account’s
password, it will sent
verification code to mailbox.
● Use the code along with email
address and new password to
reset account.
● The code cannot be used again
once has been use, and must
under 10 minutes before
expired.
FORGOT PASSWORD AND
RESET PASSWORD PAGE

35. ● Get list of nearest dispenser of
target dispenser.
● Data are fetch from database
through API, then can be
filtered using filter system.
● Data displayed as item card,
divided into same and next
building
● If clicked, it shows target
dispenser more information.
STUDENT APP
NEARBY DISPENSER PAGE

36. ● Has three fragments inside
one page:
○ Done Mission, shows the
repairman missions has
already done.
○ Today Mission, shows
the repairman missions
are on going and for
today.
○ Future Mission, same as
Today Mission but for
next Date.
● Done and Future missions
are divided per Date.
REPAIRMAN APP
HOME PAGE

37. ● Briefly, modal page is a normal
page which called over the
currently opened page.
● The page itself can be create
using the same method, next is
declare a modal function to
pop up a page as modal page.
● Shows the details of targeted
mission with differences
between which fragment call
the Detail page.
REPAIRMAN APP
DETAIL PAGE AS MODAL

38. IAN’S WORK RESULT
38

39. Dashboard Page
● Dashboard that show the dispenser
picture & current location.
● A main page to go to the other’s pages.
● Has a listener to the screen orientation
changes, so the display will adjust even
the user tilt it in landscape position.
● Tracking feature to give notification
about repair status to the user.
39
IAN’S TASK
WORK DONE ON USER/STUDENT APP

40. ● Track system is to apply
tracking the target dispenser
with the user account, can get
notification to mailbox.
● Binding with account, need
login to access this system.
● Logout button will appear once
user has logged in, using this
will remove session ID from
preference and perform logout.
STUDENT APP
TRACK AND LOGOUT
BUTTON

41. Detailed Page information
● Show the Hot, Warm & Cold
temperature of the water.
● Show the detail position of the
dispenser.
● Show the type of the dispenser.
● It has 2 temperature display in
Celsius and Fahrenheit.
● Show “...” when there is no
temperature data.
41
IAN’S TASK
WORK DONE ON USER/STUDENT APP

42. Report Repair Page
● Show the detail information of the
user report.
● Add a text field for the repairman to
describe the repair result.
● Add a space to upload 3 images.
● Add a button to delete the picture.
● Make the Submit button only visible
when the text field is not empty.
42
IAN’S TASK
WORK DONE ON REPAIRMAN APP

43. QRcode Scanner (Still Developing)
● Scan the QRcode of the dispenser to make
sure the technician is really arrived.
● Get the URL of the dispenser form the
QRcode.
● Get the device ID from the URL using string
splitter.
● Match the device ID of the QRcode with the
preference.
● If match, set the arrival status to be true.
43
IAN’S TASK
WORK DONE ON REPAIRMAN APP

44. REFERENCE FOR LEARN
● A. Gambhir and G. Raj, "Analysis of Cache in Service Worker and Performance Scoring of
Progressive Web Application," 2018 International Conference on Advances in Computing and
Communication Engineering (ICACCE), Paris, 2018, pp. 294-299.
● Medium.com, 2019, “Progressive Web App (PWA): What they are, pros and cons and the main
examples on the market”, [Online] https://medium.com/iquii/progressive-web-app-pwa-what-
they-are-pros-and-cons-and-the-main-examples-on-the-market-318f4538c670
● Developer Google, 2019, “Lighthouse”, [Online] https://developers.google.com/web/tools/
lighthouse/
44

45. “It’s a pleasure to work with someone who knows how to
make a friendly and inspiring work environment. We glad
that this opportunity opened up for us that is a great next step
in our career.” - Anone
45