Engineering

Cómo crear un clon del servicio de mensajería WhatsApp en React con Sendbird UIKit

Blog author
Michelle Wong Developer Advocate
Share
Cómo crear un clon del servicio de mensajería WhatsApp en React con Sendbird UIKit

Con más de
2.000 millones de usuarios
y
100.000 millones de mensajes
intercambiados cada día, WhatsApp es la
aplicación de mensajería más popular
en el mundo. Aunque su facilidad de uso para la mensajería entre usuarios y la posibilidad de mantener conversaciones con las empresas han contribuido enormemente a su popularidad, WhatApp ha conseguido recientemente
recibió críticas
por el aumento del número de empresas que envían spam a los usuarios con mensajes promocionales.

Las marcas pueden evitar este problema creando
chat en la aplicación
. Un chat en la aplicación rico en contexto significa que las actualizaciones, noticias y anuncios importantes de una empresa no se perderán en una bandeja de entrada de mensajería rebosante de spam. El chat en la aplicación también ofrece una experiencia de mensajería realista, al tiempo que proporciona a las marcas un control responsable de los datos de los usuarios. Esto es importante porque la mensajería para las empresas puede muy bien convertirse en una parte importante de los cimientos sobre los que se construye una marca. De hecho, un portavoz de Meta
comentó recientemente
que «la mensajería es la nueva forma de hacer negocios, mejor que un correo electrónico o una llamada telefónica».

Por eso, en este blog, descubriremos cómo construir un clon de WhatsApp messenger en React. Para este proyecto, utilizaremos Sendbird UIKit para React. Sendbird UIKit permite a los desarrolladores crear una experiencia de chat a medida con componentes de interfaz de usuario altamente personalizables. En este blog, entenderemos cómo los componentes proporcionados por UIKit conforman cada aspecto de nuestra integración personalizada para lograr nuestro objetivo: construir un clon de WhatsApp messenger en React.

Al final de este blog, esto es lo que habrás construido para escritorio:

Clon de WhatsApp Messenger para escritorio

Y esto es para móviles:

Clon de WhatsApp Messenger para móvil

Cómo empezar con tu clon de WhatsApp Messenger

Para empezar, cree una aplicación en el
panel de Sendbird
. Aquí puede acceder a todo lo que le ofrece su servicio de chat. Una vez creada una aplicación, deberá guardar el ID de aplicación que se genera para inicializar el SDK de Chat en su aplicación React.

Genere una aplicación React e instale Sendbird UIKit para React con npm o yarn:

Una vez instalado UIKit, podemos importar los componentes necesarios para nuestra aplicación desde UIKit.

Componentes y módulos para un clon de WhatsApp messenger en React

Para empezar, utilizaremos el SendbirdProvider como envoltorio general para los múltiples módulos que vamos a incluir en nuestra aplicación.

Para nuestro ejemplo, utilizaremos los módulos ChannelList, Channel y ChannelSettings. Con estos tres módulos, crearemos una vista móvil y una vista de escritorio. La vista móvil mostrará la lista de canales o la conversación de canales y el menú de configuración juntos. Para la vista de escritorio, tendremos la lista de canales y la conversación de canales una al lado de la otra.

En primer lugar, importaremos SendbirdProvider y la hoja de estilos de UIKit en el archivo App.js:

Nota: Aquí estamos importando SendbirdProvider y refiriéndonos a él en nuestra aplicación como SBProvider. Puede elegir el nombre que desee darle en su propia aplicación.

A continuación, aplique el siguiente CSS a nuestra hoja de estilos, que estará en el archivo styles.css:

Ahora, queremos que la aplicación funcione tanto en una vista de escritorio como en una vista móvil. Por lo tanto, dentro de nuestro componente proveedor, tendremos que comprobar el tamaño de la pantalla de la ventana. Si tiene el tamaño de la pantalla de un teléfono, renderizará nuestra vista móvil. Si supera el número de píxeles de una pantalla de teléfono normal, se mostrará una vista de escritorio. Por lo tanto, crearemos dos componentes y los llamaremos MobileView y DesktopView. Ambos componentes contendrán nuestros módulos.

Una vez completados estos pasos, el archivo App.js tendrá el siguiente aspecto:


Nota

: En el cuadro de mandos, si emite un token de acceso a un usuario, tendrá que pasar la variable accessToken al SBProvider como se ve en el ejemplo de código anterior.

Vista de escritorio

La vista de escritorio es la disposición predeterminada de Sendbird, con la lista de canales a la izquierda y la conversación a la derecha. Nuestro componente DesktopView devuelve un div con un className de «sendbird-app__wrap». Este className ya está estilizado por el diseño por defecto de Sendbird que muestra la lista de canales junto a la ventana de conversación.

A continuación, debemos establecer la altura del div sendbird-app__wrap en 100vh, que es el tamaño de toda la pantalla de la ventana. Dentro de este div, colocaremos los componentes de lista de canales, conversación de canales y configuración de canales.

Importa los módulos de lista de canales, canales y configuración de canales. Se denominarán SBChannelList, SBConversation y SBChannelSettings:

Añadiremos un div alrededor de cada componente y usando los siguientes classNames, aplicará el estilo UIKit por defecto a nuestros componentes. A continuación se indican los nombres de clase de cada componente:

  1. Para la lista de canalesel div className es «sendbird-app__channellist-wrap».
  2. Para la canal de conversación, el div className es «sendbird-app__conversation-wrap»
  3. Para el canal ajustes, el div className es «sendbird-app__settingspanel-wrap»

En el componente de la lista de canales, utilizaremos la propiedad onChannelSelect para establecer el canal sobre el que se hace clic en la lista de canales. La conversación del canal pasará el channelUrl y usará onChatHeaderActionClick para que podamos escuchar cuando el usuario quiera abrir la barra de ajustes. Para los ajustes del canal, pasa la propiedad channelUrl y utiliza onCloseClick para cerrar la vista de la barra de ajustes. Por favor, vea los ejemplos de código en la sección Personalizaciones más abajo para ver cómo se ve esto.

Vista móvil

La vista de dispositivo móvil tendrá el componente de lista de canales o el componente de conversación de canales renderizado en la pantalla. Si un usuario está en la lista de canales y hace clic en una conversación, se mostrará la ventana de conversación. Si el usuario hace clic para pasar de la conversación a la lista de canales, la lista de canales aparecerá en la pantalla.

Para la vista móvil, devolveremos un div con el className «mobile-view__wrap» y dentro de eso, colocaremos una condición donde si el canal actual no está establecido, entonces devolverá el componente de la lista de canales. En caso contrario, devolverá la ventana de conversación del canal y el componente de configuración. El componente de configuración sólo se muestra si el usuario hace clic en un botón de la ventana de conversación para abrir el menú de configuración.

En la hoja de estilos, establece el elemento con el className «mobile-view__wrap» y «sendbird-app__conversation-wrap» de altura 100vh para que ocupe toda la pantalla de la ventana.

Utilizaremos las mismas propiedades para cada componente que para DesktopView. Para la lista de canales, utilice la propiedad onChannelSelect así como disableAutoSelect. La propiedad disableAutoSelect se utiliza para que la lista de canales no muestre automáticamente el primer canal de la lista.

La vista de escritorio muestra la lista de canales y la conversación del canal una al lado de la otra. Sin embargo, para la vista móvil, sólo estamos viendo la lista de canales o la conversación de canales, por lo que la selección automática debe estar desactivada. Si no incluyes disableAutoSelect, te encontrarás con que la vista renderizará constantemente el primer canal dentro de la ventana de conversación y no te permitirá volver a la lista de canales ya que está renderizando constantemente ese canal. Por lo tanto, la propiedad disableAutoSelect se utiliza para seleccionar el canal que se desea ver en la ventana de conversación y pasar de ver la lista de canales a la conversación.

A continuación, encima del componente SBConversation, queremos añadir un botón de retroceso. El botón de retroceso se mostrará en la conversación del canal y volver a ver nuestra lista de canales. El componente de conversación pasará el channelUrl y usará el onChatHeaderActionClick. El onChatHeaderActionClick hará que se abra la barra de ajustes. El componente SBChannelSettings utilizará la propiedad channelUrl y onCloseClick para cerrar el menú de ajustes.

Personalizaciones

Podemos empezar a añadir personalizaciones para darle a tu chat un estilo más parecido al de Whatsapp. Tanto en el DesktopView como en el MobileView, crearemos una función que ocultará la barra de configuración y una función que mostrará la barra de configuración.

Para ocultar la barra de ajustes, dentro de la función, cogeremos el elemento con el className «sendbird-app__conversation-wrap» y estableceremos su margen derecho a 0px. Esta función se activará en SBChannelSettings mediante la propiedad onCloseClick. Para abrir la barra de ajustes, en el componente Channel dentro de la propiedad onChatHeaderActionClick, llamará al renderSettingsBar donde coge el elemento con el className «sendbird-app__conversation-wrap» y establece el margen derecho a 318px.

Así, al abrir los ajustes se cambiará el diseño de la ventana de conversación para que haya espacio a la derecha de la página para que exista el menú. Entonces, cuando se haga clic en el menú de ajustes para cerrarlo, la ventana de conversación se expandirá hasta el lugar donde estaba antes la barra de ajustes.

Para que aparezca el menú de configuración, queremos añadir algo de CSS para posicionarlo correctamente en la vista de ventana:

Desde aquí, puedes alterar cualquier personalización CSS para que aparezca como te gustaría que se posicionara el menú de configuración.

Con estas implementaciones, el MobileView devolverá esto:

Y el DesktopView devuelve esto:

colorSet

A continuación, queremos utilizar la función
colorSet
en SendbirdProvider para definir los colores que componen el tema de UIKit. Una vez definido nuestro colorSet, tenemos que asegurarnos de pasarlo al componente SendbirdProvider.

Para nuestro ejemplo, estableceremos la variable –sendbird-light-primary-100 para que sea verde claro. Este color se aplica en la lista de canales como fondo del canal seleccionado, color de fondo del contenedor de una reacción emoji y color de fondo cuando el usuario actual edita su propio mensaje. Para nuestro ejemplo, podemos cambiar el color para que coincida con nuestros mensajes salientes a un tono más claro de verde.

A continuación, queremos definir –sendbird-light-primary-300 para que sea verde. Esta variable se utiliza en el color de fondo de los mensajes salientes, en el botón de crear un nuevo canal en la lista de canales, así como en los iconos como el icono de ajustes en la conversación del canal y todos los iconos dentro del menú de ajustes.

A continuación, configuraremos –sendbird-light-primary-400 para que sea un tono de verde ligeramente más oscuro. Los elementos que utilizan –sendbird-light-primary-400 incluyen el fondo al pasar por encima de los mensajes salientes, al pasar por encima del botón de guardar cuando quieres editar tu propio mensaje, y al pasar por encima del botón de crear para crear un nuevo canal.

Una variable colorSet importante es -sendbird-light-background-50, que se utiliza para el color de fondo de cada componente. El color actual por defecto es el blanco. En lugar de cambiar esta variable para tener un color de fondo uniforme o dejar el color de fondo de toda la aplicación en blanco, implementaremos CSS para cambiar el color de fondo de la ventana de conversación a beige claro. Le animamos a consultar la
lista de las variables colorSet
.

La función App debería tener ahora este aspecto:

Personalización de canales

Para dar algunos toques finales, añadiremos CSS. Para los mensajes entrantes, queremos eliminar el icono de la imagen de perfil junto al nombre del usuario. Una vez que eliminamos la imagen de perfil del usuario, queremos eliminar el estilo min-width que se le aplica para que no haya espacio vacío donde estaba antes el avatar.

Personalización de la lista de canales

En la cabecera de la lista de canales, queremos eliminar el alias y el ID del usuario actual. En lugar de utilizar CSS para lograr este objetivo, puede utilizar el componente de interfaz de usuario ChannelListHeader de ChannelList para personalizar su propio diseño específico y anular el diseño predeterminado.

Para el componente de vista previa del canal, estableceremos la visualización en ninguno en el recuento de miembros que se muestra junto al nombre del canal del grupo. Otra opción para diseñar su interfaz de usuario personalizada para la vista previa del canal sería utilizar la propiedad renderChannelPreview de ChannelList, que reemplazaría la cabecera predeterminada de Sendbird por su propio componente personalizado. Si desea ver el código, consulte la
hoja de estilos CSS completa
¡!

Este es el resultado final en un escritorio:

Clon de WhatsApp Messenger para escritorio

Y así es como se ve en un dispositivo móvil:

Clon de WhatsApp Messenger para móvil

Conclusión

Enhorabuena. Ahora has construido un clon de WhatsApp messenger en React. Dispone de una implementación de mensajería funcional al estilo de WhatsApp compuesta por componentes y módulos principales del UIKit de Sendbird. A partir de aquí, podrá construir su experiencia de chat con los elementos esenciales para adaptarse a las necesidades de su aplicación.

Consulte este
repositorio GitHub
para obtener una visión general de lo que hemos recorrido. Si desea más información, puede consultar nuestro
docs
o explore la gran cantidad de
tutoriales sobre UIKit
en nuestro
portal para desarrolladores
l. Visite los foros de la comunidad o póngase en contacto con nosotros si necesita ayuda con Sendbird UIKit.. Nuestros expertos están siempre dispuestos a ayudarle.

¡Disfruta construyendo tu clon de WhatsApp messenger! 💻

Categories: Engineering