Technik

Wie man einen WhatsApp-Messenger-Klon in React mit dem Sendbird UIKit erstellt

Blog author
Michelle Wong Developer Advocate
Share
Wie man einen WhatsApp-Messenger-Klon in React mit dem Sendbird UIKit erstellt

Mit über
2 Milliarden Nutzern
und
100 Milliarden Nachrichten
täglich ausgetauscht werden, ist WhatsApp die
beliebteste Messaging-App
auf der Welt. Während die Benutzerfreundlichkeit der Nachrichtenübermittlung von Benutzer zu Benutzer und die Möglichkeit, Gespräche mit Unternehmen zu führen, immens zur Beliebtheit von WhatApp beigetragen haben, hat WhatApp vor kurzem
wurde kritisiert
wegen der zunehmenden Zahl von Unternehmen, die Nutzer mit Werbebotschaften zuspammen.

Marken können dieses Problem vermeiden, indem sie einen
In-App-Chat
. Ein kontextbezogener In-App-Chat bedeutet, dass wichtige Updates, Neuigkeiten und Ankündigungen eines Unternehmens nicht in einem mit Spam überfüllten Nachrichteneingang verloren gehen. Der In-App-Chat bietet außerdem ein lebensechtes Messaging-Erlebnis und gibt den Marken eine verantwortungsvolle Kontrolle über die Nutzerdaten. Dies ist wichtig, weil die Nachrichtenübermittlung für Unternehmen sehr wohl zu einem wichtigen Teil der Grundlage werden kann, auf der eine Marke aufgebaut wird. In der Tat, ein Meta-Sprecher
kommentierte kürzlich
dass „Messaging die neue Art ist, Geschäfte zu machen, besser als eine E-Mail oder ein Telefonanruf“.

Deshalb werden wir in diesem Blog herausfinden, wie man einen WhatsApp-Messenger-Klon in React erstellt. Für dieses Projekt werden wir Folgendes verwenden Sendbird UIKit für React. Sendbird UIKit ermöglicht es Entwicklern, ein maßgeschneidertes Chat-Erlebnis mit hochgradig anpassbaren UI-Komponenten zu erstellen. In diesem Blog werden wir verstehen, wie die von UIKit bereitgestellten Komponenten jeden Aspekt unserer benutzerdefinierten Integration ausmachen, um unser Ziel zu erreichen – den Aufbau eines WhatsApp-Messenger-Klons in React.

Am Ende dieses Blogs werden Sie dieses Programm für den Desktop erstellt haben:

WhatsApp-Messenger-Klon für den Desktop

Und das ist für Mobiltelefone:

WhatsApp-Messenger-Klon für Mobiltelefone

Erste Schritte mit Ihrem WhatsApp Messenger-Klon

Um zu beginnen, erstellen Sie eine Anwendung im
Sendbird-Dashboard
. Hier können Sie auf alles zugreifen, was in Ihrem Chat-Dienst angeboten wird. Sobald eine Anwendung erstellt wurde, müssen Sie die Anwendungs-ID, die zur Initialisierung des Chat-SDK generiert wurde, in Ihrer React-Anwendung speichern.

Erstellen Sie eine React-Anwendung und installieren Sie Sendbird UIKit für React mit npm oder yarn:

Sobald UIKit installiert ist, können wir die notwendigen Komponenten für unsere Anwendung aus UIKit importieren.

Komponenten & Module für einen WhatsApp-Messenger-Klon in React

Zu Beginn werden wir den SendbirdProvider als allgemeinen Wrapper für die verschiedenen Module verwenden, die wir in unsere Anwendung einbinden werden.

Für unser Beispiel werden wir die Module ChannelList, Channel und ChannelSettings verwenden. Mit diesen drei Modulen werden wir eine mobile Ansicht und eine Desktop-Ansicht erstellen. In der mobilen Ansicht wird entweder die Senderliste oder die Senderkonversation und das Einstellungsmenü zusammen angezeigt. In der Desktop-Ansicht werden die Senderliste und die Senderkonversation nebeneinander angezeigt.

Zunächst importieren wir den SendbirdProvider und das Stylesheet von UIKit in die App.js-Datei:

Hinweis: Hier importieren wir SendbirdProvider und verweisen in unserer Anwendung auf ihn als SBProvider. Sie können wählen, wie Sie es in Ihrer eigenen Bewerbung nennen möchten.

Wenden Sie dann das folgende CSS auf unser Stylesheet an, das sich in der Datei styles.css befinden wird:

Nun soll die Anwendung sowohl in der Desktop- als auch in der mobilen Ansicht funktionieren. In unserer Provider-Komponente müssen wir also die Bildschirmgröße des Fensters überprüfen. Wenn sie die Größe eines Telefonbildschirms hat, wird sie unsere mobile Ansicht darstellen. Liegt sie über der Anzahl der Pixel eines typischen Handybildschirms, wird eine Desktop-Ansicht gerendert. Daher werden wir zwei Komponenten erstellen und sie MobileView und DesktopView nennen. Diese beiden Komponenten werden unsere Module enthalten.

Nachdem diese Schritte abgeschlossen sind, sieht die Datei App.js wie folgt aus:


Hinweis

: Wenn Sie einem Benutzer im Dashboard ein Zugriffstoken erteilen, müssen Sie die Variable accessToken an den SBProvider übergeben, wie im obigen Codebeispiel zu sehen ist.

Desktop-Ansicht

Die Desktop-Ansicht ist das Standard-Layout von Sendbird mit der Kanalliste auf der linken Seite und der Konversation auf der rechten Seite. Unsere DesktopView-Komponente gibt ein div mit einem className von „sendbird-app__wrap“ zurück. Dieser Klassenname ist bereits durch das Standarddesign von Sendbird gestaltet, das die Kanalliste neben dem Konversationsfenster anzeigt.

Dann müssen wir die Höhe des sendbird-app__wrap div auf 100vh setzen, was der Größe des gesamten Fensterbildschirms entspricht. Innerhalb dieses Divs platzieren wir die Komponenten Senderliste, Senderkonversation und Sendereinstellungen.

Importieren Sie die Module Senderliste, Sender und Sendereinstellungen. Sie werden als SBChannelList, SBConversation und SBChannelSettings bezeichnet:

Wir fügen ein div um jede Komponente hinzu und verwenden die folgenden classNames, um das Standard-UIKit-Styling auf unsere Komponenten anzuwenden. Im Folgenden sind die Klassennamen für jede Komponente aufgeführt:

  1. Für die Kanallisteist der div className „sendbird-app__channellist-wrap“.
  2. Für das Kanal Konversation, der div className ist „sendbird-app__conversation-wrap“
  3. Für den Kanal Einstellungen, der div className ist „sendbird-app__settingspanel-wrap“

In der Kanallistenkomponente verwenden wir die Eigenschaft onChannelSelect, um den Kanal festzulegen, auf den in der Kanalliste geklickt wird. Die Channel-Konversation wird die channelUrl übergeben und onChatHeaderActionClick verwenden, so dass wir hören können, wenn der Benutzer die Einstellungsleiste öffnen möchte. Für die Kanaleinstellungen geben Sie die Eigenschaft channelUrl ein und verwenden onCloseClick, um die Ansicht der Einstellungsleiste zu schließen. Wie das aussieht, sehen Sie in den Codebeispielen im Abschnitt Anpassungen unten.

Mobile Ansicht

In der Ansicht des mobilen Geräts wird entweder die Komponente Senderliste oder die Komponente Senderkonversation auf dem Bildschirm dargestellt. Wenn ein Benutzer in der Kanalliste ist und auf eine Unterhaltung klickt, wird das Unterhaltungsfenster angezeigt. Wenn der Benutzer klickt, um von der Konversation zur Kanalliste zu wechseln, wird die Kanalliste auf dem Bildschirm angezeigt.

Für die mobile Ansicht geben wir ein div mit dem className „mobile-view__wrap“ zurück und setzen darin eine Bedingung, die, wenn der aktuelle Kanal nicht eingestellt ist, die Kanallistenkomponente zurückgibt. Andernfalls werden das Gesprächsfenster des Kanals und die Einstellungskomponente zurückgegeben. Die Einstellungskomponente wird nur gerendert, wenn der Benutzer auf eine Schaltfläche im Gesprächsfenster klickt, um das Einstellungsmenü zu öffnen.

Setzen Sie im Stylesheet das Element mit dem Klassennamen „mobile-view__wrap“ und „sendbird-app__conversation-wrap“ auf eine Höhe von 100vh, so dass es den gesamten Bildschirm einnimmt.

Wir verwenden für jede Komponente die gleichen Eigenschaften wie zuvor für die DesktopView. Verwenden Sie für die Kanalliste die Eigenschaft onChannelSelect und disableAutoSelect. Die Eigenschaft disableAutoSelect wird verwendet, damit die Kanalliste nicht automatisch den ersten Kanal in der Liste wiedergibt.

In der Desktop-Ansicht werden die Senderliste und die Senderkonversation nebeneinander angezeigt. In der mobilen Ansicht wird jedoch nur die Senderliste oder die Senderkonversation angezeigt, so dass die automatische Auswahl ausgeschaltet werden sollte. Wenn Sie disableAutoSelect nicht einbeziehen, werden Sie feststellen, dass die Ansicht ständig den ersten Kanal innerhalb des Konversationsfensters wiedergibt und Sie nicht zur Kanalliste zurückkehren können, da dieser Kanal ständig wiedergegeben wird. Daher wird die Eigenschaft disableAutoSelect verwendet, um den Kanal auszuwählen, den Sie im Konversationsfenster anzeigen möchten, und um von der Anzeige der Kanalliste zur Konversation zu wechseln.

Als nächstes wollen wir oberhalb der SBConversation-Komponente eine Zurück-Schaltfläche hinzufügen. Die Schaltfläche „Zurück“ wird in der Kanalkonversation angezeigt und führt Sie zurück zu unserer Kanalliste. Die Konversationskomponente wird die channelUrl übergeben und den onChatHeaderActionClick verwenden. Der onChatHeaderActionClick schaltet die Einstellungsleiste ein und öffnet sie. Die Komponente SBChannelSettings verwendet die Eigenschaft channelUrl und onCloseClick, um das Einstellungsmenü zu schließen.

Anpassungen

Wir können damit beginnen, Anpassungen vorzunehmen, um Ihrem Chat einen Whatsapp-ähnlichen Stil zu verleihen. Sowohl in der DesktopView als auch in der MobileView werden wir eine Funktion erstellen, die die Einstellungsleiste ausblendet und eine Funktion, die die Einstellungsleiste wiedergibt.

Um die Einstellungsleiste auszublenden, werden wir innerhalb der Funktion das Element mit dem Klassennamen „sendbird-app__conversation-wrap“ greifen und seinen rechten Rand auf 0px setzen. Diese Funktion wird in den SBChannelSettings über die Eigenschaft onCloseClick ausgelöst. Um die Einstellungsleiste zu öffnen, wird in der Channel-Komponente innerhalb der onChatHeaderActionClick-Eigenschaft die renderSettingsBar aufgerufen, die das Element mit dem className „sendbird-app__conversation-wrap“ aufnimmt und den rechten Rand auf 318px setzt.

Wenn Sie also die Einstellungen öffnen, wird das Layout des Konversationsfensters so geändert, dass auf der rechten Seite der Seite Platz für das Menü vorhanden ist. Wenn das Einstellungsmenü geschlossen wird, erweitert sich das Konversationsfenster an der Stelle, an der sich zuvor die Einstellungsleiste befand.

Damit das Einstellungsmenü angezeigt wird, müssen wir etwas CSS hinzufügen, um es in der Fensteransicht richtig zu positionieren:

Von hier aus können Sie alle CSS-Anpassungen vornehmen, um das Einstellungsmenü so zu gestalten, wie Sie es haben möchten.

Bei diesen Implementierungen gibt die MobileView dies zurück:

Und die DesktopView gibt dies zurück:

colorSet

Als nächstes wollen wir die
colorSet
Eigenschaft im SendbirdProvider, um die Farben zu definieren, die das UIKit-Thema ausmachen. Sobald wir unser colorSet definiert haben, müssen wir sicherstellen, dass wir es an die SendbirdProvider Komponente übergeben.

Für unser Beispiel setzen wir die Variable –sendbird-light-primary-100 auf hellgrün. Diese Farbe wird in der Kanalliste als Hintergrund des ausgewählten Kanals, als Hintergrundfarbe des Containers für eine Emoji-Reaktion und als Hintergrundfarbe, wenn der aktuelle Benutzer seine eigene Nachricht bearbeitet, verwendet. In unserem Beispiel können wir die Farbe für unsere ausgehenden Nachrichten in einen helleren Grünton ändern.

Als nächstes wollen wir –sendbird-light-primary-300 als grün definieren. Diese Variable wird für die Hintergrundfarbe der ausgehenden Nachrichten, für die Schaltfläche zum Erstellen eines neuen Kanals in der Kanalliste sowie für Symbole wie das Einstellungssymbol in der Kanalkonversation und alle Symbole im Einstellungsmenü verwendet.

Dann stellen wir die Option –sendbird-light-primary-400 auf einen etwas dunkleren Grünton ein. Zu den Elementen, die –sendbird-light-primary-400 verwenden, gehören der Hintergrund beim Verweilen auf ausgehenden Nachrichten, beim Verweilen auf der Schaltfläche „Speichern“, wenn Sie Ihre eigene Nachricht bearbeiten möchten, und beim Verweilen auf der Schaltfläche „Erstellen“, um einen neuen Kanal zu erstellen.

Eine wichtige colorSet-Variable ist -sendbird-light-background-50, die für die Hintergrundfarbe der einzelnen Komponenten aufgerufen wird. Die aktuelle Standardfarbe ist weiß. Anstatt diese Variable zu ändern, um eine einheitliche Hintergrundfarbe zu haben, oder die Hintergrundfarbe der gesamten Anwendung weiß zu lassen, werden wir CSS implementieren, um die Hintergrundfarbe des Konversationsfensters in helles Beige zu ändern. Wir möchten Sie ermutigen, sich die vollständige
Liste der colorSet-Variablen
.

Die App-Funktion sollte jetzt wie folgt aussehen:

Kanalanpassungen

Als letzten Feinschliff fügen wir CSS hinzu. Bei eingehenden Nachrichten wollen wir das Profilbild-Symbol neben dem Namen des Benutzers entfernen. Sobald wir das Profilbild des Benutzers entfernen, wollen wir die minimale Breite entfernen, die darauf angewendet wird, damit es keinen leeren Raum gibt, wo der Avatar vorher war.

Anpassungen der Kanalliste

In der Kopfzeile der Kanalliste wollen wir den Spitznamen und die ID des aktuellen Benutzers entfernen. Anstatt CSS zu verwenden, um dieses Ziel zu erreichen, können Sie alternativ die ChannelList-UI-Komponente ChannelListHeader verwenden, um Ihr eigenes Design anzupassen und das Standardlayout zu überschreiben.

Für die Kanalvorschaukomponente setzen wir die Anzeige der Mitgliederzahl, die neben dem Gruppenkanalnamen angezeigt wird, auf „none“. Eine andere Möglichkeit, Ihre eigene Benutzeroberfläche für die Kanalvorschau zu gestalten, wäre die Verwendung der Eigenschaft renderChannelPreview von ChannelList, die den Standard-Header von Sendbird durch Ihre eigene Komponente ersetzen würde. Wenn Sie den Code sehen möchten, sehen Sie sich bitte das
vollständige CSS-Stylesheet
!

Dies ist das Endergebnis, wenn Sie sich auf einem Desktop befinden:

WhatsApp-Messenger-Klon für den Desktop

Und so sieht es auf einem mobilen Gerät aus:

WhatsApp-Messenger-Klon für Mobiltelefone

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben nun einen WhatsApp-Messenger-Klon in React erstellt. Sie haben eine funktionale WhatsApp-ähnliche Messaging-Implementierung, die aus Kernkomponenten und Modulen des Sendbird UIKit besteht. Von hier aus können Sie Ihr Chat-Erlebnis mit den wesentlichen Elementen so gestalten, dass es den Anforderungen Ihrer Anwendung entspricht.

Bitte sehen Sie sich dieses
GitHub-Repository
um einen Überblick über die von uns durchgeführten Maßnahmen zu erhalten. Für weitere Informationen können Sie auch unsere
docs
oder erkunden Sie die Fülle der
UIKit-Tutorials
auf unserer
Entwickler-Porta
l. Besuchen Sie die Community-Foren oder kontaktieren Sie uns, wenn Sie Hilfe mit dem Sendbird UIKit benötigen. Unsere Experten sind immer bereit zu helfen!

Viel Spaß beim Erstellen deines WhatsApp-Messenger-Klons! 💻

Categories: Technik