Bioscape

De uitdaging

De opdrachtgever brengt in kaart hoe locaties scoren op duurzaamheidsthema's zoals klimaat en groen. Een groot deel van dat werk leunt op ruimtelijke berekeningen in een extern 3D-simulatieplatform voor ruimtelijke planning. Voordat die berekeningen kunnen draaien, moet daar een project worden aangemaakt met de juiste locatie en analyse-instellingen, en daarna moeten de resultaten worden opgehaald. Dat handmatig doen voor elke locatie was niet vol te houden naarmate het aantal locaties groeide.

De opdrachtgever had een webplatform nodig waarop haar klanten zelf een locatie konden vastleggen, door die op een kaart te tekenen of een GeoJSON-bestand te uploaden, terwijl het rekenwerk op de achtergrond werd afgehandeld. Dat betekende een multi-tenant applicatie met klanten, organisaties, gebruikers en rollen, een kaartinterface om geometrie vast te leggen en een koppeling met een externe API die werkt met stateful workflows in meerdere stappen. Die koppeling en de rapportage lagen bij mijn twee teamgenoten. Ik richtte me op de basis van de applicatie, de frontend en de kaart.

Ik werkte eraan als freelancer, ingehuurd via een klein ontwikkelbureau dat een team van drie developers samenstelde. In een periode van ongeveer twee maanden bouwden we de basis van de eerste versie en later dat jaar ging het platform live bij de opdrachtgever.

Wat ik heb gebouwd

• De basis van de Laravel-applicatie: het eerste datamodel voor klanten, organisaties, projecten, gebruikers en adressen, en het patroon met Action-classes dat in de hele API terugkomt, met een PaginateAction-basisclass voor paginering, filters en sortering en een klein make:action-commando om nieuwe actions op te zetten.
• De Vue 3 single-page app: routing, Pinia-state, vue-i18n met Nederlandse vertalingen voor de meeste schermen en een aanzet voor Engels, en herbruikbare componenten voor layout, tabellen en formulieren, opgemaakt met Tailwind CSS en patronen uit Tailwind UI.
• De beheerschermen voor gebruikers, klanten, organisaties en projecten, inclusief de bijbehorende API-endpoints, form requests en API resources.
• Authenticatie voor de SPA met de cookiegebaseerde sessies van Laravel Sanctum: inloggen met gebruikersnaam en een 'onthoud mij'-optie, endpoints voor wachtwoord vergeten en resetten met een resetlink per e-mail, en een profielpagina waarop gebruikers hun gegevens en voorkeurstaal aanpassen.
• Het kaartscherm van een project op Google Maps: getekende locatiepolygonen worden via de areas-API bewaard en daarna opnieuw op de kaart getoond, plus een GeoJSON-upload die gekoppeld is aan de importlogica van een teamgenoot, die ik naar een eigen endpoint verplaatste.
• Samen met een teamgenoot: het datamodel voor rollen en rechten met vier standaardrollen, meegestuurd met het ingelogde account zodat de SPA de rechten van een gebruiker kon uitlezen.