Kevin Van Den Haute

Voor VDK was een volledige ombouw van de oude applicatie naar de nieuwe manier van werken nodig. De schermen dienden van nul af aan opgebouwd te worden op basis van een document met de specificaties en een demo van de oude applicatie. Dit houdt geldafhaling, code wijzigen, overschrijvingen, bestendige opdrachten, .. in.

AXA wou de mogelijkheid geven aan hun klanten om voor een snelle geldafhaling te kiezen en zo enkele stappen door menu's over te slaan. De flow moest hiervoor aangepast worden en bestaande schermen dienden uitgebreid te worden om met verschillende omstandigheden om te gaan (bv. de terug-knop die afhankelijk van de wijze dat er naar het scherm "geldafhaling" genavigeerd werd een andere actie diende uit te voeren).

Om aan potentiële klanten de diverse mogelijkheden te tonen van de applicatie heb ik enkele schermen opgebouwd. Zaken zoals functietoetsen (de toetsen naast het scherm bij sommige geldafhaalmachines), dynamische achtergronden (van een random achtergrond telkens een scherm geladen wordt tot een animatie van diverse achtergronden die om de x aantal seconden over faden in elkaar).

Meer informatie volgt nog.

De eerste versie was heel eenvoudig. Één pagina HTML, één stylesheet en een snuifje JavaScript. De layout was op basis van Foundation dat de responsiveness verzorgde.

Toen leerde ik Bootstrap kennen, en na wat research en geëxperimenteer besloten dat bij een volgende versie Bootstrap de basis zou worden. Ondertussen kwam ook Symfony2 piepen. Ondanks dat er reeds talrijke frameworks op de markt waren ben ik nooit 100% overtuigd geweest van een framework. Er waren altijd te veel zaken waarvan ik dacht "goh, dat is het toch ook niet". Misschien een onterechte mening, maar ik bleef toch bij mijn eigen library (framework kon je het niet noemen). Maar Symfony2 bracht daar verandering in. De nodige tijd uitgetrokken om het van dichtbij te bekijken, en wat ik zag stond me verdomd goed aan. En toen is het idee gekomen om deze website op basis van Symfony2 te bouwen. Een beetje overkill, akkoord, maar ik zag het als een mooi experiment. En de perfecte gelegenheid om tevens Bootstrap te implementeren. Even overlopen:

• Composer: via Composer onderhoud ik de vendors waar ik gebruik van maak. Bootstrap, jQuery, Modernizr, yuicompressor, ..
• Less: in combinatie met nodejs worden *.less bestanden mooi gecompileerd tot *.css bestanden.
• yuicompressor: zowel de stylesheets als de JavaScript-bestanden worden netjes geminified zodat ze snel genoeg laden.
• Translatable: omdat meertaligheid iets is wat in meer en meer websites toegepast wordt, wou ik dat bij wijze van experiment ook eens uitproberen in Symfony2. Symfony2 biedt voldoende ondersteuning voor plain tekst wat dat betreft, maar wat met inhoud die uit een databank komt? Ik had reeds een eigen methode om dat te bereiken, maar in Symfony2 wou ik het in combinatie met Doctrine proberen. En de Doctrine extensie Translatable is een uitstekende hulp. Ik heb als tweede taal Lipsum genomen (klik hier om over te schakelen).
• Responsive design: bezoek deze website via je smartphone of tablet, of resize even je browser. Wat je te zien krijgt is niet plots een andere pagina, het is de CSS die met behulp van media queries de weergave aanpast zodat de gebruiker een aangenamere ervaring krijgt tijdens zijn bezoek.

Meer informatie volgt nog.

Om klanten op een snelle accurate manier te kunnen verwittigen moest dit nodig zijn werden de Preferences uitgebreid zodat e-mail- en gsm-instellingen beheerd kunnen worden. De klant kan zijn / haar e-mailadres of gsmnummer toevoegen en dient dat dan te activeren, zodat wij er kunnen van uit gaan dat het gebruikte e-mailadres of gsmnummer geldig is. Na het toevoegen krijgt de klant dus een e-mail of SMS toegestuurd, waarin zich een validatiecode bevindt. De klant kan deze code onmiddellijk invoeren via de Preferences, of kan dat een volgende keer doen na het aanmelden waar een overlayer (geen popup) getoond wordt om dit te doen. Eens gevalideerd kan de klant zijn / haar e-mailadres of gsmnummer gebruiken om notificaties te ontvangen, bv. wanneer een bepaald beursaandeel een opgegeven waarde bereikt heeft.

Dit alles werd bereikt door middel van nieuwe objecten die gebruik maakten van een basis-layer, enkele nieuwe velden en stored procedures in de databank en modulaire HTML-bestanden die een dubbele functie hebben (bv. gewoon in de website, of in een overlayer) en waar de weergave gemanipuleerd werd door middel van CSS. Het Application Development-team zorgde voor het versturen van de e-mails en SMS'en, de rest heb ik mogen uitvoeren. Één van de leukste projecten die ik heb gedaan.

Preferences binnen de beveiligde website is een niet te onderschatten onderdeel. De klanten kunnen hier diverse zaken beheren welke invloed hebben op hun ervaring met de rest van de website. Onder Preferences bevinden zich onder andere het wijzigen van de wachtwoorden, de contracten, de real-time instellingen van de koersen, de kennis-testen, e-mail- en gsm-instellingen, alerts, … Tussen al deze verschillende soorten instellingen zat er veel code die keer op keer opnieuw gebruikt werd. Van het oproepen van stored procedures tot de weergave naar de klant toe.

Na een grondige analyse heb ik een refactoring doorgevoerd. Ik heb een object aangemaakt dat dienst doet als basis-layer voor alle verschillende onderdelen qua instellingen. Daarna heb ik per onderdeel een object aangemaakt dat die basis-layer extend. Zo kwam ik uiteindelijk tot het resultaat dat de controller er plots veel overzichtelijker uit zag en dat er geen code meer dubbel stond. Hetzelfde heb ik ook voor de view gedaan. In plaats van hele blokken HTML dubbel te gebruiken, heb ik een basis template gemaakt die door elk verschillend onderdeel gebruikt kan worden waardoor deze template-bestanden geen enkele overbodige HTML-code meer bevatten. Gedaan met 20 bestanden te wijzigen om 1 bug te fixen.

Het intranet was zowel op vlak van code als look and feel rijp voor een grondige update. Vele pagina's zagen er inconsistent uit en de achterliggende code was bijna om van te wenen. Daarom heb ik samen met een collega van het webteam, Stefan Vunckx, intranet duchtig onder handen genomen. Voor de weergave en interactie met de gebruiker hebben we Twitter Bootstrap geïntroduceerd. Op die basis hebben we nog wat extra's toegevoegd zoals onder andere extra knoppen, AJAX-dialog, … De reeds aangepaste applicaties zijn nu een pak duidelijker in gebruik. Qua code hebben we alles omgezet naar objecten, waardoor gebruik en onderhoud veel duidelijker zijn en waardoor deze op de 3 websites toepasbaar zijn.

Klanten kunnen infosessies volgen, waar ze meer uitleg krijgen over verschillende onderwerpen. Inschrijven voor een infosessie gebeurt via de publieke website. Infosessies worden over heel het land gehouden, op gekende openbare locaties. Om de klanten het eenvoudiger te maken een infosessie te volgen, is er beslist om webinars in het leven te roepen. Dat zijn online infosessies die klanten gewoon via hun pc kunnen volgen.

De bestaande infosessie-applicatie diende dus uitgebreid te worden zodat ook webinars kunnen beheerd worden. Omdat deze code al vrij oud was en nog niet volgens de huidige afspraken werkt (MVC) werd er besloten om de infosessie-applicatie te refactoren. Dat zorgt niet alleen voor beter leesbare code, maar ook voor eenvoudigere uitbreiding indien nodig. Hiervoor heb ik een nieuwe database-structuur bedacht en tevens een conversie-script gemaakt om de reeds bestaande data correct om te zetten naar de nieuwe structuur. Op de publieke site veranderde er qua look and feel niet veel, buiten dat er nu ook webinars tussen de infosessies staan. Op intranet werd de lijn van Twitter Bootstrap doorgetrokken waardoor het beheer van de infosessies veel intuïtiever en vlotter verloopt.

Advice is een applicatie die de klanten helpt in het traden van aandelen. Op basis van professioneel verkregen advies wordt de portefeuille van de klant geanalyseerd en wordt er raad op maat gegeven. Zo probeert Advice voor een evenwicht in de portefeuille te zorgen, zodat een klant bv. de raad krijgt om misschien toch ook technologie-aandelen te kopen in plaats van enkel maar bankaandelen.

Met de hele berekening die het advies bepaalt heb ik niets te maken, enkel met de implementatie er van. Op het intranet heb ik weliswaar meer werk gehad, want daar moest een methode uitgedokterd worden zodat onze experts kunnen ingrijpen indien nodig. Het dagelijks advies wordt enkel 's nachts verkregen, waardoor de kans bestaat dat bepaalde beslissingen gedurende de dag er voor zorgen dat zo'n advies niet meer strookt met de realiteit. Daarom heb ik een applicatie ontwikkeld waar het bestaande advies kan overruled worden zonder het te wijzigen, zodat er eenvoudig naar een vorige status kan teruggekeerd worden. Onze experts kunnen nu dus zelf advies toevoegen, bestaand advies overrulen of effectief verbergen, waardoor de applicatie op de beveiligde website geen foutief advies geeft aan de klanten.

Voor de Nederlandse vrienden van Keytrade Bank Nederland heb ik talrijke aanpassingen gedaan aan het trading-formulier. Na een grondige analyse van hun kant waren ze tot het besluit gekomen dat de Nederlandse belegger een andere wijze van traden gewoon is in vergelijking met een Belgische belegger. Op de achtergrond bleef alles vrijwel hetzelfde, maar qua presentatie was er een groot verschil. Omdat de te presenteren data ook niet gunstig uit de database kwam heb ik een uitgebreide mapping moeten toepassen zodat deze te gebruiken was om te presenteren op de manier die zij het wouden.

Klanten houden van historiek. Ze hebben graag een overzicht van wat ze reeds getrade hebben, en hebben daar ook graag een uittreksel van. Dit bestond reeds, waardoor ik mij kunnen beperken heb tot het onderhouden van deze applicatie. Soms was het al eens nodig om extra gegevens toe te voegen aan de PDF's die on the fly gegenereerd worden, maar het meeste van de gespendeerde tijd aan deze applicatie heb ik besteed aan het debuggen van de gigantische queries. Niet altijd even leuk, maar dat hoort er ook al eens bij.

Aanmelden op de beveiligde website was reeds langer mogelijk, maar de procedure was vrij complex. De klant diende in eerste instantie software geïnstalleerd te hebben van de overheid, diende dan nog diverse instellingen aanpassen in zijn browser en uiteindelijk diende hij / zij ook zijn / haar eID toe te voegen via de Preferences op de beveiligde website. Een hele boterham dus.

Omdat klanten hier heel wat moeilijkheden mee ondervonden werd de eID amper gebruikt als middel om aan te melden. Daarom is er samen met iemand uit het Application Development-team een Java-applet ontwikkeld. De klant diende niet langer software van de overheid te installeren, maar had gewoon een pc met een recente versie van Java nodig. Mijn taak in dit project bestond er in om de applet te integreren in het login-scherm en deze te laten communiceren met de achterliggende databases. Eventuele fouten werden geretourneerd en dienden op begrijpelijke en presenteerbare wijze getoond te worden aan de klant.

Achter heel deze procedure zit een pak logica welke ik hier moeilijk uit de doeken kan doen. Het komt er op neer dat er gekeken wordt voor een match tussen de eID en de aanwezige gegevens. Als het systeem niet 100% zeker is of de eID effectief bij een account hoort, dan krijgt de klant een melding dat er eerst door ons nog iets moet nagekeken worden. Deze aanvragen worden beheerd via een applicatie op het intranet, welke ik ontwikkeld heb. De applicatie toont een overzicht van alle aanvragen, en wat de status er van is. Statussen zijn awaiting validation, pending, active en revoked. Aanvragen die nog niet behandeld zijn krijgen de status awaiting validation. Eens behandeld en goedgekeurd krijgen ze de status pending, waarmee aangetoond wordt dat de volgende actie opnieuw van de klant verwacht wordt. Eens de klant opnieuw geprobeerd heeft en alles in orde is, krijgt de aanvraag de status active. In sommige gevallen kan een aanvraag ook op revoked staan, wat kan betekenen dat de klant bv. probeerde aan te melden met een eID die niet langer geldig is.

Keytrade Pro is een geavanceerd platform voor de meer professionele klanten. Om hier toegang tot de krijgen dien je als klant een aanvraag te doen via de beveiligde website. Die procedure heb ik gerefactored zodat er gebruik gemaakt wordt van een object dat gebruik maakt van andere reeds bestaande objecten (bv. een data object abstraction layer) om het leesbaarder en het onderhoud eenvoudiger te maken.

De Kennisbank bevat alle functiegerichte informatie voor de bankkantoren: personeelsinformatie, productgebonden instructies en procedures, handleidingen voor het gebruik van ICT-toepassingen, informatie over commerciële acties en campagnes, terminologie, wegwijs, Het is de enige bron van informatie voor de bankkantoren, maar ook de medewerkers van het hoofdkantoor vinden er heel wat nuttige informatie in terug.

XML werd uit de databank uitgelezen en presenteerbaar gemaakt met behulp van XSLT. De belangrijkste wijziging was de overgang naar unicode aangezien KBC ook actief ging worden op onder andere de Tsjechische markt en er dus vreemde karakters zoals č, ď, ň, ů, … dienden getoond te worden.

Mijn tijd als ontwikkelaar voor de KBC website was vrij beperkt (enkele maanden). Het was vooral ontwikkelen op de interne applicatie waar de inhoud van de website kon beheerd worden, en niet per se op de KBC website zelf. Ik heb hier ook een eerste ervaring met Documentum opgedaan.

Dokeos is een opensourcewebapplicatie voor e-learning en cursusbeheer, ook wel elektronische leeromgeving genoemd. Mijn werk was voornamelijk debuggen van bestaande applicaties binnen Dokeos.

KlasCement is een portaal voor en door leerkrachten. Leerkrachten kunnen daar lesmaterialen met andere leerkrachten uitwisselen, ervaringen delen en zo veel meer. Omdat de reeds bestaande website wat verouderd was en vooral qua structuur slachtoffer was van zijn eigen succes, was een grondige refactoring broodnodig. Er moest een KlasCement 2.0 komen. Om het uitwisselen van leerobjecten te vereenvoudigen werd tevens gekozen om SCORM (Sharable Content Object Reference Model) te volgen. Er werd een database-structuur uitgedokterd en een script gebouwd om de bestaande leerobjecten om te zetten naar deze nieuwe structuur. De website kreeg een nieuwe duidelijke look and feel en is een grote verbetering qua usability.