Professioneel Programmeren

Antigravity

Om AI te kunnen gebruiken zijn er meerdere tools om je code te beheren en je vragen (prompts) te stellen. Ik gebruik zelf vaak Visual Studio Code waarin dat mogelijk is, maar voor het huidige artikel heb ik gebruik gemaakt van Antigravity. Deze tool van Google is gratis te downloaden (hier) en is sterk geinspireerd op VS Code. Gemini, Claude en GPT zijn geintegreerd en je kunt zonder geld uit te geven al aardig wat experimenteren.

In dit artikel wil ik een aantal concrete voorbeelden geven van het vraag-antwoord spel met AI en de resultaten daarvan laten zien. Soms stelde ik bewust de vraag op een verkeerde manier, bijvoorbeeld een tikfout in een servernaam. Ook was ik vergeten het wachtwoord van de database mee te nemen in mijn vraag. AI kwam met extra vragen en deed steeds een voorstel voor code wijzigingen. Het is aan de programmeur zelf om het voorstel te aanvaarden of af te wijzen.

Random data in Python

In dit eerste voorbeeld wilde ik data random genereren: een lijst van 1000 studenten met random voornaam, achternaam, stad en hun cijfer. Allereerst genereerde ik lijsten van steden, voornamen en achternamen. Met mijn vervolgvraag genereerde ik code om de studenten te genereren op basis van deze lijsten en deze in een CSV bestand op te slaan. Hoe ik dat gebruikte om een vergelijking te maken tussen de Python modules Pandas en Polars is voer voor een ander artikel 😃. De vraag is nu eerst hoe een lijst van steden te genereren:

Genereer 25 Nederlandse steden in de huidige Python file

Het antwoord kwam snel. Ook als je zelf niet echt kunt programmeren, zie je dat dit een lijst van steden is:

steden = [
"Amsterdam","Rotterdam","Den Haag","Utrecht",
"Eindhoven","Groningen","Almere","Tilburg",
"Maastricht","Arnhem","Haarlem","Breda","Nijmegen",
"Enschede","Apeldoorn","Zaanstad","Delft","Leiden",
"Alkmaar","Hengelo","Helmond","Harlingen","Dordrecht",
"Leeuwarden","Zwolle","Kampen","Deventer","Gouda",
"Zutphen","Amersfoort","Purmerend","Vlaardingen",
"Schiedam","Roermond","Woerden","Doetinchem",
"Hilversum","Zoetermeer","Drachten","Winterswijk",
"Tiel","Oldenzaal","Maarssen","Eersel","Vaals",
"IJmuiden","Medemblik","Edam","Monnickendam","Veenendaal"
]
Dit was voor Antigravity een peuleschil en slechts enkele seconden waren nodig. De lijst met namen en cijfers rolden er even makkelijk uit. In het hele vraag-antwoord spel bouwde ik de code incrementeel op. Wie binnenkort bij mij een training Python volgt zal het eindresultaat te zien krijgen...

Op een ander moment had ik toevallig een lijst met Europese steden nodig. Intussen wist ik dat het een kleine moeite was om in Python tien nieuwe steden te bouwen:

# European cities
cities = [
"Paris",
"London",
"Berlin",
"Utrecht",
"Madrid",
"Rome",
"Vienna",
"Amsterdam",
"Prague",
"Budapest",
"Warsaw",
"Athens",
]
Wie goed telt ziet dat dit eigenlijk 12 steden zijn. AI kan genereren wat het wil, maar uiteindelijk is het aan mijzelf om de code goed te keuren. In dit geval vond ik dat Amsterdam en Utrecht er best bij mochten 😎

Boodschappen en kassabon in HTML en CSS

Tijdens een introductie training Javascript maakte ik eens een voorbeeld met een kassabon vol boodschappen. Omdat het onderwerp JavaScript was en niet CSS, kreeg de pagina geen enkele styling. Een omissie die ik met AI kon herstellen, maar laten we eerst naar de kale pagina kijken. Foeilelijk, maar de JS code werkt wel: boodschappen.html. Om styling aan de pagina toe te voegen stelde ik de volgende vraag:

create a copy from boodschappen.html and change the styling of the table. It should look like a checkout from a really cool supermarket

In grote spanning wachtte ik af wat mijn AI nu eigenlijk 'cool' vindt. Nu zou ik zelf mijn best kunnen doen om coole CSS te schrijven, maar dan nog zou dat veel tijd kosten. En hoewel ik in technisch opzicht prima CSS kan schrijven, mijn design kwaliteiten zijn minder goed ontwikkeld. Intussen was het antwoord binnen:

Viewed boodschappen.html:1-189
Created boodschappen2.html

Ik heb een kopie gemaakt van [boodschappen.html] en deze opgeslagen als [boodschappen2.html]. Daarbij heb ik de interface flink vernieuwd zodat het eruitziet als een hippe en moderne supermarkt-kassa!

Wat is er veranderd:

1. Zwevende Kassabon (Receipt): De tabel zit nu in een witte 'kassabon' met een realistisch gekarteld randje aan de onderkant, net alsof het net is uitgeprint.
   
2. Typografie: Ik heb Google Fonts toegevoegd (`Poppins` voor titels en knoppen, en `Space Mono` voor de kassastijl in de bon).
   
3. Cool Design: De achtergrond is modern donkerblauw (`#1a1a2e`) met neon-roze en blauwe knoppen, wat de applicatie een speelse, moderne en hippe uitstraling geeft.
   
4. Interactieve Knoppen: De product-knoppen hebben animaties wanneer je er met de muis overheen gaat of op klikt.
   
5. Verbeterde Tabel:
   - Producten met een aantal van 0 worden in grijs ('uitgeschakeld') weergegeven, zodat sneller te zien is wát je koopt.
   - Kolommen voor o.a. aantal, product en prijs zijn nu overzichtelijker uitgelijnd.
   
6. Barcode & Datum: Er zit nu een dynamische datum in de bon én een (decoratieve) geprinte barcode onderaan!

Je kunt het nieuwe bestand nu openen in je browser via: boodschappen2.html
Laat het gerust weten als je nog specifieke kleuren of functionaliteiten wilt aanpassen!

Een fraai gebeuren. Dit keer vroeg ik niet om een specifiek stukje code maar gaf ik alle vrijheid om de styling volledig door AI te laten bepalen. In het antwoord ook nog uitleg over de aanpak en overwegingen die daarbij gemaakt zijn. De gegenereerde webpagina staat hier.

Overigens viel één ding me niet direct op, omdat ik als eerste naar de resulterende web pagina ging kijken. Maar wat zie je als je terugkijkt naar de vraag? Ik had mijn vraag in het Engels gesteld, maar AI wist kennelijk dat ik beter Nederlands spreek en antwoordt ongevraagd maar keurig in mijn moedertaal. Zou het ook mogelijk zijn om het design te baseren op een bestaande supermarkt? Oordeel zelf of dat gelukt is:

Now create another version in the style of Dutch supermarket Dirk

Een kassabon van Dirk: hier. AI weet wie "Dirk" is in de context van Nederlandse supermarkten en gaat live naar de oorspronkelijke website om de nieuwe styling geheel op het origineel te baseren.

Change the CSS to make the table look like a checkout bill by a supermarket. Use the style from albert heijn

Een kassabon van Albert: hier. Wederom is de styling van de supermarkt openbaar en dat is ook een beetje eng. Een website in de stijl van jouw bank is binnen enkele seconden nagemaakt door iemand die kwaad wil.

Add these products to the list: aardappelen en gehakt

Als laatste deze test: zou hij zelf weten wat aardappelen en gehakt kost? Ik heb in de vraagstelling niet aangegeven wat de prijs van deze producten moet worden. Oordeel opnieuw zelf, dit was de aanpassing in code:

var prijslijst = {
'Brood': 0.98,
'Melk': 1.05,
'Appels': 2.5,
'Sinas': 1.79,
'Spinazie': 2.5,
'Wijn': 7.98,
'Shampoo': 4.69,
'TV': 1999,
'Aardappelen': 2.99,
'Gehakt': 4.50
}


Een menukaart voor een chique restaurant

Stel je voor: je runt een mooi restaurant en daarbij hoort een even zo mooie menukaart. De gerechten en prijzen staan in een database en zijn via deze link te bekijken: voorgerechten. Je ziet de data op een technische manier in het JSON formaat. Deze link gaf ik aan AI mee met de volgende vraag:

Create a cool menu in html and css for an expensive restaurant. The menu can be found here: https://xanderwemmers.nl/api/restaurant/starters. There are 4 categories on the menu: starters, mains, desserts an drinks

Een moeilijkheid die ik bewust had ingebouwd was dat ik een link gaf voor de voorgerechten (starters) en verder alleen de namen van de andere categorieën. Zou AI slim genoeg zijn om de tekst "starters" in de URL te vervangen door "mains" en de andere categorieën? Het antwoord stelde me niet teleur. Dit is de gegenereerde HTML pagina: restaurant menu

Zoals je ziet een fraai ontwerp. De naam "Etoile d'Or" zou nooit bij me zijn opgekomen en de pagina heeft allerlei visuele effecten waar ik zelf misschien wel te lui voor zou zijn geweest. Verder snapt hij dat in de gegeven link het woord "starters" vervangen moet worden door respectievelijk "mains", "desserts" en "drinks". Ook roept hij tijdens het development proces zelf de API aan om te kijken wat de veldnamen zijn van de data afkomstig van de server.

Achter de schermen had ik nog wel wat wensen maar het begin zag er goed uit. Helaas was alle source code in één HTML pagina terecht gekomen, maar mijn vriendelijk verzoek om de CSS en Javascript code in aparte files op te slaan werd direct ingewilligd. Tijd om door te vragen en met een nieuwe prompt te komen: eigenlijk ben ik meer van light themes en deze menukaart was wel erg dark.

Please make a second example of a restaurant menu in the folder RestaurantMenu2. This time I would like a light theme

Wederom geen teleurstelling: de nieuwe menukaart kreeg een keurig light theme.

Conclusie

AI is cool 😎. Je kunt bijzonder snel code genereren waar je zelf uren mee kwijt zou kunnen zijn. Uiteindelijk moet je wel de baas blijven over je eigen code. AI is een hulpmiddel en jij blijft AI de baas in plaats van andersom.

Antigravity is een prima tool die er vertrouwd uit ziet als je al ervaring hebt met Visual Studio Code. Ook zonder geld uit te geven kun je aardig wat experimenteren en wie serieus aan de gang wil gaan moet vroeg of laat in de buidel gaan tasten en een mooi abonnement uitzoeken. Op gezette tijden kreeg ik met mijn gratis account een extra koffiepauze dankzij het volgende antwoord:

Our servers are experiencing high traffic right now, please try again in a minute.