Claude × app-ontwikkeling door niet-engineers ① - Maken, testen, aanpassen. Een nieuwe manier van creëren waarbij je een app 'groeit'. | Onderwerpen

Tegenwoordig is 'een app maken met AI' niet meer echt iets bijzonders.

Tot kort geleden hadden we het beeld dat AI een 'competente assistent' was die ons hielp met het samenvatten van tekst en ideëen. Maar nu verschuift dat steeds meer naar een 'betrouwbare partner' die de ontwikkeling zelf aankaart.

Onze teamleden krijgen ook steeds meer kans om met AI in aanraking te komen, en iemand dacht: 'laat mij zelf ook wat maken'. Zo begon dit app-project.

We dachten 'laat het iets nuttigs voor het werk zijn', maar het eerste idee dat te binnen schoot was helemaal niet werk-gerelateerd.

De afgelopen tijd zit ik vol in films kijken. Ik kijk wekelijks een paar films en schrijf alles op in de notities-app op mijn iPhone: wat ik nog wil kijken, films die me bevallen, enzovoort.

Maar mijn lijsten groeien snel, en veel films hebben vergelijkbare titels. Daardoor vraag ik mezelf voortdurend af: 'heb ik deze al gezien?' Op den duur kon ik mijn notities niet meer beheren.

Daarom dacht ik: 'ik maak mijn eigen tool'. En zo ontstond de 'Movie Watchlist' die ik vandaag wil presenteren.

Je kunt een app bouwen met slordige prompts

Bij app-ontwikkeling met AI denk je misschien: 'ik moet heel gedetailleerde prompts schrijven met alle vereisten uitgewerkt'. Maar dat is niet altijd nodig.

Velen denken waarschijnlijk dat je eerst de achtergrond en specificaties moet ordenen, en alleen dan zonder gaten in de vereisten kunt communiceren om iets werkends te creëren.

Natuurlijk, het is ideaal als je achtergrond en specificaties netjes kunt aanleveren. Maar wat ik deze keer heb gemerkt, is dat Claude zelfs bij behoorlijk slordig gestelde instructies mijn bedoeling goed begrijpt en die implementeert.

Ik geloof dat dit deels komt doordat het een eenvoudige app was, maar met alleen een prompt die mijn wensen erop gooide, ontstond er gewoon een werkende app. Dit was mijn eerste prompt:

Ik wil een kijklijst voor films maken.
Omdat het eerst een prototype is, wil ik dat het volledig uit één HTML bestaat en meteen werkt wanneer je het in een browser opent.
Qua functionaliteit wil ik het kunnen invoeren en registreren van filmtitels en waar deze gestreamd worden (U-next, Prime Video, enzovoort), en ik wil geregistreerde films in een lijst kunnen weergeven.
Voeg ook alstublieft een selectievakje 'Gekeken' toe.

Bij traditionele ontwikkeling zonder AI, zelfs voor de eenvoudigste dingen, verdwijn je uren mee met 'UI ontwerpen', 'technologie selecteren' en 'coderen'. Claude begrijpt in enkele minuten wat je wilt, en is klaar met de optimale UI, selectie van tools en implementatie ervan.

De snelheid was zo indrukwekkend dat ik zelfs een beetje bang werd.

Als het zo snel gaat, wil je steeds meer. Nadat de basis klaar was, bleef ik maar wensen uitgooi. Ook mijn prompts waren niet netjes: ik somde gewoon op wat me stoorde en zei 'zet dit recht', wat geen mens graag van een engineer hoort.

Na enkele van zulke slordig heen-en-weer, was de kijklijst snel klaar.
Inclusief fijnafstemming duurde het maar een uur voordat de eerste versie van de app gereed was.

Zodra je een idee hebt, implementeren. Stap voor stap bouwen.

Een paar dagen nadat het raamwerk klaar was, presenteerden we elkaar onze AI-gemaakte apps. Iemand had een app gebouwd met 'Gemini Nano' erin.

Op het moment dat ik het zag, dacht ik: "Eigenlijk gebruik ik Gemini zelf ook als ik naar films op zoek ben. Wat als ik dit in de app zou integreren zodat ik films kan zoeken op basis van mijn watchlist?" Dus toen ik thuiskwam, hervatte ik direct de ontwikkeling.

Als ik dit aan een mens zou vragen, zou ik flink op mijn donder krijgen voor "zomaar de specificaties uitbreiden zonder toestemming", maar dit is wat AI geweldig maakt – het verwerkt dergelijke verzoeken soepel. Dit keer implementeerde het ook binnen enkele minuten de zoekfunctie voor films.

Na het implementeren van de zoekfunctie werd ik me bewust van het volgende probleem: "nauwkeurigheid".

Aanvankelijk werkte ik met een nogal oppervlakkige specificatie: ik vroeg de AI enkele aanbevelingen te genereren op basis van alleen de titels en genres van de films op mijn watchlist. Dit leidde tot een probleem: hoewel de genres klopten, waren veel van de aanbevolen films niet helemaal naar mijn smaak. Ik experimenteerde met verschillende benaderingen – zoals aanbevelingen baseren op films die ik had gemarkeerd als favoriet – maar de resultaten verbeterden niet.

Ik realiseerde me dat alleen titels en genres waarschijnlijk niet genoeg informatie bevatten, dus besloot ik de verhaallijn van elke film als aanvullende gegevens op te nemen. Maar ik wilde absoluut niet alles handmatig invoeren. Uiteindelijk besloot ik opnieuw hulp van AI in te roepen.

Ik herzag het systeem zodat "verhaallijnen automatisch werden geregistreerd op basis van titels in de lijst". Voor de nauwkeurigheid van de verhaallijnen gebruikte ik de Wikipedia API om informatie over de ingevulde titels op te halen, en liet Claude code schrijven zodat de AI de verhaallijn automatisch genereerde op basis van die gegevens.

Eerlijk gezegd blijven er enkele onnauwkeurigheden, en ik ben van plan om in de toekomst over te schakelen naar integratie met de TMDB API. Maar het niveau is nu bereikt waar ik "kleine fouten" acceptabel vindt. Al deze fijne aanpassingen kostten ongeveer 2-3 uur.

Ter zijde: toen ik uiteindelijk de app op een echt apparaat wilde gebruiken, bleek Gemini Nano niet beschikbaar, dus schakelde ik over naar Gemini API. Hoewel het gratis abonnement beperkingen op het aantal verzoeken heeft, kan ik een beter model gebruiken dan met Gemini Nano, dus de nauwkeurigheid is aanzienlijk verbeterd.

Een korte introductie van de voltooide app

Deze app, die ik letterlijk "groeide terwijl ik er mee werkte" door continu aanpassingen aan te brengen, is uitgegroeid tot een volwaardige tool met al deze functies.

【Watchlist】

Filmtitel, genre, streamingservice en samenvatting registreren
Automatische generatie van samenvattingen met behulp van verschillende API's
Schakelen tussen "Niet bekeken / Bekeken"
Filterfunctie op genre, favorieten en niet bekeken/bekeken status

【Filmzoeken】

Gemini stelt aanbevolen films voor op basis van favorieteninformatie
Genre en aantal suggesties kunnen worden opgegeven
Aanbevolen films met één tik aan de watchlist toevoegen
Bekeken films kunnen ook met bekeken-status aan de lijst worden toegevoegd

Werk die eerder verdeeld was tussen "films zoeken" en "films bijhouden" is nu geconcentreerd in één app.
Ik moest voorheen elke keer mijn voorkeuren aan AI uitleggen, maar die moeite is nu verdwenen – ik kan nu altijd gemakkelijk de films vinden die ik wil zien.

Mijn oorspronkelijke watchlist kan nu gefilterd worden op kijkstatus, favorieten en genre, dus het beheer is veel eenvoudiger geworden dan met notitiepapier.

Wat mij persoonlijk erg aanstaat, is dat wanneer een werk in de zoekresultaten ontbreekt van mijn lijst, ik het met één tik kan toevoegen.
Ik bespaar me de moeite om handmatig titels in te typen en in te registreren.

Samenvatting

Zoals je misschien al opmerkt terwijl je dit leest, heb ik tijdens deze app-ontwikkeling geen enkele regel code geschreven. Ik hoefde alleen maar te zeggen "Ik wil deze functie", en Claude implementeerde alles voor me.

Het eerste wat me opviel bij het testen was: "Ik hoefde niet van tevoren de eindvorm helemaal vast te stellen." Terwijl ik ermee werkte, merkte ik dingen op als "Dit zou ik ook nog willen" en "Dit klopt niet helemaal", en ik gaf die feedback steeds aan Claude. Het voelde minder als "een app maken" en meer als "een app laten groeien".

Als je aarzelt omdat je denkt "Ik moet prompts goed schrijven", gooi ze gewoon ruw ergens naar toe. Als je iets anders krijgt dan je voorstelde, kun je het stap voor stap aanpassen – er zijn geen echte fouten. Als je het eenmaal probeert, voelt het "hé, dit gaat eigenlijk best goed".

Probeer het zeker uit zonder druk.