Building a native mobile app with web technology

Meet Stephen, our Senior Fullstack Developer

One of the more exciting aspects of web development is the opportunity to enhance, combine, or expand upon the features of existing systems to create a streamlined experience for the user. How do you approach the task of building a native mobile app for Cleopatra?

As a software product grows more powerful with features and possibilities, there will come a point where not every user requires the use of every feature. On the contrary, a subset of users may be interested in only a select few features, potentially as part of their daily activities. In such situations, how can we streamline and improve their experience?

Cleopatra, our cloud-based software product, is typically used to manage the budget and timeline of complex industrial projects. These projects may involve many different contractors and specialists, many of whom may never use Cleopatra directly.

Our goal in making a mobile app as a team was to enable any such party to conveniently review or submit relevant project information. Imagine, for example, an inspector at a construction site who has no access to a computer, carrying only their smartphone.

As a software product grows more powerful with features and possibilities, there will come a point where not every user requires the use of every feature. On the contrary, a subset of users may be interested in only a select few features, potentially as part of their daily activities. In such situations, how can we streamline and improve their experience?

Cleopatra, our cloud-based software product, is typically used to manage the budget and timeline of complex industrial projects. These projects may involve many different contractors and specialists, many of whom may never use Cleopatra directly.

Our goal in making a mobile app as a team was to enable any such party to conveniently review or submit relevant project information. Imagine, for example, an inspector at a construction site who has no access to a computer, carrying only their smartphone.

Let’s see how things stack up

After drafting up the initial requirements, we set out to determine the best approach for the task at hand. Personally, I really enjoy the process of choosing the right stack for a project; the JavaScript ecosystem evolves quickly enough that there’s always something new and exciting, but there’s a lot of value in “tried and trusted” as well. Weighing personal preferences against the short- and long-term interests of the project is a fun little balancing act.

Due to the small size of our front-end team we opted to create a progressive web app using established frameworks such as Angular and Ionic. Doing so would allow us to hit the ground running, working with familiar web technologies (HTML, CSS, TypeScript) while building native apps for Android and iOS with a single codebase. We’d have access to in-browser debugging tools ( Redux devtools for example) and hot-reloading, though some native device features would have to be stubbed out.

Getting the app to play nicely with others

As we weren’t working in a vacuum, our friends on the Java side of the team worked in parallel with us, creating a REST API for Cleopatra which we collaboratively fine-tuned. This collaboration was important because we’d encounter many questions that we never had to consider previously and which required our combined experience. How will we handle authentication when each customer has their own API server? How do we make our account setup intuitive? How do we deal with sync issues when the server configuration can be updated on the fly? What should users be able to do when working offline?

Autobuilds, roll out

Once the initial features of the app were implemented, it was time to look at how we wanted our pipeline to function. As the pandemic spread, I soon found myself working from home with 8 different devices to test with and build on, which was starting to become a bit cumbersome. With the integration of our repository into Ionic Appflow, we would soon be able to push to a dedicated branch to trigger an automatic build. This would also run tests and sign the app binaries before pushing them to the internal test tracks of the iOS and Google Play stores respectively. Neat!

What’s next?

The feedback we received from users so far has been very helpful in identifying where we can make additional improvements, and we’ve started to set our sights on our next endeavour. With an application as feature-rich as Cleopatra, there are many opportunities to create streamlined experiences for our users. If you think you’d enjoy working on projects like these, we’d love to have you on our team!

See the available jobs!