Hoe ik AI gebruikte om een ​​moderne web-app te ontwikkelen

Generatieve AI zoals ChatGPT heeft een nieuw tijdperk van softwareontwikkeling ingeluid, een tijdperk waarin iedereen een nuttige, moderne applicatie kan ontwikkelen met weinig tot geen programmeervaardigheden. In dit artikel laat ik je zien hoe ik AI heb gebruikt om een ​​tool te ontwikkelen waar ik nu elke dag op vertrouw.

Het probleem dat ik probeerde op te lossen

Sinds de introductie van ChatGPT en andere AI-taalmodellen zijn bepaalde woorden sterk geassocieerd met door AI gegenereerde content (een van de vele redenen waarom je ChatGPT niet zou moeten gebruiken om te schrijven). Voorbeelden hiervan zijn ‘delve’, ’tapestry’ en ’testament’. Als schrijver heb ik altijd geloofd in het gebruik van het juiste woord voor de juiste context. Wanneer een woord past bij en precies uitdrukt wat ik wil overbrengen, heb ik het gevoel dat ik het zou moeten kunnen gebruiken.

Helaas zien veel van mijn klanten dat anders. Ze zijn steeds meer op hun hoede voor content die door AI gegenereerd zou kunnen klinken. Omdat ik geen AI ben (althans, dat denk ik niet), kan ik me niet alle woorden en zinnen herinneren die vaak overmatig worden gebruikt door AI-taalmodellen, dus het kan lastig zijn om ze te vermijden.

Daarom besloot ik een tool te maken die de verstrekte tekst zou analyseren tegen een woordenlijst en potentiële “AI-klinkende” woorden en zinnen zou markeren. Een tool als deze kan worden ontwikkeld met behulp van de drie belangrijkste webtechnologieën: HTML (structureert de inhoud van een webpagina), CSS (gebruikt om de inhoud van een webpagina te stylen) en JavaScript (verandert een statische webpagina in een “web-app” die doet wat wij willen dat hij doet).

De beste AI kiezen voor web-app-ontwikkeling

Een project als mijn ” AI Vocab Checker ” is een perfecte kandidaat voor AI-ondersteunde softwareontwikkeling, omdat de beste AI-modellen zijn getraind op enorme hoeveelheden HTML-, CSS- en JavaScript-code en documentatie, zodat ze code kunnen uitvoeren, begeleiding kunnen bieden bij best practices, efficiënte implementaties kunnen voorstellen en zelfs kunnen helpen bij het oplossen van problemen die zich tijdens de ontwikkeling kunnen voordoen.

Alle top 3 beste grote taalmodellen (LLM’s) in de LMSYS Chatbot Arena Leaderboard (GPT-4o, Claude 3.5 Sonnet en Gemini Advanced) kunnen webontwikkelingstaken met indrukwekkende bekwaamheid aan. Uiteindelijk heb ik echter Claude 3.5 Sonnet gekozen voor dit project.

Claude 3.5 Sonnet was mijn AI-codeerassistent van keuze, grotendeels dankzij de “Projecten”-functie, waarmee ik een werkruimte kon creëren die uitsluitend was gewijd aan de ontwikkeling van mijn app. Het helpt natuurlijk ook dat Sonnet beter presteert dan de concurrentie in codeertaken die zijn opgenomen in de HumanEval-benchmark .

Mijn web-app bouwen met Claude

Ik begon met het maken van een nieuw project in Claude voor de AI Vocab Checker door het tabblad Projecten in het linkerdeelvenster te selecteren (je kunt het weergeven door met de muiscursor over het Claude-logo in de linkerbovenhoek in een actieve chat te bewegen) en vervolgens op de knop Project maken te klikken .

Toen dat eenmaal was gebeurd, moest ik het probleem aan Claude uitleggen. Dit is de prompt die ik bedacht:

Over het algemeen wilt u een algemene beschrijving geven van wat u wilt bereiken en dit vervolgens volgen met zoveel mogelijk details. Alles wat u niet gedetailleerd beschrijft, wordt overgelaten aan de AI voor interpretatie, wat wel of niet overeenkomt met uw visie.

Het duurde even voordat Claude de code uitvoerde, die ik vervolgens in een index.html-bestand plakte met Visual Studio Code. Ik kon het index.html-bestand vervolgens gewoon openen in een webbrowser, en dit was de eerste versie van de AI Vocab Checker-app die Claude bedacht:

Zoals u kunt zien, was Claude in staat om een ​​functionele app te maken met slechts één prompt, en de app doet daadwerkelijk wat hij moet doen! Er zijn echter een paar problemen die bij nadere inspectie vrij duidelijk zijn:

• De eerste twee tekstvakken zijn iets groter dan het onderste tekstvak.
• De naam van de app is verkeerd (ik ben vergeten deze te vermelden).
• De app maakt geen gebruik van de beschikbare horizontale ruimte op desktopapparaten.
• Alle woorden worden in dezelfde kleur gemarkeerd (waardoor het resultaat moeilijk te analyseren is).
• Er zijn geen gebruiksstatistieken voor de gedetecteerde woorden.
• Claude gebruikte geen enkele bibliotheek of framework, ondanks dat hem dat werd aangeraden.

Dus ik gaf het volgende antwoord:

En dit is het resultaat:

Dat is aanzienlijk beter en het kostte slechts één extra prompt. Claude implementeerde het Bootstrap-framework om een ​​modern, responsief ontwerp te bereiken en de mark.js-bibliotheek voor betere markering. Onder de indruk van hoe hun opname de app verbeterde, vroeg ik Claude welke andere frameworks of bibliotheken we konden gebruiken en de AI stelde Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js en een paar anderen voor.

Van de voorgestelde frameworks en bibliotheken leek Chart.js het meest bruikbaar omdat het gebruikt kan worden om visuele representaties van woordgebruikstatistieken te maken, zoals staafdiagrammen of cirkeldiagrammen. Ik vroeg Claude om het te implementeren en ik gaf het ook de opdracht om de te analyseren tekst te vervangen door het resultaat om de gebruikerservaring te verbeteren. Na een paar kleine aanpassingen en ontwerpaanpassingen, kwam ik op het volgende:

Wat mijn persoonlijke behoeften betreft, voldoet deze versie van mijn AI Vocab Checker prima aan mijn behoeften. Het kostte me slechts 15 minuten om de app te ontwikkelen, waarbij ik gebruikmaakte van mijn zeer beperkte webontwikkelingsvaardigheden die ik in de loop der jaren heb opgedaan op verschillende gratis programmeerwebsites.

Omslagfoto en screenshot door David Morelo.