AquaSecurity is an expert in fire extinguishing installations. Not only do they provide a tailor-made solution, but they also take care of the installation and maintenance of these systems. With more than 25 years of experience they guarantee reliable fire extinguishing systems in a high performance way. We created for them a React Native app that keeps customers informed about the status of their fire extinguishing system.

Aquasecurity app

You can do that better with an app

To make their solutions even better AquaSecurity would like to communicate quickly about status updates of the installations. In this way, errors and malfunctions can be immediately detected and passed on to the correct person. In other words, a technician will be able to respond more easily to this malfunction in order to make the maintenance service run more efficiently. At the same time, customers are kept informed in real time and can consult the status of their installations at any time.

For sharing these status updates, Calibrate developed a React Native smartphone app. Through this app, customers can log in to their personal account. Each customer has its own environment, in which its different locations can be consulted, together with the status updates per location. This information is synchronized in real time between the physical location and the database servers. This way a customer always sees the latest update.

Aquasecurity applicatie op smartphone

Drupal & React Native app

In order to meet these needs, we at Calibrate opted for a modern digital ecosystem: a mobile application in React Native that interacts with a Drupal web application. This Drupal 8 web application is constantly connected to an external database where all information about the installations can be found. An interwoven connection via REST APIs between the three elements ensures a correct exchange of information that is safely passed on to the right person.

The user experience starts with the Drupal web application: here customers and employees can consult which fire extinguishing systems have been installed and which technicians are available. Employees of AquaSecurity can then link the installations to certain technicians on a user-friendly online platform. Once these technicians log on to the mobile application, they only get to see the installations for which they are responsible.

The mobile application was developed in React Native which runs on both IOS and Android. React-Native was the ideal choice for this application because it is a fast and efficient solution that can interact with an existing application such as the Drupal webapp in PHP. Moreover, this results in a truly native application, which is as performant as a developed application in C# or Java (iOS vs. Android).

What technology did we use?

We built an application in React Native to program "Mobile Native" elements in a React environment. The JavaScript code is translated to both Android and IOS Native code. Furthermore, the application uses Redux to do asynchronous data exchange in a central way. When logging in, a token is used that can store the data in the memory of the device for authentication so that one does not have to log in over and over again.

Messages are retrieved from the external database by means of a Drupal Migrate Module.

Custom authentication between the application and the backend in Drupal is based on a JWT (or also called JSON Web Token). This was implemented via a core REST module and a contrib JWT module. Custom REST endpoints based on core REST, for offering data to the application where data filtering is applied depending on the active user.

Drupal and React Native as best technical choice

Drupal and React Native form a natural combination, because Drupal 8 is perfectly suited to exchange its data via REST APIs. React Native is an ideal way to create smartphone applications in an efficient way. It offers a lot of advantages over separate development in C# and Java: development is done by one team, with all the advantages in development and support.

Interested in our services for React or CMS development? Feel free to contact us and we will be happy to talk about your project.