Editor de Flujo Call Center — ahora con Angular 20 y Signals

Editor de flujos visual para centros de llamadas, ahora con Angular 20 y Signals. Deshacer/rehacer, modo claro/oscuro, UX fluida; demo en vivo y código fuente.

4 sept 2025 • 2 min de lectura • Equipo Q2BSTUDIO

Inteligencia-Artificial-

Hace aproximadamente un año compartí un pequeño proyecto paralelo: un editor de flujos para call center construido sobre Foblex Flow.

La idea era sencilla: permitir que las personas diseñen flujos de llamadas de forma visual arrastrando nodos y conectándolos, en lugar de escribir configuraciones manualmente.

Desde entonces, Angular ha evolucionado, y este editor también. Quise aprovechar Angular 20 y su nueva API de Signals, así que decidí darle una renovación completa.

Novedades

- Migración completa a Angular 20

- Gestión de estado reescrita con Signals, sin store externo, más simple y reactiva

- Interruptor de tema claro y oscuro para una edición más cómoda

- Funciones de deshacer y rehacer para experimentar sin miedo

- UX más fluida en zoom, arrastre y reconexión de nodos

- Interfaz basada en componentes de Angular Material

Demo y código

Puedes probarlo aquí: Demostración en vivo.

Explora el proyecto en Código fuente del editor y consulta la biblioteca Foblex Flow.

Reflexiones

Migrar todo a Signals simplificó mucho la lógica de estado. Deshacer y rehacer fue más sencillo de integrar, y persistir el estado en localStorage resultó casi trivial.

Es una buena muestra de lo rápido que evoluciona el ecosistema de Angular. Signals ya es lo bastante potente como para impulsar interfaces interactivas complejas.

Conclusiones

Este proyecto comenzó como un experimento y sigue creciendo junto con Angular. Signals simplificó el código y volvió al editor más responsivo.

Estoy planeando seguir puliéndolo, así que cualquier comentario es bienvenido. Si te resulta útil, considera dejar una estrella en GitHub. También puedes probar la demo en línea.

Cómo te ayuda Q2BSTUDIO

En Q2BSTUDIO impulsamos soluciones que transforman la operación de centros de atención y contact centers con aplicaciones a medida y software a medida de alto rendimiento. Si buscas construir un editor de flujos, orquestar integraciones con telefonía o llevar tu enrutamiento de llamadas a otro nivel, nuestro equipo puede diseñarlo end to end. Descubre cómo abordamos proyectos complejos con nuestro enfoque de desarrollo de aplicaciones a medida.

Además, integramos capacidades de inteligencia artificial para empresas, como agentes IA que optimizan la priorización de llamadas, análisis de sentimiento y automatización de procesos omnicanal. Conoce más sobre nuestras soluciones de inteligencia artificial.

Completamos el ciclo con ciberseguridad y pentesting para proteger tus canales de atención, despliegues en servicios cloud aws y azure, servicios inteligencia de negocio con power bi para analizar métricas de rendimiento en tiempo real y automatización de procesos para reducir tiempos de gestión. Si te interesa llevar tus flujos y tu operación a la siguiente etapa, en Q2BSTUDIO estamos listos para ayudarte.

¿UNA PAUSA?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.

Live Chat