Fermer

juin 25, 2018

Créez des Chatbots & des Salons de Tchat Mobile avec Facilité à Xamarin


Découvrez comment utiliser la nouvelle Interface Conversationnelle dans Telerik UI pour Xamarin afin de créer facilement des chatbots et des forums de discussion personnalisés.

Les chatbots sont en plein essor et les gens explorent déjà différentes façons de les utiliser pour leur entreprise et leurs applications. Cependant, peu importe ce que vous développez, l'interface utilisateur de votre chatbot doit également être cohérente avec l'apparence générale de votre application. Dans cet article, je vais vous donner un aperçu de notre nouvelle interface Conversational UI pour les chatbots dans les applications basées sur Xamarin, comment cela fonctionne et comment le configurer vous-même.

At Progress notre mission est de responsabiliser développeurs et stimuler leur productivité. Nous nous efforçons de créer des composants d'interface utilisateur simples, puissants et flexibles, tout en suivant les dernières tendances en matière de développement d'applications. Nous déployons beaucoup d'efforts pour créer une API facile à utiliser et qui vous permet également de gérer des scénarios complexes en fonction des exigences de votre projet. Un bon exemple de contrôle englobant tout cela est le nouveau RadChat pour Xamarin Forms, fourni avec la version R2'18 de Telerik UI pour Xamarin .

Pourquoi nous avons créé une interface de chat

Image d'une conversation de chatbot.

Une des raisons pour créer un contrôle de chat est la montée des chatbots. Les chatbots peuvent être très pratiques, efficaces et efficaces, et c'est pourquoi nous voyons de plus en plus d'applications les implémenter aujourd'hui. Nous avons créé RadChat pour que vous puissiez créer facilement une telle application.

Alors que notre objectif principal était les bots, nous n'avons pas oublié les salles de discussion – vous pouvez facilement utiliser le RadChat pour mettre en place une salle de discussion multi-participants.

Compatibilité du service Chatbot

Avant de concevoir l'API RadChat, nous avons étudié en profondeur les services de robots disponibles. Comme prévu, les services ont différentes API et un service aurait souvent sa propre notion de flux de conversation et de transfert de données. Inutile de dire que nous avons insisté pour avoir la capacité de supporter tous les services, de sorte que vous puissiez utiliser un bot de votre choix.

Le paragraphe précédent peut sembler un peu abstrait, mais ce que cela signifie vraiment est ceci – nous ne le faisons pas avoir un support intégré pour un service, mais vous pouvez le connecter efficacement à n'importe quel service que vous choisissez.

C'est parce que RadChat fonctionne avec une collection d'objets. Ces éléments sont les messages envoyés ou reçus du bot. Vous pouvez gérer votre propre collection et la conserver dans MVVM ou simplement ajouter ces messages aux éléments du chat.

Vous pouvez consulter nos exemples FAQS ( code source ) où les services Azure et Dialogflow ont été consommés.

Facile à utiliser

Je suis très excité par le nouveau RadChat et dans quelques secondes, vous verrez pourquoi. Mettons un RadChat quelque part dans XAML

< telerikConversationalUI: RadChat x: Nom = "chat" />


Maintenant, connectons ce chat avec un echo-bot.

public classe partielle classe ChatGettingStartedXaml: ContentView

[

privée RépétitionBotService botService;

privé Auteur botAuthor;

public ChatGettingStartedXaml ()

[

InitializeComponent ();

ou encore .botServ ice = nouveau RepeatBotService ();

ce .botService.AttachOnReceiveMessage ( ce .OnBotMessageReceived) ;

.botAuthor = nouveau Auteur {name = "botty" }; ]

.chat.SendMessage + = cette .Chat_SendMessage;

] }

privé void Chat_SendMessage ( objet [19659018] expéditeur, System.EventArgs e)

{

ou encore .botService.SendToBot ((19659014) chaîne de caractères ) this [19659016] .chat.Message);

}

privé void OnBotMessageReceived ( string message)

[ ]

Périphérique.BeginInvokeOnMainThread (() =>

[ [19659002] Texte du messageMessage = nouveau textMessage ();

textMessage.Data = message;

textMessage.Author = .botAuthor;

textMessage .Text = message;

[1 9459025] chat.Items.Add (textMessage);

});

}

}


C'est tout! Vous avez une interface utilisateur chatbot en cours d'exécution! Un bot de base qui attend juste quelques secondes et répète ce que vous avez écrit, mais toujours une interface utilisateur de chat entièrement fonctionnelle. Jetons un coup d'oeil à l'implémentation de l'écho-bot

public class RepeatBotService

{

privée action < chaîne de caractères > onReceiveMessage;

interne ] void AttachOnReceiveMessage (Action < chaîne de caractères > onMessageReceived)

[

cette .onReceiveMessage = onMessageReceived;

}

interne void SendToBot ( texte )

{ [1965900"Siècledesmorts"2] Tâche.Délai (2000) .ContinueAvec (t => this .onReceiveMessage? .Invoke (text));

}

}


Ok, disons bonjour au robot.

Image de l'intégration de RadChat avec un simple echo-bot.

Essentiellement, ce que nous avons fait était de mettre un RadChat sur la page et de joindre un gestionnaire pour l'événement SendMessage. Cet événement est déclenché lorsque l'utilisateur appuie sur le bouton Envoyer un message ou clique sur Entrer. Dans le gestionnaire d'événements, nous devons envoyer le message au bot. Lorsque nous recevons un message du bot, nous devons l'ajouter aux éléments du chat.

La connexion à un service réel nécessitera certainement plus d'attention, et nous avons créé plusieurs QSF et SDK Exemples pour illustrer certains scénarios

Et ce n'est pas tout (autres caractéristiques clés)

De nombreuses fonctionnalités seront utiles lors du développement d'une interface de chat

Pickers

Un mécanisme intégré cela permet de faire un choix avec un robinet, au lieu d'avoir à écrire du texte. Nous avons quelques sélecteurs intégrés (DatePicker, TimePicker, ItemPicker) et une option pour brancher ceux personnalisés.

Une image montrant certains des sélecteurs intégrés RadChat

Cartes

Les sélecteurs ont une disposition plus complexe et ont besoin d'afficher plus d'informations et nécessitent des cartes. Nous avons quelques cartes intégrées (BasicCard, ImageCard) et une option pour brancher des cartes personnalisées

Une image montrant les cartes RadChat

Styling

Vous pouvez tout styler et changer l'apparence pour répondre à vos besoins en utilisant des styles implicites, des modèles et en tirant parti du mécanisme thématique de Telerik. Si nécessaire, vous pouvez brancher des vues d'éléments de discussion personnalisées via un sélecteur de modèle.

Une image montrant certains des composants RadChat stylés

MVVM

Vous pouvez utiliser MVVM complet en utilisant ItemsSource et ChatItemConverter.

Flexible

Vous pouvez modifier une grande partie du comportement par défaut. Cela inclut l'interception de l'ajout automatique de message, le défilement automatique vers un nouvel élément ajouté, la mise au point du clavier, etc.

Essayez-le et faites-nous savoir ce que vous pensez

Eh bien, nous ne prétendons pas tout avoir encore. Au moment de la rédaction de ce billet, nous n'avons pas d'indicateur de frappe, ni de fonctionnalité de chargement à la demande pour charger les anciens messages, mais nous aimerions d'abord entendre vos idées sur la meilleure façon d'améliorer ce message. composant. Nous vous invitons à nous faire savoir quelles sont les fonctionnalités dont vous avez besoin pour développer votre application chatbot dans le portail de commentaires .

Si c'est la première fois que vous entendez parler de Telerik UI pour Xamarin, c'est un suite de plus de 70 contrôles d'interface utilisateur et des modèles Visual Studio pour la création d'applications mobiles multi plates-formes natives. Vous pouvez en savoir plus sur la boîte à outils à notre site Web et le sortir pour un tour avec un essai gratuit de [30] jours .

Commencez votre essai

Les commentaires sont désactivés en mode de prévisualisation.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link