Hoe ik mijn allereerste Windows .exe-software creëerde met Claude Code en Codex?

Het is twee maanden geleden dat ik aan het vibe-coden ben, eerst met Claude Code en daarna met Codex CLI. De afgelopen weken had ik nogal wat tokens over en weinig projecten, dus ben ik, gewoon voor de lol, begonnen met het maken van een tool om documenten als audio te beluisteren en tegelijkertijd te annoteren (een mix van Audible en Kindle). Uiteindelijk bleek het echt nuttig: mijn ouders, wiens zicht behoorlijk achteruit is gegaan, hebben het hard nodig om boeken voorgelezen te krijgen via AI. Ik heb besloten om de Windows-softwareversie te maken (een simpele .exe) zodat ze het op hun computer kunnen installeren.

Dit is de eerste keer dat ik software maak. Ook al heb ik wat ervaring, ik ben absoluut geen ontwikkelaar, ik weet wat een algoritme is en heb behoorlijk wat scripts gecodeerd om mijn werk (in marketing) te automatiseren. Maar ik heb nog nooit iets gecompileerd en weet niet eens wat Electron is.

Toen ik (in marketing) werkte voor een softwarebedrijf, bewonderde ik vooral de teams van Product Management (die functies bedenken) en het team QA (quality assurance wiens vak het is om alleen maar bugs en fouten te vinden). Met mijn eigen software kon ik eindelijk “spelen” met product management & QA. Jaaa!!

Ik voer deze prompt in chatGPT in.

Ik wil een software van het type audible maken die werkt op een lokaal web op Windows. Je kunt er urls uploaden maar ook epub-, html-, txt-, pdf-bestanden. Zodra het bestand is geüpload, worden de hoofdstukken automatisch gedetecteerd. In de linkerkolom staan knoppen "upload een bestand", "upload url", "ga naar de bibliotheek", als je op "ga naar de bibliotheek" klikt, zie je aan de rechterkant de lijst met reeds geüploade bestanden; je kunt ze sorteren op datum van toevoeging of A tot Z, of Z tot A, je kunt ook de titel van het bestand wijzigen, je kunt elk bestand gemakkelijk verwijderen. Wanneer je het afspelen van een bestand wilt starten, klik je op de titel van het bestand, de tekst van het bestand wordt weergegeven + de knoppen play, een alinea/hoofdstuk vooruit, de lijst met hoofdstukken, + taalkeuze (EN, FR, VN) stem (man/vrouw), stemtypen, snelheid, pitch. Het is nodig dat de software de alinea die momenteel wordt afgespeeld weergeeft en de positie onthoudt als je stopt of de software sluit. Stel me de aangepaste UI voor, heb je toevoegingen of verbeteringssuggesties? 
  

chatGPT stelt enkele verbeteringen voor, ik breng wat wijzigingen aan, een beetje een uitdaging. We komen tot een gedetailleerd plan, daarna geeft hij me mock-ups, die ik erg mooi vind:

Ik vind ze echt niet slecht en vraag hem een prompt voor Claude Code om de software daadwerkelijk te coderen. We gaan in planmode om het technische plan te valideren, en toen gingen we van start!

Het project wordt in meerdere fasen behandeld, Claude Code codeert elke fase, stopt, ik controleer, geef feedback, hij corrigeert en dan gaan we verder met een andere fase.

Het skelet van de software wordt zeer snel gemaakt en elke keer kan ik de software “aanraken” voordat ik wijzigingen voorstel.

Ik vind het proces echt heel leuk , het vereist veel nadenken om de UI gebruiksvriendelijk en logisch te maken, en functies toe te voegen waar niemand aan denkt maar die iedereen nuttig vindt! Het is niet omdat er weinig knoppen zijn dat er weinig werk is, want juist het werk is van tevoren gedaan om zo min mogelijk knoppen en klikken te hebben.

Dit doet me denken aan een lunch waar mijn voormalige manager me 13 jaar geleden vertelde dat hij me goed zag in een baan waarin ik de brug zou slaan tussen experts en ontwikkelaars, dus dat ik de “zakelijke” behoeften zou vertalen naar specificaties voor ontwikkelaars… een soort interne Product Manager. In die tijd was het moment niet goed voor mij om opnieuw een carrièreswitch te maken, maar het laat zien dat hij zo visionair en intuïtief was dat hij het juiste pad voor me zag. Als je iemand in je omgeving hebt die ook zo visionair en intuïtief is, nodig hem/haar dan uit voor een lunch, dat zal effectiever zijn dan een competentieassessment.

Het risico met dit soort software is de beveiliging. De pdf’s & epubs die je online vindt, kunnen scripts bevatten die worden uitgevoerd en een computer kunnen verpesten, dus je moet Claude Code vragen om maximaal te beveiligen.

Hiervoor heb ik een gespecialiseerde agent in cybersecurity gemaakt, een agent gespecialiseerd in UX UI en een QA-agent – die elke fase van het project auditen, fouten opsporen en corrigeren.

Voor de stemmen gebruik ik zowel de stemmen vanEdge TTS (gratis, vereist een internetverbinding) als Microsoft (gratis, offline maar minder natuurlijk).

Ik heb ontdekt dat “software compileren” aan het einde van het proces zat. Electron maakt het mogelijk om een webinterface met Chromium en Node.js in te pakken om er een klassieke Windows-applicatie van te maken. Aan het einde van het proces krijg je inderdaad een installatiebestand in .exe, maar daarna moet je de software nog testen op een andere computer (die van mijn ouders), bugs automatisch rapporteren en updates beheren (binnenkort).

Mijn favoriete punten

1. Automatische opdeling van het document in hoofdstukken: dat was een delicaat en moeilijk punt omdat je een breed scala aan formaten en slecht opgemaakte bestanden moet dekken. Ik heb meerdere AI-leesprogramma’s gebruikt en ze hebben allemaal veel moeite met de hoofdstukken.
2. Markeren & annoteren: ik vind het geweldig om te markeren en te annoteren – en ik vind het geweldig om in de ‘volledig markeren’-modus te gaan, de muis verandert in een markeerstift. Dit is een punt dat ik heb verbeterd ten opzichte van Kindle waar je 2 klikken nodig had om het minste ding te markeren. Je kunt de markeringen & annotaties gemakkelijk exporteren.
3. De Vietnamese stemmen : ik ben erg blij met de kwaliteit van de Vietnamese stemmen, ik heb andere apps getest en dat beviel me niet zo goed als mijn software 🙂 ik hoop dat mijn ouders ook blij zullen zijn
4. En afgezien van de ontwikkelingskosten die ik aan AI heb betaald, zal deze software GRATIS te gebruiken zijn
5. Het strakke ontwerp, ik ben geen pro in UX UI maar ik vind dat AI en ik het goed hebben gedaan!
6. De software beheert de boekenbibliotheek op de computer maar opent ook toegang tot de smartphone via het lokale netwerk (dat is omdat ik geen zin heb om een iPhone-app of een website te maken). Op de smartphone is het een lichte versie die zich bijna als Audible gedraagt. Maar met de mogelijkheid om de tekst te volgen terwijl je naar de audio luistert (als je dat wilt).

Ik kende geen van deze technologieën (behalve SQL en CSS) tot 3 dagen geleden 😀 Vibe coding gaat niet alleen over het schrijven van een grote prompt en wachten tot de AI alles doet. Je moet het project opsplitsen in kleine stappen, elke functie testen, vreemd gedrag opmerken en precies herformuleren wat je wilt (je kunt ook tussentijds van gedachten veranderen).

Er ontbreken nog geavanceerde functies, maar ik ben zeer tevreden met de v1. Laten we de meer geavanceerde functies overlaten aan v1.1, 1.2… Ik heb ook de basis voorzien voor het toekomstig beheer van bugrapporten en updates, voor het geval ik besluit de software aan een breder publiek te verspreiden.