JHipster, una meta-tecnología para proyectos empresariales (Parte 1)

Hola amigos, a partir de ahora comenzaré a escribir en la medida que el tiempo lo permita un grupo de artículos asociados a JHipster. En el título del artículo puse el término meta-tecnología, en realidad no se si el término exista, sin embargo haciendo una analogía con los paquetes de un repositorio de GNU/Linux podemos decir que es una tecnología que incorpora o facilita el trabajo con otras tecnologías.

Bueno para entender que es JHipster, primero es interesante conocer lo que es un hipster, mas o menos las variadas definiciones coinciden que “Son personas jóvenes, que viven en las grandes ciudades del mundo. Algunos los ven como gente muy auténtica, para otros, son gente desagradable y ridícula, con mala apariencia, y creadora de combinaciones desastrosas de vestuario, son personas que siguen las últimas tendencias de la moda y tratan de popularizarla.”

Análogo a esto, el creador principal de JHipster @Julien Dubois resalta que JHipster es un generador basado en Yeoman (yo) que proporciona facilidades para la generación de código tanto para backend y frontend empleando las últimas tecnologías existentes. La J delante de la palabra Hipster indica que para el backend se emplea Java, apoyado en el marco de trabajo Spring, específicamente en Spring-boot y todas las tecnologías que sea han creado alrededor de este último.

JHipster permite generar aplicaciones de una forma rápida y sencilla, existen variadas utilidades que se han creado alrededor de esta tecnología, las principales son:

• yo jhipster: Es el generador principal que facilita la creación de aplicaciones hasta el momento 4 tipos principales de aplicaciones, que me referiré en próximos artículos. Se basa en la herramienta Yeoman.

• jhipster-ionic: Un generador que posibilita la creación de aplicaciones basadas en ionic y cordova empleando como raíz un proyecto JHipster monolítico. Genera el “esqueleto” del proyecto con funcionalidades de loguin y registro. El resultado de esta generación permite exportar directamente aplicaciones nativas para Android, IOS, y todo la lista que permite Apache Cordova.

• jdl-studio: El desarrollo de una aplicación en jhipster es sencillo, pero requiere hacer uso de JDL (JHipster Domain Language), este lenguaje de descripción se puede decir que es una mezcla entre un modelo relacional de bases de datos y un diagrama de clases. Su uso es para definir las tablas que formarán parte del sistema y sus relaciones. Jdl-studio permite diseñar las tablas y sus relaciones, así como exportar un fichero en formato JDL, que emplearemos más adelante para con la herramienta jhipster-uml generar el código.

• jhipster-uml: JHipster UML es un generador de código que a partir de un fichero .jdl facilita la generación de clases entidades y beans (con estándar JPA), permite la creación de interfaces de usuario basadas en esas relaciones (empleando AngularJS y Bootstrap), permite de forma dinámica en base a lo descrito en JDL definir a nivel de UI las restricciones de los tipos de datos definidos en el modelo, sus validaciones básicas y la creación de los ficheros de internacionalización de la UI (con Angular Translate). Con esta solución según la documentación oficial también se puede importar diagramas realizados con herramientas como Visual Paradigm y otras (con formato XMI). En el plano práctico, esto último no me funcionó correctamente.

• jhipster-console: Este proyecto proporciona una suite de herramientas configuradas y “dockerizadas” para el monitoreo de un proyecto JHipster, su funcionamiento básico se basa recuperar todos los logs y la métricas de un proyecto Java, incorporarlos a logstash, indexarlos con elasticsearch y visualizar toda esta información de manera personalizable con el excelente dashboard Kibana. Se basa en resumen en ELK. Este proyecto emplea docker-compose y de una forma sencilla se despliega toda la consola de monitoreo.

• jhipster-alerting: Muy ligado al anterior, basado prácticamente en las mismas tecnologías permite definir bajo que condiciones se generan alertas y notificar a los sujetos indicados. Funciona bajo el concepto de monitoreo pasivo.

Stack de tecnologías que conforman un proyecto generado con JHipster.

Si bien un proyecto JHipster es sencillo de generar el mantenimiento del mismo puede llegar a ser complejo por el cúmulo te tecnologías que lo componen.

Tecnologías backend (Lado del servidor)

• Spring Boot

• Maven / Gradle

• Spring Security

• Spring MVC REST, usando la biblioteca Jackson

• Spring WebSocket

• Spring Data JPA (+Hibernate)

• Bases de datos versionadas usando Liquibase

• PostgreSQL

• MySQL

• Oracle

• Elasticsearch.

• MongoDB

• Cassandra

• Kafka

• Spring metrics

• Cache local o distribuida con ehcache o hazelcast respectivamente.

• Gestión del pool de conexiones a bases de datos con HikariCP.

• Spring security.

• Gatling

• Cucumber

• Despliegues con WAR/JAR directamente (tomcat en desarrollo proveido por el starter de spring-boot)

• Configuración de contenedor docker pre-definida.

• Utilidades para despliegues automáticos en proveedores de infraestructura como AWS, CloudFoundry, Heroku, Kubernetes, entre otros.

• Frontend opcional del lado del servidor con Thymeleaf.

 

• Para proyectos con arquitectura basadas en microservicios usa la suite Netflix OSS.

Tecnologías front-end (Lado del cliente)

Del lado cliente con JHipster se genera una aplicación web bajo el concepto de Single Page Application (SPA).

• HTML5 Boilerplate.

• Twitter Bootstrap.

• AngularJS.

• Internacionalización completa con Angular Translate.

• Soporte opcional de SASS para el diseño con CSS.

• Instalación de librerías usando bower.

• “Live reload” con Gulp.

• Protractor

• Browsersync

• Pruebas con Karma y/o PhantomJS

No todas estas tecnologías forman parte de un mismo proyecto, a la hora de generar nuestra aplicación, JHipster ofrece cierto grado de flexibilidad en la selección de lo que deseamos o no usar y en función de ello se usa o no cierta tecnología de las listadas arribas.

Instalación de JHipster

En este artículo solo veremos como instalar el generador, para ello necesitamos instalar previamente NodeJS. Los pasos descritos a continuación son válidos para Nova/Ubuntu, pero no excluyentes para otros sistemas.

La versión de NodeJS para JHipster es importante, el proyecto recomienda se usen versiones estables, con las versiones normales del repositorio he probado y en ocasiones falla, por ello recomiendo usen la versión 6.7 de NodeJS, para los usuarios de la UCI pueden usar un pequeño mirror interno que hemos construido, para los externos pueden usar el repositorio oficial.

Para verificar que se ha instalado correctamente verifiquen node -v o nodejs -v, hay que verificar que existan las rutas:

/usr/bin/node

/usr/bin/nodejs

Para ello pueden usar el comando de GNU/Linux whereis, que aporta información sobre donde se encuentra un binario del sistema (whereis node)

Si uno de las dos no existe debe crearse un enlace simbólico de la que existe a la que no existe (usando ln -s).

Una vez instalado NodeJS, debe configurarse el repositorio de componentes de NodeJS, si hay conexión directa a internet no hay que hacer nada, si se está detrás del Proxy de la UCI puede usarse el repositorio de componentes, para ello debe configurarse adecuadamente.

Antes de iniciar un proyecto hay que instalar las siguientes dependencias:

sudo npm install -g yo

sudo npm install -g bower

sudo npm install -g gulp

sudo npm install -g generator-jhipster

Con todos estos paquetes instalados debe configurarse el repositorio de componentes de Bower, si esta en la UCI de igual forma use esta guía.

Solo resta, antes de generar nuestra primera aplicación instalar y configurar el repositorio de componentes de Java, en esta guía se usará Maven.

sudo apt install maven

Con Maven instalado, la misma guía anterior explica como configurar el repositorio.

Generando la primera aplicación

La generación de una aplicaciones JHipster parte la ejecución del comando yo jhipster. Anterior a eso debe crearse una carpeta con el nombre del proyecto.

mkdir biblioteca
cd biblioteca
yo jhipster

Sugiero que trabajemos con aplicación monolítica, en esta opción el sistema permitirá crear una aplicación completamente funcional.

Para este ejemplo seleccionaremos por pasos:

1. Tipo de aplicación: Monolithic application

2. Nombre: biblioteca

3. Paquete raíz: cu.uci.samples

4. Mecanismo de autenticación: Spring security.

5. Tipo de bases de datos a usar: SQL.

6. Base de datos en desarrollo: MySQL.

7. Base de datos en producción: MySQL.

8. Hibernate cache: ehcache.

9. Herramienta de construcción: Maven.

10. Tecnologías adicionales a usar: Social Login, ElasticSearch.

11. Usar SASS para procesar CSS: No.

12. Idioma primario: Español, Habilitar internacionalización a Inglés.

13. Frameworks de prueba a usar: Ninguno.

Con estos 13 pasos se completa nuestra primera aplicación que usaremos e iremos enriqueciendo en siguientes artículos.

Al concluir estos pasos, el generador intentará ejecutar los comandos npm install y bower install, si los servidores de dependencias están configurados correctamente, no debe haber ningún problema, salvo con PanthomJS, el mismo no se descarga desde los servidores de dependencias, lamentablemente hay que ponerle la variable del Proxy para que se conecte a internet y lo instale, son 23MB. Para garantizar que se inyectaron bien las dependencias se recomienda ejecutar el comando gulp en la raíz del proyecto, luego de que concluya npm install y bower install.

Luego de que sea satisfactorio npm install y bower install entonces hay que configurar el fichero de propiedades para que la aplicación encuentre el servidor MySQL, donde debe haber una base de datos (limpia) con el mismo nombre de nuestra aplicación (en este caso biblioteca).

Los ficheros de propiedades se encuentra en /src/main/resources/config, deben ajustarse los ficheros application-prod.yml y application-dev.yml, especificar los parámetros de conexión con la base de datos MySQL.

Con todo listo, solo basta ejecutar nuestra aplicación Spring Boot, para ello : mvn spring-boot:run, se instalaran las dependencias descritas en el pom.xml que autogeneró JHipster y se iniciará nuestra aplicación.

Si todo salió correctamente ya tenemos nuestra primera aplicación JHipster lista, debajo algunas pantallas.

En la próxima entrega veremos como crear las entidades para nuestra aplicación y algunas otras cuestiones.