De Voorhoede

front-end developers

Commtrac is a software package by DBIS that is used to manage shipping terminals. To be specific: terminals that process bulk and general cargo. Think of coal, corn, iron ore, automobiles, paper bales, et cetera.

Photo of a cargo ship

The challenge: from Windows desktop to web

With Commtrac, planning for cargo ships is organised, as well as loading, unloading and storage of cargo at terminals. It also includes a dashboard that displays various stats and graphs.

The existing application had become outdated and was only available for Windows. Up until then, it had grown organically and consisted mostly of input forms built on top of large data tables. This impeded maintenance and development of new features. The user interface also suffered: the learning curve for new employees and its ease of use were not ideal.

DBIS wished to renew the application. Our assignment was to implement a simplified application structure. This way, the unique workflow for every employee would be better supported with clear overviews and intuitive input controls.

The solution: visual and modular with a web application

By leaving the Windows desktop environment behind and moving towards a web application, we immediately met a couple of requirements:

  • All data is stored centrally
  • Employees don’t need to install software on their work station and will always be up to date with the latest version
  • The application can be used on a variety of devices, including mobile

The most important improvements of the new Commtrac:

Strongly visually oriented interface

The user interface has been revamped and all screens have been redesigned. The loading and unloading of ships, for instance, has been graphically visualised. This way, the operator has a good view on what cargo is located anywhere in the ship during unloading. When loading, the operator can drag cargo directly from a work list into the cargo hold of the ship.

Schematic view of a ship’s hold with various loaded cargo

A crane operator, who is actually placing cargo in the ship’s hold, now has a tangible overview.

Complex relations managed smoothly

The basis of our web application is AngularJS. A lot of forms are present in the application that can be very expansive and complicated. As an example: different input fields can have various limiting relationships. This means that when you have entered something in one input field, this might influence the options you have in another field. These rapidly evolving complex relationships can be managed well using AngularJS.

Commtrac dashboard showing various charts with realtime information

Another advantage is that AngularJS makes it easy to store and retrieve information directly while using the application. This way, what’s on the screen is always live.

Scalability and customisation

The application is built entirely out of components. A component is a small part with its own logic and layout, that can be placed in a new screen independently of other components. Together they are able to form a new component or a screen that didn’t exist before.

This means that DBIS can easily build new forms and screens themselves. Now Commtrac can be adapted to the wants and needs of any terminal.

The result

  • From windows desktop to web application using AngularJS

  • Improved user experience by strongly visual interface

  • Modular build enables scalability and custom screens for every terminal