Dat je 'een app maakt met AI' is tegenwoordig eigenlijk al niet meer zo bijzonder.
Tot voor kort werd AI vooral gezien als een 'capabele assistent' die hielp bij het samenvatten van teksten en het bedenken van ideeën. Inmiddels verandert dat in een 'betrouwbare partner' die de ontwikkeling zelf kan aansturen.
Steeds meer collega's bij ons komen in aanraking met AI, en daardoor kwam het idee op om zelf ook iets te bouwen. Zo begon dit app-project.
'Als ik het dan toch maak, kan het beter iets nuttigs voor het werk zijn...' Maar het eerste idee dat opkwam had niets met werk te maken, maar met een hobby.
Recentelijk ben ik verslingerd aan films kijken. Elke week bekijk ik er een paar, en mijn kijklijst en favoriete titels schrijf ik allemaal op in de notitie-app op mijn iPhone.
Maar de lijst groeide snel, en er waren veel vergelijkbare titels. Steeds vaker dacht ik: 'Wacht, heb ik deze al gezien?' Uiteindelijk liep het beheer via de notitie-app helemaal uit de hand.
Daarom besloot ik: 'Ik maak gewoon mijn eigen tool.' Dat werd de 'Movie Watchlist' die ik in dit artikel introduceer.
Je kunt ook apps bouwen met een rommelige prompt
Als je het hebt over AI-gestuurd ontwikkelen, denk je misschien al snel dat je een prompt moet schrijven waarin elk detail tot in de puntjes is uitgewerkt.
Veel mensen denken dat je pas een werkend resultaat krijgt als je de achtergrond en specificaties eerst goed hebt uitgewerkt en alle eisen volledig hebt overgebracht.
Natuurlijk is het beter als je de achtergrond en specificaties in één keer kunt aanleveren. Uit mijn eigen ervaring blijkt echter dat de AI je bedoeling ook goed begrijpt en uitvoert, zelfs als je instructies vrij ruw zijn.
Dat gold waarschijnlijk deels omdat het een eenvoudige app was, maar met een prompt waarin ik gewoon alles had opgesomd wat ik wilde, werkte de app meteen. Dit was mijn eerste prompt:
Ik wil een watchlist voor films maken.
Omdat dit een prototype is, wil ik dat het volledig in één HTML-bestand werkt, zodat het direct in de browser opent en meteen functioneert.
De functie moet zijn dat je de titel van een film invoert, samen met de streamingdienst waarop deze te zien is (zoals U-Next of Prime Video), en dat je de geregistreerde films in een overzicht kunt bekijken.
Daarnaast wil ik een selectievakje waarmee je kunt aangeven dat je de film al hebt gekeken.
Bij traditioneel ontwikkelen zonder AI kost zelfs een eenvoudig project al snel uren aan taken als "bedenk een UI", "kies de technologie" en "schrijf de code". Claude nam al die stappen in een paar minuten over: het begreep wat ik wilde, koos een passende UI en tools en voerde de implementatie vlot en zonder haperingen uit.
De snelheid was zo hoog dat ik er eerlijk gezegd een beetje van schrok.
Met zo'n snel resultaat groeide ook mijn eetlust. Zodra de basis er stond, bleef ik gewoon wensen en verbeterpunten aandragen. Mijn prompts waren allesbehalve netjes: ik zette de punten die me opvielen op een rijtje en schreef iets als "los dit op". Bij een menselijke ontwikkelaar zou dat zonder twijfel als onprettig worden ervaren.
Na een aantal van zulke losse uitwisselingen was de hoofdstructuur van de watchlist vrijwel klaar.
Inclusief kleine aanpassingen kostte het ongeveer een uur om de eerste versie van de app af te krijgen.
Direct implementatie zodra er een idee is. Groeien door er steeds iets aan toe te voegen
Enkele dagen nadat het kader was opgezet, was er een moment waarin ieder van ons de apps die we met AI hadden gemaakt kon laten zien. Zo kreeg ik de werken van andere teamleden te zien. Een van hen had een app gebouwd waarin "Gemini Nano" was verwerkt.
Toen ik dat zag, schoot me ineens te binnen dat ik zelf ook Gemini gebruik om films te zoeken die ik wil zien. Ik dacht: als ik dit in de app verwerk, kan ik films zoeken op basis van mijn watchlist? Zodra ik thuis was, pakte ik meteen de ontwikkeling weer op.
Bij een mens zou het een brutale stap zijn om halverwege de ontwikkeling zomaar extra functies toe te voegen, maar zo'n verzoek verwerkt AI moeiteloos. Ook dit keer had het de zoekfunctie voor films binnen enkele minuten geïmplementeerd.
Zo was de zoekfunctie succesvol toegevoegd, maar daarna ging mijn aandacht naar de "nauwkeurigheid".
In eerste instantie had ik een vrij globale opzet: op basis van alleen de titel en het genre van films op mijn watchlist kreeg ik een aantal aanbevelingen. Het probleem daarbij was dat de genres vaak klopten, maar de films vaak niet aansloten bij mijn smaak. Ik heb geprobeerd het systeem aan te passen zodat het uitging van films die ik als favoriet had gemarkeerd, en ook andere variaties uitgeprobeerd, maar het resultaat bleef hetzelfde.
Ik vermoedde dat titel en genre alleen te weinig informatie opleverden, dus besloot ik een samenvatting van elke film toe te voegen. Maar het handmatig invoeren van al die samenvattingen wilde ik absoluut niet doen. Na lang nadenken heb ik ook hier de hulp van AI ingeschakeld.
Ik bouwde een systeem dat de samenvatting automatisch invult op basis van de titel die in de lijst is ingevoerd. Om de nauwkeurigheid van de samenvattingen te waarborgen, haalt de code via de Wikipedia API de relevante informatie op bij de ingevoerde titel, waarna AI op basis daarvan automatisch een samenvatting genereert. Ook de code daarvoor liet ik door Claude schrijven.
Eerlijk gezegd is de nauwkeurigheid nog steeds niet perfect, en uiteindelijk overweeg ik een update met een koppeling naar de TMDB API. Toch heb ik het punt bereikt waarop "een beetje onnauwkeurigheid" acceptabel is. De fijnafstelling kostte in totaal ongeveer 2 tot 3 uur.
Even terzijde: toen ik de app daadwerkelijk op een echt apparaat wilde gaan gebruiken, bleek Gemini Nano niet beschikbaar te zijn. Uiteindelijk ben ik daarom overgestapt op de Gemini API. Het gratis tarief heeft een limiet op het aantal verzoeken, maar het biedt wel een beter model dan Gemini Nano, waardoor de nauwkeurigheid duidelijk is verbeterd.
Een korte introductie van de gereedgekomen app
Hoewel deze app echt "tijdens het gebruik is gegroeid" door er naar believen aan te sleutelen, zijn er uiteindelijk al deze functies uit voortgekomen.
"Watchlist"
- Registreren van filmtitels, genres, streamingdiensten en samenvattingen
- Automatisch genereren van samenvattingen met behulp van diverse API's
- Schakelen tussen "Nog niet bekeken" en "Bekeken"
- Filteren op genre, favorieten en "Nog niet bekeken" / "Bekeken"
"Filmzoeken"
- Gemini stelt films voor op basis van je favorieten
- Genre en aantal voorstellen instelbaar
- Voeg aanbevolen titels met één tik toe aan je watchlist
- Ook films die je al hebt gezien, kun je aan de lijst toevoegen, met de status 'gezien' erbij
Taken die voorheen verspreid waren over "films zoeken" en "films registreren", zijn nu samengebracht in deze ene app.
Vroeger moest ik bij elke zoekopdracht mijn smaak aan de AI uitleggen, maar dat is niet meer nodig. Je kunt nu altijd op zoek naar films die bij je smaak passen.
Ook het oorspronkelijke doel, de watchlist, is veel beter te beheren. Je kunt filteren op kijkstatus, favorieten en genre, en het is niet meer te vergelijken met het bijhouden in een notitieblok.
Wat ik persoonlijk het fijnst vind, is dat je een film die nog niet in de lijst staat, met één tik kunt toevoegen vanuit de zoekresultaten.
Je hoeft de titel niet meer handmatig in te typen om hem op te slaan.
Conclusie
Misschien is het je al opgevallen: bij het ontwikkelen van deze app heb ik geen enkele regel code geschreven. Ik hoefde alleen maar in gewone woorden te zeggen welke functie ik wilde, en Claude heeft alles geïmplementeerd.
Het belangrijkste inzicht uit deze ervaring: je hoeft het eindresultaat niet vooraf vast te leggen. Terwijl je de app gebruikt, merk je dat je 'dit zou ook handig zijn' of 'dit klopt niet helemaal' denkt, en die feedback geef je dan gewoon aan Claude. Het voelde minder als bouwen en meer als laten groeien.
Als je aarzelt omdat je denkt dat je je prompts perfect moet formuleren, probeer dan gewoon eerst iets losjes. Komt het resultaat niet overeen met wat je voor ogen had, dan pas je het stap voor stap aan. Echte mislukkingen zijn er eigenlijk niet. Als je het één keer probeert, krijg je al snel het gevoel dat het best meevalt.
Probeer het gerust eens uit.
Als medewerker die direct na school bij ons in dienst kwam, werk ik momenteel hard aan mijn groei tot regisseur. Ik streef ernaar een veelzijdig professional te worden die alle disciplines beheerst, van design tot advertentiebeheer, en daag mezelf dagelijks uit. In mijn werk streef ik naar een slimme aanpak van projectregie, terwijl ik in mijn privéleven graag thuis ben en van mijn gezellige 'vesting' geniet. Ik houd ook van anime.
Handan-chan
Webdirecteur / in dienst sinds 2022