JHipster como solución al desarrollo de una aplicación Web.

Anteriormente, uno de mis compañeros apsider había hablado un poco sobre Yeoman, hoy les voy a mostrar como JHipster puede ayudar a acortar un poco los tiempos de desarrollo de una aplicación web.

JHipster es una herramienta que a través de Yeoman, ofrece un robusto flujo de trabajo que permite construir una aplicación web con Spring y Angular, ofreciendo herramientas que ayudan a generar código listo para usar a partir de un modelo de datos.

JHispter genera código Java para el Backend y Angular para el Frontend, ademas cuenta con un diseño responsivo creado con la ayuda de Bootstrap.

A continuación les mostraré como generar una aplicación con JHipster en la menor cantidad de pasos posibles. Para esto, deben tener instalado Java, Git, Node.js, Yarn, Yeoman y JHipster por supuesto. En el caso que decidan utilizar AngularJS 1, también deben tener Bower y Gulp. (Yo personalmente recomiendo Angular 4+, es fácil de entender y está mejor organizado)

Primero, debemos crear una carpeta, la cual tendrá todo nuestro proyecto:

$: mkdir mi-aplicacion-jhipster

$: cd mi-aplicacion-jhipster

Luego, dentro de la carpeta creada, ejecutamos el comando de JHipster para iniciar el asistente que nos ayudará a crear la aplicación base:

$: jhipster

JHipster ofrece la creación de 2 tipos de aplicaciones en su asistente:

Aplicaciones monolíticas: Éstas aplicaciones se caracterizan por contar con una arquitectura sencilla en donde todo estará en un solo sitio, incluso el contenedor de servlets, Tomcat. Este tipo de aplicaciones son útiles cuando sabemos que el proyecto no está destinado a crecer en complejidad, aunque de igual forma puede crecer pero haciéndola monolítica en principio, nos ayudará a ahorrar tiempo.

Aplicaciones basadas en microservicios: Las aplicaciones web basadas en microservicios cuentan con una arquitectura un poco más compleja en donde se debe contemplar que cada microservicio deberá ofrecer funcionalidades especificas.

En este momento, crearemos una aplicación monolítica y en otra entrada del blog, hablaremos sobre como crear aplicaciones basadas en microservicios con JHipster.

Para crear la aplicación monolítica, debemos seleccionar la primera opción:

Monolithic Application (recommended for simple projects)

Después de eso, nos preguntará por el nombre base de nuestra aplicación, el cual no debe contener espacios en blanco ni caracteres especiales.

Una vez ingresado el nombre de la aplicación, nos preguntará por el nombre por defecto que deseamos asignarle al paquete de Java que contendrá nuestro código del Backend.

Al especificar el nombre del paquete Java que queremos asignar, nos preguntará si deseamos utilizar JHipster Registry para configurar, monitorear y escalar nuestra aplicación.

Le decimos que no, ya que haremos una aplicación muy sencilla.

JHipster ofrece tres opciones para el control de acceso de las aplicaciones:

• Autenticación JWT: Autenticación sin estado a través de tokens
• OAuth 2.0 / Autenticación OIDC: Autenticación que toma en cuenta los estados de la aplicación y trabaja con Keycloak y Okta
• HTTP Autenticación de sesiones: Autenticación que toma en cuenta los estados de la aplicación y es la que implementa por defecto los mecanismos de Spring Security

En nuestro caso, seleccionaremos la primera, Autenticación JWT ya que consideramos que lo más conveniente es manejar autenticación sin estados en un API Rest, recordando que Angular es un lenguaje que basa su interacción con el Backend a través de APIs Rest.

Después de esto, el asistente nos dará a elegir que motor de base de datos queremos para desarrollo y producción. JHipster realiza un versionamiento de la estructura de la base de datos a través de Liquibase, lo cual nos ayudará a llevar un control optimo de nuestro diseño.

En la mayoría de los casos, hemos realizado nuestros proyectos con H2 para la base de datos de desarrollo y MySQL para producción pero mi recomendación es que si traten de trabajar en desarrollo con un ambiente lo más parecido posible a producción ya que al final se pueden encontrar con algunas diferencias entre H2 y la base de datos que seleccionen para producción que les puede quitar algo de tiempo. De todas maneras JHipster incluye en el código generado unos docker-compose para levantar el proyecto a través de contenedores de docker, por lo que si están familiarizados con está herramienta, no tendrán problemas con levantan un ambiente de desarrollo.

Después de seleccionados los motores de base de datos a usar, el asistente de JHipster ofrecerá la opción de implementar la abstracción de cache de Spring permitiendo seleccionar entre Ehcache, Hazelcast ó Infinitispan. Para efectos de esta demostración, no utilizaremos esta implementación

Después de esto, el asistente nos preguntará por la herramienta que deseamos usar para el manejo de dependencias de nuestro proyecto en Java. Yo me inclino por usar Gradle pero eso depende de con que se sientan más cómodos.

JHipster adicional a todo lo que nos ofrece, pone a nuestra disposición algunas herramientas que pudiera necesitar nuestro proyecto, como por ejemplo el Social Login, Websockets y motores de búsqueda con Elasticsearch.

En este punto, el asistente nos preguntará si deseamos usar AngujarJS 1.x o una versión más reciente de Angular como lo es Angular 5 en este momento. Como dije en un principio, yo prefiero Angular 5 porque es un poco más organizado y super fácil de entender.

También nos ofrecerá gestionar nuestras hojas de estilos con Sass en caso de que queramos facilitar un poco más el manejo de estilos en el proyecto.

JHipster incluye en las librerías del Front-end una internacionalización, esto nos permitirá ofrecer al usuario las vistas del sistema en distintos idiomas,

Primero debemos indicar que queremos que nuestra aplicación tenga soporte de internacionalización y luego debemos seleccionar los idiomas que queremos.

Además de todo esto, JHipster incluye implementaciones de pruebas tanto para el Frontend como el Backend, en la siguiente ventana nos preguntará cuales queremos incluir en el proyecto.

Como no hablaremos de pruebas en este post, dejaremos estas opciones en blanco.

Por ultimo JHipster nos pregunta si deseamos incluir alguna otra cosa del marketplace, personalmente no me ha ido bien con ninguna pero creo que hay que experimentar un poco más.

Después de haber pasado por este largo proceso de seleccion, JHipster empezará a generar el código de nuestro proyecto. En este paso hay que esperar un poco ya que el proceso es bastante extenso…

Una vez generado todo el código, noten que el proyecto se generó con versionado de código usando git, lo pueden verificar con el siguiente comando:

$: git log

Ahora lo que debemos hacer para levantar nuestra aplicación ejecutando el siguiente comando:

$: ./gradlew

En el caso de que hayan generado su aplicación con Maven en vez de Gradle, pueden ejecutar la aplicación con el siguiente comando:

$: ./mvnw

Al principio va a tomar un poco de tiempo ya que el manejador de dependencias bajará las librerías necesarias… así que a dar una vuelta más mientras se descarga todo.

Cuando la aplicación esté ejecutandose, veremos esto en la consola:

y podemos probarla visitando la url http://localhost:8080

Para iniciar sesión, lo podemos hacer presionando la opción de menú “Cuenta” y seleccionar la opción “Iniciar Sesión” he ingresado los datos que nos señala la aplicación en el mensaje principal del home, que en este momento es “admin” para el usuario y contraseña.

Esto nos permitirá acceder a opciones de menú que trae JHipster por defecto que nos permiten ver entre otras cosas, información del API y un enlace para explorar la base de datos de H2 en caso de que la hayamos seleccionado como motor de base de datos para desarollo.

En la opción de menú “Entidades” se listarán todos los mantenedores de las tablas que importemos más adelante cuando definamos la base de datos.

Ahora bien, ¿de que nos sirve esta aplicación en este momento si no tiene nada de nuestro modelo de base de datos? Bueno, no nos sirve de mucho, pero creo que eso debemos verlo en una segunda parte.

Mientras tanto, revisemos un poco de lo que hizo JHipster en este momento.

Esta es una vista de todo lo que nos generó JHipster.

Hasta este punto, tenemos suficiente información para poder aventurarnos a desarrollar una aplicación utilizando como base JHipster y revisar un poco el código generado para entender como funciona todo lo generado hasta ahora.

En una próxima oportunidad hablaremos de cada uno de estos archivos de configuración generados para poder sacarle mayor provecho y lo más importante, hablaremos de como definir el modelo de datos e importarlo con JHipster.