Fermer

août 1, 2019

Implémentation d'interactions de conversation dans Vue Apps avec Kendo UI


Dans cet article, nous montrons comment implémenter facilement des interactions de conversation dans vos applications Vue à l'aide du composant Conversation de Kendo UI.

Le besoin de fonctionnalités de discussion dans les applications Web modernes est devenu de plus en plus commun. plus de fonctionnalités utiles qui optimisent les plateformes de collaboration en temps réel pour les individus et les équipes. Aujourd'hui, un site Web sur cinq dispose d'une fonction de chat qui permet aux visiteurs de parler aux administrateurs pour leur faire part de leurs préoccupations et obtenir un retour direct des propriétaires des sites.

Au fil du temps, cela a amélioré la boucle de communication entre les fournisseurs de services et les consommateurs. Kendo UI fournit un composant de chat qui permet d'implémenter les fonctionnalités de chat dans votre application Vue.js en quelques minutes. Dans cet article, nous allons montrer les étapes nécessaires à son installation.

Créer un projet Vue

Nous devons d’abord créer un projet Vue.js avec lequel nous pourrons démontrer la mise en oeuvre de notre planificateur de tâches. Sans plus attendre, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

 vue create chat-demo

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.

Lorsque vous avez terminé de démarrer votre application Vue, accédez au nouveau répertoire de Vue et démarrez le serveur de développement.

  cd  discussion en ligne
 npm  courir servir

Ceci servira votre application Vue sur localhost: 8080 . Naviguez jusqu'à votre navigateur et vous verrez votre application Vue en direct:

 S_B221 ~ 1 "title =" S_B221 ~ 1 "/> </p>
<h2 id= Ajouter l'interface utilisateur de Kendo au projet

ajout de Kendo UI à notre nouveau projet Vue Pour la portée de cette démonstration, nous aurons besoin de:

  1. Le paquet Kendo UI
  2. Le paquet de thème par défaut Kendo UI
  3. L’emballeur de chat Kendo UI pour Vue

Pour ajouter ces trois éléments, ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez les commandes ci-dessous:

 // Installez le paquet kendo ui vue
 npm   installez  --save @ progress / kendo-ui
// Installer le wrapper de discussion kendo ui  pour  vue
 npm   installez  --save @ progress / kendo-chat-vue-wrapper
// Installer le paquet de thème par défaut de kendo ui
 npm   installez  --save @ progress / kendo-theme-default
  1. Enfin, nous ajoutons les packages nécessaires de Kendo UI du service CDN. Ouvrez le fichier index.html du répertoire public et ajoutez cet extrait dans le tag :

    

 <   rel  = [19659027] " feuille de style "    href  =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common .min.css  "  /> 
 < link   rel  = "  feuille de style  " [ href  =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css "   /> [19659040] < script   src  =  " https://code.jquery.com/jquery-1.12.4.min.js "    ]>  </  script > 
 < script   src  =  " https://kendo.cdn.telerik.com/ 2017.3.913 / js / kendo.all.min.js  " >  </  script > 
 < script   src  =  " https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6. 15 / browser-polyfill.min.js  " >  </  script > 
 < script   src  = [19659027] " https://unpkg.com/vue/dist/vue.min.js "  >  </  script > 

 < script   src  =  " https://unpkg.com/@progress/kendo-dateinputs-vue-wrapper/dist/cdn/kendo-dateinputsput-vue-wrapper .min.js  " >  </  script > 
 < script   src  = "  ] https://unpkg.com/@progress/kendo-chat-vue-wrapper@2018.3.911/dist/cdn/kendo-chat-vue-wrapper.min.js  " >  </  script > 

Créez le modèle de discussion en ligne

dans le dossier src de votre projet Vue ect, ouvrez le fichier App.vue et mettez à jour la section modèle avec le widget de chat de Kendo UI comme suit:



Nous rendons ici le widget de discussion Kendo UI qui nous donne une présentation de discussion simple. Il fournit un champ de saisie de texte permettant aux utilisateurs de saisir leurs messages de discussion et un champ d'affichage permettant d'afficher les messages envoyés. Nous avons également défini certains événements de message pour publier nos messages envoyés.

Création de la logique de discussion

Ensuite, mettez à jour la section de script du fichier App.vue avec le code ci-dessous.

  

Nous avons défini ici les fonctions qui seront activées lorsque les opérations des utilisateurs auront lieu sur le widget de discussion que nous avons rendu. Si l'utilisateur tape et envoie un message, la fonction post est appelée et enregistre un message sur la console.

s_7FE44C title = "s_7FE44C0477642829BD2EEE7C098AB5AAB4EBED27C8F67AAD10B8635322DDCE95_15511798429_ezgif.com-video-to-gif + 74" />

Evénements La vie se termine le même jour avec le profil Voici quelques-uns des événements de chat disponibles auxquels vous pouvez vous abonner:
 
         

Vous pouvez vous abonner à tous ces événements par leur nom de gestionnaire dans la section de script, comme suit:

 export default {
  nom: 'app',
        méthodes: {
        poste: fonction (ev) {
            console.log ("Un message a été posté sur le widget Chat!");
        },
        sendMessage: function (ev) {
            console.log ("Un message a été posté dans le widget Chat en utilisant la boîte de message!");
        },
        onActionClick: function (ev) {
            console.log ("L'utilisateur a cliqué sur un bouton d'action dans le modèle de pièce jointe ou sélectionné une action suggérée!");
        },
        onTypingStart: fonction (ev) {
          console.log ("L'utilisateur a commencé à taper ...");
        },
        onTypingEnd: function (ev) {
            console.log ("L'utilisateur a effacé la boîte de message de discussion!");
        },
        onToolClick: function (ev) {
            console.log ("l'utilisateur a cliqué sur un outil")
        }
    }
}

Conclusion

On ne saurait trop insister sur le besoin de fonctionnalités de discussion en ligne. Dans cet article, nous avons montré comment ajouter rapidement une fonctionnalité de discussion à vos applications Vue.js à l’aide du composant de discussion de Kendo UI. Cela ne raye pas la surface de ce que fait ce composant. Il peut être mis à l'échelle pour exécuter des fonctions plus étendues telles que l'intégration à Tensorflow pour le développement de l'intelligence artificielle et du chatbot. Pour en savoir plus sur ce composant, consultez la documentation officielle .


Les applications géniales démarrent avec une interface utilisateur conviviale

Vous souhaitez en savoir plus sur la création d'applications Web performantes? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

 KendoJSft "title =" KendoJSft "style =" vertical-align: middle; "/> </a></p>
<hr/></div>
<p><div class=




Source link