Building an application web using Jhipster and deployment in Heroku

Introduction

Jhipster is a great project that allows to create monolithic and microservices applications with Java using hot technologies such as Spring Boot + Angular or React and persistence in BD SQL or NoSQL.

Install it is not complicated and everything is in the documentation, but, you need certain requirements.


  1. You must have installed Java 8 (You can also use OpenJDK 8)
  2. You must have installed Node (Install recommended version for most)
  3. You must have installed  Yarn (equivalent to NPM)



Then the installation is with this simple command:


yarn global add generator-jhipster


Creation of the Project


Create a folder for the project called playas and within it execute the jhipster command.


When executing this command you will obtain this output:



It is where we have to choose if we want to create a monolithic or micro-services project.

We are going to create a monolithic project and we will answer the questions  immediately:




  • We choose the Monolithic project.
  • The name of the project: playas
  • The default package: edu.upc.playas
  • He asks us if we will use JHipster Registry. We answer No. For this example does not apply and we will talk about it later.
  • Type of authentication We choose JWT authentication.
  • Type of Database. We choose SQL.
  • For Production BD. We choose MySQL.
  • For Development BD. We choose H2-with-persistence-to-disk.
  • Spring Cache. We choose Ehcache.
  • You want to use Hibernate 2nd Level Cache. We answer Yes.
  • You choose Maven or Gradle. We answer Maven.
  • What other technologies to use ?. We do not choose anything and for that we only give ENTER.
  • What framework do you want to use? Angular 6 or React. We choose Angular 6.
  • They ask us if we will use SAAS. The answer is No.
  • If we are going to enable Internationalization. We answer Yes.
  • As a native language, We choose Spanish.
  • As an alternative language. We choose English.
  • What test framework do you want to use? We choose Protractor.
  • The last question is: Would you like to install other generators from the JHipster Marketplace ?. The answer is No.
After the last response, the backend and frontend project is generated respectively. You will see how code is generated and the necessary library downloads are made. Be patient because it takes a few minutes.

The final result is shown below. This indicates that you are ready to execute it in DEV mode.


If we review the directory structure, we will see that in a few minutes a project has been created. If the tool does not exist, this process would have taken many hours.



Importing the project to Intellij Idea


We are going to import the pom.xml to execute the project and see the initial state of the project. Importing it will take a couple of minutes while downloading the dependencies and indexing the project.



To run the application, we have to click on Run.


The output console shows us that we can open the URLs to see the application running.


The page that we will see is the following:

If you want to start a session, you can try with the default accounts:
- Administrator (user = "admin" and password = "admin")
- User (user = "user" and password = "user").


This message indicates the conditions to log in.

The application comes with some pre-installed options, we will enter as administrator to see them all:



From the previous screen, we have the maintenance of users of the application, application metrics, health of the application, configuration of the application, audits, logs, API documentation, and database.




In the next picture, we can change the language of the application from Spanish to English or vice versa.




In the next picture, we can change user data or settings, change the password or log out.



There is a menu of Entities that is empty and which we will work on in the next section.


Entity Design


If you have basic knowledge of JPA you can define the entities of the project, their constraints, relations between them in the JDL-Studio that allows you to design your entities graphically and export that design as a file. After that, with jhipster, we can import this file to the project. Jhipster creates the maintenance of these entities in a few minutes.


The code of the entities can be downloaded from this gist. I will put it in the Downloads folder.



To import them to the project you just have to execute the following command within the playas directory (Stop the project first if it is running):







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

In one of the steps, you will be asked if you want to overwrite the files. Answer with the letter a and wait for a couple of minutes to end.


The result is as follows:




It is not ready yet. You will have to execute a yarn start and then execute the project in IntelliJ or use mvnw spring-boot: run. I will use the IDE.

The result of yarn start is:


Cancel with Ctrl + C and then run the project from the IDE.

Each Entity will have its CRUD implemented.






At this point I invite you to try the application and make the improvements you see necessary.

Deployment in Heroku


Heroku is one of the PaaS most used today in business environments for its strong focus on solving the deployment of an application. It also allows you to manage the servers and their configurations, scaling and administration. A Heroku just tell you what backend language you are using or what database you are going to use and you care only about the development of your application.




Jhipster is going to help us deploy this application in Heroku in such a simple way. This will be our production environment, therefore, the persistence will be in MySQL.

The requirement is to be in Hobbie payment mode. Because otherwise, the MySQL Addon will fail us. That is, they will have to register their Credit Card. In Peru $ 7 is approximately 25 soles per month, but, I have no choice but to try.



jhipster heroku




  • He will ask us what name we will use for the deployment: playas.
  • In what region we are going to deploy: us.
  • What kind of deployment are we going to use: Git
  • If you ask us if you are going to overwrite the pom.xml, we respond with the letter a.

We wait a few minutes for it to finish, generate the BD and it ready to do tests.





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!

Let's run the application with heroku logs --tail and see the logs to see if everything is ok.




Stop the execution with Ctrl + C and start running the application without problems with heroku open. This will open the website https://playas.herokuapp.com/#/ and we can share this URL with our colleagues or customers.


Enjoy!

Joe

Share:

Farmacias Peruanas


En Abril inicie mi nuevo empleo en Inkafarma como Gerente de Arquitectura y Soluciones Digitales. Entre justamente en el momento de la fusión de Inkafarma y MiFarma empresas que son parte de Intercorp Retail.

Hoy somos Farmacias Peruanas y tenemos el gran reto de  llevar Salud a las familias del Perú manteniendo los precios bajos de Inkafarma con presencia en todo el país y los fabulosos descuentos y  el popular monedero electrónico de MiFarma.

Hoy conjuntamente con mis jefes, compañeros y equipo afrontamos cada día nuevos retos. El no haber pertenecido a ninguna de las dos empresas me hace agnostico y en busqueda de lo mejor para las 22000 familias (empleados) que pertenecen a farmacias peruanas. Estoy convencido que si hago bien mi trabajo no solo mi familia se verá beneficiada, sino las familias de los empleados y en consecuencia las familias de nuestros clientes. Es curioso, pero, mis grandes preocupaciones no es la tecnología, sino las personas, la actitud que le ponen al trabajo, las ganas de comprometerse y ser parte del equipo. Sin eso no se puede conseguir resultados, así que hay que motivar, empoderar, acompañar, corregir en privado y celebrar los resultados de los colaboradores en público.

No se imaginan la pasión, las ganas con las que voy a la empresa. Las ganas de hacer algo que de ventajas competitivas a la empresa, el uso de tecnologías emergentes, soluciones digitales que generen nuevos canales de venta, rentabilidad y una mejor experiencia a las familias peruanas. Participar de iniciativas del grupo, compartir con arquitectos, jefes, gerentes, Directores de decisiones estrategicas para ser lideres en el mercado. Es realmente una temporada de mucho aprendizaje y de crecimiento profesional.

Cloud, Serverless, On-premise, DataLake, Continuos Integration, Continous Delivery, Automatization, Business Intelligence, API Management, API Gateway, SAP, Stivo, Security, etc. Son parte del vocabulario del día a día.

Estoy en busqueda de mayor velocidad, innovación ( probar y equivocarse rápido), madurar y dar sostenibilidad a los productos digitales de la empresa. Tenemos que hacer el ejercicio, y que no nos cuenten lo que han hecho otros, sino ser también actores del mercado en temas dígitales.

Es un camino  de retos día a día y no caben dudas, miedos a ello, sino que hay que verlo como oportunidades de crecimiento. Quiero involucrarme y dar todo lo que he aprendido estos años para cumplir con nota sobresaliente  los objetivos estratégicos planteados por la cia. Por mi familia, por las familias de la empresa y por que seamos una empresa peruana de Exito.

Transformación Digital = (conocimientos + trabajo en equipo) *  actitud  , no se si la formula es correcta. Pero la Actitud como la he escuchado a grandes consultores es una realidad y lo vivo cada día.

Sin actitud no se llega a ningún lado. Todos tenemos conocimientos, podemos estar en equipos, eso suma como esta en la formula;  pero,  sin actitud no vale, la actitud múltiplica.

Hasta la próxima.

Joe
Share:

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: