Webapp-workflow

In de AppMaster Web Designer kunt u naast Backend- logica ook bedrijfslogica voor webapplicaties aan de Frontend- kant configureren. Met deze krachtige functie kunt u geavanceerde, dynamische webapplicaties maken die zijn afgestemd op specifieke zakelijke behoeften.

In een webapplicatiecontext kunnen bedrijfsprocessen onder meer gebruikersauthenticatie, gegevensverwerking, online transacties, contentbeheer, klantenserviceactiviteiten en het aanpassen van UI-elementen omvatten, afhankelijk van de omstandigheden.

Drie niveaus van bedrijfslogica in AppMaster Web Designer:

• Applicatietriggers: Dit zijn triggers op hoog niveau die reageren op applicatiebrede gebeurtenissen of statussen, waardoor specifieke bedrijfsprocessen in gang worden gezet.
• Generieke bedrijfsprocessen: dit zijn vooraf gedefinieerde sets bewerkingen die kunnen worden toegepast op verschillende delen van de applicatie, waardoor taken worden geautomatiseerd en workflows worden gestroomlijnd.
• Elementtriggers: Deze zijn gedetailleerder dan applicatietriggers en zijn gekoppeld aan specifieke UI-elementen, waardoor bedrijfsprocessen worden geactiveerd op basis van interacties met deze elementen.

Door gebruik te maken van deze niveaus van bedrijfslogica, stelt AppMaster Web Designer u in staat webapplicaties te maken die niet alleen visueel aantrekkelijk zijn, maar ook intelligent en inspelend op de behoeften en het gedrag van gebruikers.

🔔 Het is belangrijk om de actieve preview opnieuw te laden nadat u nieuwe bedrijfslogica hebt toegevoegd om de BP te starten.

Toepassingstriggers

Applicatietriggers in AppMaster Web Designer zijn triggers op hoog niveau die reageren op applicatiebrede gebeurtenissen of statussen die de uitvoering van specifieke bedrijfsprocessen uitvoeren om de functionaliteit en gebruikerservaring te verbeteren.

AppMaster biedt een verscheidenheid aan applicatietriggers, elk ontworpen voor specifieke scenario's:

• Bij app starten: Geactiveerd wanneer de applicatie opstart, ideaal voor initiële installatieprocedures.
• Navigeren via app: Wordt geactiveerd tijdens navigatie tussen verschillende delen van de applicatie.
• On App Blur: Geactiveerd wanneer de applicatie de focus verliest, handig voor pauze- of opslagacties.
• Op app-focus: wordt uitgevoerd wanneer de applicatie weer focus krijgt, ideaal voor het hervatten of bijwerken van inhoud.
• Op app verborgen: Geactiveerd wanneer de applicatie geminimaliseerd is of niet zichtbaar is op het scherm.
• Op app zichtbaar: Wordt geactiveerd wanneer de applicatie weer zichtbaar wordt, handig voor het vernieuwen van inhoud.
• Bij app-vernietiging: wordt uitgevoerd tijdens het afsluitproces van de applicatie.
• On App Online: Geactiveerd wanneer de applicatie een online status detecteert, perfect voor het synchroniseren van gegevens.
• On App Offline: Wordt geactiveerd wanneer de applicatie offline gaat, waardoor offline functionaliteiten mogelijk worden.
• Op app-authenticatie vereist: Wordt geactiveerd na ontvangst van een "401 (niet-geautoriseerd)"-antwoord, waarin de gebruiker wordt gevraagd opnieuw te authenticeren.
• Op app verboden: Triggert een '403 (Verboden)'-antwoord, meestal gebruikt voor toegangscontrole en machtigingen.

De exacte lijst met applicatietriggers kan worden uitgebreid door WebSocket-eindpunten te maken op het backend-niveau van uw applicatie.

Deze triggers kunnen worden gebruikt om gebruikersautorisatie bij het opstarten te beheren, toegangsrechten te verifiëren, omleiding bij autorisatiewijzigingen te configureren, fouten af ​​te handelen en nog veel meer, waardoor ze onmisbaar zijn bij het maken van een responsieve en veilige webapplicatie.

Generieke bedrijfsprocessen

Generieke bedrijfsprocessen in AppMaster Web Designer zijn specifiek ontworpen om repetitieve handelingen en redundante logica in afzonderlijke stromen in te kapselen. Eenmaal gecreëerd, kunnen deze bedrijfsprocessen naadloos als afzonderlijke blokken worden geïntegreerd in elk niveau van de bedrijfsprocessen van uw webapplicatie.

Belangrijkste kenmerken:

• Efficiënt workflowbeheer: door algemene taken naar generieke bedrijfsprocessen te verplaatsen, vermindert u duplicatie aanzienlijk en stroomlijnt u de workflow van uw applicatie.
• Frontend-functionaliteit: Terwijl ze de functionaliteit van backend-bedrijfsprocessen weerspiegelen, worden generieke bedrijfsprocessen op unieke wijze uitgevoerd op de frontend . Dit zorgt voor snellere interacties en onmiddellijke feedback binnen de gebruikersinterface.

Gemak van hergebruik:

Om een ​​Generiek Bedrijfsproces te gebruiken tijdens het bouwen van logica, sleept u eenvoudigweg het gewenste blok uit de groep Door de gebruiker aangemaakte ZP's naar uw canvas.

🔔 Prestatieoverweging: het is belangrijk op te merken dat we voor complexe en resource-intensieve taken aanbevelen deze processen aan de serverzijde (Backend) uit te voeren. Deze aanpak zorgt voor betere prestaties en efficiëntie, vooral voor bewerkingen die veel rekenkracht vereisen of een veilige verwerking van gevoelige gegevens vereisen.

Elementtriggers

Componenttriggers in AppMaster Web Designer zijn essentieel voor het toevoegen van interactiviteit aan uw webapplicaties. Deze triggers zijn gekoppeld aan specifieke UI-elementen, waardoor vooraf gedefinieerde bedrijfsprocessen worden geactiveerd als reactie op gebruikersinteracties. Elke component in uw applicatie heeft een reeks triggers die kunnen worden aangepast om een ​​dynamische en boeiende gebruikerservaring te creëren:

• Gemeenschappelijke triggers: Componenten delen een reeks standaardtriggers, zoals onCreate , onDestroy , onShow en onHide , die reageren op de levenscyclus van de component en veranderingen in de zichtbaarheid.
• Specifieke triggers: Naast de gebruikelijke triggers hebben componenten unieke triggers die zijn afgestemd op hun functionaliteit. Een knop kan bijvoorbeeld een onClick- trigger hebben, een tabel kan reageren op onUpdateData en een Tabs kan een onTabSelect- trigger hebben.

Ondanks de verscheidenheid blijft het onderliggende principe consistent: een gebeurtenis brengt een bijbehorend bedrijfsproces in beweging. Door Component Triggers effectief te gebruiken, kunt u een interactieve en responsieve webapplicatie maken die in realtime op gebruikersinvoer reageert, waardoor de algehele gebruikerservaring wordt verbeterd en uw applicatie intuïtiever en gebruiksvriendelijker wordt.

Toegang krijgen tot triggers

Om de triggers van een component te bekijken en te configureren, selecteert u de component op canvas en navigeert u naar het tabblad 'Workflow' in de rechterzijbalk. Hier vindt u een lijst met beschikbare triggers. Door er één aan te klikken, kunt u uw gewenste bedrijfsproces eraan koppelen. Triggers met aangesloten logica zijn blauw gemarkeerd voor gemakkelijke identificatie.

Bedrijfsprocessen creëren

Het opzetten van een bedrijfsproces voor een componenttrigger volgt een vergelijkbare aanpak als het maken van bedrijfsprocessen in de backend, zoals u kunt zien in Module 4. U gebruikt een gemeenschappelijk canvas waarop blokken worden toegevoegd die verschillende acties vertegenwoordigen. De verbindingen tussen deze blokken definiëren de volgorde van acties, waardoor u intuïtief complexe workflows kunt bouwen.

Applicatieworkflow bouwen

Laten we zo'n bedrijfsproces maken voor de knop Berekenen. Bepaal eerst wat we moeten doen als op de knop wordt geklikt:

• Ontdek de X- en Y-waarden. Haal ze op uit de overeenkomstige invoervelden.
• Start een eindpunt voor berekeningen en geef er X- en Y-parameters aan door.
• Maak de resultaatcontainer zichtbaar.
• Plaats het berekeningsresultaat in de vereiste Label-velden.

Selecteer ons Calc Button- element in het canvas en klik op de onClick Trigger.

De bedrijfsproceseditor is geopend. Hier zullen we ons bedrijfsproces voor de knop bouwen.

Haal waarden uit invoer

De eerste stap is het verkrijgen van waarden die door de gebruiker worden ingevoerd. Hiervoor biedt AppMaster het Input Float Get Data-blok, dat een 'Element Key' als invoerparameter heeft en de 'Waarde' uitvoert, waarbij in wezen de huidige waarden van de opgegeven component worden gelezen.

Omdat we twee afzonderlijke velden hebben (die X- en Y-waarden vertegenwoordigen), moet u twee 'Input Float Get Data'-blokken gebruiken: één voor elk invoerveld.

Om het in te stellen:

• Sleep voor elk invoerveld twee Input Float Get Data-blokken naar uw canvas.
• Stel de Elementsleutel voor elk blok in zodat deze overeenkomt met de respectievelijke Float-ingangen. Hierdoor wordt het blok aan het juiste UI-element gekoppeld, zodat het de juiste gegevens leest.

Als u uw elementen eerder in de UI Designer hebt hernoemd tijdens het maken van de interface, wordt het lokaliseren en selecteren van de benodigde component voor elk blok eenvoudig.

☝️ Door elementen tijdens de ontwerpfase te hernoemen, kunnen ze later gemakkelijk worden geïdentificeerd tijdens de configuratie van de bedrijfslogica.

Start het eindpunt

Na het ophalen van de gebruikersinvoer bestaat de volgende fase in de workflow van uw webapplicatie uit het initiëren van het Eindpunt . Deze cruciale stap brengt de verbinding tot stand tussen de frontend (de gebruikersinterface) en de backend (processen aan de serverzijde) van uw webapplicatie, en de opdracht voor berekeningen wordt van de browser naar de server verzonden.

Eindpunten in AppMaster worden weergegeven als afzonderlijke bedrijfsprocesblokken binnen de applicatie. Om onze eindpunten te gebruiken, kiest u eenvoudigweg de juiste uit de lijst met bedrijfsprocesblokken en sleept u deze naar uw canvas.

In module 5 hebben we een eindpunt geconfigureerd met een GET- methode en hieraan de basis-URL "module4-basic" toegewezen. Je zou het moeten vinden als - Serververzoek GET /module4-basic/ en sleep het naar canvas.

In tegenstelling tot componenten hebben AppMaster-eindpunten geen ID-instelling nodig, omdat deze vooraf is gedefinieerd. Deze functie stroomlijnt het proces van het integreren van eindpunten in uw bedrijfslogica.

De laatste stap is het invoeren van de X- en Y -waarden die u uit de vorige stap hebt verkregen in het eindpunt. Hierdoor kan de backend deze invoer ontvangen en verwerken, en de nodige berekeningen uitvoeren.

Staat van UI-elementen

De volgende stap in de workflow van uw webapplicatie is het beheren van de zichtbaarheid van containers, met name het tonen van de container die resultaten weergeeft en het verbergen van de container die een hint bevat.

Hier ziet u hoe u dit kunt bereiken:

1. Begin met het slepen van twee Flex Update Properties- blokken naar uw canvas.
2. Wijs voor elk Flex Update Properties- blok de Element Key- parameter toe die overeenkomt met de respectieve containers: één voor de resultatencontainer en de andere voor de hintcontainer.
3. Configureer de zichtbaarheidsparameter binnen deze blokken. Stel de parameter Visible in op True voor de resultatencontainer, zodat deze na de berekening zichtbaar wordt. Omgekeerd stelt u deze parameter in op False zodat de hintcontainer deze verbergt nadat de berekening is voltooid.

Door deze stappen te implementeren, creëert u een dynamisch antwoord in uw applicatie-interface. Na een actie van een gebruiker, zoals het klikken op een knop om berekeningen uit te voeren, verbergt de toepassing automatisch de hintcontainer en wordt de resultatencontainer weergegeven.

Dit verbetert niet alleen de gebruikerservaring, maar houdt ook uw applicatie-interface schoon en gericht op relevante informatie in elke fase van de interactie.

Realtime voorbeeld

Om de voortgang van uw bedrijfsproces te beoordelen, kunt u eenvoudig een voorbeeld van de tussenresultaten bekijken:

1. Klik eerst op de knop Opslaan en afsluiten in de bedrijfsproceseditor. Met deze actie wordt uw huidige workflow opgeslagen en wordt de bedrijfsproceseditor gesloten.
2. Voer een realtime preview van uw webapplicatie uit om de interactie met de applicatie te controleren alsof deze live is.
3. Test de functionaliteit door op de knop Berekenen te klikken.

Als uw bedrijfsproces goed is ingericht, ziet u het dynamische antwoord: de container met de hint wordt verborgen en tegelijkertijd wordt de container met de resultaten onthuld.

Deze testmethode biedt een praktische en directe manier om ervoor te zorgen dat uw bedrijfsprocessen functioneren zoals bedoeld, zodat u de nodige aanpassingen kunt doorvoeren voordat u uw aanvraag voltooit.

Gegevensweergave

Zodra u de logica van uw applicatie met succes heeft getest, is het tijd om uw bedrijfslogica verder te verfijnen.

De laatste stap bestaat uit het weergeven van de berekende resultaten in de interface van uw webapplicatie. We brengen de outputgegevens van ons backend-bedrijfsproces in kaart met de relevante UI-elementen van uw webapplicatie.

Aangezien de resultaten van de backend in een vooraf bepaalde volgorde worden geretourneerd, is het uw taak om elk stukje gegevens (array-element) uit te lijnen met het juiste tekstblokelement in uw gebruikersinterface.

Voor de gegevensverwerking gebruiken we de volgende blokken:

• Array-element : gebruik deze om toegang te krijgen tot individuele elementen binnen de resultaatarray. Voor elke index heeft u een blok nodig, variërend van 0 tot 4.
• Naar tekst: aangezien uw gegevens in Float-formaat zijn, gebruikt u dit blok om deze Float-waarden om te zetten in een tekstformaat dat geschikt is voor weergave.
• Updategegevens tekstblokken: dit blok is essentieel voor het vullen van de tekstblokken in uw gebruikersinterface met de geconverteerde tekstgegevens.

Deze blokken extraheren gegevens uit de resultatenreeks, converteren de gegevens naar een tekstindeling en werken vervolgens de overeenkomstige tekstblokken in uw gebruikersinterface bij.

Zo stelt u het in:

1. Plaats deze blokken op het canvas.
2. Voer in het Array Element- blok de array in die u van uw eindpunt heeft ontvangen (begin vanaf 0).
3. Stel de Index in om het juiste element binnen de array te targeten.
4. Verbind de uitvoerwaarde van het Array-element met het To-tekstblok .
5. Geef de elementsleutel op in het tekstblok Updategegevens voor uw UI-element waar u de gegevens wilt weergeven.
6. Verbind de blokken opeenvolgend.

Dupliceer deze reeks blokken voor elk element in de array die u wilt weergeven. Pas de index in elk 'Array Element'-blok aan zodat deze overeenkomt met de verschillende elementen van de array.

Zorg ervoor dat deze blokken ook in een reeks zijn verbonden.

Eindresultaat

Hiermee is het creëren van het bedrijfsproces voltooid.

Sla uw bedrijfsproces op en bekijk het eindresultaat in de preview. Voer een Application Preview uit op het implementatieplan waarin u uw eindpunt in Module 5 hebt gepubliceerd.

🎉 Gefeliciteerd met de fantastische prestatie!

Je hebt met succes een volledig functionele webapplicatie ontwikkeld met bedrijfslogica en een interactieve gebruikersinterface. Als alles werkt zoals bedoeld, bent u nu klaar om de volgende laatste stap te zetten: het publiceren van uw toepassing en het delen ervan met gebruikers.

Maar de reis stopt hier niet. Er is volop gelegenheid om uw aanvraag verder te verfijnen! U kunt de visuele aantrekkingskracht en gebruikerservaring verbeteren door het uiterlijk van uw UI-elementen aan te passen of uw webapplicatielogica uit te breiden. U kunt de velden bijvoorbeeld verplicht maken en een knop toevoegen om de velden opnieuw in te stellen zonder elke invoer handmatig te wissen.