Engenharia

Como construir um clone do WhatsApp messenger em Reagir com o Sendbird UIKit

Blog author
Michelle Wong Developer Advocate
Share
Como construir um clone do WhatsApp messenger em Reagir com o Sendbird UIKit

Com mais de
2 mil milhões de utilizadores
e
100 mil milhões de mensagens
trocado todos os dias, WhatsApp é o
aplicação de mensagens mais popular
no mundo. Embora a sua facilidade de utilização das mensagens do utilizador para o utilizador e a capacidade de ter conversas com empresas tenham contribuído imensamente para a sua popularidade, o WhatApp tem
enfrentou flak
para o aumento do número de empresas que enviam spam aos utilizadores com mensagens promocionais.

As marcas podem evitar esta questão através da construção
conversação em sala
. Um chat de contexto rico em conteúdo significa que as importantes actualizações, notícias e anúncios de uma empresa não se perderão numa caixa de entrada de mensagens que transborda com spam. O chat in-app também proporciona uma experiência de mensagens realistas ao mesmo tempo que dá às marcas o controlo responsável dos dados dos utilizadores. Isto é importante porque as mensagens para as empresas podem muito bem tornar-se uma parte importante dos alicerces sobre os quais uma marca é construída. De facto, um porta-voz da Meta
recentemente comentado
que “Mensagens é a nova forma de fazer negócios, melhor do que um e-mail ou uma chamada telefónica”.

É por isso que, neste blogue, vamos descobrir como construir um clone do WhatsApp messenger em React. Para este projecto, vamos utilizar Sendbird UIKit para Reagir. O Sendbird UIKit permite aos programadores construir uma experiência de conversação à medida com componentes de IU altamente personalizáveis. Neste blogue, iremos compreender como os componentes fornecidos pela UIKit compõem cada aspecto da nossa integração personalizada para atingir o nosso objectivo – construir um clone do WhatsApp messenger em React.

No final deste blogue, isto é o que terá construído para o ambiente de trabalho:

Clone do WhatsApp messenger para o ambiente de trabalho

E isto é para móveis:

O que é o clone do mensageiro da Apple para telemóvel

Começar com o seu clone do WhatsApp messenger

Para começar, crie uma aplicação no
Painel de instrumentos Sendbird
. Aqui, pode aceder a tudo o que é fornecido no seu serviço de chat. Uma vez criada uma aplicação, terá de guardar o ID da aplicação que é gerada para inicializar o SDK do Chat na sua aplicação de reacção.

Gerar uma aplicação React e instalar o Sendbird UIKit for React com npm ou fio:

Uma vez instalado o UIKit, podemos importar do UIKit os componentes necessários para a nossa aplicação.

Componentes e módulos para um clone do WhatsApp messenger em React

Para começar, utilizaremos o SendbirdProvider como um invólucro geral para os múltiplos módulos que vamos incluir na nossa aplicação.

Para o nosso exemplo, iremos utilizar os módulos ChannelList, Channel, e ChannelSettings. Com estes três módulos, vamos criar uma vista móvel e uma vista de secretária. A vista móvel irá render ou a lista de canais ou ambos os menus de conversação e definições de canais em conjunto. Para a vista do ambiente de trabalho, teremos a lista de canais e a conversa de canal lado a lado.

Primeiro, vamos importar a folha de estilo SendbirdProvider e UIKit no ficheiro App.js:

Nota: Aqui importamos o SendbirdProvider e referimo-nos a ele na nossa aplicação como SBProvider. Pode escolher aquilo a que gostaria de se referir como na sua própria candidatura.

Depois, aplicar o seguinte CSS à nossa folha de estilos, que estará no ficheiro styles.css:

Agora, queremos que a aplicação funcione numa vista de secretária, bem como numa vista móvel. Assim, dentro da nossa componente de fornecedor, teremos de verificar o tamanho do ecrã da janela. Se for do tamanho de um ecrã de telefone, tornará a nossa visão móvel. Se estiver acima do número de pixels de um ecrã de telefone típico, irá render uma vista de secretária. Por conseguinte, vamos criar dois componentes e nomeá-los MobileView e DesktopView. Ambos estes componentes conterão os nossos módulos.

Após estas etapas estarem concluídas, o ficheiro App.js terá este aspecto:


Nota

: No tablier, se emitir um código de acesso a um utilizador, terá de passar a variável accessToken para o SBProvider, tal como se vê na amostra de código acima.

Vista do ambiente de trabalho

A vista da área de trabalho é o layout padrão Sendbird com a lista de canais no lado esquerdo e a conversa no lado direito. O nosso componente DesktopView devolve um mergulho com uma classeNome de “sendbird-app__wrap”. Esta classeNome já está desenhada pelo design padrão da Sendbird que mostra a lista de canais ao lado da janela de conversação.

Depois, temos de definir a altura do sendbird-app__wrap div para ser 100vh, que é o tamanho de todo o ecrã da janela. Dentro deste div, colocaremos a lista de canais, conversação de canais, e componentes de definições de canais.

Importar a lista de canais, os módulos de canal, e as definições dos canais. Serão referidos como SBChannelList, SBConversation, e SBChannelSettings:

Acrescentaremos um mergulho em torno de cada componente e, utilizando os seguintes nomes de classe, aplicará o estilo padrão do UIKit aos nossos componentes. Seguem-se os nomes de classe para cada componente:

  1. Para a lista de canaisa div className é “sendbird-app__channellist-wrap”.
  2. Para a conversa de canal, a div className é “sendbird-app__conversation-wrap”.
  3. Para a canal configurações, a div className é “sendbird-app__settingspanel-wrap”.

Na componente de lista de canais, usaremos a propriedade onChannelSelect para definir o canal que está a ser clicado a partir da lista de canais. A conversa do canal passará no canalUrl e utilizará o onChatHeaderActionClick para que possamos ouvir quando o utilizador quiser abrir a barra de definições. Para as definições do canal, passe na propriedade channelUrl e use onCloseClick para fechar a vista da barra de definições. Consulte as amostras de código na secção Personalizações abaixo para ver como isto se parece.

Vista móvel

A visualização do dispositivo móvel terá ou a componente de lista de canais ou a componente de conversação de canais apresentada no ecrã. Se um utilizador estiver na lista de canais e clicar numa conversa, a janela de conversação irá renderizar. Se o utilizador clicar para ir da conversa para a lista de canais, a lista de canais irá render para o ecrã.

Para a vista móvel, devolveremos um mergulho com a classeNome “mobile-view__wrap” e dentro deste, colocar uma condição onde se o canal actual não estiver definido, então devolverá a componente da lista de canais. Caso contrário, devolverá a janela de conversação do canal e a componente de definições. A componente de definições só é renderizada se o utilizador clicar num botão na janela de conversação para abrir o menu de definições.

Na folha de estilo, definir o elemento com a classeNome “mobile-view__wrap” e “sendbird-app__conversation-wrap” com altura de 100vh, de modo a ocupar todo o ecrã da janela.

Vamos utilizar para cada componente as mesmas propriedades que utilizámos anteriormente para o DesktopView. Para a lista de canais, utilizar a propriedade onChannelSelect, bem como desactivarAutoSelect. A propriedade disableAutoSelect é utilizada para que a lista de canais não torne automaticamente o primeiro canal da lista.

A vista da área de trabalho mostra a lista de canais e a conversa de canal lado a lado. No entanto, para a visualização móvel, estamos apenas a visualizar a lista de canais ou a conversa de canal, pelo que a selecção automática deve ser desligada. Se não incluir o disableAutoSelect, descobrirá que a vista irá constantemente renderizar o primeiro canal dentro da janela de conversação e não lhe permitirá voltar à lista de canais, uma vez que está constantemente a renderizar esse canal. Portanto, a propriedade disableAutoSelect é utilizada para seleccionar o canal que deseja ver na janela de conversação e mudar da visualização da lista de canais para a conversação.

A seguir, acima da componente de SBConversation, queremos adicionar um botão de retrocesso. O botão voltar será exibido na conversa do canal e voltar para ver a nossa lista de canais. A componente de conversação passará no canalUrl e utilizará o onChatHeaderActionClick. O onChatHeaderActionClick irá alternar a barra de definições para abrir. O componente SBChannelSettings utilizará a propriedade channelUrl e onCloseClick para fechar o menu de definições.

Personalizações

Podemos começar a adicionar personalizações para dar ao seu chat um estilo mais semelhante ao Whatsapp. Tanto no DesktopView como no MobileView, iremos criar uma função que irá esconder a barra de definições e uma função que irá tornar a barra de definições.

Para ocultar a barra de ajustes, dentro da função, vamos agarrar o elemento com a classeNome “sendbird-app__conversation-wrap” e definir a sua margem direita para 0px. Esta função será activada no SBChannelSettings usando a propriedade onCloseClick. Para abrir a barra de ajustes, na componente Canal dentro da propriedade onChatHeaderActionClick, chamará a barra de renderSettingsBar onde agarra o elemento com a classeName “sendbird-app__conversation-wrap” e define a margem direita para 318px.

Assim, a abertura das definições irá alterar a disposição da janela de conversação para que haja espaço no lado direito da página para que o menu exista. Depois, quando o menu de definições é clicado para fechar, a janela de conversação irá expandir-se até onde a barra de definições estava anteriormente.

Para que o menu de configurações apareça, queremos adicionar algum CSS para o posicionar correctamente na vista da janela:

A partir daqui, pode alterar quaisquer personalizações do CSS para aparecer como gostaria que o menu de definições fosse posicionado.

Com estas implementações, o MobileView devolverá isto:

E o DesktopView devolve isto:

colorSet

A seguir, queremos utilizar o
colorSet
no SendbirdProvider para definir as cores que compõem o tema da UIKit. Uma vez definida a nossa colorSet, temos de assegurar a sua passagem para a componente SendbirdProvider.

Para o nosso exemplo, vamos definir a variável –sendbird-light-primary-100 para ser verde claro. Esta cor é aplicada na lista de canais como o fundo do canal seleccionado, a cor de fundo do recipiente para uma reacção emoji, e a cor de fundo quando o utilizador actual edita a sua própria mensagem. Para o nosso exemplo, podemos mudar a cor para combinar as nossas mensagens de saída para uma tonalidade mais clara de verde.

A seguir, queremos definir –sendbird-light-primary-300 para ser verde. Esta variável é utilizada na cor de fundo das mensagens enviadas, no botão criar um novo canal na lista de canais, bem como nos ícones tais como o ícone de definições na conversa do canal e todos os ícones dentro do menu de definições.

Em seguida, colocaremos o –sendbird-light-primary-400 para ser uma tonalidade ligeiramente mais escura de verde. Os elementos que utilizam –sendbird-light-primary-400 incluem o fundo para em pairar das mensagens enviadas, em pairar do botão guardar quando quiser editar a sua própria mensagem, e em pairar do botão criar para criar um novo canal.

Uma importante variável de corSet a notar é -sendbird-light-background-50, que é chamada para a cor de fundo de cada componente. A cor padrão actual é o branco. Em vez de mudar esta variável para ter uma cor de fundo uniforme ou deixar toda a cor de fundo da aplicação branca, vamos implementar CSS para mudar a cor de fundo da janela de conversação para bege claro. Encorajamo-lo a verificar a totalidade
lista das variáveis do colorSet
.

A função App deve ter este aspecto agora:

Personalizações de canais

Para alguns retoques finais, acrescentaremos o CSS. Para mensagens recebidas, queremos remover o ícone da imagem do perfil ao lado do nome do utilizador. Uma vez removida a imagem de perfil do utilizador, queremos remover o estilo de largura mínima que lhe é aplicado para que não haja espaço vazio onde o avatar estava antes.

Personalizações da lista de canais

No cabeçalho da lista de canais, queremos remover o apelido e o ID do utilizador actual. Em vez de usar o CSS para atingir este objectivo, pode alternativamente usar o componente ChannelListCheader do ChannelList para personalizar o seu próprio desenho específico de modo a sobrepor-se ao layout padrão.

Para a componente de pré-visualização do canal, não iremos definir a visualização para nenhuma na contagem de membros que é exibida ao lado do nome do canal do grupo. Outra opção para conceber a sua IU personalizada para a pré-visualização do canal seria utilizar a propriedade renderChannelPreview do ChannelList, que substituiria o cabeçalho Sendbird padrão com o seu próprio componente personalizado. Se desejar ver o código, por favor veja o
folha de estilo CSS completa
!

Este é o resultado final quando se encontra num ambiente de trabalho:

Clone do WhatsApp messenger para o ambiente de trabalho

E isto é o que parece num dispositivo móvel:

O que é o clone do mensageiro da Apple para telemóvel

Conclusão

Parabéns! Construiu agora um clone do WhatsApp messenger em React. Tem uma implementação funcional de mensagens em estilo WhatsApp composta por componentes e módulos centrais do Sendbird UIKit. A partir daqui, poderá construir a sua experiência de chat com os elementos essenciais para se adequar às necessidades da sua aplicação.

Por favor, veja isto
Repositório GitHub
para uma visão geral do que passámos. Para mais informações, pode também consultar o nosso
docs
ou explorar a riqueza de
Tutoriais do UIKit
sobre o nosso
porta do revelador
l. Consulte os fóruns comunitários ou contacte-nos se precisar de ajuda com o Sendbird UIKit. Os nossos peritos estão sempre prontos a ajudar!

Desfrute da construção do seu clone do WhatsApp messenger! 💻

Categories: Engenharia