Wil je een schema, tekening, grafiek of afbeelding maken en of bewerken? Dan heb je een ruime keuze aan tools die je hiervoor kan gebruiken. Een aantal bekende tools zijn bijvoorbeeld Miro, Excel of Photoshop. Voor simpele bewerkingen werkt dit prima, wil je echter business rules voor product specifieke eigenschappen toevoegen en deze centraal borgen? Dan kom je er niet zo gemakkelijk mee weg. Zo heeft Excel maar een beperkt aantal regels/cellen ter beschikking en kan je in Photoshop nergens jouw tekenlogica centraal borgen. Een oplossing hiervoor is het ontwikkelen van een visualisatietool (product configurator) in een webapplicatie. Het volledige pakket van schema, tekening of afbeelding met business rules is hierin geborgd.
Een sprekend voorbeeld
Een mooi voorbeeld hiervan is de case ‘Software voor volledig geautomatiseerde projectcalculaties’. Onze frontend developer Sybren is nauw betrokken geweest bij de ontwikkeling van deze webapplicatie. Tijdens een vraaggesprek vertelt hij meer over deze case en over visualisatietools in webapplicaties in het algemeen.
Onlangs heb je een visualisatietool in een webapplicatie ontwikkeld, wat was precies jouw opdracht?
‘De opdracht die in het algemeen voorlag was: ontwikkel een tool om ons product te visualiseren met daaraan calculaties gekoppeld. Mijn opdracht was om te kijken welke tools er geschikt waren om te gebruiken binnen de webapplicatie. Geen enkele tool bood echter het door ons benodigde totaalpakket: een tekening inclusief business rules. Ik ben toen op zoek gegaan naar mogelijkheden om iets te ontwikkelen. En om niet het wiel helemaal zelf te gaan uitvinden ben ik eerst op zoek gegaan naar tools om een start te maken. Dit startpunt was het gebruik van de techniek PixiJS. Op basis van deze techniek was ik in staat de visualisatietool verder te ontwikkelen, op basis van mijn eigen kennis en expertise. De uiteindelijke tool tekent in pixels, waarbij de achterliggende logica in millimeters rekent. Om hier te komen zijn we in gesprek gegaan met de klant om de business rules in beeld te krijgen. Wekelijks vond er overleg plaats om de voortgang en mogelijkheden te bespreken. Verschillende scenario’s van mogelijkheden zijn uitgewerkt om uiteindelijk te komen tot het eindresultaat.’
Waarom zou je eigenlijk het visualiseren van producten moeten automatiseren via een webapplicatie?
‘Door het proces te automatiseren is het mogelijk om medewerkers bezig te laten zijn, waar zij echt mee bezig horen te zijn zoals het leveren van maatwerk. Naast het automatiseren van een proces, wordt deze ook geoptimaliseerd. Hier zit de winst!
De webapplicatie is online en 24/7 beschikbaar, waardoor de doelgroep eenvoudig en snel een visualisatie krijgt van het product en een offerte. Kortom: snellere levertijden, 24/7 beschikbaar, gebruiksvriendelijk en minimale foutmarge.’
Wat voor visualisaties vang je in een webapplicatie?
‘Met alle business rules goed in beeld, is het mogelijk om alle soorten visualisaties van producten te vangen in een webapplicatie.
In de meeste gevallen worden hiervoor visualisaties in 2D ontwikkeld, dit biedt namelijk vaak voldoende mogelijkheden. Het ontwikkelen van visualisaties in 3D is natuurlijk ook mogelijk, de logica valt dan nog beter te controleren. Het ontwikkelen hiervan is echter vaak complexer en daardoor kostbaarder.’
Wat is nodig om aan de slag te gaan met een visualisatietool in een webapplicatie?
‘Naar mijn idee is het belangrijk dat voordat je daadwerkelijk gaat ontwikkelen, de volgende stappen doorloopt:
- Ontdekken hoe het huidige proces exact werkt
- Kijken hoe het proces geoptimaliseerd kan worden
- Een MVP in beeld brengen
- De business rules in beeld brengen, waar zit de complexiteit?
- Alles uitwerken en visualiseren
Zijn bovenstaande punten doorlopen en goed in beeld gebracht? Dan is het tijd voor de volgende stap: het ontwikkelen van de visualisatietool. Goede begeleiding tijdens het doorlopen van deze stappen is van essentieel belang.’
Als jij een visualisatietool mag ontwikkelen, hoe ziet deze er dan uit?
‘De case waarover wij nu spreken is iets waar ik trots op ben. Deze case is voor mij een mooie uitgangspositie om verder op door te gaan. Hierin volg ik de trend van het zoveel mogelijk naar het web halen van applicaties en tools. Het is goed om te zien dat al veel applicaties te vinden zijn in de Cloud. Het mooiste zou ik vinden dat echt alles naar het web gaat. Zo ook alle functionaliteiten die Photoshop biedt of AutoCAD®. Waarbij ik mij zeker ervan bewust ben dat er altijd zaken zijn die niet naar het web toe te halen zijn.
Maar goed, weer even terug naar de case. Wat ik hieraan mooi vind is dat de ontwikkelde visualisatietool te vergelijken is met Photoshop of Illustrator. Een extra pluspunt in tegenstelling tot andere tools is dat je in de visualisatietool op elk willekeurig moment in het proces wijzigingen kan aanbrengen.
Nu ik dit zo overdenk, is mijn antwoord op de vraag als volgt het beste te formuleren: het ontwikkelen van een visualisatietool in de Cloud, waarbij ik uitgedaagd word in het ontdekken van optimalisatieslagen voor de opdrachtgever en de eindklant.‘
Tijdens dit project heb je gewerkt met PixiJS en Vue.js? Waarom heb je hiervoor gekozen en welke voordelen biedt het?
‘Vue.js is ons ‘preferred framework’. Eerder heb ik meegewerkt aan een blog hierover en daarin lees je exact waarom dit is. Het framework PixiJS moet je zien als een hulpmiddel welke wij gebruiken om de webapplicatie te ontwikkelen. In beeldspraak omschrijf ik dit als volgt: PixiJS geeft je kwasten, waardoor wij weten hoe het schilderij geschilderd moet worden en niet zelf het wiel hoeven uit te vinden. Hierdoor is het mogelijk dat wij ons focussen op belangrijke zaken: de business rules (ons blanco canvas).Natuurlijk zijn er nog veel andere frameworks beschikbaar, echter kwam PixiJS al beste uit onze test (een ‘proof of concept’) naar voren.’
Een unieke visualisatietool, door jou ontwikkeld, is nu in gebruik. Welke optimalisatiekansen zie jij nog liggen?
‘Dit hangt natuurlijk in zijn geheel af van de wensen van de opdrachtgever. Maar als ik dan toch een advies mag geven, dan zou je het hele bestelproces kunnen uitbreiden door een koppeling te maken met de CRM-applicatie. De webapplicatie met visualisatietool is overigens recent al geoptimaliseerd. Het is nu minder statisch en het aantal mogelijkheden is uitgebreid. Wat ook nog mooi zou zijn is het visualiseren van nog meer zaken en of details door het gebruik van bijvoorbeeld arcering. En wat zeker nog als optimalisatiekans op de lijst moet staan, is het uitbreiden van de business rules. Dit om zo nog meer mogelijk te maken binnen de visualisatietool.’
Wat is jouw advies aan opdrachtgevers die hun bedrijfsprocessen willen automatiseren en optimaliseren via een webapplicatie?
‘Begin klein, bewijs de toegevoegde waarde van de webapplicatie en focus op de klantbehoefte. Wat naar mijn idee vaak misgaat, is dat er vanuit de eigen behoefte gedacht wordt en niet vanuit de eindklant. Mijn advies is dan ook om altijd een testgroep in te richten waar de doelgroep in is vertegenwoordigd. Daar draait het tenslotte om: jouw doelgroep. En ‘last but not least’: een visualisatietool ontwikkelen in een webapplicatie voor maar één persoon, dat is zonde van ieders investering. Wees je daarvan bewust!’