Techniek
· 8 min leestijd

Waarom we onze eigen Demo Studio bouwden

Door Amine Gaaliche · concept opgesteld met Claude, met de hand nagekeken en geredigeerd

Eén demo van promptShield heeft zestien versies: twee thema's maal acht talen. Een schermopname moet bij elke wijziging in de interface zestien keer opnieuw worden gemaakt. Demo Studio legt daarom de handelingen vast en speelt ze opnieuw af in de echte interface.

Zestien is twee maal acht

Voor allebei is er een goede reden. Wie met het donkere thema werkt, herkent het programma slecht in een demo met het lichte thema. Een advocaat in Lyon of Utrecht verwacht de knoppen in zijn eigen taal, zoals Detecteren, Coderen en Zwartlakken in het Nederlands.

Die vermenigvuldiging geldt ook voor elke wijziging. Verschuift er één knop, dan zijn alle zestien versies verouderd. Het waren er veertien, tot het Pools erbij kwam als achtste taal. Ons product verandert vaak, dus die kosten lopen snel op.

Wat bestaande tools vastleggen

Voor interactieve productdemo's bestaat al een ruim aanbod: Arcade, Storylane, Supademo, Trupeer en andere. Elk werkt op zijn eigen manier, maar de grondgedachte is verwant. U doorloopt het product, de tool legt vast wat het scherm toont, en daar maakt u een rondleiding of video van.

Voor de meeste bedrijven is dat een verstandige afweging: snel klaar en verzorgd. Over hun prijzen of mogelijkheden zeggen we niets, want hun dagelijkse gebruikers weten daar meer van.

Ons probleem ligt bij het medium zelf. Een schermopname toont hoe de interface eruitzag. Wijzigt de interface, dan moet u opnieuw opnemen: bij ons zestien keer, met dezelfde bestanden en muisbewegingen. Zo loopt de opname altijd achter op het product.

Handelingen vastleggen in plaats van beelden

Demo Studio legt vast wat de maker deed: open dit bestand, klik op Detecteren, wacht op de vondsten, kies Coderen voor de naam in de kop. Een schermopname wordt één keer gemaakt en bewaard. Demo Studio bewaart zijn opname als draaiboek: een reeks handelingen die telkens opnieuw wordt uitgevoerd.

Dat gebeurt in de echte interface. De route /demo op onze website laadt de frontend van de desktopapp in de browser, met dezelfde React-componenten, CSS en vertalingen. Een webpack-alias, @desktop/*, wijst rechtstreeks naar de broncode van de desktopapp.

Wat met de lokale server of de Tauri-schil communiceert, vervangt webpack bij het bouwen door een module met vaste antwoorden, via de NormalModuleReplacementPlugin. De pdf's tekent pdf.js in de browser. Er is dus maar één interface om bij te houden.

Thema en taal zijn daardoor gewone instellingen bij het renderen. Een wijziging in de desktopapp staat bij de volgende build ook in /demo, en een machine maakt de zestien versies opnieuw. Omdat de demo uit dezelfde code bestaat, kan ze niet van het product afwijken.

Elke taal heeft eigen voorbeelddocumenten met verzonnen gegevens, zoals een BSN of IBAN in Nederlandse vorm. Verdwijnt een knop, dan moet de stap die ernaar verwijst worden aangepast. Dat is één aanpassing voor alle zestien versies.

Wat /demo nu is

Omdat /demo de echte interface toont, lijkt het de plek om het product uit te proberen. Die rol had het vroeger, en dat was een vergissing die we zelfs twee keer hebben begaan. Nu doet de gratis webapp op app.promptshield.ca dat werk: daar werkt u met uw eigen pdf en blijft het document op uw computer.

/demo is nu de renderomgeving van Demo Studio, met vaste voorbeeldgegevens, zodat elke afspeelronde gelijk begint. Een uitprobeeromgeving moet met uw bestanden overweg kunnen. Een renderomgeving moet elke keer hetzelfde doen.

Huren of bouwen

De gebruikelijke raad aan een klein bedrijf is: bouw niets wat u kunt huren. Voor een interface in één taal en één thema die zelden verandert, klopt dat.

Bij ons ging die raad op twee punten niet op. Twee thema's maal acht talen betekent zestien versies per wijziging, bij elke release. Daarnaast draaide de frontend van de desktopapp al in een browser zodra de backend was vervangen. Nieuw te bouwen was dus alleen het vastleggen en afspelen van handelingen.

Wie hetzelfde overweegt, kan zichzelf drie vragen stellen:

  1. Hoeveel versies kost één interfacewijziging, met alle talen, thema's en schermformaten meegeteld?
  2. Hoe vaak verandert de interface in een gewoon kwartaal?
  3. Kan de echte interface al buiten het product draaien, of moet dat eerst gebouwd worden?

Is het antwoord op de eerste vraag één en op de tweede zelden, dan is huren bijna altijd verstandiger. Bij ons waren de antwoorden veertien, vaak en ja.

promptShield heeft geen personeel: er is één oprichter die met AI-modellen als partners werkt, zoals op onze teampagina staat. Samen bouwden zij Demo Studio in een paar dagen. Bouwen is daardoor goedkoper dan een paar jaar geleden, opnieuw opnemen niet.

Het onderhoud ligt wel bij ons, maar één draaiboek bijhouden kost minder dan zestien opnames. Dezelfde afweging maakten we voor wat we echt verkopen, de herkenning van persoonsgegevens. Waarom we die zelf bouwden, leest u apart.

Waarom een privacyproduct zijn demo niet uitbesteedt

Een gehoste demotool bewaart de opnames bij de leverancier. Met een verzonnen voorbeeld is dat geen kwestie van gegevensbescherming. Soms neemt een verkoper echter snel een rondleiding op in een omgeving met klantgegevens, omdat dat overtuigender oogt. Dan verwerkt de leverancier persoonsgegevens namens het bedrijf, en vraagt artikel 28 AVG om een verwerkersovereenkomst.

De Autoriteit Persoonsgegevens houdt toezicht, en voor advocaten en notarissen geldt ook het beroepsgeheim. Of het goed geregeld is, beoordeelt uw eigen jurist. Onze demo's draaien op verzonnen documenten, zonder opnamedienst ertussen. Dat was niet de reden om Demo Studio te bouwen, maar we hebben er geen spijt van.

Veelgestelde vragen

Waarom geen kant-en-klare schermopname gebruiken?

Voor veel bedrijven is dat de goede keuze. Bij ons vermenigvuldigt elke interfacewijziging zich met twee thema's en acht talen, dus met zestien. Een draaiboek wordt één keer aangepast en daarna opnieuw afgespeeld.

Wat gebeurt er als de interface verandert?

De wijziging staat bij de volgende build in /demo, omdat die route de echte frontend laadt. Demo Studio speelt de draaiboeken opnieuw af en maakt alle versies opnieuw. Alleen een stap naar een verdwenen knop moet met de hand worden bijgewerkt.

Hoe blijven acht talen met elkaar in de pas?

Ze worden niet apart gemaakt. Elke taal is dezelfde interface met een andere taalinstelling, en alleen de voorbeelddocumenten verschillen per taal.

Kunt u /demo gebruiken om promptShield uit te proberen?

Daarvoor is de gratis webapp op app.promptshield.ca bedoeld, waar u met uw eigen pdf werkt. /demo is de omgeving waarop Demo Studio zijn demo's rendert.

Was dit nuttig? Laat het ons weten.

Delen