Dear readers, I am a software developer, and this is my very first blog post. Generally, when we talk about a mobile app, a native android or ios app comes into our mind which requires learning separate set of languages to develop android/ios apps. But in this project we explored writing our code in PWA i.e. Progressive Web Apps.
In next section, I will walk you through the steps to create the UI/Frontend for Meter Reading Service with Angular and Progressive Web Apps and it's integration to backend.
What are Progressive Web Apps?
For this project we build our PWA with angular. This is a meter reading project (meter can be electricity, light water etc.). We have limited the scope to electricity meter for this project. A Utility Technician will use this app for navigating to the building and apartments and take picture of the meter reading, this image will be processed using Machine Learning and number from the image will be read and submitted to backend for verification. Below image shows the overview of the app.
The following need to be installed on your machine:
A login screen is provided for entering email and password for Utility technician.
Login is necessary so that he can get areas/layouts allocated to him for taking meter readings.
To create this screen we need to create a component named login.component.html with email and password fields. A login button will be provided which will take care of authentication from backend and upon successful login it will redirect you to dashboard page
Create screens for choosing a particular unit inside a layout/building
User is presented with a Location screen where he can select the layout
Then the user can select a building and then an apartment or if it's an individual house, he can directly select it.
To create this screen we need to create 2 components named home component and buildings component. Layouts are fetched from backend using user current location. Once user selects a layout, corresponding buildings are fetched using '/odata/v4/BuildingService/Building' api.