Engineering

Un recorrido por Sendbird UIKit para React: los componentes y módulos esenciales que necesita saber

Blog author
Michelle Wong Developer Advocate
Share
Un recorrido por Sendbird UIKit para React: los componentes y módulos esenciales que necesita saber

Crear un chat en la aplicación es una tarea fascinante pero compleja. Ya sea que esté creando para juegos , comercio minorista , salud digital o bajo demanda , es necesario tener una interfaz de usuario de chat optimizada para su aplicación web o móvil. Sendbird UIKit facilita la implementación de una interfaz de usuario de chat intuitiva. Sendbird UIKit for React proporciona los recursos para crear una experiencia de chat funcional y atractiva con componentes de interfaz de usuario prediseñados del SDK de Sendbird. El UIKit para React es útil porque es fundamental que los desarrolladores puedan seleccionar los elementos necesarios para crear un chat optimizado y rico en funciones de la forma en que lo imagina.  

En este blog conoceremos los componentes de Sendbird UIKit for React, así como cada uno de sus casos de uso. Al final de este blog, comprenderá cómo implementar estos componentes para crear su propia integración personalizada.

UIKit para React: Configuración del entorno

Para comenzar, cree una aplicación en el panel de control de Sendbird . Aquí es donde puede acceder a todo lo necesario para su servicio de chat, incluidas sus aplicaciones, usuarios, mensajes y canales. Una vez que cree una aplicación, necesitará la ID de la aplicación para inicializar el Chat SDK.

Luego, cree un nuevo entorno de proyecto usando create-react-app. Luego agregue un archivo .env para almacenar la ID de la aplicación, la ID de usuario y el apodo que se generó desde su panel de control de Sendbird. Ahora, instale Sendbird UIKit a través de npm o yarn:


npm install @sendbird/uikit-react
yarn add @sendbird/uikit-react

Una vez que se instala el UIKit para React, queremos implementarlo en la aplicación mediante el uso de componentes. El primero sobre el que aprenderemos es el componente de la aplicación. 

componente de la aplicación

El componente de la aplicación es una colección de componentes de la interfaz de usuario que crean una interfaz de chat funcional. La aplicación, o el componente de la aplicación, representará una vista que contiene una lista de canales, una conversación del canal y la configuración del canal, todo dentro de un componente. 

Para usar esto, importe el componente SendbirdApp de UIKit y la hoja de estilo de UIKit en el archivo App.js:


import SendbirdApp from «@sendbird/uikit-react/App»;
import «@sendbird/uikit-react/dist/index.css»;

view raw

import-app.js

hosted with ❤ by GitHub

 

El componente de la aplicación requiere que se pase una ID de aplicación y una ID de usuario. El siguiente código muestra cómo usaría el componente de la aplicación: 


const APP_ID = process.env.REACT_APP_APP_ID;
const USER_ID = process.env.REACT_APP_USER_ID;
const NICKNAME = process.env.REACT_APP_NICKNAME;
const ACCESS_TOKEN = process.env.REACT_APP_ACCESS_TOKEN;
function App() {
return (
<div className=«App»>
<SendbirdApp
appId={APP_ID} // Specify your Sendbird application ID.
userId={USER_ID} // Specify your user ID.
nickname={NICKNAME} //Specify nickname
accessToken={ACCESS_TOKEN} //If access token is generated in dashboard, it must be passed in here
/>
</div>
);
};
export default App;

Luego, especifica la altura y el ancho de la interfaz de chat en la hoja de estilo:


.App {
height: 100vh;
width: 100vw;
}

Asegúrese de importar esta hoja de estilo en el archivo App.js.

En este punto, tenemos una aplicación de chat que se ejecuta con éxito en la que puede crear un nuevo canal y enviar mensajes. Debe tener un aspecto como este:

Una exitosa aplicación de chat

Si desea personalizar su experiencia de chat, puede hacerlo utilizando los componentes y módulos principales proporcionados por UIKit. Primero, profundicemos en los componentes principales.

Componentes principales en UIKit para React

Los componentes centrales son los principales bloques de construcción de UIKit. Los componentes principales incluyen SendbirdProvider, sendbirdSelectors, userSendbirdStateContext y withSenbird(). Cada uno de estos almacena y opera con todos los datos necesarios para ejecutar una aplicación. 

¿Cómo funcionan los componentes básicos? Obtienen datos de la instancia de Chat SDK, se conectan al servidor de Sendbird, hablan con los módulos sobre los eventos que ocurren en la vista y configuran funciones y localización. Estos componentes funcionan para crear y ejecutar vistas; sin embargo, no proporcionan ni muestran una interfaz de usuario. Ahí es donde entran en juego los módulos: los módulos proporcionan una vista de interfaz de usuario para el componente principal que se está utilizando.

SendbirdProvider es el componente central más importante porque proporciona contexto y pasa los datos del SDK de Chat, así como el estado actual, a cualquier componente secundario. SendbirdProvider debe estar en el nivel superior para que toda la aplicación tenga acceso a los datos de Sendbird. 

Con SendbirdProvider, podemos usar el componente useSendbirdStateContext() para implementar el SDK de Sendbird Chat para Javascript en los componentes secundarios de SendbirdProvider. El componente useSendbirdStateContext nos permitirá acceder al estado de SendbirdProvider, conectarse a las acciones del SDK y puede usarse con sendbirdSelectors para implementar funcionalidades como enviar o actualizar un mensaje. 

Antes de UIKit v4, el componente withSendbird() se usaba para pasar datos entre Chat SDK y los módulos, pero con la actualización de UIKit, le recomendamos que use useSendbirdStateContext() en su lugar.

Por último, los sendbirdSelectors se utilizan para realizar operaciones de datos y brindarle acceso al SDK. Las principales funciones de selección incluyen getSdk, getCreateOpenChannel y getDeleteMessage. 

manipuladores

UIKit proporciona varios controladores de eventos para administrar actividades y eventos que ocurren en la aplicación cliente. Desde la actualización de v3 a v4 en Chat SDK , UIKit implementó controladores de eventos de canal que se pueden importar en lugar de llamar al controlador de canal desde sdkInstance. Los controladores de eventos del canal incluyen ConnectionHandler, GroupChannelHandler, OpenChannelHandler y UserEventHandler. A continuación, el SDK usa controladores de sesión para renovar un token de sesión. Un token de sesión se utiliza para autenticar de forma segura a un usuario cuando Chat SDK conecta al usuario con el servidor de Sendbird, donde puede enviarle solicitudes de datos antes de que caduque el token.  

Módulos en UIKit para React

Ahora que aprendimos sobre los componentes principales de UIKit, es importante conocer los módulos y cómo funciona cada módulo junto con los componentes principales. Los módulos funcionan como componentes inteligentes que proporcionan una interfaz de usuario personalizable. Estos módulos contienen proveedores y componentes de interfaz de usuario preconstruidos que crean una vista de chat funcional. 

Los ocho módulos en UIKit son: 

  1. Lista de canales 
  2. crear un canal 
  3. canal de grupo
  4. Configuración de canales de grupo
  5. Canal abierto
  6. Configuración de canales abiertos
  7. Búsqueda de mensajes
  8. Editar perfil de usuario

Cada módulo tiene un proveedor de contexto y un conjunto de componentes de interfaz de usuario. El proveedor administra los datos necesarios del Chat SDK mientras los componentes de la interfaz de usuario representan las interfaces para mostrar la vista del módulo. Para pasar datos entre el proveedor y los componentes de la interfaz de usuario, utilizamos un enlace useContext. Los enlaces de contexto deben estar dentro del proveedor para permitir que cada componente de la interfaz de usuario tenga acceso a los datos del proveedor. Si bien hay un conjunto predeterminado de componentes de la interfaz de usuario para cada módulo, todos los componentes de la interfaz de usuario se pueden personalizar configurando las propiedades de entrada con componentes personalizados.

Lista de canales

ChannelList muestra una lista de canales de grupo de los que es miembro el usuario actual. Algunas de las propiedades de ChannelList incluyen onBeforeCreateChannel, onChannelSelect y renderChannelPreview. 

Las propiedades onBeforeCreateChannel y onChannelSelect le permiten realizar acciones cuando el usuario interactúa con la interfaz de usuario de UIKit. La propiedad renderChannelPreview le permite reemplazar la interfaz de usuario predeterminada de la vista previa del canal con su propio componente personalizado. Esto se puede usar para configurar la vista previa del canal para que simplemente se muestre el apodo del usuario en la lista de canales.

El proveedor de contexto utilizado para este módulo es ChannelListProvider . Este proveedor administra la lógica y los datos utilizados en la vista de lista de canales. Por lo tanto, si su aplicación solo requiere ver una lista de canales, puede usar el módulo ChannelList para mostrar la vista de una lista de canales y tener ese módulo envuelto dentro de ChannelListProvider, que pasará los datos necesarios a ChannelList. 

También puede usar el gancho useChannelListContext para obtener acceso a los datos del proveedor. Algunas de las propiedades de useChannelListContext son initialized, loading y currentChannel. 

Los componentes de la interfaz de usuario que conforman la vista ChannelList son ChannelListUI, ChannelListHeader y ChannelPreview. ChannelListUI muestra la pantalla básica del módulo, incluidos los encabezados y la vista previa del canal. Incluye una lista de propiedades para usar, como renderHeader, renderPlaceHolderError y renderPlaceHolderLoading. ChannelListHeader es el encabezado de ChannelListUI que muestra el título y un botón para crear un nuevo canal. Tres propiedades para utilizar con esta interfaz de usuario son renderHeader, renderIconButton y allowProfileEdit. El componente de interfaz de usuario ChannelPreview muestra un solo canal en la lista de canales. Las propiedades de ChannelPreview son channel, onClick, renderChannelAction e isActive. 

Así es como puede implementar ChannelList usando ChannelListProvider y useChannelListContext:


import { useChannelListContext, ChannelListProvider } from ‘@sendbird/uikit-react/ChannelList/context’;
import ChannelList from ‘@sendbird/uikit-react/ChannelList’;
const MyComponent = () => {
const channelListState = useChannelListContext();
return (
render custom component
);
};
<ChannelListProvider>
<MyComponent />
<ChannelListProvider/>
const MyPlaceholder = () => {
const channelListState = useChannelListContext();
return (
render custom component
);
};
<ChannelList
renderPlaceHolderLoading={MyPlaceholder}
/>

Este es el diseño predeterminado del componente ChannelList:

Interfaz de usuario predeterminada del componente ChannelList

Crear canal

El módulo CreateChannel se utiliza para crear un nuevo canal de grupo. CreateChannel requiere que se le pase la propiedad channelUrl. Las propiedades opcionales adicionales incluyen onBeforeCreateChannel, onCreateChannel y onCancel. Estas tres propiedades se ejecutan en ciertas acciones dentro de la interfaz de usuario de UIKit, lo que le permite pasar y ejecutar su propio conjunto de operaciones. 

Por ejemplo, puede usar onBeforeCreateChannel para activar una función que se llamará cuando el usuario haga clic para crear un canal de grupo y antes de que genere un nuevo canal. La función llamada, por ejemplo, podría configurar la imagen del grupo para el canal que se está creando. El uso de la propiedad onCreateChannel le permitirá implementar una acción justo después de crear el canal. Puede usar esto para mostrar un mensaje de éxito en la pantalla una vez que se haya creado su canal. Si desea activar un evento cuando se hace clic en el botón ‘cancelar’, puede usar la propiedad onCancel. Puede optar por implementar su propia interfaz de usuario personalizada desde aquí y llamar a una función para mostrar una vista que le pregunte si está seguro de que desea cancelar la creación del canal.

Los dos objetos de contexto que se pueden usar para crear un canal de grupo y pasar datos del proveedor a los componentes de la interfaz de usuario son CreateChannelProvider y useCreateChannel hook. CreateChannelProvider requiere que se pase la propiedad channelUrl. Las propiedades opcionales adicionales son secundarias, onCreateChannel, onBeforeCreateChannel y queries.applicationUserListQuery.

Los componentes de la interfaz de usuario que componen la vista CreateChannel son CreateChannelUI, InviteMembers y SelectChannelType. CreateChannelUI y SelectChannelType se usan juntos para mostrar el primer paso del módulo CreateChannel. InviteMembers muestra el segundo paso después de crear el canal. CreateChannelUI tiene propiedades onCancel y renderStepOne. SelectChannelType representa la vista donde el usuario actual puede elegir qué tipo de canal crear. InviteUsers muestra una vista donde el usuario actual puede invitar a otros usuarios a unirse al canal. Tanto SelectChannelType como InviteMembers tienen una propiedad onCancel. 

El siguiente código muestra cómo usar el módulo CreateChannel con el gancho CreateChannelProvider y useCreateChannel:


import CreateChannel from ‘@sendbird/uikit-react/CreateChannel’;
import { CreateChannelProvider, useCreateChannel } from ‘@sendbird/uikit-react/CreateChannel/context’;
const MyComponent = () => {
const createChannelState = useCreateChannel();
return (
render custom component
);
};
<CreateChannelProvider>
<MyComponent />
<CreateChannelProvider/>
const StepOneView = () => {
const createChannelState = useCreateChannel();
return (
render custom component
);
};
<CreateChannel
renderStepOne={StepOneView}
/>

A continuación se muestra el diseño predeterminado del módulo CreateChannel:

Creando un nuevo canal

Adición de usuarios a un nuevo canal

Canal

El módulo Canal muestra una conversación de canal de grupo. Los usuarios pueden acceder a un canal de grupo solo si están invitados a ser miembros del canal. Este módulo requiere que se establezca una propiedad channelUrl. Otras propiedades opcionales incluyen isReactionEnabled, showSearchIcon y onBeforeSendUserMessage. 

Las propiedades isReactionEnabled y showSearchIcon controlan si la función se usa y muestra o no. La propiedad onBeforeSendUserMessage se puede usar para ejecutar una lógica personalizada en segundo plano cuando el usuario hace clic para enviar un mensaje, pero completa las operaciones antes de que el mensaje se envíe al canal. Por lo tanto, al hacer clic en enviar un mensaje, activará la función que pasa para completar una acción y luego enviar el mensaje. Esto puede ser útil en el caso de que desee verificar el texto del mensaje que se envía y si contiene una palabra específica, luego active una animación para que se active cuando se envíe el mensaje. 

Los dos objetos de contexto que se usan para almacenar y administrar los datos que se usan para crear un canal de grupo son ChannelProvider y useChannelContext hook. ChannelProvider requiere una propiedad channelUrl e incluye propiedades adicionales, como isMessageGroupingEnabled, isReactionEnabled y HighlightMessage. Las propiedades opcionales del enlace de contexto useChannelContext incluyen channelUrl, StartingPoint y onBeforeSendFileMessage.

Los componentes de la interfaz de usuario en el módulo Channel son ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator y UnreadCount. ChannelUI muestra la pantalla básica del módulo y tiene varias propiedades, como renderPlaceholderLoader, renderMessageInput y renderTypingIndicator. ChannelHeader es el encabezado del componente ChannelUI que muestra el título del canal, un ícono de búsqueda de mensajes y un ícono de información del canal. MessageInput es el componente en el que los usuarios pueden ingresar un mensaje o enviar un mensaje de archivo.

MessageList muestra una lista de todos los mensajes en un canal de grupo y tiene tres propiedades: renderMessage, renderPlaceholderEmpty y renderCustomSeperator. FileViewer muestra todos los mensajes que contienen archivos de imagen o video y tiene dos propiedades opcionales: onCancel y message. FrozenNotification es un componente que muestra un banner que alerta a los usuarios de que el canal actual está congelado. Message es un componente dentro de MessageList que muestra un solo mensaje en el canal. Requiere una propiedad de mensaje y tiene propiedades opcionales adicionales, como hasSeperator, chainTop y renderEditInput. QuitarMensajeModalmuestra un modal que confirma que el mensaje seleccionado se eliminará del canal y tiene dos propiedades opcionales: onCancel y message. TypingIndicator muestra qué miembro del canal está escribiendo activamente un mensaje. Y, por último, UnreadCount muestra cuántos mensajes no leídos hay en un canal. Las propiedades de UnreadCount son count, time y onClick.

El siguiente código es cómo implementar el módulo Channel usando ChannelProvider y useChannelContext:


import Channel from ‘@sendbird/uikit-react/Channel’;
import { ChannelProvider, useChannelContext } from ‘@sendbird/uikit-react/Channel/context’;
const MyComponent = () => {
const channelState = useChannelContext();
return (
render custom component
);
};
<ChannelProvider>
<MyComponent />
<ChannelProvider/>
const CheckMessageText = () => {
const channelState = useChannelContext();
return (
render custom component
);
};
<Channel
onBeforeSendUserMessage={CheckMessageText}
/>

Este es el diseño predeterminado del componente Canal:

El diseño de los componentes del canal.

Ajustes de canal

El módulo ChannelSettings muestra un menú de información de canales grupales y opciones de configuración. Los miembros pueden consultar una lista de miembros, invitar a un usuario al canal y abandonar el canal. Si el usuario es un operador de canal, tendrá opciones adicionales disponibles (en la configuración), como poder agregar o eliminar operadores, silenciar o prohibir miembros, ver una lista de usuarios silenciados y prohibidos y salir o congelar el canal. 

ChannelSettings requiere una propiedad channelUrl y tiene propiedades opcionales como onCloseClick, onChannelModified y renderLeaveChannel. Las propiedades onCloseClick y onChannelModified se activan mediante un evento activado desde la propia interfaz de usuario y ejecutan la lógica personalizada que pasa. Puede utilizar onCloseClick en el caso de que un usuario haga clic en el botón para cerrar la barra de configuración. Puede pasarle una función en la que desee modificar la interfaz de usuario para que no muestre el componente de configuración. Si desea activar un evento una vez que se cambia la configuración, puede mostrar un mensaje de éxito en la pantalla utilizando la propiedad onChannelModified. Al usar ChannelSettings, es posible que desee cambiar el diseño del botón ‘dejar canal’. Puede hacerlo usando la propiedad renderLeaveChannel con la que puede pasar su propia interfaz de usuario personalizada al módulo de configuración.

Los dos objetos de contexto para crear un menú de configuración de canal para este módulo son ChannelSettingsProvider y useChannelSettingsContext. ChannelSettingsProvider requiere que se pase una URL de canal. Algunas otras opciones para este proveedor son onCloseClick, onBeforeUpdateChannel e invalidChannel. El enlace useChannelSettingsContext tiene varias propiedades que se pueden usar, como onCloseClick, onChannelModified y onBeforeUpdateChannel. 

El conjunto de componentes de IU de ChannelSettings que componen la vista de configuración de canal de grupo son ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel y UserListItem. ChannelSettingsUI muestra la vista que incluye la vista de perfil del canal, la vista del menú de moderación y el botón para abandonar el canal. El componente tiene cuatro propiedades opcionales: renderPlaceHolderError, renderChannelProfile, renderModerationPanel y renderLeaveChannel. ModerationPanel crea la vista del menú de configuración para los operadores de canales. Esto incluye una lista de operadores, miembros, usuarios silenciados y prohibidos, un botón de alternancia de canal congelado y la opción de abandonar el canal. El panel de usuarioEl componente crea la vista del menú de configuración para los miembros del canal, que incluye una lista de miembros, una opción para invitar a otros usuarios al canal y una opción para abandonar el canal. El componente ChannelProfile crea la vista del perfil del canal, incluido el título del canal, la imagen y el botón de edición, lo que permite a los usuarios cambiar la información del canal. EditDetailsModal muestra un modal donde los usuarios pueden editar el nombre del canal y la imagen de perfil. Tiene dos propiedades opcionales que se pueden usar: onSubmit y onCancel. El modal LeaveChannel se muestra cuando un usuario hace clic para abandonar el canal en el menú de configuración y le pide al usuario que confirme esta acción. LeaveChannel tiene una propiedad onSubmit y onCancel que se puede usar con él. El elemento de la lista de usuariosmuestra un usuario individual dentro de una lista de usuarios. Este componente requiere que se establezca una propiedad de usuario y tiene tres propiedades opcionales: currentUser, className y action. 

Así es como implementa el módulo ChannelSettings usando ChannelSettingsProvider y useChannelSettingsContext:


import ChannelSettings from ‘@sendbird/uikit-react/ChannelSettings’;
import { ChannelSettingsProvider, useChannelSettingsContext } from ‘@sendbird/uikit-react/ChannelSettings/context’;
const MyComponent = () => {
const channelSettingsState = useChannelSettingsContext();
return (
render custom component
);
};
<ChannelSettingsProvider>
<MyComponent />
<ChannelSettingsProvider/>
const LeaveChannelButton = () => {
const channelSettingsState = useChannelSettingsContext();
return (
render custom component
);
};
<ChannelSettings
renderLeaveChannel={LeaveChannelButton}
/>

Esta es la interfaz de usuario predeterminada de ChannelSetting para no operadores:

 

Interfaz de usuario de configuración de canal predeterminada

Estas son las configuraciones del canal que se mostrarán para los operadores del canal:

Interfaz de usuario de configuración de canal para operadores de canal

Canal abierto

Un canal abierto es un canal público que puede manejar una gran cantidad de usuarios que interactúan dentro de un chat. El módulo OpenChannel requiere una propiedad channelUrl y tiene una variedad de propiedades opcionales, como elementos secundarios, isMessageGroupingEnabled, messageLimit y renderUserProfile. 

La propiedad children muestra los componentes secundarios de OpenChannel, que son datos proporcionados por OpenChannelProvider. La propiedad isMessageGroupingEnabled comprueba si la función está activada para que sepa cómo mostrar la interfaz de usuario. Si la agrupación de mensajes está habilitada, cada mensaje que se envíe en un minuto se agrupará en un mensaje. La propiedad messageLimit proporciona el número máximo de mensajes que se almacenarán en el componente OpenChannelMessageList del canal. Si desea personalizar la vista previa del perfil al hacer clic en el avatar de un usuario, puede pasar su propio componente de interfaz de usuario utilizando la propiedad renderUserProfile para anular el diseño predeterminado.  

Los objetos de contexto que se pueden usar para que el módulo OpenChannel almacene y maneje datos son OpenChannelProvider y useOpenChannel hook. OpenChannelProvider requiere que se establezca una propiedad channelUrl. Algunas propiedades opcionales incluyen isMessageGroupingEnabled, messageLimit y onChatHeaderActionClick. El enlace de contexto useOpenChannelContext tiene una serie de propiedades que se pueden utilizar, como renderUserProfile, currentOpenChannel y allMessages. 

El conjunto de componentes de la interfaz de usuario que componen el módulo OpenChannel son OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList y OpenChannelMessage. OpenChannelUI muestra la pantalla básica del módulo y la vista del encabezado, el mensaje y la lista de mensajes en un canal abierto. OpenChannelUI tiene una lista de propiedades opcionales, como renderMessage, renderHeader y renderInput. OpenChannelHeader representa el título del canal y el icono de información. OpenChannelInput es donde los usuarios pueden enviar un mensaje o un mensaje de archivo como una imagen, un video o un documento. OpenChannelMessageList muestra una lista de todos los mensajes en un canal abierto. Tiene dos propiedades opcionales: renderMessage y renderPlaceHolderEmptyList.OpenChannelMessage muestra el mensaje individual en el canal. Este componente requiere una propiedad de mensaje y tiene varias propiedades opcionales, como hasSeperator, chainTop y editDisabled.  

A continuación se muestra cómo usar el módulo OpenChannel con OpenChannelProvider y useOpenChannelContext:


import OpenChannel from ‘@sendbird/uikit-react/OpenChannel’;
import { OpenChannelProvider, useOpenChannelContext } from ‘@sendbird/uikit-react/OpenChannel/context’;
const MyComponent = () => {
const openChannelState = useOpenChannelContext();
return (
render custom component
);
};
<OpenChannelProvider>
<MyComponent />
<OpenChannelProvider/>
const UserProfile = () => {
const openChannelState = useOpenChannelContext();
return (
render custom component
);
};
<OpenChannel
renderUserProfile={UserProfile}
/>

Así es como se ve el diseño predeterminado de OpenChannel:

&ZeroWidthSpace;&ZeroWidthSpace;

Interfaz de usuario predeterminada de OpenChannel

Configuración de canal abierto

El módulo OpenChannelSettings muestra un menú de configuraciones, como proporcionar el nombre del canal, la imagen del canal, la URL de la aplicación y una lista de participantes. Si el usuario actual es un operador, tiene configuraciones adicionales, como agregar o eliminar operaciones, ver una lista de usuarios silenciados y prohibidos, poder silenciar o prohibir participantes y una opción para eliminar el canal. 

OpenChannelSettings requiere que se pase una propiedad channelUrl. Algunas otras propiedades proporcionadas son onChannelModified, onDeleteChannel y onCloseClick. Estas propiedades ejecutarán un conjunto de operaciones cuando el usuario interactúe con atributos específicos en la interfaz de usuario. En la configuración del canal abierto, al usar onCloseClick, puede configurar el estado de la barra de configuración para que se cierre y eliminar el componente de configuración de la vista de chat. La misma idea se aplica al usar onChannelModified y onDeleteChannel, donde si el usuario hace clic para guardar cualquier edición que haya realizado o si hace clic en el botón para eliminar el canal, puede modificar la interfaz de usuario en su aplicación para que aparezca un componente personalizado en la pantalla. pantalla.

Los dos objetos de contexto utilizados para crear un menú de configuración de canal funcional son OpenChannelSettingsProvider y useOpenChannelSettingsContext hook. OpenChannelSettingsProvider requiere que se pase un channelUrl e incluye propiedades adicionales como onBeforeUpdateChannel, disabledUserProfile y renderUserProfile. El gancho useOpenChannelSettingsContext tiene una lista de propiedades como onDeleteChannel, onChanelModified y setChannel. 

Los componentes de la interfaz de usuario que componen el módulo OpenChannelSetting general son OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile y EditDetailsModal. OpenChannelSettingsUI muestra la pantalla básica del módulo que contiene OperatorUI y ParticipantUI. Las dos propiedades opcionales para OpenChannelSettingsUI son renderOperatorUI y renderParticipantList. OperatorUI muestra el menú de configuración para operadores de canal y tiene una propiedad opcional renderChannelProfile. ParticipantUI muestra una lista de participantes en el canal abierto. OpenChannelProfile crea una vista de perfil de canal que muestra el título y la imagen del canal. EditarDetallesModalaparece cuando un usuario desea editar el nombre del canal y la imagen de perfil. Tiene una propiedad onCancel que se puede activar cuando se hace clic en el botón cancelar.    

El siguiente código es cómo utilizar el módulo OpenChannelSettings con OpenChannelSettingsProvider y useOpenChannelSettingsContext:


import OpenChannelSettings from ‘@sendbird/uikit-react/OpenChannelSettings’;
import { OpenChannelProvider, useOpenChannelContext } from ‘@sendbird/uikit-react/OpenChannelSettings/context’;
const MyComponent = () => {
const openChannelSettingsState = useOpenChannelSettingsContext();
return (
render custom component
);
};
<OpenChannelSettingsProvider>
<MyComponent />
<OpenChannelSettingsProvider/>
const ModifiedModalView = () => {
const openChannelSettingsState = useOpenChannelSettingsContext();
return (
render custom component
);
};
<OpenChannelSettings
onChannelModified={ModifiedModalView}
/>

Así es como se muestra OpenChannelSettings:

La interfaz de usuario predeterminada de la configuración del canal

MensajeBúsqueda

El módulo MessageSearch permite a los usuarios buscar mensajes dentro de los canales de los que son miembros. Es necesario establecer una propiedad channelUrl para MessageSearch. Hay propiedades opcionales adicionales disponibles para usar, como onResultLoaded, onResultClick y renderPlaceholderEmptyList. 

Al usar el módulo MessageSearch, es posible que desee mostrar todos los resultados de una búsqueda en una ventana de interfaz de usuario separada que se muestra como una capa emergente en la parte superior del chat. Puede hacerlo usando la propiedad onResultLoaded donde se llama a una función una vez que se reciben los resultados. Con onResultClick, puede ejecutar una lógica personalizada una vez que un usuario selecciona un resultado de búsqueda. La propiedad renderPlaceholderEmptyList le permite crear una interfaz de usuario personalizada para el marcador de posición cuando la lista de búsqueda vuelve sin resultados. Entonces, cuando la lista de búsqueda no tiene nada que incluir, puede hacer que aparezca una notificación.

Para MessageSearch, puede usar MessageSearchProvider y useMessageSearch hook para almacenar y administrar los datos que se usan para crear una interfaz de usuario de búsqueda de mensajes. MessageSearchProvider requiere que se especifique un channelUrl y tiene propiedades opcionales adicionales como onResultClick, messageSearchQuery y onResultLoaded. El enlace useMessageSearchContext tiene varias propiedades opcionales, como onResultLoaded, requestString y selectedMessageId. 

MessageSearchUI es el único componente de IU en el módulo MessageSearch y muestra la vista de los resultados de búsqueda. 

Así es como implementa MessageSearch usando MessageSearchProvider y useMessageSearchContext:


import MessageSearch from ‘@sendbird/uikit-react/MessageSearch;
import { MessageSearchProvider, useMessageSearchContext } from ‘@sendbird/uikit-react/MessageSearch/context‘;
const MyComponent = () => {
const messageSearchState = useMessageSearchContext();
return (
…render custom component
);
};
<MessageSearchProvider>
<MyComponent />
<MessageSearchProvider/>
const EmptyListView = () => {
const messageSearchState = useMessageSearchContext();
return (
…render custom component
);
};
<MessageSearch
renderPlaceholderEmptyList={EmptyListView}
/>

La interfaz de usuario predeterminada del módulo MessageSearch se ve así:

La interfaz de usuario predeterminada de MessageSearch

Editar perfil de usuario

El módulo EditUserProfile permite al usuario actual realizar cambios en su perfil. Al hacer clic en su propio avatar, aparece una ventana emergente con la información de su perfil. Aquí, los usuarios tienen la opción de editar su imagen de perfil, apodo y pueden alternar el tema para que esté en modo claro u oscuro. 

EditUserProfile tiene 4 propiedades opcionales que incluyen elementos secundarios, onCancel, onThemeChange y onEditProfile. La propiedad children se utiliza para ver los componentes secundarios en EditUserProfile que nos proporciona EditUserProfileProvider. onCancel se usa para ejecutar una operación cuando la interfaz de usuario se activa cuando el usuario hace clic para cancelar cualquier edición que haya realizado. Si desea agregar un estilo adicional en función de si el chat está en modo claro u oscuro, puede usar onThemeChange para llamar a una función que implementa CSS personalizado cuando un usuario hace clic para cambiar el tema. Por último, onEditProfile le permite implementar un conjunto de acciones una vez que el usuario ha actualizado su perfil.

UIKit proporciona el enlace EditUserProfileProvider y useEditUserProfileProviderContext como objetos de contexto para el módulo EditUserProfile. Ambos pueden usar las mismas propiedades opcionales que EditUserProfile: children, onCancel, onThemeChange y onEditProfile. 

El único componente de la interfaz de usuario en el módulo EditUserProfile es EditUserProfileUI , que representa la vista del perfil de usuario. 


import EditUserProfile from ‘@sendbird/uikit-react/EditUserProfile;
import { EditUserProfileProvider, useEditUserProfileProviderContext } from ‘@sendbird/uikit-react/EditUserProfile/context‘;
const MyComponent = () => {
const editUserProfileState = useEditUserProfileProviderContext();
return (
…render custom component
);
};
<EditUserProfileProvider>
<MyComponent />
<EditUserProfileProvider/>
const CancelEdit = () => {
const editUserProfileState = useEditUserProfileProviderContext();
return (
…render custom component
);
};
<EditUserProfile
onCancel={CancelEdit}
/>

El diseño predeterminado para EditUserProfile se verá así:

La interfaz de usuario predeterminada para editar un perfil de usuario

Conclusión y próximos pasos

Hemos revisado en detalle los componentes y módulos principales que Sendbird UIKit for React nos proporciona. Con este sólido conjunto de bases, ahora podremos decidir qué componentes y módulos son necesarios para admitir diferentes casos de uso. Como ejemplo, consulte nuestro blog sobre cómo crear un clon de mensajería de WhatsApp con Sendbird UIKit para React. En este blog, comprenderá cómo crear su propia experiencia de chat personalizada similar a WhatsApp utilizando los componentes y módulos principales que discutimos a lo largo de esta publicación de blog.

Para obtener más información, consulte nuestros documentos o explore la gran cantidad de tutoriales de UIKit en nuestro portal para desarrolladores . Si necesita ayuda con Sendbird UIKit , consulte los foros de la comunidad o comuníquese con nosotros . ¡Nuestros expertos siempre están listos para ayudar!

¡Feliz construcción de chat!

 

Categories: Engineering