Ingénierie

Comment créer un clone de la messagerie WhatsApp en React avec le Sendbird UIKit ?

Blog author
Michelle Wong Developer Advocate
Share
Comment créer un clone de la messagerie WhatsApp en React avec le Sendbird UIKit ?

Avec plus de
2 milliards d’utilisateurs
et
100 milliards de messages
échangés chaque jour, WhatsApp est l’application de

dans le monde. Alors que sa facilité d’utilisation pour la messagerie entre utilisateurs et sa capacité à entretenir des conversations avec des entreprises ont largement contribué à sa popularité, WhatApp a récemment
a été critiqué
pour l’augmentation du nombre d’entreprises qui inondent les utilisateurs de messages promotionnels.

Les marques peuvent éviter ce problème en créant
chat dans l’application
. Le chat contextuel dans l’application signifie que les mises à jour, les nouvelles et les annonces importantes d’une entreprise ne seront pas perdues dans une boîte de réception débordant de spam. Le chat dans l’application offre également une expérience de messagerie plus vraie que nature, tout en permettant aux marques de contrôler de manière responsable les données des utilisateurs. C’est important car la messagerie pour les entreprises peut très bien devenir une partie importante de la fondation sur laquelle une marque est construite. En effet, un porte-parole de Meta
a récemment déclaré
que « la messagerie est le nouveau moyen de faire des affaires, mieux qu’un e-mail ou un appel téléphonique ».

C’est pourquoi, dans ce blog, nous allons découvrir comment construire un clone de la messagerie WhatsApp en React. Pour ce projet, nous utiliserons Sendbird UIKit pour React. Sendbird UIKit permet aux développeurs de créer une expérience de chat sur mesure avec des composants d’interface utilisateur hautement personnalisables. Dans ce blog, nous allons comprendre comment les composants fournis par UIKit constituent chaque aspect de notre intégration personnalisée pour atteindre notre objectif – construire un clone de la messagerie WhatsApp en React.

À la fin de ce blog, voici ce que vous aurez construit pour le bureau :

Clone de la messagerie WhatsApp pour le bureau

Et ceci pour le mobile :

Clone de la messagerie WhatsApp pour mobile

Démarrage de votre clone de la messagerie WhatsApp

Pour commencer, créez une application dans le
tableau de bord Sendbird
. Ici, vous pouvez accéder à tout ce qui est fourni dans votre service de chat. Une fois qu’une application est créée, vous devrez enregistrer l’ID d’application qui est généré pour initialiser le SDK de chat dans votre application react.

Générez une application React et installez Sendbird UIKit for React avec npm ou yarn :

Une fois UIKit installé, nous pouvons importer les composants nécessaires à notre application depuis UIKit.

Composants et modules pour un clone de la messagerie WhatsApp en React

Pour commencer, nous allons utiliser le SendbirdProvider comme enveloppe générale pour les multiples modules que nous allons inclure dans notre application.

Pour notre exemple, nous allons utiliser les modules ChannelList, Channel et ChannelSettings. Avec ces trois modules, nous allons créer une vue mobile et une vue de bureau. L’affichage mobile rendra soit la liste des chaînes, soit la conversation des chaînes et le menu des paramètres ensemble. Pour la vue de bureau, nous aurons la liste des canaux et la conversation des canaux côte à côte.

Tout d’abord, nous allons importer le SendbirdProvider et la feuille de style de UIKit dans le fichier App.js :

Note: Ici, nous importons SendbirdProvider et nous y faisons référence dans notre application en tant que SBProvider. Vous pouvez choisir le nom que vous souhaitez lui donner dans votre propre application.

Ensuite, appliquez le CSS suivant à notre feuille de style, qui se trouvera dans le fichier styles.css :

Maintenant, nous voulons que l’application fonctionne aussi bien sur une vue de bureau que sur une vue mobile. Ainsi, dans notre composant fournisseur, nous devrons vérifier la taille de l’écran de la fenêtre. S’il a la taille d’un écran de téléphone, il rendra notre vue mobile. S’il est supérieur au nombre de pixels d’un écran de téléphone typique, il rendra une vue de bureau. Nous allons donc créer deux composants et les nommer MobileView et DesktopView. Ces deux composants contiendront nos modules.

Une fois ces étapes terminées, le fichier App.js ressemblera à ceci :


Note

: Dans le tableau de bord, si vous délivrez à un utilisateur un jeton d’accès, vous devrez passer la variable accessToken dans le SBProvider comme indiqué dans l’exemple de code ci-dessus.

Vue du bureau

La vue du bureau est la disposition par défaut de Sendbird avec la liste des canaux sur le côté gauche et la conversation sur le côté droit. Notre composant DesktopView renvoie un div avec un className de « sendbird-app__wrap ». Ce className est déjà stylé par le design par défaut de Sendbird qui affiche la liste des canaux à côté de la fenêtre de conversation.

Ensuite, nous devons définir la hauteur du div sendbird-app__wrap à 100vh, qui est la taille de l’écran entier de la fenêtre. Dans ce div, nous placerons les composants de la liste des canaux, de la conversation des canaux et des paramètres des canaux.

Importez les modules de liste de canaux, de canaux et de paramètres de canaux. Ils seront désignés par les termes SBChannelList, SBConversation et SBChannelSettings :

Nous allons ajouter un div autour de chaque composant et en utilisant les classNames suivants, il appliquera le style par défaut de UIKit à nos composants. Voici les noms de classe de chaque composant :

  1. Pour la liste de canauxle className de la div est « sendbird-app__channellist-wrap ».
  2. Pour la canal de conversation, le nom de classe du div est « sendbird-app__conversation-wrap ».
  3. Pour le canal paramètres, le className du div est « sendbird-app__settingspanel-wrap ».

Dans le composant de la liste des chaînes, nous utiliserons la propriété onChannelSelect pour définir la chaîne sur laquelle on clique dans la liste des chaînes. La conversation du canal transmettra le channelUrl et utilisera onChatHeaderActionClick afin d’écouter le moment où l’utilisateur souhaite ouvrir la barre de paramètres. Pour les paramètres du canal, indiquez la propriété channelUrl et utilisez onCloseClick pour fermer la vue de la barre de paramètres. Veuillez consulter les exemples de code dans la section Personnalisations ci-dessous pour voir à quoi cela ressemble.

Vue mobile

Dans la vue du dispositif mobile, le composant de liste de canaux ou le composant de conversation de canaux sera rendu à l’écran. Si un utilisateur se trouve dans la liste des canaux et clique sur une conversation, la fenêtre de conversation s’affiche. Si l’utilisateur clique pour passer de la conversation à la liste des canaux, la liste des canaux s’affiche à l’écran.

Pour la vue mobile, nous allons renvoyer un div avec le className « mobile-view__wrap » et à l’intérieur de celui-ci, placer une condition où si le canal actuel n’est pas défini, alors il renverra le composant de la liste des canaux. Sinon, il renvoie la fenêtre de conversation du canal et le composant des paramètres. Le composant de paramètres n’est rendu que si l’utilisateur clique sur un bouton dans la fenêtre de conversation pour ouvrir le menu de paramètres.

Dans la feuille de style, définissez l’élément avec le className « mobile-view__wrap » et la hauteur « sendbird-app__conversation-wrap » à 100vh afin qu’il occupe tout l’écran de la fenêtre.

Nous utiliserons les mêmes propriétés pour chaque composant que celles que nous avons utilisées précédemment pour le DesktopView. Pour la liste des canaux, utilisez la propriété onChannelSelect ainsi que la propriété disableAutoSelect. La propriété disableAutoSelect est utilisée pour que la liste des canaux n’affiche pas automatiquement le premier canal de la liste.

La vue du bureau affiche la liste des canaux et la conversation des canaux côte à côte. Toutefois, pour l’affichage mobile, nous ne visualisons que la liste des chaînes ou la conversation sur les chaînes, de sorte que la sélection automatique doit être désactivée. Si vous n’incluez pas disableAutoSelect, vous constaterez que la vue rendra constamment le premier canal dans la fenêtre de conversation et ne vous permettra pas de revenir à la liste des canaux puisqu’elle rendra constamment ce canal. Par conséquent, la propriété disableAutoSelect est utilisée pour sélectionner le canal que vous souhaitez visualiser dans la fenêtre de conversation et passer de la visualisation de la liste des canaux à la conversation.

Ensuite, au-dessus du composant SBConversation, nous voulons ajouter un bouton de retour. Le bouton de retour s’affiche dans la conversation des chaînes et permet de revenir à la liste des chaînes. Le composant de conversation transmet le channelUrl et utilise le onChatHeaderActionClick. Le clic sur l’action onChatHeaderActionClick fera basculer la barre de paramètres pour l’ouvrir. Le composant SBChannelSettings utilisera la propriété channelUrl et onCloseClick pour fermer le menu des paramètres.

Personnalisations

Nous pouvons commencer à ajouter des personnalisations pour donner à votre chat un style plus proche de Whatsapp. Dans la DesktopView et la MobileView, nous allons créer une fonction qui masquera la barre de paramètres et une fonction qui rendra la barre de paramètres.

Pour cacher la barre de paramètres, dans la fonction, nous allons saisir l’élément avec le className « sendbird-app__conversation-wrap » et définir sa marge droite à 0px. Cette fonction sera déclenchée dans le SBChannelSettings à l’aide de la propriété onCloseClick. Pour ouvrir la barre de paramètres, dans le composant Channel, dans la propriété onChatHeaderActionClick, on appelle la fonction renderSettingsBar où l’on saisit l’élément avec le className « sendbird-app__conversation-wrap » et on définit la marge droite à 318px.

Ainsi, l’ouverture des paramètres modifiera la disposition de la fenêtre de conversation de manière à ce qu’il y ait de l’espace sur le côté droit de la page pour que le menu existe. Ensuite, lorsque l’on clique sur le menu des paramètres pour le fermer, la fenêtre de conversation s’étend à l’endroit où se trouvait précédemment la barre de paramètres.

Pour faire apparaître le menu des paramètres, nous voulons ajouter un peu de CSS afin de le positionner correctement dans la vue de la fenêtre :

À partir de là, vous pouvez modifier toutes les personnalisations CSS pour faire apparaître la façon dont vous souhaitez que le menu des paramètres soit positionné.

Avec ces implémentations, le MobileView retournera ceci :

Et le DesktopView renvoie ceci :

colorSet

Ensuite, nous voulons utiliser la fonction
colorSet
dans le SendbirdProvider pour définir les couleurs qui composent le thème de UIKit. Une fois que nous avons défini notre colorSet, nous devons nous assurer de le passer dans le composant SendbirdProvider.

Pour notre exemple, nous allons définir la variable –sendbird-light-primary-100 comme étant vert clair. Cette couleur est appliquée dans la liste des canaux comme arrière-plan du canal sélectionné, comme couleur d’arrière-plan du conteneur d’une réaction emoji et comme couleur d’arrière-plan lorsque l’utilisateur actuel modifie son propre message. Dans notre exemple, nous pouvons modifier la couleur pour qu’elle corresponde à celle de nos messages sortants et passer à une nuance de vert plus claire.

Ensuite, nous voulons définir –sendbird-light-primary-300 pour qu’il soit vert. Cette variable est utilisée sur la couleur de fond des messages sortants, sur le bouton de création d’un nouveau canal dans la liste des canaux, ainsi que sur les icônes telles que l’icône des paramètres dans la conversation des canaux et toutes les icônes dans le menu des paramètres.

Ensuite, nous réglerons le paramètre –sendbird-light-primary-400 pour obtenir une nuance de vert légèrement plus foncée. Les éléments qui utilisent –sendbird-light-primary-400 comprennent l’arrière-plan au survol des messages sortants, au survol du bouton de sauvegarde lorsque vous voulez modifier votre propre message, et au survol du bouton de création pour créer un nouveau canal.

Une variable colorSet importante à noter est -sendbird-light-background-50, qui est appelée pour la couleur d’arrière-plan de chaque composant. La couleur par défaut actuelle est le blanc. Au lieu de modifier cette variable pour avoir une couleur d’arrière-plan uniforme ou de laisser la couleur d’arrière-plan de toute l’application blanche, nous allons mettre en œuvre une CSS pour changer la couleur d’arrière-plan de la fenêtre de conversation en beige clair. Nous vous encourageons à consulter l’intégralité du
liste des variables colorSet
.

La fonction App devrait ressembler à ceci maintenant :

Personnalisation des canaux

Pour la touche finale, nous ajouterons le CSS. Pour les messages entrants, nous voulons supprimer l’icône de l’image de profil à côté du nom de l’utilisateur. Une fois que nous avons supprimé l’image de profil de l’utilisateur, nous voulons supprimer le style de largeur minimale qui lui est appliqué afin qu’il n’y ait pas d’espace vide à la place de l’avatar.

Personnalisation de la liste des canaux

Dans l’en-tête de la liste des canaux, nous voulons enlever le surnom et l’ID de l’utilisateur actuel. Au lieu d’utiliser les CSS pour atteindre cet objectif, vous pouvez utiliser le composant UI ChannelListHeader de ChannelList pour personnaliser votre propre design spécifique afin de remplacer la mise en page par défaut.

Pour le composant de prévisualisation du canal, nous allons définir l’affichage à none sur le nombre de membres qui est affiché à côté du nom du canal du groupe. Une autre option pour concevoir votre propre interface utilisateur pour l’aperçu des chaînes serait d’utiliser la propriété renderChannelPreview de ChannelList qui remplacerait l’en-tête Sendbird par défaut par votre propre composant personnalisé. Si vous souhaitez voir le code, veuillez consulter la
feuille de style CSS complète
!

Voici le résultat final sur un ordinateur de bureau :

Clone de la messagerie WhatsApp pour le bureau

Et voici à quoi cela ressemble sur un appareil mobile :

Clone de la messagerie WhatsApp pour mobile

Conclusion

Félicitations ! Vous avez maintenant construit un clone de la messagerie WhatsApp en React. Vous disposez d’une implémentation de messagerie fonctionnelle de type WhatsApp composée de composants et de modules de base de l’UIKit Sendbird. À partir de là, vous pourrez construire votre expérience de chat avec les éléments essentiels pour répondre aux besoins de votre application.

Veuillez consulter ce
dépôt GitHub
pour un aperçu de ce que nous avons traversé. Pour plus d’informations, vous pouvez également consulter notre site web
docs
ou explorer la richesse des
tutoriels UIKit
sur notre
portail des développeurs
l. Consultez les forums de la communauté ou contactez-nous si vous avez besoin d’aide avec l’UIKit Sendbird.. Nos experts sont toujours prêts à vous aider !

Amusez-vous à construire votre clone de la messagerie WhatsApp ! 💻

Categories: Ingénierie