Events Toegangsapp
Webapplicatie ontwikkeling
In deze casestudy neem ik je mee door de ontwikkeling van een evenementen toegangsapp en de daarbij horende uitdagingen, oplossingen, en het succesvolle resultaat.
Met dit platform kunnen beheerders QR-codes voor bestaande toegangspoortjes-systemen delen met klanten via een eigen dashboardomgeving.
Type
- Webapplicatie
Rol
- Software-architect
- Softwareontwikkelaar
- Onderhoud
- CI/CD
Tijdlijn
- 2024 - Heden
Opdrachtgever
- Externe opdrachtgever
Uitdagingen en doelen
Wat betreft de requirements (eisen) en functionaliteiten, is het een relatief eenvoudige applicatie. Voor mij lag de uitdaging vooral op persoonlijk technisch gebied.
Dit is namelijk het eerste professionele project waarbij ik gebruik maak van Kotlin met Gradle. In voorgaande projecten gebruikte ik vooral Java met Maven.
Architectuur
De webapplicatie bestaat uit drie componenten: een gasten-omgeving, admin-omgeving en backend API.
De front-endomgevingen communiceren met de backend omgeving op basis van REST principes.
Hoewel de huidige applicatie vrij klein is, is het dusdanig gebouwd dat er relatief makkelijk nieuwe features en componenten aan kunnen worden toegevoegd.
Technieken
De backend REST-API is met Spring Framework, Kotlin & Gradle gebouwd.
Voor de database heb ik gekozen voor PostgreSQL. Een relationele database is het best passend voor de datastructuren die worden opgeslagen.
De front-endomgevingen zijn met React, Typescript & Tailwind CSS gebouwd. De adminomgeving, maakt daarbij gebruik van Tailwind Plus (via Peggirkit).
In tegenstelling tot vorige projecten, heb ik dit keer geen Next.js gebruikt. Dat heeft te maken met het feit dat deze applicatie besloten is en er dus geen SEO nodig is.
Kotlin
React
Spring Framework
Typescript
Tailwind CSS
PostgreSQL
Gradle
JUnit
ES6 (Javascript)
NPM
Ubuntu
Caddy 2Ontwikkelproces
Met behulp van Scrum, heb ik iteratief gewerkt aan dit project. In eerste instantie heb ik een demo prototype gemaakt als voorstel aan de opdrachtgever.
Na het goedkeuren en ontvangen van feedback, heb ik het prototype kunnen omzetten naar de eerste versie. Als gevolg van het gebruik van de Scrum-methode, kunnen tussentijdse wijzigingen en toevoegingen efficiënt worden verwerkt.
Implementatie
Desondanks de kleine schaal van de applicatie, schrijf ik de code altijd met de gedachte dat het uitgebreid kan worden. Daarbij hoort ook onderhoudbaarheid, adequate codekwaliteit, testbaarheid en schaalbaarheid.
Als in de toekomst nieuwe functionaliteiten worden vereist, kunnen die eenvoudig worden toegevoegd, zonder het verspillen van tijd door het refactoren van oude code.
Testen
Zoals altijd, schrijf ik geautomatiseerde testen. Voor dit project wordt de backend volledig geunittest en zijn er integratietesten.
Daarnaast is er een specifieke component in de adminomgeving, het scannen van QR-codes met de camera, die (vooralsnog) handmatig wordt getest op Android en iOS. Dit vanwege de manier waarop operating systems werken met de camera van apparaten.
Bij vorige projecten heb ik Cucumber.js, Gherkin & Selenium gebruikt voor frontend browsertesten, zoals bij TheorieGO. Voor dit project heb ik de frontend end-to-end testen met Playwright geïmplementeerd.
Mijn keuze voor Playwright heb ik in mijn blog Mijn overstap naar Playwright voor frontend end-to-end testen toegelicht.
Screenshots
Overzicht van de admin-portal zonder toegevoegde evenementen. Het dashboard is met React & Tailwind CSS gebouwd.
Overzicht van de admin-portal zonder toegevoegde evenementen. Het dashboard is met React & Tailwind CSS gebouwd.