Flux de travail des applications Web

Dans AppMaster Web Designer, vous pouvez configurer la logique métier pour les applications Web côté frontend en plus de la logique backend . Cette fonctionnalité puissante vous permet de créer des applications Web sophistiquées et dynamiques adaptées aux besoins spécifiques de votre entreprise.

Dans le contexte d'une application Web, les processus métier peuvent inclure l'authentification des utilisateurs, le traitement des données, les transactions en ligne, la gestion de contenu, les opérations de service client et la personnalisation des éléments de l'interface utilisateur en fonction des conditions.

Trois niveaux de logique métier dans AppMaster Web Designer :

• Déclencheurs d'application : il s'agit de déclencheurs de haut niveau qui répondent à des événements ou à des états à l'échelle de l'application, déclenchant des processus métier spécifiques.
• Processus métier génériques : il s'agit d'ensembles d'opérations prédéfinis qui peuvent être appliqués à différentes parties de l'application, automatisant les tâches et rationalisant les flux de travail.
• Déclencheurs d'éléments : plus granulaires que les déclencheurs d'application, ceux-ci sont liés à des éléments spécifiques de l'interface utilisateur, activant des processus métier en fonction des interactions avec ces éléments.

En tirant parti de ces niveaux de logique métier, AppMaster Web Designer vous permet de créer des applications Web non seulement visuellement attrayantes, mais également intelligentes et adaptées aux besoins et aux comportements des utilisateurs.

🔔 Il est important de recharger l'aperçu en cours d'exécution après avoir ajouté toute nouvelle logique métier pour lancer le BP.

Déclencheurs d'applications

Les déclencheurs d'application dans AppMaster Web Designer sont des déclencheurs de haut niveau qui répondent à des événements ou à des états à l'échelle de l'application et exécutent des processus métier spécifiques pour améliorer les fonctionnalités et l'expérience utilisateur.

AppMaster propose une variété de déclencheurs d'application, chacun conçu pour des scénarios spécifiques :

• Au lancement de l'application : activé au démarrage de l'application, idéal pour les procédures de configuration initiale.
• Sur App Navigate : se déclenche lors de la navigation entre différentes parties de l’application.
• Sur App Blur : déclenché lorsque l'application perd le focus, utile pour mettre en pause ou enregistrer des actions.
• Sur App Focus : s'exécute lorsque l'application retrouve le focus, idéal pour reprendre ou mettre à jour le contenu.
• Sur l'application cachée : activé lorsque l'application est réduite ou n'est pas visible à l'écran.
• Sur l'application visible : se déclenche lorsque l'application redevient visible, utile pour actualiser le contenu.
• Lors de la destruction de l'application : s'exécute pendant le processus d'arrêt de l'application.
• Sur l'application en ligne : déclenché lorsque l'application détecte un statut en ligne, parfait pour synchroniser les données.
• Sur l'application hors ligne : se déclenche lorsque l'application est hors ligne, activant ainsi les fonctionnalités hors ligne.
• Sur l'authentification de l'application requise : s'active à la réception d'une réponse « 401 (non autorisée) », invitant l'utilisateur à se réauthentifier.
• Sur l'application interdite : se déclenche sur une réponse "403 (Interdit)", généralement utilisée pour le contrôle d'accès et les autorisations.

La liste exacte des déclencheurs d'application peut être étendue en créant des points de terminaison WebSocket au niveau backend de votre application.

Ces déclencheurs peuvent être utilisés pour gérer l'autorisation des utilisateurs au lancement, vérifier les droits d'accès, configurer la redirection lors des modifications d'autorisation, gérer les erreurs et bien plus encore, ce qui les rend indispensables à la création d'une application Web réactive et sécurisée.

Processus métier génériques

Les processus métier génériques dans AppMaster Web Designer sont spécifiquement conçus pour encapsuler les opérations répétitives et la logique redondante dans des flux distincts. Une fois créés, ces processus métier peuvent être intégrés de manière transparente sous forme de blocs distincts à n'importe quel niveau des processus métier de votre application Web.

Principales caractéristiques:

• Gestion efficace du flux de travail : en déplaçant les tâches courantes vers des processus métier génériques, vous réduisez considérablement la duplication et rationalisez le flux de travail de votre application.
• Fonctionnalité front-end : tout en reflétant les fonctionnalités des processus métier back-end, les processus métier génériques sont exécutés de manière unique sur le front-end . Cela permet des interactions plus rapides et un retour immédiat au sein de l’interface utilisateur.

Facilité de réutilisation :

Pour utiliser un processus métier générique lors de la création d'une logique, faites simplement glisser le bloc souhaité du groupe BP créés par l'utilisateur sur votre canevas.

🔔 Considération sur les performances : Il est important de noter que pour les tâches complexes et gourmandes en ressources, nous recommandons d'exécuter ces processus côté serveur (Backend). Cette approche garantit de meilleures performances et efficacité, en particulier pour les opérations exigeantes en termes de calcul ou nécessitant une gestion sécurisée des données sensibles.

Déclencheurs d'éléments

Les déclencheurs de composants dans AppMaster Web Designer sont essentiels pour ajouter de l'interactivité à vos applications Web. Ces déclencheurs sont liés à des éléments spécifiques de l'interface utilisateur, activant des processus métier prédéfinis en réponse aux interactions des utilisateurs. Chaque composant de votre application dispose d'un ensemble de déclencheurs qui peuvent être personnalisés pour créer une expérience utilisateur dynamique et engageante :

• Déclencheurs communs : les composants partagent un ensemble de déclencheurs standard tels que onCreate , onDestroy , onShow et onHide , qui répondent aux changements de cycle de vie et de visibilité du composant.
• Déclencheurs spécifiques : en plus des déclencheurs courants, les composants disposent de déclencheurs uniques adaptés à leurs fonctionnalités. Par exemple, un Button peut avoir un déclencheur onClick , un Table peut répondre à onUpdateData et un Tabs peut avoir un déclencheur onTabSelect .

Malgré la diversité, le principe sous-jacent reste le même : un événement déclenche un processus métier correspondant. En utilisant efficacement les déclencheurs de composants, vous pouvez créer une application Web interactive et réactive qui réagit aux entrées de l'utilisateur en temps réel, améliorant ainsi l'expérience utilisateur globale et rendant votre application plus intuitive et conviviale.

Accéder aux déclencheurs

Pour afficher et configurer les déclencheurs d'un composant, sélectionnez le composant sur le canevas et accédez à l'onglet « Workflow » dans la barre latérale droite. Ici, vous trouverez une liste des déclencheurs disponibles. En cliquant sur l'un d'entre eux, vous pouvez y attacher le processus métier souhaité. Les déclencheurs avec logique attachée sont surlignés en bleu pour une identification facile.

Création de processus métier

La configuration d'un processus métier pour un déclencheur de composant suit une approche similaire à la création de processus métier back-end, comme indiqué dans le module 4. Vous utiliserez un canevas commun dans lequel des blocs représentant différentes actions sont ajoutés. Les connexions entre ces blocs définissent la séquence d'actions, vous permettant de créer intuitivement des flux de travail complexes.

Création d'un flux de travail d'application

Créons un tel processus métier pour le bouton Calculer. Tout d’abord, décidez de ce que nous devons faire lorsque l’on clique sur le bouton :

• Découvrez les valeurs X et Y. Récupérez-les à partir des champs de saisie correspondants.
• Lancez un point de terminaison pour les calculs et transmettez-lui les paramètres X et Y.
• Rendre le conteneur de résultats visible.
• Mettez le résultat du calcul dans les champs d'étiquette requis.

Sélectionnez notre élément Calc Button dans le canevas et cliquez sur le déclencheur onClick .

L'éditeur de processus métier sera ouvert. Ici, nous allons construire notre processus métier pour le bouton.

Obtenir les valeurs des entrées

La première étape consiste à obtenir les valeurs saisies par l'utilisateur. Pour cela, AppMaster fournit le bloc Input Float Get Data, qui comporte une « clé d'élément » comme paramètre d'entrée et génère la « valeur », lisant essentiellement les valeurs actuelles du composant spécifié.

Étant donné que nous avons deux champs distincts (représentant les valeurs X et Y), vous devrez donc utiliser deux blocs « Input Float Get Data » - un pour chaque champ de saisie.

Pour le configurer :

• Faites glisser deux blocs de données d'entrée Float Get sur votre canevas pour chaque champ de saisie.
• Définissez la clé d'élément pour chaque bloc pour qu'elle corresponde aux entrées flottantes respectives. Cela relie le bloc au bon élément d'interface utilisateur, garantissant qu'il lit les bonnes données.

Si vous avez précédemment renommé vos éléments dans UI Designer lors de la création de l'interface, localiser et sélectionner le composant nécessaire pour chaque bloc devient simple.

☝️ Renommer les éléments pendant la phase de conception permet de les identifier facilement plus tard lors de la configuration de la logique métier.

Lancer le point de terminaison

Après la récupération des entrées utilisateur, la phase suivante du flux de travail de votre application Web consiste à lancer le point de terminaison . Cette étape critique établit la connexion entre le Frontend (l'interface utilisateur) et le Backend (processus côté serveur) de votre application Web, et la commande de calcul est transmise du navigateur au serveur.

Les points de terminaison dans AppMaster sont représentés sous forme de blocs de processus métier distincts au sein de l'application. Pour utiliser nos points de terminaison, choisissez simplement celui qui convient dans la liste des blocs de processus métier et faites-le glisser dans votre canevas.

Dans le module 5 , nous avons configuré un point de terminaison avec une méthode GET et lui avons attribué l'URL de base "module4-basic" . Vous devriez le trouver répertorié comme - Requête du serveur GET /module4-basic/ et faites-le glisser vers le canevas.

Contrairement aux composants, les points de terminaison AppMaster ne nécessitent pas le paramètre de leur ID, car il est prédéfini. Cette fonctionnalité rationalise le processus d'intégration des points de terminaison dans votre logique métier.

La dernière étape consiste à saisir les valeurs X et Y que vous avez obtenues à l'étape précédente dans le point final. Cela permet au backend de recevoir et de traiter ces entrées, en effectuant les calculs nécessaires.

État des éléments de l'interface utilisateur

L'étape suivante du flux de travail de votre application Web consiste à gérer la visibilité des conteneurs, en particulier en affichant le conteneur qui affiche les résultats et en masquant le conteneur qui contient un indice.

Voici comment y parvenir :

1. Commencez par faire glisser deux blocs Flex Update Properties sur votre canevas.
2. Pour chaque bloc Flex Update Properties , attribuez le paramètre Element Key correspondant aux conteneurs respectifs – un pour le conteneur de résultats et l’autre pour le conteneur d’indices.
3. Configurez le paramètre de visibilité dans ces blocs. Définissez le paramètre Visible sur True pour le conteneur de résultats, en vous assurant qu'il devient visible après le calcul. À l’inverse, définissez ce paramètre sur False pour que le conteneur d’indices le masque une fois le calcul terminé.

En mettant en œuvre ces étapes, vous créez une réponse dynamique dans votre interface d'application. Suite à l'action d'un utilisateur, comme cliquer sur un bouton pour effectuer des calculs, l'application masque automatiquement le conteneur d'indices et affiche le conteneur de résultats.

Cela améliore non seulement l'expérience utilisateur, mais maintient également l'interface de votre application propre et axée sur les informations pertinentes à chaque étape de l'interaction.

Aperçu en temps réel

Pour évaluer l'avancement de votre processus métier, vous pouvez facilement prévisualiser les résultats intermédiaires :

1. Tout d’abord, cliquez sur le bouton Enregistrer et quitter dans l’éditeur de processus métier. Cette action enregistrera votre flux de travail actuel et fermera l'éditeur de processus métier.
2. Exécutez un aperçu en temps réel de votre application Web pour vérifier l'interaction avec l'application comme si elle était en direct.
3. Testez la fonctionnalité en cliquant sur le bouton Calculer .

Si votre processus métier a été correctement configuré, vous verrez la réponse dynamique : le conteneur avec l'indice sera masqué, et simultanément, le conteneur affichant les résultats sera révélé.

Cette méthode de test offre un moyen pratique et immédiat de garantir que vos processus métier fonctionnent comme prévu, vous permettant de procéder aux ajustements nécessaires avant de finaliser votre candidature.

Rendu des données

Une fois que vous avez testé avec succès la logique de votre application, il est temps d'affiner davantage votre logique métier.

La dernière étape consiste à afficher les résultats calculés dans l'interface de votre application Web. Nous mapperons les données de sortie de notre processus métier backend aux éléments d'interface utilisateur pertinents de votre application Web.

Étant donné que les résultats du backend sont renvoyés dans un ordre prédéterminé, votre tâche consiste à aligner chaque élément de données (élément de tableau) avec l'élément de bloc de texte correct dans votre interface utilisateur.

Pour le traitement des données, nous utiliserons les blocs suivants :

• Élément de tableau : utilisez-les pour accéder à des éléments individuels dans le tableau de résultats. Vous aurez besoin d'un bloc pour chaque index, allant de 0 à 4.
• Vers texte : puisque vos données sont au format Float, utilisez ce bloc pour convertir ces valeurs Float dans un format texte adapté à l'affichage.
• Données de mise à jour des blocs de texte : ce bloc est essentiel pour remplir les blocs de texte de votre interface utilisateur avec les données de texte converties.

Ces blocs extrairont les données du tableau de résultats, convertiront les données au format texte, puis mettront à jour les blocs de texte correspondants dans votre interface utilisateur.

Voici comment le configurer :

1. Placez ces blocs sur la toile.
2. Dans le bloc Array Element , saisissez le tableau reçu de votre point de terminaison (en commençant à 0).
3. Définissez l' index pour cibler l'élément approprié dans le tableau.
4. Connectez la valeur de sortie de l’ élément de tableau au bloc To Text .
5. Spécifiez la clé d'élément dans les données de mise à jour du bloc de texte pour votre élément d'interface utilisateur où vous souhaitez que les données soient affichées.
6. Connectez les blocs séquentiellement.

Dupliquez cette séquence de blocs pour chaque élément du tableau que vous souhaitez afficher. Ajustez l'index dans chaque bloc 'Array Element' pour correspondre aux différents éléments du tableau.

Assurez-vous que ces blocs sont également connectés dans une séquence.

Résultat final

Ceci termine la création du processus métier.

Enregistrez votre processus métier et vérifiez le résultat final dans l'aperçu. Exécutez un aperçu d'application sur ce plan de déploiement sur lequel vous avez publié votre point de terminaison dans le module 5 .

🎉 Félicitations pour cette fantastique réalisation !

Vous avez développé avec succès une application Web entièrement fonctionnelle avec une logique métier et une interface utilisateur interactive. Si tout fonctionne comme prévu, vous êtes maintenant prêt à passer à l'étape finale suivante : publier votre application et la partager avec les utilisateurs.

Mais le voyage ne s'arrête pas là. Vous avez amplement l’occasion d’affiner davantage votre candidature ! Vous pouvez améliorer l'attrait visuel et l'expérience utilisateur en personnalisant l'apparence des éléments de votre interface utilisateur ou en élargissant la logique de votre application Web. Par exemple, vous pouvez rendre les champs obligatoires et ajouter un bouton pour réinitialiser les champs sans effacer manuellement chaque entrée.