Ecosistema Quibox

Chat en Tiempo Real con WebSockets

Módulo de chat con Socket.IO para el ecosistema Quibox: dos conversaciones en tiempo real, local afiliado con conductor y conductor con cliente, integradas en dos plataformas web y una app móvil sobre un mismo backend NestJS.

Desarrollador Full StackSep – Nov 2022Corporación Wolf S.A. · Quibox
Diagrama de arquitectura del chat en tiempo real de Quibox: las apps de locales afiliados, conductores y clientes se conectan por WebSocket a un backend NestJS con Socket.IO que guarda el historial en PostgreSQL; hay un chat local-conductor y otro conductor-cliente
Chat web de la plataforma de locales afiliados: lista de conversaciones a la izquierda, conversación con un cliente a la derecha con burbujas naranjas y respuestas rápidas predefinidas
App móvil del conductor en React Native: pantalla de lista de chats y pantalla de conversación con respuestas rápidas, mensajes de sistema y burbujas azules
Vista responsive del chat web de locales afiliados a tamaño de teléfono y lista de chats de la app de clientes, que reutiliza los componentes de la app del conductor

Contexto

Quibox es un ecosistema logístico de Corporación Wolf con varias aplicaciones: la plataforma web de locales afiliados (App-Affiliates), la plataforma web de clientes (App-User), la aplicación móvil de conductores (App-Driver) y un backend común. La coordinación de cada entrega necesitaba dos conversaciones en tiempo real dentro del propio sistema: el local afiliado con el conductor que recoge el pedido, y el conductor con el cliente que lo recibe. Sin un canal propio, esa comunicación ocurría por teléfono o mensajería externa, sin registro ni trazabilidad. El módulo se me asignó durante las prácticas preprofesionales en el departamento de desarrollo de la empresa.

Solución

Desarrollé el módulo de forma individual, con la supervisión del tutor técnico de la empresa, cubriendo las cuatro capas: las tablas necesarias en PostgreSQL, los servicios web del backend en NestJS con TypeORM, un gateway de Socket.IO que gestiona las salas de cada conversación y entrega los mensajes en ambos sentidos, y las interfaces de chat en las tres aplicaciones. Empecé por la plataforma web de locales afiliados (React y Tailwind CSS, con diseño responsive), seguí con la app móvil de conductores (React Native, con sus componentes, modelos y pantallas) y cerré con la plataforma web de clientes, reutilizando el mismo código de la app de conductores. Todo el stack en TypeScript. Los servicios se probaron manualmente con Insomnia antes de consumirlos desde las interfaces.

Resultado

Las tres aplicaciones quedaron con el chat operativo sobre el mismo backend: local afiliado y conductor coordinan la recogida, y conductor y cliente la entrega, con el historial guardado en PostgreSQL. Reutilizar el código móvil en la app de clientes redujo el tiempo de la tercera integración.

Funcionalidades clave

  • Dos chats en tiempo real con Socket.IO: local afiliado con conductor y conductor con cliente
  • Modelo de datos y tablas en PostgreSQL para conversaciones y mensajes
  • Servicios web del backend en NestJS con TypeORM para crear conversaciones, enviar y listar mensajes
  • Gateway de WebSockets con salas por conversación y entrega bidireccional
  • Interfaz de chat responsive en las plataformas web de locales afiliados y clientes (React y Tailwind CSS)
  • Interfaz de chat en la app móvil de conductores (React Native) con componentes reutilizados en la app web de clientes

Retos y soluciones

El primer reto fue entender cómo debían interactuar las aplicaciones entre sí: no era un solo chat sino dos, con actores distintos en cada extremo, y el backend tenía que servir a los tres clientes sin duplicar lógica. Resolví eso centralizando las salas y los mensajes en el gateway de NestJS y dejando a cada aplicación solo la presentación. El segundo fue construir la misma funcionalidad en tres proyectos con tecnologías distintas (React web y React Native móvil) manteniendo el comportamiento consistente; diseñé los componentes de la app de conductores pensando en reutilizarlos, y así la integración en la app de clientes se hizo con el mismo código. Fue mi primer módulo en producción real, con inducción del tutor empresarial sobre el entorno y los proyectos existentes.