Aplicaciones Web Archives - Software Evolutivo

Apache ActiveMQ Artemis

Bryan Diaz — Wed, 17 Jul 2024 04:28:25 +0000

En este artículo vamos a hablar sobre una herramienta muy popular para la comunicación entre aplicaciones llamada Apache ActiveMQ Artemis, además revisaremos un ejemplo de cómo implementar su funcionamiento utilizando dos microservicios implementados con Spring Boot y Java.

A menudo, nos encontramos con eventos que suceden en nuestros sistemas y necesitamos que otros sistemas se enteren de ellos. Notificar estos eventos de manera síncrona puede generar problemas de rendimiento y disponibilidad, ya que los sistemas dependen de la respuesta inmediata de otros sistemas. En cambio, hacerlo de manera asíncrona presenta varias ventajas, como la reducción de la dependencia y el acoplamiento entre sistemas, mejorando la eficiencia y la escalabilidad de nuestras aplicaciones.

A veces, incluso tenemos procesos manuales que requieren la intervención de una persona para realizar acciones en respuesta a un evento. Con la ayuda de Apache ActiveMQ Artemis, podemos conectar nuestras aplicaciones de manera más eficiente y eliminar estos procesos manuales que no generan valor a nuestros negocios. Este tipo de productos, conocidos como MOM (Message Oriented Middleware), nos permiten implementar el asincronismo, facilitando la comunicación entre sistemas de una manera más flexible y robusta.

Artemis

Comenzamos hablando sobre qué es ActiveMQ Artemis.

En términos oficiales, Apache ActiveMQ Artemis es un intermediario que facilita la comunicación entre diferentes sistemas o aplicaciones. Es de código abierto, muy popular y multiprotocolo, basado en Java. Artemis permite integrar aplicaciones multiplataforma utilizando diversos protocolos, como AMQP (Advanced Message Queuing Protocol – Protocolo Avanzado de Cola de Mensajes), JMS, MQTT, STOMP, OpenWire, entre otros. Gracias a esta variedad de protocolos, Artemis es una excelente opción para tener comunicación entre dos aplicaciones y poder pasar información de un sistema a otro cuando ocurre un evento.

Arquitectura

La estructura utilizada es un Middleware Orientado a Mensajes (MOM), el cual permite la comunicación a través del intercambio de mensajes de forma asíncrona. Esto significa que las operaciones se llevan a cabo sin requerir que todas las partes involucradas en la comunicación estén disponibles al mismo tiempo que ocurre el envío de eventos, permitiendo así que los procesos continúen su ejecución sin esperar una respuesta inmediata.

En Artemis contamos con dos tipos de envío de mensajes: los mensajes que se envían a colas de tipo anycast y los de tipo multicast.

Anycast: Conocido como punto a punto (Point-to-Point), en este tipo de cola, varios consumidores están a la escucha de la misma cola y van leyendo los mensajes a medida que llegan. Sin embargo, no todos los consumidores pueden leer el mismo mensaje al mismo tiempo.

Multicast: Es un modo de distribución de tipo publicación-suscripción (pub/sub). Cada mensaje que se envía a una dirección de tipo multicast se replica a las colas que contienen cada sistema que esté a la escucha de los mismos. Como se muestra en la gráfica, aquí tenemos dos consumidores y ambos se enterarán del mismo mensaje al mismo tiempo.

Para el desarrollo de este blog, se trabajará con colas de tipo anycast.

La versión que utilizaremos de ActiveMQ Artemis será la última hasta la fecha de este blog, que es la 2.35. Podemos buscarla en DockerHub como se puede observar en la imagen.

Spring Boot

Para este blog vamos a trabajar con microservicios de Spring Boot, utilizaremos Maven y el lenguaje Java. La última versión de Spring Boot hasta la fecha de este blog es 3.3.1, y la versión de Java es 21. Agregaremos ActiveMQ Artemis a los proyectos. Los proyectos tienen el nombre de “producer” y “consumer”. El producer es el encargado de enviar el mensaje a Artemis y crear la cola en Artemis, y el consumer es el encargado de suscribirse a esa cola y leer los mensajes que envíe el producer.

Escenario a Resolver

En un hospital, hay dos sistemas involucrados en la gestión de camas que funcionan de la siguiente forma:

El Sistema A, encargado de registrar la disponibilidad de camas cuando un paciente abandona la sala de emergencias.
El Sistema B, monitorea la ocupación de camas en todo el hospital.
Actualmente, cuando el Sistema A registra que una cama está disponible, una enfermera debe ingresar manualmente esta información en el Sistema B.
Se busca una mejora para sincronizar automáticamente estos sistemas, de modo que cualquier actualización en el Sistema A se refleje instantáneamente en el Sistema B, eliminando la necesidad de registros manuales.

Para desarrollar este requerimiento, los proyectos que creamos en Spring Boot serán: el producer como nuestro Sistema A y el consumer como nuestro Sistema B.

En el proyecto que creamos en Spring, al agregar la dependencia de Docker y ActiveMQ Artemis, se genera un archivo compose.yaml. Utilizaremos este archivo para levantar nuestro contenedor de Artemis. En el proyecto producer, como es el que va a generar el evento, editaremos el archivo compose.yaml, añadiendo la siguiente información:

Para levantar el contenedor de Artemis con las modificaciones realizadas al archivo compose.yaml, en este blog se ejecutará con Podman porque la práctica se está realizando en un sistema operativo Fedora, que ya lo incluye. Pero si cuentan con Docker también pueden utilizarlo, no habría problema. Ejecutamos nuestro archivo desde la ubicación donde se encuentra nuestro archivo compose.yaml y ejecutamos:

podman-compose -f compose.yaml up

o con Docker:

docker compose -f compose.yaml up

Esto comenzará a descargar la imagen de Artemis.

Una vez que en los logs salga un mensaje como el siguiente: AMQ241004: Artemis Console available at link, podemos ingresar a un navegador y acceder a la URL localhost:8161 para acceder a la pantalla de Artemis.

Las credenciales serán las que configuramos en nuestro archivo compose.yaml, en este caso artemis como username y artemis como password.

Una vez dentro de la consola, podemos observar las versiones de Artemis y navegar por el mismo.

Se debe deshabilitar el Docker Compose de los proyectos Spring Boot, en el archivo de propiedades application.properties colocar:

spring.docker.compose.enabled=false

Para que no se levante Artemis cada que se ejecute el proyecto, sino que se levante una única vez cuando nosotros lo necesitemos.

Para poder enviar el evento desde el Sistema A al Sistema B, necesitamos un método que nos ayude con el envío. En este caso, hemos creado el método pushRequestPaymentOrder (puedes darle cualquier nombre). Primero, creamos nuestro DTO que contendrá la información que necesita el Sistema B. Para nuestro caso planteado, vamos a enviar un mensaje que indique que la cama está disponible y el ID de la cama correspondiente.

Utilizamos el atributo de clase que inyectamos de JmsTemplate, una clase de Spring que facilita el envío y recepción de mensajes a través de JMS. Utilizamos el método convertAndSend, que convierte el objeto DTO en un mensaje en formato JSON y lo envía a TopicDemo, que es el nombre de la cola a la que se envía el mensaje.

El método pushRequestPaymentOrder se llama desde la lógica de negocio en el sistema cuando se necesita encolar información. Por ejemplo, cuando se detecta que una cama está disponible, se invoca este método para enviar la información al Sistema B.

Para que podamos observar la información de ese mensaje en Artemis, debemos tener en nuestro producer lo siguiente:

El convertidor se utiliza tanto en el productor como en el consumidor para manejar la transformación del DTO. En el Sistema A, el convertidor transforma el DTO de un objeto Java a JSON antes de enviarlo a Artemis. Luego, cuando consumimos el evento en el Sistema B, el convertidor transforma el JSON almacenado en Artemis de vuelta a un objeto Java. Esto asegura que los datos se mantengan consistentes y fácilmente manejables a lo largo del proceso de comunicación entre sistemas.

Una vez confirmado que nuestro evento llegó con normalidad a Artemis y podemos observar su información, lo siguiente es levantar nuestro Sistema B, que en este caso sería nuestro consumidor. Debemos configurarlo para que esté a la escucha de los eventos que lleguen a una cola específica para poder leerlos y acceder a su información.

Eso lo realizamos de la siguiente manera:

Creamos nuestro método que tiene la etiqueta @JmsListener, que indica que está a la escucha de lo que llegue a esa dirección de cola, llamada TopicDemo, que es el nombre de la cola donde el producer envió el evento. Pero como se mencionó anteriormente, al momento de leer el evento, está leyendo un valor tipo JSON, por lo que queremos que lo transforme al objeto que necesitamos. Para ello, aquí también utilizamos el método jacksonJmsMessageConverter.

Como podemos ver en los logs, al levantar este microservicio se hará el consumo del mensaje que representa el evento. Ya tenemos que la cama está disponible, y lo siguiente sería actualizar en el Sistema B, en base de datos, que ahora la cama con el ID que acabamos de leer está disponible.

Resumen

En resumen, teníamos un Sistema A que contaba con una información, pero esa información necesitaba saberla el Sistema B. Para que el Sistema B se enterara, era necesario contar con una persona que analizara los cambios en el Sistema A y luego actualizara el Sistema B. Pero, ¿Qué ocurre si durante el almuerzo hay cambios o si la persona encargada de actualizar se distrae? No contaremos con la información actualizada en tiempo real.

Para eso, presentamos la solución planteada en este Blog: ahora no se requiere de una persona para hacer estas actualizaciones, sino que el Sistema A será un producer que envía eventos a Artemis cuando se desocupe alguna cama. Luego, el Sistema B será un consumer que esta a la escucha de esos eventos en Artemis para leerlos y actualizar automáticamente en sus registros que ahora la cama está disponible, asegurando así información actualizada en todo momento.

Esto fue un ejemplo con el uso de colas de tipo anycast. Próximamente se hará un blog con un escenario para colas de tipo multicast.

Si tienes alguna pregunta o comentario sobre este tema, no dudes en dejarlos abajo. Nos encantaría saber tu opinión y ayudarte con cualquier duda que puedas tener. ¡Gracias por leer!

Link de los proyectos:

https://github.com/softwareevolutivo/artemis

Referencia:

https://activemq.apache.org/components/artemis/documentation/2.0.0/address-model.html

Taller en Youtube – Apache ActiveMQ Artemis ▶ ¿Qué es y para qué sirve?

https://www.youtube.com/watch?v=Sn4TyzmtLxU

¿Quieres mejorar tus procesos de integración?

Descubre nuestros servicios y agenda una demo.

Ver Demo

The post Apache ActiveMQ Artemis appeared first on Software Evolutivo.

Cucumber + Spring boot 2 + Junit 5

Johannes Caranqui — Thu, 24 Nov 2022 15:15:28 +0000

Cuando no se realiza un buen testing el costo de arreglar un error en producción es elevado, por lo cual aplicar una buena técnica de testing nos ayuda a dormir mejor en las noches, para ello, poder incluir al equipo de desarrollo y negocio en las pruebas automatizadas será un gran avance para mantener el código y los requerimientos bajo control, aquí nace las pruebas de aceptación y BDD, una buena implementación y planteamiento de requerimientos es fundamental en esta etapa de desarrollo.

Como antecedente, comprendamos que Cucumber es un software de testing TDD que nos permitirá elaborar pruebas automáticas a partir de criterios de aceptación fácilmente entendibles por los intervinientes en el proceso, el cual vamos a implementar en éste tutorial, así como Spring Boot y JUnit.

Para iniciar, necesitamos un proyecto básico con Spring Boot 2, en esta oportunidad lo crearemos con Spring Initializer, un API que permite la generación de proyectos con sus dependencias permitiendo simplificar esta etapa de arranque, aunque también se puede utilizar el plugin de Spring Boot de IntelliJ o Visual Studio Code.

Usaremos la siguiente configuración:

Configuración inicial con Spring Boot Initializer

Configuración de Cucumber y Junit 5

En este paso agregaremos las dependencias de maven (librerías que se necesita para el funcionamiento correcto de Cucumber con Spring y Junit).

1.1 Dependencias de Maven (pom.xml)

1.1.1 Cucumber JVM

<groupId>io.cucumbergroupId>

<artifactId>cucumber-javaartifactId>

<version>7.8.1version>

<scope>testscope>

dependency>

Podemos encontrar el listado de versiones aquí.

1.1.2 Junit y Cucumber

<groupId>io.cucumbergroupId>

<artifactId>cucumber-junit-platform-engineartifactId>

<version>7.8.1version>

<scope>testscope>

dependency>

Podemos encontrar el listado de versiones aquí.

1.1.3 Junit platform suite (ya que la opción @Cucumber de Junit4 quedó obsoleta)

<groupId>org.junit.platformgroupId>

<artifactId>junit-platform-suiteartifactId>

<version>1.9.0version>

<scope>testscope>

dependency>

Podemos encontrar el listado de versiones aquí.

1.1.4 Finalmente Spring y Cucumber

<groupId>io.cucumbergroupId>

<artifactId>cucumber-springartifactId>

<version>7.8.1version>

<scope>testscope>

dependency>

Podemos encontrar el listado de versiones aquí.

Definición e implementación de “Features”

Para esta definición, lo más usual es utilizar Gherkin; al ser de alto nivel, no es tan técnico, por lo que, es posible involucrar al personal de negocio.

Creamos el archivo demo.feature en src/test/java//cucumber/features con el siguiente contenido:

Feature: the hello endpoint can be retrieved

Scenario: client makes call to GET greeting endpoint

Given client wants to write username

When client calls greeting endpoint

Then client receives hello text and username

El contenido no debe contener muchas definiciones técnicas, recordemos que el objetivo es que todo el equipo se involucre.

Definición de pasos:

Given: Dada una situación en la que configuramos el test.

When: Acción que se realiza o un evento llega.

Then: Espero que suceda algo o puedo comprobarlo.

Configuración de puntos de entrada

La siguiente clase nos sirve como punto de entrada de Cucumber para ejecutar los tests, la podemos llamar de cualquier forma pero siempre tomando en cuenta las convenciones.

Creamos la clase CucumberTest.java en src/test/java//cucumber con el siguiente contenido:

@Suite

@IncludeEngines(“cucumber”)

@SelectClasspathResource(“com/sevolutivo/demo/cucumber/features”)

@ConfigurationParameter(key = GLUE_PROPERTY_NAME, value = “com.sevolutivo.demo.cucumber.stepDefs”)

public class CucumberTest {

}

@Suite y @IncludeEngines(“cucumber”) son el equivalente a la antigua @Cucumber, pero que con la versión 7 de Cucumber quedó obsoleta.

En JUnit 5, podemos definir las opciones de cucumber en el fichero junit-platform.properties, en la carpeta resources de tests.

@SelectClasspathResource(“/cucumber/features”) nos dice dentro de la carpeta resources donde tenemos los ficheros .feature

@ConfigurationParameter(key = GLUE_PROPERTY_NAME, value = “.cucumber.stepDefs”) le decimos donde están las clases de pegamento, es decir, los steps.

Configuración opcional adicional (junit-platform.properties)

Creamos el archivo junit-platform.properties en src/test/resources con el siguiente contenido:

cucumber.publish.quiet=true

cucumber.publish.enabled=false

cucumber.plugin=pretty, html:target/cucumber-reports/Cucumber.html, json:target/cucumber-reports/Cucumber.json,junit:target/cucumber-reports/Cucumber.xml

En el ejemplo anterior, estamos quitando el banner que aparece al ejecutar cucumber y le decimos que no publique los resultados en su servicio de la nube. También estamos generando los informes localmente en formato html, json y xml en el directorio target/cucumber-reports.

Configuración de Spring

Vamos a configurar Cucumber para que pueda hacer uso del contexto de Spring con la notación @SpringBootTest, vamos a inyectar también TestRestTemplate para hacer llamadas Rest.

Creamos el archivo CucumberSpringConfiguration.java en src/test/java//cucumber:

@SpringBootTest(webEnvironment=SpringBootTest.WebEnvironment.RANDOM_PORT)

public class CucumberSpringConfiguration {

@Autowired

protected TestRestTemplate testRestTemplate;

}

Para comprobar el correcto funcionamiento ejecutamos ./mvnw clean verify en consola y el resultado debería ser similar a lo siguiente:

Podemos comprobar que no encuentra la definición de pasos y nos sugiere implementarlos de acuerdo a sus recomendaciones.

Implementación de pasos (steps ó glue code)

Los pasos o steps es el mapeo de cada paso del escenario definido en el archivo .feature, ésta clase tiene la notación @CucumberContextConfiguration que hace que Cucumber la use como configuración de contexto de Spring.

Creamos el archivo DemoSteps.java en src/test//cucumber/stepDefs:

@CucumberContextConfiguration

public class DemoSteps extends CucumberSpringConfiguration {

private String username;

private ResponseEntity response;

@Given(“client wants to write username”)

public void clientWantsToWriteAGreeting(){

username = “user001”;

}

@When(“client calls greeting endpoint”)

public void clientCallsToGreetingEndpoint() {

response = testRestTemplate.getForEntity(“/greeting/” + username, String.class);

}

@Then(“client receives hello text and username”)

public void clientReceivesHelloTextAndGreeting() {

Assertions.assertEquals(“hello “ + username, response.getBody());

}

Implementación de Rest API controller

Creamos una clase controlador DemoController.java con un método GET /greeting en src/main/java//web que retorna una cadena con un saludo:

@RestController

public class DemoController {

@GetMapping(“/greeting/{username}”)

public String greeting(@PathVariable String username){

return “hello “ + username;

}

Ejecución

Una vez listo toda la implementación, ejecutar ./mvnw clean verify y obtendremos lo siguiente:

Si se usa IntelliJ Idea, al ejecutar los test de Cucumber implementados, como resultado se obtendrá algo similar a esto:

Conclusiones

Los tests de aceptación son una herramienta importante si el objetivo es integrar al equipo de negocio y al equipo de desarrollo, mejorando así el planteamiento de los escenarios, requerimientos y casos de análisis.

En éste tutorial hemos planteado un caso básico de implementación y la configuración de Cucumber, Spring Boot y JUnit 5 y así obtener una arquitectura básica o referencial para futuras implementaciones.

El código fuente se puede encontrar en github.com.

The post Cucumber + Spring boot 2 + Junit 5 appeared first on Software Evolutivo.

UX: Experiencia de Usuario una Prioridad en el Desarrollo de Sistemas Organizacionales

Bryan Diaz — Thu, 27 Oct 2022 21:07:21 +0000

Actualmente, la compra o alquiler de sistemas dentro de las organizaciones a través de plataformas virtuales presenta un mayor índice de demanda, de modo que, gracias a la pandemia del COVID-19, los usuarios son más flexibles en sus acciones o tareas a la hora de buscar productos o servicios que deseen adquirir. Razón por la cual, para efectuar una buena negociación y una venta exitosa, se necesita brindarle a sus compradores una herramienta innovadora y una experiencia de usuario rápida, instantánea, y simple para cualquier tipo de dispositivo.

Si bien es cierto, al momento de desarrollar un sistema, tenemos en cuenta todos los lineamientos necesarios para que éste cumpla con los requerimientos del cliente; no obstante, nos hacemos preguntas como: ¿Qué tan difícil será su manejo?, ¿Será agradable para los usuarios? o ¿Estará clara la información plasmada o presentada?, en fin… un sinnúmero de preguntas que en la mayoría de los casos no consideramos de gran importancia al momento de desarrollar nuestro producto.

Es por ello que, a partir de esta iniciativa resulta de vital importancia considerar al UX como punto de partida indispensable en el desarrollo de un producto, de manera que, dicho término aparte de que se usa muy a menudo en el mundo tecnológico; es una prioridad en el desarrollo de sistemas, ya que gracias a ello los diseñadores ahora son más consciente de cómo su trabajo impacta al usuario y cuales son sus necesidades.Hay que destacar que, el trabajo del diseño de UX se centra en encontrar un equilibrio entre las necesidades del usuario, las necesidades comerciales y las capacidades técnicas, de manera que hallar el balance perfecto crea una experiencia de usuario beneficiosa y le permite al negocio alcanzar sus objetivos.

¿Qué es UX o Experiencia de Usuario?

Nielsen Norman Group, empresa estadounidense de consultoría en interfaz de usuario (UI) y experiencia de usuario define a UX como una de las experiencias de usuario más completas que coexisten a nivel global, puesto que que incluye todos los aspectos de la interacción del usuario final con la empresa, con sus servicios y con sus productos. Por ello, su término se menciona con mayor frecuencia en áreas relacionadas con tecnología, tales como teléfonos inteligentes, computadoras, software o sitios web. Se debe tener presente que, la experiencia del usuario no es solo un campo bastante nuevo, sino también un área volátil, ya que, cambia rápidamente debido a los avances tecnológicos, los nuevos tipos de interacción y las preferencias del usuario.

Dicho de otra manera, el UX no es nada más que la experiencia innovadora que obtiene un usuario en los distintos escenarios al momento de utilizar un producto, de manera que, dicha acción les brinda una respuesta/solución a sus preguntas o problemas. Según Yudica (2016), esto suscita porque los diseñadores se encargan de proporcionarle al internauta una variabilidad de soluciones frente a los diversos aspectos comunicativos que puede presentar el mismo con un determinado producto o servicio (incluida la usabilidad, accesibilidad, y capacidad de encontrar/aprender/recordar); por ende, su principal función no es otra cosa que hacer que el producto sea amigable, satisfactorio, accesible y útil para el usuario.

Prototipos UX

Ayudan a capturar visualmente los objetivos comerciales y alinearlos con las expectativas o necesidades de los usuarios, para así, tener conocimiento del grado de satisfacción que exhiben los mismo con el producto creado. Hay que tener en cuenta que el coste de modificar un prototipo es inferior al coste de cambiar un producto digital subido a producción, por lo que supone una ventaja de ahorro de costes durante el desarrollo.

El diseño de UX no solo prioriza las necesidades del usuario, sino también las capacidades metodológicas y ausencias de un negocio, ya que no todos los individuos poseen las mismas competencias técnicas para brindar una solución ideal a cada problemática; ni todas las empresas poseen el suficiente recurso monetario para invertir constantemente en los formación técnica/profesional de todos sus colaboradores.

Por este motivo, el trabajo del diseño de UX se centra en encontrar un equilibrio entre las necesidades del usuario, las necesidades comerciales y las capacidades técnicas, de manera que hallar el balance perfecto crea una experiencia de usuario beneficiosa (satisface sus necesidades) y le permite al negocio alcanzar sus objetivos, siempre y cuando esta se encuentre dentro de las capacidades técnicas de la empresa.

Se debe tener en cuenta que el diseño UX, es un proceso que inicia con la comprensión de los usuarios, luego con el diseño de interfaces, y, finalmente con la prueba para ver si el mismo logra satisfacer las necesidades de los usuarios; de modo que aquello representa una parte integral del proceso de desarrollo del producto.

A su vez, para crear un diseño fácil de usar, los diseñadores de UX deben participar en el proceso de principio a fin. Por ende, es conveniente realizar investigaciones sobre cómo los usuarios buscan un producto, navegan por las páginas, buscan detalle de los productos, e interactúan con el sistema; ya que tras la investigación y el análisis exhaustivo de los datos y registros obtenidos, deberemos de ser capaces de generar diseños y experiencias que satisfagan las necesidades de los usuarios.

Para ofrecer buenos resultados en el proceso de desarrollo de un producto se debe considerar lo siguiente:

Relación Esfuerzo – Beneficio en UX

Cuando diseñamos tomando en consideración los principios de usabilidad, lo que buscamos es reducir al mínimo las barreras de interacción, y por lo tanto el esfuerzo del usuario para completar tareas interactivas, ya que, el principal objetivo es evitar la frustración del usuario. En la mayoría de los casos el producto ideal es el que se adapta al usuario; no obstante, en ocasiones es imprescindible que sea el usuario quien se adapte al producto, de manera que se pretende reducir el tiempo de dedicación y esfuerzo para aprender cómo usarlo. Debido a aquello, es posible analizar la experiencia de usuario únicamente en términos de facilidad de uso sin tener en consideración cuál es el beneficio o valor de uso, puesto que, la calidad e idoneidad de un diseño viene determinada por la relación esfuerzo-beneficio y es sólo cuando el beneficio o valor percibido supere el esfuerzo requerido, podremos hablar de experiencias de usuario satisfactorias.

UX es igual a resolver problemas

Es importante pensar en el usuario en cada parte del proceso de realización de un producto, ya que, ponernos en el lugar del usuario al momento de utilizar dicho producto para conocer la forma en la que va a interactuar con el mismo, mejora de una manera temprana los posibles problemas que se puedan generar en el usuario con el producto terminado.Y es ahí, donde parte la importancia para UX, de llevar un proceso e involucrar al usuario en cada etapa del procedimiento, y no simplemente tener la idea de pensar en el usuario.

Diseño de experiencia no solamente se basa en satisfacer al usuario sino también a cumplir con los objetivos del negocio, el diseñador de experiencia hace de puente entre el usuario y el cliente que nos contrata.

Conclusión

UX resulta ser de gran prioridad para las organizaciones, ya que se obtiene sistemas amigables-fáciles de usar, garantiza la fluidez-eficiencia en el diseño, y exhibe una gran demanda dentro del mercado laboral, ya que actualmente los clientes buscan constantemente satisfacer sus necesidades y solucionar sus problemas de forma breve y simple. Por ello, se caracteriza por ser una experiencia innovadora que obtiene un usuario en los distintos escenarios al momento de utilizar un sistema, de manera que, dicha acción les brinda una respuesta/solución a sus preguntas o problemas. Cabe recalcar que, aquello suscita porque los diseñadores se encargan de proporcionarle al internauta una variabilidad de soluciones frente a los diversos aspectos comunicativos que puede presentar el mismo con un determinado producto o servicio (incluida la usabilidad, accesibilidad, y capacidad de encontrar/aprender/recordar); por ende, su principal función no es otra cosa que hacer que el producto sea amigable, satisfactorio, accesible y útil para el usuario

Por su parte, la implementación del UX se enfoca en las acciones que realiza el usuario delante de la pantalla, de manera que al tener en cuenta su uso, nivel de afectación y grado de aceptación; no solo genera beneficios para los usuarios, sino que también para las empresas u organizaciones, puesto que, el examinar los diferentes escenarios a los que puede estar expuesto el usuario y el brindar solución cada uno de ellos, les genera buena reputación en el mercado laboral. Teniendo presente que el diseño de experiencia no solamente se basa en satisfacer al usuario sino también a cumplir con los objetivos del negocio.

Referencia

The post UX: Experiencia de Usuario una Prioridad en el Desarrollo de Sistemas Organizacionales appeared first on Software Evolutivo.

JBoss EAP: Instalación y configuración básica

Jorge Aguilar — Thu, 12 May 2022 00:59:03 +0000

En esta primera entrega, de la serie de artículos relacionados a JBoss Enterprise Application Platform (EAP), vamos a considerar la instalación y configuración inicial del producto, de tal manera que podamos contar con los servicios suficientes para un despliegue en un ambiente de pruebas o que sea el primer paso para tener una instancia candidata a producción.

JBoss EAP es una plataforma de código abierto que ofrece seguridad, escalabilidad y rendimiento a nivel empresarial para aplicaciones Java. Incluyen todo lo que se necesita para crear, ejecutar, implementar y administrar aplicaciones Java empresariales en cualquier entorno.

Si bien JBoss EAP está disponible como imagen de contenedor o como un operador de Kubernetes u Openshift, en este caso vamos a utilizar los binarios tradicionales para hacer una instalación desde cero, lo que nos permitirá tener un mayor entendimiento de los requisitos para su operación.

Requisitos

Antes de iniciar, se espera que podamos contar con lo siguiente:

Servidor Linux: Los comandos que se presentan son compatibles con CentOS 8 o Red Hat Enterprise Linux 8
Disponer del utilitario unzip para descomprimir el binario de JBoss EAP
Tener instalado y configurado Java 1.8 u 11. El detalle de las configuraciones soportadas se pueden encontrar en la siguiente enlace: https://access.redhat.com/articles/2026253#EAP_74
Archivo empaquetado de JBoss EAP 7.4: Se puede descargar el Zip File desde la siguiente dirección: https://developers.redhat.com/products/eap/download

Configuración por defecto

JBoss EAP mantiene la siguiente configuración inicial:

No existen usuarios de administración de JBoss EAP, es necesario crear al menos uno para administrar el servicio remotamente. Este usuario será creado más adelante.
Solamente se escucha en la interfaz 127.0.0.1 (localhost), es decir que solamente están disponibles los servicios desde el mismo servidor.
Los puertos de los servicios principales son:
- Aplicaciones HTTP: 8080
- Aplicaciones HTTPS: 8443
- Administración (Web y por línea de comandos): 9990

Alcance de la instalación y configuración

Esta guía cubre los siguientes puntos:

Instalación de los binarios
Creación del usuario administrador de JBoss EAP
Apertura de las interfaces de red para el acceso remoto

Procedimiento de instalación y configuración

Instalación de los binarios

Se va a necesitar un usuario de sistema operativo (En este caso eap), diferente al usuario root, para levantar los servicios. Como el usuario root ejecutamos este y los siguientes comandos:

# useradd eap

NOTA: Este usuario es diferente al usuario administrador de JBoss EAP (eapadmin) que se creará en el punto 4 de esta sección.
Creación del directorio Home de JBoss EAP, descompresión del archivo empaquetado y asignación de permisos al usuario eap:

# mkdir /opt/jboss/ # cd /opt/jboss/ # unzip /tmp/jboss-eap-7.4.0.zip # chown -R eap:eap /opt/jboss/
Configuración de variables de ambiente para que el usuario eap disponga de los ejecutables de JBoss EAP en el PATH de su sesión:

# echo 'export EAP_HOME=/opt/jboss/jboss-eap-7.4' >> ~eap/.bash_profile # echo 'export PATH=$PATH:$EAP_HOME/bin' >> ~eap/.bash_profile
Crear el usuario administrador de JBoss EAP (eapadmin) con su respectiva contraseña. Hacemos el cambio al usuario eap del sistema operativo para luego ejecutar la creación del usuario:

# su - eap $ add-user.sh -u 'eapadmin' -p '********'

Inicio del servicio y validación de la configuración de red

Utilizando la misma sesión del usuario eap, ejecutamos el script de inicio para subir el servicio en modo Standalone:

$ standalone.sh

NOTA: La terminal quedará ocupada, la dejaremos abierta para no terminar el proceso.
Abrimos una nueva sesión con el usuario eap para confirmar los puertos que fueron abiertos por el servicio:

$ ss -ltn | grep -e 8080 -e 8443 -e 9990

Como lo muestra el comando ss, por defecto JBoss EAP escucha solamente en 127.0.0.1 (localhost).

Actualización de la dirección enlazada a las interfaces de red

Mediante la administración por línea de comandos (JBoss CLI) vamos a consultar la dirección enlazada a la interfaz pública (public: donde estarán disponibles las aplicaciones, puerto 8080 y 8443) para luego cambiarla por el nombre del servidor (server.example.com en este caso) o por su dirección IP:

$ jboss-cli.sh --connect [standalone@localhost:9990 /] /interface=public:read-attribute(name=inet-address)

[standalone@localhost:9990 /] /interface=public:write-attribute(name=inet-address,value="${jboss.bind.address:server.example.com}")
Realizamos algo similar pero con la interfaz de administración (management: servicio de administración, puerto 9990):

[standalone@localhost:9990 /] /interface=management:read-attribute(name=inet-address)

[standalone@localhost:9990 /] /interface=management:write-attribute(name=inet-address,value="${jboss.bind.address.management:server.example.com}")
Procedemos a recargar la configuración del servidor ya que los cambios anteriores requieren de un reinicio del servicio de JBoss EAP. Luego de esto, la sesión de JBoss CLI terminará debido a que ya no es válida por el cambio de la interfaz de administración:

[standalone@localhost:9990 /] reload [disconnected /] exit
Verificamos el cambio en la configuración de red utilizando nuevamente JBoss CLI, la conexión ahora debe indicar el nombre del controller de JBoss EAP (servidor y puerto) donde está el servicio de administración:

$ jboss-cli.sh --connect --controller=server.example.com:9990 [standalone@server.example.com:9990 /] /interface=public:read-attribute(name=inet-address)

[standalone@server.example.com:9990 /] /interface=management:read-attribute(name=inet-address)
Si el servidor Linux tiene levantado el servicio de Firewall será necesario abrir los puertos que utiliza JBoss, para el caso de CentOS 8 o Red Hat Enterprise Linux 8, como usuario root, se puede utilizar lo siguiente:

# firewall-cmd --list-ports # firewall-cmd --add-port 8080/tcp # firewall-cmd --add-port 8443/tcp # firewall-cmd --add-port 9990/tcp # firewall-cmd --runtime-to-permanent # firewall-cmd --list-ports
Finalmente probamos el acceso a los servicios desde un navegador Web:
- http://server.example.com:8080/
- https://server.example.com:8443/
- http://server.example.com:9990/

Conclusiones

JBoss Enterprise Application Platform trae por defecto una configuración que es suficiente para un ambiente de desarrollo pero va a ser necesario aplicar ajustes como los que hemos visto en este artículo para poder hacer uso de sus servicios en escenarios más demandantes.

Les hacemos la invitación a estar atentos ya que en próximas entregas cubriremos otras áreas de la administración y configuración del producto. Hasta entonces.

The post JBoss EAP: Instalación y configuración básica appeared first on Software Evolutivo.

Enganchémonos con REACT HOOKS!

Ariel Altamirano — Tue, 05 Apr 2022 15:15:43 +0000

¿Qué es un Hook?

Un Hook es una función especial que permite conectarnos a características de React, para trabajar con métodos especiales, los cuales nos permitirán manejar el estado de mejor forma sin depender de clases. (Medina, 2021)

Más adelante veremos estos principales métodos especiales.

¿Qué son los React Hooks?

Son una característica opcional que salió en la versión 16.8 en febrero de 2019, sin embargo, son compatibles con versiones anteriores. (Capparelli, 2020)

Los react hooks vienen a resolver problemas de complejidad en el manejo de la lógica de estados entre componentes y también trabajan mediante funciones (Figura 1) y ya no mediante clases (Figura 2).

Figura 1. Funciones en React Hooks

Figura 2. Clases en React

Métodos principales

Como ya hemos visto anteriormente, los hooks son funciones especiales que permiten acceder a las funcionalidades de React. En esta sección del blog veremos los hooks más importantes con una pequeña descripción de lo que hacen y un ejemplo de cada uno.

Nota: Cada hook tiene que ser importado desde la librería React (Figura 3) y cada hook es creado en un nuevo archivo, el cual tiene que ser llamado desde App.js (Figura 4)

Figura 3. Importación de useState

Figura 4. Llamado de componente.

UseState

La función useState permite añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos. (Midudev, 2019)

En el ejemplo de la figura 5, se declara una constante “text” mediante useState para cambiar el texto de un botón dependiendo su estado (true = “Texto 1” y false = “Texto 2”), cuando se da click la función handleClick cambia el estado de la constante “text”.

import React, { useState } from “react“;

const FirstExercise = () => {

const [text, setText] = useState(false);

const handleClick = () => {

setText(!text);

};

return (

<div>

<h1>Software Evolutivoh1>

{text ? “Text 1“ : “Text 2“}

button>

div>

);

};

export default FirstExercise;

Figura 5. Uso de useState

UseEffect

La función useEffect permite realizar efectos secundarios desde un componente de función, es similar a componentDidMount,componentDidUpdate y componentWillUnmount en las clases React, pero unificadas en una sola función. (React, 2022)

En el ejemplo de la figura 6, se utiliza la API de Rick and Morty para obtener una lista de datos y presentarlos en pantalla. Dicha lista se obtiene en la función useEffect cuando carga el componente, en caso de querer actualizarlo en base a algún estado se tiene que agregar dicho estado entre los corchetes finales de la función useEffect, como este no es el caso se lo deja vacío.

import React, { useState, useEffect } from “react“;

const SecondExercise = () => {

const [characters, setCharacters] = useState([]);

useEffect(() => {

fetch(‘https://rickandmortyapi.com/api/character/‘)

.then(response => response.json())

.then(data => setCharacters(data.results));

}, []);

return (

<div>

{characters.map(character => (

<h2>{character.name}h2>

))}

div>

);

};

export default SecondExercise;

Figura 6. Uso de useEffect

UseContext

La función useContext permite simplificar el manejo de estados entre los distintos componentes padre e hijos.

Formas de utilizar useContext:

Correct: useContext(MyContext)
Incorrect: useContext(MyContext.Consumer)
Incorrect: useContext(MyContext.Provider). (React, 2022)

Para este ejemplo como se puede apreciar en las figuras 7 y 8 respectivamente, se crea un contexto, en este caso crearemos un nuevo archivo dentro de src/context llamado ThemeContext, posteriormente, desde index.js importamos el archivo creado para encapsular la aplicación sobre el provider en este caso con un value igual a blue

import React from ‘react‘;

const ThemeContext = React.createContext(null);

export default ThemeContext;

Figura 7. Creación del contexto

import React from ‘react‘;

import ReactDOM from ‘react-dom‘;

import ‘./index.css‘;

import App from ‘./App‘;

import ThemeContext from ‘./context/ThemeContext‘;

ReactDOM.render(

<React.StrictMode>

<ThemeContext.Provider value=”blue“>

<App />

ThemeContext.Provider>

React.StrictMode>,

document.getElementById(‘root‘)

);

Figura 8. Importación del contexto creado

Finalmente en la figura 9, se implementará el useContext dentro del ejercicio que realizamos para useState de tal manera que obtenga el valor que establecimos y se pinte el título en este caso de color azul.

import React, { useState, useContext } from “react“;

import ThemeContext from “../context/ThemeContext“;

const ThirdExercise = () => {

const [text, setText] = useState(false);

const color = useContext(ThemeContext)

const handleClick = () => {

setText(!text);

}

return (

<div>

<h1 style={{ color }}>Software Evolutivoh1>

{text ? “Text 1“: “Text 2“}

button>

div>

);

};

export default ThirdExercise;

Figura 9. Uso de useContext

UseReducer

La función useReducer permite actualizar un estado interno por medio de una función llamada reducer. Puede ser una alternativa a useState. (React, 2022)

En el ejemplo de la figura 10, realizaremos el incremento o decremento de clicks mediante la llamada a la función reducer, la cual es llamada mediante el hook useReducer que recibe dos parámetros, el primero es la función reducer y el segundo un estado (initialState). Este estado inicial se actualiza en la función reducer dependiendo el tipo que es enviado como parámetro en la función onClick de cada botón que llama mediante al reducer y almacenado en la constante “state” mediante la cual se puede reflejar el cambio en pantalla.

Nota: No es una alternativa a Redux.

import React, { useReducer } from “react“;

const initialState = {

count: 0

};

const reducer = (state, action) => {

switch (action.type) {

case ‘increment‘:

return {count: state.count + 1};

case ‘decrement‘:

return {count: state.count – 1};

default:

throw new Error();

}

const FourthExercise = () => {

const [state, dispatch] = useReducer(reducer, initialState);

return (

Count: {state.count}

<button onClick={() => dispatch({type: ‘decrement‘})}>–button>

<button onClick={() => dispatch({type: ‘increment‘})}>+button>

);

};

export default FourthExercise;

Figura 10. Uso de useReducer

Referencias

Capparelli, A. (2020). Qué son los hooks y cómo utilizarlos en tu proyecto con React. Paradigma. https://www.paradigmadigital.com/dev/hooks-como-utilizarlos-react/

Medina, K. (2021, 05 10). Introducción a React Hooks. https://medium.com/nowports-tech/introducci%C3%B3n-a-react-hooks-55918188c5e2

Midudev. (2019, February 7). React hooks, cómo utilizar el hook useState. midudev ‍. https://midu.dev/react-hooks-use-state-anadiendo-estado-a-nuestro-componente-funcional/

React. (2022). Hooks API Reference – React. React. https://reactjs.org/docs/hooks-reference.html

React. (2022). Using the Effect Hook – React. React. https://reactjs.org/docs/hooks-effect.html

The post Enganchémonos con REACT HOOKS! appeared first on Software Evolutivo.