Fermer

janvier 30, 2019

Construire une application de chat avec Twilio, KendoReact et React


Apprenez à créer une application de conversation Twilio avec les composants de l'interface utilisateur de conversation KendoReact. Dans ce didacticiel, Phil Nash, l'avocat des développeurs de Twilio, explique pas à pas comment créer facilement et rapidement l'application.

Le chat programmable Twilio fournit un SDK et un back-end robuste pour les applications de chat en temps réel, mais il manque un front-end. Si vous avez besoin d'une interface utilisateur de discussion ainsi que de nombreux autres composants utiles, alors KendoReact est peut-être ce que vous recherchez.

Kendo UI fournit des composants bien conçus et testés qui vous pouvez utiliser dans vos applications React Angular Vue et jQuery . Dans cet article, nous construirons une application de chat Twilio avec React et les composants de l'interface utilisateur conversationnelle de KendoReact .

Ce dont vous aurez besoin

Si vous voulez construire en même temps que ce tutoriel, vous allez besoin de quelques choses:

Si vous voulez sauter, vous pouvez vérifier le code de cette application dans ce dépôt GitHub .

Commençons par

Nous allons utiliser l'application de démarrage React and Express que j'ai construite en ce post comme base de cette application. Cette application nous donne un moyen facile d'exécuter un serveur Node.js et React front-end avec une seule commande et est livrée avec des points d'extrémité prêts à créer des jetons d'accès pour le chat programmable Twilio. Téléchargez ou clonez l'application, passez dans le répertoire et installez les dépendances:

 git  clone -b twilio https://github.com/philnash/react-express-starter.git twilio-chat-kendo
 cd  twilio-chat-kendo
 npm   install

Copiez le fichier .env.example dans .env puis remplissez les espaces avec votre compte Twilio SID, le service de chat et l'API. clés que vous avez générées précédemment.

 cp  .env.example .env

Exécutez l'application pour vous assurer que tout fonctionne jusqu'à présent. Sur la ligne de commande, exécutez la commande suivante:

 npm  run dev

Une application semblable à celle-ci apparaîtra dans votre navigateur: 3000.

TwilioKendoReact1 "title =" TwilioKendoReact1 "/> [19659006] Nous avons notre application de conversation Twilio prête et notre application React configurée. Construisons.</p data-recalc-dims=

Préparation à la discussion

Nous avons un peu de travail à faire avant de commencer l’intégration de la conversation. dépendances, supprimez l’exemple d’application et ajoutez un peu de style. Commençons par ces dépendances.

Nous avons besoin du module twilio-chat pour se connecter à Twilio Chat, puis à quelques modules KendoReact qui fournira les composants que nous allons utiliser:

 npm   installer  twilio-chat @ progress / kendo-react-conversationnel-ui @ progress / kendo-réact-entrées @ progress / kendo-react- boutons @ progrès / kendo-react-intl @ progrès / kendo-theme-material

Ensuite, décodez src / App.js pour revenir aux fondamentaux, y compris le code CSS pour le thème KendoReact Material:

 import  Réagir   { Composant }   de   'réagir' ; 
  import   '@ progress / kendo-theme-material / dist / all.css' ; 
   App   s'étend   Composant   {
  constructeur  ( accessoire )   {
  super  ( accessoire
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link