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 read • Q2BSTUDIO Team

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.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat