Fermer

octobre 21, 2020

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:

 Gif d'une fenêtre de discussion, où des emojis sont suggérés pour les réponses.

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 et id de 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 est positif négatif ou neutre .
  • ton : le ton variable est le contexte du message obtenu après analyse. La tonalité est négative si le score comparatif est inférieur à 0 neutre si le score est supérieur à 0 mais inférieur à 1 . La tonalité est positive si le score comparatif est 1 et 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