NTUST internship weekly progress presentation

1. Weekly Progress of
Smart Dispenser PWA
(3-9 July 2019)
By: Ian Joseph

2. Profile
•Name: Ian Joseph
•University: Universitas Indonesia (UI)
•Country: Indonesia
•Project: Smart Dispenser ProgressiveWeb App (PWA)

3. Responsibility
InThis Project, I have responsibility to create 2 pages of
the app.
1.Dashboard Page
2.Detailed-Information Page

4. Dashboard Page Design

5. Detailed-information Page Design

6. Target ofThisWeek
1.Finish the main components of Dashboard page.
2.Prepare for the integration with the other’s page.

7. Progress of 3rd July 2019
In 1st day of my internship, I
display the dispenser image
in the background of the
header from api that
Mr.Johnny has prepared.

8. Progress of 4th July 2019
In 2nd day of my internship, I add an overlay in
front of the dispenser image to make it a little
bit darker.
Besides, I change all the pictures in the
button with icons. I also created a click effect
for the button.

9. Progress of 5th July 2019
In 3rd day of my internship, I researched
and try to make a drop-down menu for
the ‘more’ button.

10. Progress of 8th July 2019
In 4th day of my internship, I improved the drop-down menu feature. I
also created a routing feature to go to the detailed-information page,
and then integrate it with the button in the drop down-menu in
dashboard page.
I also Add a HostListener to listen the DOM event. I use it to make the
html height and width could adjust with the screen device
dynamically.

11. Result of Progress in 8th July 2019

12. Progress of 9th July 2019
In 5th day of my internship, I improved the dynamic adjust feature. If
the PWA is opened from PC, it will adjust the screen with height:width
ratio = 16:9. If it’s opened with another type of device, the PWA will
adjust in fullscreen.

13. Result of Progress in 9th July 2019
(PC Initial Display)

14. Result of Progress in 9th July 2019
(PCWidth Resized Display)

15. Result of Progress in 9th July 2019
(PC Height &Width Resized Display)

16. Result of Progress in 9th
July 2019
(Mobile Display in Portrait
Orientation)
Mobile phone: SamsungGalaxy S5

17. Result of Progress
in 9th July 2019
(Mobile Display in
Landscape
Orientation)
Mobile phone: Samsung Galaxy S5

18. Result of Progress in 9th July 2019
(Tracking Button)
• Track is active: • Track is non-active:

19. Next WeekTarget
1.Integration with the other’s page
2.Detailed-information page

20. Thank you