Master in de industriële wetenschappen 2014- 2015 Faculteit industriële ingenieurswetenschappen, campus Groep T Leuven Deze paper werd geschreven door studenten in het kader van de masterproef
EEN ONLINE TOOL VOOR VLOOTSCANS VAN BEDRIJFSWAGENS Ewoud De Moor, Anneleen Scholts Electronica-ICT, Faculteit industriële ingenieurswetenschappen, campus Groep T Leuven Vesaliusstraat 13, 3000 Leuven, Belgium
Promotoren: Luc Vandeurzen, Jeroen Vanaken Faculteit industriële ingenieurswetenschappen, campus Groep T Leuven Vesaliusstraat 13, 3000 Leuven, Belgium
[email protected] [email protected] Co-promotoren: Hans Damen, Bart Vanham TCOPlus http://www.tcoplus.com/
ABSTRACT In een samenwerkingsproject willen Voka - Kamers van Koophandel Vlaams-Brabant en de provincie VlaamsBrabant bedrijven informeren over de mogelijkheden van alternatieve brandstoffen. Hiervoor werken ze samen met TCOPlus, een Vlaams-Brabants adviesbureau met ruime ervaring in het strategisch beheren van een vloot en bijbehorende fiscale aspecten. Via deze masterproef bouwden we een applicatie, waarmee TCOPlus aan de slag kan met het uitvoeren van online vlootscans. Eerst onderzochten we hoe we dashboards konden bouwen om vlootscans uit te voeren. Daarna onderzochten we hoe op een zo efficiënt mogelijke manier gebruik te maken van de huidige werktuigen die TCOPlus ter beschikking heeft. Uiteindelijk bouwden we een web applicatie die gebruikt kan worden voor het uitvoeren van een indicatieve vlootscan. Daarmee kan de gebruiker snel de huidige vloot vergelijken met een voorgestelde alternatieve vloot bestaande uit elektrisch en aardgas aangedreven wagens.
Trefwoorden web applicatie, vlootbeheer, bedrijfswagens, alternatieve brandstoffen, software voor bouwen van een dashboard
2
1
INLEIDING
In België is de bedrijfswagen een waar fenomeen geworden dat bijna niet meer weg te denken is als extralegaal voordeel. Dat resulteert elk jaar in een groei van het nationaal wagenpark. Het aantal voertuigen ingeschreven in België is van 5 742 600 in 2000 naar 6 983 847 in 2013 gegroeid. Dat is een toename van meer dan een miljoen auto’s. Wel ligt de groei van personenwagens iets lager, van 4 626 949 naar 5 433 295 (Febiac, 2013) (Fédération Belge de l’Automobile et du Cycle). Dat is iets meer dan 800 000. Het aantal bedrijfswagens is meer dan verdubbeld over dezelfde periode, van 203 430 in 2000 naar 413 640 in 2013 (Febiac, 2014). Dat is een toename in het wagenpark met 210 210, zowat ¼ van de bijgekomen 800 000 personenwagens. Dat die toename problemen met zich brengt voor het milieu en voor de klimaatverandering is evident: fijn stof, CO2 enzovoort. Bovendien zijn er de files. De vraag komt dan ook regelmatig terug of de fiscale voordelen voor bedrijfswagens niet moeten afgeschaft worden (Bond Beter Leefmilieu, 2014). Ook binnen Voka gaan daarvoor stemmen op. Welke ook de fiscale toekomst van de bedrijfswagens is, bedrijven zullen nog altijd een vloot voertuigen nodig hebben. Intussen blijken de verantwoordelijken voor de aankoop van wagenparken vaak niet of weinig op de hoogte te zijn van de mogelijke alternatieven voor klassieke verbrandingsmotoren. Ze grijpen nog te vaak terug naar diesel of benzine auto’s, waar een elektrisch voertuig ook perfect bij het rijprofiel van een bepaalde werknemer past. Vandaar ontstond er een initiatief van Voka en de provincie Vlaams-Brabant om bedrijven beter te informeren over de mogelijke alternatieven. Daarvoor heeft het adviesbureau TCOPlus een rekenblad in Excel uitgewerkt. Daarop voortbouwend, hebben we een web applicatie ontworpen in de vorm van een interactieve website waarop snel een indicatieve vlootscan kan worden uitgevoerd. Met die vlootscan voert de verantwoordelijke voor de aankoop gegevens in over de huidige vloot zoals aantal wagens, looptijd, kilometrage en een gemiddelde CO2 uitstoot. Aan de hand van die gegevens kan de huidige vloot vergeleken worden met een alternatieve vloot op basis van bijvoorbeeld de TCO (Total Cost of Ownership) en de milieueffecten. Diagrammen kunnen de vergelijking van de huidige met de alternatieve waarden vereenvoudigen.
1.1
Aard en omvang van het probleem
Een van de grootste redenen waarom bedrijfswagens zo populair zijn in ons land is dat het voor de werkgever voordelig is een werknemer een auto te bezorgen als extralegaal voordeel (Belgische Federale Overheidsdiensten, 2015). De grootste oorzaak hiervan ligt volgens Voka, het Vlaamse netwerk van ondernemingen, bij de hoge loonlasten in België. Die zijn bij de hoogste in Europa. Daarom is het voor de werkgevers voordeliger hun werknemers een auto te
bezorgen dan hun een loonsverhoging te geven. (Vanherle, 2014) Ook voor een werknemer is het vaak interessant een auto van het bedrijf te krijgen. Gezien alle kosten die een wagen met zich meebrengt is het vaak een van de grote onkosten in het huishouden. Wanneer het werk die onkosten op zich neemt, zullen weinig mensen dat aanbod afslaan. Uit een studie van de OESO (Organisatie voor Economische Samenwerking en Ontwikkeling) blijkt dat in België het jaarlijkse loonvoordeel voor één bedrijfsauto €2 763 bedraagt, terwijl dat bijvoorbeeld in buurland Nederland slechts €1 284 bedraagt. (Harding, 2014) Momenteel bestaat de overgrote meerderheid van het Belgische wagenpark uit diesel- en benzine aangedreven voertuigen, namelijk 98,9%, terwijl slechts 0,4% bestaat uit elektrische of CNG voertuigen (Febiac, 2014). CNG staat voor compressed natural gas, aardgas onder druk. Het is veel minder vervuilend dan de klassieke aandrijvingen omdat het een lagere uitstoot CO2, fijnstof en andere schadelijke stoffen oplevert. In het samenwerkingsproject ‘Vlootscan’ gesubsidieerd door de provincie Vlaams-Brabant wil Voka (Kamers van Koophandel Vlaams-Brabant) bedrijven informeren over de mogelijkheden van alternatieve brandstoffen. Dit willen ze bereiken door een online applicatie beschikbaar te stellen in Vlaanderen. Hiervoor werken ze samen met TCOPlus, een Vlaams-Brabants adviesbureau met ruime ervaring in het strategisch beheren van een vloot en bijbehorende fiscale aspecten. Het doet dat door een Total Cost of Ownership (TCO) berekening van het huidig wagenpark en een vergelijking met de TCO van het voorgestelde alternatieve wagenpark. Een financiële schatting brengt de directe en indirecte onkosten en belastingeffecten in kaart. Bedrijven vermijden immers alternatief aangedreven auto’s zoals elektrische voertuigen omdat ze duurder zijn in aankoop. Door de TCO te berekenen toont TCOPlus aan dat wanneer je alle kosten die een auto met zich meebrengt in kaart brengt, je vaststelt dat het vaak voordeliger is om elektrische of CNG aangedreven wagens in het wagenpark te hebben. TCOPlus hanteert drie pijlers om bedrijven bewuster te maken van de mogelijke opties. Eerst maken ze een analyse van de vermindering in CO2 uitstoot. Daarna brengen ze de winst voor de werknemer en voor de werkgever in beeld. Momenteel gebeurt dat via een zeer uitgebreid Excel-formulier. De dashboards moeten daarop manueel aangemaakt worden via dure software. Figuur 1 toont twee voorbeelden van dashboards gemaakt door TCOPlus die kunnen gebruikt worden voor het uitvoeren van een vlootscan.
3
Figuur 1: Voorbeelden van dashboards gemaakt door TCOPlus
De opdracht is: het voor TCOPlus gemakkelijker te maken om dashboards te ontwerpen, aan te passen en online te plaatsen voor gebruik in toekomstige projecten. de drempel voor bedrijven te verlagen door een snelle indicatieve analyse aan te bieden via het internet zodat ze vrijblijvend een analyse van hun wagenpark kunnen uitvoeren om een beter inzicht te krijgen in de mogelijkheden. het voor TCOPlus en Voka mogelijk te maken de formules en data in de applicatie te actualiseren en gegevens van de gebruikers van de applicatie op te vragen.
1.2
Analyse van bestaande oplossingen
Er zijn al enkele ondernemingen die zich met soortgelijke analyses als die van TCOPlus bezig houden. Er bestaan dan ook al enkele oplossingen online die de mogelijkheid aanbieden een TCO berekening van een voertuig te maken en de resultaten te vergelijken met mogelijke alternatieven zoals een elektrisch voertuig. Een voorbeeld hiervan is TCO Berekenen1. Op die website kan je de TCO berekenen van één wagen. Om toegang te krijgen tot de TCO Calculator, moet je eerst je gegevens invullen. Eens je toegang hebt, moet je op vier tabbladen allerlei parameters ingeven over de wagen en het gebruik ervan. Op het vijfde tabblad krijg je dan een vergelijking tussen de geselecteerde brandstofauto en een elektrische auto op basis van heel wat parameters zoals TCO, investering, verbruik en CO2. Een tweede voorbeeld is edmunds.com2, een Amerikaanse website gewijd aan informatie over 1 2
http://www.tcoberekenen.be/ http://www.edmunds.com/tco.html
auto’s. Ze bieden een rekenmodule aan voor het berekenen van de TCO van een specifiek model van auto. De rekenmodule laat enkel toe een auto uit een vooropgestelde lijst te selecteren. Er is geen mogelijkheid om andere opties te kiezen. De rekenmodule laat niet toe om auto’s rechtstreeks te vergelijken. Het grootste verschil tussen deze oplossingen en de oplossing die wij aanbieden, is dat het bij ons niet om één enkele auto gaat, maar om het gehele wagenpark. We bieden de bezoeker van de website de mogelijkheid in één oogopslag te zien hoe de aanpassing van het gehele wagenpark eruit zou kunnen zien als hij kiest voor een alternatieve oplossing. Bovendien zijn op onze web applicatie de gegevens ook grafisch voorgesteld. Door het gebruik van simpele grafieken die steunen op de drie pijlers van TCOPlus (voordeel voor het milieu, de werknemer en de werkgever) ziet de gebruiker meteen welk voordeel de verschillende partijen kunnen halen uit de alternatieven. Zo krijgt de bezoeker een beter totaalbeeld. Voor het bouwen van een dashboard zijn heel wat software pakketten beschikbaar. Bij de start van onze masterproef hebben we heel wat van die pakketten uitgeprobeerd met als doel uit te zoeken of ze bruikbaar zijn voor het uitvoeren van een interactieve vlootscan. Veel van die pakketten waren toegespitst op BI (Business Intelligence) en het genereren en beheren van rapporten. Vaak ontbrak de functionaliteit om zelf input velden te definiëren en ze te gebruiken als parameters voor het uitvoeren van wat-als-analyses. Ook was er meestal geen bruikbare manier om formules uit een bestaand Excel-bestand te gebruiken. De pakketten waarvan we ontdekten dat ze het dichtste bij onze behoefte staan, zijn de volgende. SAP biedt software pakketten die het mogelijk maken een interactief dashboard te bouwen op basis van een Excel-document inclusief de formules. Die software pakketten worden echter samengebundeld met heel wat andere software die niet zo nuttig is voor onze toepassing en samen hebben ze zeer hoge licentie kosten. SiSense biedt een betaalbaar software pakket dat zeer snel, eenvoudig en gebruiksvriendelijk werkt voor het bouwen van een online dashboard. Verschillende gegevensbronnen zoals Excel en MySQL kunnen eenvoudig beheerd worden op een centrale plaats, maar een Excel-bestand kan enkel gebruikt worden als gegevensbron. De toepassing is vooral toegespitst op BI en mist daardoor de vrijheid die nodig is om een dashboard te bouwen voor een vlootscan. De functionaliteit uitbreiden, is enkel beperkt mogelijk via JavaScript. Het is niet mogelijk zelf een dynamische parameter te bepalen en die te gebruiken in berekeningen. De beperkte opties voor de opmaak maken het onmogelijk het dashboard aan te passen aan de huisstijl van een bedrijf. BIRT is een opensourcesoftware project voor BI en het bouwen van rapporten. Een betalende versie wordt aangeboden door het bedrijf Actuate en een gratis versie
4 is beschikbaar onder de vorm van eclipse BIRT. Met dit software pakket is het mogelijk om dashboards tot in de puntjes aan te passen. Het gebruik van deze software is minder intuïtief. Vaak is er kennis van programmeertalen nodig om de functionaliteit te verkrijgen die we nodig hebben. Het is niet eenvoudig om extra input velden aan te maken en te gebruiken in formules. Daarnaast is het onmogelijk om de formules in een bestaand Excel-document te gebruiken. JasperReports biedt een gelijkaardig pakket als BIRT, met een betalende en een gratis versie. Net zoals bij BIRT zijn we ervan overtuigd dat het mogelijk is een gepersonaliseerd dashboard te bouwen, maar niet zonder de nodige kennis. Het vereist enige moeite om met JasperReports te leren werken. Tableau is een betalend software pakket, maar een gratis studenten licentie is beschikbaar. De software is eenvoudig in gebruik met veel slepen en neerzetten. Tableau is typische BI software, maar met wat moeite zou het mogelijk moeten zijn om dynamische input te gebruiken. Van de vermelde softwarepakketen is tableau waarschijnlijk de meest geschikte voor het bouwen van een dashboard voor het uitvoeren van een vlootscan. D3js staat voor Data-Driven Documents. Het is geen compleet softwarepakket, maar wordt wel vaak genoemd als een alternatief voor bovenstaande pakketten. Daarmee hebben we uiteindelijk gewerkt.
1.3
Structuur van de paper
In deze paper bespreken we eerst de vereisten die er vooraf gesteld werden aan de applicatie. We leggen uit waarom de geïmplementeerde functionaliteiten van de applicatie noodzakelijk zijn en hoe ze, aan de hand van een flowchart, gebruikt kunnen worden. Daarna leggen we de achterliggende structuur van de applicatie uit, en daarop aansluitend de technologieën die gebruikt zijn tijdens de implementatie. Vervolgens schetsen we, aan de hand van voorbeelden, hoe de applicatie geïmplementeerd werd. In de evaluatie gaan we na in welke mate het vooropgezette objectief is bereikt en welke mogelijkheden wij nog zien om de applicatie te verbeteren.
2
Die actor wil in eerste instantie toegang krijgen tot de applicatie. Eenmaal hij toegang heeft, wil hij de gegevens van de huidige vloot kunnen ingeven en, indien nodig, hierbij ondersteuning krijgen. Op basis van de ingevoerde gegevens wil hij informatie over de TCO van de huidige vloot om die te vergelijken met een alternatieve. De gebruiker wil de vergelijking in detail en grafisch kunnen onderzoeken. Een onmiddellijke beslissing nemen, ligt niet voor de hand. Daarom wil de gebruiker de gegevens bewaren, hetzij afgedrukt, hetzij als een pdf-bestand. De meeste gebruikers zullen waarschijnlijk ook gediend zijn met bijkomende informatie over mogelijke stappen voor het nemen van hun beslissing. De tweede gebruiker, TCOPlus is, vanuit zijn opdracht voor de provincie Vlaams Brabant, er vooral in geïnteresseerd te overhalen op alternatieve brandstoffen over te schakelen. Daartoe willen ze bedrijven aanzetten de applicatie te gebruiken. Daarom is het voor hen een vereiste dat ze de gegevens van de bedrijven kunnen bekijken met het oog op een mogelijke diepgaande analyse achteraf. Ook moeten ze in staat zijn de applicatie te actualiseren. De berekeningen van de TCO zijn immers afhankelijk van allerlei externe factoren zoals subsidies en lease tarieven. De derde categorie gebruikers, Voka en de provincie, zijn vooral geïnteresseerd in wie de gebruikers van de applicatie zijn: hoe frequent wordt ze gebruikt en welk soort bedrijven doen er een beroep op? De provincie kan zo zicht krijgen op de impact van de bestede middelen en het beleid er op afstemmen.
VEREISTEN
Sommige technische vereisten werden al voldaan bij het schrijven van deze paper. De applicatie zou nog uitgebreider kunnen. Ook hiervoor werden de bijkomende vereisten onderzocht. Tot slot zijn er nog bepaalde dingen waar in beide gevallen rekening mee moest worden gehouden.
2.1
Vereisten voor de drie actoren
Vanuit de gebruikers zijn de vereisten weergegeven in Figuur 2 via een use case diagram van de applicatie. Daarin is te zien hoe er voor het ontwerpen van de applicatie werd uitgegaan van drie actoren. De belangrijkste gebruiker, degene die de meeste functionaliteiten vereist, is de verantwoordelijke voor de aankopen van het wagenpark. Hierop werd dus initieel ook het meeste gefocust.
Figuur 2: Use case diagram van de web applicatie
2.2
Bijkomende mogelijke vereisten
Oorsprokelijk onderzochten we hoe TCOPlus zelf dashboards zou kunnen ontwerpen en beheren voor een bepaalde klant. Aan de hand van het navigatie model in Figuur 3 beschrijven we de vereisten.
5 TCOPlus krijgt na het inloggen een lijst met bestaande dashboards te zien. Vanop deze pagina is het mogelijk te navigeren naar een pagina waarop men de volgende acties kan uitvoeren: de gegevens in de database beheren met een handige interface een nieuw dasbhoard aanmaken een bestaand dashboard uit de lijst bekijken en aanpassen de instellingen van de gebruiker aanpassen een dashboard uit de lijst publiceren via bijvoorbeeld e-mail Bij het aanmaken en bewerken van een dashboard zouden ze eerst een lay-out moeten kunnen kiezen die de pagina verdeelt in verschillende cellen. In elke cel zouden dan onderdelen kunnen aangebracht worden, met een keuze uit de volgende onderdelen: invoerveld uitvoerveld afbeeldingen grafieken tekst Nadat de pagina voorzien is van elementen kunnen die aan elkaar gekoppeld worden door formules. Het is ook mogelijk om gegevens uit de database te gebruiken in die formules. Als laatste stap kan dan de opmaak van de elementen en de pagina aagepast worden. Er kan gekozen worden welke kleur de elementen en de achtergrond hebben. Ook de lettertypes van de tekst kunnen aangepast worden. Een klant van TCOPlus kan dan via een link het dashboard bekijken en gebruiken.
2.3
Vereisten in beide gevallen
Bij het schrijven van software en het ontwerpen van een interface is het belangrijk rekening te houden met de omgeving en de context waarin de applicatie gebruikt zal worden. In dit geval zal de applicatie hoofdzakelijk in een kantoor omgeving gebruikt worden. Het beheer van de applicatie door TCOPlus zal gebeuren op een laptop of een desktop computer. Het beheren van de toepassing moet eenvoudig te doen zijn, zonder de kennis van een ingewikkelde programmeertaal, en mag geen tijdrovende taak zijn. Bedrijven die een vlootscan uitvoeren, zullen vooral een laptop of desktop computer gebruiken om de website te raadplegen. Het is mogelijk dat een mobiel apparaat, zoals tablet gebruikt wordt. Vaak worden beslissingen door meer mensen genomen. Er moet dus een mogelijkheid zijn om het resultaat te bewaren en te presenteren aan anderen.
Figuur 3: Navigatie model voor een applicatie voor het maken en beheren van dashboards
3
DESIGN/ARCHITECTUUR
Eerst bespreken we de structuur aan de hand van de verschillende stappen die een gebruiker doorloopt om de applicatie te gebruiken. Daarna volgen de gebruikte technologieën om deze structuur te realiseren. We bespreken waarom we een bepaalde technologie gekozen hebben en vergelijken die met de alternatieven.
3.1
Structuur
Het stroomdiagram in Figuur 4 verduidelijkt de structuur van de applicatie zoals de wagenpark verantwoordelijke van een bedrijf ze te zien krijgt. 1. De bezoeker registreert zich. 2. Hij krijgt een e-mail met een gepersonaliseerde link die hem toegang verschaft tot de toepassing. 3. Hij kan de input van het huidige wagenpark invullen en bijwerken. 4. Het resultaat (cijfers en grafieken) kan hij printen of naar een pdf-bestand omzetten. 5. Tot slot beschikt de bezoeker over de mogelijkheid informatie te krijgen over mogelijke verdere stappen, zoals contact nemen met Flanders Smart Hub en bezoeken van websites over alternatieve brandstoffen.
6 getest voordat er iets in de database opgeslagen wordt. Het is inderdaad belangrijk de gegevens ook op de server te testen voor het geval dat er, om welke reden dan ook, geen validatie is uitgevoerd bij de gebruiker. Zo zijn we er zeker van dat er geen ongeldige informatie of schadelijke code in de database terecht komt. De server is verantwoordelijk voor het aanmaken en opslaan van de gepersonaliseerde link en om de link daarna naar de gebruiker te sturen via e-mail. Er is gekozen om de berekeningen van de TCO’s en het genereren van de grafieken niet op de server-side te doen en ze daarna door te sturen, maar ze direct op de client-side uit te voeren. Hierdoor is het mogelijk de resultaten en grafieken zeer snel te laten reageren op de ingevoerde gegevens van de gebruiker. Het is steeds de server die communiceert met de database. Daarom worden alle gegevens en formules door de server op de pagina geplaatst voor ze naar de gebruiker te sturen. Aan de client-side is er een code aanwezig die de ingevoerde gegevens verzamelt en naar de server stuurt zodat ze opgeslagen kunnen worden in de database. Het genereren van het pdf-bestand gebeurt op de server om een betrouwbaar resultaat te verkrijgen. De client-side moet daarvoor wel eerst de ingevoerde gegevens doorsturen.
Figuur 4: Stroomdiagram voor wagenpark verantwoordelijke van een bedrijf
TCOPlus, Voka en provincie Vlaams-Brabant kunnen inloggen via een administrator pagina. Eenmaal ingelogd, hebben ze de mogelijkheid de volgende elementen van de applicatie aan te passen: de formules voor het berekenen van de TCO de standaardwaarden die ingevuld worden wanneer de pagina voor het eerst bezocht wordt de hulpteksten die de gebruikers moeten helpen de pagina te gebruiken. de tekst in de e-mail met de gepersonaliseerde link. Ze kunnen ook bekijken welke gebruikers zich geregistreerd hebben en wat deze gebruikers ingevoerd hebben in de applicatie.
3.2
Technologieën
We onderscheiden de server en de browser van de gebruiker. We moeten voortdurend beide in het oog houden, zoals uit volgende voorbeelden blijkt. Op de registratie pagina wordt er al een eerste validatie gedaan van de ingevoerde gegevens op de pagina zelf, maar op de server worden die gegevens nog uitvoeriger
3.2.1 Server-side De server-side van de applicatie is geschreven in PHP (Hypertext Preprocessor). De reden daarvoor is dat PHP een opensourcetaal is die gratis te gebruiken is. Als scripttaal is ze gemakkelijk te hanteren op heel wat types servers en heel wat goede broncode-editors zijn beschikbaar. PHP is de populairste server-side programmeertaal voor ASP.NET, Java en ColdFusion. (Q-Success, 2015) Hierdoor heeft de taal een levendige community, een uitgebreide documentatie en wordt ze goed onderhouden. CodeIgniter3 is een van de frameworks beschikbaar voor PHP. Het is gebaseerd is op het MVC-patroon (Model View Controller). Dat ontwerppatroon is voorgesteld in Figuur 5. 1. De browser van de gebruiker stuurt een aanvraag naar de controller. 2. De controller spreekt een model aan om informatie op te vragen die hetzij uit het model zelf, hetzij uit een database komt. 3. Het model verstuurt de data in de gevraagde vorm naar de controller. 4. De controller verwerkt de ontvangen gegevens en stuurt ze door naar een view, die een representatie van de gegevens opmaakt 5. De view wordt naar de browser gestuurd. In het MVC ontwerppatroon hebben elk van de drie elementen een onderscheiden functie: de view geeft data weer, het model is een tussenschakel tussen toepassing en database, de controller regelt de communicatie tussen het model en de view, en communiceert zelf met de gebruiker. 3
http://www.codeigniter.com/
7 Andere PHP frameworks zoals Symphony, Phalcon of Laravel maken ook gebruik van het MVC-patroon of een soortgelijk ontwerppatroon. Qua snelheid, functionaliteit en betrouwbaarheid zijn ze evenwaardig. Een paar redenen waarom we de voorkeur hebben gegeven aan CodeIgniter zijn dat het goed is gedocumenteerd, dat het een compacte bestandsgrootte heeft en dat het eenvoudig te installeren is. (Upton, Ellis, & Allard, 2007)
behouden we langs de andere kant de flexibiliteit die D3js aanbiedt. Om het schrijven in JavaScript te vereenvoudigen en krachtiger te maken, voerden we in de hele applicatie jQuery in. jQuery is een JavaScript bibliotheek die het schrijven van client-side scripting eenvoudiger maakt. Foundation maakt gebruik van jQuery. Daarom is jQuery noodzakelijk om de pagina correct weer te geven. Bovendien vereenvoudigt jQuery het schrijven van webpagina’s waar asynchroon gegevens worden opgevraagd via AJAX (Asynchronous JavaScript And XML) door hiervoor in handige functies te voorzien. jQuery komt te pas voor de verwerking van de ingegeven vlootgegevens en AJAX dient om die door te sturen naar de server om ze op te slaan in de database. (Franklin, 2013) (Chaffer & Swedberg, 2011) Voor de administrator-pagina gebruiken we een jQuery plug-in, DataTables. Daarmee wordt de tabel van de gebruikers opgemaakt zodat de beheerder erin kan zoeken en sorteren. In plaats van zelf een script te schrijven, hebben we hiermee een kant-en-klare oplossing gevonden. Er is een stijlblad beschikbaar dat de tabellen van DataTables perfect integreert in een pagina met Foundation. (SpryMedia Ltd, 2015)
Figuur 5: MVC ontwerppatroon
3.2.3 Pdf Een volgende belangrijke functionaliteit van onze applicatie was de mogelijkheid om alle gegevens te kunnen downloaden in een overzichtelijke pdf-versie. Aanvankelijk gingen we op zoek naar een client-side oplossing in de vorm van een JavaScript bibliotheek omdat de grafieken er dynamisch worden gegenereerd. Een voorbeeld hiervan is jsPDF8. Deze, en andere gratis JavaScript bibliotheken, bleken niet in staat om een betrouwbaar resultaat te geven in de verschillende browsers: vaak waren er problemen met de grafieken die niet goed omgezet werden. Daarom gingen we op zoek naar een server-side pdf applicatie. We kwamen daarbij uiteindelijk uit bij dompdf. Die toepassing is in PHP geschreven en gemakkelijk te integreren in de CodeIgniter omgeving. Als nadeel heeft het wel dat het genereren even kan duren bij grote bestanden en bestanden met veel tabellen. We spreken hier over enkele seconden tot enkele minuten. Een ander probleem was dat de grafieken met JavaScript in de browser gegenereerd worden. Om die client-side gegenereerde grafieken in SVG formaat in het pdf-bestand te kunnen gebruiken, deden we een beroep op een JavaScript bibliotheek die toelaat om SVG’s naar PNG’s om te zetten en naar de server te sturen. Een andere oplossing was geweest een server-side applicatie te installeren zoals ImageMagick9 of Phantomjs10. We kunnen op dit moment niet voorzien op welk type server onze applicatie zal werken. Daarom weten we niet of die tools beschikbaar zullen zijn op die server en gebruiken we ze liever niet.
3.2.2 Client-side Voor de client-side maakten we gebruik van de volgende hulpmiddelen. Voor het uitzicht gebruiken we het framework Foundation van ZURB4. Andere mogelijke ‘front-end’ frameworks waren Bootstrap5 en Semantic UI6. Ze zijn allemaal gratis, worden actief ontwikkeld en zijn goed gedocumenteerd. De reden waarom we Foundation gekozen hebben, is dat dit framework de meer geavanceerde stijlen weglaat. Op die manier kunnen softwareontwikkelaars het framework als basis (vandaar “foundation”) gebruiken en daarop verder bouwen om de rest van de stijl specifiek aan hun applicatie aan te passen. Voor de grafieken gebruiken we D3js (Data Driven Documents). D3js is een JavaScript framework waarmee geavanceerde, dynamische data visualisaties gebouwd kunnen worden. Er bestaan tamelijk veel bibliotheken die vergelijkbare functionaliteiten hebben. Voordelen van D3js zijn dat het bestaande standaarden gebruikt zodat de gebruikers niet verplicht worden om een of andere plug-in te installeren, dat het toelaat om zeer geavanceerde grafieken te bouwen, onder meer vanuit een uitgebreide bibliotheek, en dat het goed gedocumenteerd is en nog actief onderhouden wordt. (Dewar, 2012) (Meeks, 2014) (Zhu, 2013) Naast D3js voerden we ook C3js7 in omdat er in onze applicatie maar een beperkt aantal typen grafieken gebruikt worden. Welnu, C3js kan dat eenvoudiger doen dan de uitgebreide bibliotheek van D3js. Met C3js moeten we geen overbodige code schrijven en 4
http://foundation.zurb.com/ http://getbootstrap.com/ http://semantic-ui.com/ 7 http://c3js.org/ 5
8
6
9
https://parall.ax/products/jspdf http://www.imagemagick.org/ 10 http://phantomjs.org/
8 3.2.4 Database Opdat de applicatie correct werkt, is het nodig dat we gegevens kunnen opslaan in, en ophalen uit een database. CodeIgniter biedt ondersteuning voor de volgende databases: MySQL (4.1+), MySQLi, MS SQL, Postgres, Oracle, SQLite en ODBC (EllisLab, Inc., 2015). Dat wil zeggen dat al deze databases, zonder veel aanpassingen zullen werken met de applicatie. MySQL is de meest populaire open source en gratis te gebruiken database. Er is een zeer uitgebreide documentatie beschikbaar, er zijn heel wat gratis toepassingen beschikbaar voor het ontwerpen en beheren van de database. (Oracle Corporation and/or its affiliates, 2015) Voor het beheer van onze MySQL database kozen we phpMyAdmin, een gratis en open source software pakket geschreven in PHP. Hiermee kan de database beheerd worden via een gebruikersinterface zonder dat er een grondige kennis van SQL vereist is. (phpMyAdmin contributors, 2015) 3.2.5 Excel TCOPlus heeft een bestaand Excel-document met alle berekeningen en waarden voor de alternatieve vloot, waarmee een volledige vlootscan kan worden uitgevoerd. Een ideale oplossing voor TCOPlus zou dus zijn dat de gegevens die nu ingevuld worden op de website, ingevuld zouden worden in het Excel-bestand. Excel zou dan de nodige berekeningen uitvoeren en de resultaten terugsturen, om die resultaten weer te geven op de pagina. Hierdoor moet enkel het Excel-document onderhouden worden door TCOPlus. We hebben uitgebreid onderzocht of het mogelijk is, iets dergelijks te doen. Het is relatief eenvoudig om gegevens uit een Excel-document te importeren in een database. Dat is bijvoorbeeld mogelijk met phpMyAdmin. Bij het importeren wordt er enkel rekening gehouden met de waarden van de cellen. De formules die verbanden leggen tussen de cellen, worden daarbij genegeerd. Het is dus wel mogelijk de gegevens over de alternatieve voertuigen te importeren, maar de formules voor de TCO zullen verloren gaan. Het is mogelijk om met PHP gegevens in een Excel-document aan te passen en uit te lezen, maar de formules in het document worden pas uitgerekend wanneer het document geopend en geïnterpreteerd wordt door bijvoorbeeld Microsoft Excel. Het is niet mogelijk dat te doen op een eenvoudige PHP server. Er zijn enkele diensten beschikbaar om online een Excel-document te openen zoals Google-spreadsheets11, Excel Online12 en Docs13. Het is niet mogelijk om die diensten te gebruiken voor onze toepassing. Zoals vermeld in de analyse van de bestaande oplossingen, heeft SAP software pakketten die een dashboard kunnen maken van een Excel-document. Door de grote kost van die pakketten, zijn ze niet bruikbaar voor onze toepassing. De oplossing die SAP
gebruikt, is het Excel-bestand vertalen naar een structuur die door de server gebruikt kan worden. Als we zelf iets dergelijks zouden moeten implementeren, zou dat meer tijd in beslag nemen dan er beschikbaar is in deze masterproef. Wegens alle genoemde redenen, hebben we ervoor gekozen de formules manueel om te zetten in JavaScript en een handige manier toe te voegen om de formules te onderhouden. De gegevens over de alternatieve vloot worden opgeslagen in de database. 3.2.6 Tekstverwerkers Voor het aanpassen van de JavaScript formules gebruiken we de integreerbare code-editor Ace14. Die is open source en gratis te gebruiken. Hij geeft ondersteuning voor syntaxmarkering en markeert eventuele fouten. De teksten aanpassen die in de toepassing verschijnen, doen we met TinyMCE15. Ook die integreerbare tekstverwerker is open source en gratis te gebruiken. Hij biedt een interface voor het opmaken van de tekst zonder dat er kennis van HTML vereist is. De interface van TinyMCE is zeer aanpasbaar zodat enkel de knoppen die nuttig zijn voor de gebruiker getoond kunnen worden.
4
IMPLEMENTATIE
We recapituleren achtereenvolgens: (1) het registratieproces, (2) de berekening van de TCO, (3) de opbouw van de grafieken, (4) aanmaak van pdf (5) authenticatie van de administrator, (6) aanpassing van de formules, (7) structuur van database, (8) applicatie voor het bouwen van een dashboard.
4.1
Registratie proces
De eerste pagina waarop een gebruiker terecht komt, is de registratie pagina. Hier worden enkele gegevens van de gebruiker gevraagd zodat er achteraf in kaart kan gebracht worden wie de vlootscan gebruikt. Nadat een gebruiker zijn gegevens heeft ingevoerd, voert de applicatie een formuliervalidatie uit om na te gaan of de gegevens wel correct ingevuld zijn. Dat gebeurt op de server met behulp van de ‘form validation’ functionaliteit van CodeIgniter. Indien de ingevoerde gegevens niet correct zijn, krijgt de gebruiker een gepast bericht op de registratie pagina. Indien de gegevens wel correct zijn, genereren we een unieke token voor de gebruiker. De token wordt samen met de gegevens van de gebruiker opgeslagen in de database. Daarna sturen we een gepersonaliseerde link naar het opgegeven e-mailadres. Enkel indien het opgegeven e-mailadres correct is, zal de gebruiker de e-mail kunnen ontvangen. Op die manier verifiëren we dus het e-mailadres. De gegenereerde token zit verwerkt in de gepersonaliseerde link. Zo kunnen we nagaan of de gebruiker zich wel degelijk geregistreerd heeft. We hebben deze manier gekozen opdat de gebruiker geen gebruikersnamen en wachtwoorden moet onthouden en intypen. De link kan eenvoudig gedeeld
11
https://docs.google.com/spreadsheet/ https://office.live.com/start/excel.aspx 13 http://docs.com/ 12
14 15
http://ace.c9.io http://www.tinymce.com/
9 worden binnen een bedrijf. Als een collega de link opent, kan hij meteen de ingevulde gegevens zien. Een ander voordeel is dat we kunnen nagaan of het ingevoerde e-mailadres wel degelijk bestaat. De token kan gebruikt worden om de gebruikers te koppelen aan de ingevoerde gegevens. Hierdoor kunnen zowel de gebruikers als TCOPlus en Voka op eender wel toestel de ingevoerde gegevens raadplegen.
4.2
Berekenen van de huidige en alternatieve TCO
Om een goede gebruikservaring te creëren waarbij de resultaten snel reageren op de ingevoerde gegevens, hebben we ervoor gekozen de berekeningen uit te voeren op de computer van de gebruiker door middel van JavaScript. De formules voor het berekenen van de TCO kunnen wijzigen indien bijvoorbeeld het belastingvoordeel voor bedrijfswagens wijzigt. Ook de gegevens die nodig zijn voor het berekenen van de alternatieve TCO kunnen veranderen als er bijvoorbeeld meer elektrische en CNG voertuigen op de markt komen of als de leasing maatschappijen hun tarieven aanpassen. Het is dus noodzakelijk dat zowel de formules als de gegevens eenvoudig aanpasbaar zijn. Dat doen we door de gegevens op te slaan in de database en de mogelijkheid te bieden aan TCOPlus om ze aan te passen via de administrator pagina. De formules staan opgeslagen in de database. Bij het laden van de pagina worden die door de controller via het relevante model uit de database gehaald en op de correcte plaats in de view gezet. Figuur 6 toont het pad dat de formules afleggen.
Codefragment 1: application\controllers\main.php, functie invite() $this->load->model('vlootscan_model'); […] //Get data and formulas $data['dataAltTCO'] = $this->vlootscan_model->getTCOData(); $data['formulas'] = $this->vlootscan_model->getFormulas(); $data['token'] = $token; //show the page $this->load->view('dashboard', $data);
Codefragment 2 toont hoe de gegevens en de formules terecht komen op de webpagina via de view. De formules komen onderin de ‘body’ van de HTML pagina zodat de browser de inhoud van de pagina al kan weergeven voor ze volledig geladen is. Alle formules en gegevens zijn nu aanwezig op de pagina. Dus kunnen we de huidige en alternatieve TCO’s berekenen. Codefragment 2: application\views\dashboard.php, data en formules […] <script> /*** data en formules ***/ var dataAltTCO = ; […]
Alle input velden behoren tot de klasse “input”. Met de jQuery class selector vragen we alle elementen van die class op. Daarna voegen we een event handler toe met de jQuery change functie. Daardoor wordt, telkens er een input verandert, de code in Codefragment 3 uitgevoerd. Codefragment 3: assets\js\voka.js, Acties als input verandert //Acties als input verandert $(".input").change(function() { debouncedCalculateOutput(); debouncedUpdateCharts(); debouncedSaveInput(); });
Figuur 6: Sequentiediagram ophalen gegevens uit database
De gegevens voor de alternatieve TCO worden uit de database gehaald in het model, maar worden daar meteen omgezet naar een Json object. Hierdoor is de data meteen klaar voor gebruik in JavaScript. Codefragment 1 toont hoe de controller de gegevens van het model doorgeeft aan de view.
Om de prestatie van de applicatie te verbeteren, maken we gebruik van een debounce techniek. Wanneer een gebruiker bezig is met het invullen van de gegevens, kan het zijn dat de input meermaals en snel op elkaar volgend verandert. Toch is het niet nodig dat de output voor elke tussenwaarde berekend wordt. De debounce techniek zorgt ervoor dat de functie maar eenmalig wordt uitgevoerd nadat ze voor een bepaalde tijd niet meer is aangeroepen. In Codefragment 4 is weergegeven hoe de debounce techniek gebruikt wordt. Codefragment 4: assets\js\voka.js, debouncedCalculateOutput //efficiente functie maken var debouncedCalculateOutput = debounce(function() { calculateOutput(getInput()); }, 100); //max elke 0,1s
10 Als de input veranderd is en er gedurende 0,1 s geen andere veranderingen gebeuren, zal de input uitgelezen worden om daarna de nieuwe waarden voor de TCO te berekenen. Uit onderzoek blijkt dat een reactietijd van minder dan 0,1 seconde het gevoel van een onmiddellijke reactie geeft. Tot 1 seconde zal de gebruiker het als naadloze overgang ervaren, maar de gebruiker merkt dat de computer even tijd nodig heeft. Door een debounce waarde van 100 milliseconden te kiezen, zal de gebruiker enkel een zeer korte vertraging merken. (Nielsen, 2010) De berekeningen maken gebruik van de formules en gegevens afkomstig van de database. De resultaten van de berekeningen worden meteen ingevuld op de pagina.
4.3
Initieel worden de waarden op nul gezet. Het type grafiek dat we willen verkrijgen, is een staaf diagram, dus nemen we als type bar. In het onderdeel color bepalen we welke kleur de staven zullen hebben. Een hexadecimale voorstelling voor de kleuren rood en groen wordt gebruikt. Het deel onder axis bepaalt hoe de assen er uit zien. Op de x-as plaatsen we de verschillende levels waarin de bedrijfswagens geclassificeerd worden. Ten slotte, in het onderdeel tooltip zorgen we ervoor dat de tekstballon die verschijnt wanneer er over de grafiek bewogen wordt met de muis, mooi opgemaakt is. Codefragment 6: assets\js\voka.js, CO2 grafiek tekenen
Bouwen van grafieken
Net zoals de outputvelden, moeten ook de grafieken dynamisch veranderen. Ook dat is volledig in JavaScript gecodeerd. Bij het laden van de pagina moeten de grafieken getekend worden. Hoe dat gebeurt, is te zien in Codefragment 5. Het tekenen van de grafieken begint pas een tijdje na het laden van de pagina, zodat de browser van de gebruiker de tijd heeft om eerst de rest van de pagina te laden en klaar te zetten. Uit testen met verschillende browsers en computers bleek dat 400ms voldoende tijd was voor het voltooien van de andere scripts die uitgevoerd worden bij het laden van de pagina. Gebruikers moeten eerst hun aandacht vestigen op het invullen van de gegevens voordat zinvolle grafieken getekend kunnen worden. Een vertraging van een halve seconde, samen met de duur van het tekenen van de grafieken zit onder de grens van 10 seconden die nodig is voor het houden van de aandacht van een gebruiker. (Nielsen, 2010) Na het tekenen van de grafieken, voeren we een stukje JavaScript van Foundation opnieuw uit, zodat de hoogten van de elementen aangepast worden en de hoogte dezelfde is voor alle elementen.
/** * Grafiek voor CO2 tekenen */ function drawCO2Chart() { chartCO2 = c3.generate({ bindto: '#CO2', data: { columns: [ ['huidig', 0, 0, 0, 0, 0, 0, 0, 0, 0 ], ['alternatief', 0, 0, 0, 0, 0, 0, 0, 0, 0 ] ], type: 'bar', labels: { format: { y: function (v, id, i) { return Math.round(v); }, } } }, color: { pattern: ['#ff4500','#2ca02c'] }, axis: { x: { type: 'category', categories: ['1', '1,5', '2', '2,5', '3', '3,5', '4', '4,5', '5'] }, y: { tick: { format: function (d) { return d; }, } } },
Codefragment 5: assets\js\voka.js, grafieken tekenen //Grafieken tekenen, 400ms na laden pagina setTimeout(function(){ drawCO2Chart(); drawSavingsChart(); drawHappynessChart();
tooltip: { format: { title: function (d) { return 'Level '+['1', '1,5', '2', 2,5', '3', '3,5', '4','4,5', '5'][d]; }, value: function (value, ratio, id) { return Math.round(value*10)/10 + ' ton';}, } }
//Run foundation equalizer $(document).foundation('equalizer', 'reflow'); }, 400);
De drie grafieken worden op soortgelijke manier getekend. In Codefragment 6 nemen we de CO2 grafiek als voorbeeld. De grafiek wordt getekend met behulp van C3js. Dat wordt gedaan door de generate functie aan te roepen met heel wat parameters. Het onderdeel bindto definieert het HTML element waarin de grafiek getekend moet worden. In dit geval is dat het element dat geïdentificeerd wordt als ‘#CO2’. Onder data specifiëren we welke gegevens we gaan weergeven in de grafiek. In het codefragment is te zien dat we twee sets van data hebben: huidig en alternatief.
}); }
In 4.2 hebben we al besproken dat de TCO opnieuw berekend moet worden wanneer de input verandert. Ook de grafieken moeten bijgewerkt worden. Dat gebeurt op dezelfde manier met de debounce techniek. We nemen weer de CO2 grafiek als voorbeeld. De update functie berekent eerst de nieuwe waarden voor
11 de grafiek. Codefragment 7 toont hoe de nieuwe waarden daarna worden ingeladen in de grafiek met behulp van de load functie van C3js. Codefragment 7: assets\js\voka.js, updateCO2Chart() //Verander de waardes in de grafiek chartCO2.load({ columns : [ CO2_uitstoot_huidig, CO2_uitstoot_alternatief ], });
4.4
E-mailen van pdf-bestand
Het stond van het begin al vast dat er een mogelijkheid moest bestaan om de gegevens die verkregen werden via de applicatie op een bepaalde manier op te slaan. In samenspraak met TCOPlus hebben we beslist om dat te doen in de vorm van een pdf-bestand. Pdf-bestanden worden vaak gebruikt om een webpagina op te slaan. Toch bleek het een behoorlijk zware opgave een oplossing te vinden die geschikt is voor onze web applicatie en die in de applicatie te integreren. We hadden vooraf enkele eisen gesteld aan het omvormen van de webpagina: geen dure licentiekosten geen installatie door de gebruiker compatibel met de meeste browsers Er bestaan heel wat betalende oplossingen die een kwaliteitsvolle JavaScript bibliotheek aanbieden voor het omvormen van een webpagina, maar het feit dat die oplossingen betalend zijn, maakt ze ongeschikt voor onze toepassing. Als alternatief bleven er nog enkele gratis en opensource bibliotheken over, maar die zijn niet van dezelfde kwaliteit als de betalende. De gratis bibliotheken bieden geen of weinig ondersteuning voor externe CSS-stijlpagina’s die verantwoordelijk zijn voor de opmaak van onze applicatie. Ook de dynamisch geladen inhoud zoals de grafieken vormden vaak problemen. Dat heeft tot gevolg dat de pagina er na de omvorming vaak misvormd uitziet en dat het resultaat afhankelijk is van de browser. De bibliotheek die het beste resultaat opleverde, bleek jsPDF te zijn. Een implementatie met jsPDF werkt uitstekend in Google Chrome, maar dat resultaat kon niet verkregen worden in Mozilla Firefox en Internet Explorer. Hierna zijn we op zoek gegaan naar een server-side oplossing om niet afhankelijk te zijn van de gebruikte browser. Er zijn ook hier heel wat bibliotheken beschikbaar: zowel gratis als betalende. Sommige moeten op de server geïnstalleerd worden, andere werken volledig in PHP. Nog een andere mogelijkheid was een externe service van een andere server te gebruiken. Het grootste probleem hierbij was dat de ingevoerde gegevens niet mee gestuurd werden en dat de grafieken niet correct getekend werden. Uiteindelijk is er gekozen voor dompdf. Dat is een bibliotheek die gratis te downloaden is, met een uitgebreide community en documentatie. Bovendien is het een bibliotheek die volledig gebouwd is in PHP, wat
ervoor zorgde dat het heel gemakkelijk te integreren was in CodeIgniter. De installatie bestaat er in de bestanden van dompdf te downloaden en te kopiëren naar de map system/helpers/dompdf in CodeIgniter. Vervolgens zorgt het bestand dompdf_helper.php in de map system/helpers ervoor dat dompdf als helper gebruikt kan worden elders in CodeIgniter. Codefragment 8 toont de inhoud van het helper bestand. Met de PHP require_once functie wordt de bibliotheek ingeladen. Vervolgens wordt de constructor van dompdf aangeroepen om een nieuwe instantie te maken. De HTML parameter zal dan doorgegeven worden aan dompdf. Er worden een paar instellingen ingevoerd zoals de oriëntatie en de grootte. Door het aanroepen van de methode render op het dompdf object wordt de HTML omgezet naar pdf. Codefragment 8: system\helpers\directory_helper.php, dompdf helper function pdf_create($html, $filename='', $stream=TRUE, $orientation='portrait') { require_once("dompdf/dompdf_config.inc.php"); $dompdf = new DOMPDF(); $dompdf->load_html($html); $dompdf->set_paper('A4', $orientation); $dompdf->render(); if ($stream) { $dompdf->stream($filename.".pdf"); } else { return $dompdf->output(); } }
Op de webpagina is er voorzien in een knop om een e-mail te versturen met het pdf-bestand als bijlage. De berekeningen voor de TCO worden uitgevoerd met JavaScript in de browser. Daarom is er geen eenvoudige manier om op de server dezelfde berekeningen te doen en is het dus nodig om de resultaten door te sturen. De grafieken worden ook met JavaScript getekend en moeten dus ook doorgestuurd worden. Een bijkomende moeilijkheid is dat dompdf niet zo een goede ondersteuning heeft voor de SVG-afbeeldingen waaruit de grafieken zijn opgebouwd. Daarom worden die afbeeldingen eerst omgezet naar een PNG-afbeelding. Codefragment 9 toont de code die de omzetting van SVG-afbeeldingen naar PNG-afbeeldingen uitvoert. De code die de SVG beschrijft, wordt met behulp van de canvg.js bibliotheek naar een HTML5 canvas geconverteerd. Die canvas wordt op zijn beurt gebruikt om een URL te maken voor een PNG-afbeelding. De URL wordt doorgegeven naar de controller en wordt daar gebruikt om de afbeelding in het pdf-bestand te zetten. Wanneer de controller de gegevens ontvangt, stuurt hij ze door naar het model. Het model zet ze om in een HTML document. De helper zet het om in een pdf-document dat klaar is om te versturen via e-mail.
12 Codefragment 9: assets\js\voka.js, SVG naar PNG function svg_to_png(id) { var inner_svg = $('#' + id + ' svg').html(); var canvas = document.getElementById("canvas"); canvg(canvas, '<svg width="510" height="350" style="overflow: hidden; stroke-width:1px;" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">' + inner_svg +'', {ignoreClear: true} ); var png = canvas.toDataURL("image/png"); return png; }
4.5
[…] <script src="js/src-min-noconflict/ace.js"> <script> var editor = ace.edit('editor'); document.getElementById('editor').style.fontSize = '14px'; editor.getSession().setMode('ace/mode/javascript');
Veel van de teksten die gebruikt worden in de applicatie zijn opgeslagen in de database. Beheerders kunnen de teksten aanpassen via de administrator pagina. Daarvoor gebruiken we TinyMCE. (Codefragment 11)
Inloggen als beheerder
TCOPlus en Voka hebben meer rechten in de applicatie dan de andere gebruikers. Ze mogen namelijk gegevens aanpassen die de werking van de applicatie beïnvloedt en bekijken wie de applicatie gebruikt. Als beheerder moeten ze zich eerst identificeren en authentiseren met een gebruikersnaam en wachtwoord op de administrator pagina. Daarna krijgen ze de mogelijkheid om de applicatie te beheren (autorisatie). De gebruikersnaam en een geklutste versie van het wachtwoord zijn opgeslagen in de database. Een klutsfunctie of hashfunctie zorgt voor de omzetting van het wachtwoord dat de gebruiker kent naar de geklutste versie. Het sha256 algoritme wordt in onze applicatie gebruikt als klutsfunctie. Het algoritme heeft als eigenschap dat het zeer makkelijk is om een geklutste versie te berekenen, maar vrijwel onmogelijk om een wachtwoord te verkrijgen uit de geklutste versie. Indien een onbevoegd persoon toegang zou krijgen tot de database, zal die enkel de geklutste versie van het wachtwoord kunnen zien en niet het echte wachtwoord. De controle van het wachtwoord gebeurt door de geklutste versie te vergelijken met die uit de database. De code verantwoordelijk voor het uitvoeren van beheerderstaken zit verwerkt in een aparte controller om zo een onderscheid te maken met de rest van de applicatie. In deze controller wordt er gebruik gemaakt van een PHP sessie om bij te houden welke gebruiker er ingelogd is en of die wel de nodige rechten heeft om de acties uit te voeren. Bij het uitloggen zal de PHP sessie beëindigd worden en is het niet meer mogelijk acties uit te voeren als beheerder zonder weer in te loggen.
4.6
Codefragment 10: application/views/edit_formula.php, codeeditor Ace
Aanpassen van formules en teksten
De controller stuurt de formules uit de database mee met de formules ‘bewerken pagina’ naar de browser van de beheerder. Het script in Codefragment 10 zorgt er voor dat de formules uit de database makkelijk bewerkt kunnen worden.
Codefragment 11: application\views\edit_mouseover.php, TinyMCE $value) { ?>
[…] <script src="js/tinymce/tinymce.min.js"> <script> tinymce.init({ selector:'.editor', menubar: false, toolbar: ["undo redo | fontsizeselect | bold italic | link image | alignleft aligncenter alignright", "bullist numlist outdent indent | subscript superscript" ], resize: "true", });
13
4.7
Structuur van database
Al de voorgaande elementen leiden tot volgende structuur. (Figuur 7)
Figuur 7: EERD database
4.8
Applicatie voor het bouwen van een dashboard
Deze applicatie was ontworpen voor TCOPlus om in de toekomst sneller een dashboard te kunnen genereren. Door het verleggen van de focus van het ontwikkelen van een algemene applicatie voor het bouwen en beheren van een dashboard naar een specifiek dashboard in het project van Voka, is dit ontwerp onbenut gebleven. Onder de elementen die al geïmplementeerd waren, was er een edit pagina met: drag and drop selecteren van een structuur aanpassen van tekst invoegen van grafieken uploaden van afbeeldingen Een ontwerp van de database (Figuur 8)
Figuur 8: ontwerp EERD van database voor niet ontwikkelde applicatie
14
5
EVALUATIE
Tot nu toe hebben we een aantal aspecten geëvalueerd, andere kunnen pas in een volgend stadium van het project geëvalueerd worden De technische aspecten die we evalueerden, zijn de juistheid van de formules, de compatibiliteit van de browsers en die van de mobiele toestellen. Alle formules zijn overgenomen uit een Excel-bestand van TCOPlus. Om te controleren of we fouten hadden gemaakt bij het overzetten van de formules naar onze applicatie, hebben we de resultaten voor enkele willekeurig gekozen waarden vergeleken. De resultaten van de applicatie moesten kloppen met die van de Excel-bestand. Na de verbetering van enkele schoonheidsfoutjes was dat inderdaad het geval. Om na te gaan of de applicatie compatibel is met zoveel mogelijk browsers, gingen we na of er zich bij bepaalde browsers anomalieën voordeden. We hebben de volgende browsers getest. Safari v51.x, Opera v26.x, Mozilla Firefox v34.x, Google Chrome v39.x en Internet Explorer v9 tot en met v11. We hebben getest voor gevoelige punten bij wisseling van browser, zoals de lay-out die verloren gaat of voor afwijkende grafieken, niet werkende pop-ups en mouse-overs enerzijds en anderzijds voor cruciale elementen in de applicatie, zoals correct registreren, berekenen van TCO, weergeven van grafieken. Alle geteste browsers hadden de gewenste werking. Met welke mobiele toestellen is de applicatie compatibel? Zowel met online als met offline tools gingen we na of de applicatie werkte en een aanvaardbare kwaliteit opleverde. Tot en met een scherm van 7 inch schaalt de applicatie mee met het beeldscherm. Op kleinere schermen zijn tabellen en grafieken nog moeilijk in hun geheel te bekijken. Je moet scrollen en dat is niet efficiënt. Vermits tablets doorgaans meer dan 7 inch zijn, beantwoordt de applicatie aan de vooropgezette vereiste dat ze bruikbaar moet zijn op tablets, die in het bedrijfsleven stilaan gemeengoed zijn. Smartphones waren wel geen vereiste, maar desnoods kun je er ook al mee op weg. In de huidige stand van het project was het net nog niet mogelijk een test uit te voeren voor de gebruiksvriendelijkheid en de betrouwbaarheid van de applicatie. (Zie bijlage)
6
DISCUSSIE
Het probleem waarop dit eindwerk inspeelt, is dat autogebruikers in het algemeen en bedrijven die dienstwagens aan hun werknemers aanbieden, nog meestal gaan voor diesel of benzine. De provincie Vlaams-Brabant heeft een project om daaraan iets te doen, meer bepaald voor de dienstwagens. TCOPlus heeft in het kader van dat project een rekenblad gemaakt. Als bedrijven dat invullen, kunnen ze van TCOPlus een overzicht krijgen met alternatieven voor hun huidige vloot.
Ons eindwerk is een poging om die dienstverlening efficiënter en effectiever te laten verlopen. Efficiënter door de omweg via TCOPlus in te korten. Die zou de gegevens over types auto’s, prijzen en kosten nog altijd blijven invoeren, maar de bedrijven zouden zelf onmiddellijk de mogelijkheden kunnen zien om hun vloot milieuvriendelijker te maken. Zal dat ook effectiever zijn, zullen op die manier meer bedrijven de overstap naar alternatieven zetten? Dat is de hoop. De hypothese is dat een handige applicatie daartoe kan bijdragen. Of we met ons ontwerp-applicatie een stap gezet hebben om de efficiëntie en de effectiviteit te verhogen, die vraag kunnen we op dit moment natuurlijk niet beantwoorden. We hebben geprobeerd de applicatie technisch uit te werken en dat zo degelijk mogelijk. (zie hoger: evaluatie) We zien dat er nog verbeteringen mogelijk zijn. Enkele daarvan kunnen we in dit stadium al voorzien. Andere zullen pas blijken op het moment dat de applicatie gebruikt wordt door bedrijfsleiders of hun medewerkers, de ene al meer vertrouwd dan de andere met de aankoopprijzen, onkosten, fiscaliteit, milieu, inclusief klimaat. Tot wie moeten we ons richten? Moet er bijvoorbeeld meer “technische” informatie zijn over hoe met de applicatie om te gaan (voor edummies)? Moet er uitleg zijn over hoe TCO werkt (voor diegenen die het zelf wel eens willen narekenen)? Moeten we nog meer inzetten op snelheid (voor tragere computers en tablets)? Moeten we in plaats van grafieken of ten minste naast grafieken ook tabellen weergeven (voor diegenen die liever cijfers dan staven zien)? Moeten we niet meteen een alternatieve vloot voorstellen met een zekere mogelijkheid tot keuze over bijvoorbeeld de ‘levels’ zoals er nu negen zijn (Voor wie de koe direct bij de horens wil vatten)? Moeten we ook niet de mogelijkheid open laten toch bij benzine (liever dan diesel om milieuredenen) te blijven of bij hybriden, naargelang van het gebruiksprofiel van de werknemer (voor wie niet absoluut zijn groen imago wil hoog houden)? Er zijn nog meer mogelijkheden voor uitbreiding en inbreiding. Daarvoor zullen onze opdrachtgevers ongetwijfeld ijveren.
15
7
BESLUIT
Het Belgische wagenpark van bedrijfswagens bestaat voornamelijk uit auto’s met klassieke motoren zoals diesel- en benzinewagens. Dat zorgt niet alleen voor een zware belasting van de verkeersinfrastructuur in België maar ook voor een toename aan vervuilende stoffen en uitlaatgassen. Veel bedrijven zitten nog vast aan het idee dat alternatieve aandrijvingsmotoren niet alleen verschrikkelijk prijzig zijn, maar bovendien ook niet voldoen aan de vereisten die zij stellen aan bedrijfswagens. De web applicatie die wij ontworpen hebben in de lijn van het rekenblad van TCOPlus, moet een tool aanbieden aan bedrijven om weg te gaan van dat idee en om de mogelijkheden van alternatieve auto’s in hun wagenpark te ontdekken. Niet alleen worden bedrijven door het gebruik van deze applicatie gewezen op de tonnen vervuilende gassen die elk jaar bespaard kunnen worden maar bovendien wordt het idee ontkracht dat alternatief aangedreven auto’s veel duurder zijn dan klassieke motoren. De applicatie leert de verantwoordelijke voor het wagenpark namelijk dat men niet alleen naar de aankoopprijs van een wagen moet kijken wanneer het wagenpark wordt samengesteld, maar naar de TCO, de total cost of ownership. Dat is een financiële schatting van alle directe en indirecte kosten. Wanneer we naar de TCO van bijvoorbeeld elektrische voertuigen kijken dan zien we dat die vaak veel voordeliger uitkomt dan voor dieselwagens. Als deze applicatie gelanceerd wordt, zal het hopelijk bedrijven aansporen om na te denken over de vergroening van hun wagenpark. Niet enkel als een onderdeel van hun ‘greenwashing’16, maar veeleer van maatschappelijk verantwoord ondernemen17.
16 Greenwashing is het zich groener of maatschappelijk verantwoorder voordoen dan een bedrijf of organisatie daadwerkelijk is. Men doet alsof men weloverwogen met het milieu en/of andere maatschappelijke thema's omgaat, maar dit blijkt vaak niet meer dan 'een likje verf'. (Wikipedia) 17 Maatschappelijk verantwoord ondernemen (mvo), duurzaam ondernemen of maatschappelijk ondernemen is een vorm van ondernemen gericht op economische prestaties (profit), met respect voor de sociale kant (people), binnen de ecologische randvoorwaarden (planet): de triple-P-benadering. (Wikipedia)
8
DANKWOORD
Onze promotor Luc Vandeurzen heeft ons niet alleen op weg gezet, maar heeft er voortdurend over gewaakt dat we op de rechte weg bleven. Als we op onverwachte hindernissen stootten, stond ook Jeroen Van Aken altijd klaar om bij te sturen. Vanuit TCOPlus lieten Bart Vanham en Hans Damen ons toe ons werk te maken alsof we al in een echte praktijksituatie stonden.
16
9
REFERENTIES
Belgische Federale Overheidsdiensten. (2015, januari 11). Belasting op voordelen in natura. Opgeroepen op januari 11, 2015, van Portaal belgium.be: http://www.belgium.be/nl/belastingen/inkomst enbelastingen/particulieren_en_zelfstandigen/b elastbaar_inkomen/voordelen_van_alle_aard/ Bond Beter Leefmilieu. (2014, november 30). Stop verloning met wagens en diesel. Opgeroepen op januari 11, 2015, van Petities24: http://www.petities24.com/stop_verloning_met _wagens_en_diesel Chaffer, J., & Swedberg, K. (2011). Learning jQuery create better interaction, design and web development with simple JavaScript techniques. Birmingham: Packt Publishing. Dewar, M. (2012). Getting started with D3. Sebastopol, Californië: O'Reilly. EllisLab, Inc. (2015, januari 11). Server Requirements. Opgeroepen op januari 11, 2015, van CodeIgniter User Guide: https://ellislab.com/codeigniter/userguide/general/requirements.html Febiac. (2013, december 31). Datadigest 2014 - 2.C.1. Opgeroepen op december 28, 2014, van Febiac Belgische automobiel- en tweewielerfederatie: http://febiac.be/statistiques/2014/2.C.1.%20Par c%20des%20v%E9hicules%20au%2031%20d %E9cembre%20de%20l%27ann%E9e%20corr espondante.xls Febiac. (2014). Datadigest 2014 - 2.B.4. Opgeroepen op december 28, 2014, van Febiac Belgische automobielen tweewielerfederatie: http://febiac.be/statistiques/2014/2.B.4.%20Ev olution%20des%20immatriculations%20de%2 0voitures%20neuves%20par%20type%20de% 20propri%E9taire%20et%20par%20r%E9gion .xls Febiac. (2014). Datadigest 2014 - 2.C.5. Opgeroepen op december 28, 2014, van Febiac Belgische automobielen tweewielerfederatie: http://febiac.be/statistiques/2014/2.C.5.%20Ev olution%20du%20parc%20des%20voitures%2 0par%20type%20de%20carburant.xls Franklin, J. (2013). Beginning jQuery. Berkeley, New York, Californië, New York: Apress ; Distributed to the book trade worldwide by Springer Science+Business Media New York. Harding, M. (2014, december 2). Personal Tax Treatment of Company Cars and Commuting Expenses. OECD Taxation Working Papers. Meeks, E. (2014). D3.js in action. Shelter Island, New York: O'Reilly Media. Nielsen, J. (2010, juni 21). Website Response Times. Nielsen Norman Group. Oracle Corporation and/or its affiliates. (2015, januari 11). MySQL Documentation: MySQL Reference Manuals. Opgeroepen op januari 11, 2015, van MySQL: http://dev.mysql.com/doc/
phpMyAdmin contributors. (2015, januari 11). phpMyAdmin. Opgeroepen op januari 11, 2015, van phpMyAdmin: http://www.phpmyadmin.net/ Q-Success. (2015, Januari). Usage Statistics and Market Share of Server-side Programming Languages for Websites. Opgeroepen op Januari 11, 2015, van W3Techs: http://w3techs.com/technologies/overview/pro gramming_language/all SpryMedia Ltd. (2015, januari 11). DataTables Table plug-in for jQuery. Opgeroepen op januari 11, 2015, van DataTables: http://www.datatables.net/ Upton, D., Ellis, R., & Allard, D. (2007). CodeIgniter for rapid PHP application development. Birmingham, United Kingdom: Packt Pub. Vanherle, M. (2014, februari 2). Niet méér belasting op bedrijfswagens, maar lagere lasten op lonen. Opgeroepen op december 24, 2014, van De redactie: http://deredactie.be/cm/vrtnieuws/economie/1. 2107633 Zhu, N. Q. (2013). Data visualization with D3.js cookbook. Birmingham, United Kingdom: Packt Pub.
