Bases de l'interface utilisateur de conversation avec l'interface utilisateur de Telerik pour Xamarin

L'interface utilisateur de Telerik pour Xamarin inclut désormais l'interface utilisateur de conversation – des commandes intelligentes pour connecter les applications Xamarin aux chatbots. Cet article explore la structure de base des composants de l'interface utilisateur conversationnelle hors de la boîte.

En mai, la version R2 2018 de Telerik DevCraft et Kendo UI a été mise en ligne. Ce fut l'une de nos sorties les plus importantes et les plus novatrices de ces dernières années. Après des mois de développement, de feedback et de tests, le chat était finalement sorti du sac – Conversational UI un ensemble de contrôles d'interface utilisateur chatbot agnostiques.

Avec AI et Bot Frameworks gouvernant le monde des développeurs , il est temps de doter les développeurs d'une interface utilisateur moderne et polie pour activer les scénarios de chatbot – pour les applications Web, mobiles et de bureau. Nous arrivons rarement à annoncer la parité des fonctionnalités logicielles sur toutes nos gammes de produits – Conversational UI était un effort monumental et permet des conversations homogènes et homogènes entre plates-formes.

Bien qu'il existe différentes nuances sur l'utilisation de Conversation UI entre .NET et Les clients JavaScript, les idées de base sont les mêmes. Cet article commence à explorer comment utiliser Conversational UI – composants purs qui entrent dans la zone, sans aucune intégration de service. Alors que nous allons plonger dans l'interface utilisateur de conversation du point de vue d'un développeur mobile Xamarin, les concepts de base restent les mêmes sur le Web et le bureau. Allons-y.

Let's Get Chatty

Le composant fondamental de l'interface utilisateur de Conversational UI dans les applications Xamarin est le puissant RadChat . Déposez-le dans vos applications Xamarin pour allumer l'interface utilisateur conversationnelle moderne de chatbot à travers vos applications mobiles pour diverses plates-formes. RadChat expose certains objets de base en tant que propriétés – permettant aux développeurs de configurer l'expérience de chat comme souhaité:

Auteur

La propriété Author représente l'utilisateur actuel et le Bot qui envoient des messages à l'aide de l'interface de chat. L'instance donnée de l'objet Auteur détermine l'alignement des messages – les messages entrants sont placés à gauche, les messages sortants à droite. Il existe deux propriétés auto-explicatives pour chaque objet Author:

Message

La propriété Message définit le message courant tapé dans le champ de saisie. Chaque objet TextMessage possède deux propriétés de base:

Items

La propriété de collection Items contient tous les éléments de conversation inclus dans la conversation en cours: il s'agit de l'espace réservé conversation entière de chat ensemble. La collection Items peut inclure des TextMessages simples, mais aussi des composants avancés comme Pickers et Hero Cards . La collection Items est essentiellement une classe générique .NET générique – et les développeurs obtiennent un accès programmatique complet à la conversation entière à tout moment. Un événement important soulevé par la collection Items est CollectionChanged – c'est l'indication que la collection est en train de changer (éléments ajoutés / supprimés / changés) et le développeur peut prendre les actions appropriées pour mettre à jour l'interface utilisateur conversationnelle. ] Pickers

Les messages texte simples dans une conversation de chatbot sont faciles à manipuler – la valeur réelle dans Conversation UI est dans l'interface utilisateur personnalisée complexe. Ceci est réalisé grâce à ce qu'on appelle Pickers – présentant l'utilisateur avec une sélection de choix dans le cadre de la conversation de chat. Si vous deviez choisir des garnitures de pizza, les dactylographieriez-vous dans le texte, ou plutôt cochez simplement une liste – vous obtenez le point. Dans une conversation en ligne, il est presque toujours plus rapide d'obtenir des réponses de la part des utilisateurs lorsqu'ils sont présentés avec une collection d'éléments à choisir.

Le composant Conversation UI qui permet de tels Pickers est le RadChatPicker . En fonction des informations qui doivent être présentées à l'utilisateur et du choix qui doit être fait, le RadChatPicker permet aux développeurs de rendre l'un des types suivants:

• DatePicker : pour afficher un calendrier pour choisir une date [19659017] TimePicker : pour afficher une vue d'horloge pour choisir une heure
• ItemPicker : pour présenter une liste de suggestions à l'utilisateur final
• CardPicker : pour présenter une liste de cartes avec mise en page structurée

Le RadChatPicker met en valeur la valeur que nous pouvons offrir aux développeurs avec l'interface utilisateur conversationnelle; la sophistication polie grâce à l'interface utilisateur de chat complexe personnalisée. Telerik et Kendo UI ont déjà des commandes natives Date / Time / HeroCard pour diverses plates-formes. Maintenant, ils sont inclus dans les sélecteurs conversationnels de chatbot.

Interface Conversation Chatbot en action

Quelque chose d'aussi visuel que Conversation UI pour l'intégration de chatbot est mieux montré dans l'action, plutôt que des mots. Regardons dans les bases de RadChat et ce qu'il offre hors de la boîte. Nous examinerons les cueilleurs plus compliqués un autre jour.

Tout d'abord, pour voir une interface de chat en action, nous avons besoin d'un chatbot. Pour simplifier le démarrage et garder l'implémentation localement, définissons un RepeatBotService – ce sera un bot d'écho local, qui relaiera simplement ce qui lui est dit. Nous commençons un projet vanilla Xamarin.Forms et ajoutons cette classe dans notre bibliothèque .NET Standard partagée:

 public class RepeatBotService
{
  action privée  onReceiveMessage;

  internal void AttachOnReceiveMessage (Action  onMessageReceived)
  {
    this.onReceiveMessage = onMessageReceived;
  }

  vide interne SendToBot (texte de chaîne)
  {
    Task.Delay (500) .ContinueWith (t => this.onReceiveMessage? .Invoke (texte));
  }
} 

Le code dans RepeatBotService devrait être explicite: le bot reçoit des messages, attend un peu et crache le même message. Notre bibliothèque standard .NET et les projets spécifiques à la plateforme doivent avoir deux références: Xamarin.Forms et Telerik UI pour Xamarin. Comme vous le savez, les bits Telerik peuvent être importés en tant que DLL téléchargées ou simplement via un paquet NuGet.

Avec nos références en place et une déclaration d'espace de noms XML, nous sommes maintenant prêts à lancer notre interface utilisateur chatbot dans le fichier MainPage.XAML – voici un code simple:

Notez que nous supprimons le composant de l'interface utilisateur RadChat dans notre balisage XAML avec une seule ligne de code – c'est tout ce qu'il faut pour allumer une interface de conversation de chatbot. Il est lié par la propriété ItemSource à la collection Items – cela va tenir toutes les conversations de tchat en avant et en arrière. Et oui, RadChat a un support complet pour modèle MVVM à Commanding .

Dans notre code-behind, ajoutons une référence à notre RepeatBotService et créons un bot fictif Auteur – voici du code:

 en utilisant Telerik.XamarinForms.ConversationalUI;
en utilisant Xamarin.Forms;

classe partielle publique MainPage: ContentPage
{
  service de bot privé RepeatBotService;
  auteur privé botAuthor;

  MainPage publique ()
  {
    InitializeComponent ();

    this.botService = nouveau RepeatBotService ();
    this.botService.AttachOnReceiveMessage (this.OnBotMessageReceived);

    this.botAuthor = nouvel auteur ();
    this.botAuthor.Name = "MyBot";
    this.botAuthor.Avatar = "BotFace.jpeg";
  }
} 

Nous commençons tout juste à créer notre Bot en tant que chat Auteur avec Nom et Avatar propriétés définies. À noter, pour que les images Avatar soient captées par l'interface utilisateur de chat, les ressources correspondantes doivent être présentes dans chaque projet spécifique à la plate-forme, comme le répertoire Resources pour les applications iOS. 19659004]

Voir également le gestionnaire d'événement OnBotMessageReceived dans le code ci-dessus? chaque fois que notre RepeatBotService reçoit un message de l'utilisateur, le service relance ce que l'utilisateur a dit – nous devons le coller dans la collection Item du chat en cours. La collection Item est un ObservableCollection de ChatItems – elle est initialisée par défaut avec le RadChat mais vous pouvez également lier l'interface à votre propre collection. Gestionnaire d'événements OnBotMessageReceived :

 private void OnBotMessage Reçu (message de chaîne)
{
  Device.BeginInvokeOnMainThread (() =>
  {
    TextMessage textMessage = new TextMessage ();
    textMessage.Data = message;
    textMessage.Author = this.botAuthor;
    textMessage.Text = message;
    chat.Items.Add (textMessage);
  });
} 

Ensuite, nous devons faire en sorte que notre discussion soit à chaque fois que la collection d'éléments change – pour des raisons évidentes de mise à jour de l'interface utilisateur. Ajoutons l'événement important CollectionChanged comme ceci:

 public MainPage ()
{
  InitializeComponent ();

  this.botService = nouveau RepeatBotService ();
  this.botService.AttachOnReceiveMessage (this.OnBotMessageReceived);

  this.botAuthor = nouvel auteur ();
  this.botAuthor.Name = "MyBot";
  this.botAuthor.Avatar = "BotFace.jpeg";

  ((INotifyCollectionChanged) this.chat.Items) .CollectionChanged + = ChatItems_CollectionChanged; ;
} 

La collection Item déclenche l'événement CollectionChanged chaque fois que l'utilisateur tape quelque chose – c'est à ce moment que le message de l'utilisateur est ajouté à la collection. Maintenant, dans le gestionnaire d'événements CollectionChanged nous envoyons simplement le message de l'utilisateur à notre RepeatBotService . Une fois que le bot relance notre message, le gestionnaire d'événement OnBotMessageReceived va coller le message du bot dans la collection Item

 private void ChatItems_CollectionChanged (expéditeur d'objet, NotifyCollectionChangedEventArgs e)
{
  if (e.Action == NotifyCollectionChangedAction.Add)
  {
    TextMessage chatMessage = (TextMessage) e.NewItems [0];
    if (chatMessage.Author == chat.Author)
    {
      this.botService.SendToBot (chatMessage.Text);
    }
  }
} 

C'est tout – nous avons maintenant branché toutes les pièces pour avoir un simple chatbot conversationnel et son interface utilisateur correspondante. Allumons notre application, et vous devriez voir une interface de discussion claire et simple. L'utilisateur peut taper n'importe quel message et notre RepeatBotService relaie fidèlement le message. Et l'avatar de notre robot apparaît pour ajouter une légitimité à notre conversation de chat humain-bot – comment mignonne.

[19659004] Avant que l'utilisateur commence à taper, vous pouvez lancer le chat avec un message amical du bot, comme ceci:

 chat.Items.Add (new TextMessage {Author = this.botAuthor, Text = "Bienvenue dans notre chat! "});

Le point est la collection d'articles est l'espace réservé tout important pour tenir la conversation de causerie. Les interactions de l'utilisateur sont automatiquement connectées – vous devez ajouter les messages du bot. Et les développeurs ont un accès programmatique complet à la collection Item – allez vous amuser.

Résumer

Les chatbots sont La principale attraction pour les chatbots serait leur intelligence – l'application de Machine Learning pour une meilleure connaissance contextuelle et pour avoir de plus en plus de véritables conversations avec les humains. Les économies de coût des automatisations de bot peuvent être substantielles.

Cependant, en poussant l'enveloppe avec les technologies de chatbot, la principale pierre d'achoppement pour les développeurs est souvent l'interface utilisateur: comment rendre une interface polie pour capturer toutes les complexités du chatbot moderne? En outre, faites-le de manière cohérente pour le web / desktop / mobile? C'est ici que les éléments de conversation Conversation UI pour Telerik et Kendo UI – poli cust interface de chat omnidirectionnelle pour tous les besoins d'intégration de chatbot sur toutes les plates-formes.

Comme je l'ai mentionné plus haut, Conversational UI est intégrée dans notre interface pour Xamarin, ainsi que tous nos autres produits – n'hésitez pas à essayer ] Telerik UI pour Xamarin ou quoi que ce soit d'autre dans notre bundle DevCraft

Essayez l'interface utilisateur pour Xamarin

Essayez DevCraft

Nous avons juste regardé la pointe de l'iceberg – l'anatomie de base de l'interface conversationnelle. Beaucoup plus est possible. La vraie puissance est avec des sélecteurs intelligents, des cartes de héros personnalisables et des intégrations de service. Tout cela suit dans les prochains articles. En attendant, reste bavard!