Needs
We started with a web app, and the need to provide the ease of use to our customers of a mobile app was very important. To gain some time, we hired our communication agency to work on the design for us, and I took care of developing the mobile app. The app is only for our customers and not the staff (except salespersons with a special guest account for demonstration), and only has customer-related functionalities (see some historical data, turn on/off, change setpoint, access the schedule and energy meters).
Stack & dependencies
- VueJS 2
- Quasar, a VueJS framework which provides a CLI to build SPA, PWA, hybrid mobile app with Capacitor, and many UI components and utilities.
- Highcharts for the energy meters visualisations
- Axios for simplified fetching
Design & screenshots
The design was sketched by an agency, Section4, and given to me as a Adobe XD result. With Quasar, I could recreate the design and create all the interactions and cards. The end result isn’t far from the original sketch given. It stays in the Material UI idea.
![](/images/mobile-app/mobile-login-min.png)
![](/images/mobile-app/mobile-main-min.png)
![](/images/mobile-app/mobile-param-min.png)
![](/images/mobile-app/mobile-schedule-min.png)
![](/images/mobile-app/mobile-meters-min.png)
Screenshots from the mobile app taken on an iPhone 7 Plus