Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding...

34
Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014 1 Hogeschool-Universiteit Brussel Academiejaar 2013-2014 Toegepaste Informatica Naam: Ward De Smedt Studentennummer: 243539 Vak: Stage

Transcript of Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding...

Page 1: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

1

Hogeschool-Universiteit Brussel

Academiejaar 2013-2014

Toegepaste Informatica

Naam: Ward De Smedt

Studentennummer: 243539

Vak: Stage

Page 2: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

2

Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland gewerkt voor een jong

bedrijf genaamd Process Genius. In deze paper beschrijf ik het werk en de ervaringen die ik heb

opgedaan met deze unieke kans.

Naast het toelichten van het bedrijf en mijn werk zal ik ook enkele focuscompetenties uiteenzetten

die ik daar al dan niet heb verbeterd.

Page 3: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

3

Inhoudsopgave

Inleiding ................................................................................................................................................... 2

Inhoudsopgave ........................................................................................................................................ 3

1 Deel 1: algemene beschrijving van de stage-opdracht ................................................................... 4

1.1 Het bedrijf ................................................................................................................................ 4

1.2 De producten ........................................................................................................................... 4

1.3 Klanten..................................................................................................................................... 5

1.4 Het project ............................................................................................................................... 5

2 Deel 2: Technische uitwerking......................................................................................................... 6

2.1 Stap 1: Eerste OpenLayers implementatie .............................................................................. 6

2.2 Stap 2: Eerste Drupal Module ................................................................................................. 8

2.3 Stap 3: Module met Openlayers .............................................................................................. 9

2.4 Stap 4: Layout verzorgen ....................................................................................................... 10

2.5 Eindresultaat ......................................................................................................................... 11

3 Deel 3: Kritische SWOT-analyse van het resultaat ........................................................................ 13

3.1 Strengths ............................................................................................................................... 13

3.2 Weaknesses ........................................................................................................................... 13

3.3 Opportunities ........................................................................................................................ 14

3.4 Threats ................................................................................................................................... 14

3.5 Samenvattend schema .......................................................................................................... 14

4 Deel 4: Focuscompetenties ........................................................................................................... 15

4.1 Algemene competenties ....................................................................................................... 15

4.2 IT competenties ..................................................................................................................... 16

5 Bijlagen .......................................................................................................................................... 17

5.1 Timesheet .............................................................................................................................. 17

5.2 INSTALL.txt............................................................................................................................. 18

Page 4: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

4

1 Deel 1: algemene beschrijving van de stage-opdracht

1.1 Het bedrijf Process Genius is een klein bedrijf uit Joensuu, Finland. Het is gespecialiseerd in “Cutting edge utility

software”. Met een team van zo’n 8 werknemers werken ze aan drie verschillende producten.

Het bedrijf is opgericht in 2011 en is dus nog heel jong. Het heeft als doel “next generation” sales en

training tools aan te bieden aan industriële bedrijven.

Met een verfrissend perspectief en cutting edge technologie willen ze een boost geven aan de

prestaties en efficiëntie voor sales en klantenrelaties in een sector die traditioneel traag en

ouderwets te werk gaat. De oprichters zijn ervaren sales professionals en ingenieurs die weten wat

er beter kan worden gedaan in deze sector op het vlak van sales en presentatie.

Sinds 2012 werkt Process Genius nauw samen met Mental Moustache. De kantoren van beide

bedrijven liggen vlak bij elkaar. Mental Moustache ontwikkelt voornamelijk videogames voor mobiele

platformen (iPod, iPad, Android toestellen,...) en zorgt voor een deel van de grafische grondstoffen

voor de producten van Process Genius.

Het IT-team in Process Genius is niet enorm groot. De lead system developer is Janne Pekkale, tevens

mijn stage mentor. Hij werkt samen met Mikko, die zich voornamelijk bezighoudt met interface

design. Tijdens mijn stage heeft ook een andere interim-student een jobaanbieding gekregen en is

daarop ingegaan, wat de teller van het IT-team op 3 zet. Met hen heb ik het nauwst moeten

samenwerken gedurende vier maanden.

1.2 De producten Een korte voorstelling van de 3 producten die worden ontwikkeld door Process Genius:

PGtool is een webservice dat bedrijven helpt in het sales process. Het stelt producten voor in de

omgeving waarin ze worden toegepast. Zo kan een verkoper op meeting concrete informatie tonen

over hoe en waar de aangeboden producten van pas komen voor de koper. Ook alle bijbehorende

informatie (documenten, handleidingen, presentaties) wordt beheerd door het platform zodat deze

steeds binnen handbereik zijn. Daarbuiten zijn er enkele features zoals de documentenbank en het

toevoegen van ervaringen bij producten en klanten.

Het tweede product, PGplant, is een administratieve tool om een industriele installatie te overzien.

Het stelt een fysieke fabriek voor als virtueel model, zodat de gebruiker ieder (sub)proces kan

exploreren en als het ware de fabriek kan doorlopen. Alle verwante documentatie,

machinehandleidingen, procesbeschrijvingen en dergelijke zijn in deze webservice meteen

beschikbaar. Deze tool kan gebruikt worden voor PR, training van werknemers of om fouten en

inefficiënties op te sporen of zelfs te plannen hoe een fabriek kan worden aangepast.

PGedu is het nieuwste product dat zal uitkomen later dit jaar. Het zal gericht zijn op professionele

onderwijsinstellingen en personeelsopleidingen. Het stelt industriële faciliteiten en processen voor,

samen met de nodige documentatie, presentaties en audiovisueel materiaal.

Page 5: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

5

1.3 Klanten De grootste en eerste klant van Process Genius is Flowrox. Dit is een Fins bedrijf dat zich specialiseert

in industriële ventielen en pompen die kunnen worden toegepast in zware processen met bijtende

en schurende producten. Bijvoorbeeld het maken van droog cement. Process Genius ontwikkelt

PGtool voor hen (genaamd FlowroxPro) en in de nabije toekomst ook PGplant.

Daarbuiten zijn enkele universiteiten geïnteresseerd in PGedu en krijgt het bedrijf meer en meer

internationale aantrekkingskracht door de goede feedback van Flowrox. Door het aantal werknemers

uit te breiden, vooral in het IT-team, zal Process Genius spoedig voor meerdere grote klanten kunnen

ontwikkelen.

1.4 Het project Het project waar ik het grootste deel van mijn tijd aan besteed heb was voor het product PGtool,

specifiek voor FlowroxPro, de PGtool in ontwikkeling voor Flowrox. FlowroxPro is reeds in gebruik

voor een select aantal werknemers en enkele weken na het einde van mijn stage zouden deze enkele

tientallen moeten worden uitgebreid naar enkele honderden met de beta-release.

Mijn project bestond eruit een alternatieve methode te ontwikkelen om een proces en de

bijbehorende application points weer te geven. Concreet is dit een afbeelding van het proces waarop

ingezoomd, uitgezoomd en genavigeerd kan worden door middel van de muis of de pijltjes op het

toetsenbord. De afbeelding wordt gemaakt door de ingenieurs van Process Genius in samenwerking

met ingenieurs van Flowrox. Zoals een kaart worden hier dan plaatsen gemarkeerd met kleine

afbeeldingen of labels. Door op deze afbeeldingen te klikken wordt extra informatie weergegeven,

bijvoorbeeld uitleg over dat deel van het proces, of welk product door Flowrox wordt aangeboden

dat daar kan worden toegepast.

De methode die reeds ontwikkeld was (en gebruikt werd) is van de grond af gemaakt door Process

Genius. Deze maakt gebruik van eigen Javascript methodes voor het weergeven van en navigeren

over de kaart. Het was ook ingebouwd in de drupal installatie, in plaats van een module te hebben

die kan worden geïnstalleerd of verwijderd.

Hier zijn enkele nadelen aan, zoals het feit dat elke nieuwe feature voor de pagina van “scratch”

moet worden ontwikkeld. Het is ook veel moeilijker om een ingebouwde pagina te verplaatsen van

testomgeving naar een andere installatie voor deployment.

Mijn taak was om hier een nieuwe versie van te maken, gebruik makend van de Open Source

javascript-library genaamd “OpenLayers” en dit in de vorm van een module die gemakkelijk van de

ene naar de andere installatie kan worden verplaatst om het ontwikkelingsproces te versnellen. Het

project werd opgedeeld in vier delen:

1. Het maken van een alleenstaande testversie van een OpenLayers implementatie (zonder drupal) met behulp van PHP.

2. Het maken van een Drupal module, zonder externe library of interne drupal informatie 3. Samenbrengen van de eerste stappen, ontwikkelen van een drupal module die de informatie

uit de drupal installatie haalt en weergeeft in een implementatie van OpenLayers. 4. Opschonen van de weergave, rekening houdende met het bedrijfsbeleid van Flowrox

(kleurenschema, logo’s, afbeeldingen...)

Page 6: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

6

2 Deel 2: Technische uitwerking Het beschrijven van de technische uitwerking zal ik stap voor stap doen, beginnende met mijn eerste

kennismaking met OpenLayers en eindigend met het opschonen van de layout van het eindproduct.

Tijdens de projectontwikkeling had ik toegang tot mijn eigen werkstation, geleverd door Process

Genius. Hierop kon ik een webserver installeren zodat ik alles eerst lokaal kon ontwikkelen en testen,

om het dan over te zetten naar een “sandbox” server, met een omgeving gelijkaardig aan die waarin

het eindproduct zal functioneren. Op deze sandbox konden de andere programmeurs ook mijn werk

zien en zonodig bekritiseren of aanpassen.

2.1 Stap 1: Eerste OpenLayers implementatie OpenLayers is een open source javascript-library die gratis kan worden gebruikt, ook voor

commerciële doeleinden. Deze technologie gebruiken was een vereiste voor het eindproduct en

omdat ik het al gewend ben te werken met Javascript leek dit de gemakkelijkste instap.

Op mijn lokale computer werkte ik eerst een klein systeem uit zodat afbeeldingen konden worden

geüpload, met een beschrijving en een titel. Dit werd allemaal opgeslagen in een databank.

Daarnaast kwam een klein menu waar men dan een afbeelding uit de databank kon kiezen om weer

te geven. Hier gebruikte ik voor de eerste keer PHP (een programmeertaal voor server-side scripting)

en MySQL met minimale HTML en CSS opmaak.

Eens dit werkte kon ik aan de slag met het weergeven van de gekozen afbeelding door gebruik te

maken van OpenLayers. De documentatie (over de API en onderliggende structuur van de library)

hielpen hier enorm. Eens de afbeelding werd weergegeven met OpenLayers werkte ik de

databankstructuur bij om ook locaties op te kunnen slaan voor iedere afbeelding. Een locatie kon

worden toegevoegd door te klikken op de afbeelding. OpenLayers gaf dan de correcte X en Y

coördinaten, die konden worden opgeslagen. Op de afbeelding kwam dan rond die locatie een

omkadering. Ook een titel, beschrijving en tag werden toegevoegd, om de mogelijkheden wat te

ontdekken.

Page 7: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

7

Het resultaat zag er zo uit:

FIGUUR 1: INGEZOOMD OP EERSTE OPENLAYERS IMPLEMENTATIE

De getoonde kaart omvat eigenlijk heel Europa, hier is ingezoomd op het noordelijke gedeelte (een

standaard OpenLayers feature).

Als laaste stap paste ik hierop Ajax toe, een technologie die communicatie tussen de browser en de

server mogelijk maakt zonder de pagina opnieuw te moeten laden. Zo zullen de knoppen “save” en

“delete” meteen de databank updaten en een weerslag hebben op de pagina, zonder dat de

gebruiker de pagina opnieuw moet opvragen. Voor moderne websites is dit een must, het constant

moeten “refreshen” van een pagina is heel vervelend voor een gebruiker.

Aan deze stap heb ik zo’n 3 weken tijd besteed, wat veel lijkt voor een relatief pover eindresultaat.

Het echte eindresultaat echter is de kennismaking met verschillende nieuwe technologieën. PHP en

Ajax waren volledig nieuw voor mij. MySQL was gelukkig heel gelijkaardig aan MSQL dat ik reeds kon.

De grote hoeveelheid features van OpenLayers maakte het noodzakelijk dat ik tijd vrijmaakte om hier

vertrouwd mee te raken.

Page 8: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

8

2.2 Stap 2: Eerste Drupal Module Na het afwerken van de eerste OpenLayers implementatie intalleerde ik drupal op mijn lokale server.

Dit is een Content Management Systeem dat veel wordt gebruikt voor grote website installaties en is

ook één van de meest gecompliceerde. Met dit systeem (en de documentatie ervan) kunnen

omspringen was cruciaal voor het implementeren van het project.

Voor deze stap werd mij geen concrete opdracht gegeven maar gaven ze mij de vrijheid om alles zelf

te onderzoeken. Door de overweldigende hoeveelheid informatie die over Drupal beschikbaar is

besloot ik mij te focussen op mijn specifieke taak: een module maken.

De ‘getting started’ tutorial van de ontwikkelaars van Drupal over modules gaf me een goede

basiskennis van hoe het systeem in elkaar zit, en hoe een module zich aan een Drupal installatie

“hecht”.

Een module wordt geschreven in PHP, dit is een codetaal die op servers wordt uitgevoerd om

webpagina’s dynamisch te creëren voor ze naar een gebruiker worden gestuurd. Zo’n webpagina

bestaat uit 3 delen: de HTML opmaak, CSS voor layout en javascript voor gebruikersinteractie. Een

module kan dus opgesplitst worden in 2 grote delen. Aan de server-side (PHP en HTML) kan men

berekeningen maken met alle informatie in het systeem. Aan de Client-side (HTML, CSS en Javascript)

ziet de gebruiker het resultaat van deze berekeningen en kan hier uiteindelijk mee gewerkt worden.

Door nog enkele andere online zelfstudies te volgen kwam ik ook in contact met de verschillende

types van modules die mogelijk nuttig waren voor mijn taak : page module, block module en library

module.

De eindresultaten van deze stap waren voornamelijk kleine “hello world” modules, waarbij op

verschillende manieren ongeveer hetzelfde resultaat werd behaald. Aan deze stap heb ik een tweetal

weken gewerkt, voornamelijk aan het doorkruisen van het internet op zoek naar goede bronnen.

Page 9: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

9

2.3 Stap 3: Module met Openlayers Na het opdoen van een goede basiskennis over alle benodigde technologieën was het tijd voor het

echte werk. Mijn stagementor, Janne, bezorgde me een ietwat verouderde kopie van het drupal

systeem dat op de sandbox server stond. Deze kon ik importeren op mijn lokale installatie om met

concrete informatie te werken.

Voor het type module koos ik voor een page module. Dit betekent dat de module het volledige

‘content’ gedeelte van de pagina dicteert. Dit is in tegenstelling tot een block module die een blokje

inhoud creëert dat dan kan worden toegevoegd aan een pagina op een bepaalde plaats (links, rechts,

header, footer...). Een library module heeft geen eigen weergave dus dat was geen optie.

Het grote voordeel van een page module is de eenvoud. Een block module heeft een groot aantal

configuraties, een page module veel minder. Zo houden we de complexiteit van de module minimaal

zonder in te boeten aan features aangezien we toch enkel de hoofdinhoud van een pagina willen

weergeven. Elke pagina die op deze manier wordt aangemaakt door drupal krijgt zijn eigen link. Voor

deze tool werd “(domein)/processviewer” gekozen.

Om een proces weer te kunnen geven moeten we ten eerste weten over welk proces het gaat. Ik

besloot dit te doen via een GET parameter die wordt meegegeven in de URL van de pagina genaamd

‘nid’. Om de processviewer tool te gebruiken moet er dus naar de link /processviewer?nid=X worden

gegaan. De X staat voor het id van het proces dat men wil weergeven.

Dit id is een unieke eigenschap die elk proces heeft. Het is opgeslagen in de databank van drupal. Een

proces wordt opgeslagen als een “node” ofte knooppunt (vandaar nid: node id). Wanneer een

gebruiker deze pagina opvraagt zal de server alle informatie over dit proces inladen, inclusief de

informatie over de gemarkeerde locaties. Hier moest ik zorgvuldig de ingeladen informatie filteren

om zo min mogelijk data door te sturen (en te laten verwerken door de client). Dat helpt om de

laadtijd zo laag mogelijk te houden. Na het genereren van al deze informatie en de webpagina geven

we dit terug aan drupal zodat het systeem de rest van de pagina kan genereren en alles naar de

gebruiker stuurt.

De OpenLayers javascript library werd ingesteld om mee te worden ingeladen voor de gebruiker op

deze pagina samen met de code die ik ontwikkelde om ze aan te spreken. De afbeelding geassocieerd

met dat proces wordt dan weergegeven als map met alle gespecificeerde locaties aangeduid. Op de

locaties kan worden geklikt zodat de zijpanelen openklappen en de gerelateerde informatie getoond

wordt.

Dit inladen, doorspelen en weergeven is waarmee het grootste deel van de code in de module zich

bezighoudt en waar ook het meeste werk is ingekropen. De informatiestructuur van Drupal is

gecompliceerd en uitgebreid en dit uitwerken vereiste heel wat technische kennis en onderzoek.

Na het weergeven van deze informatie moest het voor bepaalde gebruikers (administrators en

dergelijke) ook mogelijk zijn om deze informatie te manipuleren of toe te voegen.

Hiervoor implementeerde ik twee features die enkel worden toegevoegd op basis van de rol van de

gebruiker die de pagina opvraagt.

Page 10: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

10

Een formulier kan geopend worden onder de informatie over een locatie. Hiermee kan men de

informatie manipuleren en dan opslagen of zelfs volledig verwijderen. Een extra knop zorgt voor de

mogelijkheid om een nieuwe locatie toe te voegen voor een proces. Dit is allemaal mogelijk zonder

de pagina te hernieuwen door middel van de Ajax technologie die ik reeds in stap 1 had onderzocht.

Een requirement waar mijn stagementor op het laatste moment nog mee op de proppen kwam was

het afsplitsen van de OpenLayers library van de rest van de module. Totnutoe zat deze library

simpelweg mee in de module. Omdat deze library mogelijk door meerdere modules zou worden

gebruikt, zou men deze graag apart kunnen beheren voor extra flexibiliteit. Hiervoor ontwikkelde ik

een tweede module, deze keer een library module. Deze defineert de library en stelt deze open om

gebruikt te worden door verschillende andere modules. Uiteraard moest de hoofdmodule met de

processviewer ook worden aangepast zodat deze de OpenLayers module vereiste en gebruikte.

Deze stap omvatte het grootste deel van het werk en liep gedeeltelijk samen met de vierde stap. De

resterende tijd van mijn stage ben ik hieraan bezig geweest, een 12-tal weken.

2.4 Stap 4: Layout verzorgen Na het verzorgen van de features moest de tool ook presentabel worden opgemaakt. Opmaak voor

webpagina’s gebeurt ook in Drupal met behulp van CSS. Deze CSS wordt door Drupal beheerd door

middel van thema’s. Een thema in drupal specificeert wat er hoe moet uitzien (bijvoorbeeld het

kleurenpallet van titels, de omkaderingen van een formulier...). Process Genius had zijn eigen thema

reeds ontwikkeld voor de installatie van Flowrox. Ik moest dit aanvullen met de opmaak voor mijn

eigen pagina.

Er werden mij ook enkele assets bezorgd, voornamelijk afbeeldingen, die moesten worden gebruikt

in de processviewer om de verschillende locaties mee aan te duiden.

Hiervoor moest ik wederom opzoekwerk doen over hoe het systeem rond thema’s in elkaar zit in

Drupal en wat ik net moest aanpassen om ook mijn pagina er mooi te laten uitzien.

Dit heb ik gedaan tijdens de laatste twee tot drie weken van mijn stage, tegelijkertijd met het

afwerken van de features van stap 3.

Page 11: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

11

2.5 Eindresultaat Het eindresultaat wordt het best getoond met enkele afbeeldingen van de verschillende features,

met een kleine uitleg erover:

Het proces ‘Raw water treatment’ in OpenLayers, rechts bovenaan de Layer control, waarmee

verschillende lagen kunnen worden aan- of uitgezet. Links boven zien we navigatie- en zoom

controls.

Recht onder het middelpunt en links onderaan zien we de witte afbeelding met rode pijltjes die de

locaties van een “helper process” aanduidt. Hierop klikken verwijst naar de pagina van een ander

proces, dat deel uitmaakt van dit algemeen proces.

Page 12: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

12

Hier zien we twee zijpanelen. Het meest linkse wordt getoond na het klikken op een locatie van het

type ‘application point’ en toont de verschillende producten van flowrox die hier kunnen worden

toegepast. Het 2de, grotere paneel heeft gedetailleerde informatie over een product dat openklapt bij

het selecteren van een product uit het eerste paneel.

Het paneel met informatie over subprocessen klapt open na het klikken op één van de labels.

Page 13: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

13

3 Deel 3: Kritische SWOT-analyse van het resultaat In een kritische sterkte-zwakte analyse kijk ik terug op mijn werk van vier maanden om zowel de

goede als de slechte kanten te identificeren.

3.1 Strengths Een groot voordeel van de module is de aanpasbaarheid aan de wensen van de klant. Alle code die

gebruikt wordt is gemaakt door Process Genius en kan zowaar op maat worden gemaakt.

De enige restrictie is wat er kan worden gedaan met de OpenLayers library en zelfs dit (omdat

iedereen toegang heeft tot de source code) kan worden omzeild door zelf een stukje code voor

OpenLayers te schrijven en dit toe te passen in je eigen library. Dit heb ik moeten doen voor de

achtergrond van de labels bijvoorbeeld want dit werd niet standaard ondersteund door OpenLayers.

De tool is ook zeer responsief, eens geladen. Dit is te danken aan OpenLayers dat speciaal voor zoiets

ontwikkeld is. Het zorgt voor een zeer aangename gebruikservaring.

Het bedrijf heeft heel ervaren mensen aan de top. Het idee kwam van enkele sales

vertegenwoordigers van bedrijven in de doelsector. Zij weten wat er nodig is en wat aantrekkelijk is

door hun ervaring. Dit helpt enorm bij het ontwikkelen van een goed product.

3.2 Weaknesses De grote zwakte van deze tool is de tijd die nodig is om alles in te laden. Enkele prestatietesten

wezen uit dat het laden van alle informatie (alle producten, tekst over subprocessen, een heel grote

afbeelding) erg lang duurt en dit maakt dat de gebruiker relatief lang moet wachten voor de pagina

volledig geladen is. Een ongeduldige gebruiker zal hier niet gelukkig mee zijn.

Deze zwakte wordt gedeeltelijk gecompenseerd door Drupal’s cache systeem, dat recent geladen

pagina’s ‘bijhoudt’. Zo zal het laden veel sneller gaan indien dezelfde pagina meermaals wordt

opgevraagd.

Page 14: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

14

3.3 Opportunities De tool heeft groot potentieel binnen de industriële sector. Het hele product PGtool heeft als doel de

sales en customer interaction in de zware industrie te revolutioneren. Door moderne technologie als

deze toe te passen kan een speler in de sector een voordeel verkrijgen ten opzichte van zijn

concurrenten. In plaats van naar een sales meeting te gaan met een hoop papieren (presentaties,

documenten, handleidingen) kan alles mooi worden weergegeven via een tablet of laptop. Deze

processviewer brengt dit allemaal samen en presenteert het op een aangename manier die voor de

klanten van flowrox gemakkelijk te begrijpen valt.

3.4 Threats Desinteresse vanuit de industrie is een serieuze bedreiging voor deze tool en het product als geheel.

Totnutoe heeft enkel Flowrox toegebeten, ze zijn ook heel tevreden over de ontwikkeling maar meer

klanten aantrekken lijkt moeizaam te gaan.

Het is een concept dat nog niet eerder is uitgewerkt, wat het kwetsbaar maakt. Andere bedrijven

zouden dit idee kunnen ontdekken en het zelf gebruiken om misschien iets beter te maken. Zij

zouden een voorbeeld hebben om te verbeteren en Process Genius zowaar kunnen voorbijsteken.

3.5 Samenvattend schema

Strengths Weaknesses

Aanpasbaarheid Responsief

Ervaring

Trage laadtijd

Opportunities Threats

Revolutionair in de doelsector

Desinteresse

Kwetsbaar voor plagiaat

Page 15: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

15

4 Deel 4: Focuscompetenties

4.1 Algemene competenties Deze competenties zijn belangrijk voor iedereen die werkt in een professionele omgeving, ongeacht

de sector van tewerkstelling.

Vlot functioneren in een professionele (internationale) omgeving

Op Erasmus moet dit wel dé belangrijkste competentie zijn. Letterlijk alles was internationaal en alles

was dus ook in een andere taal. Deze taal was voornamelijk Engels, hoewel veel Finnen ook Duits

kunnen en sommigen zelfs Frans! Engels is voor mij al een tijdje een tweede moedertaal. Zelfs in

België spreek, schrijf en hoor ik Engels evenveel als Nederlands. In een professionele omgeving is dit

natuurlijk net iets anders, daarom was dit zelfs voor mij een nieuwe ervaring.

In deze 4 maanden heb ik geleerd dat professionele communicatie, net als in het Nederlands, toch

net iets meer moeite kost. En niet enkel omdat ik mij er drie of vier keer van verzeker of ik wel de

juiste aanspreking en afsluiting gebruik in een email, ook bij het spreken moest ik een evolutie maken

van “sorry” naar “excuse me, sir”. Het was ook niet enkel beperkt tot de werkplaats, communiceren

met de huisvestingsmaatschappij en mijn internet provider kon hier ook bijgerekend worden!

Daarnaast heb ik ook een beetje Fins opgepikt. Na een maand of twee konden de kassiers in de

supermarkt niet merken dat ik geen Fin was. De communicatie bestond misschien maar uit een paar

bedankjes, een ‘tot ziens’ en soms het vriendelijk afslaan van het rekeningetje, toch ben ik hier

stiekem trots op. In een professionele omgeving vond men het ook heel beleefd dat ik deze woorden

had geleerd, het komt zeer respectvol over.

Relaties met collega’s, opdrachtgevers en/of klanten onderhouden

Om relaties te onderhouden moet je veel tijd en moeite vrijmaken, dat heb ik geleerd. Vooral in het

begin moet je alles opzijzetten als je de kans krijgt om iets te doen met je collega’s, als je de boot

mist zal het immers alleen maar moeilijker worden om erop te geraken. Dit heb ik gemerkt door de

eerste maand druk bezig te zijn met school, kotgenoten, medestudenten en het gewend raken aan

de nieuwe omgeving in plaats van ook eens met mijn collega’s quality time door te brengen. Gelukkig

ben ik er later tijdens de stage toch nog in geslaagd. Eenmaal ingewerkt in het project heb je iets

meer om over te praten. Er was ook een teambuilding-avond met sauna en een hapje en een

drankje.

Tegen het einde van mijn stage kwam ik voor de eerste keer in contact met de klanten van Process

Genius. Toen werd ik uitgenodigd om een meeting bij te wonen waar ik ook mijn eigen werk eens

kon voorstellen.

Wat ik hieruit heb opgepikt is dat het enorm belangrijk is er vanaf het begin elke kans te grijpen om

je collega’s en klanten te leren kennen. Ik ben er deze keer veel te laat aan begonnen, volgende keer

ga ik me hier niet laten vangen!

Page 16: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

16

4.2 IT competenties Binnen de IT sector zijn enkele competenties van groot belang, voor mij waren dat de volgende.

Nieuwe IT-oplossingen (autonoom) uitwerken in overeenstemming met de verwachtingen van de opdrachtgever

Mijn volledige stage heb ik alleen gewerkt aan mijn opdracht. Zelfs mijn mentor kon niet erg veel

helpen omdat hij zelf nog maar iets meer dan een jaar met drupal werkte toen ik begon. Ook

OpenLayers was nieuw voor hem. Er waren wel enkele duidelijke verwachtingen aangezien ik een

reeds bestaande feature moest herwerken. Mijn werk werd direct vergeleken met het oude en

moest een verbetering zijn.

Een groot deel van mijn werk bestond uit zelfstandig onderwerpen bestuderen en deze uittesten en

toepassen om tot een aanvaardbaar resultaat te komen. Dit is mij gelukt en ik heb veel geleerd over

hoe ik omga met nieuwe problemen die ik alleen moet oplossen.

Op een adequate wijze IT-oplossingen configureren, beveiligen en aanpassen zodat deze beantwoorden aan de veranderende behoeften van de organisatie

Tijdens het ontwikkelen veranderden de requirements bijna constant. Eerst was het zus, daarna was

het zo. Na enkele weken had ik al de goede gewoonte van alles zo gestructureerd mogelijk te maken

en op te delen in zo klein mogelijke stukjes. Als er mij dan werd gevraagd iets aan te passen kon ik

meteen het relevante stukje code opzoeken en nadenken over hoe ik dat moest aanpassen, zo kon

dit gebeuren met zo min mogelijk weerslag op de rest van het project.

Toen ik enkele weken bezig was met het implementeren van de module vroegen ze mij om het

mogelijk te maken om de etiketten van de locaties te verbergen op de kaart. Hier was ik helemaal

niet op voorbereid en het kostte mij enkele dagen om dit te herwerken. Toen ze mij (vele andere

veranderingen en een tweetal maanden later) vroegen om specifieke afbeeldingen te gebruiken in

plaats van de standaard vakjes voor het optekenen van de locaties had ik de oplossing hiervoor reeds

opgezocht en met wat commentaar verwezen naar de online documentatie hierover. Dit herleidde

een hele dag werk naar minder dan een uur.

gegevens verzamelen, opslaan en ter beschikking stellen zodat deze op een correcte en gebruiksvriendelijke manier kunnen worden opgevraagd

Deze competentie omvat zeer mooi wat mijn project uiteindelijk moest doen. Het opvragen en

gebruiksvriendelijk weergeven van informatie over het web kan zeer lastig zijn. Voor de layout van

mijn project moest rekening gehouden worden met de weergave op een ‘gewoon’ computerscherm

maar ook met de mogelijkheid van een veel kleinere tablet, of een veel groter projectiescherm. Om

locaties op een kaart correct weer te geven moet er dan weer rekening worden gehouden met de

grootte van de kaart in correlatie met de schaal waarop de coördinaten zijn opgeslagen.

Voor dergelijke problemen heb ik tijdens mijn stage oplossingen moeten voorzien. Bijvoorbeeld de

coördinaten van de locaties; deze herberekende ik naar een schaal van 1024x1024 voor ik ze opsloeg,

op basis van de grootte van de afbeelding waar ze bij hoorden. Bij het weergeven werden de

coördinaten dan weer geëxtrapoleerd naar de juiste schaal. Bijvoorbeeld een punt op locatie (300,

600) van een afbeelding die 600x1200 was werd opgeslagen als x-coördinaat 612 en y-coördinaat

612.

Page 17: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

17

5 Bijlagen

5.1 Timesheet

Page 18: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

18

5.2 INSTALL.txt

after installing and enabling the module in drupal, several more steps need

to be taken.

1) Edit the view.

-Navigate to the view "Process Categories (Term)"

-Copy the display "Optional Process Category Child Terms"

-Name the new display "Process Categories to processviewer"

-Add the field "Content: Nid". Check "exclude from display" only.

-Rearrange the fields so it is just before "Content: Title".

-Change the "Content: title" field:

*Check "rewrite the output of this field" and enter: [title]

[field_process_notes_needed] [field_process_draft]

*Check "Output this field as a link" and enter:

processviewer?nid=[nid]&cat=!1

-Remember to save the view.

2) Change the display that is used

-In the structure menu, click Context.

-Edit "taxonomy_term_page"

-Open the blocks category

*remove the "Process category" view that was there

*Add the "View: Process Categories: Process Categories to

processviewer" display to the main content.

-Save the structure

Now the links from the categories pages will link to the /processviewer

page from the module.

3) Add the CSS to the template

-Open up the template.php file (\sites\all\themes\flowrox)

-Add the hook flowrox_preprocess_page if it is not yet implemented.

*add the following code, so css and

if (arg(0) == 'processviewer'){

$theme_path = drupal_get_path('theme', 'flowrox');

drupal_add_css($theme_path . '/css/processviewer.css');

drupal_add_js($theme_path . '/scripts/unitswitcher.js');

}

-Copy the processviewer.css file to the theme's css folder

4) Convert the database y-coordinates.

-Because openlayers calculates coordinates from the bottom left (instead of

top left), the coordinates have to be changed.

-4 tables need to be altered with these queries:

*update `field_data_field_application_ycoord` set

`field_subprocess_y_value` = 1024 - `field_subprocess_y_value`

*update `field_revision_field_application_ycoord` set

`field_subprocess_y_value` = 1024 - `field_subprocess_y_value`

*update `field_data_field_subprocess_y` set

`field_subprocess_y_value` = 1024 - `field_subprocess_y_value`

*update `field_revision_field_subprocess_y` set

`field_subprocess_y_value` = 1024 - `field_subprocess_y_value`

Page 19: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Ward De Smedt Toegepaste Informatica 243539 - r0342387 Stageverslag 2014

19

5.3 Presentatie Presentatie gegeven op 20/06/14 vanop de volgende pagina.

Page 20: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Stage Process Genius Ward De Smedt

Page 21: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Locatie • Finland

• Joensuu, Karelia

• KUAS

• Process Genius

• Februari-Juni

Page 22: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Bedrijf • 2 jaar oud

• Cutting edge utility software

• Revolutioneren van Sales

• Opleiden Werknemers

• Zware industrie

• Oprichters ervaren in sales

Page 23: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Situering project • PGtool

• Flowrox

• Processviewer

“PGtool helps your sales by presenting your products

within your client’s process.”

Page 24: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Processviewer

• Industrieel proces

• Voorstellen Producten

• Documentatie beheren (handleidingen, presentaties, specificaties...)

Page 25: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Uitwerking 3 stappen

1. Openlayers toepassing

2. Drupal module

3. Module met OL

4. Theming volgens Flowrox

Page 26: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Resultaat

Page 27: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Resultaat

Page 28: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Resultaat

Page 29: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Resultaat

Page 30: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

POP - competenties

Vlot functioneren in een professionele (internationale) omgeving • Erasmus • (Professioneel) Engels • Fins?

Relaties met collega’s, opdrachtgevers en/of klanten onderhouden • Tijd vrij maken • De boot niet missen • Klanten ontmoet

Algemeen

Page 31: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

POP - competenties

Nieuwe IT-oplossingen autonoom uitwerken in overeenstemming met de verwachtingen van de opdrachtgever • Zelfstandige opdracht • Directe vergelijking • Omgaan met nieuwe problemen

Op een adequate wijze IT-oplossingen configureren, beveiligen en aanpassen zodat deze beantwoorden aan de veranderende behoeften van de organisatie • Geen vaste requirements (in samenspraak met klant) • Georganiseerd coderen

Gegevens verzamelen, opslaan en ter beschikking stellen zodat deze op een correcte en gebruiksvriendelijke manier kunnen worden opgevraagd

IT

Page 32: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

POP - competenties

Gegevens verzamelen, opslaan en ter beschikking stellen zodat deze op een correcte en gebruiksvriendelijke manier kunnen worden opgevraagd • Definitie van project • Rekening houden met layouts en groottes (coördinaten) • Drupal = CMS

IT

Page 33: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

POP - Technisch

• Drupal • PHP • JS • Ajax • HTML • CSS

Page 34: Hogeschool-Universiteit Brussel · 2014. 6. 19. · 243539 - r0342387 Stageverslag 2014 2 Inleiding Dit is het stageverslag van Ward. Vier maanden lang heb ik in Joensuu, Finland

Einde Bedankt voor uw aandacht