Engenharia

Uma visita ao Sendbird UIKit for React: Os componentes e módulos essenciais que precisa de conhecer

Blog author
Michelle Wong Developer Advocate
Share
Uma visita ao Sendbird UIKit for React: Os componentes e módulos essenciais que precisa de conhecer

Construção em caixa-forte
chat
é um esforço fascinante mas complexo. Quer esteja a construir para
jogos
,
retalho
,
saúde digital
ou
on-demand
é necessário ter um
interface de conversa simplificada
para a sua aplicação web ou móvel. O Sendbird UIKit facilita a implementação de uma IU de conversação intuitiva. O Sendbird UIKit para Reagir fornece os recursos para construir uma experiência de chat funcional e atractiva com componentes UI pré-construídos do SDK Sendbird. O UIKit for React é útil porque é fundamental para os programadores poderem seleccionar os elementos necessários para construir um chat rico em funcionalidades e racionalizado da forma como o imaginam.

Neste blogue, vamos conhecer os componentes do Sendbird UIKit for React, bem como cada um dos seus casos de utilização. No final deste blogue, compreenderá como implementar estes componentes para criar a sua própria integração personalizada.

UIKit para Reagir: Criar o ambiente

Para começar, crie um pedido sobre o
Painel de instrumentos Sendbird
. É aqui que pode aceder a tudo o que é necessário para o seu serviço de chat, incluindo as suas aplicações, utilizadores, mensagens, e canais. Uma vez criada uma aplicação, será necessário o ID da aplicação para inicializar o SDK do Chat.

A seguir, criar um novo ambiente de projecto usando o create-react-app. Depois adicionar um ficheiro .env para armazenar o ID da aplicação, ID do utilizador e nickname que foi gerado a partir do seu painel de controlo Sendbird. Agora, instale o Sendbird UIKit através de npm ou fio:

Uma vez instalado o UIKit for React, queremos implementá-lo na aplicação, utilizando componentes. A primeira de que vamos tomar conhecimento é a componente App.

Componente de aplicação

O componente App é uma colecção de componentes UI que criam uma interface de conversação funcional. A App, ou a componente App, irá tornar uma visualização contendo uma lista de canais, conversação de canais, e definições de canais, tudo dentro de uma componente.

Para utilizar isto, importar a componente SendbirdApp do UIKit e a folha de estilo UIKit no ficheiro App.js:

 

A componente App requer um ID de aplicação e um ID de utilizador a ser transmitido. O código seguinte descreve como se utilizaria a componente App:

Em seguida, especificar a altura e largura da interface de conversação na folha de estilo:

Certifique-se de importar esta folha de estilo no ficheiro App.js.

Neste momento, temos uma aplicação de chat a funcionar com sucesso, na qual se pode criar um novo canal e enviar mensagens. Deve ter este aspecto:

Uma aplicação de chat bem sucedida

Se desejar personalizar a sua experiência de conversação, fá-lo utilizando os componentes e módulos principais fornecidos pela UIKit. Primeiro, vamos mergulhar nos componentes centrais.

Componentes principais no UIKit para Reagir

Os componentes centrais são os principais blocos de construção do UIKit. Os componentes principais incluem o SendbirdProvider, sendbirdSelectors, userSendbirdStateContext, e comSenbird(). Cada um destes armazena e opera com base em todos os dados necessários para executar uma aplicação.

Como funcionam os componentes principais? Eles obtêm dados da instância do Chat SDK, ligam-se ao servidor Sendbird, falam com os módulos para eventos que ocorrem na visualização, e configuram características e localização. Estes componentes funcionam para criar e executar vistas; contudo, não fornecem nem exibem uma IU. É aí que os módulos entram em jogo: os módulos fornecem uma visão UI para o componente central que está a ser utilizado.

O
SendbirdProvider
é o componente central mais importante porque fornece o contexto e transmite os dados do Chat SDK, bem como o estado actual, a qualquer componente infantil. O SendbirdProvider precisa de estar no nível superior para que toda a aplicação tenha acesso aos dados do Sendbird.

Com o SendbirdProvider, podemos utilizar o
useSendbirdStateContext()
componente para implementar o Sendbird Chat SDK para Javascript em componentes infantis do SendbirdProvider. A componente sendbirdStateContext permite-nos aceder ao estado de SendbirdProvider, ligar-se a acções SDK, e pode ser utilizada com sendbirdSelectors para implementar funcionalidades como o envio ou actualização de uma mensagem.

Antes do UIKit v4, o
comSendbird()
foi utilizado para passar dados entre o Chat SDK e os módulos, mas com a actualização do UIKit, recomendamos que em vez disso se utilize oSendbirdStateContext().

Finalmente, o
sendbirdSelectors
são utilizados para realizar operações de dados e dar-lhe acesso ao SDK. O
principais funções do selector
incluem getSdk, getCreateOpenChannel, e getDeleteMessage.

Manipuladores

A UIKit fornece vários manipuladores de eventos para gerir actividades e eventos que ocorrem na aplicação do cliente. Desde a actualização de v3 para v4 no
Bate-papo SDK
UIKit implementado
manipuladores de eventos de canal
que pode ser importado em vez de chamar o gestor do canal a partir da sdkInstance. Os manipuladores de eventos do canal incluem ConnectionHandler, GroupChannelHandler, OpenChannelHandler, e UserEventHandler. A seguir, o SDK utiliza manipuladores de sessão para renovar uma ficha de sessão. Um token de sessão é utilizado para autenticar com segurança um utilizador quando o SDK do Chat liga o utilizador ao servidor Sendbird onde pode enviar-lhe pedidos de dados antes do token expirar.

Módulos no UIKit para Reagir

Agora que aprendemos sobre os componentes centrais do UIKit, é importante aprender sobre os módulos e como cada módulo funciona em conjunto com os componentes centrais. Módulos funcionam como componentes inteligentes que fornecem uma IU personalizável. Estes módulos contêm fornecedores e componentes UI pré-construídos que criam uma vista de conversação funcional.

Os oito módulos no UIKit são:

  1. Lista de canais
  2. Criar um canal
  3. Canal de grupo
  4. Configuração de canais de grupo
  5. Canal aberto
  6. Definições de canais abertos
  7. Pesquisa de mensagens
  8. Editar perfil de utilizador

Cada módulo tem um fornecedor de contexto e um conjunto de componentes UI. O fornecedor gere os dados necessários do SDK do Chat enquanto os componentes do UI tornam as interfaces para exibir a vista do módulo. Para passar dados entre o fornecedor e os componentes da IU, utilizamos um gancho UseContext. Os ganchos de contexto devem estar dentro do fornecedor, a fim de permitir que cada componente da IU tenha acesso aos dados do fornecedor. Embora exista um conjunto padrão de componentes de IU para cada módulo, todos os componentes de IU são personalizáveis através da definição dos adereços de entrada com componentes personalizados.

ChannelList

O
ChannelList
mostra uma lista de canais de grupo dos quais o utilizador actual é membro. Algumas das propriedades da ChannelList incluem onBeforeCreateChannel, onChannelSelect, e renderChannelPreview.

As propriedades onBeforeCreateChannel e onChannelSelect permitem realizar acções à medida que o utilizador interage com a interface de utilizador do UIKit. A propriedade renderChannelPreview permite-lhe substituir a IU padrão da pré-visualização do canal com o seu próprio componente personalizado. Isto pode ser usado para definir a pré-visualização do canal para simplesmente ter o nickname do utilizador exibido na lista de canais.

O fornecedor de contexto utilizado para este módulo é o
ChannelListProvider
. Este fornecedor gere a lógica e os dados utilizados na visualização da lista de canais. Assim, se a sua aplicação apenas requerer a visualização de uma lista de canais, pode usar o módulo ChannelList para exibir a visualização de uma lista de canais e ter esse módulo envolvido dentro do ChannelListProvider, o qual irá passar quaisquer dados necessários para a ChannelList.

Também poderia usar o
useChannelListContext
gancho para ter acesso aos dados do fornecedor. Algumas das propriedades de usoContexto da Lista de Canais são inicializadas, carregamento, e Canal actual.

Os componentes da UI que compõem a visão da ChannelListUI são ChannelListUI, ChannelListHeader, e ChannelPreview. O ChannelListUI mostra o ecrã básico do módulo, incluindo os cabeçalhos e a pré-visualização do canal. Inclui uma lista de propriedades a utilizar tais como renderHeader, renderPlaceHolderError, e renderPlaceHolderLoading. O ChannelListHeader é o cabeçalho do ChannelListUI que exibe o título e um botão para criar um novo canal. Três propriedades a utilizar com esta UI são renderHeader, renderIconButton, e permitirProfileEdit. O ChannelPreview A componente UI mostra um único canal na lista de canais. As propriedades para ChannelPreview são channel, onClick, renderChannelAction, e isActive.

Eis como pode implementar a ChannelListListProvider usando o ChannelListProvider e usarChannelListContext:

Este é o desenho por defeito do componente ChannelList:

IU por defeito da componente ChannelList

CreateChannel

O
CreateChannel
é utilizado para criar um novo canal de grupo. CreateChannel requer que a propriedade do canalUrl lhe seja transmitida. Outras propriedades opcionais incluem onBeforeCreateChannel, onCreateChannel, e onCancel. Todas estas três propriedades são executadas em determinadas acções dentro da interface de utilizador do UIKit, permitindo-lhe passar para dentro e executar o seu próprio conjunto de operações.

Por exemplo, pode usar o onBeforeCreateChannel para activar uma função a ser chamada à medida que o utilizador clica para criar um canal de grupo e antes que este gere um novo canal. A função chamada, por exemplo, poderia definir a imagem do grupo para o canal que está a ser criado. A utilização da propriedade onCreateChannel permitir-lhe-á implementar uma acção logo após a criação do canal. Pode utilizar isto para transmitir uma mensagem de sucesso no ecrã assim que o seu canal for criado. Se quiser desencadear um evento quando o botão ‘cancelar’ é clicado, pode usar a propriedade onCancel. Pode optar por implementar a sua própria interface personalizada a partir daqui e chamar uma função para tornar uma vista a perguntar se tem a certeza de que quer cancelar a criação do canal.

Os dois objectos de contexto que podem ser utilizados para criar um canal de grupo e passar dados do fornecedor para os componentes da interface de utilizador são os
CreateChannelProvider
e
usarCriarCanal
anzol. CreateChannelProvider requer que a propriedade channelUrl seja passada para dentro. Outras propriedades opcionais são crianças, onCreateChannel, onBeforeCreateChannel, e queries.applicationUserListQuery.

Os componentes UI que compõem a visão CreateChannelUI, InviteMembers, e SelectChannelType são CreateChannelUI. CreateChannelUI e SelectChannelType são usados em conjunto para mostrar o primeiro passo do módulo CreateChannel. InviteMembers apresenta o segundo passo após a criação do canal.
CreateChannelUI
tem propriedades onCancelar e renderStepOne.
SeleccioneChannelType
torna a visualização onde o utilizador actual pode escolher o tipo de canal a criar.
InviteUsers
exibe uma vista onde o utilizador actual pode convidar outros utilizadores a aderir ao canal. Tanto SelectChannelType como InviteMembers têm uma propriedade onCancel.

O código seguinte mostra como usar o módulo CreateChannel com o CreateChannelProvider e usar o gancho CreateChannelChannel:

Abaixo está o layout padrão do módulo CreateChannel:

Criação de um novo canal

Acrescentar utilizadores a um novo canal

Canal

O
Canal
apresenta uma conversa de canal em grupo. Os utilizadores só podem aceder a um canal de grupo se forem convidados a ser um membro do canal. Este módulo requer a definição de uma propriedade channelUrl. Outras propriedades opcionais incluem isReactionEnabled, showSearchIcon, e onBeforeSendUserMessage.

O isReactionEnabled e o showSearchIcon controlam as propriedades do isReactionEnabled e mostramSearchIcon se a característica está ou não a ser utilizada e exibida. A propriedade onBeforeSendUserMessage pode ser utilizada para executar lógica personalizada em segundo plano quando o utilizador clica para enviar uma mensagem, mas completar as operações antes de a mensagem ser enviada para o canal. Portanto, ao clicar em enviar uma mensagem, activará a função que passar para completar uma acção, e depois enviar a mensagem. Isto pode ser útil num caso em que se pretenda verificar o texto da mensagem a ser enviada e, se contiver uma palavra específica, então, despoletar uma animação para disparar à medida que a mensagem é então enviada.

Os dois objectos de contexto utilizados para armazenar e gerir os dados utilizados para construir um canal de grupo são os
ChannelProvider
e
useChannelContext
anzol. O ChannelProvider requer uma propriedade channelUrl e inclui propriedades adicionais tais como isMessageGroupingEnabled, isReactionEnabled, e highlightedMessage. As propriedades opcionais do gancho de contexto ChannelContext incluem channelUrl, startPoint, e onBeforeSendFileMessage.

Os componentes UI no módulo Canal são ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator, e UnreadCount. ChannelUI exibe o ecrã básico do módulo e tem várias propriedades tais como renderPlaceholderLoader, renderMessageInput, e renderTypingIndicator. ChannelHeader é o cabeçalho da componente ChannelUI que mostra o título do canal, um ícone de pesquisa de mensagens, e um ícone de informação do canal. MessageInput é o componente em que os utilizadores podem introduzir uma mensagem ou enviar uma mensagem de ficheiro.

MessageList exibe uma lista de todas as mensagens num canal de grupo e tem três propriedades: renderMessage, renderPlaceholderEmpty, e renderCustomSeperator. FileViewer mostra todas as mensagens contendo ficheiros de imagem ou de vídeo e tem duas propriedades opcionais: onCancel e mensagem. FrozenNotification é um componente que exibe um banner alertando os utilizadores de que o canal actual está congelado. Mensagem é um componente dentro da MessageList que mostra uma única mensagem no canal. Requer uma propriedade de mensagem e tem propriedades opcionais adicionais tais como hasSeperator, chainTop, e renderEditInput.
RemoveMessageModal
mostra um modal que confirma que a mensagem seleccionada será eliminada do canal e tem duas propriedades opcionais: onCancel e mensagem.
TypingIndicator
mostra que membro do canal está activamente a digitar uma mensagem. E por último, UnreadCount mostra quantas mensagens não lidas estão num canal. As propriedades de UnreadCount são contagem, tempo, e onClick.

O seguinte código é como implementar o módulo Canal usando o ChannelProvider e usar o ChannelContext:

Este é o layout por defeito do componente do Canal:

A disposição dos componentes do canal

ChannelSettings

O
ChannelSettings
exibe um menu de informação de canais de grupo e opções de configuração. Os membros podem consultar uma lista de membros, convidar um utilizador para o canal, e abandonar o canal. Se o utilizador for um operador de canal, então terá à sua disposição opções adicionais (nas definições), tais como poder adicionar ou remover operadores, silenciar ou proibir membros, ver uma lista de utilizadores silenciados e proibidos, e abandonar ou congelar o canal.

O ChannelSettings requer uma propriedade channelUrl e tem propriedades opcionais tais como onCloseClick, onChannelModified, e renderLeaveChannel. As propriedades onCloseClick e onChannelModified são desencadeadas por um evento disparado da própria IU e executam a lógica personalizada que você passa. Pode utilizar onClickClick no caso em que um utilizador clica no botão para fechar a barra de definições. Pode passar-lhe uma função onde deseja modificar a IU para não exibir a componente de definições. Se desejar disparar um evento assim que as definições forem alteradas, pode apresentar uma mensagem de sucesso no ecrã utilizando a propriedade onChannelModified. Ao utilizar o ChannelSettings, poderá querer alterar o desenho do botão ‘deixar canal’. Pode fazê-lo usando a propriedade renderLeaveChannel com a qual pode passar na sua própria UI personalizada para o módulo de definições.

Os dois objectos de contexto para construir um menu de definições de canal para este módulo são o ChannelSettingsProvider e usarChannelSettingsContext. O ChannelSettingsProvider requer a entrada de um canalUrl. Algumas outras opções para este fornecedor são onClickClick, onBeforeUpdateChannel e invalidChannel. O
useChannelSettingsContext
O gancho tem múltiplas propriedades que podem ser usadas, tais como onCloseClick, onChannelModified, e onBeforeUpdateChannel.

O conjunto de componentes do ChannelSettings UI que compõem a vista de configuração do grupo de canais são ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel, e UserListItem. ChannelSettingsUI mostra a vista que inclui a vista do perfil do canal, vista do menu de moderação, e botão sair do canal. O componente tem quatro propriedades opcionais: renderPlaceHolderError, renderChannelProfile, renderModerationPanel, e renderLeaveChannel. O ModerationPanel cria a vista do menu de definições para os operadores de canais. Isto inclui uma lista de operadores, membros, utilizadores silenciados e proibidos, um botão de alternância de canais congelados, e a opção de sair do canal. O UserPanel cria a vista do menu de definições para membros do canal que inclui uma lista de membros, opção para convidar outros utilizadores para o canal, e uma opção para deixar o canal. O
ChannelProfile
cria a visualização do perfil do canal incluindo o título do canal, imagem, e botão de edição, permitindo aos utilizadores alterar a informação do canal.
EditDetailsModal
exibe um modal onde os utilizadores podem editar o nome do canal e a imagem do perfil. Tem duas propriedades opcionais que podem ser utilizadas: onSubmit e onCancel. O LeaveChannel modal renderiza quando um utilizador clica para deixar o canal no menu de definições e pede ao utilizador para confirmar esta acção. LeaveChannel tem uma propriedade onSubmit e onCancel que pode ser usada com ela. O UserListItem exibe um utilizador individual dentro de uma lista de utilizadores. Este componente requer a definição de uma propriedade do utilizador e tem três propriedades opcionais: utilizador actual, className, e acção.

Eis como implementar o módulo ChannelSettings usando o ChannelSettingsProvider e usarChannelSettingsContext:

Esta é a IU padrão do ChannelSetting para os não-operadores:

Configuração de canal por defeito UI

Estas são as definições do canal que serão exibidas para os operadores do canal:

IU de configuração de canais para operadores de canais

OpenChannel

Um canal aberto é um canal público que pode lidar com um grande número de utilizadores que interagem dentro de um chat. O
OpenChannel
O módulo requer uma propriedade channelUrl e tem uma gama de propriedades opcionais tais como crianças, isMessageGroupingEnabled, messageLimit, e renderUserProfile.

A propriedade das crianças mostra os componentes infantis do OpenChannel, que são dados fornecidos pelo OpenChannelProvider. O isMessageGroupingEnabled property verifica se a funcionalidade está activada para que saiba como exibir a IU. Se o agrupamento de mensagens estiver activado, cada mensagem que for enviada dentro de um minuto será agrupada numa mensagem. A propriedade MessageLimit fornece o número máximo de mensagens que serão armazenadas na componente OpenChannelMessageList do canal. Se quiser personalizar a pré-visualização do perfil ao clicar no avatar de um utilizador, pode passar no seu próprio componente UI utilizando a propriedade renderUserProfile para substituir o design padrão.

Os objectos de contexto que podem ser usados para o módulo OpenChannel para armazenar e manusear dados são o OpenChannelProvider e usam o ganchoOpenChannel. O OpenChannelProvider requer a definição de uma propriedade channelUrl. Algumas propriedades opcionais incluem isMessageGroupingEnabled, messageLimit, e onChatHeaderActionClick. O
useOpenChannelContext
O gancho de contexto tem uma série de propriedades que podem ser utilizadas, tais como renderUserProfile, currentOpenChannel, e allMessages.

O conjunto de componentes UI que compõem o módulo OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList, e OpenChannelMessage. OpenChannelUI exibe o ecrã básico do módulo e a visualização do cabeçalho, mensagem, e lista de mensagens num canal aberto. OpenChannelUI tem uma lista de propriedades opcionais tais como renderMessage, renderHeader, e renderInput.
OpenChannelHeader
torna o título do canal e o ícone de informação.
OpenChannelInput
é onde os utilizadores podem enviar uma mensagem ou ficheiro de mensagem como uma imagem, vídeo, ou documento. O OpenChannelMessageList exibe uma lista de todas as mensagens num canal aberto. Tem duas propriedades opcionais: renderMessage e renderPlaceHolderEmptyList. OpenChannelMessage mostra a mensagem individual no canal. Este componente requer uma propriedade de mensagem e tem uma série de propriedades opcionais tais como hasSeperator, chainTop, e editDisabled.

Abaixo está como usar o módulo OpenChannel com o OpenChannelProvider e usarOpenChannelContext:

Este é o aspecto padrão do design do OpenChannel:

IU por defeito do OpenChannel

OpenChannelSettings

O
OpenChannelSettings
O módulo mostra um menu de definições tais como fornecer o nome do canal, imagem do canal, o URL da aplicação e uma lista de participantes. Se o utilizador actual for um operador, tem definições adicionais tais como adicionar ou remover operações, ver uma lista de utilizadores silenciados e proibidos, poder silenciar ou proibir participantes, e uma opção para eliminar o canal.

OpenChannelSettings requer a passagem de uma propriedade channelUrl. Algumas outras propriedades fornecidas são onChannelModified, onDeleteChannel, e onClickClickClick. Estas propriedades irão executar um conjunto de operações à medida que o utilizador interage com atributos específicos na IU. Nas definições de canal aberto, ao utilizar onClickClick, pode definir o estado da barra de definições a ser fechada e remover o componente de definições da vista de conversação. A mesma ideia aplica-se quando se usa onChannelModified e onDeleteChannel, onde se o utilizador clicar para guardar quaisquer edições que tenha feito ou se clicar no botão para apagar o canal, pode modificar a IU na sua aplicação para ter um componente personalizado a aparecer no ecrã.

Os dois objectos de contexto usados para construir um menu funcional de definições de canais são o OpenChannelSettingsProvider e usam o ganchoOpenChannelSettingsContext hook. O OpenChannelSettingsProvider requer a passagem de um canalUrl e inclui propriedades adicionais tais como onBeforeUpdateChannel, desactivarUserProfile, e renderizarUserProfile. O
useOpenChannelSettingsContext
hook tem uma lista de propriedades tais como onDeleteChannel, onChanelModified, e setChannel.

O
Componentes da IU
que compõem o módulo global OpenChannelSetting são o OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile, e EditDetailsModal.
OpenChannelSettingsUI
exibe o ecrã básico do módulo que contém a OperatorUI e a ParticipantUI. As duas propriedades opcionais para OpenChannelSettingsUI são renderOperatorUI e renderParticipantList.
OperatorUI
mostra o menu de definições para operadores de canais e tem uma propriedade opcional renderChannelProfile.
ParticipantUI
apresenta uma lista de participantes no canal aberto.
OpenChannelProfile
cria uma vista de perfil de canal que exibe o título e a imagem do canal.
EditDetailsModal
aparece quando um utilizador quer editar o nome do canal e a imagem do perfil. Tem uma propriedade onCancel que pode ser activada quando se clica no botão de cancelamento.

O seguinte código é como utilizar o módulo OpenChannelSettings com o OpenChannelSettingsProvider e usarOpenChannelSettingsContext:

É assim que o OpenChannelSettings é exibido:

A IU padrão das definições de canal

MessageSearch

O
MessageSearch
permite aos utilizadores pesquisar mensagens dentro dos canais de que são membros. É necessário definir uma propriedade channelUrl para a MessageSearch. Adicional opcional
propriedades
estão disponíveis para uso como onResultLoaded, onResultClick, e renderPlaceholderEmptyList.

Ao utilizar o módulo MessageSearch pode querer mostrar todos os resultados de uma pesquisa numa janela separada da IU que aparece como uma camada pop up no topo do chat. Pode fazê-lo utilizando a propriedade onResultLoaded onde uma função é chamada assim que os resultados são recebidos. Usando onResultClick, pode executar uma lógica personalizada assim que um utilizador seleccionar um resultado de pesquisa. A propriedade renderPlaceholderEmptyList permite-lhe criar uma IU personalizada para o titular do lugar quando a lista de pesquisa voltar sem resultados. Assim, quando a lista de pesquisa não tem nada para listar, pode ter uma notificação a aparecer.

Para MessageSearch, pode usar MessageSearchProvider e usar o ganchoMessageSearch para armazenar e gerir dados utilizados para construir uma IU de pesquisa de mensagens. MessageSearchProvider requer que seja especificado um canalUrl e tem propriedades opcionais adicionais tais como onResultClick, messageSearchQuery, e onResultLoaded. O
useMessageSearchContext
O gancho tem uma série de propriedades opcionais tais como onResultLoaded, requestString, e selectedMessageId.

O
MessageSearchUI
é o único componente da IU no módulo MessageSearch e mostra a visualização dos resultados da pesquisa.

Eis como implementar a MessageSearch usando o MessageSearchProvider e usarMessageSearchContext:

A IU padrão do módulo MessageSearch tem este aspecto:

A IU padrão do MessageSearch

EditUserProfile

O
EditUserProfile
permite que o utilizador actual faça alterações ao seu perfil. Ao clicar no seu próprio avatar, aparece uma janela pop-up com a informação do seu perfil. Aqui, os utilizadores têm a opção de editar a sua imagem de perfil, nickname, e podem alternar o tema para estar em modo claro ou escuro.

EditUserProfile tem 4 opcionais
propriedades
que incluem crianças, onCancel, onThemeChange, e onEditProfile. A propriedade de criança é utilizada para ver os componentes de criança no EditUserProfile que o EditUserProfileProvider nos fornece. onCancel é utilizado para executar uma operação quando a IU é accionada a partir do clique do utilizador para cancelar quaisquer edições que este tenha feito. Se desejar adicionar estilo adicional com base no facto de o chat estar em modo claro ou escuro, pode usar o onThemeChange para chamar uma função que implementa CSS personalizados quando um utilizador clica para alterar o tema. Finalmente, onEditProfile permite implementar um conjunto de acções uma vez que o utilizador tenha actualizado o seu perfil.

O UIKit fornece
EditUserProfileProvider
e
useEditUserProfileProviderContext
hook como objectos de contexto para o módulo EditUserProfile. Ambos podem utilizar as mesmas propriedades opcionais que o EditUserProfile: crianças, onCancel, onThemeChange e onEditProfile.

O único componente da IU no módulo EditUserProfile é
EditUserProfileUI
o que torna a visão do perfil do utilizador.

O desenho por defeito para EditUserProfile terá este aspecto:

A IU padrão de edição de um perfil de utilizador

Conclusão & próximos passos

Revimos em detalhe os componentes e módulos centrais que o Sendbird UIKit for React nos fornece. Com este forte conjunto de bases, seremos agora capazes de decidir quais os componentes e módulos necessários para apoiar diferentes casos de utilização. Como exemplo, veja o nosso blogue sobre como construir um clone do WhatsApp messenger com o Sendbird UIKit for React. Neste blogue, compreenderá como construir a sua própria experiência de chat personalizada do tipo WhatsApp utilizando os principais componentes e módulos que discutimos ao longo deste post do blogue.

Para mais informações, consulte por favor o nosso
docs
ou explorar a riqueza de
Tutoriais do UIKit
sobre o nosso
porta do revelador
l. Se precisar de ajuda com o
Sendbird UIKit
, confira o
fóruns comunitários
ou
contacte-nos
. Os nossos peritos estão sempre prontos a ajudar!

Feliz edifício de chat! ✨

 

Categories: Engenharia