Ingénierie

Une visite de l’UIKit Sendbird pour React : Les composants et modules essentiels que vous devez connaître

Blog author
Michelle Wong Developer Advocate
Share
Une visite de l’UIKit Sendbird pour React : Les composants et modules essentiels que vous devez connaître

Création d’un système de
dans l’application
est une entreprise fascinante mais complexe. Que vous construisiez pour
jeu
,
vente au détail
,
santé numérique
ou
à la demande
il est nécessaire d’avoir une
interface utilisateur de chat simplifiée
pour votre application web ou mobile. Le Merle d’Or UIKit facilite la mise en œuvre d’une interface utilisateur de chat intuitive. Le site Sendbird UIKit pour React fournit les ressources nécessaires pour créer une expérience de chat fonctionnelle et attrayante à l’aide de composants d’interface utilisateur prédéfinis issus du SDK Sendbird. L’UIKit pour React est utile car il est essentiel que les développeurs puissent sélectionner les éléments nécessaires à la construction d’un chat riche en fonctionnalités et simplifié tel que vous l’envisagez.

Dans ce blog, nous allons découvrir les composants du Sendbird UIKit for React, ainsi que chacun de leurs cas d’utilisation. À la fin de ce blog, vous comprendrez comment mettre en œuvre ces composants pour créer votre propre intégration personnalisée.

UIKit pour React : Mise en place de l’environnement

Pour commencer, créez une application sur le
tableau de bord de Sendbird
. C’est ici que vous pouvez accéder à tout ce qui est nécessaire à votre service de chat, y compris vos applications, vos utilisateurs, vos messages et vos canaux. Une fois que vous aurez créé une application, vous aurez besoin de l’App ID pour initialiser le Chat SDK.

Ensuite, créez un nouvel environnement de projet en utilisant create-react-app. Ajoutez ensuite un fichier .env pour stocker l’identifiant de l’application, l’identifiant de l’utilisateur et le surnom qui ont été générés à partir de votre tableau de bord Sendbird. Maintenant, installez Sendbird UIKit via npm ou yarn :

Une fois l’UIKit pour React installé, nous voulons l’implémenter dans l’application en utilisant des composants. Le premier que nous allons découvrir est le composant App.

Composant de l’application

Le composant App est un ensemble de composants d’interface utilisateur qui créent une interface de chat fonctionnelle. App, ou le composant App, rendra une vue contenant une liste de canaux, une conversation de canaux et des paramètres de canaux, le tout dans un seul composant.

Pour l’utiliser, importez le composant UIKit SendbirdApp et la feuille de style UIKit dans le fichier App.js :

 

Le composant App nécessite la transmission d’un ID d’application et d’un ID d’utilisateur. Le code suivant montre comment utiliser le composant App :

Ensuite, spécifiez la hauteur et la largeur de l’interface de chat dans la feuille de style :

Assurez-vous d’importer cette feuille de style dans le fichier App.js.

À ce stade, nous disposons d’une application de chat fonctionnant avec succès, dans laquelle vous pouvez créer un nouveau canal et envoyer des messages. Il devrait ressembler à ceci :

Une application de chat réussie

Si vous souhaitez personnaliser votre expérience de chat, vous pouvez le faire en utilisant les composants et modules de base fournis par UIKit. Tout d’abord, plongeons dans les composants de base.

Composants de base de l’UIKit pour React

Les composants de base sont les principaux éléments constitutifs de UIKit. Les composants de base comprennent SendbirdProvider, sendbirdSelectors, userSendbirdStateContext et withSenbird(). Chacun d’entre eux stocke et exploite toutes les données nécessaires à l’exécution d’une application.

Comment fonctionnent les composants de base ? Ils obtiennent des données de l’instance Chat SDK, se connectent au serveur Sendbird, communiquent avec les modules pour les événements se produisant dans la vue, et configurent les fonctionnalités et la localisation. Ces composants permettent de créer et d’exécuter des vues, mais ils ne fournissent ni n’affichent d’interface utilisateur. C’est là que les modules entrent en jeu : les modules fournissent une vue de l’interface utilisateur pour le composant central utilisé.

Le site
SendbirdProvider
est le composant central le plus important car il fournit le contexte et transmet les données du SDK de Chat ainsi que l’état actuel à tous les composants enfants. Le SendbirdProvider doit se trouver au niveau supérieur afin que l’ensemble de l’application ait accès aux données Sendbird.

Avec SendbirdProvider, nous sommes en mesure d’utiliser la méthode
useSendbirdStateContext()
pour implémenter le SDK Sendbird Chat pour Javascript dans les composants enfants de SendbirdProvider. Le composant useSendbirdStateContext nous permettra d’accéder à l’état de SendbirdProvider, de nous connecter aux actions du SDK, et peut être utilisé avec sendbirdSelectors pour mettre en œuvre des fonctionnalités comme l’envoi ou la mise à jour d’un message.

Avant la v4 de UIKit, la fonction
withSendbird()
était utilisé pour passer les données entre le SDK de Chat et les modules, mais avec la mise à jour de UIKit, nous vous recommandons d’utiliser plutôt withSendbirdStateContext().

Enfin, les
sendbirdSelectors
sont utilisés pour effectuer des opérations sur les données et vous donnent accès au SDK. Le site
Fonctions principales du sélecteur
incluent getSdk, getCreateOpenChannel, et getDeleteMessage.

Manipulateurs

UIKit fournit divers gestionnaires d’événements pour gérer les activités et les événements qui se produisent dans l’application cliente. Depuis la mise à niveau de la v3 à la v4 dans le cadre de la
SDK de chat
implémentation de UIKit
gestionnaires d’événements de canal
qui peut être importé au lieu d’appeler le gestionnaire de canal depuis la sdkInstance. Les gestionnaires d’événements de canal comprennent ConnectionHandler, GroupChannelHandler, OpenChannelHandler et UserEventHandler. Ensuite, le SDK utilise gestionnaires de session pour renouveler un jeton de session. Un jeton de session est utilisé pour authentifier de manière sécurisée un utilisateur lorsque le Chat SDK connecte l’utilisateur au serveur Sendbird où il peut lui envoyer des demandes de données avant que le jeton n’expire.

Modules de l’UIKit pour React

Maintenant que nous avons appris à connaître les composants de base de UIKit, il est important d’apprendre les modules et la façon dont chaque module fonctionne en conjonction avec les composants de base. Modules fonctionnent comme des composants intelligents qui offrent une interface utilisateur personnalisable. Ces modules contiennent des fournisseurs et des composants d’interface utilisateur préconstruits qui créent une vue fonctionnelle du chat.

Les huit modules de UIKit sont :

  1. Liste des chaînes
  2. Créer un canal
  3. Canal de groupe
  4. Paramètres des canaux de groupe
  5. Canal ouvert
  6. Paramètres des canaux ouverts
  7. Recherche de messages
  8. Modifier le profil de l’utilisateur

Chaque module possède un fournisseur de contexte et un ensemble de composants d’interface utilisateur. Le fournisseur gère les données nécessaires à partir du Chat SDK tandis que les composants de l’interface utilisateur rendent les interfaces pour afficher la vue du module. Pour transmettre les données entre le fournisseur et les composants de l’interface utilisateur, nous utilisons un hook useContext. Les hooks de contexte doivent se trouver à l’intérieur du fournisseur afin de permettre à chaque composant de l’interface utilisateur d’avoir accès aux données du fournisseur. Bien qu’il existe un ensemble de composants d’interface utilisateur par défaut pour chaque module, tous les composants d’interface utilisateur sont personnalisables en définissant les props d’entrée avec des composants personnalisés.

Liste des canaux

Le site
ChannelList
affiche une liste des canaux de groupe dont l’utilisateur actuel est membre. Parmi les propriétés de la liste de canaux, citons onBeforeCreateChannel, onChannelSelect et renderChannelPreview.

Les propriétés onBeforeCreateChannel et onChannelSelect vous permettent d’effectuer des actions lorsque l’utilisateur interagit avec l’interface utilisateur de UIKit. La propriété renderChannelPreview vous permet de remplacer l’interface utilisateur par défaut de l’aperçu du canal par votre propre composant personnalisé. Ceci peut être utilisé pour configurer la prévisualisation des chaînes afin que le surnom de l’utilisateur soit simplement affiché dans la liste des chaînes.

Le fournisseur de contexte utilisé pour ce module est le
ChannelListProvider
. Ce fournisseur gère la logique et les données utilisées dans la vue de la liste des canaux. Ainsi, si votre application ne nécessite que l’affichage d’une liste de chaînes, vous pouvez utiliser le module ChannelList pour afficher la vue d’une liste de chaînes et avoir ce module enveloppé dans le ChannelListProvider, qui transmettra toutes les données nécessaires à la ChannelList.

Vous pouvez également utiliser la fonction
useChannelListContext
pour avoir accès aux données du fournisseur. Certaines des propriétés de useChannelListContext sont initialized, loading, et currentChannel.

Les composants de l’interface utilisateur qui composent la vue ChannelList sont ChannelListUI, ChannelListHeader et ChannelPreview. Le site ChannelListUI montre l’écran de base du module, y compris les en-têtes et l’aperçu des canaux. Il comprend une liste de propriétés à utiliser telles que renderHeader, renderPlaceHolderError et renderPlaceHolderLoading. Le site ChannelListHeader est l’en-tête de ChannelListUI qui affiche le titre et un bouton pour créer un nouveau canal. Trois propriétés à utiliser avec cette interface utilisateur sont renderHeader, renderIconButton et allowProfileEdit. Le site ChannelPreview Le composant UI affiche un seul canal dans la liste des canaux. Les propriétés de ChannelPreview sont channel, onClick, renderChannelAction et isActive.

Voici comment vous pouvez mettre en œuvre la liste de canaux en utilisant le ChannelListProvider et useChannelListContext :

Il s’agit de la conception par défaut du composant ChannelList :

Interface utilisateur par défaut du composant ChannelList

CreateChannel

Le site
CreateChannel
est utilisé pour créer un nouveau canal de groupe. CreateChannel exige que la propriété channelUrl lui soit passée. Les propriétés facultatives supplémentaires comprennent onBeforeCreateChannel, onCreateChannel et onCancel. Ces trois propriétés s’exécutent sur certaines actions dans l’interface utilisateur de UIKit, ce qui vous permet de passer et d’exécuter votre propre ensemble d’opérations.

Par exemple, vous pouvez utiliser onBeforeCreateChannel pour déclencher une fonction à appeler lorsque l’utilisateur clique pour créer un canal de groupe et avant de générer un nouveau canal. La fonction appelée, par exemple, pourrait définir l’image du groupe pour le canal en cours de création. L’utilisation de la propriété onCreateChannel vous permettra de mettre en œuvre une action juste après la création du canal. Vous pouvez l’utiliser pour afficher un message de réussite à l’écran une fois que votre canal est créé. Si vous souhaitez déclencher un événement lorsque vous cliquez sur le bouton « Annuler », vous pouvez utiliser la propriété onCancel. Vous pouvez choisir d’implémenter votre propre interface utilisateur personnalisée à partir d’ici et appeler une fonction pour rendre une vue demandant si vous êtes sûr de vouloir annuler la création du canal.

Les deux objets de contexte qui peuvent être utilisés pour créer un canal de groupe et transmettre les données du fournisseur aux composants de l’interface utilisateur sont les suivants
CreateChannelProvider
et
useCreateChannel
crochet. CreateChannelProvider requiert que la propriété channelUrl soit passée. Les propriétés facultatives supplémentaires sont children, onCreateChannel, onBeforeCreateChannel et queries.applicationUserListQuery.

Les composants de l’interface utilisateur qui composent la vue CreateChannel sont CreateChannelUI, InviteMembers et SelectChannelType. CreateChannelUI et SelectChannelType sont utilisés ensemble pour montrer la première étape du module CreateChannel. InviteMembers affiche la deuxième étape après la création du canal.
CreateChannelUI
possède les propriétés onCancel et renderStepOne.
SelectChannelType
rend la vue où l’utilisateur actuel peut choisir le type de canal à créer.
InviteUsers
affiche une vue où l’utilisateur actuel peut inviter d’autres utilisateurs à rejoindre le canal. SelectChannelType et InviteMembers ont tous deux une propriété onCancel.

Le code suivant montre comment utiliser le module CreateChannel avec le crochet CreateChannelProvider et useCreateChannel :

Vous trouverez ci-dessous la présentation par défaut du module CreateChannel :

Créer un nouveau canal

Ajouter des utilisateurs à un nouveau canal

Canal

Le site
Channel
Le module affiche une conversation de groupe. Les utilisateurs ne peuvent accéder à un canal de groupe que s’ils sont invités à être membre du canal. Ce module exige que la propriété channelUrl soit définie. Les autres propriétés facultatives sont isReactionEnabled, showSearchIcon et onBeforeSendUserMessage.

Les propriétés isReactionEnabled et showSearchIcon contrôlent si la fonction est utilisée et affichée ou non. La propriété onBeforeSendUserMessage peut être utilisée pour exécuter une logique personnalisée en arrière-plan lorsque l’utilisateur clique pour envoyer un message, mais terminer les opérations avant que le message ne soit envoyé au canal. Par conséquent, au clic d’envoi d’un message, il déclenchera la fonction que vous lui passez pour effectuer une action, puis envoyer le message. Cela peut être utile dans le cas où vous souhaitez vérifier le texte du message envoyé et, s’il contient un mot spécifique, déclencher une animation lorsque le message est envoyé.

Les deux objets de contexte utilisés pour stocker et gérer les données utilisées pour construire un canal de groupe sont le
ChannelProvider
et
useChannelContext
crochet. Le ChannelProvider nécessite une propriété channelUrl et comprend des propriétés supplémentaires telles que isMessageGroupingEnabled, isReactionEnabled et highlightedMessage. Les propriétés facultatives du crochet contextuel useChannelContext comprennent channelUrl, startingPoint et onBeforeSendFileMessage.

Les composants de l’interface utilisateur du module Channel sont ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator et UnreadCount. CanalUI affiche l’écran de base du module et possède un certain nombre de propriétés telles que renderPlaceholderLoader, renderMessageInput et renderTypingIndicator. ChannelHeader est l’en-tête du composant ChannelUI qui affiche le titre du canal, une icône de recherche de messages et une icône d’information sur le canal. MessageInput est le composant dans lequel les utilisateurs peuvent saisir un message ou envoyer un message de fichier.

Liste de messages affiche une liste de tous les messages dans un canal de groupe et possède trois propriétés : renderMessage, renderPlaceholderEmpty, et renderCustomSeperator. FileViewer affiche tous les messages contenant des fichiers image ou vidéo et possède deux propriétés facultatives : onCancel et message. Notification de gel est un composant qui affiche une bannière avertissant les utilisateurs que le canal actuel est gelé. Message est un composant de la liste des messages qui affiche un seul message dans le canal. Il requiert une propriété de message et possède des propriétés facultatives supplémentaires telles que hasSeperator, chainTop et renderEditInput.
RemoveMessageModal
affiche une modale confirmant que le message sélectionné sera supprimé du canal et possède deux propriétés facultatives : onCancel et message.
TypingIndicator
affiche quel membre du canal est en train de taper activement un message. Et enfin, UnreadCount affiche le nombre de messages non lus dans un canal. Les propriétés de UnreadCount sont : count, time et onClick.

Le code suivant montre comment implémenter le module Channel en utilisant le ChannelProvider et useChannelContext :

Il s’agit de la disposition par défaut du composant Canal :

La disposition des composants du canal

ChannelSettings

Le site
ChannelSettings
affiche un menu d’informations sur les canaux de groupe et les options de réglage. Les membres peuvent consulter la liste des membres, inviter un utilisateur sur le canal et quitter le canal. Si l’utilisateur est un opérateur de canal, il disposera d’options supplémentaires (dans les paramètres), comme la possibilité d’ajouter ou de supprimer des opérateurs, de mettre en sourdine ou de bannir des membres, de voir une liste des utilisateurs mis en sourdine et bannis, et de quitter ou de geler le canal.

Le ChannelSettings nécessite une propriété channelUrl et possède des propriétés facultatives telles que onCloseClick, onChannelModified et renderLeaveChannel. Les propriétés onCloseClick et onChannelModified sont déclenchées par un événement provenant de l’interface utilisateur elle-même et exécutent la logique personnalisée que vous leur transmettez. Vous pouvez utiliser onCloseClick dans le cas où un utilisateur clique sur le bouton pour fermer la barre de paramètres. Vous pouvez lui passer une fonction où vous voulez modifier l’interface utilisateur pour ne pas afficher le composant des paramètres. Si vous souhaitez déclencher un événement une fois les paramètres modifiés, vous pouvez afficher un message de réussite à l’écran en utilisant la propriété onChannelModified. Lorsque vous utilisez ChannelSettings, vous pouvez modifier le design du bouton « quitter le canal ». Vous pouvez le faire en utilisant la propriété renderLeaveChannel avec laquelle vous pouvez transmettre votre propre interface utilisateur personnalisée au module de configuration.

Les deux objets de contexte pour construire un menu de paramètres de canal pour ce module sont le ChannelSettingsProvider et useChannelSettingsContext. Le site ChannelSettingsProvider nécessite le passage d’un channelUrl. D’autres options pour ce fournisseur sont onCloseClick, onBeforeUpdateChannel et invalidChannel. Le site
useChannelSettingsContext
possède plusieurs propriétés qui peuvent être utilisées, telles que onCloseClick, onChannelModified et onBeforeUpdateChannel.

L’ensemble des composants de l’interface utilisateur de ChannelSettings qui composent la vue des paramètres du groupe de canaux sont ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel et UserListItem. ChannelSettingsUI affiche la vue qui comprend la vue du profil du canal, la vue du menu de modération et le bouton quitter le canal. Ce composant possède quatre propriétés facultatives : renderPlaceHolderError, renderChannelProfile, renderModerationPanel et renderLeaveChannel. Le site Panneau de modération crée la vue du menu des paramètres pour les opérateurs de canaux. Cela comprend une liste d’opérateurs, de membres, d’utilisateurs en sourdine et bannis, un bouton de gel du canal et l’option de quitter le canal. Le site Panneau de l’utilisateur crée la vue du menu des paramètres pour les membres du canal qui comprend une liste des membres, une option pour inviter d’autres utilisateurs au canal, et une option pour quitter le canal. Le site
ChannelProfile
crée la vue du profil du canal comprenant le titre du canal, l’image et le bouton d’édition permettant aux utilisateurs de modifier les informations du canal.
EditDetailsModal
affiche une modale où les utilisateurs peuvent modifier le nom du canal et l’image de profil. Il possède deux propriétés facultatives qui peuvent être utilisées : onSubmit et onCancel. Le site LeaveChannel s’affiche lorsqu’un utilisateur clique pour quitter le canal dans le menu des paramètres et lui demande de confirmer cette action. LeaveChannel possède une propriété onSubmit et onCancel qui peuvent être utilisées avec lui. Le site UserListItem affiche un utilisateur individuel dans une liste d’utilisateurs. Ce composant nécessite la définition d’une propriété utilisateur et possède trois propriétés facultatives : currentUser, className et action.

Voici comment mettre en œuvre le module ChannelSettings à l’aide de ChannelSettingsProvider et de useChannelSettingsContext :

C’est l’interface utilisateur par défaut du ChannelSetting pour les non-opérateurs :

Paramètres de canal par défaut UI

Il s’agit des paramètres des canaux qui seront affichés pour les opérateurs de canaux :

Interface utilisateur des paramètres des canaux pour les opérateurs de canaux

OpenChannel

Un canal ouvert est un canal public qui peut gérer un grand nombre d’utilisateurs interagissant dans un chat. Le site
OpenChannel
requiert une propriété channelUrl et possède une série de propriétés optionnelles telles que children, isMessageGroupingEnabled, messageLimit, et renderUserProfile.

La propriété children montre les composants enfants de l’OpenChannel, qui sont des données fournies par l’OpenChannelProvider. La propriété isMessageGroupingEnabled vérifie si la fonction est activée afin de savoir comment afficher l’interface utilisateur. Si le regroupement des messages est activé, chaque message envoyé dans un délai d’une minute sera regroupé en un seul message. La propriété messageLimit indique le nombre maximal de messages qui seront stockés dans le composant OpenChannelMessageList du canal. Si vous souhaitez personnaliser l’aperçu du profil lorsque vous cliquez sur l’avatar d’un utilisateur, vous pouvez intégrer votre propre composant d’interface utilisateur en utilisant la propriété renderUserProfile pour remplacer la conception par défaut.

Les objets de contexte qui peuvent être utilisés par le module OpenChannel pour stocker et traiter les données sont le crochet OpenChannelProvider et useOpenChannel. Le site OpenChannelProvider exige que la propriété channelUrl soit définie. Parmi les propriétés facultatives figurent isMessageGroupingEnabled, messageLimit et onChatHeaderActionClick. Le site
useOpenChannelContext
possède un certain nombre de propriétés qui peuvent être utilisées, telles que renderUserProfile, currentOpenChannel et allMessages.

L’ensemble des composants de l’interface utilisateur qui constituent le module OpenChannel sont OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList et OpenChannelMessage. OpenChannelUI affiche l’écran de base du module et la vue de l’en-tête, du message et de la liste des messages dans un canal ouvert. OpenChannelUI possède une liste de propriétés facultatives telles que renderMessage, renderHeader et renderInput.
OpenChannelHeader
rend le titre du canal et l’icône d’information.
OpenChannelInput
est l’endroit où les utilisateurs peuvent envoyer un message ou un fichier comme une image, une vidéo ou un document. Le site OpenChannelMessageList affiche une liste de tous les messages dans un canal ouvert. Il possède deux propriétés facultatives : renderMessage et renderPlaceHolderEmptyList. OpenChannelMessage montre le message individuel dans le canal. Ce composant requiert une propriété de message et possède un certain nombre de propriétés facultatives telles que hasSeperator, chainTop et editDisabled.

Vous trouverez ci-dessous comment utiliser le module OpenChannel avec le OpenChannelProvider et le useOpenChannelContext :

Voici à quoi ressemble la conception par défaut de l’OpenChannel :

Interface utilisateur par défaut de l’OpenChannel

OpenChannelSettings

Le site
OpenChannelSettings
présente un menu de paramètres tels que la fourniture du nom du canal, l’image du canal, l’URL de l’application et la liste des participants. Si l’utilisateur actuel est un opérateur, il dispose de paramètres supplémentaires tels que l’ajout ou la suppression d’opérations, l’affichage d’une liste d’utilisateurs en sourdine et bannis, la possibilité de mettre en sourdine ou de bannir des participants, et une option pour supprimer le canal.

OpenChannelSettings nécessite le passage d’une propriété channelUrl. Quelques autres propriétés fournies sont onChannelModified, onDeleteChannel et onCloseClick. Ces propriétés exécutent un ensemble d’opérations lorsque l’utilisateur interagit avec des attributs spécifiques dans l’interface utilisateur. Dans les paramètres du canal ouvert, en utilisant onCloseClick, vous pouvez définir l’état de la barre de paramètres comme étant fermé et supprimer le composant de paramètres de la vue du chat. La même idée s’applique à l’utilisation de onChannelModified et onDeleteChannel. Si l’utilisateur clique pour enregistrer les modifications qu’il a apportées ou s’il clique sur le bouton pour supprimer le canal, vous pouvez modifier l’interface utilisateur de votre application pour faire apparaître un composant personnalisé à l’écran.

Les deux objets contextuels utilisés pour construire un menu de paramètres de canal fonctionnel sont le crochet OpenChannelSettingsProvider et useOpenChannelSettingsContext. Le site OpenChannelSettingsProvider nécessite le passage d’un channelUrl et comprend des propriétés supplémentaires telles que onBeforeUpdateChannel, disableUserProfile et renderUserProfile. Le site
useOpenChannelSettingsContext
possède une liste de propriétés telles que onDeleteChannel, onChanelModified et setChannel.

Le site
composants de l’interface utilisateur
qui composent l’ensemble du module OpenChannelSetting sont OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile et EditDetailsModal.
OpenChannelSettingsUI
affiche l’écran de base du module qui contient l’OperatorUI et le ParticipantUI. Les deux propriétés facultatives de OpenChannelSettingsUI sont renderOperatorUI et renderParticipantList.
OperatorUI
affiche le menu des paramètres pour les opérateurs de canaux et possède une propriété facultative renderChannelProfile.
ParticipantUI
affiche une liste des participants au canal ouvert.
OpenChannelProfile
crée une vue du profil du canal qui affiche le titre et l’image du canal.
EditDetailsModal
apparaît lorsqu’un utilisateur veut modifier le nom du canal et l’image du profil. Il possède une propriété onCancel qui peut être déclenchée lorsque le bouton d’annulation est cliqué.

Le code suivant montre comment utiliser le module OpenChannelSettings avec le OpenChannelSettingsProvider et useOpenChannelSettingsContext :

Voici comment s’affiche l’OpenChannelSettings :

L’interface utilisateur par défaut des paramètres des canaux

MessageSearch

Le site
MessageSearch
permet aux utilisateurs de rechercher des messages dans les canaux dont ils sont membres. Une propriété channelUrl doit être définie pour le MessageSearch. Optionnel supplémentaire
Les propriétés
sont disponibles, telles que onResultLoaded, onResultClick et renderPlaceholderEmptyList.

Lorsque vous utilisez le module MessageSearch, il se peut que vous souhaitiez afficher tous les résultats d’une recherche dans une fenêtre d’interface utilisateur distincte qui s’affiche sous forme de couche contextuelle au-dessus du chat. Vous pouvez le faire en utilisant la propriété onResultLoaded où une fonction est appelée une fois les résultats reçus. En utilisant onResultClick, vous pouvez exécuter une logique personnalisée dès qu’un utilisateur sélectionne un résultat de recherche. La propriété renderPlaceholderEmptyList vous permet de créer une interface utilisateur personnalisée pour l’espace réservé lorsque la liste de recherche ne contient aucun résultat. Ainsi, lorsque la liste de recherche n’a rien à afficher, vous pouvez faire apparaître une notification.

Pour MessageSearch, vous pouvez utiliser MessageSearchProvider et le hook useMessageSearch pour stocker et gérer les données utilisées pour construire une interface utilisateur de recherche de messages. MessageSearchProvider nécessite la spécification d’un channelUrl et possède des propriétés facultatives supplémentaires telles que onResultClick, messageSearchQuery et onResultLoaded. Le site
useMessageSearchContext
possède un certain nombre de propriétés facultatives telles que onResultLoaded, requestString et selectedMessageId.

Le site
MessageSearchUI
est le seul composant de l’interface utilisateur dans le module MessageSearch et affiche la vue des résultats de la recherche.

Voici comment mettre en œuvre le MessageSearch en utilisant MessageSearchProvider et useMessageSearchContext :

L’interface utilisateur par défaut du module MessageSearch ressemble à ceci :

L’interface utilisateur par défaut de MessageSearch

EditUserProfile

Le site
EditUserProfile
permet à l’utilisateur actuel d’apporter des modifications à son profil. En cliquant sur leur propre avatar, une fenêtre pop-up contenant les informations de leur profil apparaît. Ici, les utilisateurs ont la possibilité de modifier leur image de profil, leur surnom, et peuvent basculer le thème en mode clair ou foncé.

EditUserProfile possède 4 propriétés facultatives
propriétés facultatives
qui comprennent les enfants, onCancel, onThemeChange et onEditProfile. La propriété children est utilisée pour voir les composants enfants sur EditUserProfile que EditUserProfileProvider nous fournit. onCancel est utilisé pour exécuter une opération lorsque l’interface utilisateur est déclenchée par un clic de l’utilisateur pour annuler les modifications qu’il a effectuées. Si vous souhaitez ajouter un style supplémentaire selon que le chat est en mode clair ou foncé, vous pouvez utiliser onThemeChange pour appeler une fonction qui met en œuvre un CSS personnalisé lorsqu’un utilisateur clique pour changer de thème. Enfin, onEditProfile vous permet de mettre en œuvre un ensemble d’actions une fois que l’utilisateur a mis à jour son profil.

UIKit fournit
EditUserProfileProvider
et
useEditUserProfileProviderContext
hook comme objets de contexte pour le module EditUserProfile. Ces deux éléments peuvent utiliser les mêmes propriétés facultatives que l’EditUserProfile : children, onCancel, onThemeChange et onEditProfile.

Le seul composant de l’interface utilisateur du module EditUserProfile est le suivant
EditUserProfileUI
qui rend la vue du profil de l’utilisateur.

La conception par défaut de EditUserProfile ressemblera à ceci :

L’interface utilisateur par défaut pour modifier un profil d’utilisateur

Conclusion et prochaines étapes

Nous avons examiné en détail les composants et modules de base que Sendbird UIKit for React nous fournit. Avec cette base solide, nous allons maintenant pouvoir décider quels composants et modules sont nécessaires pour prendre en charge différents cas d’utilisation. À titre d’exemple, consultez notre blog sur comment construire un clone de la messagerie WhatsApp avec Sendbird UIKit pour React. Dans ce blog, vous comprendrez comment créer votre propre expérience de chat personnalisée de type WhatsApp en utilisant les composants et modules de base dont nous avons parlé tout au long de cet article.

Pour plus d’informations, veuillez consulter nos
docs
ou explorer la multitude de
tutoriels UIKit
sur notre
portail des développeurs
l. Si vous avez besoin d’aide avec le
Sendbird UIKit
consultez les
forums de la communauté
ou
contactez-nous
. Nos experts sont toujours prêts à vous aider !

Bonne construction de chat ! ✨

 

Categories: Ingénierie