Ingénierie

Construire une application de chat Vue : Utilisation de l’UIKit de Sendbird dans une application Vue.js

Construire une application de chat Vue : Utilisation de l’UIKit de Sendbird dans une application Vue.js

Bâtiment
chat
est une entreprise complexe. Que vous construisiez pour
soins de santé
,
jeux vidéo
,
services à la demande
ou tout autre secteur, la création d’un chat riche en fonctionnalités demande des efforts. Il est également essentiel de choisir la bonne pile technologique. Dans ce tutoriel, nous allons voir comment créer un chat avec les éléments suivants Vue.jsIl s’agit d’un cadre Web JavaScript frontal populaire pour la création d’interfaces utilisateur et de petites applications. Vous apprendrez également à utiliser le logiciel Sendbird
UIKit
un ensemble riche en fonctionnalités de
chat UI
de chat, dans votre application de chat Vue.

Il peut arriver que vous souhaitiez rendre dans votre application des composants écrits dans un cadre frontal différent, par exemple lors de la migration d’un projet entre cadres frontaux ou de l’utilisation d’une bibliothèque tierce (par exemple vuetify) qui n’a pas été portée sur le cadre de votre choix. Dans ces cas, un certain nombre de bibliothèques de transition sont disponibles. Par exemple, il est possible de rendre Angulaire composants dans React applications avec angular2react ou Vue composants dans un Svelte projet avec adaptateur svelte. Pour ce tutoriel, nous utiliserons
Vue
pour faire le lien entre les mondes React et Vue.

Conditions préalables

Pour commencer à construire votre application de chat Vue, vous aurez besoin de
node.js
installé et un identifiant d’application Sendbird. Si vous ne l’avez pas encore fait, vous pouvez
créer un compte Sendbird
et créez une application dans le
tableau de bord
.

Vous pouvez trouver votre ID d’application dans le tableau de bord de Sendbird.

Ce que nous allons construire : Ce à quoi devrait ressembler votre application de chat Vue

Dans ce tutoriel, nous allons créer une application de chat Vue avec une interface utilisateur similaire à celle de WhatsApp pour ordinateur. Le site
Le code du projet final
est disponible sur GitHub, et nous vous recommandons également de consulter la
démo en direct
.

Notre projet sera construit à l’aide de Vue 3 et l’application rendra une version entièrement fonctionnelle du logiciel de Sendbird
React UIKit
dans l’application principale de chat Vue. L’application Vue transmettra les configurations à UIKit et UIKit renverra également des informations sur l’utilisateur à Vue. Cette communication bidirectionnelle nous permettra d’afficher le nom d’un utilisateur de Sendbird et le nombre de messages non lus dans l’en-tête supérieur de notre application Vue. Le résultat ressemblera à ceci.

Configuration de votre application de chat Vue

Vue dispose d’un outil en ligne de commande très pratique pour échafauder rapidement des applications. Il suffit d’exécuter ce qui suit à l’endroit où vous voulez que votre projet se trouve.

Cette commande vous guidera à travers les options lors de la création d’un nouveau projet. Les paramètres utilisés pour ce tutoriel sont indiqués ci-dessous.

Pour démarrer l’application en mode dev, exécutez les commandes suivantes.

Vous devriez maintenant voir une nouvelle page d’accueil brillante lorsque vous vous exécutez et visitez
http://localhost:5173
. Voilà à quoi ça devrait ressembler :

Installer et configurer Veaury

Veaury est une bibliothèque qui permet le rendu de composants React dans les applications Vue. Il convient de noter que les composants Vue dans les applications React sont également pris en charge, mais sont hors du champ d’application de ce tutoriel. Veaury fonctionne à la fois avec Vue 3 et Vue 2, et la bibliothèque peut être installée à partir de npm avec la commande suivante :

Pour permettre à notre application de chat Vue nouvellement créée d’importer et de rendre les composants React, vous devez apporter une petite modification à la configuration de la construction. Par conséquent, nous devons mettre à jour le fichier vite.config.js de notre projet pour utiliser le plugin Veaury.

Après ce changement de configuration, vous pouvez ajouter tous les composants React que vous voulez dans un répertoire appelé react_app. Ces composants React peuvent ensuite être importés dans des fichiers .vue et rendus dans des composants Vue standard.

Création d’un composant React dans notre projet Vue

Tout d’abord, vous devez créer un nouveau composant React dans react_app. Ce composant est responsable de l’importation, de la configuration et du rendu de UIKit.

Vous n’avez rien à faire de spécial à ce composant React pour qu’il fonctionne bien avec Vue. Le code ici fait ce qui suit :

  1. Importe les dépendances de Sendbird UIKit
  2. Initialise UIKit avec un identifiant d’application et un identifiant d’utilisateur.
  3. S’utilise avecSendbird HOC pour l’accès au SDK Sendbird. Cela nous permettra d’accéder aux informations sur l’utilisateur qui seront transmises à l’application Vue.

Il convient de noter que les accessoires qui sont transmis au composant ChatReactComponent le sont à partir d’un composant Vue parent. Le passage de props ici est le moyen d’obtenir le côté React des choses pour communiquer avec Vue. La section suivante explique comment définir et transmettre ces propriétés.

Ajouter UIKit à la page

Ensuite, ajoutez le composant ChatReactComponent à votre application de chat Vue. La page qui doit être mise à jour est views/HomeView.vue. Supprimez tout le code actuellement dans views/HomeView.vue et ajoutez le code ci-dessous.

Ce code fait ce qui suit :

  1. Importe Veaury et notre nouveau composant de chat React
  2. Convertit notre composant React en composant Vue en utilisant la fonction applyPureReactInVue de Veaury
  3. Dans la fonction setup, définissez les données et les callbacks à passer comme props à notre composant React.
  4. Définir notre HTML pour rendre un en-tête supérieur. L’en-tête comprend le nom d’utilisateur et le nombre de messages non lus. Ces données seront transmises par UIKit dans une étape ultérieure de ce tutoriel.
  5. Rendre le composant React Chat dans le HTML, en passant les données et les rappels définis précédemment comme attributs de l’élément Chat.
  6. Enfin, ajoutez quelques éléments de style pour rendre le tout agréable à regarder.

Vous verrez maintenant le rendu de UIKit dans le navigateur lorsque vous visitez
http://localhost:5173
. Voilà à quoi ça devrait ressembler :

Transmettre les informations de l’utilisateur à Vue

Enfin, les informations sur l’utilisateur et le nombre de messages non lus seront transmises à votre application de chat Vue afin qu’elle puisse les afficher dans la barre d’en-tête supérieure de l’application. Ces informations sont accessibles via le Sendbird SDK. Pour accéder au SDK depuis UIKit, vous pouvez utiliser une fonction utile appelée getSdk. En appelant cette fonction comme indiqué ci-dessous, vous obtiendrez le SDK sous-jacent. Vous pouvez ensuite accéder aux méthodes pertinentes pour obtenir ce dont vous avez besoin (nombre de messages non lus et informations sur l’utilisateur) et renvoyer ces informations à Vue à l’aide des rappels transmis en tant que props (setUnreadMessageCount & setSbUserInfo).

La barre supérieure de l’application affiche désormais le nom de l’utilisateur et le nombre de messages. Remarquez le nom d’utilisateur « Bob » et le nombre de messages non lus de 1 dans la capture d’écran ci-dessous.

Conclusion

Félicitations ! Sendbird UIKit est maintenant exécuté dans votre application Vue. Dans ce tutoriel, nous avons expliqué comment créer une application de chat Vue à l’aide des composants de conception préfabriqués et riches en fonctionnalités fournis par Sendbird UIKit. Maintenant, vous pouvez joyeusement créer des groupes et commencer à chatter !

N’oubliez pas que les données circulent dans les deux sens entre le code Vue et React ; une prochaine étape judicieuse serait d’essayer de transmettre différents types de propriétés au composant Chat react et d’utiliser ces propriétés pour configurer UIKit d’une autre manière, par exemple en définissant les couleurs du thème UIKit.

Si vous avez besoin d’aide avec
Sendbird Chat
ou le
UIKit
veuillez consulter notre
docs pour le Chat
et
docs pour UIKit
! Vous trouverez des conseils sur la manière de mettre en place le chat dans votre application grâce à de riches composants d’interface utilisateur préétablis. Vous pouvez également trouver des réponses dans le
Communauté Sendbird
un forum où vous pouvez poser des questions et répondre à des questions concernant tout ce qui touche à
Sendbird
. N’hésitez pas à contactez-nous si vous avez besoin d’aide – nos experts sont heureux de vous aider. Bonne construction de chat ! 💻

Categories: Ingénierie