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:
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:
- Le paquet Kendo UI
- Le paquet de thème par défaut Kendo UI
- 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
- Enfin, nous ajoutons les packages nécessaires de Kendo UI du service CDN. Ouvrez le fichier
index.html
du répertoirepublic
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:
Démonstration du chat Kendo
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.
Source link