Ik heb meerdere ideeen lopen maar voor een demo website heb ik gekozen voor het omzetten van mijn administratie van Excel en Outlook naar een website. De functionaliteiten zijn bekend en iedereen heeft er een voorstelling van. Xelflow Server demo
Architectuur
De architectuur was snel duidelijk. Xelflow Server voor de Backend en Angular voor de Frontend.
Eerste opzet
Installatie van een nieuwe Angular applicatie met de cli. Kopieren van de Xelflow Server bestanden met de api, Xelflow Admin Panel flows en tabellen, documentatie van de flow, tabellen en api.
Klaar om te beginnen
Eerste prompt voor de AI was: genereer het datamodel op basis van een omschrijving.
De AI genereerde de tabel definities in de juiste Xelflow syntax. Helaas geen migratie scripts, maar die waren met een nieuwe prompt snel gemaakt.
De volgende stap was het genereren enkele schermen: De componenten werden gegenereerd, met dummie data maar zonder flows 😞. De AI gebruikte de beschikbare documentatie duidelijk niet goed.
De eerste doorbraak
Tijd voor agent specifieke documentatie. In het geval van Junie, de AI agent van Jetbrains, zijn dit de guidelines.md. Met een uitgebreide omschrijving hoe de beschikbare documentatie te gebruiken, was ik klaar voor de volgende prompt.
De AI genereerde de flows gebruikte de flows in de code. Vroeg om de sync scripts uit te voeren. Alles ok!
Na een paar schermen zo te hebben gemaakt, kwam ik er helaas achter dat het nog niet perfect was. Er was geen goede error handling, de connection.service.ts was niet optimaal en niet alle css werkt omdat de AI uitging van Tailwind.
De connection.service.ts heb ik zelf geoptimaliseerd. Voor de andere problemen is de documentatie aangepast.
De tweede doorbraak
De werkwijze moest worden aangepast. Na elke AI actie goed testen, en alle technische fouten beter documenteren zodat de volgende AI actie beter ging.
In het begin ging het langzamer, maar je zag de kwaliteit omhoog gaan en de technische fouten verminderen.
Nadat de meeste technische fouten waren opgelost, kon ik me meer focussen op de functionaliteit.
De conclusie
- De Angular implementatie van de Xelflow server architectuur is makkelijk en goed te gebruiken.
- Je moet blijven controleren of de AI de juiste keuzes maakt, zo niet pas de documentatie aan.
- Als alles werkt is het heel verslavend. 😊