App Builder Release: Soporte de Múltiples Acciones, Generación de Vistas de IA, Manejo Remoto de Datos y Más

Estoy encantado de compartir las nuevas y emocionantes actualizaciones de App Builders que aparecen en nuestra última versión. Como siempre, su objetivo es agilizar aún más el proceso de desarrollo de aplicaciones. Hemos introducido características clave que mejoran la flexibilidad en el proceso de creación de aplicaciones y el rendimiento al trabajar con datos remotos, incluida la compatibilidad con múltiples acciones, que permite que una sola interacción (por ejemplo, clic, selección de filas) desencadene ahora múltiples acciones, lo que permite flujos de trabajo más complejos.

También hemos añadido una nueva forma de crear tus vistas de página con indicaciones de IA. Además, ahora puede configurar el manejo remoto de datos (con paginación) en elementos que no son de cuadrícula, como diseños de tarjeta, fila y columna, lo que mejora enormemente el rendimiento al obtener y mostrar dinámicamente conjuntos de datos más pequeños de servidores remotos.

Además, introdujimos un nuevo componente en la caja de herramientas: el carrusel, así como una nueva función de resúmenes deshabilitados. Estas actualizaciones continúan fortaleciendo la posición de App Builder como la plataforma de referencia para el desarrollo de aplicaciones de bajo código y alto rendimiento.

Antes de sumergirte en las nuevas características y todas las nuevas funcionalidades, si es la primera vez que aprendes sobre App Builder, permíteme compartir rápidamente por qué deberías considerarlo como una herramienta clave en el proceso de desarrollo de aplicaciones para tu organización:

• Un App Builder visual: la plataforma unificada para gerentes de producto, diseñadores, desarrolladores y partes interesadas.
• Herramienta de arrastrar y soltar WYSIWYG basada en la nube que ayuda a las empresas a diseñar y crear aplicaciones comerciales completas un 80 % más rápido que nunca.
• Una herramienta low-code que genera código Blazor, código Angular, Web Components y código React listos para producción a partir de sus diseños Figma.

Soporte de Acciones Múltiples

Una sola interacción (por ejemplo, clic, selección de filas) ahora puede desencadenar múltiples acciones, lo que permite flujos de trabajo más complejos. La gestión de interacciones en App Builder se ha vuelto más potente con la introducción de Múltiples acciones por activador. Anteriormente, los usuarios solo podían definir una única acción por evento, lo que limitaba la flexibilidad en el manejo de flujos de trabajo complejos. Con esta actualización, una sola interacción, como un clic en un botón o un cambio en la selección de filas, ahora puede desencadenar varias acciones, lo que permite comportamientos más completos de la aplicación sin soluciones alternativas adicionales.

El nuevo soporte de acción múltiple de App Builder conduce a una mayor flexibilidad para el diseño de interacción: con esta nueva capacidad, los usuarios pueden configurar varias acciones para que se ejecuten simultáneamente o en secuencia dentro de una sola interacción. Como resultado, cuando se activa un evento, se pueden realizar varias operaciones predefinidas, como establecer valores para diferentes variables, abrir o cerrar componentes, navegar a otra página o ejecutar acciones específicas del componente. Esta característica mejora significativamente la automatización del flujo de trabajo, lo que facilita la creación de aplicaciones dinámicas e interactivas.

Se puede ver un recorrido detallado como parte del último seminario web que tuvimos:

Casos de uso del mundo real

Considere un escenario en el que un usuario selecciona una fila en una cuadrícula. Con Acciones múltiples, ahora puede establecer varias variables a la vez: una que capture el ID de cliente seleccionado y otra que almacene el objeto de cliente completo para su posterior procesamiento. Esto garantiza que todos los datos necesarios estén fácilmente disponibles sin necesidad de interacciones adicionales.

Otro ejemplo es un cuadro de diálogo de edición para administrar registros. Al hacer clic en el botón de edición de una tarjeta de datos, el sistema puede establecer una variable para realizar un seguimiento del elemento editado actualmente y, al mismo tiempo, abrir un cuadro de diálogo modal para mostrar el registro. Este enfoque optimizado hace que la interfaz de usuario sea receptiva e intuitiva. Ampliando esto aún más, al enviar una actualización, se pueden ejecutar múltiples acciones: el envío del formulario, cerrar el cuadro de diálogo y mostrar un mensaje de confirmación en una barra de bocadillos, lo que brinda una experiencia de usuario perfecta.

IA generativa para crear vistas de aplicaciones

App Builder AI presenta funciones de IA generativa para la creación de vistas. Esta característica se puede encontrar actualmente en nuestro sitio de vista previa para recibir comentarios de los usuarios. Estas características permiten a los usuarios generar diseños de interfaz de usuario mediante solicitudes de texto libre.

El artículo "Primeros pasos" está disponible aquí.

También hicimos un seminario web sobre las capacidades de IA de App Builder.

Mensaje "Crear una pantalla de inicio de sesión detallada" con imagen del resultado.

Otras capacidades introducidas con esta versión:

• Generación de vistas basadas en solicitudes: los usuarios pueden generar componentes de la interfaz de usuario ingresando solicitudes para refinar las salidas a través de acciones iterativas como agregar, reemplazar o crear nuevas vistas. El comportamiento contextual garantiza la flexibilidad en las modificaciones del diseño.

• Ejemplos de casos de uso en el tema de ayuda oficial: Las demostraciones incluyen plantillas generadas por IA para una pantalla de inicio de sesión y una vista de reserva de servicio de automóviles, que muestran un diseño estructurado y la generación de componentes basada en indicaciones detalladas del usuario.

Manejo eficiente de datos con operaciones de datos remotas

Administrar grandes conjuntos de datos de manera eficiente ahora es más fácil con las operaciones de datos remotos en App Builder. Esta funcionalidad permite a los usuarios iterar sobre los datos utilizando componentes como Tarjeta, Diseño de columna, Diseño absoluto y Diseño de fila, mientras que el componente Paginador garantiza que solo se obtenga la página de datos requerida del servidor. Esto mejora significativamente el rendimiento y la escalabilidad. Aquí puedes encontrar el tema completo.

Además, consulte nuestro tutorial detallado sobre cómo configurar y usar las capacidades de manejo remoto de datos con App Builder. 

Principales ventajas

• Rendimiento optimizado: Obtiene solo los datos necesarios, lo que reduce la carga del servidor y mejora la capacidad de respuesta de la aplicación.
• Escalabilidad: Maneja grandes conjuntos de datos de manera eficiente mediante la recuperación de fragmentos más pequeños de datos bajo demanda.
• Configuración flexible de la interfaz de usuario: permite que los componentes repetidos, como las tarjetas, se coloquen en diseños personalizados mientras se benefician de las funciones de paginación.
• Configuración de paginación sin problemas: Agrega automáticamente un paginador y simplifica la configuración de paginación remota con configuraciones intuitivas.

Cómo funcionan los datos remotos que dan prioridad a los componentes

Cuando un usuario repite un componente sobre datos (por ejemplo, una tarjeta que itera sobre una matriz JSON) y selecciona un punto de conexión de una fuente de datos, se puede habilitar la paginación remota si la API lo admite. App Builder agrega automáticamente un paginador y los usuarios pueden configurar los ajustes de paginación a través del configurador de paginación remota. Se crean variables internas como pageIndex y pageSize, y al cambiar las páginas se activan nuevas solicitudes del servidor para obtener solo los datos necesarios.

Configuración de la paginación de datos remota

1. Repetir un componente sobre datos: Arrastre y suelte un componente compatible (tarjeta, diseño de columna, diseño absoluto, etc.) y seleccione los datos.
2. Elija una fuente de datos: seleccione un punto de conexión REST o una definición de Swagger que proporcione la respuesta JSON.
3. Habilitar paginación: active la paginación y App Builder ajustará el componente en un diseño de fila mientras agrega un paginador.
4. Vista previa de la configuración: pruebe la configuración para garantizar la obtención de datos y la navegación sin problemas.

Alternar resúmenes de cuadrícula

​Alternancia Resúmenes de cuadrícula: se agregó una propiedad para habilitar/deshabilitar resúmenes por columna.

Componente Carrusel en la caja de herramientas

Se ha añadido el componente Carrusel a la caja de herramientas del componente. Para ver un caso de uso real, diríjase a la aplicación Movies Samples:

---

Algunas palabras finales

App Builder cambia las reglas del juego en el proceso de desarrollo de aplicaciones. Su constructor visual basado en la nube, sus capacidades low-code y sus nuevas funciones lo convierten en una herramienta imprescindible para cualquier organización. ¡Pruébalo hoy! Si necesitas más detalles, te animamos a que consultes nuestro:

• Canal Discord.
• Discusiones de GitHub.
• Hoja de ruta.

To experience everything, head over to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So, please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.

---

• Maximización de la agilidad empresarial con desarrollo low-code
• App Builder AI: ¿Cómo agiliza el desarrollo de aplicaciones?
• App Builder lanzamiento: IA, diseño de cuadrícula CSS y más
• 5 características clave a tener en cuenta a la hora de elegir una plataforma low-code
• React Generación de código: guía paso a paso