DSL’App

Front-end
De interface waarmee de gebruiker van de applicatie interacteert heet de front-end. Dit onderdeel is ontwikkeld in Vue.js. Dit is een vorm van Javascript, HTML en CSS, met als voordeel dat de applicatie reactief is – visuele componenten reageren/wijzigen direct zonder dat de pagina compleet herlaadt – en daardoor erg gebruiksvriendelijk werkt. 

De hoofdpagina van de app toont 4 kleine componenten (urenregistratie, bibliotheek voor data science gerelateerd werk, ideeënbus en verjaardagskalender). Daarnaast is er een pagina voor maandoverzichten (waar de medewerker een maand kan afsluiten als alle uren zijn ingevuld) en een profielpagina, waar de medewerker zich kan abonneren op wekelijkse notificaties ter herinnering. 

Voor het schrijven van uren kiest de medewerker uit alle projecten waaraan hij op het moment van schrijven is gekoppeld. Daarnaast heeft elke medewerker altijd de keuze uit een aantal in-house projecten, zoals sales, kennisdeling of studiedag. De front-end heeft een aantal toevoegingen (web-manifest, service workers en caching) waardoor alle moderne browsers de website herkennen als een standalone applicatie (progressive web app – PWA). 

Back-end
Als de gebruiker in de interface op een knop klikt, wordt er een verzoek naar de back-end (pijl 1 in diagram) verzonden. Dit onderdeel is ontwikkeld in Flask (een Python module) en maakt gebruik van SQLAlchemy, waarmee het database-model ( C) SQL database) gesynchroniseerd wordt met object klassen (pijl 2 en 3). De back-end stuurt in gestructureerd formaat de output van het verzoek terug naar de gebruiker (pijl 4) en fungeert op deze manier als een JSON API. 

Elk object (bijvoorbeeld employee, project, project_ assignment) heeft een reeks functies voor het aanmaken, bewerken en verwijderen van objecten. Administrators van de applicatie kunnen (op aparte backoffice-pagina’s) met deze functies medewerkers aanmaken, die dan een automatisch gegenereerd wachtwoord ontvangen, en ze koppelen aan projecten (met een begin- en einddatum en een tarief). Deze manier van opslaan van gegevens maakt het in de toekomst mogelijk om automatisch facturen te genereren. 

De code van de back-end wordt gevalideerd met zogenaamde Pytests. Dit zijn een aantal scripts die in de code testen of alleen datgene dat verwacht wordt als output terugkomt. 

Front-end
De Vue.js interface wordt met behulp van Node Package Manager (NPM) tot een productie-waardige versie gecompileerd. Deze versie wordt in een App Service op Microsoft’s Azure Cloud platform gehost, waarbij instellingen voor het type webserver bepalen dat deze applicatie als een standalone app zal werken. 

Back-end
De Flask applicatie wordt in een Docker container gehost, eveneens op het Azure platform. Een standaard Flask server is niet optimaal voor productie-doeleinden. Dit probleem is verholpen door een Gunicorn server te gebruiken die de Flask applicatie uitvoert. De Docker container wordt vervolgens gebruikt in een App Service. Met CORS (Cross Origin Resource Sharing) is ingesteld dat alleen het domein van de front-end (bv: dsl.azurewebsites.net) verzoeken mag uitvoeren op het domein van de back-end.

Database
Hiervoor is een nieuwe SQL server, met twee SQL databases (test en productie) uitgerold. Deze database kan als extra beveiliging alleen benaderd worden door specifieke IP-adressen. 

CI/CD
Voor het hele proces van acceptatie-productie zijn een tweetal CI/CD (continuous integration / continuous deployment) pipelines ingericht in Azure DevOps, zodat validatie van de scripts automatisch wordt uitgevoerd, en alleen als een nieuwe versie voor alle tests slaagt, gaat deze versie door naar productie. Het gebruik van deze pipelines maakt het ontwikkelen van applicaties vele malen efficiënter.