A cross platform React Native mobile app to support utility meter readings

  • Content
We've developed a React Native mobile app to support the end client employees in efficiently reading utility meters at their end customer locations. The employees receive assignments on their tablets, are navigated to the location of the assignment, and are able to photo the meter state, which is OCR-ed and sent to the server for processing.
9Y logo SVG
Year

Sep 2018 - Jan 2019

Technologies

React Native, redux, Mobile app, Cross platform

Executive Summary

Our client is a software company based in Vienna, Austria. They were looking for a partner to help them develop a cross platform mobile app for their client, a gas & utility company located in Vienna.

In essence, the app was to be used by the end client employees to receive assignments on their tablets, get the navigated to the location and take the photo of the gas meter state. The app would then turn the image into a meter reading and upload the reading to the server to be processes by the core system.

Our client provided the API, design and wireframes and we were tasked to build a cross platform mobile application using React Native.

Challenges and objectives

Since the app captures the state of gas meters for end client's customers at location, several key challenges had to be taken into consideration:

  • Mobile signal will vary based on location, and internet may be unavailable in some locations

  • Meters at different locations are of different make and models, and this must not afffect the quality of character recognition on an image taken by a mobile device camera

  • Any processing errors need to be taken into account, and a manual mode should be enabled so that the personnel taking readings can correct and process them

  • While the app would initially be used on specific versions of iPad tablets, it should support Android tablets of varying screen sizes and manufacturers

  • The API will be developed in parallel with the mobile app, so API calls should be mocked and developed in a flexible way to support changes to the API specification as defined prior to starting the development

The team provides excellent resources who work flexibly in different project management structures depending on the requirements. They deliver high-quality products that satisfy both the in-house team and the end clients, while operating transparently.

How we helped

Serving as a remote team working on an isolated part of the overall system, we've set up our project management to coordinate our internal team with the client's team in Vienna.

Working with the client, we've set up an initial delivery plan, taking into consideration that the API will be developed in parallel. The design was partially in place as the development started, so we were able to work on most of the screens. The missing APIs were mocked against the specification provided by our client. We understood that specification was prone to change as the API was being developed, so we relied on heavy test coverage to ease the transition from mocked to production API.

They did the mobile app with React Native, while we built the backend API and did a lot of custom code on the engineering side.

To alleviate the problem of volatile internet stability, we took extra care to implement offline mode and a sophisticated system for retrying reading failed uploads with fallback to manual model if the upload problem persists.

We utilized Anyline, a third party library mobile scanning and OCR library with heavy support for meter reading identification to maintain a high level of accuracy when reading meter state across many different metere models and makes. We secured a manual fallback method to correct the reading from the scanning software to cover the rare cases when reading was inaccurate.

Due to the high number of assignments per technician, each showing a location pinon the built-in map, we performed low level tweaks and optimizations to ensure fast loading and high response rate when interacting with the app.

At the end, we were able to complete the app within specified deadlines, and due to careful mocking of the API specifiaction, integrating with the actual implementation of the API proved to be painless and efficient.

Results

The app extensively used by end client employees to perform tens of thousands of reading each quarter, and new features, influenced by feedback from real life usage are being added between quarter.

Offline mode and background upload systems have proven to be very helpful in areas with poor internet connection.

They were recommended to us by a common acquaintance who I trust. It felt right after having the first conversation with them. We started off with small tasks and took it from there.

Since releasing the app, our client has received multiple projects based on implementing similar features and functionality.

Future plans

We've gone through 3 iterations of improving the original app, and added two similar apps for different end clients.

Our client has since started development of a white label solution to be offered and sold as a product to other companies providing gas, electricity and water supply services, and we are excited to continue working to help them with developing that solution.

Do you have a similar project?

We'd love to find out more...

Planet used as section decoration

See other projects

Section headline decoration
9Y logo SVG

Outsourcing high quality software development power

When outsourcing developers to augment our partners' software development efforts, we prefer to outsource a full development team while maintain internal team coordination in-house. In order to avoid downtime, in rare occasions we will outsource our developers individually for a limited period of time.

Profil Klett logo SVG

Developing real-time physics simulations for a national academic research institution.

Our client is one of the largest publishers of books and digital content for education in Croatia. They operate a successful digital interactive content creation and publishing platform. They've hired us to help them develop dozens of interactive physics simulations targeted for high school students.

Designing a complex financial assessment platform

The client is a leading insurance products and services provider in the United States. With over a 100 offices nationwide, more then 3000 employees and over a billion USD in revenue, it is among top 15 largest insurance brokerages.