201907_10 muhamad aldy b._status report

1. MUHAMAD ALDY BINTANG
UNIVERSITY OF INDONESIA
Topic: Use Progressive
Web App for Smart
Dispenser
Supervisor: Prof. Ray-
Guang Cheng

2. OVERVIEW
Before join lab
The project is run by the group
of three person, with Ian and
Thariq.
My job:
 Login and Register page
 Nearby Dispenser page
 Maintenance Progress page
The project is using Ionic
framework
 Front end language: HTML and SCSS
(like CSS)
 Back end language: Typescript (.ts)
Work together with mentor, Mr.
On progress in lab
Have working on session login
system.
Have working on service to
create functions that easy to call
 Dispenser API = to get data from API
 Preference Manager = to CRUD
preference
Have working on class for store
global value on project.
Meet up with mentor and project
partners, discuss with Ms. Annie
for help with the UI.

3. LOGIN PAGE
Mobile Device PC/Laptop

4. LOGIN PAGE

5. REGISTER PAGE
Mobile Device PC/Laptop

6. REGISTER PAGE

7. NEARBY DISPENSER PAGE
Mobile Device PC/Laptop

8. NEARBY DISPENSER PAGE

9. MAINTENANCE PROGRESS PAGE
Mobile Device PC/Laptop

10. MAINTENANCE PROGRESS PAGE

11. SESSION LOGIN SYSTEM
This because cannot implement $_SESSION like in PHP, using
preference to store:
 Email as SESSION_ID
 Last time or date when login/doing activity as LAST_DATE
Preference is the client side to store small data with key pair
Example: “SESSION_ID”: “example@mail.com”
“LAST_DATE”: “Sunday, 01 January 2019”
Triggered when user:
 Go to some page
 Refresh the page
 Back to previous page

12. SESSION LOGIN SYSTEM Time out limit: 10
seconds

13. SERVICES FOR GLOBAL FUNCTIONS
CLASSES FOR GLOBAL VARIABLES
Services is a part of project that can be used to create a
functions or methods which implement in many pages.
For example:
 I want to get list of all dispenser in both Dashboard and Nearby Dispenser
Page.
 To use the API without write twice in different files, write the function in
service.
 The result is service will provide the function by import it and call in
constructor.
Classes is a normal Typescript class without HTML page or
service-provider purpose. In this project:
 Used to store KEY_PAIR_NAME for preference.

14. SERVICES FOR GLOBAL
FUNCTIONS
CLASSES FOR GLOBAL
VARIABLES
Services
Classes

15. HOPES AND DREAMS
Main goal:
Compile the project with partners in team.
Create the PWA and build to server so can be run over IP
address.
10 July plan:
- Title: Implement service API to project
- Outcome: Dispenser API service is implemented in pages
needed, no longer to call http POST/GET from the pages
- Deadline: 10 July evening