Web-App-Workflow

Im AppMaster Web Designer können Sie zusätzlich zur Backend- Logik auch Geschäftslogik für Webanwendungen auf der Frontend- Seite konfigurieren. Mit dieser leistungsstarken Funktion können Sie anspruchsvolle, dynamische Webanwendungen erstellen, die auf spezifische Geschäftsanforderungen zugeschnitten sind.

Im Kontext einer Webanwendung können Geschäftsprozesse je nach Bedingungen Benutzerauthentifizierung, Datenverarbeitung, Online-Transaktionen, Inhaltsverwaltung, Kundendienstvorgänge und die Anpassung von UI-Elementen umfassen.

Drei Ebenen der Geschäftslogik im AppMaster Web Designer:

• Anwendungstrigger: Hierbei handelt es sich um High-Level-Trigger, die auf anwendungsweite Ereignisse oder Zustände reagieren und bestimmte Geschäftsprozesse auslösen.
• Generische Geschäftsprozesse: Hierbei handelt es sich um vordefinierte Vorgänge, die auf verschiedene Teile der Anwendung angewendet werden können, um Aufgaben zu automatisieren und Arbeitsabläufe zu optimieren.
• Elementauslöser: Diese sind detaillierter als Anwendungsauslöser und mit bestimmten UI-Elementen verknüpft, wodurch Geschäftsprozesse basierend auf Interaktionen mit diesen Elementen aktiviert werden.

Durch die Nutzung dieser Ebenen der Geschäftslogik ermöglicht Ihnen AppMaster Web Designer die Erstellung von Webanwendungen, die nicht nur optisch ansprechend, sondern auch intelligent sind und auf Benutzerbedürfnisse und -verhalten reagieren.

🔔 Es ist wichtig, die laufende Vorschau neu zu laden, nachdem Sie eine neue Geschäftslogik zum Starten des BP hinzugefügt haben.

Anwendungsauslöser

Anwendungstrigger in AppMaster Web Designer sind High-Level-Trigger, die auf anwendungsweite Ereignisse oder Zustände reagieren und die Ausführung bestimmter Geschäftsprozesse ausführen, um die Funktionalität und das Benutzererlebnis zu verbessern.

AppMaster bietet eine Vielzahl von Anwendungstriggern, die jeweils für bestimmte Szenarien konzipiert sind:

• Beim App-Start: Wird beim Start der Anwendung aktiviert, ideal für Ersteinrichtungsvorgänge.
• Bei App-Navigation: Wird während der Navigation zwischen verschiedenen Teilen der Anwendung ausgelöst.
• Bei App-Unschärfe: Wird ausgelöst, wenn die Anwendung den Fokus verliert, nützlich für Pausen- oder Speicheraktionen.
• Bei App-Fokus: Wird ausgeführt, wenn die Anwendung den Fokus wiedererlangt, ideal zum Fortsetzen oder Aktualisieren von Inhalten.
• Bei ausgeblendeter App: Wird aktiviert, wenn die Anwendung minimiert oder auf dem Bildschirm nicht sichtbar ist.
• Bei sichtbarer App: Wird ausgelöst, wenn die Anwendung wieder sichtbar wird, was zum Aktualisieren von Inhalten nützlich ist.
• Bei App-Zerstörung: Wird während des Herunterfahrens der Anwendung ausgeführt.
• On App Online: Wird ausgelöst, wenn die Anwendung einen Online-Status erkennt, ideal zum Synchronisieren von Daten.
• Bei App Offline: Wird ausgelöst, wenn die Anwendung offline geht, wodurch Offline-Funktionen aktiviert werden.
• Bei App-Authentifizierung erforderlich: Wird bei Erhalt einer „401 (nicht autorisiert)“-Antwort aktiviert und fordert den Benutzer zur erneuten Authentifizierung auf.
• Bei App verboten: Löst eine „403 (Verboten)“-Antwort aus, die normalerweise für Zugriffskontrolle und Berechtigungen verwendet wird.

Die genaue Liste der Anwendungsauslöser kann erweitert werden, indem Sie WebSocket-Endpunkte auf der Backend-Ebene Ihrer Anwendung erstellen.

Diese Trigger können verwendet werden, um die Benutzerautorisierung beim Start zu verwalten, Zugriffsrechte zu überprüfen, die Umleitung bei Autorisierungsänderungen zu konfigurieren, Fehler zu behandeln und vieles mehr, was sie für die Erstellung einer reaktionsfähigen und sicheren Webanwendung unverzichtbar macht.

Generische Geschäftsprozesse

Generische Geschäftsprozesse im AppMaster Web Designer sind speziell darauf ausgelegt, sich wiederholende Vorgänge und redundante Logik in eindeutigen Abläufen zusammenzufassen. Nach der Erstellung können diese Geschäftsprozesse nahtlos als separate Blöcke in jede Ebene der Geschäftsprozesse Ihrer Webanwendung integriert werden.

Hauptmerkmale:

• Effizientes Workflow-Management: Durch die Verlagerung allgemeiner Aufgaben in generische Geschäftsprozesse reduzieren Sie die Duplizierung erheblich und optimieren den Workflow Ihrer Anwendung.
• Frontend-Funktionalität: Generische Geschäftsprozesse spiegeln zwar die Funktionalität von Backend-Geschäftsprozessen wider, werden jedoch ausschließlich im Frontend ausgeführt. Dies ermöglicht schnellere Interaktionen und unmittelbares Feedback innerhalb der Benutzeroberfläche.

Einfache Wiederverwendung:

Um beim Erstellen der Logik einen generischen Geschäftsprozess zu verwenden, ziehen Sie einfach den gewünschten Block aus der Gruppe „Benutzererstellte BPs“ auf Ihre Leinwand.

🔔 Leistungsaspekte: Es ist wichtig zu beachten, dass wir bei komplexen und ressourcenintensiven Aufgaben empfehlen, diese Prozesse auf der Serverseite (Backend) auszuführen. Dieser Ansatz gewährleistet eine bessere Leistung und Effizienz, insbesondere bei Vorgängen, die rechenintensiv sind oder einen sicheren Umgang mit sensiblen Daten erfordern.

Elementauslöser

Komponentenauslöser in AppMaster Web Designer sind für das Hinzufügen von Interaktivität zu Ihren Webanwendungen unerlässlich. Diese Auslöser sind an bestimmte UI-Elemente gebunden und aktivieren vordefinierte Geschäftsprozesse als Reaktion auf Benutzerinteraktionen. Jede Komponente in Ihrer Anwendung verfügt über eine Reihe von Triggern, die angepasst werden können, um ein dynamisches und ansprechendes Benutzererlebnis zu schaffen:

• Gemeinsame Auslöser: Komponenten teilen eine Reihe von Standardauslösern wie onCreate , onDestroy , onShow und onHide , die auf den Lebenszyklus und die Sichtbarkeitsänderungen der Komponente reagieren.
• Spezifische Auslöser: Zusätzlich zu den allgemeinen Auslösern verfügen Komponenten über einzigartige Auslöser, die auf ihre Funktionalität zugeschnitten sind. Beispielsweise könnte ein Button einen onClick- Trigger haben, eine Table könnte auf onUpdateData reagieren und ein Tabs könnte einen onTabSelect- Trigger haben.

Bei aller Vielfalt bleibt das Grundprinzip gleich: Ein Ereignis löst einen entsprechenden Geschäftsprozess aus. Durch den effektiven Einsatz von Komponenten-Triggern können Sie eine interaktive und reaktionsfähige Webanwendung erstellen, die in Echtzeit auf Benutzereingaben reagiert, das gesamte Benutzererlebnis verbessert und Ihre Anwendung intuitiver und benutzerfreundlicher macht.

Auf Trigger zugreifen

Um die Auslöser einer Komponente anzuzeigen und zu konfigurieren, wählen Sie die Komponente auf der Leinwand aus und navigieren Sie zur Registerkarte „Workflow“ in der rechten Seitenleiste. Hier finden Sie eine Liste der verfügbaren Trigger. Wenn Sie darauf klicken, können Sie Ihren gewünschten Geschäftsprozess daran anhängen. Auslöser mit angeschlossener Logik werden zur leichteren Identifizierung blau hervorgehoben.

Geschäftsprozesse erstellen

Das Einrichten eines Geschäftsprozesses für einen Komponentenauslöser folgt einem ähnlichen Ansatz wie die Erstellung von Backend-Geschäftsprozessen, wie in Modul 4 gezeigt. Sie verwenden einen gemeinsamen Canvas, auf dem Blöcke hinzugefügt werden, die verschiedene Aktionen darstellen. Die Verbindungen zwischen diesen Blöcken definieren die Abfolge der Aktionen und ermöglichen Ihnen den intuitiven Aufbau komplexer Arbeitsabläufe.

Workflow für die Erstellung von Anwendungen

Erstellen wir einen solchen Geschäftsprozess für die Schaltfläche Berechnen. Entscheiden Sie zunächst, was wir tun müssen, wenn auf die Schaltfläche geklickt wird:

• Finden Sie die X- und Y-Werte heraus. Holen Sie sich diese aus den entsprechenden Eingabefeldern.
• Starten Sie einen Endpunkt für Berechnungen und übergeben Sie ihm X- und Y-Parameter.
• Machen Sie den Ergebniscontainer sichtbar.
• Tragen Sie das Berechnungsergebnis in die erforderlichen Beschriftungsfelder ein.

Wählen Sie unser Calc Button- Element im Canvas aus und klicken Sie auf den onClick- Trigger.

Der Geschäftsprozesseditor wird geöffnet. Hier erstellen wir unseren Geschäftsprozess für Button.

Holen Sie sich Werte aus Eingaben

Der erste Schritt besteht darin, vom Benutzer eingegebene Werte abzurufen. Dafür stellt AppMaster den Input Float Get Data-Block bereit, der einen „Element Key“ als Eingabeparameter aufweist und den „Value“ ausgibt, wodurch im Wesentlichen die aktuellen Werte aus der angegebenen Komponente gelesen werden.

Da wir zwei separate Felder haben (die X- und Y-Werte darstellen), müssen Sie zwei „Input Float Get Data“-Blöcke verwenden – einen für jedes Eingabefeld.

So richten Sie es ein:

• Ziehen Sie für jedes Eingabefeld zwei Input Float Get Data Blocks auf Ihre Leinwand.
• Stellen Sie den Elementschlüssel für jeden Block so ein, dass er den jeweiligen Float-Eingängen entspricht. Dadurch wird der Block mit dem richtigen UI-Element verknüpft und sichergestellt, dass er die richtigen Daten liest.

Wenn Sie Ihre Elemente zuvor beim Erstellen der Schnittstelle im UI-Designer umbenannt haben, ist das Auffinden und Auswählen der erforderlichen Komponente für jeden Block einfacher.

☝️ Das Umbenennen von Elementen während der Entwurfsphase hilft dabei, sie später während der Konfiguration der Geschäftslogik leichter zu identifizieren.

Starten Sie den Endpunkt

Nach dem Abruf der Benutzereingaben besteht die nächste Phase im Workflow Ihrer Webanwendung darin, den Endpoint zu initiieren. Dieser entscheidende Schritt stellt die Verbindung zwischen dem Frontend (der Benutzeroberfläche) und dem Backend (serverseitige Prozesse) Ihrer Webanwendung her und der Befehl für Berechnungen wird vom Browser an den Server übermittelt.

Endpunkte in AppMaster werden als unterschiedliche Geschäftsprozessblöcke innerhalb der Anwendung dargestellt. Um unsere Endpunkte zu verwenden, wählen Sie einfach den entsprechenden aus der Liste der Geschäftsprozessblöcke aus und ziehen Sie ihn in Ihre Leinwand.

In Modul 5 haben wir einen Endpunkt mit einer GET- Methode konfiguriert und ihm die Basis-URL „module4-basic“ zugewiesen. Sie sollten es als „ Server request GET /module4-basic/“ aufgeführt finden und es auf die Leinwand ziehen.

Im Gegensatz zu Komponenten benötigen AppMaster-Endpunkte keine Einstellung ihrer ID, da diese vordefiniert ist. Diese Funktion optimiert den Prozess der Integration von Endpunkten in Ihre Geschäftslogik.

Der letzte Schritt besteht darin, die X- und Y -Werte, die Sie im vorherigen Schritt erhalten haben, in den Endpunkt einzugeben. Dadurch kann das Backend diese Eingaben empfangen und verarbeiten und die erforderlichen Berechnungen durchführen.

Status der UI-Elemente

Der nächste Schritt in Ihrem Webanwendungs-Workflow ist die Verwaltung der Sichtbarkeit von Containern – insbesondere das Anzeigen des Containers, der Ergebnisse anzeigt, und das Ausblenden des Containers, der einen Hinweis enthält.

So erreichen Sie dies:

1. Beginnen Sie damit, zwei Flex Update Properties- Blöcke auf Ihre Leinwand zu ziehen.
2. Weisen Sie für jeden Block „Flex Update Properties“ den Parameter „Element Key“ zu, der den jeweiligen Containern entspricht – einen für den Ergebniscontainer und einen für den Hinweiscontainer.
3. Konfigurieren Sie den Sichtbarkeitsparameter innerhalb dieser Blöcke. Setzen Sie den Parameter Visible für den Ergebniscontainer auf True , um sicherzustellen, dass er nach der Berechnung sichtbar wird. Umgekehrt legen Sie diesen Parameter auf „False“ fest, damit der Hinweiscontainer ihn nach Abschluss der Berechnung ausblendet.

Durch die Implementierung dieser Schritte erstellen Sie eine dynamische Reaktion in Ihrer Anwendungsschnittstelle. Nach der Aktion eines Benutzers, beispielsweise dem Klicken auf eine Schaltfläche zum Durchführen von Berechnungen, blendet die Anwendung automatisch den Hinweiscontainer aus und zeigt den Ergebniscontainer an.

Dies verbessert nicht nur das Benutzererlebnis, sondern sorgt auch dafür, dass Ihre Anwendungsoberfläche in jeder Phase der Interaktion sauber und auf relevante Informationen fokussiert bleibt.

Echtzeitvorschau

Um den Fortschritt Ihres Geschäftsprozesses zu beurteilen, können Sie die Zwischenergebnisse ganz einfach in der Vorschau anzeigen:

1. Klicken Sie zunächst im Geschäftsprozesseditor auf die Schaltfläche „Speichern und beenden“ . Diese Aktion speichert Ihren aktuellen Workflow und schließt den Geschäftsprozesseditor.
2. Führen Sie eine Echtzeitvorschau Ihrer Webanwendung aus, um die Interaktion mit der Anwendung zu überprüfen, als wäre sie live.
3. Testen Sie die Funktionalität, indem Sie auf die Schaltfläche Berechnen klicken.

Wenn Ihr Geschäftsprozess korrekt eingerichtet wurde, sehen Sie die dynamische Reaktion: Der Container mit dem Hinweis wird ausgeblendet und gleichzeitig wird der Container mit den Ergebnissen angezeigt.

Diese Testmethode bietet eine praktische und unmittelbare Möglichkeit, sicherzustellen, dass Ihre Geschäftsprozesse wie vorgesehen funktionieren, und ermöglicht Ihnen, alle erforderlichen Anpassungen vorzunehmen, bevor Sie Ihre Anwendung fertigstellen.

Datenrendering

Nachdem Sie die Logik Ihrer Anwendung erfolgreich getestet haben, ist es an der Zeit, Ihre Geschäftslogik weiter zu verfeinern.

Der letzte Schritt besteht darin, die berechneten Ergebnisse in der Benutzeroberfläche Ihrer Webanwendung anzuzeigen. Wir ordnen die Ausgabedaten unseres Backend-Geschäftsprozesses den relevanten UI-Elementen Ihrer Webanwendung zu.

Da die Ergebnisse vom Backend in einer vorgegebenen Reihenfolge zurückgegeben werden, besteht Ihre Aufgabe darin, jedes Datenelement (Array-Element) mit dem richtigen Textblockelement in Ihrer Benutzeroberfläche auszurichten.

Für die Datenverarbeitung verwenden wir die folgenden Blöcke:

• Array-Element : Verwenden Sie diese, um auf einzelne Elemente innerhalb des Ergebnisarrays zuzugreifen. Sie benötigen für jeden Index einen Block im Bereich von 0 bis 4.
• In Text: Da Ihre Daten im Float-Format vorliegen, verwenden Sie diesen Block, um diese Float-Werte in ein für die Anzeige geeignetes Textformat zu konvertieren.
• Textblock-Aktualisierungsdaten: Dieser Block ist wichtig, um die Textblöcke in Ihrer Benutzeroberfläche mit den konvertierten Textdaten zu füllen.

Diese Blöcke extrahieren Daten aus dem Ergebnisarray, konvertieren die Daten in ein Textformat und aktualisieren dann die entsprechenden Textblöcke in Ihrer Benutzeroberfläche.

So richten Sie es ein:

1. Platzieren Sie diese Blöcke auf der Leinwand.
2. Geben Sie im Block „Array-Element“ das von Ihrem Endpunkt empfangene Array ein (beginnen Sie bei 0).
3. Legen Sie den Index so fest, dass er auf das entsprechende Element innerhalb des Arrays abzielt.
4. Verbinden Sie den Ausgabewert des Array-Elements mit dem To Text- Block.
5. Geben Sie den Elementschlüssel im Textblock an. Aktualisieren Sie die Daten für Ihr UI-Element, wo die Daten angezeigt werden sollen.
6. Verbinden Sie die Blöcke nacheinander.

Duplizieren Sie diese Blockfolge für jedes Element im Array, das Sie anzeigen möchten. Passen Sie den Index in jedem „Array-Element“-Block an, um den verschiedenen Elementen des Arrays zu entsprechen.

Stellen Sie sicher, dass diese Blöcke auch in einer Reihenfolge verbunden sind.

Endergebnis

Damit ist die Erstellung des Geschäftsprozesses abgeschlossen.

Speichern Sie Ihren Geschäftsprozess und überprüfen Sie das Endergebnis in der Vorschau. Führen Sie eine Anwendungsvorschau für den Bereitstellungsplan aus, in dem Sie Ihren Endpunkt in Modul 5 veröffentlicht haben.

🎉 Herzlichen Glückwunsch zu der fantastischen Leistung!

Sie haben erfolgreich eine voll funktionsfähige Webanwendung mit Geschäftslogik und einer interaktiven Benutzeroberfläche entwickelt. Wenn alles wie vorgesehen funktioniert, können Sie jetzt den nächsten letzten Schritt unternehmen und Ihre Anwendung veröffentlichen und für Benutzer freigeben.

Aber die Reise hört hier nicht auf. Es gibt reichlich Gelegenheit, Ihre Bewerbung weiter zu verfeinern! Sie können die visuelle Attraktivität und das Benutzererlebnis verbessern, indem Sie das Erscheinungsbild Ihrer UI-Elemente anpassen oder die Logik Ihrer Webanwendung erweitern. Beispielsweise können Sie die Felder zu Pflichtfeldern machen und eine Schaltfläche zum Zurücksetzen der Felder hinzufügen, ohne jede Eingabe manuell zu löschen.