Barometer Samenleven brengt samenleven diversiteit in beeld

Het Agentschap Binnenlands Bestuur is een onderdeel van Vlaamse overheid dat meebouwt aan een duurzaam en democratisch samenleven in diversiteit. Ordina is gevraagd om een interactief dashboard te bouwen, de zogeheten Barometer Samenleven, dat aan de hand van acht doelstellingen het samenleven in diversiteit in beeld brengt aan de hand van grafieken.

Oplossing

Ordina ontwikkelde voor dit project een webapplicatie met behulp van Drupal CMS en Gatsby. Drupal CMS in een headless opzet (een CMS dat zich enkel bezighoudt met het contentmanagementgedeelte en losgekoppeld is van de website wordt een headless CMS genoemd) en Gatsby als open source static site generator die gebruikmaakt van React-componenten om de user interface (UI) te renderen. Voor zijn data maakt de generator gebruik van een GraphQL-laag, waardoor je op een makkelijke manier meerdere databronnen kunt integreren.

Deze webapplicatie is een interactief dashboard dat grafieken weergeeft. De grafieken worden gevoed door data afkomstig uit het datawarehouse van de Vlaamse overheid.

De website is publiekelijk toegankelijk op deze pagina: https://www.barometersamenleven.be

Uitdagingen

Het project kende meerdere uitdagingen. Zo had Ordina slechts een maand de tijd om het ontwerp, de implementatie en een volledige evaluatie op te leveren.

Verder was het van belang dat alle grafieken client side gerenderd moesten worden, zonder gebruik te maken van een specifieke visualisatietool, zoals Qliks Sense, Tableau of Power Bi. Daarom hebben we gebruikgemaakt van Recharts, een UI-library waarmee we grafieken kunnen samenstellen met React-componenten.

Daarnaast kwam ook de vraag van de klant om bij de grafieken duiding te kunnen geven aan de cijfers. Cijfers zonder context is logischer wijze onvoldoende om de inzichten te begrijpen. Hiervoor hebben we een headless Drupal geïnstalleerd op de Azure-omgeving van de Vlaamse overheid.

Onze aanpak

Ordina nam vanaf het begin van het project de mensen van het Agentschap Binnenlands Bestuur mee in het ontwerp -en beslissingsproces. Zo werd er in de eerste week een design sprint gehouden. Hierbij bekeek een datavisualisatie-specialist van Ordina samen met de data engineer van de Vlaamse overheid welke data op welke manier uit het data warehouse geëxporteerd kon worden. Aan de hand van deze input werden vervolgens de eerste wireframes uitgetekend en voorgelegd aan de mensen van het Agentschap.

Deze aanpak stelde Ordina in staat om vanaf de tweede week al met het ontwikkeltraject te starten. Hierbij werd wekelijks een feedback-moment georganiseerd. Op deze manier hadden de mensen van het Agentschap voldoende inspraak in het eindresultaat en kon Ordina snel schakelen in het ontwikkelproces.

Het eindresultaat
Het Agentschap was zeer te spreken over de oplossing die Ordina heeft opgeleverd, binnen de organisatie wordt gekeken of de oplossing ook voor andere projecten kan worden gebruikt.

Hieronder geven we nog wat extra achtergrondinformatie die met name interessant is voor de technies onder ons.

Architectural set-up

Data sources

Dit project gebruikt 2 verschillende databronnen.

  1. JSON-files die fungeren als input voor de grafieken
  2. Textuele data die van een CMS komen

Met de hulp van de GraphQL-laag binnen Gatsby, aggregeren we deze 2 databronnen in de frontend.

JSON-files
Elk jaar neemt het Agentschap Binnenlands Bestuur enquêtes af. Het resultaat van deze enquêtes belandt in het data warehouse van de Vlaamse overheid binnen Azure. Van dit data warehouse worden er JSON-files geëxporteerd en vervolgens opgeslagen in een blob container (ook in Azure). Deze JSON-files moeten uiteindelijk de grafieken in het dashboard voeden.

Textuele data
Naast de cijfers moet ook interpretatie aan deze cijfers worden gegeven. Daarom hebben we een headless Drupal instantie opgezet waar content kan worden ingevoerd. Deze content verschijnt uiteindelijk in het dashboard samen met de grafieken.

Build pipeline

Het build proces van Gatsby hebben we we meegestopt in onze DevOps pipeline. Als er in Drupal content wordt aangemaakt of gewijzigd, wordt er een webhook getriggerd die onze build pipeline opnieuw aftrapt.

De uiteindelijke output van Gatsby zijn een hoop statische html-, css- en js-files. Deze slaan we op in een Azure blob container die vervolgens via een Azure CDN aangeboden wordt voor een optimale gebruikerservaring.

Meer informatie?

Benieuwd hoe een headless CMS jou kan helpen om snel schaalbare webapplicaties te bouwen? Neem voor meer informatie contact op met Bart Haedens.

Of ben je geïnteresseerd in hoe interactieve dashboards jouw eindgebruikers beter inzicht in jouw data kunnen geven? Neem dan contact op met Joris Klerckx.