Reserva de Playas de Estacionamiento con Jhipster y Despliegue en Heroku


Introducción


Jhipster es un gran proyecto que permite crear aplicaciones monoliticas y de microservicios con Java usando tecnologías hot como Spring Boot + Angular o React y persistencia en BD Sql o NoSql.

Instalarlo no es nada complicado y todo esta en la documentación, pero, se necesita ciertos requisitos.


  1. Tener Java 8 instalado (también puedes usar OpenJDK 8)
  2. Tener Node instalado (Instalar versión recomendada para la mayoría)
  3. Tener Yarn instalado (equivalente a NPM)


Luego la instalación es con este simple comando:



yarn global add generator-jhipster


Creación del Proyecto


Crear una carpeta para el proyecto denominada playas y dentro de ella ejecutar el comando jhipster.



Al ejecutar dicho comando obtendras esta salida:


Es donde tenemos que escoger si queremos crear un proyecto monolitico o de micro servicios. 

Vamos a crear un proyecto monolitico y responderemos a las preguntas que nos hace.


  • Escogemos proyecto Monolitico
  • El nombre del proyecto: playas
  • El paquete por defecto: edu.upc.playas
  • Nos pregunta si usaremos JHipster Registry. Respondemos No. Para este ejemplo no aplica y ya hablaremos de el mas adelante. 
  • Tipo de autenticación. Escogemos JWT authentication
  • Tipo de Base de Datos. Escogemos SQL.
  • Para BD de Producción. Escogemos MySQL.
  • Para BD de Desarrollo. Escogemos H2-con-persistencia-a-disco
  • Spring Cache. Escogemos Ehcache
  • Deseas usar Hibernate 2nd Level Cache. Respondemos Yes
  • Escogeras Maven o Gradle. Respondemos Maven
  • Que otras tecnologías a usar?. No escogemos nada y para eso solo damos ENTER
  • Que Framework deseas usar? Angular 6 o React (Hoy vigente). Escogemos Angular 6.
  • Nos preguntan si usaremos SAAS. La respuesta es No
  • Si vamos a habilitar Internacionalización. Respondemos Yes
  • Como lenguaje nativo. Escogemos Spanish.
  • Como lenguaje alternativo. Escogemos English
  • Que framework de Test deseas usar. Escogemos Protractor
  • La última pregunta es: Would you like to install other generators from the JHipster Marketplace?. La respuesta es No
Luego de la última respuesta se genera el proyecto backend y frontend respectivamente. Verás como se genera código y se hacen las descargas de librerías necesarias.  Ten paciencia porque demora unos minutos. 

El resultado final es el siguiente. Lo que nos indica que ya esta listo para ejecutarlo en modo de DEV.




Podemos revisar la estructura de directorios y veremos que en pocos minutos nos ha creado un proyecto que de no existir la herramienta nos podría haber tomado muchas horas. 




Importando el proyecto al Intellij Idea


Vamos a importar el pom.xml para ejecutar el proyecto y ver el estado inicial del proyecto.  Al importarlo demorará un par de  minutos mientras descarga las dependencias e indexa el proyecto.



Para ejecutar la aplicación damos clic en Run


La consola de salida nos muestra que ya podemos abrir los URLs para ver la aplicación en funcionamiento. 


La pagina que veremos será la siguiente:

Si desea iniciar una sesión, puede intentar con las cuentas predeterminadas:
- Administrator (usuario="admin" y contraseña="admin") 
- Usuario (usuario="user" y contraseña="user").

Este mensaje indica las condiciones para iniciar sesión. 

La aplicación viene con algunas opciones pre instaladas, entraremos como administrador para verlas todas:

De la pantalla anterior tenemos el mantenimiento de usuarios de la aplicación, métricas de la aplicación, salud de la aplicación, configuración de la aplicación, auditorías, logs, API documentación, y base de datos. 



En este menú podemos cambiar el idioma de la aplicación de español a ingles o viceversa. 



En este menú podemos cambiar los datos del usuario o ajustes, cambiar contraseña o cerrar sesión

Hay menú Entidades que esta vacío y el cual trabajaremos en el apartado siguiente. 


Diseño de Entidades


Si tienes conocimiento básico de JPA podrás definir las entidades del proyecto, sus constraints, relaciones entre ellas en el JDL-Studio que permite diseñarlas de forma gráfica y exportar dicho diseño como un archivo para luego con jhipster importarlas al proyecto. Jhipster crea los mantenimientos de dichas entidades en pocos minutos. 


El código de las entidades lo puedes descargar de este gist.  Yo lo pondre en la carpeta Downloads





Para importarlas al proyecto sólo tienes que ejecutar el siguiente comando dentro del directorio playas. Deten primero el proyecto si se esta ejecutando:





jhipster import-jdl ~/Downloads/jhipster-jdl.jh




En uno de los pasos se te consultará si quieres sobreescribir los archivos. Contesta con la letra a y espera que termine un par de minutos.



El resultado es el siguiente:



Todavía no esta listo. Tendrás que ejecutar un yarn start para luego ejecutar el proyecto en intellij o usar mvnw spring-boot:run. Yo usare el IDE.

El resultado de yarn start es:


Cancela con Ctrl+C y luego ejecuta el proyecto desde el IDE.

Cada Entidad tendrá su CRUD implementado.


En este punto te invito a probar la aplicación y hacerle las mejoras que veas conveniente.


Despliegue en Heroku


Heroku es uno de los PaaS más utilizados en la actualidad en entornos empresariales por su fuerte enfoque en resolver el despliegue de una aplicación. Ademas te permite manejar los servidores y sus configuraciones, escalamiento y la administración. A Heroku solo le dices qué lenguaje de backend estás utilizando o qué base de datos vas a utilizar y te preocupas únicamente por el desarrollo de tu aplicación.





Jhipster nos va a ayudar a desplegar esta aplicación en Heroku de una forma tan sencilla. Este será nuestro ambiente de producción, por lo tanto, la persistencia será en MySQL.

El requisito es estar en modalidad de pago Hobbie.  Porque sino el Addon de MySQL nos va a fallar.  Es decir, tendrán que registrar su Tarjeta de Crédito. En Perú 7$ es aproximadamente 25 soles al mes, pero, no me queda opción más que probar.


jhipster heroku




  • Nos preguntará que nombre usaremos para el despliegue: playas.
  • En que región vamos a desplegar: us.
  • Que tipo de despliegue vamos a usar: Git
  • Si nos pregunta si va a sobreescribir el pom.xml, respondemos con la letra a

Esperamos algunos minutos a que termine, genere la BD y este lista para hacer pruebas.





Your app should now be live. To view it run
heroku open
And you can view the logs with this command
heroku logs --tail
After application modification, redeploy it with
jhipster heroku
Congratulations, JHipster execution is complete!


Vamos a ejecutar la aplicación con heroku logs --tail y ver los logs para ver si todo esta ok. 


Cortamos la ejecución con Ctrl+C y pasamos a ejecutar la aplicación sin problemas con heroku open. Esta abrirá la página web https://playas.herokuapp.com/#/  y ya podemos compartir dicho URL con nuestros compañeros o clientes. 




Enjoy!!

Joe






Share:

1 comentario: