Engineering

Creación de una aplicación de chat Vue: Usando el UIKit de Sendbird en una aplicación Vue.js

Creación de una aplicación de chat Vue: Usando el UIKit de Sendbird en una aplicación Vue.js

Construir
chat
es una tarea compleja. Tanto si construye para
asistencia sanitaria
,
juegos
,
servicios a la carta
o cualquier otro sector, crear un chat rico en funciones requiere esfuerzo. También es esencial elegir la pila tecnológica adecuada; en este tutorial, exploraremos cómo crear un chat con Vue.jsun popular marco web de JavaScript front-end para crear interfaces de usuario y pequeñas aplicaciones. También aprenderá a utilizar Sendbird’s
UIKit
un conjunto de
interfaz de usuario
dentro de tu aplicación de chat Vue.

Hay ocasiones en las que puedes querer renderizar componentes escritos en un framework de frontend diferente a tu aplicación; por ejemplo, al migrar un proyecto entre frameworks de frontend o al usar una librería de terceros (por ejemplo, vuetify) que no ha sido portado al framework de tu elección. En estos casos, existen varias bibliotecas puente. Por ejemplo, es posible renderizar Angular componentes en Reaccione aplicaciones con angular2react o Vue componentes en un Esbelto proyecto con adaptador de esbeltez. En este tutorial utilizaremos
Vue
para unir los mundos React y Vue.

Requisitos previos

Para empezar a construir tu aplicación de chat Vue, necesitarás
node.js
instalado y un ID de aplicación Sendbird. Si aún no lo ha hecho, puede
crear una cuenta Sendbird
y cree una aplicación en el
panel de control
.

Puede encontrar su ID de solicitud en el panel de Sendbird.

Lo que vamos a construir: Cómo debería ser tu aplicación de chat Vue

En este tutorial, crearemos una aplicación de chat Vue con una experiencia de usuario similar a la de WhatsApp para escritorio. El código final del proyecto está disponible en GitHub, y también le recomendamos que eche un vistazo a la demostración en vivo.

Nuestro proyecto será construido usando Vue 3 y la aplicación renderizará una versión completamente funcional de Sendbird’s React UIKit dentro de la aplicación principal de chat Vue. La aplicación Vue pasará configuraciones a UIKit y UIKit también pasará información del usuario a Vue. Esta comunicación bidireccional nos permitirá mostrar el nombre de un usuario de Sendbird y el recuento de mensajes no leídos en la cabecera superior de nuestra aplicación Vue. El resultado será el siguiente.

Configuración de la aplicación de chat Vue

Vue dispone de una práctica herramienta de línea de comandos para crear rápidamente aplicaciones de andamiaje. Simplemente ejecuta lo siguiente donde quieras que viva tu proyecto.

Este comando le guiará a través de las opciones a la hora de crear un nuevo proyecto. A continuación se indican los ajustes utilizados para este tutorial.

Para iniciar la aplicación en modo de desarrollo, ejecute los siguientes comandos.

Ahora debería ver una nueva y brillante página de aterrizaje cuando ejecute y visite http://localhost:5173. Este es el aspecto que debería tener:

Instalar y configurar Veaury

Veaury es una librería que permite el renderizado de componentes React dentro de aplicaciones Vue. Vale la pena señalar que los componentes Vue en aplicaciones React también son compatibles, pero están fuera del alcance de este tutorial. Veaury funciona tanto con Vue 3 como con Vue 2, y la librería puede instalarse desde npm con el siguiente comando:

Para permitir que nuestra recién creada aplicación de chat Vue importe y renderice componentes React, es necesario realizar un pequeño cambio en la configuración de compilación. Por lo tanto, tenemos que actualizar el archivo vite.config.js en nuestro proyecto para utilizar el plugin Veaury.

Después de este cambio de configuración, puedes añadir los componentes React que quieras a un directorio llamado react_app. Esos componentes React pueden entonces ser importados en archivos .vue y renderizados dentro de componentes Vue estándar.

Creando un componente React en nuestro proyecto Vue

Primero, necesitas crear un nuevo componente React en react_app. Este componente se encarga de importar, configurar y renderizar UIKit.

No tienes que hacer nada especial a este componente React para que funcione bien con Vue. El código hace lo siguiente:

  1. Importa las dependencias de Sendbird UIKit
  2. Inicializa UIKit con un id de aplicación y un id de usuario
  3. Utiliza withSendbird HOC para acceder al SDK de Sendbird. Esto nos dará acceso a la información del usuario necesaria para ser pasada de nuevo a la aplicación Vue

Vale la pena señalar que los props que se pasan a ChatReactComponent se pasan desde un componente Vue padre. Pasar props aquí es la forma de conseguir que la parte de React se comunique con Vue. En la siguiente sección se explica cómo definir e introducir estas propiedades.

Añadir UIKit a la página

A continuación, añade el ChatReactComponent a tu aplicación de chat Vue. La página que hay que actualizar es views/HomeView.vue. Elimine todo el código actualmente en views/HomeView.vue y añada el código de abajo.

Este código hace lo siguiente:

  1. Importa Veaury y nuestro nuevo componente de chat React
  2. Convierte nuestro componente React en un componente Vue utilizando la función applyPureReactInVue de Veaury.
  3. En la función setup, establece los datos y callbacks que pasaremos como props a nuestro componente React
  4. Define nuestro HTML para renderizar un encabezado superior. La cabecera incluye el nombre de usuario y el recuento de mensajes no leídos. Estos datos se devolverán desde UIKit en un paso posterior de este tutorial.
  5. Renderiza el componente React Chat en el HTML, pasando los datos y callbacks definidos anteriormente como atributos en el elemento Chat.
  6. Por último, añade un poco de estilo para que todo quede bonito

Ahora verá el renderizado de UIKit en el navegador cuando visite http://localhost:5173. Este es el aspecto que debería tener:

Pasar información del usuario a Vue

Por último, la información del usuario y el recuento de mensajes no leídos se devolverán a tu aplicación de chat Vue para que pueda mostrar esa información en la barra de encabezado superior de la aplicación. Se accede a esta información a través del SDK de Sendbird. Para acceder al SDK desde UIKit, puede utilizar una útil función llamada getSdk. Si llama a esa función como se muestra a continuación, obtendrá el SDK subyacente. A continuación, puede acceder a los métodos pertinentes para obtener lo que se necesita (recuento de mensajes no leídos e información de usuario) y pasar esa información de nuevo a Vue utilizando las devoluciones de llamada pasadas como props (setUnreadMessageCount & setSbUserInfo).

La barra superior de la aplicación muestra ahora un nombre de usuario visible y el recuento de mensajes. Observe el nombre de usuario «Bob» y el recuento de mensajes no leídos de 1 en la siguiente captura de pantalla.

Conclusión

Enhorabuena. Ahora tiene Sendbird UIKit ejecutándose en su aplicación Vue. En este tutorial, explicamos cómo crear una aplicación de chat Vue utilizando los componentes de diseño preconfigurados y repletos de funciones que proporciona Sendbird UIKit. Ya puedes crear grupos y empezar a chatear.

Recuerde que los datos fluyen en ambos sentidos entre el código Vue y React; un siguiente paso sensato sería intentar pasar diferentes tipos de propiedades al componente Chat react y utilizar esas propiedades para configurar UIKit de forma alternativa, por ejemplo, estableciendo los colores del tema de UIKit.

Si necesita ayuda con Sendbird Chat o el UIKitconsulte nuestra documentación de Chat y docs para UIKit¡! Encontrarás orientación sobre cómo poner en marcha el chat en tu aplicación con ricos componentes de interfaz de usuario preconstruidos. También puede encontrar respuestas en
Comunidad Sendbird
un foro en el que podrá plantear y responder preguntas relacionadas con todo lo relacionado con
Sendbird
. No dude en contacto con nosotros Si necesita ayuda, nuestros expertos estarán encantados de atenderle. ¡Feliz construcción del chat! 💻

Categories: Engineering