AquaSecurity is an expert in fire extinguishing systems. Not only do they provide a tailor-made solution, 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 devices

An application for status updates

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 more efficient. At the same time, customers are kept informed in real time and can consult the status of their installations at any time.

To share these status updates Calibrate developed a React Native smartphone app. Through this app, customers can login 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 synchronised in real time between the physical location and the database servers. This way a customer always sees the latest update.

Phone mockup

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).

Want to read more about React Native developments? Then be sure to check out our blog.

Which tools 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 which, for authentication purposes, can store the data in the device's memory so that one does not have to log in again and 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 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 8 and React Native: a beautiful combination

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 that goes with it. 

In short: a great story!