TheorieGO
Webapplicatie ontwikkeling
In deze casestudy neem ik je mee door de ontwikkeling van TheorieGO en daarbij horende uitdagingen, oplossingen, en het positieve resultaat.
TheorieGO is een platform waarmee klanten kunnen oefenen voor het CBR theorie-examen auto.
Type
- Webapplicatie
- SaaS
Rol
- Software-architect
- Softwareontwikkelaar
- Onderhoud
- CI/CD
Tijdlijn
- 2019 - Heden
Opdrachtgever
- Autorijschool Easy Go
- ismotion
Uitdagingen en doelen
Het project begon nadat ik werd benaderd door de opdrachtgever met een pitch voor het project. Op basis van dat eerste idee, heb ik een prototype gemaakt. Vervolgens hebben we samen besloten te werken aan het project, waarbij ik voor alle technische taken wordt ingehuurd.
De opdrachtgever en ik hebben een lijst met alle eisen (requirements) samengesteld en geprioriteerd. Alle eisen heb ik vervolgens omgezet in usecases die moesten worden geïmplementeerd.
Vormgeving zoals de huisstijl, het ontwerp, logo en alle overige visuele aspecten worden door de opdrachtgever ontwikkeld.
In deze video zie je hoe een klant inlogt, een examen maakt en de resultaten ervan bekijkt.
Architectuur
Aan de hand van verschillende aspecten heb ik de architectuur ontwikkeld. Onder deze aspecten vielen:
- De use-cases
- Overige wensen
- Mogelijk toekomstige features
- Design patterns
- Schaalbaarheid
- Onderhoudbaarheid
Hoewel de architectuur gedurende het project enigszins is veranderd, is het in de basis hetzelfde gebleven. Met de gekozen architectuur, konden we makkelijk het systeem opschalen en uitbreiden. Daardoor konden we telkens onze doelen behalen.
In het volgende abstracte diagram zie je een aantal verschillende componenten en hoe deze met elkaar verbonden zijn.
Technieken
Met de architectuur in gedachten, konden de geschikte technieken voor de implementatie worden gekozen
Voor de eerste versie (uit 2019) werd er gekozen om de back-end met het Play Framework te ontwikkelen. Het front-end werd met vanilla JavaScript in combinatie met HTML en CSS gemaakt.
Dit is later (in 2022) bij een grote onderhoudsbeurt en rebranding vervangen door het Spring Framework voor de back-end & React.js als front-end.
Daarnaast heb ik onder andere Tailwind CSS, Next.js & Typescript toegepast. Alle technieken heb ik gekozen op basis van geschiktheid, relevantie, onderhoudbaarheid en toekomstige groei.
Ontwikkelproces
Tijdens dit project werken we met Scrum. Dankzij deze agile projectmethode kunnen we flexibel en effectief werken.
Iedere sprint werk ik aan nieuwe features met meerdere releases per sprint. Veranderende eisen kunnen dus snel worden opgenomen, geïmplementeerd en live gaan tijdens iteraties.
Een goed voorbeeld hiervan is toen het CBR de examenvorm aanpaste — door onze flexibele manier van werken konden we de verandering zonder problemen meenemen in onze applicatie.
Implementatie
Door de CI/CD-pipeline (continuous integration / continuous delivery) wordt er constant aan het systeem gewerkt. Dat kan zijn: het implementeren van nieuwe features, doorvoeren van wijzigingen of uitvoeren van onderhoud.
Voor het schrijven van code staan onderhoudbaarheid, testbaarheid en schaalbaarheid centraal. Dit draagt bij aan het opleveren van een solide, betrouwbaar product zonder grote problemen.
Testen
Zoals in alle softwareprojecten waar ik aan werk, schrijf ik geautomatiseerde testen. Hierdoor kan ik continu monitoren of het systeem werkt zoals verwacht en direct detecteren wanneer dat niet zo is. Bij het bouwen of wijzigen van functionaliteiten, worden de desbetreffende testen gemaakt of bijgewerkt.
De back-end code, gebouwd met het Spring Framework, wordt volledig getest met unit- en integratietesten.
De frontend-applicaties, gebouwd met React, Typescript en Next.js, worden volledig getest met front-end end-to-end testen. Voorheen zijn deze met Cucumber.js, Selenium en Chai.js gebouwd. Inmiddels gebruik ik Playwright voor alle front-end testen. In mijn blog vertel ik meer over mijn overstap naar Playwright.
Continuous development & integration
Zoals eerder genoemd, werk ik met een CI/CD-pipeline. Dit sluit goed aan op het Scrum framework. Dankzij deze combinatie is de applicatie volledig up-to-date gehouden afgelopen jaren.
Er wordt voortdurend gewerkt aan dit project waarbij ik zeer trots ben op mijn bijdrage.
Screenshots
De homepagina is met Next.js geïmplementeerd. Het ontwerp is door de opdrachtgever aangeleverd.
De homepagina is met Next.js geïmplementeerd. Het ontwerp is door de opdrachtgever aangeleverd.