Front-end dashboard bouwen voor real-time data.

Projectbeschrijving.

BG-Engineering levert hard- en software aan o.a. rijkswaterstaat waarin zij in de winter real-time kunnen bijhouden hoe strooiwagen hebben gereden en hoeveel zout er zijn gestrooid. Dit is heel nauwkeurig bij te houden via GPS systemen. D.m.v. hun rapportages en dashboard krijg je direct inzicht in de zoutvoorraden, storingen, reparaties en de financiële stand van zaken. De ontwikkeling van geheel een nieuw dashboard was op gang waarbij het inrichten van de vormgeving en bouwen van de front-end werd uitbesteed. De Werkkamer had mij de opdracht gegeven om voor het design en de technische realisatie te zorgen van de front-end van de applicatie.

Ontwikkeling.

Op basis van wireframes en richtlijnen was het design bij dit project direct tijdens de ontwikkeling bedacht en d.m.v. Bootstrap in een rap tempo opgebouwd op basis van de huisstijl van BG-Engineering. Voor het real-time bijhouden van hoe strooiwagens hebben gereden en hoeveel zout er is gestrooid wordt er gebruik gemaakt van de Google Maps API library. Voor wat technische specificaties is er in de front-end fase enkele Javascript functionaliteiten gebouwd waarmee je het map, lagen en weergave kan manipuleren aan de hand van bepaalde filters.

Links en rechts van het scherm zijn er sidebar menu’s ontwikkeld met uitklapbare tabbladen waarin configuraties en tabellen zijn samengesteld voor het instellen van de dashboard met o.a. foutmeldingen, verstelpunten, rit afspeel controls en filter opties. Onder de kaart is een mee scrollende afspeelbalk ontwikkeld die de gebruiker de mogelijkheid geeft ergens in de tijdlijn naar toe te ‘scrollen’ om bijv. te zien waar de strooiactie fout is gegaan. Daaronder worden de strooiers in kleine blokjes aangegeven met kleuren die de status aangeeft van de strooier. Daarnaast staan rechts en links twee uitklap knopjes waarmee je van locatie kunt switchen en een tabel kunt open klappen om de details te zien van de rit gegevens.

Optimalisaties.

Tijdens het ontwikkelen worden alle script libraries beheerd via Node.JS/NPM waardoor altijd gemakkelijk het laatste versie kan worden opgehaald (denk bijv. aan Bootstrap, Fontawesome etc.) en wordt er aan hand van ‘task runners’ met Gulp.js alle SASS en JavaScript code ‘gecompiled’ naar ‘geminified’ en ‘combined’ scripts.  Dit zorgt ervoor dat een minimum aantal requests wordt behouden wat het snelheid flink ten goede komt. Aangezien de applicatie responsive en ‘mobile first’ ontwikkeld is, werkt de applicatie optimaal op iedere device en is hij ook voor elk device en gebruiker te gebruiken.