Online gas en elektriciteit aanvragen op Sibelga.be

Sibelga website homepaginaSibelga is dé distributienetbeheerder voor elektriciteit en gas in het Brussels Hoofdstedelijk gewest. Marlon heeft voor Sibelga een nieuwe website ontworpen en ontwikkeld. Deze website is onlangs online gegaan.

De website moest vooral dynamisch zijn. Om deze reden werden er voor verschillende diensten workflows geïmplementeerd. Zo kan men bijvoorbeeld precies uitrekenen wat een nieuwe aansluiting of een nieuwe meter kost. Ook het aanvragen van een aansluiting of meter is in de nieuwe website een koud kunstje geworden. Bezoekers volgen een eenvoudige flow waarmee ze uiteindelijk een aanvraag kunnen doen. Meerdere aansluitingen kunnen aangevraagd worden. Deze werken worden als het ware in een ’shoppingbasket’ gelegd waarna er verder ‘geshopt’ kan worden. Omdat er veel technische termen en begrippen worden gebruikt staat er indien nodig de uitleg erbij.

De tools zijn niet alleen voor particulieren, ook professionele en industriële klanten kunnen hier hun gas of elektriciteit aansluiting aanvragen. Samen met Marlon heeft Sibelga deze flows ontwikkeld. Hierdoor zijn ingewikkelde formulieren ineens een stuk overzichtelijker!

Marlon ontwikkelt de nieuwe Mijn/Vacature

Voor vacature.com werkte Marlon de voorbije maanden de nieuwe Mijn/Vacature af. Mijn/Vacature laat je toe

  • online een CV aan te maken (manueel, door het importeren van een Microsoft Word document of door je gegevens uit LinkedIn op te halen) en zo gevonden te worden door werkgevers
  • vacatures te ontvangen op maat van je profiel
  • online te solliciteren

Mijn/VacatureJobs & Careers zorgde zelf voor analyse en design. Marlon zorgde voor de volledige ontwikkeling op maat van dit onderdeel van de website. Op basis van de analyse van Jobs & Careers bouwden we deze applicatie terug van nul op. De vorige versie van Mijn/Vacature werd volledig vervangen met de bedoeling verdere productontwikkeling mogelijk te maken.

Specifiek voor deze applicatie zijn o.a. integratie tussen PHP en Microsoft SQL Server, het gebruik van de LinkedIn API, integratie met verschillende SOAP webservices (voor gepersonaliseerde zoekopdrachten, Word document parsing, CV updates, online solliciteren, …) en integratie met het CRM systeem van Vacature.

Ook de migratie van alle gegevens uit de vorige versie van Mijn/Vacature (profielen, cv’s, gepersonaliseerde zoekopdrachten, diploma’s, werkervaringen, …) naar de nieuwe versie werd door Marlon afgewerkt.

Ondertussen is al een nieuwe versie van deze Mijn/Vacature gelanceerd. Mijn/Vacature is een onderdeel van de vacature.com site dat constant evolueert.

3 systemen die je webapplicatie een pak flexibeler maken

De website van de Vlaamse Diabetes Vereniging, bijna een jaar geleden gelanceerd, is een website én extranet met een zeer uitgebreide functionaliteit. De website zelf bestaat uit content (nogal wiedes), een shop, en websites voor de lokale afdelingen. Daarnaast is alles beheerbaar door de vereniging zelf, en kunnen de vereniging en bepaalde bestuursleden van plaatselijke afdelingen aan ledenbeheer doen.

Een beslissing die we zeer vroeg bij de ontwikkeling hebben genomen, is om vooraf op 3 manieren flexibiliteit in te bouwen: 3 plug-in-systemen, die binnen de kern van de applicatie draaien, en die er voor zorgen dat we snel extra systemen, tools of aanpassingen kunnen inpassen, zonder aan de kern te raken:

  • jobs: een job is een stuk functionaliteit dat op een vast tijdstip of om de zoveel tijd wordt uitgevoerd;
  • rendering helpers: plug-ins die de HTML van alle pagina’s of een bepaald type pagina herwerken, vlak voordat die naar de browser wordt gestuurd;
  • listeners: plug-ins die luisteren naar en reageren op welbepaalde acties binnen de website en het extranet, zoals het aanmaken van een pagina, het plaatsen van een bestelling, een lid dat zich aanmeldt.

Jobs

Binnen de webapplicatie hebben we een ‘job’-systeem gebouwd: een systeem dat ons toelaat extra functionaliteit toe te voegen, die op een welbepaald tijdstip (bijvoorbeeld elke dag om 8u30) of om de zoveel tijd (bijvoorbeeld om de 3 minuten) wordt uitgevoerd.

De kerntaak van het systeem is: de plug-ins die jobs bevatten inladen en deze uitvoeren, volgens de bepaalde instellingen (aantal keren per dag of om de zoveel minuten, in een apart proces of niet).

Eenmaal dat de motor van dit systeem er was, konden we achteraf eenvoudigweg jobs toevoegen. Op dit ogenblik zijn er 6 jobs actief op de website:

E-mail queu job

Her en der in de website en het extranet zijn er pagina’s of formulieren die e-mails uitsturen: het formulier om lid te worden, de tell-a-friend, de webshop, enz.

Om de applicatie onafhankelijk te maken van het proces dat de e-mails effectief uitstuurt (de SMTP-server) maken we gebruik van een e-mail queu. Als bijvoorbeeld een lid een bestelling plaatst, wordt de e-mail niet onmiddelijk uitgestuurd door het systeem dat de bestelling afhandelt, maar wordt dat bericht in een wachtrij geplaatst.

Laten we de e-mail namelijk rechtstreeks vertrekken en is op dat moment de SMTP-server onbeschikbaar, zou in het geval van de webshop de bestelling niet kunnen worden geplaatst.

De e-mail queu job gaat met een vast bepaald interval in de wachtrij kijken of er e-mails moeten worden verstuurd  en zorgt voor de volledige afhandeling: SMTP-server contacteren, e-mail uitsturen, eventueel optreden als de SMTP-server niet beschikbaar is (we bepalen het aantal mogelijke retries per e-mail), de applicatie verwittigen als de e-mail effectief is uitgestuurd, eventueel extra functionaliteit uitvoeren wanneer de e-mail wel of niet verstuurd is, enz.

E-mail Nieuwsbrief-job

Deze job kijkt of er campagnes voor de e-mailnieuwsbrief beschikbaar zijn. Indien een campagne mag worden verstuurd, zorgt deze job voor het aanvullen van de e-mail queu, die op zich dan weer het uitsturen verzorgt, met de nodige afhandelingen: namelijk het systeem van de e-mailnieuwsbrieven feedback geven over elke verstuurd e-mail: verstuurd, niet verstuurd, fout in het adres van de ontvanger, …

Blog feed job

Voor de jongeren binnen de vereniging werd een blog opgezet, in WordPress. De titels van de blogartikels worden op de homepagina van de eigenlijke website getoond. Hier bestaat weer het gevaar dat de blog niet beschikbaar is en dus de nodige links naar artikels niet op de website kunnen geladen worden. Vandaar het loskoppelen en het gebruik van een job die om de zoveel minuten de RSS feed van de blog inleest en de nodige aanpassingen doet op de website.

Search engine indexer en spell check indexer job

De search engine van de website werkt op basis van Lucene.NET, een .NET port van de Java text search engine.

De website op zich bestaat uit heel wat dynamische pagina’s (deze worden regelmatig aangepast), maar ook statische bestanden (.ascx files, of anders gesteld: .NET controls) waarin teksten staan die nooit of amper moeten aangepast worden. Bij het aanmaken, aanpassen of verwijderen van alle dynamische pagina’s, wordt de search engine verwittigd dat de index moet worden aangepast (zie het Listeners systeem). Wijzigingen in de statische bestanden kan de search engine niet detecteren.

Daarom hebben we een eigen crawler gebouwd die vertrekt vanop de homepagina en zo van link tot link, door de website loopt en de nodige pagina’s indexeert en toevoegt of aanpast in de index van de search engine.

Daarnaast draait er een tweede job die nodig is om de search engine nog beter te maken: een spell checker job. Dit laat ons toe suggesties te geven bij fout getypte zoektermen. De index van de search engine, wat eigenlijk een lijst is van alle woorden die op de website staan, wordt daarom door deze job om de zoveel uur overlopen en alle unieke woorden in de index worden opgelijst en bewaard. Zo komen we tot de ‘Bedoelde je xxx’-suggesties.

Externe applicatie check job

De website en het extranet communiceren continu met een extern systeem dat door de VZW wordt gebruikt om haar ledenbestand te beheren. Om problemen met de communicatie met dit systeem snel te onderkennen, controlleren we door middel van een job de beschikbaarheid van die externe applicatie.

Rendering helpers

De VZW heeft meer dan 20 plaatselijke afdelingen die elk beschikken over een klein onderdeel binnen de website dat ze zelf kunnen beheren. Het centrale secretariaat is niet in staat om voortdurend te controlleren of de pagina’s correct zijn opgemaakt, en of ingebrachte inhoud consistent is met de layout van de rest van de website. Daarom hebben we de Rendering helpers gebouwd.

De Rendering Helpers is een systeem dat, ook weer door middel van plug-ins, de output die naar de browser wordt gestuurd, aanpast indien nodig. Dus ook dit is een systeem dat vandaag een aantal modules bevat en dat makkelijk kan worden uitgebreid.

De Rendering Helpers die vandaag actief zijn op de site zorgen er bijvoorbeeld voor dat:

Te grote beelden

Beelden die worden ingevoegd door iemand van een plaatselijke afdeling, en die te groot zijn om binnen de layout te passen, worden aangepast en on the fly verschaald. De mensen die die pagina’s beheren hebben meestal niet de nodige tools om foto’s zelf te bewerken. Daarom stoppen ze vaak digitale foto’s met hun originele breedte en hoogte in een pagina. Het effect is dat het beeld, kleiner gemaakt om in de layout te passen, niet mooi is, en het beeld veel te zwaar is (in kilobytes) om in een website goed te werken. De Rendering Helpers zorgen dat het beeld dynamisch kleiner wordt gemaakt, zodat de kwaliteit hoger ligt en de persoon die de pagina bezoekt geen te groot bestand moet inladen.

Tabellen voor layout omzetten naar <div/> elementen

De website bevat geen tabellen om de layout mee te bepalen (met layout bedoelen we hier welke elementen waar op de pagina staan). Maar voor de mensen die de inhoud ingeven, is het gebruik van tabellen makkelijk om verder te gaan dan de standaard vloeiende bladspiegel: tekst die van boven naar onder loopt. Daarom hebben we Table Layout Helper gebouwd. Deze zet, bij het opbouwen van de pagina, en net voor deze naar de browser wordt gestuurd, de layout die in een tabel zit om naar HTML-code die wel de webstandaarden respecteert.

HTML-optimalisatie

Naast bovenstaande interventies worden o.a. lege paragrafen verwijderd, <font/> tags vervangen, enz.

Dergelijke optimalisatie is echter nooit afgerond. Steeds ondervinden we opnieuw dat pagina’s gevuld zijn met incorrecte HTML-elementen of -structuren. We bouwen dus steeds extra Rendering Helpers die dergelijke fouten gracieus oplossen.

Listeners

Listeners zijn een concept dat bij de meeste programeertalen al lang bestaat. Voor deze applicatie hebben we binnen de basisfunctionaliteit een gelijkaardig principe ingevoerd: nieuwe systemen (plug-ins) die worden toegevoegd, luisteren naar bepaalde acties binnen de applicatie. Wordt die actie uitgevoerd, dan worden alle luisteraars verwittigd en krijgen ze de nodige gegevens.

Zo vuren we verschillende plug-ins aan als een lid zich aanmeldt, als een pagina wordt aangemaakt of aangepast of verwijderd, als een bestelling wordt geplaatst, enz.

Een dergelijk systeem zorgt er opnieuw voor dat er  aan de basiswerking niets moet worden gewijzigd. De applicatie houdt zich bezig met de essentie. Andere systemen schakelen zich in en luisteren dus naar wat binnen de applicatie gebeurt.

Content Indexing Listeners

Een van de listeners die actief is binnen de applicatie ‘luistert’ naar nieuw bewaarde inhoud, inhoud die gewijzigd wordt en inhoud die verwijderd wordt. Zo wordt de Index die de search engine gebruikt steeds up to date gehouden.

Conclusie

Kortom, 3 eenvoudige systemen met één gezamelijk doel: flexibiliteit. De website en webapplicatie, zoals die vandaag is gebouwd, is klaar voor uitbreidingen van morgen.