Diseño de UI de Cosmos

Cosmos es un reemplazo para la generación anterior del sistema de diseño de Pega, el kit de UI de Pega. Ambos mejoran las experiencias de los empleados de nuestro cliente y se enfocan en las aplicaciones de producción. Aún así, el sistema de diseño de Cosmos va más allá de UI-Kit, y proporciona una capa de presentación completa compuesta por una colección de componentes perfectamente implementados que admiten la accesibilidad y la localización listas para usar.

El sistema de diseño de Pega Cosmos ayuda a los equipos a lograr rápidamente experiencias de usuario ideales en sus aplicaciones de negocios, proporcionando una interfaz de usuario prescriptiva, coherente, intuitiva y fácil de entender. Los clientes de Pega Cosmos se basan en REACT Web-Standard y utilizan la API de Pega Developer Experience (DX) para interactuar con el servidor de Pega, lo que proporciona una arquitectura abierta y modular basada en API.  Pega Cosmos ofrece una separación de temas (SOC) entre la lógica de negocio y la de la presentación.

En este diagrama, se ilustra cómo las diferentes partes de Cosmos representan una arquitectura de Model View Controller (MVC). Los componentes de reacción son la vista en MVC. Constellation, la capa de orquestación en tiempo de ejecución, es el controlador en MVC.  El servidor de Pega o el motor Engine es el modelo en MVC.

El sistema de diseño de Pega Cosmos se creó para la AI, la gestión de casos y la colaboración, y en torno a estas, y se prueba con métricas específicas de la empresa. Obtenga resultados rápidos en su negocio con las experiencias listas para usar de Pega. El sistema de diseño de Cosmos es una biblioteca de patrones UX representados como un kit de desarrollo compatible con las metodologías Pega Express y Center-Out.

El framework de Pega Cosmos UX se especializa en tres experiencias distintas: para desarrolladores que crean aplicaciones de low-code, para usuarios de negocio que administran flujos de trabajo diarios y para los clientes con quienes se interactúa de forma directa.

Cosmos es un sistema de front-end configurable en App Studio (low-code) para desarrolladores de aplicaciones. Pega Cosmos proporciona una capa de presentación profesional completa con arquitectura de información, interacciones y accesibilidad adecuada. Es un conjunto de herramientas de UX completo para las necesidades de las grandes organizaciones, y se basa en los casos de uso de las aplicaciones de gestión de casos.

Cosmos puede representarse en cuatro tecnologías distintas: UI tradicional de Pega, iOS, Android y React. Tenga en cuenta que la UI de Cosmos React estará disponible en Pega v8.6 para sistemas de producción.

Beneficios del diseño de Cosmos, una nueva forma de trabajar:

• Mejor rendimiento del trabajo.
• Mejor experiencia de relación de objetos.
• AI integrada en la experiencia.
• Mejor experiencia de usuario cuando se usan herramientas de colaboración interna.
• Permite responder a los tamaños crecientes de monitores o dispositivos.

Por diseño, solo hay un portal del usuario en Theme-Cosmos. La landing page del portal del usuario se divide, en términos generales, en tres partes:

• Panel de resumen: incluye metadatos de objetos, datos de objetos y objetos relacionados. 
• Área de trabajo: incluye tareas de ciclo de vida, tareas ad-hoc, tareas sugeridas (a través de AI), colaboración, tareas completadas. 
• Widgets: incluye participantes, utilidades, archivos adjuntos, cotizaciones, socios. 

Para obtener más información sobre cómo personalizar la UI de Cosmos, consulte Personalizar una aplicación de reglas de Cosmos.

UI-Kit y Cosmos son dos sistemas de diseño completamente diferentes.  Al igual que con la migración entre cualquier sistema de diseño, la migración es un esfuerzo de desarrollo. El nivel de esfuerzo depende de la complejidad de la aplicación. 

• Comprender el nivel de esfuerzo
• Enfoques y consejos para la migración
• Prácticas recomendadas

Comprender el nivel de esfuerzo

El nivel de esfuerzo depende de lo siguiente:

• El número de tipos de casos.
• El número de reglas anuladas de UI-Kit.
• Las anulaciones de skin y los formatos de skin personalizados.
• El uso de formatos de skin que no existen en el skin de Cosmos.
• Consideraciones de la regla de sección:
  • Cantidad de secciones anuladas de UI-Kit
  • Secciones no basadas en plantillas de diseño
  • Clases auxiliares de secciones para creación de estilo
  • Secciones/HTML/controles personalizados no compatibles

Enfoques y consejos para la migración

Para obtener instrucciones paso a paso detalladas sobre cómo migrar una aplicación creada en UI-Kit a Cosmos UI, consulte Migrar una aplicación existente de UI-Kit a Cosmos UI.

prácticas recomendadas

Para prepararse para la migración de Cosmos UI, siga las siguientes prácticas recomendadas.

Aprender a diseñar aplicaciones en Cosmos

1. Articule los objetivos principales de la aplicación. 
   Olvídese de la jerga y la terminología del sector y describa de la manera más simple posible los objetivos principales de la aplicación. Este concepto está ligado a la metodología de Pega Express™. 
2. Identifique los objetos de negocio reales y a dónde van en el sistema Cosmos.
   Debe identificar qué datos se requieren, a dónde van esos datos y cómo se debe acceder a ellos desde la UI.
3. Recorra un ejemplo caso de uso concreto.
   Debe identificar qué acciones, trabajos y actividades deben realizarse y dónde debe completarlos.  Además, identifique cómo funcionan la AI, la colaboración y la navegación dentro del sistema.

Una vez que haya identificado estos tres elementos, será mucho más fácil diseñar dentro del sistema de Cosmos.

Cumplimiento con el Diseñador de casos

Utilice el Diseñador de casos para configurar sus tipos de casos para emplear relaciones de casos y subcasos sin problemas. Use App Studio Data Designer para administrar las relaciones de datos.

UI basada en plantilla de diseño

Cosmos aprovecha al máximo las plantillas, ya que es un sistema completamente basado en plantillas. Si pasa a plantillas de diseño en sus app ahora, eso lo ayudará a pasar a Cosmos más adelante. 

Evitar HTML personalizado, controles personalizados y secciones personalizadas

Las app integradas en lanzamientos anteriores de Pega todavía tienen muchos componentes personalizados creados con JSP u otras tecnologías. Esos componentes no pueden funcionar dentro de una UI basada en React. En su lugar, es mejor usar controles listos para usar, que tienen equivalentes de React listos para usar.

Para obtener detalles adicionales sobre el enfoque de UI y UX de Pega, consulte el seminario web de excelencia de UI/UX.