Zo bouw je een WhatsApp messenger kloon in React met de Sendbird UIKit
Met meer dan 2 miljard gebruikers en 100 miljard uitgewisselde berichten per dag is WhatsApp de populairste berichten-app ter wereld. Hoewel het gebruiksgemak voor berichten van gebruiker tot gebruiker en de mogelijkheid om gesprekken met bedrijven te voeren enorm hebben bijgedragen aan de populariteit, heeft WhatsApp onlangs te maken gehad met luchtafweer vanwege het toenemende aantal bedrijven dat gebruikers spamt met promotionele berichten.
Merken kunnen dit probleem voorkomen door in-app chat in te bouwen . Contextrijke in-app-chat betekent dat belangrijke updates, nieuws en aankondigingen van een bedrijf niet verloren gaan in een inbox voor berichten die overloopt van spam. In-app-chat biedt ook een levensechte berichtenervaring terwijl merken verantwoordelijke controle krijgen over gebruikersgegevens. Dit is belangrijk omdat berichtgeving voor bedrijven heel goed een belangrijk onderdeel kan worden van de basis 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 zullen we in deze blog ontdekken hoe je een WhatsApp-messenger-kloon bouwt in React. Voor dit project gebruiken we Sendbird UIKit voor React . Met Sendbird UIKit kunnen ontwikkelaars een op maat gemaakte chatervaring bouwen met zeer aanpasbare UI-componenten. In deze blog zullen we begrijpen hoe de componenten van UIKit elk aspect van onze aangepaste integratie vormen om ons doel te bereiken: het bouwen van een WhatsApp-messenger-kloon in React.
Aan het einde van deze blog heb je dit voor desktop gebouwd:
En dit is voor mobiel:
The only UIKit you need.
Aan de slag met je WhatsApp Messenger-kloon
Maak om te beginnen een applicatie in het Sendbird-dashboard . Hier heeft u toegang tot alles wat in uw chatservice wordt aangeboden. Zodra een toepassing is gemaakt, moet u de gegenereerde toepassings-ID opslaan om de Chat SDK in uw reactietoepassing te initialiseren.
Genereer een React-applicatie en installeer Sendbird UIKit voor React met npm of garen:
Zodra UIKit is geïnstalleerd, kunnen we de benodigde componenten voor onze applicatie importeren vanuit UIKit.
Componenten en modules voor een WhatsApp-messenger-kloon in React
Om te beginnen zullen we de SendbirdProvider gebruiken als een algemene verpakking voor de meerdere modules die we in onze applicatie gaan opnemen.
Voor 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 de zenderlijst weer of zowel het kanaalgesprek als het instellingenmenu samen. 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 applicatie als SBProvider. U kunt kiezen hoe u ernaar wilt verwijzen in uw eigen aanvraag.
Pas vervolgens de volgende CSS toe op onze stylesheet, die zich in het bestand styles.css bevindt:
Nu willen we dat de applicatie zowel op een desktopweergave als op een mobiele weergave werkt. Dus binnen onze providercomponent zullen we moeten controleren op de schermgrootte van het venster. Als het de grootte heeft van een telefoonscherm, wordt onze mobiele weergave weergegeven. Als het hoger is dan het aantal pixels van een normaal telefoonscherm, wordt een desktopweergave weergegeven. Daarom maken we twee componenten en noemen ze MobileView en DesktopView. Beide componenten zullen onze modules bevatten.
Nadat deze stappen zijn voltooid, ziet het bestand App.js er als volgt uit:
Opmerking : als u in het dashboard een toegangstoken aan een gebruiker toekent, moet u de variabele accessToken doorgeven aan de SBProvider, zoals te zien is in het bovenstaande codevoorbeeld.
Bureaubladweergave
De desktopweergave is de standaard Sendbird-lay-out met de kanalenlijst aan de linkerkant en het gesprek aan de rechterkant. Onze DesktopView-component retourneert een div met een className van "sendbird-app__wrap". Deze className is al vormgegeven door het standaardontwerp van Sendbird dat de kanaallijst naast het gespreksvenster weergeeft.
Vervolgens moeten we de hoogte van de sendbird-app__wrap div instellen op 100vh, wat de grootte is van het hele vensterscherm. Binnen deze div plaatsen we de componenten kanaallijst, kanaalconversatie en kanaalinstellingen.
Importeer de kanalenlijst, kanalen en kanaalinstellingen. Ze worden SBChannelList, SBConversation en SBChannelSettings genoemd:
We voegen een div toe rond elke component en door de volgende classNames te gebruiken, wordt de standaard UIKit-stijl toegepast op onze componenten. De volgende zijn de classNames voor elke component:
- Voor de kanaallijst is de div className "sendbird-app__channellist-wrap"
- Voor het kanaalgesprek is de div className "sendbird-app__conversation-wrap"
- Voor de kanaalinstellingen is de div className "sendbird-app__settingspanel-wrap"
In de zenderlijstcomponent gebruiken we de eigenschap onChannelSelect om het kanaal in te stellen waarop vanuit de zenderlijst wordt geklikt. Het kanaalgesprek zal de channelUrl doorgeven en onChatHeaderActionClick gebruiken, zodat we kunnen luisteren 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. Bekijk de codevoorbeelden in het gedeelte Aanpassingen hieronder om te zien hoe dit eruit ziet.
Mobiele weergave
In de weergave van het mobiele apparaat wordt de component met de kanaallijst of de component met de kanaalconversatie weergegeven op het scherm. Als een gebruiker op de kanaallijst staat en op een conversatie klikt, wordt het conversatievenster weergegeven. Als de gebruiker klikt om van het gesprek naar de zenderlijst te gaan, wordt de zenderlijst weergegeven op het scherm.
Voor de mobiele weergave retourneren we een div met de className "mobile-view__wrap" en daarin plaatsen we een voorwaarde waarbij als het huidige kanaal niet is ingesteld, het de kanaallijstcomponent retourneert. Anders retourneert het het kanaalgesprekvenster en de instellingencomponent. De instellingencomponent wordt alleen weergegeven als de gebruiker op een knop in het gespreksvenster klikt om het instellingenmenu te openen.
Stel in de stylesheet het element met de className "mobile-view__wrap" en "sendbird-app__conversation-wrap" hoogte in op 100vh zodat het het hele vensterscherm beslaat.
We zullen voor elk onderdeel dezelfde eigenschappen gebruiken als voorheen voor de DesktopView. Gebruik voor de zenderlijst de eigenschap onChannelSelect en disableAutoSelect. De eigenschap disableAutoSelect wordt gebruikt zodat de zenderlijst niet automatisch de eerste zender in de lijst weergeeft.
In de desktopweergave worden de kanalenlijst en het kanaalgesprek naast elkaar weergegeven. Voor de mobiele weergave bekijken we echter alleen de kanaallijst of het kanaalgesprek, dus de automatische selectie moet worden uitgeschakeld. Als u disableAutoSelect niet opneemt, zult u merken dat de weergave constant het eerste kanaal in het gespreksvenster weergeeft en u niet toestaat om terug te gaan naar de kanaallijst, aangezien het constant dat kanaal aan het renderen is. Daarom wordt de eigenschap disableAutoSelect gebruikt om het kanaal te selecteren dat u in het gespreksvenster wilt bekijken en om over te schakelen van het bekijken van de kanalenlijst naar het gesprek.
Vervolgens willen we boven de SBConversation-component een terugknop toevoegen. De terugknop wordt weergegeven in het kanaalgesprek en ga terug om onze kanaallijst te bekijken. De gesprekscomponent geeft de channelUrl door en gebruikt de onChatHeaderActionClick. De onChatHeaderActionClick schakelt de instellingenbalk om te openen. De component SBChannelSettings gebruikt de eigenschap channelUrl en onCloseClick om het instellingenmenu te sluiten.
Aanpassingen
We kunnen beginnen met het toevoegen van aanpassingen om uw chat meer een WhatsApp-achtige stijl te geven. In zowel DesktopView als MobileView maken we een functie die de instellingenbalk verbergt en een functie die de instellingenbalk weergeeft.
Om de instellingenbalk binnen de functie te verbergen, pakken we het element met de className "sendbird-app__conversation-wrap" en stellen de rechtermarge in op 0px. Deze functie wordt geactiveerd in de SBChannelSettings met behulp van de eigenschap onCloseClick. Om de instellingenbalk te openen, roept het in de component Channel binnen de eigenschap onChatHeaderActionClick de renderSettingsBar aan waar het het element met de className "sendbird-app__conversation-wrap" pakt en de rechtermarge instelt op 318px.
Het openen van de instellingen zal dus de lay-out van het gespreksvenster veranderen, zodat er aan de rechterkant van de pagina ruimte is voor het menu. Wanneer vervolgens op het instellingenmenu wordt geklikt om te sluiten, wordt het gespreksvenster uitgebreid naar waar de instellingenbalk eerder was.
Om het instellingenmenu te laten verschijnen, willen we wat CSS toevoegen om het correct in de vensterweergave te plaatsen:
Vanaf hier kunt u eventuele CSS-aanpassingen wijzigen om te laten zien hoe u wilt dat het instellingenmenu wordt gepositioneerd.
Met deze implementaties retourneert de MobileView dit:
En de DesktopView retourneert dit:
kleurSet
Vervolgens willen we de eigenschap colorSet in de SendbirdProvider gebruiken om de kleuren te definiëren waaruit het thema van UIKit bestaat. Nadat we onze colorSet hebben gedefinieerd, moeten we ervoor zorgen dat deze wordt doorgegeven aan de SendbirdProvider-component.
Voor ons voorbeeld stellen we de variabele –sendbird-light-primary-100 in op lichtgroen. Deze kleur wordt in de kanaallijst toegepast als de achtergrond van het geselecteerde kanaal, de achtergrondkleur van de container voor een emoji-reactie en de achtergrondkleur wanneer de huidige gebruiker zijn eigen bericht bewerkt. Voor ons voorbeeld kunnen we de kleur wijzigen om onze uitgaande berichten af te stemmen op een lichtere tint 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 nieuw kanaal aan in de kanalenlijst, evenals op de pictogrammen zoals het instellingenpictogram in het kanaalgesprek en alle pictogrammen in het instellingenmenu.
Vervolgens stellen we de -sendbird-light-primary-400 in op een iets donkerdere tint groen. De elementen die –sendbird-light-primary-400 gebruiken, omvatten de achtergrond voor het aanwijzen van uitgaande berichten, het aanwijzen van de knop Opslaan wanneer u uw eigen bericht wilt bewerken en het aanwijzen van de knop Maken om een nieuw kanaal te maken.
Een belangrijke colorSet-variabele om op te merken 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 wijzigen 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. We raden u aan de volledige lijst met colorSet-variabelen te bekijken .
De app-functie zou er nu zo uit moeten zien:
Kanaalaanpassingen
Voor wat finishing touch voegen we CSS toe. Voor inkomende berichten willen we het profielafbeeldingpictogram naast de gebruikersnaam verwijderen. Zodra we de profielafbeelding van de gebruiker hebben verwijderd, willen we de min-width-styling verwijderen die erop is toegepast, zodat er geen lege ruimte is waar de avatar eerder was.
Aanpassingen van de zenderlijst
In de kop van de kanaallijst willen we de bijnaam en ID van de huidige gebruiker verwijderen. In plaats van CSS te gebruiken om dit doel te bereiken, kunt u ook ChannelList's UI-component ChannelListHeader gebruiken om uw eigen specifieke ontwerp aan te passen om de standaardlay-out te overschrijven.
Voor de kanaalvoorbeeldcomponent stellen we de weergave in op geen op het aantal leden dat wordt weergegeven naast de naam van het groepskanaal. Een andere optie om uw aangepaste gebruikersinterface voor het kanaalvoorbeeld te ontwerpen, is het gebruik van ChannelList's renderChannelPreview-eigenschap die de standaard Sendbird-header zou vervangen door uw eigen aangepaste component. Als je de code wilt zien, bekijk dan de volledige CSS-stylesheet !
Dit is het eindresultaat op een desktop:
En zo ziet het eruit op een mobiel apparaat:
Gevolgtrekking
Gefeliciteerd! Je hebt nu een WhatsApp-messenger-kloon gebouwd in React. Je hebt een functionele berichtenimplementatie in WhatsApp-stijl die is samengesteld uit kerncomponenten en modules van de Sendbird UIKit. Vanaf hier kunt u uw chatervaring opbouwen met de essentiële elementen die passen bij de behoeften van uw toepassing.
Bekijk deze GitHub-repository voor een overzicht van wat we hebben doorlopen. Voor meer informatie kunt u ook onze documenten bekijken of de schat aan UIKit-zelfstudies verkennen op onze ontwikkelaarsportal . Bekijk de communityforums of neem contact met ons op als je hulp nodig hebt met de Sendbird UIKit. Onze experts staan altijd klaar om te helpen!
Veel plezier met het bouwen van je WhatsApp-messenger-kloon! 💻
