Flujo de trabajo de aplicaciones web

En AppMaster Web Designer, puede configurar la lógica empresarial para aplicaciones web en el lado del frontend además de la lógica del backend . Esta poderosa característica le permite crear aplicaciones web sofisticadas y dinámicas adaptadas a necesidades comerciales específicas.

En el contexto de una aplicación web, los procesos comerciales pueden incluir autenticación de usuarios, procesamiento de datos, transacciones en línea, gestión de contenido, operaciones de servicio al cliente y personalización de elementos de la interfaz de usuario según las condiciones.

Tres niveles de lógica empresarial en AppMaster Web Designer:

• Activadores de aplicaciones: son activadores de alto nivel que responden a eventos o estados de toda la aplicación, desencadenando procesos comerciales específicos.
• Procesos comerciales genéricos: son conjuntos predefinidos de operaciones que se pueden aplicar en varias partes de la aplicación, automatizando tareas y optimizando los flujos de trabajo.
• Activadores de elementos: más granulares que los activadores de aplicaciones, están vinculados a elementos específicos de la interfaz de usuario, activando procesos de negocio basados ​​en interacciones con estos elementos.

Al aprovechar estos niveles de lógica empresarial, AppMaster Web Designer le permite crear aplicaciones web que no sólo son visualmente atractivas sino también inteligentes y receptivas a las necesidades y comportamientos de los usuarios.

🔔 Es importante volver a cargar la vista previa en ejecución después de agregar cualquier lógica empresarial nueva para iniciar el BP.

Activadores de aplicaciones

Los activadores de aplicaciones en AppMaster Web Designer son activadores de alto nivel que responden a eventos o estados de toda la aplicación que ejecutan procesos comerciales específicos para mejorar la funcionalidad y la experiencia del usuario.

AppMaster ofrece una variedad de activadores de aplicaciones, cada uno diseñado para escenarios específicos:

• Al iniciar la aplicación: se activa cuando se inicia la aplicación, ideal para los procedimientos de configuración inicial.
• On App Navigate: se activa durante la navegación entre diferentes partes de la aplicación.
• On App Blur: se activa cuando la aplicación pierde el foco, útil para pausar o guardar acciones.
• Enfoque de la aplicación: se ejecuta cuando la aplicación recupera el foco, ideal para reanudar o actualizar contenido.
• On App Hidden: Se activa cuando la aplicación está minimizada o no es visible en la pantalla.
• En aplicación visible: se activa cuando la aplicación vuelve a ser visible, lo que resulta útil para actualizar contenido.
• On App Destroy: se ejecuta durante el proceso de cierre de la aplicación.
• En la aplicación en línea: se activa cuando la aplicación detecta un estado en línea, perfecto para sincronizar datos.
• En la aplicación sin conexión: se activa cuando la aplicación se desconecta, lo que permite funciones sin conexión.
• Se requiere autenticación en la aplicación: se activa al recibir una respuesta "401 (no autorizada)", lo que solicita una nueva autenticación del usuario.
• En aplicaciones prohibidas: activa una respuesta "403 (Prohibida)", que generalmente se usa para control de acceso y permisos.

La lista exacta de activadores de aplicaciones se puede ampliar creando puntos finales WebSocket en el nivel de backend de su aplicación.

Estos activadores se pueden emplear para administrar la autorización del usuario en el inicio, verificar los derechos de acceso, configurar la redirección tras cambios de autorización, manejar errores y mucho más, lo que los hace indispensables para crear una aplicación web segura y con capacidad de respuesta.

Procesos de negocio genéricos

Los procesos comerciales genéricos en AppMaster Web Designer están diseñados específicamente para encapsular operaciones repetitivas y lógica redundante en flujos distintos. Una vez creados, estos procesos comerciales se pueden integrar perfectamente como bloques distintos en cualquier nivel de los procesos comerciales de su aplicación web.

Características clave:

• Gestión eficiente del flujo de trabajo: al trasladar tareas comunes a procesos comerciales genéricos, reduce significativamente la duplicación y optimiza el flujo de trabajo de su aplicación.
• Funcionalidad de frontend: si bien reflejan la funcionalidad de los procesos de negocio de backend, los procesos de negocio genéricos se ejecutan de forma única en el frontend . Esto permite interacciones más rápidas y comentarios inmediatos dentro de la interfaz de usuario.

Facilidad de reutilización:

Para utilizar un proceso de negocio genérico mientras crea la lógica, simplemente arrastre el bloque deseado del grupo BP creados por el usuario a su lienzo.

🔔 Consideración de rendimiento: Es importante tener en cuenta que para tareas complejas y que requieren un uso intensivo de recursos, recomendamos ejecutar estos procesos en el lado del servidor (Backend). Este enfoque garantiza un mejor rendimiento y eficiencia, especialmente para operaciones que son exigentes desde el punto de vista computacional o requieren un manejo seguro de datos confidenciales.

Activadores de elementos

Los activadores de componentes en AppMaster Web Designer son esenciales para agregar interactividad a sus aplicaciones web. Estos desencadenantes están vinculados a elementos específicos de la interfaz de usuario y activan procesos comerciales predefinidos en respuesta a las interacciones del usuario. Cada componente de su aplicación tiene un conjunto de activadores que se pueden personalizar para crear una experiencia de usuario dinámica y atractiva:

• Activadores comunes: los componentes comparten un conjunto de activadores estándar como onCreate , onDestroy , onShow y onHide , que responden al ciclo de vida del componente y a los cambios de visibilidad.
• Activadores específicos: además de los activadores comunes, los componentes tienen activadores únicos adaptados a su funcionalidad. Por ejemplo, un botón puede tener un activador onClick , una tabla puede responder a onUpdateData y una pestaña puede tener un activador onTabSelect .

A pesar de la variedad, el principio subyacente sigue siendo coherente: un evento desencadena el correspondiente proceso empresarial. Al utilizar eficazmente los activadores de componentes, puede crear una aplicación web interactiva y responsiva que reaccione a las entradas del usuario en tiempo real, mejorando la experiencia general del usuario y haciendo que su aplicación sea más intuitiva y fácil de usar.

Acceso a desencadenadores

Para ver y configurar los activadores de un componente, seleccione el componente en el lienzo y navegue hasta la pestaña "Flujo de trabajo" en la barra lateral derecha. Aquí encontrará una lista de activadores disponibles. Al hacer clic en uno, podrá adjuntarle el proceso comercial que desee. Los disparadores con lógica adjunta están resaltados en azul para una fácil identificación.

Creación de procesos de negocio

La configuración de un proceso de negocio para un activador de componente sigue un enfoque similar a la creación de procesos de negocio backend, como se ve en el Módulo 4. Utilizará un lienzo común donde se agregan bloques que representan diferentes acciones. Las conexiones entre estos bloques definen la secuencia de acciones, lo que le permite crear flujos de trabajo complejos de forma intuitiva.

Creación de flujo de trabajo de aplicaciones

Creemos un proceso de negocio de este tipo para el botón Calcular. Primero, decida qué debemos hacer cuando se hace clic en el botón:

• Descubra los valores de X e Y. Consíguelos en los campos de entrada correspondientes.
• Inicie un punto final para cálculos y pásele los parámetros X e Y.
• Haga visible el contenedor de resultados.
• Coloque el resultado del cálculo en los campos de Etiqueta requeridos.

Seleccione nuestro elemento Calc Button en el lienzo y haga clic en el activador onClick .

Se abrirá el editor de procesos de negocio. Aquí construiremos nuestro proceso de negocio para el botón.

Obtener valores de entradas

El primer paso es obtener los valores ingresados ​​por el usuario. Para ello, AppMaster proporciona el bloque Input Float Get Data, que presenta una 'Clave de elemento' como parámetro de entrada y genera el 'Valor', esencialmente leyendo los valores actuales del componente especificado.

Debido a que tenemos dos campos separados (que representan los valores X e Y), deberá utilizar dos bloques 'Input Float Get Data', uno para cada campo de entrada.

Para configurarlo:

• Arrastre dos bloques de datos flotantes de entrada para obtener datos a su lienzo para cada campo de entrada.
• Configure la clave de elemento para cada bloque para que se corresponda con las respectivas entradas flotantes. Esto vincula el bloque al elemento de interfaz de usuario correcto, asegurando que lea los datos correctos.

Si anteriormente cambió el nombre de sus elementos en el Diseñador de UI mientras creaba la interfaz, localizar y seleccionar el componente necesario para cada bloque se vuelve sencillo.

☝️ Cambiar el nombre de los elementos durante la fase de diseño ayuda a identificarlos fácilmente más adelante durante la configuración de la lógica empresarial.

Inicie el punto final

Después de la recuperación de las entradas del usuario, la fase siguiente en el flujo de trabajo de su aplicación web es iniciar el Endpoint . Este paso crítico establece la conexión entre el Frontend (la interfaz de usuario) y el Backend (procesos del lado del servidor) de su aplicación web, y el comando para los cálculos se transmite desde el navegador al servidor.

Los puntos finales en AppMaster se representan como bloques de procesos comerciales distintos dentro de la aplicación. Para utilizar nuestros puntos finales, simplemente elija el apropiado de la lista de bloques de procesos de negocio y arrástrelo a su lienzo.

En el módulo 5 , configuramos un punto final con un método GET y le asignamos la URL base "module4-basic" . Debería encontrarlo en la lista como: Solicitud del servidor GET /module4-basic/ y arrástrelo al lienzo.

A diferencia de los componentes, los puntos finales de AppMaster no requieren la configuración de su ID, ya que está predefinido. Esta característica agiliza el proceso de integración de puntos finales en su lógica empresarial.

El último paso es ingresar los valores X e Y que obtuvo en el paso anterior en el punto final. Esto permite que el backend reciba y procese estas entradas, realizando los cálculos necesarios.

Estado de los elementos de la interfaz de usuario

El siguiente paso en el flujo de trabajo de su aplicación web es administrar la visibilidad de los contenedores; específicamente, mostrar el contenedor que muestra los resultados y ocultar el contenedor que contiene una sugerencia.

A continuación se explica cómo lograrlo:

1. Comience arrastrando dos bloques de Propiedades de actualización de Flex a su lienzo.
2. Para cada bloque de Propiedades de actualización de Flex , asigne el parámetro Clave de elemento correspondiente a los contenedores respectivos: uno para el contenedor de resultados y el otro para el contenedor de sugerencias.
3. Configure el parámetro de visibilidad dentro de estos bloques. Establezca el parámetro Visible en Verdadero para el contenedor de resultados, asegurándose de que sea visible después del cálculo. Por el contrario, establezca este parámetro en False para que el contenedor de sugerencias lo oculte al finalizar el cálculo.

Al implementar estos pasos, crea una respuesta dinámica en la interfaz de su aplicación. Después de la acción de un usuario, como hacer clic en un botón para realizar cálculos, la aplicación oculta automáticamente el contenedor de sugerencias y muestra el contenedor de resultados.

Esto no sólo mejora la experiencia del usuario sino que también mantiene la interfaz de su aplicación limpia y centrada en la información relevante en cada etapa de la interacción.

Vista previa en tiempo real

Para evaluar el progreso de su proceso de negocio, puede obtener una vista previa fácilmente de los resultados intermedios:

1. Primero, haga clic en el botón Guardar y salir dentro del editor de procesos de negocio. Esta acción guardará su flujo de trabajo actual y cerrará el editor de procesos de negocio.
2. Ejecute una vista previa en tiempo real de su aplicación web para comprobar la interacción con la aplicación como si estuviera en vivo.
3. Pruebe la funcionalidad haciendo clic en el botón Calcular .

Si su proceso de negocio se ha configurado correctamente, verá la respuesta dinámica: el contenedor con la sugerencia se ocultará y, simultáneamente, se revelará el contenedor que muestra los resultados.

Este método de prueba ofrece una forma práctica e inmediata de garantizar que sus procesos comerciales funcionen según lo previsto, permitiéndole realizar los ajustes necesarios antes de finalizar su aplicación.

Representación de datos

Una vez que haya probado con éxito la lógica de su aplicación, es hora de perfeccionar aún más su lógica empresarial.

El último paso consiste en mostrar los resultados calculados dentro de la interfaz de su aplicación web. Asignaremos los datos de salida de nuestro proceso de negocio backend a los elementos relevantes de la interfaz de usuario de su aplicación web.

Dado que los resultados del backend se devuelven en un orden predeterminado, su tarea es alinear cada pieza de datos (elemento de matriz) con el elemento de bloque de texto correcto en su interfaz de usuario.

Para el tratamiento de datos utilizaremos los siguientes bloques:

• Elemento de matriz : utilícelos para acceder a elementos individuales dentro de la matriz de resultados. Necesitará un bloque para cada índice, del 0 al 4.
• A texto: dado que sus datos están en formato flotante, use este bloque para convertir estos valores flotantes a un formato de texto adecuado para su visualización.
• Datos de actualización del bloque de texto: este bloque es esencial para completar los bloques de texto en su interfaz de usuario con los datos de texto convertidos.

Estos bloques extraerán datos de la matriz de resultados, convertirán los datos a un formato de texto y luego actualizarán los bloques de texto correspondientes en su interfaz de usuario.

Aquí se explica cómo configurarlo:

1. Coloca estos bloques en el lienzo.
2. En el bloque Elemento de matriz , ingrese la matriz recibida desde su punto final (comience desde 0).
3. Establezca el índice para apuntar al elemento apropiado dentro de la matriz.
4. Conecte el valor de salida del elemento de matriz al bloque Al texto .
5. Especifique la clave del elemento en el bloque de texto Actualizar datos en el elemento de la interfaz de usuario donde desea que se muestren los datos.
6. Conecte los bloques secuencialmente.

Duplica esta secuencia de bloques para cada elemento de la matriz que deseas mostrar. Ajuste el índice en cada bloque 'Elemento de matriz' para que corresponda a los diferentes elementos de la matriz.

Asegúrese de que estos bloques también estén conectados en una secuencia.

Resultado final

Esto completa la creación del proceso de negocio.

Guarde su proceso de negocio y compruebe el resultado final en la vista previa. Ejecute una vista previa de la aplicación en ese plan de implementación donde publicó su punto final en el Módulo 5 .

🎉 ¡Felicitaciones por el fantástico logro!

Ha desarrollado con éxito una aplicación web completamente funcional con lógica empresarial y una interfaz de usuario interactiva. Si todo funciona según lo previsto, ahora está listo para dar el siguiente paso final: publicar su aplicación y compartirla con los usuarios.

Pero el viaje no termina aquí. ¡Hay muchas oportunidades para perfeccionar aún más su aplicación! Puede mejorar el atractivo visual y la experiencia del usuario personalizando la apariencia de los elementos de su interfaz de usuario o ampliando la lógica de su aplicación web. Por ejemplo, puede hacer que los campos sean obligatorios y agregar un botón para restablecer los campos sin borrar manualmente cada entrada.