Engineering

Zo bouw je een WhatsApp messenger kloon in React met de Sendbird UIKit

Blog author
Michelle Wong Developer Advocate
Share
Zo bouw je een WhatsApp messenger kloon in React met de Sendbird UIKit

Met meer dan
2 miljard gebruikers
en
100 miljard berichten
die dagelijks worden uitgewisseld, is WhatsApp de
populairste berichtenapp
in de wereld. Hoewel het gebruiksgemak voor berichten van gebruiker tot gebruiker en de mogelijkheid om gesprekken te voeren met bedrijven enorm hebben bijgedragen aan de populariteit ervan, heeft WhatApp onlangs
geconfronteerd met kritiek
voor de toename van het aantal bedrijven die gebruikers spammen met reclameboodschappen.

Merken kunnen dit probleem vermijden door
in-app chat
. Contextrijke in-app chat betekent dat belangrijke updates, nieuws en aankondigingen van een bedrijf niet verloren gaan in een inbox met spam. In-app chat biedt ook een levensechte messaging-ervaring en geeft merken tegelijkertijd verantwoorde controle over gebruikersgegevens. Dit is belangrijk omdat berichtgeving voor bedrijven heel goed een belangrijk onderdeel kan worden van het fundament waarop een merk is gebouwd. Inderdaad, een woordvoerder van Meta
merkte onlangs op
dat “Messaging de nieuwe manier is om zaken gedaan te krijgen, beter dan een e-mail of telefoontje.”

Daarom zoeken we in deze blog uit hoe je een WhatsApp messenger kloon bouwt in React. Voor dit project gebruiken we Sendbird UIKit voor React. Met Sendbird UIKit kunnen ontwikkelaars een chat-ervaring op maat bouwen met zeer aanpasbare UI-componenten. In deze blog zullen we begrijpen hoe de door UIKit geleverde componenten elk aspect van onze aangepaste integratie vormen om ons doel te bereiken – het bouwen van een WhatsApp messenger kloon in React.

Tegen het einde van deze blog, is dit wat je gebouwd hebt voor desktop:

WhatsApp messenger kloon voor desktop

En dit is voor mobiel:

WhatsApp messenger kloon voor mobiel

Aan de slag met je WhatsApp Messenger-kloon

Om te beginnen maakt u een applicatie aan in het
Sendbird dashboard
. Hier hebt u toegang tot alles wat uw chatdienst biedt. Zodra een toepassing is gemaakt, moet u de applicatie-ID opslaan die wordt gegenereerd om de Chat SDK in uw react-toepassing te initialiseren.

Genereer een React-applicatie en installeer Sendbird UIKit voor React met npm of yarn:

Zodra UIKit is geïnstalleerd, kunnen we de benodigde componenten voor onze toepassing uit UIKit importeren.

Componenten en modules voor een WhatsApp messenger kloon in React

Om te beginnen zullen we de SendbirdProvider gebruiken als een algemene wrapper voor de verschillende modules die we in onze applicatie gaan opnemen.

In ons voorbeeld gebruiken we de modules ChannelList, Channel en ChannelSettings. Met deze drie modules maken we een mobiele weergave en een desktopweergave. De mobiele weergave geeft ofwel de kanaallijst of zowel het kanaalgesprek als het instellingenmenu samen weer. Voor de desktopweergave hebben we de kanaallijst en het kanaalgesprek naast elkaar.

Eerst importeren we de SendbirdProvider en UIKit’s stylesheet in het App.js bestand:

Opmerking: Hier importeren we SendbirdProvider en verwijzen we ernaar in onze toepassing als SBProvider. U kunt kiezen hoe u het in uw eigen toepassing wilt noemen.

Pas dan de volgende CSS toe op ons stylesheet, dat in het styles.css bestand komt te staan:

Nu willen we dat de toepassing zowel op een desktop als op een mobiele weergave werkt. Binnen onze providercomponent moeten we dus controleren op de schermgrootte van het venster. Als het de grootte van een telefoonscherm heeft, zal het onze mobiele weergave weergeven. Als het boven het aantal pixels van een typisch telefoonscherm ligt, wordt een desktopweergave weergegeven. Daarom maken we twee componenten aan en noemen ze MobileView en DesktopView. Beide componenten zullen onze modules bevatten.

Nadat deze stappen zijn voltooid, ziet het App.js bestand er zo uit:


Nota

: In het dashboard, als u een gebruiker een toegangstoken geeft, moet u de variabele accessToken doorgeven aan de SBProvider, zoals te zien is in het bovenstaande codevoorbeeld.

Desktopweergave

De desktop weergave is de standaard Sendbird layout met de kanalenlijst aan de linkerkant en de conversatie aan de rechterkant. Onze DesktopView component geeft een div terug met een className van “sendbird-app__wrap”. Deze className is al gestyled door Sendbird’s standaard ontwerp dat de kanalenlijst naast het gespreksvenster weergeeft.

Dan moeten we de hoogte van de sendbird-app__wrap div instellen op 100vh, dat is de grootte van het hele vensterscherm. In deze div plaatsen we de onderdelen Kanalenlijst, Kanalengesprek en Kanaleninstellingen.

Importeer de modules met de kanaallijst, het kanaal en de kanaalinstellingen. Zij zullen worden aangeduid als SBChannelList, SBConversation en SBChannelSettings:

We voegen een div toe rond elke component en door de volgende classNames te gebruiken, passen we de standaard UIKit-styling toe op onze componenten. Hieronder volgen de classNames voor elke component:

  1. Voor de kanaallijstis de div className “sendbird-app__channellist-wrap”.
  2. Voor het kanaal conversatie, is de div className “sendbird-app__conversation-wrap”.
  3. Voor het kanaal instellingen, is de div className “sendbird-app__settingspanel-wrap”.

In de kanaallijstcomponent gebruiken we de eigenschap onChannelSelect om het aangeklikte kanaal uit de kanaallijst in te stellen. De kanaalconversatie geeft de kanaalUrl door en gebruikt onChatHeaderActionClick, zodat we kunnen luisteren naar wanneer de gebruiker de instellingenbalk wil openen. Geef voor de kanaalinstellingen de eigenschap channelUrl door en gebruik onCloseClick om de weergave van de instellingenbalk te sluiten. Zie de codevoorbeelden in de sectie Aanpassingen hieronder om te zien hoe dit eruit ziet.

Mobiele weergave

In de mobiele apparaatweergave wordt ofwel de kanaallijstcomponent ofwel de kanaalgesprekscomponent op het scherm weergegeven. Als een gebruiker op de kanaallijst staat en in een gesprek klikt, wordt het gespreksvenster weergegeven. Als de gebruiker klikt om van het gesprek naar de kanaallijst te gaan, wordt de kanaallijst op het scherm weergegeven.

Voor de mobiele weergave geven we een div terug met de className “mobile-view__wrap” en daarbinnen plaatsen we een voorwaarde waarbij als het huidige kanaal niet is ingesteld, het de lijstcomponent van het kanaal teruggeeft. Anders geeft het het kanaalgespreksvenster en de instellingencomponent terug. De instellingencomponent wordt alleen weergegeven als de gebruiker op een knop in het gespreksvenster klikt om het instellingenmenu te openen.

Stel in het stylesheet het element met de className “mobile-view__wrap” en “sendbird-app__conversation-wrap” hoogte in op 100vh, zodat het het hele vensterscherm in beslag neemt.

We gebruiken dezelfde eigenschappen voor elke component als we eerder deden voor de DesktopView. Gebruik voor de kanaallijst de eigenschap onChannelSelect en disableAutoSelect. De disableAutoSelect eigenschap wordt gebruikt zodat de kanaallijst niet automatisch het eerste kanaal in de lijst weergeeft.

De bureaubladweergave toont de kanaallijst en het kanaalgesprek naast elkaar. Voor de mobiele weergave bekijken we echter alleen de kanaallijst of het kanaalgesprek, dus moet de automatische selectie worden uitgeschakeld. Als u disableAutoSelect niet opneemt, zult u merken dat het beeld voortdurend het eerste kanaal in het gespreksvenster weergeeft en u niet toestaat terug te gaan naar de kanaallijst omdat het voortdurend dat kanaal weergeeft. Daarom wordt de eigenschap DisableAutoSelect gebruikt om het kanaal te selecteren dat u wilt bekijken in het gespreksvenster en over te schakelen van het bekijken van de kanaallijst naar het gesprek.

Vervolgens willen we boven de SBConversatiecomponent een terugknop toevoegen. De terugknop zal worden weergegeven in het kanaalgesprek en teruggaan naar onze kanaallijst. De conversatiecomponent geeft de channelUrl door en gebruikt de onChatHeaderActionClick. De onChatHeaderActionClick zal de instellingenbalk openen. De component SBChannelSettings gebruikt de eigenschap channelUrl en onCloseClick om het instellingenmenu te sluiten.

Aanpassingen

We kunnen beginnen met aanpassingen om uw chat meer een Whatsapp-achtige stijl te geven. In zowel de DesktopView als de MobileView maken we een functie die de instellingenbalk verbergt en een functie die de instellingenbalk weergeeft.

Om de instellingenbalk te verbergen, pakken we in de functie het element met de className “sendbird-app__conversation-wrap” en stellen we de rechtermarge in op 0px. Deze functie wordt getriggerd in de SBChannelSettings met behulp van de eigenschap onCloseClick. Om de instellingenbalk te openen, in de Channel component binnen de onChatHeaderActionClick property, zal het de renderSettingsBar aanroepen waar het het element met de className “sendbird-app__conversation-wrap” pakt en de rechter marge op 318px zet.

Dus bij het openen van de instellingen wordt de lay-out van het gespreksvenster veranderd, zodat er aan de rechterkant van de pagina ruimte is voor het menu. Wanneer vervolgens op het instellingenmenu wordt geklikt om het te sluiten, zal het gespreksvenster zich uitbreiden tot waar de instellingenbalk voorheen was.

Om het instellingenmenu te laten verschijnen, willen we wat CSS toevoegen om het correct te positioneren in de vensterweergave:

Vanaf hier kunt u eventuele CSS-aanpassingen wijzigen om te laten zien hoe u het instellingenmenu wilt plaatsen.

Met deze implementaties zal de MobileView dit teruggeven:

En de DesktopView geeft dit terug:

colorSet

Vervolgens willen we de
colorSet
eigenschap in de SendbirdProvider om de kleuren te definiëren die het thema van UIKit vormen. Zodra we onze colorSet hebben gedefinieerd, moeten we ervoor zorgen dat we die doorgeven aan de SendbirdProvider component.

In ons voorbeeld stellen we de variabele –sendbird-light-primary-100 in op lichtgroen. Deze kleur wordt toegepast in de chatroomlijst als de achtergrond van de geselecteerde chatroom, de achtergrondkleur van de container voor een emoji-reactie, en de achtergrondkleur wanneer de huidige gebruiker zijn eigen bericht bewerkt. In ons voorbeeld kunnen we de kleur voor onze uitgaande berichten veranderen in een lichtere kleur groen.

Vervolgens willen we –sendbird-light-primary-300 definiëren als groen. Deze variabele wordt gebruikt op de achtergrondkleur van uitgaande berichten, op de knop Maak een nieuwe chatroom in de chatroomlijst, en op de pictogrammen zoals het instellingenpictogram in de chatroomconversatie en alle pictogrammen in het instellingenmenu.

Vervolgens stellen we de –sendbird-light-primary-400 in op een iets donkerder tint groen. De elementen die –sendbird-light-primary-400 gebruiken zijn onder andere de achtergrond voor on hover van uitgaande berichten, on hover van de bewaar knop als je je eigen bericht wilt bewerken, en on hover van de maak knop om een nieuw kanaal aan te maken.

Een belangrijke colorSet-variabele is -sendbird-light-background-50, die wordt aangeroepen voor de achtergrondkleur van elk onderdeel. De huidige standaardkleur is wit. In plaats van deze variabele te veranderen om één uniforme achtergrondkleur te hebben of de achtergrondkleur van de hele applicatie wit te laten, zullen we CSS implementeren om de achtergrondkleur van het gespreksvenster te veranderen in lichtbeige. Wij raden u aan de volledige
lijst van de colorSet variabelen
.

De App-functie zou er nu zo uit moeten zien:

Kanaalaanpassingen

Voor de afwerking voegen we CSS toe. Voor inkomende berichten willen we het pictogram van de profielafbeelding naast de naam van de gebruiker verwijderen. Zodra we de profielafbeelding van de gebruiker verwijderen, willen we de minibreedte styling die erop is toegepast verwijderen, zodat er geen lege ruimte is waar de avatar voorheen stond.

Aanpassingen aan de kanaallijst

In de kop van de kanaallijst willen we de nickname en ID van de huidige gebruiker verwijderen. In plaats van CSS te gebruiken om dit doel te bereiken, kunt u ook de UI-component ChannelListHeader van ChannelList gebruiken om uw eigen specifieke ontwerp aan te passen om de standaardlay-out te overschrijven.

Voor de kanaalvoorbeeldcomponent zetten we de weergave op geen op het ledental dat naast de naam van het groepskanaal wordt weergegeven. Een andere optie om uw eigen UI te ontwerpen voor de kanaalvoorvertoning zou zijn om ChannelList’s renderChannelPreview eigenschap te gebruiken, die de standaard Sendbird header zou vervangen door uw eigen aangepaste component. Als u de code wilt zien, zie dan de
complete CSS stylesheet
!

Dit is het eindresultaat op een desktop:

WhatsApp messenger kloon voor desktop

En zo ziet het eruit op een mobiel apparaat:

WhatsApp messenger kloon voor mobiel

Conclusie

Gefeliciteerd! Je hebt nu een WhatsApp messenger kloon gebouwd in React. Je hebt een functionele WhatsApp-achtige berichtenimplementatie, samengesteld uit kerncomponenten en modules van de Sendbird UIKit. Van hieruit kunt u uw chat-ervaring opbouwen met de essentiële elementen die passen bij de behoeften van uw toepassing.

Bekijk deze
GitHub archief
voor een overzicht van wat we doorlopen hebben. Voor meer informatie kunt u ook onze
docs
of verken de schat aan
UIKit tutorials
op onze
ontwikkelaarsporta
l. Bekijk de community forums of neem contact met ons op als u hulp nodig heeft met de Sendbird UIKit. Onze experts staan altijd klaar om te helpen!

Veel plezier met het bouwen van je WhatsApp messenger kloon! 💻

Categories: Engineering