5 Comandos, una aplicación web completa con JHipster en español


En el post anterior se explicó la configuración del entorno de trabajo con JHipster, para verlo ir a Crea una aplicación Web+REST (Spring boot + AngularJS) en minutos utilizando JHipster . En este post se explica paso a paso como crear una aplicación completa haciendo uso de comandos simples con JHipster.

Creación de entidades

En JHipster no es necesario escribir una sola línea de código para crear una aplicación web debido a que es una herramienta scaffolding lo cual permite crear la aplicación en base a comandos.

Definiendo aplicación a crear

La aplicación a crear será una aplicación para registrar departamentos, empleados y habilidades de una empresa, la idea de este post es crear la aplicación completa sin escribir una sola línea de código. Para conseguir esto se deben crear las siguientes entidades:

  • Departamento
  • Empleado
  • Habilidad

Creando entidad department

Lo primero será crear la entidad departamento utilizando el siguiente comando:

yo jhipster:entity department

Una vez que se ejecuta el comando, JHipster preguntará la siguiente información sobre la entidad que se desea construir:

  • Desea agregar un campo a la entidad?
    • Nombre del campo
    • Tipo del campo
    • Reglas de validación del campo

Para la entidad department se crearán el siguiente campo:

  • name
    • String

Una vez hecho esto JHipster preguntará si se desea agregar una relación a la entidad que se generó, en este caso se seleccionará que si se desea y se proporcionará la siguiente información:

  • Nombre de la otra entidad : Employee
  • Nombre de la relación  :employee
  • Tipo de relación : one-to-many
  • Nombre de la relación en la otra entidad: department

Cuando se termine JHipster preguntará lo siguiente:

  • Si desea crear otra relación: Seleccionaremos en este ejemplo que no.
  • Si se desea utilizar DTO para los endpoints que se generen. es importante mencionar que dichos DTO’s son creados utilizando MapStruct, para más información sobre esto ver el post Mapeo de Beans con MapStruct : Seleccionaremos en este ejemplo que no.
  • Si se desea que el servicio REST acceda directamente al repositorio de Spring data o si se desea que se genere un servicio separado para esto: Seleccionaremos en este ejemplo Yes, generate a separate service class.
  • Si se desea agregar paginación a la entidad consultada:Seleccionaremos en este ejemplo no.

Una vez hecho esto JHipster notificará los archivos a sobre escribir, seleccionaremos que si deseamos que lo haga y la entidad se generará de forma completa.

Creando entidad employee

En la definición de la entidad department se definió que existirá una relación entre ella y employee, pero falta definir la entidad employee con el fin de definir los campos que contendrá y las reglas de cada uno. Para esto ejecutaremos el siguiente comando:

yo jhipster:entity employee

Una vez que se ejecuta el comando, agregaremos los siguientes campos a la entidad:

  • name
    • String
  • age
    • Integer
  • salary
    • Double

El siguiente paso es definir las relaciones que tendrá la entidad employee, para este caso serán 2 la que se registrarán una con la entidad ya creada department y una con la entidad Skills que contendrá las habilidades del empleado, para hacerlo se responderá lo siguiente:

  • Desea agregar una relación a otra entidad: Si
    • Nombre de la otra entidad: Department
    • Nombre de la relación: department
    • Tipo de relación: many-to-one
    • Cuando se muestre esta relación en la aplicación, que campo de Department desea utilizar : id
    • Desea agregar validaciones a la relación: No
  • Desea agregar una relación a otra entidad : Si
    • Nombre de la otra entidad : Skill
    • Nombre de la relación  :skill
    • Tipo de relación : one-to-many
    • Nombre de la relación en la otra entidad: employee

Creando entidad skill

La última entidad será skill la cuál contendrá información sobre las habilidades del empleado. Para generarla ejecutaremos lo siguiente:

yo jhipster:entity skill

Una vez que se ejecuta el comando, agregaremos los siguientes campos a la entidad:

  • name
    • String
  • yearsExperience
    • Integer

Una vez definidos los campos de la entidad skill se definirá la relación que tiene con la entidad empleado:

  • Desea agregar una relación a otra entidad: Si
    • Nombre de la otra entidad: Employee
    • Nombre de la relación: employee
    • Tipo de relación: many-to-one
    • Cuando se muestre esta relación en la aplicación, que campo de Employee desea utilizar : id
    • Desea agregar validaciones a la relación: No

Probando todo junto

Con estos comandos ya se tiene lista la aplicación completa de JHipster lo único que resta es ejecutar los siguientes dos comandos:

mvn clean install

Construirá la aplicación de nuevo con los nuevos cambios generados con Spring boot.

mvn spring-boot:run

Ejecutará la aplicación y la pondrá disponible en la siguiente URL http://localhost:8080/.

A continuación se muestra como se ve la aplicación:

Captura de pantalla 2016-10-04 a las 9.00.18 a.m..png

Como se puede observar el menu Entities ahora contiene las 3 entidades que se generaron:

  • Department
  • Employee
  • Skill

Department

La primera pantalla de entidad que se mostrará será department ya que no depende de ninguna otra:

Captura de pantalla 2016-10-04 a las 9.09.08 a.m..png

Como se puede observar la entidad Department tiene la siguiente funcionalidad:

  • Crear nuevos departamentos
  • Ver departamentos existentes
  • Editar departamentos existentes
  • Borrar departamentos

Employee

La pantalla employee se ve como se muestra a continuación

Captura de pantalla 2016-10-04 a las 9.12.18 a.m..png

Como se puede observar la entidad Employee tine la siguiente funcionalidad:

  • Crear nuevos empleados
  • Ver empleados existentes
  • Editar departamentos existentes
  • Borrar departamentos existentes

Nota : Como se puede observar en la columna Department aparece un número el cual es el id del departamento con un link a la pantalla del departamento, la razón por la que aparece el id es porque se seleccionó “Cuando se muestre esta relación en la aplicación, que campo de Department desea utilizar”

Skill

La pantalla employee se ve como se muestra a continuación

captura-de-pantalla-2016-10-04-a-las-9-20-44-a-m

Otros recursos creados

Además de las pantallas creadas JHipster crea lo siguiente de forma automática:

Web services REST y documentación de los mismos:

Captura de pantalla 2016-10-04 a las 9.22.01 a.m..png

Estadísticas de uso de los servicios web:

Captura de pantalla 2016-10-04 a las 9.24.43 a.m..png

Código siguiendo buenas prácticas

Es importante saber que si se desea modificar la aplicación para cambiar la apariencia o mostrar otro tipo de información es posible hacerlo modificando el código, ya que el código generado por JHipster sigue buenas prácticas de desarrollo lo cual lo hace muy fácil de modificar.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

 

Crea una aplicación Web+REST (Spring boot + AngularJS) en minutos utilizando JHipster


JHipster es una herramienta de Scaffolding creada por Yeoman utilizada para crear proyectos utilizando Spring Boot + AngularJs.

Instalación

Antes de iniciar con la creación de las aplicaciones debemos asegurarnos que tenemos el ambiente de trabajo instalado y configurado correctamente. Para esto debemos seguir los siguientes pasos:

  • Instalar y configurar la versión 8 de Java
  • Instalar Node.js del sitio web, esto instalará el comando npm.
  • Instalar Yeoman utilizando el comando npm install -g yo 
  • Instalar Bower utilizando el comando npm install -g bower
  • Instalar Gulp utilizando el comando npm install -g gulp-cli
  • Instalar JHipster utilizando el comando npm install -g generator-jhipster

Con estos sencillos pasos JHipster ha sido instalado de forma exitosa.

Creando una aplicación en minutos utilizando JHipster

Una vez instalado JHipster el siguiente paso es crear una aplicación para esto seguiremos los siguientes pasos:

  • Crear una carpeta vacía la cuál contendrá el proyecto que se genere:
mkdir jhipster-example
  • Ir al directorio creado utilizando:
cd jhipster-example
  • Crear la aplicación utilizando el comando:
yo jhipster

JHipster preguntará por  lo siguiente:

  • Permiso para utilizar estadísticas de uso.
  • El tipo de aplicación que se desea construir como se muestra en la imagen:
    • Monolithic application

captura-de-pantalla-2016-09-29-a-las-9-00-07-a-m

  • El nombre de la aplicación
    • raidentrance
  • Nombre del paquete base
    • com.raidentrance.jhipster
  • Tipo de autenticación que se desea utilizar,
    • HTTP Session Authentication (stateful, default Spring Security mechanism)

  • Tipo de base de datos  a utilizar
    • SQL
  • Base de datos a utilizar en producción
    •  MySQL
  • Base de datos a utilizar en desarrollo
    • MySQL
  • Si se utilizará el segundo nivel de cache de Hibernate
    • Yes, with ehcache (local cache, for a single node)

  • Herramienta para construcción del proyecto
    • para nuestro ejemplo utilizaremos Maven.
  • Herramientas adicionales
    • No se selecciona ninguna opción
  • Utilizar LibSass para el procesamiento de CSS
    • Yes
  • Soporte para internacionalización
    • No
  • Framework de testing a utilizar
    • Gatling
  • Sobre escribir el archivo .gitignore
    • Si

Con estos pasos JHipster generará la aplicación completa y mostrará el siguiente mensaje:

captura-de-pantalla-2016-09-29-a-las-9-09-49-a-m

Iniciar la aplicación

Una vez creado el proyecto el siguiente paso es iniciar la aplicación, para esto se deben seguir los siguientes pasos:

  • Compilar el proyecto con maven utilizando el comando mvn clean install
  • Crear una base de datos vacía para el proyecto
  • Modificar configuraciones del proyecto, para esto abriremos el archivo application-dev.yml ubicado en src/main/resources/config.Para este ejemplo se modificará lo siguiente:
    • URL de la base de datos
    • Usuario de la base de datos
    • Password de la base de datos
  • Para ejecutar el proyecto es posible hacer lo siguiente:
    • Ejecutar en el IDE la clase RaidentranceApp.java como Spring boot application
    • Utilizar el plugin de Spring boot con el comando mvn spring-boot:run
  • Abrir en el navegador la dirección http://127.0.0.1:8080. Se mostrará lo siguiente:

 

Captura de pantalla 2016-09-29 a las 12.25.30 p.m..png

Puntos a analizar:

  • En la parte superior izquierda muestra que se está utilizando el perfil dev
  • En la pestaña de Account se tiene la posibilidad de registrar a un usuario nuevo o autenticar uno existente.
  • Al seleccionar Sign in se mostrará lo siguiente

Captura de pantalla 2016-09-29 a las 12.27.23 p.m..png

  • Por default en desarrollo JHipster crea un usuario llamado admin con el password admin, al autenticarte se mostrará la siguiente página de bienvenida:

 

Captura de pantalla 2016-09-29 a las 12.23.47 p.m..png

  • En la sección entities se mostrarán las entidades propias del proyecto, en este momento no ha creado ninguna por lo que aparecerá vacía.
  • Account muestra lo siguiente:
    • Settings: Permite modificar nombre, apellido y correo electrónico
    • Password: Permite cambiar el password del usuario autenticado
    • Sessions: Muestra las sesiones activas del usuario
    • Sign out: Permite cerrar sesión en la aplicación
  • Administración muestra lo siguiente:
    • User management: Permite llevar acabo la administración de usuarios de la aplicación
    • Metrics: Muestra métricas de la aplicación, por ejemplo (número de peticiones http, estadísticas de uso de los web services REST, estadísticas de uso de cache y estadísticas de uso del datasource)
  • Health muestra lo siguiente:
    • Muestra los health checks definidos en la aplicación
  • Configuration
    • Muestra todas las configuraciones de la aplicación
  • Audits
    • Muestra los registros para hacer auditoría en el sistema
  • Logs
    • Muestra y permite cambiar los niveles de log de la aplicación
  • API
    • Muestra los web services de la aplicación así como una explicación de como utilizarlos como se muestra en la siguiente imagen

Captura de pantalla 2016-09-29 a las 12.37.41 p.m..png

Toda la funcionalidad mostrada fue creada siguiendo buenas prácticas de desarrollo solo ejecutando un solo comando y llenando un wizard sencillo.

En el siguiente POST se explicará cómo crear nuevas páginas en minutos, la idea será crear una aplicación completa en minutos.

Subiré el código completo en el siguiente post con el fin de que esté completo.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com