De Voorhoede

front-end developers

Commtrac is een software pakket van DBIS waarmee scheepsterminals worden aangestuurd. Om specifiek te zijn: terminals die bulk en stukgoederen verwerken. Denk aan kool, graan, ijzererts, auto’s, balen papier, enzovoorts.

Foto van een containerschip

De uitdaging: van Windows desktop naar web

Met Commtrac wordt de planning van de schepen geregeld, het laden en lossen en de opslag van goederen op terminals. Daarnaast is er een dashboard waarop verschillende statistieken te zien zijn.

De bestaande applicatie was verouderd en alleen voor Windows beschikbaar. De applicatie was tot dan toe organisch gegroeid en bestond uit grote gegevenstabellen waarop invoerformulieren waren gebouwd. Dit bemoeilijkte het onderhoud en ontwikkeling van nieuwe features. De user interface leed er ook onder: de leercurve voor nieuwe werknemers en het gebruiksgemak was niet altijd optimaal.

DBIS wilde de applicatie vernieuwen. Onze opdracht werd om een versimpelde applicatiestructuur neer te zetten. Zo wordt de unieke workflow per medewerker beter ondersteund met heldere overzichten en intuïtieve invoerformulieren.

De oplossing: visueel en modulair met een webapplicatie

Door de Windows-desktopomgeving los te laten en ons te richten op een webapplicatie voldoen we meteen aan een aantal eisen:

  • Alle data wordt centraal opgeslagen
  • Medewerkers hoeven niets op hun werkstation te installeren, en hebben altijd de meest recente versie
  • De applicatie kan worden gebruikt op allerlei verschillende apparaten, ook mobiel

De belangrijkste ontwikkelingen aan het nieuwe Commtrac:

Sterk visueel georiënteerde interface

De interface is op de schop gegaan en alle schermen zijn opnieuw ontworpen. Het laden en lossen van het schip is bijvoorbeeld grafisch gevisualiseerd. Hierdoor heeft een operator bij het lossen goed overzicht in welke goederen zich waar in het schip bevinden. Bij het laden kan de operator goederen direct vanaf een lijst in het ruim van het schip slepen.

Schematische weergave van het ruim van een schip met daarin diverse goederen

Zo heeft een kraanmachinist die de goederen daadwerkelijk in het ruim van het schip plaatst een tastbaar overzicht.

Complexe relaties eenvoudig beheerd

Als basis voor de webapplicatie kozen we AngularJS. In de applicatie bestaan veel formulieren die zeer uitgebreid en gecompliceerd kunnen zijn. Als voorbeeld: er zijn diverse beperkende verbanden die tussen verschillende invoervelden bestaan. Dat wil zeggen: wanneer je iets in het ene invoerveld hebt ingevoerd kan dit invloed hebben op de opties die je mag invoeren in een ander veld. Met AngularJS kunnen deze snel complex wordende verbanden goed worden beheerd.

Commtrac dashboard met diverse grafieken met realtime informatie

Een ander voordeel is dat het eenvoudig mogelijk wordt om gegevens direct op te slaan en uit te lezen. Zo is de informatie in het scherm altijd ‘live’.

Schaalbaarheid en customization

De applicatie is geheel uit componenten opgebouwd. Een component is een klein onderdeel met eigen logica en layout, dat onafhankelijk van andere componenten in een scherm kan worden geplaatst. Samen vormen ze zo een nieuw component of een scherm dat eerder niet bestond.

Dit betekent dat DBIS gemakkelijk zelf nieuwe formulieren en schermen kan maken. Zo kan Commtrac worden aangepast aan de wensen en behoeften van elke terminal.

Het resultaat

  • Van Windows desktop naar webapplicatie met behulp van AngularJS
  • Verbeterde gebruikservaring door sterke visuele interface
  • Modulaire opbouw zorgt voor schaalbaarheid en maatwerk voor elke terminal