Technik

Eine Tour durch das Sendbird UIKit für React: Die wichtigsten Komponenten und Module, die Sie kennen müssen

Blog author
Michelle Wong Developer Advocate
Share
Eine Tour durch das Sendbird UIKit für React: Die wichtigsten Komponenten und Module, die Sie kennen müssen

Aufbau eines In-App
Chat
ist ein faszinierendes, aber komplexes Unterfangen. Ob Sie nun für
Spielen
,
Einzelhandel
,
digitale Gesundheit
oder
on-demand
ist es notwendig, eine
optimierte Chat-Benutzeroberfläche
für Ihr Web oder Ihre mobile Anwendung. Der Sendvogel UIKit macht es einfacher, eine intuitive Chat-Benutzeroberfläche zu implementieren. Die Sendbird UIKit für React bietet die Ressourcen, um ein funktionales und attraktives Chat-Erlebnis mit vorgefertigten UI-Komponenten aus dem Sendbird SDK zu erstellen. Das UIKit für React ist nützlich, weil es für Entwickler wichtig ist, die Elemente auszuwählen, die notwendig sind, um einen funktionsreichen, optimierten Chat so zu erstellen, wie Sie ihn sich vorstellen.

In diesem Blog werden wir die Komponenten des Sendbird UIKit für React sowie die einzelnen Anwendungsfälle kennenlernen. Am Ende dieses Blogs werden Sie verstehen, wie Sie diese Komponenten implementieren können, um Ihre eigene benutzerdefinierte Integration zu erstellen.

UIKit für React: Einrichten der Umgebung

Um zu beginnen, erstellen Sie eine Anwendung auf dem
Sendbird-Dashboard
. Hier können Sie auf alles zugreifen, was Sie für Ihren Chatdienst benötigen, einschließlich Ihrer Anwendungen, Benutzer, Nachrichten und Kanäle. Sobald Sie eine Anwendung erstellt haben, benötigen Sie die App ID, um das Chat SDK zu initialisieren.

Als nächstes erstellen Sie eine neue Projektumgebung mit create-react-app. Fügen Sie dann eine .env-Datei hinzu, um die App-ID, die Benutzer-ID und den Spitznamen zu speichern, die von Ihrem Sendbird-Dashboard generiert wurden. Installieren Sie nun Sendbird UIKit über npm oder yarn:

Sobald das UIKit für React installiert ist, wollen wir es mit Hilfe von Komponenten in die Anwendung implementieren. Die erste, die wir kennenlernen werden, ist die Komponente App.

App-Komponente

Die App-Komponente ist eine Sammlung von UI-Komponenten, die eine funktionale Chat-Schnittstelle bilden. App oder der App-Komponente wird eine Ansicht mit einer Kanalliste, einer Kanalunterhaltung und Kanaleinstellungen in einer Komponente dargestellt.

Um dies zu verwenden, importieren Sie die UIKit-Komponente SendbirdApp und das UIKit-Stylesheet in die Datei App.js:

 

Für die App-Komponente müssen eine Anwendungs-ID und eine Benutzer-ID übergeben werden. Der folgende Code zeigt, wie Sie die App-Komponente verwenden können:

Geben Sie dann im Stylesheet die Höhe und Breite für die Chat-Schnittstelle an:

Stellen Sie sicher, dass Sie dieses Stylesheet in die App.js-Datei importieren.

Jetzt haben wir eine erfolgreich laufende Chat-Anwendung, in der Sie einen neuen Kanal erstellen und Nachrichten senden können. Sie sollte folgendermaßen aussehen:

Eine erfolgreiche Chat-Anwendung

Wenn Sie Ihr Chat-Erlebnis anpassen möchten, können Sie dies mit Hilfe der von UIKit bereitgestellten Kernkomponenten und Module tun. Lassen Sie uns zunächst auf die Kernkomponenten eingehen.

Kernkomponenten im UIKit für React

Die Kernkomponenten sind die wichtigsten Bausteine von UIKit. Zu den Kernkomponenten gehören der SendbirdProvider, sendbirdSelectors, userSendbirdStateContext und withSenbird(). Sie speichern und verarbeiten alle Daten, die zur Ausführung einer Anwendung erforderlich sind.

Wie funktionieren die Kernkomponenten? Sie erhalten Daten von der Chat SDK Instanz, verbinden sich mit dem Sendbird Server, sprechen mit den Modulen für Ereignisse in der Ansicht und konfigurieren Features und Lokalisierung. Diese Komponenten dienen zum Erstellen und Ausführen von Ansichten; sie stellen jedoch keine Benutzeroberfläche bereit oder zeigen diese an. Hier kommen die Module ins Spiel: Die Module bieten eine UI-Ansicht für die verwendete Kernkomponente.

Die
SendbirdProvider
ist die wichtigste Kernkomponente, da sie den Kontext liefert und die Chat-SDK-Daten sowie den aktuellen Status an alle untergeordneten Komponenten weitergibt. Der SendbirdProvider muss sich auf der obersten Ebene befinden, damit die gesamte Anwendung Zugriff auf Sendbird-Daten hat.

Mit SendbirdProvider können wir die Funktion
useSendbirdStateContext()
Komponente, um das Sendbird Chat SDK für Javascript in Kindkomponenten von SendbirdProvider zu implementieren. Die useSendbirdStateContext-Komponente ermöglicht den Zugriff auf den Status des SendbirdProviders, die Einbindung in SDK-Aktionen und kann mit sendbirdSelectors verwendet werden, um Funktionalitäten wie das Senden oder Aktualisieren einer Nachricht zu implementieren.

Vor dem UIKit v4 wurde die
withSendbird()
Komponente verwendet, um Daten zwischen dem Chat SDK und den Modulen zu übermitteln, aber mit dem UIKit Update empfehlen wir, stattdessen useSendbirdStateContext() zu verwenden.

Schließlich ist die
sendbirdSelectors
werden zur Durchführung von Datenoperationen verwendet und ermöglichen den Zugang zum SDK. Die
wichtigste Selektorfunktionen
sind getSdk, getCreateOpenChannel und getDeleteMessage.

Handler

UIKit bietet verschiedene Event-Handler zur Verwaltung von Aktivitäten und Ereignissen, die in der Client-App auftreten. Seit dem Upgrade von v3 auf v4 im
Chat SDK
UIKit implementiert
Kanal-Ereignishandler
die importiert werden können, anstatt den Channel-Handler aus der sdkInstance aufzurufen. Zu den Channel-Event-Handlern gehören ConnectionHandler, GroupChannelHandler, OpenChannelHandler und UserEventHandler. Als nächstes verwendet das SDK Session-Handler um ein Sitzungs-Token zu erneuern. Ein Sitzungs-Token wird verwendet, um einen Benutzer sicher zu authentifizieren, wenn das Chat SDK den Benutzer mit dem Sendbird-Server verbindet, wo er Datenanfragen an ihn senden kann, bevor der Token abläuft.

Module im UIKit für React

Nachdem wir nun die Kernkomponenten von UIKit kennengelernt haben, ist es wichtig, etwas über Module zu erfahren und darüber, wie jedes Modul in Verbindung mit den Kernkomponenten funktioniert. Module funktionieren als intelligente Komponenten, die eine anpassbare Benutzeroberfläche bieten. Diese Module enthalten Provider und vorgefertigte UI-Komponenten, die eine funktionale Chat-Ansicht erstellen.

Die acht Module in UIKit sind:

  1. Senderliste
  2. Einen Kanal erstellen
  3. Gruppen-Kanal
  4. Einstellungen für Gruppenkanäle
  5. Offener Kanal
  6. Einstellungen für offene Kanäle
  7. Suche nach Nachrichten
  8. Benutzerprofil bearbeiten

Jedes Modul hat einen Context-Provider und einen Satz von UI-Komponenten. Der Provider verwaltet die erforderlichen Daten aus dem Chat-SDK, während die UI-Komponenten die Schnittstellen zur Anzeige der Ansicht des Moduls darstellen. Um Daten zwischen dem Anbieter und den UI-Komponenten zu übertragen, verwenden wir einen useContext-Hook. Die Context-Hooks müssen sich innerhalb des Providers befinden, damit jede UI-Komponente Zugriff auf die Daten des Providers hat. Es gibt zwar einen Standardsatz von UI-Komponenten für jedes Modul, aber alle UI-Komponenten sind anpassbar, indem die Eingabe-Requisiten mit benutzerdefinierten Komponenten eingestellt werden.

KanalListe

Die
KanalListe
zeigt eine Liste der Gruppenkanäle, in denen der aktuelle Benutzer Mitglied ist. Einige der Eigenschaften der ChannelList sind onBeforeCreateChannel, onChannelSelect und renderChannelPreview.

Die Eigenschaften onBeforeCreateChannel und onChannelSelect ermöglichen es Ihnen, Aktionen durchzuführen, wenn der Benutzer mit der UIKit-Benutzeroberfläche interagiert. Mit der Eigenschaft renderChannelPreview können Sie die Standard-Benutzeroberfläche der Kanalvorschau durch Ihre eigene angepasste Komponente ersetzen. Damit kann die Kanalvorschau so eingestellt werden, dass in der Kanalliste nur der Nickname des Benutzers angezeigt wird.

Der für dieses Modul verwendete Kontextanbieter ist der
ChannelListProvider
. Dieser Anbieter verwaltet die Logik und die Daten, die in der Kanallistenansicht verwendet werden. Wenn Ihre Anwendung also nur eine Kanalliste anzeigen muss, können Sie das Modul ChannelList verwenden, um die Ansicht einer Kanalliste anzuzeigen, und dieses Modul in den ChannelListProvider einbinden, der alle erforderlichen Daten an die ChannelList weitergibt.

Sie können auch die Funktion
useChannelListContext
um Zugang zu den Daten des Anbieters zu erhalten. Einige der Eigenschaften von useChannelListContext sind initialized, loading und currentChannel.

Die UI-Komponenten, aus denen die ChannelList-Ansicht besteht, sind ChannelListUI, ChannelListHeader und ChannelPreview. Die ChannelListUI zeigt den Grundbildschirm des Moduls, einschließlich der Kopfzeilen und der Kanalvorschau. Sie enthält eine Liste der zu verwendenden Eigenschaften wie renderHeader, renderPlaceHolderError und renderPlaceHolderLoading. Die ChannelListHeader ist die Kopfzeile der ChannelListUI, die den Titel und eine Schaltfläche zum Erstellen eines neuen Channels anzeigt. Drei Eigenschaften, die mit dieser Benutzeroberfläche verwendet werden können, sind renderHeader, renderIconButton und allowProfileEdit. Die ChannelPreview Die UI-Komponente zeigt einen einzelnen Kanal in der Kanalliste an. Die Eigenschaften für ChannelPreview sind channel, onClick, renderChannelAction und isActive.

Hier sehen Sie, wie Sie die ChannelList mit dem ChannelListProvider und useChannelListContext implementieren können:

Dies ist das Standarddesign der ChannelList-Komponente:

Standard-UI der ChannelList-Komponente

CreateChannel

Der
CreateChannel
Modul wird verwendet, um einen neuen Gruppenkanal zu erstellen. CreateChannel erfordert die Übergabe der Eigenschaft channelUrl. Weitere optionale Eigenschaften sind onBeforeCreateChannel, onCreateChannel und onCancel. Alle drei Eigenschaften werden bei bestimmten Aktionen innerhalb der UIKit-Benutzeroberfläche ausgeführt, so dass Sie Ihre eigene Reihe von Operationen einfügen und ausführen können.

Sie können beispielsweise onBeforeCreateChannel verwenden, um eine Funktion auszulösen, die aufgerufen wird, wenn der Benutzer klickt, um einen Gruppenkanal zu erstellen, und bevor er einen neuen Kanal erzeugt. Die aufgerufene Funktion könnte z. B. das Gruppenbild für den zu erstellenden Kanal festlegen. Mit der Eigenschaft onCreateChannel können Sie eine Aktion implementieren, nachdem der Kanal erstellt wurde. Sie können dies verwenden, um eine Erfolgsmeldung auf den Bildschirm zu bringen, sobald Ihr Kanal erstellt ist. Wenn Sie ein Ereignis auslösen möchten, wenn die Schaltfläche „Abbrechen“ angeklickt wird, können Sie die Eigenschaft onCancel verwenden. Sie können von hier aus Ihre eigene benutzerdefinierte Benutzeroberfläche implementieren und eine Funktion aufrufen, um eine Ansicht zu rendern, in der Sie gefragt werden, ob Sie die Erstellung des Kanals wirklich abbrechen möchten.

Die beiden Kontextobjekte, die verwendet werden können, um einen Gruppenkanal zu erstellen und Daten vom Provider an die UI-Komponenten zu übergeben, sind die
CreateChannelProvider
und
useCreateChannel
Haken. CreateChannelProvider erfordert die Übergabe der Eigenschaft channelUrl. Weitere optionale Eigenschaften sind children, onCreateChannel, onBeforeCreateChannel und queries.applicationUserListQuery.

Die Benutzeroberflächenkomponenten, aus denen die Ansicht CreateChannel besteht, sind CreateChannelUI, InviteMembers und SelectChannelType. CreateChannelUI und SelectChannelType werden zusammen verwendet, um den ersten Schritt des CreateChannel-Moduls zu zeigen. InviteMembers zeigt den zweiten Schritt an, nachdem der Kanal erstellt wurde.
CreateChannelUI
hat die Eigenschaften onCancel und renderStepOne.
SelectChannelType
rendert die Ansicht, in der der aktuelle Benutzer auswählen kann, welche Art von Kanal er erstellen möchte.
InviteUsers
zeigt eine Ansicht an, in der der aktuelle Benutzer andere Benutzer einladen kann, dem Kanal beizutreten. Sowohl SelectChannelType als auch InviteMembers haben eine onCancel-Eigenschaft.

Der folgende Code zeigt, wie das CreateChannel-Modul mit dem CreateChannelProvider und dem useCreateChannel-Hook verwendet werden kann:

Nachfolgend sehen Sie das Standardlayout des CreateChannel-Moduls:

Einen neuen Kanal erstellen

Hinzufügen von Benutzern zu einem neuen Kanal

Kanal

Der
Kanal
Modul zeigt eine Unterhaltung in einem Gruppenkanal an. Benutzer können nur dann auf einen Gruppenchannel zugreifen, wenn sie als Mitglied in den Channel eingeladen wurden. Für dieses Modul muss eine channelUrl-Eigenschaft festgelegt werden. Weitere optionale Eigenschaften sind isReactionEnabled, showSearchIcon und onBeforeSendUserMessage.

Die Eigenschaften isReactionEnabled und showSearchIcon steuern, ob die Funktion verwendet und angezeigt wird oder nicht. Die Eigenschaft onBeforeSendUserMessage kann verwendet werden, um benutzerdefinierte Logik im Hintergrund auszuführen, wenn der Benutzer klickt, um eine Nachricht zu senden, aber die Operationen abzuschließen, bevor die Nachricht an den Kanal gesendet wird. Wenn Sie also auf das Senden einer Nachricht klicken, wird die Funktion, die Sie übergeben, ausgelöst, um eine Aktion auszuführen und dann die Nachricht zu senden. Dies kann nützlich sein, wenn Sie den Text der zu versendenden Nachricht überprüfen und, wenn er ein bestimmtes Wort enthält, eine Animation auslösen möchten, während die Nachricht versendet wird.

Die beiden Kontextobjekte, die zum Speichern und Verwalten der Daten für den Aufbau eines Gruppenkanals verwendet werden, sind die
ChannelProvider
und
useChannelContext
Haken. Der ChannelProvider erfordert eine channelUrl-Eigenschaft und umfasst zusätzliche Eigenschaften wie isMessageGroupingEnabled, isReactionEnabled und highlightedMessage. Zu den optionalen Eigenschaften des UseChannelContext-Konthooks gehören channelUrl, startingPoint und onBeforeSendFileMessage.

Die UI-Komponenten im Channel-Modul sind ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator und UnreadCount. KanalUI zeigt den Grundbildschirm des Moduls an und hat eine Reihe von Eigenschaften wie renderPlaceholderLoader, renderMessageInput und renderTypingIndicator. ChannelHeader ist die Kopfzeile der ChannelUI-Komponente, die den Channel-Titel, ein Symbol für die Nachrichtensuche und ein Symbol für Channel-Informationen anzeigt. MessageInput ist die Komponente, in der Benutzer eine Nachricht eingeben oder eine Dateinachricht senden können.

NachrichtenListe zeigt eine Liste aller Nachrichten in einem Gruppenkanal an und hat drei Eigenschaften: renderMessage, renderPlaceholderEmpty und renderCustomSeperator. FileViewer zeigt alle Nachrichten an, die Bild- oder Videodateien enthalten, und hat zwei optionale Eigenschaften: onCancel und message. FrozenNotification ist eine Komponente, die ein Banner anzeigt, das die Benutzer darauf hinweist, dass der aktuelle Kanal eingefroren ist. Nachricht ist eine Komponente innerhalb der MessageList, die eine einzelne Nachricht im Kanal anzeigt. Sie erfordert eine Nachrichteneigenschaft und hat zusätzliche optionale Eigenschaften wie hasSeperator, chainTop und renderEditInput.
RemoveMessageModal
zeigt ein Modal an, das bestätigt, dass die ausgewählte Nachricht aus dem Kanal gelöscht wird, und hat zwei optionale Eigenschaften: onCancel und message.
TypingIndicator
zeigt an, welches Mitglied im Kanal gerade aktiv eine Nachricht schreibt. Und zu guter Letzt, UnreadCount zeigt an, wie viele ungelesene Nachrichten sich in einem Kanal befinden. Die Eigenschaften von UnreadCount sind count, time und onClick.

Der folgende Code zeigt, wie das Channel-Modul mit dem ChannelProvider und useChannelContext implementiert wird:

Dies ist das Standardlayout der Kanalkomponente:

Das Layout der Kanalkomponenten

ChannelSettings

Die
ChannelSettings
Modul zeigt ein Menü mit Informationen und Einstellungsmöglichkeiten für Gruppenkanäle an. Mitglieder können eine Mitgliederliste auschecken, einen Benutzer in den Kanal einladen und den Kanal verlassen. Wenn der Benutzer ein Kanalbetreiber ist, stehen ihm (in den Einstellungen) zusätzliche Optionen zur Verfügung, z. B. die Möglichkeit, Betreiber hinzuzufügen oder zu entfernen, Mitglieder stummzuschalten oder zu sperren, eine Liste der stummgeschalteten und gesperrten Benutzer anzuzeigen und den Kanal zu verlassen oder einzufrieren.

Die ChannelSettings erfordern eine channelUrl-Eigenschaft und haben optionale Eigenschaften wie onCloseClick, onChannelModified und renderLeaveChannel. Die Eigenschaften onCloseClick und onChannelModified werden durch ein Ereignis ausgelöst, das von der Benutzeroberfläche selbst ausgelöst wird, und führen die von Ihnen übergebene benutzerdefinierte Logik aus. Sie können onCloseClick für den Fall verwenden, dass ein Benutzer auf die Schaltfläche klickt, um die Einstellungsleiste zu schließen. Sie können ihm eine Funktion übergeben, mit der Sie die Benutzeroberfläche so ändern können, dass die Einstellungskomponente nicht angezeigt wird. Wenn Sie ein Ereignis auslösen möchten, sobald die Einstellungen geändert wurden, können Sie eine Erfolgsmeldung auf dem Bildschirm ausgeben, indem Sie die Eigenschaft onChannelModified verwenden. Wenn Sie ChannelSettings verwenden, möchten Sie vielleicht das Design der Schaltfläche „Kanal verlassen“ ändern. Sie können dazu die Eigenschaft renderLeaveChannel verwenden, mit der Sie Ihre eigene benutzerdefinierte Benutzeroberfläche an das Einstellungsmodul übergeben können.

Die beiden Kontextobjekte zur Erstellung eines Kanaleinstellungsmenüs für dieses Modul sind der ChannelSettingsProvider und useChannelSettingsContext. Die ChannelSettingsProvider erfordert die Übergabe einer channelUrl. Einige andere Optionen für diesen Anbieter sind onCloseClick, onBeforeUpdateChannel und invalidChannel. Die
useChannelSettingsContext
Haken hat mehrere Eigenschaften, die verwendet werden können, wie onCloseClick, onChannelModified und onBeforeUpdateChannel.

Der ChannelSettings-Satz von Benutzeroberflächenkomponenten, aus denen die Ansicht der Gruppen-Channel-Einstellungen besteht, sind ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel und UserListItem. ChannelSettingsUI zeigt die Ansicht an, die die Kanalprofilansicht, die Ansicht des Moderationsmenüs und die Schaltfläche Kanal verlassen enthält. Die Komponente hat vier optionale Eigenschaften: renderPlaceHolderError, renderChannelProfile, renderModerationPanel und renderLeaveChannel. Die ModerationPanel erstellt die Ansicht des Einstellungsmenüs für Kanalbetreiber. Dazu gehören eine Liste der Betreiber, Mitglieder, stummgeschalteten und gesperrten Benutzer, eine Schaltfläche zum Einfrieren des Kanals und die Möglichkeit, den Kanal zu verlassen. Die UserPanel Komponente erstellt die Ansicht des Einstellungsmenüs für Kanalmitglieder, die eine Liste der Mitglieder, eine Option zum Einladen anderer Benutzer in den Kanal und eine Option zum Verlassen des Kanals enthält. Die
KanalProfil
Komponente erstellt die Ansicht des Kanalprofils einschließlich des Kanaltitels, des Bildes und der Schaltfläche „Bearbeiten“, mit der die Benutzer die Kanalinformationen ändern können.
EditDetailsModal
zeigt ein Modal an, in dem Benutzer den Kanalnamen und das Profilbild bearbeiten können. Sie hat zwei optionale Eigenschaften, die verwendet werden können: onSubmit und onCancel. Die LeaveChannel wird angezeigt, wenn ein Benutzer im Einstellungsmenü auf den Kanal klickt, um ihn zu verlassen, und der Benutzer wird aufgefordert, diese Aktion zu bestätigen. LeaveChannel hat eine onSubmit- und eine onCancel-Eigenschaft, die mit ihm verwendet werden können. Die UserListItem zeigt einen einzelnen Benutzer innerhalb einer Benutzerliste an. Für diese Komponente muss eine Benutzereigenschaft festgelegt werden, und sie hat drei optionale Eigenschaften: currentUser, className und action.

So implementieren Sie das ChannelSettings-Modul mit dem ChannelSettingsProvider und useChannelSettingsContext:

Dies ist die Standard-Benutzeroberfläche von ChannelSetting für Nicht-Operatoren:

Standard-Kanaleinstellungen UI

Dies sind die Kanaleinstellungen, die für Kanalbetreiber angezeigt werden:

Kanaleinstellungen UI für Kanalbetreiber

OpenChannel

Ein offener Kanal ist ein öffentlicher Kanal, in dem eine große Anzahl von Nutzern in einem Chat interagieren kann. Die
OpenChannel
Modul erfordert eine channelUrl-Eigenschaft und verfügt über eine Reihe von optionalen Eigenschaften wie children, isMessageGroupingEnabled, messageLimit und renderUserProfile.

Die Eigenschaft children zeigt die untergeordneten Komponenten des OpenChannel an, d. h. die vom OpenChannelProvider bereitgestellten Daten. Die Eigenschaft isMessageGroupingEnabled prüft, ob die Funktion aktiviert ist, damit sie weiß, wie die Benutzeroberfläche angezeigt werden soll. Wenn die Nachrichtengruppierung aktiviert ist, werden alle Nachrichten, die innerhalb einer Minute gesendet werden, zu einer Nachricht gruppiert. Die Eigenschaft messageLimit gibt die maximale Anzahl der Nachrichten an, die in der Komponente OpenChannelMessageList des Kanals gespeichert werden. Wenn Sie die Profilvorschau beim Anklicken des Avatars eines Benutzers anpassen möchten, können Sie Ihre eigene UI-Komponente mit Hilfe der Eigenschaft renderUserProfile übergeben, um das Standarddesign zu überschreiben.

Die Kontextobjekte, die für das OpenChannel-Modul zum Speichern und Verarbeiten von Daten verwendet werden können, sind der OpenChannelProvider und der useOpenChannel-Hook. Die OpenChannelProvider muss eine channelUrl-Eigenschaft festgelegt werden. Einige optionale Eigenschaften sind isMessageGroupingEnabled, messageLimit und onChatHeaderActionClick. Die
useOpenChannelContext
hat eine Reihe von Eigenschaften, die genutzt werden können, wie renderUserProfile, currentOpenChannel und allMessages.

Die Oberflächenkomponenten, aus denen das OpenChannel-Modul besteht, sind OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList und OpenChannelMessage. OpenChannelUI zeigt das Grundbild des Moduls und die Ansicht des Headers, der Nachricht und der Nachrichtenliste in einem offenen Kanal. OpenChannelUI hat eine Liste von optionalen Eigenschaften wie renderMessage, renderHeader und renderInput.
OpenChannelHeader
rendert den Kanaltitel und das Informationssymbol.
OpenChannelInput
können die Benutzer eine Nachricht oder eine Dateinachricht wie ein Bild, ein Video oder ein Dokument senden. Die OpenChannelMessageList zeigt eine Liste aller Nachrichten in einem offenen Kanal an. Sie hat zwei optionale Eigenschaften: renderMessage und renderPlaceHolderEmptyList. OpenChannelMessage zeigt die einzelne Nachricht im Kanal an. Diese Komponente erfordert eine Nachrichteneigenschaft und hat eine Reihe von optionalen Eigenschaften wie hasSeperator, chainTop und editDisabled.

Im Folgenden wird beschrieben, wie Sie das OpenChannel-Modul mit dem OpenChannelProvider und useOpenChannelContext verwenden:

So sieht das Standarddesign des OpenChannel aus:

Standard-Benutzeroberfläche des OpenChannel

OpenChannelSettings

Die
OpenChannelSettings
Modul zeigt ein Menü mit Einstellungen, wie z. B. die Angabe des Kanalnamens, des Bildes des Kanals, der Anwendungs-URL und einer Teilnehmerliste. Wenn der aktuelle Benutzer ein Operator ist, stehen ihm zusätzliche Einstellungen zur Verfügung, z. B. das Hinzufügen oder Entfernen von Operationen, die Anzeige einer Liste stummer und gesperrter Benutzer, die Möglichkeit, Teilnehmer stumm zu schalten oder zu sperren, sowie die Option, den Kanal zu löschen.

Für OpenChannelSettings muss eine channelUrl-Eigenschaft übergeben werden. Einige andere Eigenschaften sind onChannelModified, onDeleteChannel und onCloseClick. Diese Eigenschaften führen eine Reihe von Operationen aus, wenn der Benutzer mit bestimmten Attributen auf der Benutzeroberfläche interagiert. In den Einstellungen des offenen Kanals können Sie mit onCloseClick den Status der Einstellungsleiste auf „geschlossen“ setzen und die Einstellungskomponente aus der Chatansicht entfernen. Wenn der Benutzer auf onChannelModified und onDeleteChannel klickt, um die vorgenommenen Änderungen zu speichern, oder wenn er auf die Schaltfläche zum Löschen des Kanals klickt, können Sie die Benutzeroberfläche in Ihrer Anwendung so ändern, dass eine benutzerdefinierte Komponente auf dem Bildschirm erscheint.

Die beiden Kontextobjekte, die zum Aufbau eines funktionalen Kanaleinstellungsmenüs verwendet werden, sind der OpenChannelSettingsProvider und der useOpenChannelSettingsContext-Hook. Die OpenChannelSettingsProvider erfordert die Übergabe einer channelUrl und umfasst zusätzliche Eigenschaften wie onBeforeUpdateChannel, disableUserProfile und renderUserProfile. Die
useOpenChannelSettingsContext
Haken hat eine Liste von Eigenschaften wie onDeleteChannel, onChanelModified und setChannel.

Die
UI-Komponenten
die das gesamte OpenChannelSetting-Modul bilden, sind OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile und EditDetailsModal.
OpenChannelSettingsUI
zeigt den Grundbildschirm des Moduls an, der die OperatorUI und ParticipantUI enthält. Die beiden optionalen Eigenschaften für OpenChannelSettingsUI sind renderOperatorUI und renderParticipantList.
OperatorUI
zeigt das Einstellungsmenü für Kanalbetreiber und hat eine optionale Eigenschaft renderChannelProfile.
ParticipantUI
zeigt eine Liste der Teilnehmer im offenen Kanal an.
OpenChannelProfile
erstellt eine Kanalprofilansicht, die den Kanaltitel und das Bild anzeigt.
EditDetailsModal
erscheint, wenn ein Benutzer den Kanalnamen und das Profilbild bearbeiten möchte. Sie hat eine onCancel-Eigenschaft, die ausgelöst werden kann, wenn auf die Schaltfläche „Abbrechen“ geklickt wird.

Der folgende Code zeigt, wie das OpenChannelSettings-Modul mit dem OpenChannelSettingsProvider und useOpenChannelSettingsContext verwendet werden kann:

So werden die OpenChannelSettings angezeigt:

Die Standard-UI der Kanaleinstellungen

MessageSearch

Die
MessageSearch
Modul ermöglicht es den Nutzern, nach Nachrichten in den Kanälen zu suchen, in denen sie Mitglied sind. Für die MessageSearch muss eine channelUrl-Eigenschaft festgelegt werden. Zusätzliche optionale
Eigenschaften
zur Verfügung, wie onResultLoaded, onResultClick und renderPlaceholderEmptyList.

Wenn Sie das MessageSearch-Modul verwenden, möchten Sie vielleicht alle Ergebnisse einer Suche in einem separaten UI-Fenster anzeigen, das als Pop-up-Ebene über dem Chat erscheint. Sie können dazu die Eigenschaft onResultLoaded verwenden, bei der eine Funktion aufgerufen wird, sobald die Ergebnisse eingegangen sind. Mit onResultClick können Sie eine benutzerdefinierte Logik ausführen, sobald ein Benutzer ein Suchergebnis auswählt. Mit der Eigenschaft renderPlaceholderEmptyList können Sie eine angepasste Benutzeroberfläche für den Platzhalter erstellen, wenn die Suchliste keine Ergebnisse liefert. So können Sie eine Benachrichtigung anzeigen lassen, wenn in der Suchliste nichts zu finden ist.

Für die MessageSearch können Sie den MessageSearchProvider und den useMessageSearch-Hook verwenden, um Daten zu speichern und zu verwalten, die für die Erstellung einer Benutzeroberfläche für die Nachrichtensuche verwendet werden. MessageSearchProvider erfordert die Angabe einer channelUrl und hat zusätzliche optionale Eigenschaften wie onResultClick, messageSearchQuery und onResultLoaded. Die
useMessageSearchContext
hat eine Reihe von optionalen Eigenschaften wie onResultLoaded, requestString und selectedMessageId.

Die
MessageSearchUI
ist die einzige UI-Komponente im MessageSearch-Modul und zeigt die Ansicht der Suchergebnisse an.

Hier sehen Sie, wie Sie die MessageSearch mit dem MessageSearchProvider und useMessageSearchContext implementieren:

Die Standard-Benutzeroberfläche des MessageSearch-Moduls sieht wie folgt aus:

Die Standard-Benutzeroberfläche von MessageSearch

EditUserProfile

Die Seite
EditUserProfile
ermöglicht es dem aktuellen Benutzer, Änderungen an seinem Profil vorzunehmen. Wenn sie auf ihren eigenen Avatar klicken, erscheint ein Pop-up-Fenster mit ihren Profilinformationen. Hier haben die Nutzer die Möglichkeit, ihr Profilbild und ihren Spitznamen zu bearbeiten und das Design in einen hellen oder dunklen Modus umzuschalten.

EditUserProfile hat 4 optionale
Eigenschaften
die Kinder, onCancel, onThemeChange und onEditProfile umfassen. Die Eigenschaft children wird verwendet, um die untergeordneten Komponenten von EditUserProfile zu sehen, die EditUserProfileProvider uns zur Verfügung stellt. onCancel wird verwendet, um einen Vorgang auszuführen, wenn die Benutzeroberfläche durch einen Klick des Benutzers ausgelöst wird, um vorgenommene Bearbeitungen abzubrechen. Wenn Sie zusätzliches Styling hinzufügen möchten, je nachdem, ob der Chat im hellen oder dunklen Modus ist, können Sie onThemeChange verwenden, um eine Funktion aufzurufen, die benutzerdefiniertes CSS implementiert, wenn ein Benutzer klickt, um das Thema zu ändern. Mit onEditProfile schließlich können Sie eine Reihe von Aktionen implementieren, sobald der Benutzer sein Profil aktualisiert hat.

UIKit bietet
EditUserProfileProvider
und
useEditUserProfileProviderContext
Haken als Kontextobjekte für das Modul EditUserProfile. Beide können dieselben optionalen Eigenschaften wie das EditUserProfile verwenden: children, onCancel, onThemeChange und onEditProfile.

Die einzige UI-Komponente im EditUserProfile-Modul ist
EditUserProfileUI
die die Ansicht des Benutzerprofils wiedergibt.

Der Standardentwurf für EditUserProfile sieht wie folgt aus:

Die Standard-Benutzeroberfläche für die Bearbeitung eines Benutzerprofils

Schlussfolgerung und nächste Schritte

Wir haben uns die Kernkomponenten und Module, die das Sendbird UIKit for React für uns bereitstellt, im Detail angesehen. Mit dieser soliden Grundlage können wir nun entscheiden, welche Komponenten und Module zur Unterstützung verschiedener Anwendungsfälle erforderlich sind. Sehen Sie sich zum Beispiel unsere Blog wie man einen WhatsApp Messenger-Klon mit Sendbird UIKit für React erstellt. In diesem Blog erfahren Sie, wie Sie Ihr eigenes WhatsApp-ähnliches Chat-Erlebnis mit den Kernkomponenten und Modulen erstellen können, die wir in diesem Blogbeitrag besprochen haben.

Weitere Informationen finden Sie in unseren
Dokumentationen
oder erkunden Sie die Fülle der
UIKit-Tutorials
auf unserer
Entwickler-Porta
l. Wenn Sie Hilfe bei der
Sendbird UIKit
zu lesen, besuchen Sie die
Gemeinschaftsforen
oder
kontaktieren Sie uns
. Unsere Experten sind immer bereit zu helfen!

Viel Spaß beim Chataufbau! ✨

 

Categories: Technik