An Airport Bag Tracking App

Created: 10/21/2016

Hippopunk built a bag tracking app as a proof of concept for an international airport. Besides explaining the field of application, this blog will also let readers know why for this kind of rapid enterprise app development, Apache Cordova makes absolutely sense.

Field of Application

The main purpose of this project is to give users the information about the location of their bags.

After check-in, bags are scanned by the baggage sorting machine at various positions till they are loaded into the plane. Every time a scan happens, the bag gets a new status update. The user can receive these updates through push notifications (it is possible to configure which status updates a user can receive).

The software solution consists of an app and a backend (server side application). The backend is responsible to track bag status changes and to issue the push notifications. It provides also an API (Application Programming Interface) which allows the app to retrieve data.

The procedure: the app gives the users the possibility to scan their bag receipts in order to follow these bags:

camera from the device which scans the bag receipt

First the user scans the bag receipt with the help of the camera of the mobile device.

details of a scanned bag receipt

After reading the bag receipt the status of the bag will be shown. At this point the user can also decide whether he wants to receive status updates through push notifications. Alternatively a bag can be searched by entering the badge number manually (without scanning).

list of all scanned bag receipts

All scanned bags are saved into a list which can be updated with a “swipe to refresh”.

The Technical Solution

Apache Cordova For Rapid Enterprise App Development

Since this app is a proof of concept and is used only for internal testing purposes, we wanted to use a tool which allows app development in a very short time. For this reason we decided to implement the app with Apache Cordova. The user interface was built with Framework7.

For scanning the bag receipts and receiving the push notifications, native code (Swift or Objective-C for iOS and Java for Android) is needed. For these tasks two Cordova plugins are available, thus there was no need to write one line of native code:

  • Barcode Scanner
  • Push Plugin

As we already had deep experiences with these plugins, the implementation went smoothly.

Firebase Cloud Services, PHP and Slim Framework to Build the Backend

Building the backend (server application) and sending the push notifications was a little bit tricky, as various systems had to interact. The bag status, which the baggage sorting machine provides, had to be accessed through a SOAP service. Also the device ids and the bag ids (which were scanned by the app) had to be stored on the server (the backend needs to know which device wants to follow which bags). For each status update we had to send the notification message to Firebase Cloud Messaging which issued the push notification to the device.

As a side note: Firebase Cloud Messaging (FCM) replaced Google Cloud Messaging (GCM) for sending push notifications.

To build the server application we used PHP together with the Slim micro framework. Slim is a lightweight framework to build APIs.

Some words about using Framework 7

Framework 7 is not as popular as Ionic or OnsenUI. Nevertheless we wanted to give it a try in a real world project, and it seems to offer some great benefits:

  • mostly pixel perfect components for iOS and Android Material Design
  • extremely fast (also fast loading time)
  • easy to use
  • basically no dependencies as it is pure JavaScript (VanillaJS)

For this project, it was the perfect choice.

For a bigger, long term project, there are some issues to consider:

  • VanillaJS leads very fast to unstructured code. A design pattern and an additional lightweight framework like e.g. VueJS has to be added to the development stack. As a side note: for this topic Ionic 2 and Angular 2 are shining. They provide to developers a nice structured code.
  • The business case of Framework 7 is not quite clear - in fact it seems that there is no business case at all and also little sponsoring. For a legacy project which should be supported in the long term, there might be a risk that one day this framework will be unsupported (which we would strongly regret).


Hardware and Sensors provide value for innovative solutions

It was fun to develop this kind of project because many components have to interact together. Users are getting real benefits from using their phones. Even though simple, the camera provides added value. Innovative solutions should take more benefits from the hardware through the usage of the various sensors.

Choosing the Right Development Tools For Each Business Case

From a technical point of view, the appropriate choice of development tools helps to deliver software efficiently. As we develop also native apps with Swift/iOS and Java/Android, we feel comfortable in various environments. For this kind of projects, where app development should happen within a few days, Apache Cordova is the right choice.