Voir le flux RSS

Blog de Hinault Romaric (.NET Core, ASP.NET Core, Azure, DevOps)

[Actualité] Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot

Noter ce billet
par , 27/04/2018 à 22h57 (999 Affichages)
Dans mon précédent billet, j’ai montré comment mettre en place un agent conversationnel en utilisant FormFlow du SDK Bot Builder pour .NET. Vous avez vu à quel point il est facile de mettre en place un bot capable d’effectuer un sondage.

Toutefois nous ne sommes pas satisfaits du résultat obtenu. Nous voulons par exemple améliorer le texte des questions qui sont affichées par le robot, améliorer la liste des choix de réponses qui sont proposés, etc.

FormFlow offre plusieurs attributs et options pouvant être utilisés pour customiser son formulaire. Nous allons explorer les plus importants/intéressants dans ce billet de blog.

I – l’attribut Describe

Dans l’exemple de mon billet précédent, FormFlow a utilisé les valeurs de mes énumérations pour afficher la liste des réponses possibles pour chaque question. FormFlow utilise la majuscule et l’underscore pour séparer les valeurs d’énumérations et rendre l’affichage plus convivial. Toutefois, cela n’est pas suffisant pour avoir un texte correctement formaté affiché. Par ailleurs, la valeur d’énumération doit respecter les règles concernant la déclaration d’une variable : ne pas commencer par un chiffre, pas de ponctuation, etc.

Prenons, par exemple, la déclaration de l’énumération suivante :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
    public enum WebFrameworkOptions {
        ASPNET_Core = 1,
        AngularJS,
        Laravel,
        ReactJS,
        Autre };

À l’exécution, on aura le résultat suivant dans la fenêtre de chat du bot framework emulator :

Nom : img5.PNG
Affichages : 1564
Taille : 14,6 Ko

Cependant, vous voulons que ASPNET Core soit affiché ASP.NET Core ou Angular JS soit affiché AngularJS. Pour y parvenir, nous allons utiliser l’attribut [Describe], comme suit :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public enum WebFrameworkOptions
    {
        [Describe("ASP.NET Core")]
        ASPNET_Core = 1,
        [Describe("AngularJS")]
        AngularJS,
        Laravel,
        [Describe("ReactJS")]
        ReactJS,
        [Describe("NodeJS")]
        NodeJS,
        Autre
    };

L’attribut [Describe] permet « d’override » la description par défaut d’un champ, d’une propriété ou la valeur d’une énumération. Nous allons donc utiliser ce dernier pour améliorer ce qui sera affiché à l’utilisateur :

Nom : img6.PNG
Affichages : 1436
Taille : 9,8 Ko

Pour répondre à la question « Veuillez choisir un web framework », l’utilisateur peut simplement cliquer sur son choix, et ce dernier est retourné dans la zone de saisie. Toutefois, le texte affiché sera utilisé par FormFlow pour récupérer la valeur correspondante dans l’énumération. Et dans certains cas, il ne sera pas en mesure de le faire. Par exemple pour « ReactJS » il s’attend à ce que la réponse de l’utilisateur soit « React JS » :

Nom : img7.PNG
Affichages : 1437
Taille : 13,1 Ko

Pour pallier cela, vous pouvez utiliser le champ « message » de cet attribut pour setter le message qui est retourné lorsque l’utilisateur va cliquer sur le bouton :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
public enum WebFrameworkOptions
    {
        [Describe("ASP.NET Core")]
        ASPNET_Core = 1,
        [Describe("AngularJS")]
        AngularJS,
        Laravel,
        [Describe("ReactJS", message: "React JS")]
        ReactJS,
        [Describe("NodeJS", message:"Node JS")]
        NodeJS,
        Autre
    };

Le fait qu’on clique sur « ReactJS » et on obtient à l’écran « React JS » n’est pas fameux non plus. Nous verrons comment améliorer cela en utilisant un autre attribut.

L’attribut [Describe] dispose de plusieurs autres champs comme Title qui permet de définir un titre, SubTitle pour un sous-titre et image pour afficher une image dans le bouton :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
public enum WebFrameworkOptions
    {
        [Describe("ASP.NET Core")]
        ASPNET_Core = 1,
        [Describe("AngularJS")]
        AngularJS,
        Laravel,
        [Describe(image: "http://rdonfack.developpez.com/images/react.jpg")]
        ReactJS,
        [Describe(image: "http://rdonfack.developpez.com/images/nodejs.png")]
        NodeJS,
        Autre
    };

Pour cette question, notre bot va afficher une « HeroCard » dans un « Carousel » pour faciliter la navigation :

Nom : img8.PNG
Affichages : 1432
Taille : 52,3 Ko

L’attribut Terms

Lorsque l’utilisateur saisit ReactJS, notre bot n’est pas en mesure de lier le terme avec la valeur de l’énumération correspondante. De plus, pour offrir plus de flexibilité à l’utilisateur, on doit tenir compte du fait que sa saisie peut être erronée ou qu’il saisit partiellement ce qui est attendu.

Avec l’attribut Terms, nous serons en mesure de définir les différents termes qui sont attendus pour un champ ou une valeur d’énumération :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public enum WebFrameworkOptions {
        [Describe("ASP.NET Core")]
        [Terms("ASP.NET Core", "ASP.NET", "ASP","ASPNET")]
        ASPNET_Core = 1,
        [Describe("AngularJS")]
        [Terms("Angular", "AngularJS")]
        AngularJS,
        Lavarel,
        [Describe("ReactJS")]
        [Terms("React","ReactJS")]
        ReactJS,
        [Describe("NodeJS")]
        [Terms("Node","NodeJS")]
        NodeJS,
        Autre };

L’attribut Numeric

Il sera utilisé pour fournir les limites des valeurs possibles pour un champ numérique :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
[Numeric(18,45)]
public int Age;

On obtient le résultat suivant :

Nom : img9.PNG
Affichages : 1423
Taille : 5,9 Ko

L’attribut Pattern

Cet attribut va permettre de définir une expression régulière pour valider la valeur d’un champ. Par exemple, une adresse mail :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
[Pattern("(@)(.+)$")]
public string Email;

Ce qui produit :

Nom : img10.PNG
Affichages : 1422
Taille : 6,2 Ko

L’attribut Prompt

Vous avez probablement remarqué que FormFow a généré la question suivante « Veuillez choisir un web framework ». Ce n’est pas la question que je souhaite afficher à l’utilisateur. Je veux afficher « Quel Framework Web utilisez-vous ? ». Pour le faire, je peux utiliser l’attribut Prompt comme suit :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
[Prompt("Quel Framework Web utilisez-vous ? {||}")]
 public WebFrameworkOptions WebFramework;

Prompt utilise les éléments du « pattern language » pour identifier les éléments qui doivent être remplacés. Pour en savoir plus, vous pouvez consulter l’article suivant :
https://docs.microsoft.com/en-us/bot...ttern-language

Pour cet exemple, nous aurons le résultat suivant :

Nom : img11.PNG
Affichages : 1410
Taille : 6,7 Ko

L’attribut Template

La génération d’une question est effectuée en utilisant un Template. Pour l’exemple ci-dessus par exemple, le Template utilisé a permis de générer la question en affichant les réponses dans une liste de bouton. Nous pouvons décider que l’affichage soit différent en utilisant l’attribut Template :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
[Template(TemplateUsage.EnumSelectOne,patterns: "Quel Framework Web utilisez-vous ? {||}", 
            ChoiceStyle = ChoiceStyleOptions.PerLine)]
        public WebFrameworkOptions WebFramework;

Grâce aux différents attributs qui sont offerts, vous pouvez mieux contrôler ce qui sera généré et affiché par FormFlow.

À bientôt pour de nouvelles aventures avec le bot framework.

Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Viadeo Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Twitter Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Google Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Facebook Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Digg Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Delicious Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog MySpace Envoyer le billet « Bot Framework : customiser FormFlow pour améliorer l’expérience utilisateur de son bot » dans le blog Yahoo

Mis à jour 28/04/2018 à 17h38 par Malick

Catégories
DotNET , C# , ASP.NET , Intelligence Artificielle

Commentaires