Meter Reading Progressive Web App — Development of a Mobile-Optimized Single-Page Progressive Web Application for Digital Meter Reading
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (winter term 2020/21).
Abstract
Digital meter reading continues to advance, but a continuous internet connection to transmit meter reading data with mobile devices is not always ensured. Therefore, we developed a mobile optimized single-page progressive web application, which offers full functionality despite the absence of a permanent connectivity. The responsive design, innovative software architecture and offline capability of the app was achieved using state of the art technologies from the areas of UX-Design, JavaScript, React, Node.js, Express and Progressive Web Apps. Finally, users are able to use the entire app and to transmit their meter readings to an existing API independent of their environment and connectivity.
Digital meter reading continues to advance. It is resource-saving, paper-free and flexible in terms of time management for the customer. But most meter readings are located in the basement of buildings where internet connectivity to mobile devices is not permanently available. Therefore, customers record the meter reading in their basement and have no Internet connection there. The goal of this project is to develop a Meter Reading Progressive Web App, which permanently works even without an active internet connection and which allows the transmission of meter readings without further intervention by the customer as soon as an Internet connection is available again.
We took a systematic approach to the development of the app by defining a total of five milestones. The first phase of the project was characterized by extensive learning of the necessary tools, technologies and programming languages by our web developers and UX designers.
Starting point of our design process were the above-described functionalities. The goal was to create an app that was highly intuitive, easily accessible, and overall pleasant to interact with. After consulting with bpc, we decided on several personas, ranging from technophile to less tech-savvy users. As part of the ideation process, the entire team made suggestions for possible designs that would meet this standard. With this goal in mind, we then created a rough sketch of the required webpages. This sketch of the main structures and functionalities was iteratively improved through team meetings and calls with bpc.
Finally, we built a complete prototype in FIGMA. By creating a clickable prototype, we were able to evaluate the look and feel of the Meter Reading Progressive Web App. The prototype was tested on real users and minor improvements were made based on the user feedback. You can view this prototype here.
Next, we then began developing the backend and frontend of the app simultaneously. For this, we used the JavaScript framework React for the frontend and Express with Node.js for the backend.
The frontend was developed with a responsive design because the app should be optimized for mobile devices. The backend receives the requests from the frontend and starts the corresponding queries against the existing API to retrieve the necessary data about the meter readings and to transmit new meter readings.
After reaching this milestone, we implemented the offline capability of the Meter Reading Progressive Web App. This was achieved by using state of the art technologies from Progressive Wep Apps such as ServiceWorkers, EventListener and PostMessages as well as the browser’s Cache API, LocalStorage and IndexedDB. Finally, all components of our app were developed and we performed final tests.
With our Meter Reading Progressive Web App (Github Repository), the user is able to transmit his meter readings to an existing API via the app. If the customer is offline, the meter readings are stored in the app’s cache until the customer is online again.
The Team
Philipp Fukas
Track: Web Development
Primary Roll: PWA Developer (for connection between frontend and backend and for offline capability of the App)
Wetschi Kujat
Track: Web Development
Primary Roll: Backend Developer (for communication with the API)
Tim Petersen
Track: Web Development
Primary Roll: Frontend Developer (for user interface of the App)
Christian Sosna
Track: UX-Design
Primary Roll: UX-Designer (for designing look and feel of the App)
Mentors
Richard
Nina
