Fermer

juillet 14, 2022

Architecture de formulaires dynamiques Web Applications mobiles Sans serveur

Architecture de formulaires dynamiques Web Applications mobiles Sans serveur


Dans ce premier blog, nous avons vu la valeur et les avantages des formulaires dynamiques régis par des règles. Dans celui-ci, nous expliquerons l’architecture globale et la conception d’une solution open source pour les implémenter.

La solution est architecturée autour d’un modèle/vue, où :

  • Le modèle est généré à partir du système de règles.
  • Un composant d’interface utilisateur générique capable de restituer les instructions du modèle agit en tant que vue. Le composant peut être hébergé dans n’importe quelle application Web ou dans des applications mobiles.

Les formulaires dynamiques (questionnaires dynamiques) sont rendus par un composant générique côté client (CSC). Par générique, nous entendons que le même composant côté client peut être réutilisé pour plusieurs questionnaires sans aucun changement. En d’autres termes, le composant côté client est écrit pour n’importe quel questionnaire et n’intègre aucune logique spécifique au questionnaire. Le modèle contiendra une logique spécifique aux cas d’utilisation.

Avec Corticon.jscomme nous l’avons vu dans le
premier blog, un spécialiste métier peut créer et maintenir le modèle. Une fois que le modèle est prêt, il peut être transformé directement en une fonction exécutable JavaScript (généralement dans une étape de pipeline CI/CD). Nous appelons communément le modèle le composant « Service de décision », car le modèle implémente les règles métier et prend ainsi des décisions sur le flux de questions, ainsi que sur l’interface utilisateur à afficher et quand.

Le composant côté client ne connaît pas les questions à poser à chaque étape et ce que signifient les réponses, mais il sait comment restituer ces questions et comment collecter les réponses et les retransmettre au service de décision.

Le service de décision (DS) pilotant les formulaires dynamiques spécifie, pour chaque étape, les questions, les contraintes sur les questions et où stocker les réponses. Pour ce faire, il exécute des règles basées sur des données externes, les réponses des étapes précédentes et, bien sûr, la logique métier générale.

De plus, le service de décision ne connaît pas l’état actuel du questionnaire mais sait quoi faire à chaque étape. L’état du questionnaire est maintenu dans le composant côté client.

En règle générale, un composant côté client est écrit et maintenu par un développeur ou une équipe de développeurs tandis que les services de décision sont écrits par des analystes métier qui comprennent bien le domaine problématique des questionnaires. La communication entre les deux équipes est facilitée par un schéma bien documenté permettant au JSON d’échanger IN et OUT. La définition de vocabulaire Corticon agit comme la documentation toujours à jour pour ces données JSON. Et Corticon studio peut être utilisé pour générer une documentation de ce schéma.

Voici une représentation visuelle de l’interaction entre le CSC et DS, où, effectivement, le modèle est interrogé par le composant de rendu de l’interface utilisateur.

Architecture globale

Services de décision locaux ou à distance

Il est courant que le DS s’exécute en cours avec le CSC, mais il peut également s’exécuter à distance.

Dans le cas local (in-process), le service de décision est appelé avec un simple appel de fonction JavaScript :

SD local

Pour l’option à distance, Corticon prend en charge les déploiements vers l’un des principaux environnements sans serveur des principaux fournisseurs de cloud (fonctions AWS Lambda, Azure et GCP), et vers n’importe quel serveur Node.js ou serveur Java traditionnel exécuté dans le cloud ou sur site (déploiements de serveurs traditionnels ).

Ceci est illustré dans ce schéma :

DS distant

Bien sûr, un déploiement en cours fournira un temps de réponse instantané ; cependant, il peut arriver que vous souhaitiez exécuter le modèle à distance.

Voici les cas que nous avons rencontrés avec des clients :

Pour les applications mobiles, un service de décision hébergé à distance peut être mis à jour très facilement sans avoir à forcer l’utilisateur à réinstaller l’application mobile.

  1. Sécurité:
    • Nous ne voulons pas exposer certaines des données utilisées par le service de décision côté client.
    • Nous voulons que le service de décision accède à diverses sources de données à l’intérieur du pare-feu.

Avantages

Cette architecture offre les avantages suivants :

  • Réutilisez le même composant de rendu d’interface utilisateur pour différents formulaires dynamiques : un seul composant de rendu de questionnaires dynamiques peut être réutilisé avec plusieurs applications, comme illustré ci-dessous :

Réutiliser CSC dans les applications

  • De plus, le même modèle peut être utilisé pour piloter des questionnaires dynamiques sur différentes plates-formes (par exemple, page Web et appareil mobile) :

Même modèle pour différents moteurs de rendu

Commencer

Pour vous familiariser facilement avec les concepts, nous avons mis à votre disposition plusieurs exemples dans ce dépôt Github public.

Après avoir cloné le référentiel, vous pouvez exécuter directement une page Web de pilote de test avec plusieurs exemples.

Pour commencer:

  • Appelez client.html (disponible sur https://github.com/corticon/corticon.js-samples/blob/master/DynamicForms/CSC/client.html)
  • Exécutez l’exemple canonique. Chaque étape de cet exemple montre comment utiliser un contrôle d’interface utilisateur spécifique et affiche le fichier de feuille de règles Corticon correspondant dans le titre du conteneur. Vous pouvez ensuite utiliser la feuille de règles d’étape correspondante comme exemple pour implémenter ce dont vous avez besoin.
  • Parcourez chaque échantillon pour avoir une idée de ce qui est disponible.

Nous avons également, dans le même dépôt Github, un implémentation de référence pour un composant côté client pour une application de navigateur. Vous pouvez l’utiliser comme point de départ pour votre propre composant côté client.

N’hésitez pas à nous contacter, nous pouvons également vous aider à démarrer et répondre à toutes vos questions.

En savoir plus sur Corticon.js ici.

Essayez Corticon.js




Source link