Front-end 

In dit hoofdstuk is beschreven hoe de client applicatie is opgebouwd, welke externe  afhankelijkheden er zijn gebruikt om eigenschappen te realiseren, uit welke 

5.2.2.3.1. Framework/programmeertaal 

De applicatie is gebouwd met het Angular framework versie 9. Deze versie van het  framework is gebaseerd op TypeScript versie 3.7 of hoger. 

5.2.2.3.2. Angular 

Angular is een TypeScript gebaseerd web framework voor het bouwen van ‘single  page web apps’. De applicaties zijn opgebouwd uit zogenaamde ‘NgModules’ die de  context schetsen waarin ‘Components’ gecompileerd kunnen worden: 

- Components zijn sets van browser elementen die de interface definiëren. Deze  components kunnen in combinatie met andere components hergebruikt  worden om zo op een efficiënte manier de interface te bouwen. 

- Components maken gebruik ‘Services’ die logica bevatten voor het beheer van  data. 

Verdere verdieping in dit framework kan middels de docs: ​https://angular.io/docs 

5.2.2.3.3. Typescript/HTML/CSS 

Voor de logica van het Angular framework is TypeScript gebruikt, daarnaast worden  de browser elementen weergegeven met HTML en gestyled met CSS. TypeScript is  gebaseerd op JavaScript met toevoeging van types. Meer informatie over 

Type/JavaScript, HTML & CSS kan gevonden worden op W3Schools: 

https://www.w3schools.com/js 

https://www.w3schools.com/html 

https://www.w3schools.com/css 

5.2.2.3.4. Dependencies 

Een framework biedt een solide basis om een applicatie op te zetten, omdat een  framework doorgaans open source is zijn er diverse ontwikkelaars en teams die  toevoegingen realiseren en beheren om de implementatie van bijvoorbeeld design of  extra features makkelijk te maken, voor dit project zijn de volgende toevoegingen  gebruikt. 

5.2.2.3.4.1. Material design 

Voor het ontwerp van de interface elementen van de applicatie is gebruik gemaakt  van Material Design. Material is een door Google ontworpen, wereldwijd gebruikt  design, gebaseerd op materialen die we kennen uit de wereld buiten de computer.  Zoals een vierkant wit vlak als papier en een cirkel als knop. Angular kent een 

makkelijke integratie met deze filosofie met de Angular Material component library.  

5.2.2.3.4.2. Formly 

Omdat de interactie met deze applicatie veelal plaatsvindt door middel van het  gebruiken van formulieren, is Formly als externe formsbuilder toegevoegd aan het 

project. Angular heeft een geïntegreerde formsbuilder, echter is deze in gebruik een  stuk omslachtiger dan Formly. Formly biedt een intuïtieve manier voor het renderen  van HTML formulieren op basis van gedefinieerde velden in het component bestand,  evenals het spiegelen van de data die een formulier bevat, middels een ‘model’ object  in de component. Hierdoor wordt het eenvoudig om dynamische voorwaarden te  verbinden aan de waardes in de velden. 

5.2.2.3.5. Componenten 

Voor het renderen van content in de browser van de gebruiken zijn de volgende  componenten ontwikkeld: 

- EventComponent 

In deze component kan een Event gemaakt of bewerkt worden, een Event  heeft een naam en een aantal attributen. Deze component bevat een 

formulier en logica voor het ophalen en opslaan van een Event. Wanneer een  Event bewerkt wordt, wordt deze eerst opgehaald bij de back-end. Als het een  nieuw Event betreft blijven de velden vanzelfsprekend leeg. De velden voor de  attributen worden dynamisch gerenderd met een druk op de knop. 

- EventsListComponent 

Overzicht van alle Events die opgeslagen zijn in het systeem. Het is in dit  overzicht mogelijk om een Event toe te voegen, dit kan middels een grote +  knop onderin beeld. Tevens is het mogelijk om een Event te bewerken of te  verwijderen. Hiervoor zijn in iedere rij in de tabel twee knoppen aanwezig. 

- ActionComponent 

In deze component kan een Action gemaakt of bewerkt worden, een Action  heeft een type en een aantal attributen en doel-attributen. Deze component  bevat een formulier en logica voor het ophalen en opslaan van een Action.  Wanneer een Action bewerkt wordt, wordt deze eerst opgehaald bij de 

back-end. Als het een nieuwe Action betreft blijven de velden vanzelfsprekend  leeg. De velden voor de attributen worden dynamisch gerenderd met een  druk op de knop. 

- ActionsListComponent 

Overzicht van alle Actions die opgeslagen zijn in het systeem. Het is in dit  overzicht mogelijk om een Action toe te voegen, dit kan middels een grote +  knop onderin beeld. Tevens is het mogelijk om een Action te bewerken of te  verwijderen. Hiervoor zijn in iedere rij in de tabel twee knoppen aanwezig. 

- RuleComponent 

In deze component kan een Rule gemaakt of bewerkt worden. Een Rule bevat  één of meerdere ‘antecedents’ en één of meerdere ‘consequents’. De 

component bevat een formulier waarvoor een aantal speciale veldtypes  gerealiseerd zijn die gevonden kunnen worden in de ‘formly’ directory in de  client/src map van het project. Wanneer een Rule bewerkt wordt, wordt deze  eerst opgehaald bij de back-end. Als het een nieuwe Rule betreft blijven de  velden vanzelfsprekend leeg. De velden voor de attributen worden dynamisch  gerenderd met een druk op de knop. 

- RulesListComponent 

knop onderin beeld. Tevens is het mogelijk om een Rule te bewerken of te  verwijderen. Hiervoor zijn in iedere rij in de tabel twee knoppen aanwezig. 

5.2.2.3.6. Services 

Zoals beschreven in de docs van Angular, zijn services verantwoordelijk voor de  communicatie met de back-end applicatie. Deze applicatie heeft er drie: 

- EventsService 

De eventsservice wordt in de componenten gebruikt die bedoelt zijn voor het  beheren van Events. Deze service kan GET requests doen voor het ophalen van  één of alle Events, een POST request voor het opslaan van een nieuw Event,  een PATCH request voor het opslaan van nieuwe waarden in een bestaand  Event en een DELETE request voor het verwijderen van een Event. 

- ActionsService 

De actionsservice wordt in de componenten gebruikt die bedoelt zijn voor het  beheren van Actions. Deze service kan GET requests doen voor het ophalen  van één of alle Actions, een POST request voor het opslaan van een nieuwe  Action, een PATCH request voor het opslaan van nieuwe waarden in een 

bestaande Action en een DELETE request voor het verwijderen van een Action.  - RulesService 

De rulesservice wordt in de componenten gebruikt die bedoelt zijn voor het  beheren van Rules. Deze service kan GET requests doen voor het ophalen van  één of alle Rules, een POST request voor het opslaan van een nieuwe Rule, een  PATCH request voor het opslaan van nieuwe waarden in een bestaande Rule  en een DELETE request voor het verwijderen van een Rule. 

5.2.2.3.7. Testen 

Om de werking van de front-end applicatie te valideren zijn met het, in Angular  standaard geïntegreerde test framework Jasmine, unit tests geschreven. Deze unit  tests worden in een zogenaamde ‘spec.ts’ file geschreven die zich in dezelfde  directory als de component bevindt. Bij het schrijven van tests dient 100% line  coverage gegarandeerd te worden. De specs kunnen gedraaid worden met het  commando ‘docker-compose run client_test’. Hiermee wordt de test container van  client applicatie opgestart en worden alle unit tests één keer gerund door Karma, de  test runner van Jasmine. Na het afronden van de test suite wordt een coverage report  gegenereerd welke te vinden is in de /coverage directory van de /client folder van het  project.