Mijn Energiekompas

Mijn energiekompas

Mijn Energiekompas

Headless
AngularJS

Duurzame energie is een zeer belangrijke topic geworden.
Ook de erg actieve intercommunale Leiedal, die Zuid-West-Vlaanderen dynamisch en duurzaam wil helpen uitbouwen tot een aantrekkelijke streek om te ondernemen, te werken, te wonen en te beleven, denkt er zo over. Daarom vroeg Leiedal ons om een webapplicatie te bouwen die de energielabels van de huizen in de streek kon (her)berekenen en afbeelden.

We besloten om de structuur van de webapplicatie op te splitsen in twee grote delen

  • Een Drupal back-end gedeelte, waar alle nodige data kan opgeslaan en beheerd worden
  • Een HTML/AngularJS front-end gedeelte, dat bereikbaar is voor de bezoeker en waar de data wordt afgebeeld

Visualisatie energielabels

In samenspraak met klant Leiedal werd de applicatie zelf (frontend) opgebouwd uit drie grote delen. Het eerste deel bevat een visualisatie van de energielabels op een geografische kaart. Energielabels zijn labels die aanduiden hoe zuinig de woning omgaat met energie. Deze kaart werd opgebouwd met Leaflet en Google Maps en bevat twee verschillende soorten data:

  1. Data die reeds bekend was en geïmporteerd is in de backend
  2. Data die wordt toegevoegd/aangepast door de bezoeker
map energiekompas

Data verrijken

Het tweede grote deel van de applicatie is het "wizard" gedeelte. Het gaat hier over een formulier dat bestaat uit meerdere delen waarin de bezoeker wordt gevraagd naar verschillende eigenschappen van zijn/haar huis. Wanneer de wizard wordt afgerond krijgt de bezoeker, naast het energielabel van het huis, ook een paar tips te zien i.v.m. hoe het huis energievriendelijker kan gemaakt worden. 

De bezoeker kan dan ook beslissen om het resultaat te publiceren op de kaart uit het eerste punt. Indien de bezoeker hiervoor kiest, wordt de data verstuurd naar de back-end van de applicatie en daar opgeslaan zodat deze later opnieuw kan geraadpleegd worden door andere bezoekers.

pdf energiekompas

Rapportage via dynamische PDF

Met het derde en laatste deel van de applicatie kan de bezoeker een samenvatting van het resultaat naar zichzelf door. De PDF wordt automatisch gegenereerd met de TCPDF library aan de hand van de data die werd ingevuld door de bezoeker.

Ook hier wordt alle heavy lifting (mailing, aanmaken pdf, opslaan pdf,...) afgehandeld door de back-end zodat de bezoeker niet te maken krijgt met lange wachttijden.

Bereken hier zelf je energielabel

Blijf op de hoogte via onze nieuwsbrief