Wat is de Demo Applicatie?

De demo.xelflow.com website is een Angular applicatie die specifiek is gebouwd om te demonstreren hoe je de Xelflow Server in de praktijk gebruikt. Het toont de naadloze integratie tussen een modern frontend framework en onze serveroplossing. De applicatie is natuurlijk nog niet af. Een echte administratie applicatie staat achter een login en is maar door een paar personen te benaderen, wil je een demo met authenticatie neem dat contact met ons op.

Open Source op GitHub

Transparantie vinden we belangrijk. Daarom is de volledige broncode van deze applicatie beschikbaar op GitHub. Hierdoor kun je exact zien hoe de applicatie in elkaar steekt, welke patronen we hebben gebruikt en hoe een applicatie gebouwd met de Xelflow server werkt. Het dient als een perfect start- en referentiepunt voor je eigen projecten.

Structuur

De demo applicatie is opgebouwd uit de volgende onderdelen:

• .junie: De AI guidelines voor de Jetbrains IDE's AI agent junie.
• api: De API die communiceert met de Xelflow Server.
• authentications: Lijst met authenticationId's die gebruikt kunnen worden in de flows.
• flows: De flows die gebruikt kunnen worden in de applicatie. (47)
• public: De publieke map bevat de statische bestanden van de angular applicatie.
• src: De source code van de angular applicatie.
• tables: De tabel definities die gebruikt kunnen worden in de flows en migratie scripts voor de database. (12)

Het Belangrijkste Component: connection.service.ts

Als je de code bekijkt, is het connection.service.ts bestand de belangrijkste om te bestuderen. Deze Angular service bevat namelijk alle benodigde code om efficiënt en veilig te communiceren met de Xelflow Server. Hier vind je de methodes terug voor het opzetten van de connectie en het uitwisselen van data, wat het fundament is van de applicatie. In de componenten wordt gebruik gemaakt van de connection service om data op te halen en te verzenden naar de Xelflow Server.

AI-Gedreven Ontwikkeling

Een interessant detail van de demo applicatie is dat deze is gecreëerd met behulp van AI. Het belangrijkste aspect bij het succesvol genereren van code met AI is de aanwezigheid van ijzersterke documentatie. Om de AI (en natuurlijk de ontwikkelaars) van de juiste context te voorzien, zit alle benodigde documentatie verweven in de codebase zelf. Bij een nieuwe vraag zal de Junie AI agent in Brave mode de volgende stappen doorlopen:

1. De tabel definities aanpassen.
2. De migratie scripts aanmaken.
3. De flows in de applicatie aanmaken en aanpassen.
4. De aangepaste flows en tabel definities opsturen naar de Xelflow Server.
5. De Angular applicatie aanpassen.

De start van jouw eigen applicatie

De demo applicatie is een uitstekend startpunt voor het bouwen van je eigen applicatie. Je kunt de demo applicatie als basis gebruiken en deze aanpassen aan je eigen behoeften. De demo applicatie is open source en beschikbaar op GitHub, dus je kunt de code bekijken en aanpassen aan je eigen behoeften.
Een AI agent die voor je bouwt is natuurlijk geweldig, maar het beste resultaat krijg je als verschillende disciplines laat samenwerken met de AI agent. Een domein expert voor de functionele eisen, een ontwikkelaar voor de teachnische eisen en een designer voor de UX/UI eisen.