L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Une application de chat avec interface utilisateur Kendo, vue, analyse des sentiments et Emoji
Le composant Chat de Kendo UI est robuste et facile à intégrer. Nous verrons comment nous pouvons rendre des actions suggestives en temps réel en utilisant l'analyse des sentiments et Socket.io.
L'analyse des sentiments implique le processus d'identification et de catégorisation des opinions exprimées dans un morceau de texte pour déterminer si l'attitude de l'écrivain envers un particulier le sujet ou le produit est positif, négatif ou neutre. En utilisant l'analyse des sentiments, nous pouvons suggérer des emojis comme réponses aux messages en fonction du contexte du message reçu.
Vue est un cadre de développement Web populaire pour créer une gamme d'applications sur plusieurs plates-formes; il dispose d'un vaste écosystème et d'un suivi dédié. En plus de son intégration simple, de sa documentation détaillée et de sa flexibilité, Vue vous permet d'étendre le langage de modèle avec vos composants.
Prérequis
Pour suivre ce tutoriel, une compréhension de base de Vue et Node.js est nécessaire. Veuillez vous assurer que Node et npm sont installés avant de commencer.
Nous utiliserons ces outils pour créer notre application:
Nous allons créer une application de chat en temps réel en utilisant Socket.io, Angular et la bibliothèque sentiment pour des suggestions d'emojis basées sur le contexte des messages reçus.
Grâce à notre application, les utilisateurs peuvent obtenir des suggestions d'emojis en réponse aux messages reçus tout en discutant avec un tiers.
Voici une démo du produit final:
Construisons!
Configuration et structure des dossiers
Pour commencer, nous utilisons le vue-cli pour amorcer notre application. Tout d'abord, nous allons installer la CLI en exécutant npm install -g @ vue / cli dans un terminal. npm est un gestionnaire de packages utilisé pour installer des packages. Il est disponible sur votre PC si Node est installé.
Pour créer un projet Vue à l'aide de la CLI, nous allons exécuter la commande suivante:
vue create vue-chat
Ouvrez le dossier nouvellement créé vue-chat la structure de votre dossier devrait ressembler à ceci:
vue-chat /
Publique/
index.html
favicon.co
node_modules /
src /
les atouts/
Composants/
...
App.vue
...
Ensuite, exécutez les commandes suivantes dans le dossier racine du projet pour installer les dépendances.
// install dépendances requises pour construire le serveur
npm install express socket.io uuid sentiment
// dépendances frontales
npm install @ progress / kendo-chat-vue-wrapper @ progress / kendo-theme-default @ progress / kendo-ui vue-socket.io node-sass sass-loader
Démarrez le serveur de développement d'applications en exécutant npm run serve dans un terminal dans le dossier racine de votre projet.
Un onglet de navigateur doit s'ouvrir sur http: // localhost: 8080. La capture d'écran ci-dessous doit être similaire à ce que vous voyez dans votre navigateur:
Construire notre serveur
Maintenant que notre application Vue est en cours d'exécution, construisons notre serveur en utilisant Express . Express est un framework web rapide, sans opinion et minimaliste pour Node.js . Nous allons l'utiliser pour écouter les événements de l'application frontale et pour émettre des événements.
Créez un fichier appelé server.js à la racine du projet et mettez-le à jour avec l'extrait de code ci-dessous .
const express = require ( "express" ) ;
const app = express () ;
const Sentiment = require ( "sentiment" ) ;
const http = require ( "http" ) . createServer ( app ) ;
const io = require ( "socket.io" ) ( http ) ; [19659033] const port = processus . env . PORT || 4000 [1 9659029];
const sentiment = new Sentiment () ;
io . sur ( "connection" async socket => {
console . log ( 'connected' )
} )
http . écoute ( port () => {
console . log ( `Serveur démarré sur le port $ { port } ` ) [19659029];
} ) ;
La configuration ici est assez standard pour les applications Express utilisant Socket.io. Il n'y a pas de problème si vous n'avez aucune connaissance préalable de Socket.io car nous n'utiliserons que deux méthodes: emit pour la répartition des événements et io.on pour écouter les événements. Vous pouvez toujours consulter le didacticiel officiel ici .
Ensuite, nous allons configurer un auditeur pour un événement de discussion . L'application client envoie les charges utiles des messages via ce canal; à la réception de l'événement chat nous analysons le message et émettons une réponse.
Envoi de messages
Pour permettre aux utilisateurs d'envoyer et de recevoir des messages, nous allons mettre en place un écouteur pour gérer les charges utiles entrantes . Mettez à jour votre fichier server.js avec le code ci-dessous.
const express = require ( "express" ) ;
const app = express () ;
const Sentiment = require ([19659030] "sentiment" ) ;
const http = require ( "http" ) . createServer ( app ) ;
const io = require ( "socket.io" ) [19659029] ( http ) ;
const port = process . env . PORT || 4000 ;
const sentiment = new Sentiment () ;
io . sur ( "connection" async socket => {
socket . sur ( "chat" data => {
io . emit ( "message" data ) ;
} ) ;
} )
http . écoute ( port () => {
console . log ( `Serveur démarré sur le port $ { port } ` ) [19659029];
} ) ;
Dans l'extrait ci-dessus, nous avons configuré un écouteur pour l'événement chat et dans le rappel d'événement, nous émettons un événement contenant la charge utile envoyée par l'événement chat . Ensuite, nous effectuerons une analyse des sentiments sur le contenu textuel de la charge utile de l'événement.
Analyse des sentiments
Comme nous l'avons dit dans l'introduction de l'article, l'analyse des sentiments implique le processus d'identification et de catégorisation des opinions exprimées dans un message pour déterminer le l'attitude de l'auteur envers un sujet particulier.
Pour en savoir plus sur l'analyse des sentiments, utilisez les liens suivants:
À l'aide de l'analyse des sentiments, nous analyserons les messages envoyés pour déterminer l'attitude de l'expéditeur. Avec les données renvoyées par l'analyse, nous déterminerons les émojis à suggérer à l'utilisateur.
La bibliothèque JavaScript Sentiment est excellente pour l'analyse. Pour commencer, nous mettrons à jour la fonction de rappel pour inclure l'analyse des messages envoyés. Mettez à jour votre server.js avec le code ci-dessous.
const express = [19659020] exigent ( 'express' ) ;
...
io . sur ( "connection" async socket => {
socket . sur ( "chat" data => {
const { text ] id expéditeur } = data ;
const result = sentiment . analyse ( texte ) ;
const comparatif = résultat . comparatif ; [19659204] const ton =
comparatif > = 0
? comparatif > = 1
? "positif"
: "neutre"
: "négatif" ;
const response = {
texte
id
timeStamp : nouveau Date ()
sentiment : {
ton
score : résultat . score
}
expéditeur
} ;
io . emit ( "message" response ) ;
} ) ;
} )
http . écoute ( port () => {
console . log ( `Serveur démarré sur le port $ { port } ` ) [19659029];
} ) ;
...
Dans l'extrait ci-dessus, nous avons apporté quelques mises à jour au rappel de l'événement de discussion . Passons en revue chaque modification:
- Premièrement, nous avons utilisé la déstructuration d'objet pour obtenir le texte
idde la charge utile envoyée par l'utilisateur. résultat: ici, nous analysons le message envoyé par l'utilisateur pour déterminer le contexte du message.comparatif: c'est le score comparatif obtenu après analyse du message. Ce score permet de déterminer si un message estpositifnégatifouneutre.ton: le tonnégativesi le score comparatif est inférieur à0neutresi le score est supérieur à0mais inférieur à1. La tonalité estpositivesi le score comparatif est1et supérieur.- Ajoutez une propriété d'objet (
sentiment) aux données de réponse contenant le ton des messages et le score.
Vue de chat
Commençons à construire notre interface de chat. Nous allons créer un composant de chat pour contenir l'interface de chat. L'interface de chat est un composant fourni par Kendo UI. Ce composant fournit une interface pour engager des conversations avec d'autres utilisateurs ou un bot. Le composant peut être configuré pour afficher des suggestions et des cartes multimédias riches, et il fournit une barre d’outils pour afficher des boutons interactifs avec lesquels les utilisateurs peuvent interagir. dossier composants . Ouvrez le fichier et mettez-le à jour en suivant les étapes ci-dessous.
Nous allons d'abord ajouter la section template pour rendre l'interface de chat de Kendo UI:
< template >
< div class = " main " >
< kendo-chat @post = " sendMessage " ref = " chat " />
</ div [19659029]>
</ modèle >
Dans le modèle ci-dessus, nous avons joint un écouteur d'événement pour l'événement post ; cet événement se déclenche lorsque vous publiez un message dans l'interface de chat. Nous obtenons également la ref (référence) du composant Chat.
Ensuite, nous allons ajouter des styles au composant. Mettez à jour le src / components / Chat.vue et ajoutez une section style :
< template >
...
</ modèle >
< style lang = " scss " >
.main {
affichage : flex ;
justify-content : center ;
align-items : center ; [19659303] min-height : 90 vh ;
}
.k-widget {
margin-top : [19659061] 0 ;
largeur : 80% ;
}
</ style >
Ensuite, nous ajouterons la section script qui contiendra les variables et méthodes référencées dans la section template .
< modèle >
...
</ modèle >
< style lang = " scss " >
...
</ style >
< script >
import { Chat } from "@ progress / kendo-chat-vue-wrapper" ;
import { v4 } from "uuid" ;
export default {
nom : "Chat"
composants : {
Bavarder
}
données () {
return {
emojiList : {
positif : [ "😀" "😁" "😘" "😄" ] [19659029]
neutre : [ "😐" "😑" "😶" "🤔" ] [19659029]
négatif : [ "😟" "🙁" "😢" "😞" ] [19659395]}
utilisateurs : {
expéditeur : {
id : "expéditeur"
iconUrl :
"https://image.flaticon.com/icons/svg/167/167750.svg"
nom : "John Sender"
}
récepteur : {
id : "receiver"
iconUrl :
"https://image.flaticon.com/icons/svg/145/145862.svg"
nom : "Mary Receiver"
}
}
lastMessageId : ""
} ;
}
méthodes : {
async sendMessage ( message ) {
this . lastMessageId = [19659020] v4 () ;
const data = {
id : this . lastMessageId
texte : message . texte
expéditeur : message . expéditeur . utilisateur
} ;
}
}
monté () {
const chat = this . $ refs . chat . kendoWidget () ;
chat . utilisateur = ce . utilisateurs . expéditeur
}
} ;
</ script >
Dans l'extrait de code script nous avons défini quelques variables et méthodes. Nous allons passer en revue chacun d'eux, en commençant par la emojiList :
emojiList : il s'agit d'un objet contenant une liste de caractères emoji. Il y a une liste pour chaque tonalité de message.
users : cet objet contient des données factices sur les utilisateurs de l'application, l'expéditeur et le receiver .
] La méthode sendMessage est un gestionnaire d'événements pour l'événement post émis par le composant Chat. Dans cette méthode, nous créons un identifiant aléatoire pour le message en utilisant la bibliothèque uuid affectons l'identifiant aléatoire à la propriété de données lastMessageId . Enfin, nous créons un objet contenant le texte du message, l'expéditeur du message et l'ID généré.
Dans le cycle de vie du composant monté nous obtenons la référence du composant chat et attribuons un à la propriété user du chat.
Ensuite, nous installerons le composant Kendo UI Chat en tant que plugin dans notre application. Ouvrez le fichier src / main.js et installez le plugin:
import Vue from "vue" ;
import { ChatInstaller } de "@ progress / kendo-chat-vue-wrapper" ;
import "@ progress / kendo-ui" ; [19659033] import "@ progress / kendo-theme-default / dist / all.css" ;
import App from "./ App.vue" [19659029];
Vue . use ( ChatInstaller ) ;
Vue . config . productionTip = false ;
new Vue ( {
rendu : h => h ( App )
} ) . $ mount ( "# app" ) ;
Dans l'extrait ci-dessus, nous avons ajouté la bibliothèque de base de Kendo UI ainsi que le fichier CSS de base de la bibliothèque. Le plugin ChatInstaller est importé de la bibliothèque de wrapper de chat et installé dans le projet.
Maintenant, nous allons rendre le composant Chat dans le App.vue ] fichier. Ouvrez le fichier App.vue et mettez-le à jour pour afficher le composant Chat dans la section modèle; nous mettrons également à jour les styles du composant:
< template >
< div id = " app " [19659029]>
< Chat />
</ div >
</ template >
< script >
import Chat from "./ components / Chat" ;
export default {
nom : "app"
composants : {
Chat
}
} ;
</ script >
< style >
#app {
font-family : "Avenir" Helvetica, Arial, sans- serif ;
-webkit-font-lissage : anti-crénelé ;
-moz-osx-font-smoothing : grayscale ; [19659535] couleur : # 2c3e50 ;
largeur : 70% ;
marge : auto ; [19659079]}
</ style >
Ensuite, nous travaillerons sur l'envoi des messages en temps réel et le rendu des suggestions à la réception d'un nouveau message et la création d'un composant d'en-tête pour l'application.
La page d'accueil comporte également un en-tête pour des raisons de présentation. La première étape consiste à créer un composant pour afficher l'en-tête. Ouvrez le dossier src / components et créez un fichier appelé Header.vue ouvrez le fichier et mettez-le à jour avec l'extrait ci-dessous:
< template >
< header >
< div class = " brand ] " >
< h5 > Just Chat </ h5 >
< img src = " ../ assets / logo.svg " alt = " Logo " >
</ div >
</ header >
</ template > [19659568]
< script >
export default {
nom : 'Header'
}
</ script >
< style portée >
header {
padding : 8 px 10 px ;
border-bottom : 1 px solide rgba ( 0 0 0 0,2 ) ; [19659535] font-family : poiret-one, sans-serif ;
font-weight : 400 ;
font-style : normal ;
margin-bottom : 60 px ;
}
header .brand {
affichage : flex ;
justify-content : space-between ;
align-items : center ;
}
header .brand h5 {
text-transform : uppercase ;
font-size : 18 px ;
line-height : 2 px ;
}
header img {
width : 40 px ;
hauteur : 40 px ;
}
</ style >
NB: Les images sont de https://flaticon.com .
Juste quelques styles pour embellir l'en-tête. Enfin, nous allons rendre le composant dans le fichier App.vue . Ouvrez le fichier, importez le composant Header ajoutez-le à l'objet components et affichez-le dans le modèle.
< template >
< div id = " app " >
< Header />
< Chat />
</ div >
</ template > [19659568]
< script >
import Chat from "./ components / Chat" ;
import Header from "./ components / Header" ;
export default {
nom : "app"
composants : {
Chat
Entête
}
} ;
</ script >
< style >
...
</ style >
Si vous accédez à http: // localhost: 8080, vous devriez voir les composants Chat et Header visibles sur la page.
Actuellement , les fonctionnalités en temps réel et les suggestions d'emoji ne sont pas disponibles. Dans la section suivante, nous installerons la bibliothèque vue-socket.io comme plugin pour permettre à notre application d'émettre des événements sur le serveur.
Ajout de suggestions de Socket.io et d'Emoji
Donc loin, nous avons une application qui permet aux utilisateurs d'envoyer des messages, mais la livraison des messages n'est pas en temps réel. Pour résoudre ce problème, nous allons inclure la bibliothèque vue-socket.io ; nous écoutons également les événements du serveur, et nous rendons des suggestions d'emoji dans l'interface de chat en fonction de la réponse du serveur.
Avant d'utiliser les fonctionnalités de la bibliothèque vue-socket.io dans notre application, nous devons l'installer en tant que plugin. Ouvrez le fichier src / main.js importez la bibliothèque et enregistrez-la en tant que plugin:
import Vue from "vue" ;
import VSocket de "vue-socket.io" ;
Vue . use ( ChatInstaller ) ;
Vue . use (
new VSocket ( {
debug : true
connexion : "http: // localhost: 4000"
} )
) ;
La configuration ci-dessus rend la bibliothèque disponible pour toute l'application, ce qui signifie que nous pouvons écouter les événements et les émettre. La propriété connection dans l'objet est l'URI de notre serveur, et nous avons activé le mode debug pour le développement.
Ensuite, nous mettrons à jour le Chat.vue en ajoutant un objet sockets . L'objet sockets nous permet de configurer des écouteurs pour les événements en utilisant les clés d'objet. Le plugin vue-socket.io ajoute également un objet $ socket pour l'émission d'événements.
< modèle >
...
</ modèle >
< script >
import { Chat } from "@ progress / kendo-chat-vue-wrapper" ;
import { v4 } from "uuid" ;
export default {
nom : "Chat"
composants : {
Bavarder
}
data () {
return {
...
} ;
}
sockets : {
message ( data ) {
const { sentiment : result text id sender } = data ;
const chat = this . $ refs . chat . kendoWidget () ;
const emojiList = this . emojiList [ result . tone ] . map ( ] emoji => ( {
titre : emoji
valeur : emoji
} ) ) ;
if ( this . lastMessageId ! == id ) {
chat . renderMessage (
{ type : "text" text timestamp : nouveau Date () }
this . users . receiver
) ;
chat . renderSuggestedActions ( emojiList ) ;
}
}
}
méthodes : {
async sendMessage ( message ) {
...
this . $ socket . emit ( "chat" data ) ;
}
} [19659029]
monté () {
...
}
} ;
</ script >
< style lang = " scss " >
...
</ style >
Dans l'extrait ci-dessus, nous avons apporté quelques modifications. Nous avons mis à jour la méthode sendMessage pour émettre le message posté en utilisant la méthode $ socket.emit . Nous avons également mis à jour le composant en ajoutant l'objet sockets ; dans l'objet, nous avons créé une méthode d'écoute d'événement pour l'événement message .
Dans la méthode message nous avons utilisé la déstructuration d'objet pour obtenir le texte sentimentid and sender properties from the event payload.
To display emoji suggestions during a chat session, we'll make use of the sentiment param sent from the server as a response for each message request. The data sent from the server should be similar to the snippet below.
{
id: '83d3dd57-6cf0-42dc-aa5b-2d997a562b7c',
text: 'i love pusher',
timeStamp: '2018-04-27T15:04:24.574Z'
sentiment: {
tone: 'positive',
score: 3
}
}
We then get the emojiList that matches the message tone (obtained after performing sentiment analysis on the message), and we map through the list to create an object array matching the format used for creating chat suggestions.
After this, we check if the id of the message sender isn’t the same as the receiver. You can avoid this check by using the socket broadcast method in the server. If the two ids don’t match, we render the message using the renderMessage method and the emoji suggestions using the renderSuggestedActions method.
With these changes, we should receive messages in real time and emoji suggestions matching the tone of the message received. Navigate to http://localhost:8080 and open two browser tabs side by side to test the real-time functionality:
Conclusion
With the help of Kendo UI’s Chat component, we’ve successfully created a messaging application without doing much. The Chat component is robust and well-built, it can display rich media cards and suggested actions. Including Socket.io in the application provided real-time updates for our application, ensuring it rubs shoulders with the best messaging applications out there (we wish). You can read more on the Chat component hereand you can find the source code for this demo here. Happy coding.
Source link