1
Afstudeerverslag
Formulierencomponent in TeleDIA
Student: Sohel Khattat
Studentennummer: 154255
Opleiding: HBO-ICT SE, Deventer Afstudeerdocent: Tristan Pothoven
Bedrijf: Topicus Zorg Divisie, Deventer Bedrijfsbegeleider: Mattias Beimers
2
Versiebeheer
Versie Wijzigingen Beschrijving
0.1 Opzet
0.2 Feedback Feedback verwerkt
0.3 Excel formulier Uitleg Excel formulier
weggelaten
0.4 Onderzoek, structuur Toevoeging onderzoek,
ontwerp en
implementatie, structuur aanpassing
0.5 Deelvragen, structuur Toevoeging resultaten,
ontwerp en onderzoek van deelvraag. Todo punten neergezet per hoofdstuk wat er nog in komt.
0.6 Feedback Feedback verwerkt
0.7 Feedback, inleiding, voorwoord, samenvatting Feedback verwerkt, inleiding, voorwoord en samenvatting geschreven 1.0 Inleiding, probleemstelling, doelstelling, resultaten De inleiding, probleemstelling en doelstelling zijn herschreven. De resultaten hoofdstuk is anders gestructureerd.
3
Voorwoord
Voor u ligt het verslag “Formuliercomponent in TeleDIA”. Dit verslag is geschreven in het kader van mijn afstuderen aan de opleiding HBO-ICT aan het Saxion te Deventer, in opdracht van Topicus. Van september 2020 tot en met april 2021 ben ik bezig geweest met het uitvoeren van de opdracht.
Tijdens de afstudeerperiode ben ik bezig geweest met het onderzoeken, uitvoeren en het schrijven van het verslag.
Gedurende deze periode werd ik begeleid door Mattias Beimers ontwikkelaar vanuit het TeleDIA team en heeft mij geholpen met de functionele en technische aspecten van de opdracht. Daarnaast heeft Tristan Pothoven vanuit de opleiding de
begeleiding gevoerd en mij van feedback voorzien voor het schrijven van dit verslag. Hierbij wil ik beide heren bedanken voor hun goede begeleiding in een wat zware periode met de Covid pandemie.
Tot slot wil ik ook de overige leden van het TeleDIA team bedanken voor hun kennis en inzet. Ondanks de corona maatregelen heb ik toch een leuke tijd gehad bij
Topicus.
Bij deze wens ik u veel leesplezie. Sohel Khattat
4
Samenvatting
In dit verslag staan de probleem- en doelstelling, onderzoeksresultaten, implementatie, conclusie en advies van de afstudeeropdracht
“Formulierencomponent in TeleDIA” in. Binnen het TeleDIA team is de afstudeerder bezig geweest met het bouwen van een proof of concept om aan te tonen hoe het formulierencomponent werkt in het Angular framework. Het formulierencomponent is onderdeel van de TeleDIA applicatie waarin formulieren gebouwd worden die ondersteuning bieden voor functieonderzoeken. Vanuit een Excel bestand stelt een beheerder van TeleDIA een formulier op. In het Excel bestand wordt aangegeven wat voor vragen er gesteld moeten worden en uit welke antwoorden gekozen kan
worden. In het bestand kunnen ook acties en expressie worden gedefinieerd die bedoeld zijn om bepaalde logica uit te voeren in het formulier. De definities die in het Excel bestand staan worden opgeslagen in de database en het
formulierencomponent gaat met deze informatie formulieren bouwen. Het probleem van het formulierencomponent is dat als de logica toegepast wordt op het formulier, in de back-end nieuwe delen van het formulier gebouwd moeten worden. Hierdoor vindt er veel overhead plaatst in de server.
Tijdens dit project is er onderzoek gedaan naar wat voor betekenis de definities hebben die afkomstig zijn uit het Excel bestand. Hierin zijn zelf gemaakt Excel bestand aangeleverd in TeleDIA om in de database te kijken hoe deze informatie wordt
opgeslagen. Uit dit onderzoek is gebleken dat de Excel definities opgesplitst worden in vier stuken. Er is daarnaast onderzoek gedaan naar hoe de huidige
formulierencomponent met behulp van deze informatie formulieren bouwt. Tot slot is er ook onderzoek gedaan naar de logica van het formulierencomponent om te begrijpen hoe dit in elkaar zit.
Aan de hand van de onderzoeksresultaten is besloten om twee prototypes te gaan implementeren. Een FormulierElement library en een FormulierComponent library. De FormulierElement library prototype is gebouwd om ervoor te zorgen dat de formulier elementen uit de database worden gehaald en hiermee een JSON-object vormt die gebruikt kan worden door het FormulierComponent library.
De FormulierComponent library is gerealiseerd om ervoor te zorgen dat formulier componenten gebouwd worden die als één formulier geheel dienen. Tijdens de realisatie fase zijn er oplossing bedacht om bepaalde problemen op te lossen betreft het bouwen van formulieren, toepassen van de logica en het opslaan van formulier antwoorden.
Er is een conclusie en advies geschreven over de nieuwe formulierencomponent. In het advies staat beschreven wat het TeleDIA team met de gemaakte prototypes kan doen.
5
Inhoudsopgave
1. INLEIDING 6 2. BEDRIJF 8 2.1 BEDRIJFSGEGEVENS 8 2.2 SCHOOLGEGEVENS 8 2.3 AFSTUDEERDER 8 3. PROJECT 9 3.1 PROBLEEMSTELLING 9 3.2 DOELSTELLING 10 3.3 ONDERZOEKSVRAGEN 10 3.3.1 Hoofdvraag 10 3.3.2 Deelvragen 10 3.3.3 Afbakening 10 3.4 METHODIEK 11 4. RESULTATEN 12 4.1 ANALYSERESULTATEN 12 4.1.1 Deelvraag 1 12 4.1.1.1 Onderzoekresultaat 12 4.1.2 Deelvraag 2 16 4.1.2.1 Onderzoekresultaat 16 4.1.3 Deelvraag 3 20 4.1.3.1 Onderzoekresultaat 20 4.2 REALISATIE 23 4.2.1 Implementatie 24 4.2.1.1 FormulierElement library 24 4.2.1.2 FormulierComponent library 27 4.2.1.3 Logica FormulierComponent 30 4.2.1.4 Formulier antwoorden 345. CONCLUSIE & ADVIES 35
5.1 CONCLUSIE 35 5.2 ADVIES EN AANBEVELINGEN 36 6. REFLECTIE 38 7. BEROEPSCOMPETENTIES 39 8. VERWIJZINGEN 40 9. BIJLAGE 41
6
1. Inleiding
TeleDIA is een webapplicatie waarin een arts functieonderzoeken van patiënten in kan zien en de uitslagen in kan verwerken. Aan een onderzoek is een vragenlijst aan gekoppeld dat ingevuld kan worden door medewerkers van een ziekenhuis, waarop een beoordelaar dit verder kan beoordelen. Zo’n vragenlijst wordt ook wel een formulier genoemd.
Er zijn verschillende soorten onderzoeken, waarbij elk onderzoek zijn eigen
informatie bevat. Door zelf formulieren op te zetten kan een beheerder bepalen welk informatie nodig is voor het onderzoek. In Excel worden door beheerders per
onderzoek type formulieren opgesteld. In het Excel bestand wordt aangegeven wat voor soort vragen er gesteld moet worden en in welke volgorde. Daarnaast kan in het bestand aangegeven worden of bepaalde vragen in het formulier getriggerd kunnen worden op basis van een eerder opgegeven antwoord bij een ander vraag. Dit wordt ook de logica van het formulierencomponent genoemd. Acties zijn onderdeel van de logica van een formulier. Een acties kan aan een vraag gekoppeld worden om
bijvoorbeeld aan te geven dat bij het beantwoorden van vraag A met antwoord c, vraag B getoond moet worden. Daarnaast kunnen acties ondersteund worden door expressies. Een expressie in deze zin is een programmeeracties die met behulp van combinaties van waardes een berekening kan uitvoeren. Dit betekent dat in het Excel bestand expressies opgesteld kunnen worden om bijvoorbeeld aan te geven dat op basis van een opgegeven antwoord in vraag A, in vraag B antwoord d ingevuld moet worden.
Figuur 1. Excel bestand waarin de indeling van het formulier in staat gedefinieerd met ieder vraag zijn unieke identifier. Logica van het formulier wordt met behulp van een actie en/of expressie bepaald.
Figuur 2. Tweede deel van het Excel bestand waarin de vraag definities in staan. Ieder vraag heeft zijn eigen identifier en bevat reeks van antwoorden.
7 In figuur 1 & 2 is het Excel bestand afgebeeld. In figuur 1 wordt de indeling en de logica van het formulier gedefinieerd. In figuur 2 staan de vraag definities met de vraagstelling en de bijbehorende antwoorden. De informatie in het Excel bestand wordt in TeleDIA ge import en in de database opgeslagen en met behulp van deze informatie wordt er een formulier gepresenteerd aan de gebruiker (zie figuur 3). Het Excel bestand wordt als een mal beschouwt voor het opstellen van een formulier dat
ondersteuning biedt voor functieonderzoeken. Het Excel bestand is geïntroduceerd zodat beheerders een template hebben waarin ze aan kunnen geven hoe een formulier in TeleDIA eruit moet komen te zien en welke vragen er gesteld moeten worden voor de
functieonderzoek.
Figuur 3. Een voorbeeld formulier dat de gebruiker van het TeleDIA systeem voor zich ziet.
Het vertalen van dit Excel bestand gebeurt door het formulierencomponent. Het formulierencomponent zorgt ervoor dat met behulp van de informatie die in de database is opgeslagen, van het Excel bestand, een formulier gebouwd gaat worden. Bij het opzetten van een formulier wordt er ook rekening gehouden met de logica van het formulier. Zo zal tijdens het invullen van een formulier bij een vraag die een actie bevat, een nieuwe deel voor het formulier aangemaakt worden dat weer aangeleverd wordt aan de gebruiker. Dit kan bijvoorbeeld het tonen van een nieuwe vraag of een antwoord invullen bij een andere vraag zijn.
8
2. Bedrijf
Topicus is een bedrijf dat impact wil hebben op de finance, onderwijs, zorg en sociaal domein sectoren met behulp van IT. Met IT-oplossingen willen zij mensen, platforms en data met elkaar verbinden. Het bedrijf is in 1998 opgericht door Harry Romkema en Leo Essink als adviesbureau in Enschede. In 2003 lanceerden zij hun eerste digitale oplossing voor het basisonderwijs ParnasSys. De jaren daarop groeide Topicus hard en bestond de Topicus familie uit 104 Topicanen in 2008. Vanaf 2013 bestond Topicus uit 3 divisies: finance, onderwijs en zorg waarbij later ook de sociaal domein divisie bij toegevoegd is. Ondertussen heeft Topicus 1000+ medewerkers gevestigd onder andere in Deventer, Dodewaard, Gouda en Zwolle. De locaties in Deventer is waar de meeste Topicanen zich bevinden en ook tevens waar het hoofdkantoor zich bevindt. Topicus wil via de zorg divisie de zorg verbinden door bruggen te bouwen tussen burgers, zorgverleners en financiers van de zorg. Hiermee willen zij bij dragen aan een beter balans in de Nederlandse gezondheidszorg.
2.1 Bedrijfsgegevens
Topicus Singel 25 7411 HW Deventer 0570 662 662 info@topicus.nlContactpersoon Functie Email
Mattias Beimers Ontwikkelaar Mattias.Beimers@topicus.nl
2.2 Schoolgegevens
Saxion
Handelskade 75 7417 DH Deventer 088 019 8888
Contactpersoon Functie Email
Tristan Pothoven Docent t.pothoven@saxion.nl
2.3 Afstudeerder
Contactpersoon Functie Email
9
3. Project
In dit hoofdstuk wordt de probleem- en doelstelling besproken. Tevens wordt aan de hand van de probleem en doelstelling vragen opgesteld die later in het onderzoek beantwoord gaan worden.
3.1 Probleemstelling
In het huidige systeem wordt vanuit de front-end een formulier opgevraagd door de gebruiker en bevindt zich in de back-end het opstellen van het formulier met behulp van het formulierencomponent. Omdat het huidige formulierencomponent op de server side van TeleDIA draait, is er veel overhead en gebeuren wijzigingen in het formulier niet direct plaats in de browser. Daarnaast is het formulierencomponent jaren geleden opgezet, waardoor bepaalde concepten en technieken achterhaald zijn. In figuur 4 is de huidige situatie afgebeeld waarin het is opgedeeld in drie delen. Deel 1 is het aanmaken van het Excel bestand en het importeren van dit bestand in de database door beheerders. Deel 2 is het formulierencomponent dat in de server-side van de TeleDIA applicatie zit, waarin uit de database informatie wordt opgehaald om vervolgens het formulier te gaan bouwen. De API endpoint verstuurd een response payload waarin het formulier als xml verstuurd wordt aan de client-side.
In deel 3 krijgt de gebruiker een formulier te zien die ingevuld kan worden. Tijdens het invullen van dit formulier zal bij het toepassen van de acties van het formulier een nieuw formulier worden aangeleverd door het formulierencomponent.
Figuur 4. Huidige situatie van het formulierencomponent dat in drie delen is afgebeeld.
Omdat door de jaren heen nieuwe technieken en modernere web-frameworks zijn geïntroduceerd is TeleDIA toe aan vernieuwing. Het TeleDIA team wil een proof of concept zien hoe het formulierencomponent werkt in het Angular framework. De afstudeerder gaat in deze opdracht een oplossing verzinnen hoe formulieren in het Angular framework gebouwd kunnen worden.
10
3.2 Doelstelling
De afstudeerder gaat een proof of concept bouwen waarin aangetoond wordt hoe het formulierencomponent in het Angular framework formulieren kan gaan bouwen om die vervolgens te tonen. Er moet eerst onderzoek worden gedaan naar het Excel bestand om het datamodel van de formulier vragen en indelingen te snappen. Vanuit dit onderzoek en met behulp van de resultaten en conclusie moet er nagedacht worden hoe er vanuit dit model in Angular formulieren gebouwd kunnen worden. Daarnaast moet er nagedacht worden hoe de logica van het formulierencomponent uitgevoerd gaat worden op het formulier zodat het formulier nieuwe vragen kan tonen of antwoorden kan invullen voor de gebruiker.
3.3 Onderzoeksvragen
Binnen het project zijn er hoofd- en deelvragen opgesteld om de probleem- en doelstelling te verduidelijken.
3.3.1 Hoofdvraag
Hoe kan het formulierencomponent gebouwd gaan worden in het Angular framework om te voorzorgen dat formulieren op basis van de definities die in een Excel bestand zijn aangemaakt gebouwd kunnen gaan worden?
3.3.2 Deelvragen
- Wat voor betekenis hebben de definities die afkomst zijn vanuit het Excel bestand voor het bouwen van een formulier in het formulierencomponent? - Op welke manier kunnen de Excel definities gebruikt gaan worden ter
ondersteuning voor het formulierencomponent?
- Hoe zit de logica van het formulierencomponent in elkaar?
3.3.3 Afbakening
Het importeren van het Excel bestand waarin de definities van het formulier worden geïmporteerd in de database wordt niet herschreven. De afstudeerder gaat alleen bezig met het realiseren van het formulierencomponent dat in deel 2 en deel 3 van figuur 4 staat beschreven. De afstudeerder zal tijdens het onderzoek niet de gehele logica van het formulierencomponent onderzoeken. Omdat anders de scope van de opdracht te groot wordt.
11
3.4 Methodiek
De afstudeerperiode kan onderverdeeld worden in verschillende fases waarin de afstudeerde bezig is geweest om een proof of concept te bouwen om aan te tonen hoe het nieuwe formulierencomponent gebouwd kan gaan worden in Angular. In de onderzoeksfase heeft de afstudeerder onderzoek gedaan naar het Excel bestand om te begrijpen hoe vraag definities gedefinieerd worden en welk
datamodel nodig is voor het bouwen van formulieren. Er zijn zelfgeschreven Excel bestand aangeleverd aan het huidige systeem en is onderzocht hoe vanuit Excel het formulierencomponent een formulier bouwt. Naast het onderzoeken van het Excel bestand is ook onderzocht naar de acties, om de logica van het
formulierencomponent te begrijpen.
Na het verzamelen van informatie over de huidige implementatie en het begrijpen van het Excel bestand zijn er ontwerp keuzes gemaakt die aantonen hoe het datamodel gebruikt kan gaan worden om formulieren te bouwen.
Tijdens de ontwikkelfase is de afstudeerder bezig geweest met het realiseren van de formulierencomponent. Gedurende het project is gebruikt gemaakt van Scrum. Er zijn sprints van twee weken gehanteerd waarbij onderdelen zoals standup en
retrospectieven samen het Scrum proces van het TeleDIA team zijn uitgevoerd. Binnen het project zijn zowel technische als processing tools gebruikt om
systematisch en efficiënter te werk te gaan. IntelliJ
IDE develop omgeving om eenvoudiger software te schrijven door onder ander syntax-highlighting, auto-completion en error-highlighting.
Jira
Tool om het scrum proces bij te houden. Stash
Voor het managen van git repository. Git
Versiebeheersysteem voor de gemaakte software. Docker
Applicaties containerizen om installatie en het runnen van de applicaties binnen het project eenvoudiger te maken.
Draw.io
12
4. Resultaten
4.1 Analyseresultaten
In dit hoofdstuk vindt u de resultaten die antwoord geven op de hoofdvraag en de deelvragen die in hoofdstuk 3.3 zijn benoemd. Per paragraaf worden de resultaten van de deelvragen besproken.
4.1.1 Deelvraag 1
De volgende onderzoeksresultaten hebben betrekking op de volgende deelvraag Wat voor betekenis hebben de definities die afkomst zijn vanuit het Excel bestand voor het bouwen van een formulier in het formulierencomponent?
4.1.1.1 Onderzoekresultaat
In een van de interne Topicus documenten staat beschreven hoe een Excel bestand opgesteld kan worden en hoe de cel waardes ingevuld moeten worden. In het Excel bestand worden twee tabbladen aangemaakt, “Tabblad formulieren” en “Tabblad vragen”.
In figuur 5 is het tabblad formulieren afgebeeld waarin in feite aan wordt gegeven hoe uiteindelijk het formulier gestructureerd moet worden. Onder de kolom naam “TYPE” kunnen de volgende afkortingen worden gebruikt.
13
Tabel 1. Excel definitie beetkenisen
Afkorting Betekenis
VB VragenBlok
K1 t/m K4 KolomContainer
VV1 t/m VV6 VerticaleVragenBlokken
Omdat een VragenBlok (VB) als root container wordt gezien dient in het tabblad formulieren altijd als eerst onder de kolom “TYPE” hiermee te beginnen. Verder kan een VB gebruikt worden om aan te geven dat de volgende containers die moeten volgen onder deze VB vallen. Een KolomContainer (K1) geeft aan in welke kolom de vraag in moet worden weergeven. K1 t/m K4 wordt gebruikt om kolom structuren aan te maken. VerticaleVragenBlokken (VV1) zijn vraag blokken die verticaal weergeven moeten worden in het formulier.
In het tabblad vragen (figuur 6) geeft de beheerder aan welke vraag er gesteld moet worden bij een eerder opgegeven identifier in het tabblad formulieren. Naast er een vraag wordt gedefinieerd wordt hierin ook de antwoorden keuzemogelijkheden en de keuze weergave gedefinieerd.
Figuur 6. Vragen tabblad van een voorbeeld Excel bestand
Er is door het maken van een eigen Excel bestand en dit in TeleDIA te importeren, in de database geconstateerd dat de informatie in Excel opgesplitst worden in stukjes. In het datamodel staan de volgende tabellen gedefinieerd die van belang zijn voor het formulierencomponent en waarin de Excel definities in worden opgeslagen.
14 FormulierElement
FormulierElement zijn de elementen die gevormd worden op basis van wat in het Excel bestand staat definieert als “TYPE”, zoals dit in figuur 5 staat afgebeeld. Zo wordt de “VV1” type gelezen en opgeslagen als een “form_VraagInstantie” type in de database.
Een FormulierElement kan een VraagDefinitie id bevatten die verwijst naar de VraagDefinitie tabel. In figuur 7 en 8 staan twee verschillende FormulierElement afgebeeld.
Figuur 7. Een voorbeeld FormulierElement van een label zoals die in de database is opgeslagen.
Figuur 8. Een voorbeeld FormulierElement van een vraag instantie zoals die in de database is opgeslagen.
VraagDefinitie
In een VraagDefinitie staat opgeslagen wat de vraag is die gesteld moet worden. De belangrijkste waarden dat aan een VraagDefinitie is gekoppeld zijn de vraag identifier en render type. De renderType geeft aan hoe de vraag in het formulier getoond moet worden. Dit kan bijvoorbeeld een vraag zijn die antwoorden als radio buttons naast elkaar getoond moet worden(RADIO_VERTICAAL) of juist onder elkaar (RADIO_HORIZONTAAL). Daarnaast bevat een VraagDefinitie een identifier dat uniek is aan de VraagDefinitie. In figuur 9 is een VraagDefinitie dat in de database staat opgeslagen afgebeeld.
Figuur 9. Een voorbeeld VraagDefinitie die informatie bevat over welke vraag er gesteld moet worden, de renderType en de id van de vraag
15 ActieInstantie
Een ActieInstantie wordt pas aangemaakt als in Excel aan is gegeven dat er een bepaalde vraag een actie bevat. Een ActieInstantie bevat informatie over welke FormulierElement bevat een actie en welk ander FormulierElement moet getriggerd worden. Daarnaast bevat het ook de informatie over welk type actie dit gaat (zie hoofdstuk 4.1.3.1 voor meer informatie over type acties). Afhankelijk van wat een beheerder in Excel definieert kan een ActieInstantie een antwoord waarde bevatten die zegt op welk antwoord deze actie getriggerd moet worden. Er is bekend dat acties een expressie kunnen bevatten. Wat blijkt uit de datamodel is dat expressie niet gekoppeld zijn aan een ActieInstantie, maar aan een FormulierElement. In figuur 10 is een ActieInstantie afgebeeld waarin de “vraagInstantie_id” en “targetElement_id” een verwijzingen zijn naar een FormulierElement. De DTYPE geeft aan wat voor soort actie het is.
Figuur 10. Een voorbeeld ActieInstantie die een doel element bevat en een target element.
AntwoordDefinitie
Een AntwoordDefinitie bevat de antwoord keuzemogelijkheid van een vraag. Bij het opstellen van een vraag in Excel wordt aangegeven welk antwoorden aangekoppeld zijn. In de database zullen ze in de AntwoordDefinitie tabel (figuur 11) opgeslagen worden met een verwijzing naar de VraagDefinitie (figuur 10).
16
4.1.2 Deelvraag 2
Nu het duidelijk is wat de betekenis van de Excel definities zijn en hoe dit in de database staat opgeslagen, wordt in dit hoofdstuk de onderzoeksresultaten
besproken die beter in beeld brengen hoe de definities gebruikt kunnen gaan worden om formulieren te gaan bouwen.
De volgende onderzoeksresultaten hebben betrekking op de volgende deelvraag. Op welke manier kunnen de Excel definities gebruikt gaan worden ter ondersteuning voor het formulierencomponent?
4.1.2.1 Onderzoekresultaat
Tijdens dit onderzoek is gekeken hoe de huidige formulierencomponent de
FormulierElementen indeelt in het uiteindelijk xml wat aangeleverd wordt aan de front-end. Hieruit is gebleken dat FormulierElementen een parent-child relatie met elkaar hebben. In de onderzoeksresultaten van deelvraag 1 is gebleken dat een VragenBlok altijd als root container wordt gezien. Onder deze root container komen de overige “TYPES” van het Excel bestand te staan.
In de database is ook opgemerkt dat deze “TYPES” onder een andere naam worden opgeslagen in het FormulierElement tabel.
Tabel 2. Afkortingen en betekenis van de Excel definities en hoe deze in de database zijn benoemd
Afkorting Betekenis DTYPE in database
VB VragenBlok form_VragenBlok
K1 t/m K4 KolomContainer KolomContainerImpl VV1 t/m VV6 VerticaleVragenBlokken form_VraagInstantie
- - SimpleLabelInstantieImpl
In tabel 2 is op te merken dat er een SimpleLabelInstantieImpl type bij is gekomen. In de formulieren tabblad wordt onder de “TYPE” kolom niet aangegeven dat er een label aangemaakt moet worden maar heeft een aparte kolom waarin dit komt te staan. De DTYPES “form_VragenBlok”, “KolomContainerImpl”, “form_VraagInstantie” en “SimpleLabelInstantieImpl” worden in dit verhaal ook wel component types
genoemd. Een FormulierElement verteld in feite wat voor soort component type er aangemaakt moet worden voor het formulier.
17 Aan de hand van deze kennis en het verder bestuderen van de database is gebleken dat verschillende component types een onderlinge relaties hebben. In figuur 12 is er een voorbeeld te zien van de formulieren tabblad waarin de verschillende component types ingekleurd zijn.
Tijdens het onderzoek is gebleken dat voor ieder K1 t/m K4 (KolomContainer) definitie in Excel, in de database een VragenBlok
FormulierElement(form_VragenBlok) aangemaakt wordt. Deze form_VragenBlok wordt aangemaakt om aan te geven dat hierna gevolgde components in de
form_VragenBlok toegevoegd moeten worden. In figuur 13 is er een boomstructuur gevisualiseerd hoe dit er precies uit ziet en wat de onderlinge relaties zijn uitgaande van de definities in de formulieren tabblad in figuur 12.
Figuur 12. Het formulieren tabblad waarin een de components types zijn gedefinieerd. De cellen zijn gekleurd om aan te geven dat elk kleur een eigen component is.
Figuur 13. Boomstructuur die de components weergeeft en hun relaties onderling. De kleuren komen overeen met de kleuren die in figuur 12 ook te zien zijn.
18 De boomstructuur bestaat uit vier lagen. In de eerste laag is de VragenBlok afgebeeld die als root container dient. Vervolgens zijn in het formulieren tabblad de volgende types gedefinieerd, 3x K1, 1x VB en 2x VV1. Tijdens het importeren worden de drie K1 als één KolomContainerImpl opgeslagen in de database. De VB als een
form_VragenBlok en aangezien de twee VV1 onder de VB staan zal aangegeven worden dat ze een child relatie hebben met de VB uit laag twee. Vandaar dat deze in de derde laag zitten. Labels die binnen een VB worden gedefinieerd zullen uiteindelijk onder de root VB container vallen. Tot slot wordt binnen de drie K1 1x een label gedefinieerd en 2x een vraag identifier. Eerder is er opgemerkt dat bij een K1 t/m K4 definities een extra VB wordt aangemaakt. Onder deze VB zal de label definitie en de twee vraag identifiers onder komen te staan. In het geval van de label zal dit niet onder de VB root container komen te liggen aangezien de label definities binnen de K1 is gedefinieerd.
Figuur 14. Het vragen tabblad waarin de vraag definities staan. Vraag definities zijn gekleurd om aan te geven dat deze definities bij component horen met dezelfde kleur als in figuur 12 & 13
19 Aan de hand van de definities die in de formulieren tabblad en vragen tabblad
worden gedefinieerd zal tijdens het importeren van het Excel bestand de definities worden opgeslagen in de database (zie hoofdstuk 4.1.1.1) en maakt het
formulierencomponent met behulp van deze informatie een formulier. Het
uiteindelijk formulier wat het formulierencomponent gebouwd heeft is in figuur 15 afgebeeld. De componenten zijn met dezelfde kleur als die in de voorgaande figuren zijn gebruikt omrandt.
Figuur 15. De formulier indeling en components dat door de gebruiker gebruikt kan worden gemaakt. In gekleurde blokjes aangegeven om welke component het gaat
20
4.1.3 Deelvraag 3
In de voorgaande onderzoeken is voornamelijk gekeken naar wat de definities in Excel inhouden en hoe deze definities gebruikt worden om een formulier te gaan bouwen. Er mist nog één onderdeel dat nog niet is behandeld en dat is de logica van het formulierencomponent.
De volgende onderzoeksresultaten hebben betrekking op de volgende deelvraag. Hoe zit de logica van het formulierencomponent in elkaar?
4.1.3.1 Onderzoekresultaat
Het formulierencomponent heeft naast het feit dat het vragen en antwoorden kan tonen, ook de functionaliteit om bepaalde logica in te verwerken die bepaalde acties triggeren op het formulier. Zo bevat het formulierencomponent zes acties die
toegepast kunnen worden op een component in een formulier. Een actie geeft aan op welke manier logica op de betreffende component toegepast moet worden.
Binnen dit onderzoek zijn er maar twee verschillende acties eruit gehaald om dit te onderzoeken en te gaan kijken wat voor invloed het heeft op het
formulierencomponent. Acties:
- StringShowVraagActieInstantie - ExpressionBerekeningActieInstantie
21 StringShowVraagActieInstantie
Dit is de actie die ervoor zorgt dat een vraag getoond wordt als bij een eerder vraag een bepaald antwoord is gegeven. Bijvoorbeeld bij de vraag “Rookt u?” en hierop de antwoordmogelijkheden Ja of Nee zijn, dan kan de betreffende actie worden
aangeroepen. In het formulieren tabblad in Excel kan een actie worden gedefinieerd met daarbij het antwoord waarop de actie getriggerd moet worden. Bij het definiëren van een actie hoort ook een doel element te worden ingevuld die aangeeft welke vraag identifier getriggerd moet worden. In figuur 16 staat een voorbeeld waarin de StringShowVraagActieInstantie op de roker_id vraag identifier zit en bij het
beantwoorden van deze vraag met Ja zal de roker_hoelang_id worden getriggerd. Dit betekent dus dat de roker_hoelang_id getoond wordt bij het beantwoorden van de
roker_id vraag met Ja. Omgekeerd zal als de vraag weer met Nee wordt beantwoord
de roker_hoelang_id niet meer worden getoond
Figuur 16. Voorbeeld van de StringShowVraagActieInstantie in het formulieren tabblad
ExpressionBerekeningActieInstantie
Een andere actie dat onderzocht is, is de ExpressionBerekeningActieInstantie.
Dit is een actie dat toegepast kan worden om bijvoorbeeld antwoorden in een vraag in te vullen op basis van een eerder opgegeven antwoord in een andere vraag.
Voorbeeld:
Vraag 1: Bent u een roker? A: Ja
B: Nee
vraag 2: De volgende behandeladvies die worden voorgesteld: A: Dieet
B: Stoppen met roken C: Afvallen
22 Stel een beheerder wilt dat antwoord B ingevuld gaat worden in vraag 2 als in vraag 1 antwoord A is aangevinkt dan kan dit bereikt worden door de
ExpressionBerekeningActieInstantie toe te passen. Bij zulke acties moet de beheerder een expressie opgeven. Een expressie die opgesteld kan worden voor de
ExpressionBerekeningActieInstantie kan als volgt eruitzien.
if (vraag1_id == 'Ja') {
vraag2_id = 'Stoppen met roken'; }
Figuur 17. Voorbeeld expressie waarin aan wordt gegeven als vraag 1 met ja wordt beantwoord, zet vul dan voor vraag 2 het volgende antwoord
In de database wordt de expressie als tekst opgeslagen en zal tijdens het bouwen van het formulier met de JEXL(Java Expression Language) [7] de expressie worden
uitgelezen. JEXL is een library die een expression language implementeert op basis van een paar extensies in de JSTL Expression Language [8].
Dit betekent dus dan ook dat in het formulierencomponent met behulp van JEXL, acties zoals de ExpressionBerekeningActieInstantie uitgevoerd kan worden door de expressie eruit te lezen en de statements uit te voeren door JEXL.
23
4.2 Realisatie
Door het beantwoorden van de voorgaande deelvragen is bekend dat de Excel definities opgesplitst worden in stukken en in de database wordt opgeslagen. De informatie die in de database staat wordt gebruikt om formulieren te bouwen. Een formulier uit meerdere soorten components bestaat en ieder component een onderlinge relatie heeft. Daarnaast worden expressie uitgelezen om bepaalde acties uit te voeren.
Met deze kennis is nagedacht over hoe het nieuwe formulierencomponent in het Angular framework gebouwd kan gaan worden. Aangezien de definities in de database staan opgeslagen is er besloten om voor in de back-end een library te schrijven. Deze library zorgt ervoor dat de juiste definities van het Excel bestand eruit worden geselecteerd en een JSON-object wordt opgesteld die ondersteuning moet gaan bieden voor het formulierencomponent in de front-end. Deze library wordt ook wel de FormulierenElement library genoemd (zie hoofdstuk 4.2.1.1).
Voor in de front-end is er een nieuwe formulierencomponent implementatie in het Angular framework gebouwd. Er is een FormulierComponent library gebouwd die in een Angular applicatie gebruikt kan worden. De Angular applicatie communiceert met de back-end en krijgt het JSON-object binnen waarin de formulier definities in staan. Het JSON-object wordt aangeleverd aan het FormulierComponent library waarop die vervolgens formulier componenten gaat bouwen. Het
FormulierComponent levert uiteindelijk een formulier op die voor de gebruiker te zien is en gebruikt kan gaan worden.
Tijdens het gebruik van een formulier is het mogelijk dat er acties getriggerd worden. Bij bepaalde acties zijn er soms expressies aangekoppeld. Voor het uitvoeren van de expressie is er een parser geschreven die een AST (Abstract Syntax Tree) (zie
hoofdstuk 4.2.1.3) uit leest en aan de hand daarvan een resultaat geeft waarop de actie uitgevoerd wordt.
Tot slot kan de gebruiker het ingevulde formulier opslaan waarbij het
FormulierComponent alle antwoorden bij elkaar verzameld en een antwoorden lijst aanlevert aan de Angular applicatie (zie hoofdstuk 4.2.1.4). De Angular applicatie heeft dan de mogelijkheid om deze antwoorden weer op te sturen aan de back-end waarin het in de database wordt opgeslagen.
In figuur 18 is een architectuur diagram afgebeeld van de nieuwe formulierencomponent.
24
Figuur 18. Nieuwe implementatie waarin te zien is dat het FormulierComponent library formulieren op de client-side bouwt en het aanmaken van het JSON-object aangemaakt wordt door het FormulierElement library.
4.2.1 Implementatie
In dit hoofdstuk wordt de implementatie besproken. Hierin zijn keuzes gemaakt en oplossing bedacht om het formuliercomponent te gaan bouwen in het Angular framework. Het opstellen van een JSON-object voor ondersteuning voor het
formulierencomponent, het bouwen van formulieren en het toepassen van de logica implementaties worden in dit hoofdstuk besproken.
Voor een gedetailleerde uitleg van de implementatie wordt naar Bijlage A verwezen [Technisch Document].
4.2.1.1 FormulierElement library
Er is besloten om een FormulierenElement library te bouwen die als doel heeft om de Excel definities (zie hoofdstuk 4.1.1.1) uit de database op te halen zodat er een JSON-object gebouwd kan gaan worden. De informatie het JSON-JSON-object verteld wat voor soorten componenten er gebouwd moet worden. Het FormulierenElement library is in Java geschreven.
Uit het onderzoek is gebleken dat in de database de volgende vier definities in aparte tabellen wordt opgeslagen.
- FormulierElement - ActieInstantie - VraagDefinitie - AntwoordDefinitie
25 Aangezien deze vier definities in vier verschillende tabellen bevinden in de database is er een oplossing bedacht om in stapjes de definities eruit te halen. In figuur 19 is er een Activity diagram waarin het de flow van het ophalen van deze definities
geschetst. Er is gekozen om eerst alle FormulierElementen die bij het formulier horen op te halen. Hiermee wordt ervoor gezorgd dat de formulier element id gebruikt kan gaan worden om de overige definities op te halen. Aangezien de ActieInstantie en VraagDefinitie een verwijzing hebben naar een formulier element id. De
AntwoordDefinitie zal als laatst opgehaald worden vanwege het feit dat een
AntwoordDefinitie altijd gekoppeld is aan een VraagDefinitie. Het is niet praktisch om eerst de AntwoordDefinitie op te halen voordat er nog niet bekend is wat de
VraagDefinitie is.
26 Het FormulierElement library levert uiteindelijk JSON-object op waarin de vier
definities in terug komen. Het object bestaat uit een “element” dat wat zegt over de type component dat gemaakt moet worden. Een “actieInstantie” die informatie bevat om welke actie het gaat dat uitgevoerd moet worden op dit component. Een
“vraagDefinitie” die informatie bevat over wat voor soort vraag er getoond moet worden bijvoorbeeld een vraag waarin de antwoorden weergeven moeten worden in radio buttons. En tot slot een “antwoordDefinitie” die een lijst met antwoorde
keuzemogelijkheden bevat. Met behulp van deze informatie is het mogelijk om een formulier component te gaan bouwen dat onderdeel is van een geheel formulier.
Figuur 20. JSON-object waarin de vier objecten in staan die informatie aanleveren aan het FormulierComponent om formulieren te gaan bouwen.
27
4.2.1.2 FormulierComponent library
Voor het bouwen van formulieren is er in Angular een FormulierComponent library gebouwd. Het FormulierComponent library heeft als doel om het JSON-object dat afkomstig is uit de back-end te kunnen parsen en op runtime formulier components te bouwen om tot een formulier te komen.
Aangezien er van tevoren niet bekend is hoe dit formulier eruit moet komen te zien en welke vragen er getoond moet worden moet er met een oplossing komen dat het FormulierComponent op runtime Angular components kan gaan bouwen.
Components in Angular vormen de basis voor het bouwen van Angular applicaties. Elk component bevat het volgende
– HTML-template – Typescript class – CSS selector – CSS-styling
In de HTML-template wordt de view van het component bepaald. Dit is uiteindelijk datgene wat gerenderd wordt in de browser. Naast het feit dat dit dezelfde
functionaliteit heeft als een gewone HTML-pagina, kan in een Angular HTML template extra functionaliteiten worden gebouwd door de Angular template syntax te
gebruiken.
Een component class wordt met de @Component tag gedefinieerd en hierin wordt de selector en HTML-template url aangegeven (figuur 21). De selector is een CSS selector dat gebruikt kan worden in een andere template HTML van een ander component. Bij het gebruik van deze selector zal Angular een instance van het component aanmaken en toevoegen. De template url is de component view, dat getoond wordt aan de gebruiker.
Aangezien er verschillende soorten formulieren zijn en ieder zijn eigen functie heeft is het lastig om voor elke formulier soort een aparte component aan te maken met een fixed template. De oplossing hiervoor is om dynamic components [3] aan te maken op runtime.
Figuur 21. Definiëren van een component met behulp van de component tag
28 In hoofdstuk 4.1.2.1 is gebleken dat er vanuit het Excel bestand in de database
uiteindelijk vier verschillende soorten DTYPES worden aangemaakt op basis van de definities in het formulieren tabblad. Dit zou dan ook betekenen dat voor het FormulierComponent vier verschillende templatecomponents gedefinieerd moeten worden. De vier templatecomponents die samen een formulier vormen zijn als volgt
- form_VragenBlok - KolomContainer - SimpleLabel - VraagInstantie
De form_VragenBlok en KolomContainer zijn components die zelf geen vragen en antwoorden tonen maar wel hun child components. Dit child component kan een SimpleLabel of VraagInstantie component zijn. De SimpleLabel component is een component die een view bevat waarin een label getoond wordt. De informatie die nodig is om de label te tonen staat in het JSON-object. De VraagInstantie component is voor het FormulierComponent een interessante, aangezien hierin de vraag en antwoorden getoond moeten worden en tevens een actie moet worden uitgevoerd die gekoppeld is aan een vraag.
Voor het aanmaken van components op runtime is er gebruikt gemaakt van de Angular ComponentFactoryResolver [2]. De ComponentFactoryResolver is een register dat componenten in kaart brengt zodat er ComponentFactory [1] classes aangemaakt worden om instance van een component aan te kunnen maken.
In Angular bevat elk component zijn eigen ViewContainerRef [6] dat verwijst naar de HTML-template. Het is mogelijk om gebruikt te maken van de ViewContainerRef class om components op runtime toe te voegen. Aangezien de ViewContainerRef alleen een view kan toevoegen/verwijderen aan een component, is hij niet in staat om een component instance aan te maken. Dit is de taak van de ComponentFactoryResolver. Wat de ComponentFactoryResolver in feite doet is het aanmaken van een blueprint voor het creëren van een component, waarbij de ViewContainerRef hier gebruik van maakt.
In het FormulierComponent library is er een FormulierFactory gebouwd die het JSON-object binnen krijgt en die gaat parsen. In figuur 22 is het proces van het binnen krijgen van het JSON-object tot aan het creëren van een formulier component met behulp van de ViewContainerRef en ComponentFactoryResolver geschetst.
29
Figuur 22. Het proces waarin formulier componenten worden gecreëerd.
Er is een ComponentService geschreven die ervoor zorgt dat uit het JSON-object het “element” uitgelezen wordt en aan de hand van de “DTYPE” gaat beslissen welk van de vier templatecomponents er aangemaakt moet worden. Bij het aanmaken van deze components is er op dat moment alleen nog een verwijzing naar de
ViewContainerRef. In de createComponent en renderComponent methoden van de FormulierFactory wordt met behulp van de ComponentFactoryResolver en de ViewContainerRef van de templatecomponent een component gecreëerd dat ook getoond kan worden. Door in het hele JSON-object langs te gaan en alle elementen uit te lezen en van elk element een Angular component te bouwen, wordt er een formulier in elkaar gebouwd.
30
4.2.1.3 Logica FormulierComponent
In het onderzoek is geconstateerd dat het Formuliercomponent logica bevat om bepaalde actie uit te kunnen voeren (zie hoofdstuk 4.1.2.1). Acties kunnen expressies bevatten en zal aan de hand van wat de expressie als resultaat geeft een antwoord in kunnen vullen in een vraag.
In de oude Formuliercomponent werd met behulp van JEXL de expressie uitgelezen. Aangezien de nieuwe implementatie in het Angular framework gebouwd is en dit framework gebruikt maakt van TypeScript, is besloten om gebruikt te maken van de TypeScript Compiler API [9].
Een expressie kan aan de TypeScript Compiler API worden aangeleverd, die vervolgens een AST (Abstract Syntax Tree) gegenereerd. Een AST is een
boomrepresentatie van een expressie. In de boom bevinden zich nodes die een constructie aangeeft dat voorkomt in de expressie. In figuur 23 is er een voorbeeld van een AST van de volgende expressie.
if (retin17Re_id == '559') { maculopRe_id = '564'; }
Figuur 23. AST waarin de nodes zijn afgebeeld van de volgende code: if(retin17Re_id =='559'{maculopRe_id = '564'}
31 Een AST bevat informatie die het uitlezen van een expressie ondersteunt.
De TypeScript Compiler API deelt de expressie in kleinere stukken(nodes) en geeft betekenis hieraan. Deze nodes worden in een AST gerepresenteerd.
De FormulierComponent heeft als taak om de nodes in de AST uit te kunnen lezen. Hiervoor is er een ExpressionParserService geschreven die langs elke node gaat en een datamodel creëert waarin de informatie uit de nodes worden opgeslagen. In figuur 24 is het datamodel van de expressie in figuur 23 afgebeeld.
Er is een ReadExpressionService geschreven om dit datamodel te gebruiken en de expressie uit te voeren. De ReadExpressionService weet aan de hand van de key naam in het datamodel om welke node type het gaat. Bijvoorbeeld als het gaat om een “ifStatement” dan wordt er een vergelijking gemaakt tussen waardes. Dit zal een resultaat opleveren en afhankelijk hoe de expressie is opgebouwd zal in het
datamodel verder beschreven zijn wat de vervolgstappen zijn.
Om de expressie ook daadwerkelijk uit te kunnen voeren is vanuit het formulier een antwoorden nodig die bijvoorbeeld gaat kijken of het ingevulde antwoord
overeenkomt met wat in de expressie is opgegeven.
De antwoord keuzemogelijkheden die in een component zitten bevatten een Event binding [4]. Een Event binding luistert naar de response van de gebruiker. Dit kan een muis beweging zijn of een klik in een van de buttons.
Figuur 24. Datamodel waarin de informatie van uitgelezen expressie is in opgeslagen
32 Aangezien de components op runtime zijn aangemaakt weten de aangemaakte
components van elkaar niet dat zij bestaan. Dit betekent dat het niet mogelijk is om op de standaard Angular manier components met elkaar te laten communiceren. De reden dat components met elkaar moeten communiceren is omdat een acties in component A een component B moet triggeren. De oplossing die hiervoor is bedacht is om een ActieService te schrijven die de communicatie tussen de components tot stand brengt.
Eerder in het onderzoek (hoofdstuk 4.1.2.1) is besloten dat er in dit twee acties zullen worden gerealiseerd. De actie “StringShowVraagActieInstantie” en
“ExpressionBerekeningActieInstantie” zijn geïmplementeerd om vragen te tonen (StringShowVraagActie) en antwoorden invullen
(ExpressionBerekeningActieInstantie).
De ActieService zal op basis van de actie type in de “ActieInstantie” een van de twee actie service aanroepen om vervolgens de logica toe te passen op de target
component. De target component wordt aan de hand van de component identifier gevonden en vergeleken met de target identifier van de actie.
De ActieService regelt naast het aanroepen van een specifieke actie ook de
communicatie tussen de components. De ActieService bevat een observable die als taak heeft om data vanuit de ActieService naar een component te sturen die
subscribed is op deze observable. Dit betekent dan ook dat component A geen directe communicatie heeft met component B. Component A weet wel dat hij iets moet vertellen aan component B, alleen zal hij dit niet direct zelf kunnen doen, maar zal hiervoor de ActieService gebruiken.
De ActieService daarentegen weet niet hoe de component deze actie moet
verwerken. De service is alleen bedoeld om het resultaat vanuit een van de acties, StringShowVraagActieService of ExpressionBerekenActieService, door te sturen naar alle components die subscribed zijn op de observable. De component zal bij elke emit (het versturen van data vanuit ActieService) die hij ontvangt, voor zichzelf na gaan of hij degene is die het bericht moet ontvangen en wat hij hiermee verder moet doen.
33 In figuur 26 is er een Activity diagram geschetst die de flow van hoe een actie wordt uitgevoerd toont.
De gebruiker zal op een van de antwoorden in het formulier klikken waardoor de component dit registreert. In de component zal er een check worden gedaan of het een ActieDefinitie bevat. Als dit het geval is dan zal de ActieService gestart worden en zal aan de hand van de Actie Type de actie gestart worden. In de
ExpressionBerekenActieService zal vanuit de expressie een AST worden gevormd en dit uitgelezen worden en een datamodel worden gecreëerd. Aan de hand van dit datamodel kan eruit worden gehaald hoe de expressie uit moet worden gevoerd. Afhankelijk van wat de gebruiker als antwoord aanklikt zal er een resultaat worden opgegeven aan een van de target components. Dit target component zal aan de hand van het resultaat een antwoord invullen bij zijn vraag of de vraag tonen die eerder nog niet getoond is in het formulier.
34
4.2.1.4 Formulier antwoorden
Omdat het formulier uit lossen components bestaat en de components niet met elkaar kunnen communiceren is het lastig om van elk component alle antwoorden direct te verzamelen. Hiervoor is een oplossing bedacht om een CollectDataService te bouwen die van elk component de huidige geselecteerde antwoord ophaalt en
opslaat. Een component zal op het moment dat de gebruiker een antwoord aanklikt dit communiceren met de CollectDataService en zijn antwoord en component identifier doorgeven. De service houdt een Map bij en met de component identifier als key en het antwoord als value. Bij het wijzigen van het antwoord in een van de components in het formulier zal aan de hand van de component identifier de eerder opgegeven antwoord worden overschreven. De Map zal op het moment dat de
gebruiker het formulier op wil slaan naar de back-end worden verstuurd. De back-end slaat vervolgens deze antwoorden weer op in de database.
35
5. Conclusie & Advies
Hoofdvraag
- Hoe kan het formulierencomponent gebouwd gaan worden in het Angular framework om te voorzorgen dat formulieren op basis van de definities die in een Excel bestand zijn aangemaakt gebouwd kunnen gaan worden?
In de volgende paragrafen wordt er een conclusie en advies geformuleerd op basis van het onderzoek en de implementatie.
5.1 Conclusie
Er is tijdens het project, onderzoek gedaan naar wat formulier componenten inhouden en onderzocht hoe formulier definities opgesteld worden in het Excel bestand en wat dit betekent voor het bouwen van formulieren.
Uit dit resultaat is gebleken dat een formulier uit verschillende type components bestaat en ieder een eigen rol speelt in het tot vorm brengen van een formulier. Aan de hand van dit resultaat is een datamodel uit voort gekomen die ondersteuning biedt voor de creatie van componenten.
Met deze kennis en de wens vanuit het TeleDIA team om het formulierencomponent in het Angular framework te gaan bouwen is er een proof of concept gebouwd waarin twee prototypes zijn gebouwd.
Er is een FormulierComponent library prototype gerealiseerd die ervoor zorgt dat op runtime niveau Angular componenten worden gebouwd op basis van informatie vanuit het JSON-object.
De library kan geïmporteerd worden in een Angular applicatie waarin gebruik kan worden gemaakt van de FormulierFactory. De Angular applicatie levert een JSON-object response aan de library waarop vervolgens een formulier getoond kan worden aan de gebruiker.
Voor het aanmaken van het JSON-object is er een FormulierElement library prototype gerealiseerd. Deze library zorgt ervoor dat in een database de formulier elementen bijbehorende formulier worden verzameld en tot een component datamodel worden gevormd die uitgelezen kan worden door het FormulierComponent library.
De FormulierElement library kan geïmporteerd worden in een spring boot applicatie, waarin de controllers gebruik kunnen maken van de service van de library.
36 Een formulier kan bij bepaalde componenten een acties bevatten die de logica van het component definiëren. Zo is er tijdens dit project besloten om twee acties te implementeren om aan te tonen wat de mogelijkheden zijn betreft het toepassen van logica in het FormulierComponent library. Omdat acties een expressie kunnen
bevatten is er een parser geschreven die met behulp van de TypeScript compiler API een AST oplevert. De nodes binnen deze AST worden uitgelezen en in een datamoel komen te staan die voor het FormulierComponent makkelijk te lezen en uitvoerbaar is.
5.2 Advies en aanbevelingen
De gemaakte prototypes kan als leidraad gebruikt worden bij het maken van een definitieve keuze betreft het implementeren van het formulierencomponent in Angular.
Het FormulierComponent library geeft weer wat de mogelijkheden zijn als het gaat om het bouwen van components op runtime niveau. In de implementatie is er alleen rekening gehouden met vier verschillende soorten components. Dit betekent
uiteraard niet dat dit ook de limiet is. Het team kan in de toekomst besluiten om nieuwe soorten components te introduceren in het formulier.
Om de scope van het project niet te groot te maken is besloten om niet alle acties te implementeren maar alleen een paar die aantonen wat de mogelijkheden zijn in het uitvoeren van acties. Voor acties die een expressie bevatten is in het
FormulierComponent library een parser geschreven die een aantal “nodes” uit de AST eruit kan lezen.
De parser kan verder uitgebreid worden waardoor er complexere logica toegepast kan worden op het formulier. Denk hierbij aan het uit kunnen lezen van “while statements”, “function declaration”, “Array expressions” etc.
37 Geadviseerd wordt om het formulierencomponent op te splitsen in twee delen en twee lossen modules te bouwen. Waarbij één module in de back-end ervoor zorgt om de formulier elementen van het formulier te verzamelen om een datamodel op te zetten. Het andere deel zit in de front-end die ervoor zorgt dat dit datamodel uitgelezen kan worden en op runtime Angular components kan gaan bouwen. Het voordeel hiervan is dat de back-end minder belast wordt aangezien het bouwen van formulieren in de client gebeurt. Daar waar in de huidige formuliercomponent steeds een nieuw formulier wordt aangeleverd vanuit de server, zal op bij de nieuwe
implementatie op client-side de berekeningen en logica worden toegepast waardoor het formulier op client-side aangemaakt wordt.
Figuur 27.Oude implementatie van het formulierencomponent
38
6. Reflectie
Er is in het begin van dit project veel tijd besteed aan het onderzoeken naar hoe het formuliercomponent werkt en hoe het Excel bestand in elkaar zit. Het heeft ook een aantal weken geduurd om echt te snappen wat alle Excel definities betekenen en hoe met deze informatie formulieren gebouwd kunnen worden. Daarnaast kwam ook nog het feit dat formulieren logica bevatten en hierin goed over na moet worden gedacht hoe deze logica verwerkt wordt in het formulier.
Ik vond het implementeren van de FormulierComponent library een uitdaging
aangezien ik goed moest nadenken hoe ik de relatie tussen bepaalde components in kaart wil brengen en hoe de logica toegepast moest worden op het formulier. Hierin heb ik veel geleerd over hoe in Angular bepaalde technieken gebruikt kan worden om tot een oplossing te komen. Tijdens deze periode heb dan ook veel geleerd over het Angular framework.
De wekelijkse voortgangsgesprekken die ik samen met mijn bedrijfsbegeleider voerde hebben mij wel geholpen om steeds een overzicht te houden hoe ver ik in het project zit. Wat ik anders zou doen voor de volgende keer is om de andere developers in het TeleDIA team meer te betrekken in mijn project en ook bij hun vragen te stellen over bepaalde problemen en oplossingen. Daarnaast denk ik wel dat door
omstandigheden (Covid pandemie) voor mij persoonlijk lastiger was om vragen te stellen aangezien communicatie tijdens het project veel digitaal ging en ik dat minder prettig vindt werken.
Waarin ik ook vooral moeite mee had tijdens dit afstudeerproject was om in het verslag aan de lezer duidelijk te maken wat er precies is gedaan en wat de probleem- en doelstellingen zijn. Ik heb van de afstudeerdocent hier feedback op gekregen op welke punten ik niet duidelijk in ben. Aan de hand van de feedback heb ik besloten om met twee medewerkers vanuit Topicus, in een apart gesprek, hun inzicht te geven wat de probleemsituatie is en hoe dit probleem opgelost gaat worden en wat er is gerealiseerd. Uit deze gesprekken kwam veel nuttige informatie en tips uit die mij hebben geholpen om dit beter te schetsen. Voor de volgende keer ga ik ook eerder beginnen om dit op deze manier te doen.
39
7. Beroepscompetenties
Aan het begin van de afstudeerperiode heeft de afstudeerder aangegeven welke beroepscompetentie gedurende de opdracht aan gewerkt wordt en beoordeelt wil worden.
In figuur 29 zijn de beroepscompetentie op niveau 3 aangegeven.
Beroepsactiviteit beh er en an al ys eren advi se ren o nt w erpen real iser en A rc hi te c tu url ag en gebruikersinteractie bedrijfsprocessen infrastructuur software 3 3 3 hardware interfacing Figuur 29. Beroepsactiviteiten Software - Analyseren
Er is onderzoek gedaan naar het Excel bestand en hoe de huidige
formuliercomponent de informatie van Excel gebruikt om formulieren te bouwen. Met behulp van dit onderzoek zijn de deelvragen en hoofdvraag beantwoord. Software – Ontwerpen
Aan de hand van de analyse is er nagedacht hoe bepaalde problemen opgelost kunnen worden. Zo zijn er softwarearchitecturen gemaakt die in kaart brengen hoe het systeem moet werken en hoe bepaalde onderdelen van het systeem met elkaar communiceert.
Software – Realiseren
Aan de hand van de resultaten in het onderzoek en de gemaakte
softwarearchitecturen is er een proof of concept gerealiseerd waarbij twee prototypen zijn gebouwd die aantonen hoe het nieuwe formulierencomponent gebouwd kan worden en hoe dit formulieren kan gaan bouwen.
40
8. Verwijzingen
[1] Angular ComponentFactory. (sd). Opgehaald van https://angular.io/api/core/ComponentFactory [2] Angular ComponentFactoryResolver. (sd). Opgehaald van
https://angular.io/api/core/ComponentFactoryResolver [3] Angular Dynamic component loader. (sd). Opgehaald van
https://angular.io/guide/dynamic-component-loader
[4] Angular Event binding. (sd). Opgehaald van https://angular.io/guide/event-binding [5] Angular observables. (sd). Opgehaald van https://angular.io/guide/observables [6] Angular ViewContainerRef. (sd). Opgehaald van
https://angular.io/api/core/ViewContainerRef
[7] JEXL. (sd). Opgehaald van http://commons.apache.org/proper/commons-jexl/index.html [8] JSTL. (sd). Opgehaald van
http://www.inf.fu-berlin.de/lehre/SS03/19560-P/Docs/JWSDP/tutorial/doc/JSTL4.html [9] TypeScript Compiler API. (sd). Opgehaald van
41
