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:
-
Tipo de aplicación: Monolithic application
-
Nombre: biblioteca
-
Paquete raíz: cu.uci.samples
-
Mecanismo de autenticación: Spring security.
-
Tipo de bases de datos a usar: SQL.
-
Base de datos en desarrollo: MySQL.
-
Base de datos en producción: MySQL.
-
Hibernate cache: ehcache.
-
Herramienta de construcción: Maven.
-
Tecnologías adicionales a usar: Social Login, ElasticSearch.
-
Usar SASS para procesar CSS: No.
-
Idioma primario: Español, Habilitar internacionalización a Inglés.
-
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.
Comentarios ( 49 )
Help
Me da este error cuando intento instalar el Yoeman.
Ya configure el repositorio del NPM según el post, no existía el archivo .npmrc y lo cree.
pm ERR! Linux 4.4.0-45-generic
npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “install” “-g” “yo”
npm ERR! node v6.7.0
npm ERR! npm v3.10.3
npm ERR! code EAI_AGAIN
npm ERR! errno EAI_AGAIN
npm ERR! syscall getaddrinfo
npm ERR! getaddrinfo EAI_AGAIN registry.npmjs.org:443
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!
npm ERR! Please include the following file with any support request:
npm ERR! /home/lester/npm-debug.log
@Tiger, creaste el fichero pero no configurastes la ruta del nexus de la UCI, mira en este artículo esta como hacerlo para el caso del NPM.
https://humanos.uci.cu/2016/10/restablecido-el-servicio-de-servidores-de-dependencias-de-paquetes/
@Yoandy
Dentro del fichero también coloqué esto:
registry = http://nexus.prod.uci.cu/repository/npm-all
strict-ssl = false
Al parecer no está leyendo la configuración del repositorio npm, lo estas ejecutando como sudo o como root ?? fijate no es lo mismo pues como root lee la configuración del .npmrc del usuario root, que como no hay trata de conectarse directo a internet, como sudo en cambio lo ejecuta con permisos de administración pero usando el “entorno” del usuario, donde esta el fichero .npmrc, el fichero lo tiene ubicado correctamente en /home/$USER/.npmrc ???
man hay enlces q no me funcionan
¿Cúales?
@Yoandy
Ese era el error, estaba como root, ya estoy configurando Bower, luego comento el resultado final, jejeje.
+1000 por el post.
Si puedes comparte aquí el phantom js, para no tener que descargarlo
@Tiger, puedo compartirlo sin problemas, el tema esta que no sabría decirte como instalarlo así independiente, pues de la otra forma es el propio node quien lo instala.
Te lo compartiré en la nube, te toca investigar como instalarlo, de paso si lo logras te pido lo compartas.
Me está dando este error cuando ejecuto:
mvn spring-boot:run
ERROR] No plugin found for prefix ‘spring-boot’ in the current project and in the plugin groups [org.apache.maven.plugins, org.codehaus.mojo] available from the repositories [local (/home/lester/.m2/repository), nexus (http://nexus.prod.uci.cu/repository/maven-all/)] -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/NoPluginFoundForPrefixException
Ya lo solucioné era que estaba en otro directorio.
@Yoandy, primeramente un saludo especial para ti y mi alegría de ver que posteas sobre JHIPSTER, muy buena esta alternativa, tiene muchas fortalezas y ayuda mucho al desarrollo de apps. He incursionado recientemente en el uso de este generador, en mi opinión muy cómodo y más para proyectos donde se deseen lograr metas de sprint cortos y con tareas urgentes; puedes enfocarlo al tdd, se mantiene al día con las tecnologías que emplea, posee una estructura de proyectos que facilita el desarrollo y mantenimiento del código fuente, usa las buenas prácticas de John Papa para el desarrollo con angular, entre otras características. Opino que es una buena propuesta para analizar y sobretodo apostar por ella en el presente y futuro cercano para hacer buen uso de ella en proyectos productivos.
Saludos a todos.
Gracias @Frank por tus comentarios, si te animas puedes unirte a un grupo que hemos creado en linkedin para JHiptser, se llama JHipster Cuba Developers, te invito a que compartas y opines. Próximamente publicaré algún artículo nuevo sobre esta tecnología.
@Tiger, ¿levantó la app sin problemas?
@Yoandy
Aún no, en la consola me pone:
———————————————————-
Application ‘biblioteca’ is running! Access URLs:
Local: http://localhost:8080
External: http://127.0.1.1:8080
———————————————————-
Es decir no hay errores.
Y cuando accedo por el navegador me carga el nombre de la pagina y el favicon pero sale en blanco.
Hace tiempo andaba buscando un articulo como este. Muy util despues de pasar por la instalaci’on de casi un sin numero de tecnolog’ias jajajjaa y el dichoso phantomjs (que no entiendo como no puede bajar eso apra el repo UCI, son 23 mb 🙁 ) Pero nada luego de hacer todo eso la pagina me salia en blanco……
Despues de mucho investigar y instalar y reinstalar era que el index.html estaba en blanco… xD!!!!!
Cree otro proyecto y copie el contenido cambiando el nombre del ModuleApp y otras cosas y puff yaaaaaa.
Ahora a programar, pero si para levantar lo basico fue todo ete trabajo ya se lo que me espera. pongo todo esto por si alguien tiene el mismo problema.
PD: sorry las faltas toy linux, cliente ligero y lento con ……. Saludos
@Tiger, como dice el artículo asegurate de en la raíz del proyecto ejecutar el comando gulp , el mismo inyecta las dependencias bower al index.html que es en fin … la vista de la app.
@Yoandy
Me salté ese comando, jejejeje, vaya que si es por mí lo agregaron nuevo, jejeje.
@Reynaldo
Colega el problema es allá en nuestro país, sobretodo con el internet y las dependencias, yo para iniciarme solo abrí la página oficial del jhipster, seguí cada uno de sus pasos, me creé mi proyecto y “eureka”, todo sin problemas, recomiendo usar el gulp para publicar la app .
Saludos cordiales
@Yoandy
Seguro colega, en cuanto llegue a la renta, buscaré el grupo para hacer la solicitud….un saludo.
@Yoandy
El mirror para instalar el nodejs no funciona solo funciona desde la producción?
@Yoandy
el del mirror
@Yoandy
Disculpa la ignorancia, pero si fuera posible comentame un poco acerca de lo que se puede hacer con esta herramienta. En verdad no leí todo lo que escribiste porque el tiempo ahora mismo no me acompaña pero me parecio interesante al menos la interfaz que muestras y algunas tecnologías.
@Frank, te entiendo, aquí contamos ahora con los repositorios de dependencias que nos ayudan a probar todas estas tecnologías siempre se pasa algún trabajo pero se puede.
@Jorge, colega tienes que leerte el articulo, de seguro tienes un poco mas de tiempo del que yo dedique a escribirlo, la utilidad es para cualquier cosa “seria” que quieras hacer.
@Tiger, en teoría debe funcionar desde donde sea, yo lo he probado desde el edificio 132 y sin lio … eso seguro es el Windows 10 🙂
Prueba la interfaz a ver si llegas vía web: http://nexus.prod.uci.cu/
Saludos
@Yoandy yo estoy muy contento que ya se ha abierto un poco más a las tecnologías y que te permiten hacer cosas como estas, antes pasábamos un poco de trabajo, me recuerdo descargando libs con mi cuenta de estudiante cuando solo eran 100 mbs mensuales jejeje, y uníamos dos o tres cuentas para descargarnos los sources de diferentes frameworks y tools y hacer nuestros aportes. Ahhh ya estoy en el grupo de linkedIn….gracias.
@Jorge Colega se puede hacer de todo, pero lo que más puedes hacer es ejercitar las neuronas con él pues como dicen mis colegas de acá te vuelves “adicto al jhipster” una vez que le conoces, sino preguntale a @Yoandy y verás lo que te dice =D
Saludos cordiales
Excelente artículo Yoandy!. Hacía ya tiempo que no veía cosas así en humanos, de verdad muy bueno.
Gracias @JorgeFS, te invito a que sigas la serie que saldrá, para el fin de semana debe estar la parte 2, donde ya crearmos las entidades usando JDL y tendremos una APP funcional.
@Yoandy
Hola, yo soy novato en Linux y de verdad que no entiendo mucho la guía que está en el link que pones arriba. No se como encontrar el archivo, si puedes ayudarme te lo agradecería. Saludos
@JA
Si puedes específica que archivo es el que no encuentras para ayudarte.
@Tiger
Eso me paso a mi tambien, me pase horas tratando de recompilar todo, todos los comandos me daban el OK y la pagina seguia en blanco. El problema era que el index.html estaba en BLANCO completo. ni con el ingect ni nada, ni HTML ni nada.
Solucion, cree otro proyecto copie el index.html y le cambie el name del app de angular y puff TODO OK.
SAludos
Y despues me encuentro gente que me dice q Spring es un producto mediocre. Miiraaaaaa que…..
@krlos … pues no le hagas casa a todo lo que escuchas 🙂
Spring estaba bueno y Spring Boot lo puso mejor … y luego con JHipster se programa casi solo 🙂
Woww esto me parece genial, pero para alguien como yo que lo único que tiene como base son las ganas de aprender (aparte de C, C++ y lo básico de Java SE) está un poco cargadito. Encontré el minibook que publicó #InfoQ, veremos como avanzamos. Ya había leído algo en RICE , incluso está toda la documentación. Saludos y muchísimas gracias x el post. El mejor de este mes, a mi consideración claro.
https://rice.uci.cu/?p=4182
@Gustavo, fue exactamente ahí, donde por primera vez leí de JHipster, mi curiosidad por esta tecnología me hizo investigar más y más y fue cuando conocí todos los proyectos y posibilidades de este Fullstack generator, gracias.
@Tiger
Man, cuando intento hacer esto
sudo npm install -g yo
me sale ERROR en cada linea y no se como hacer para que esto no pase, intente seguir los pasos que hay en un artículo en “rice” pero tuve el mismo resultado. Dm si sabes que puedo hacer al respecto.
Como configuro el proxy para el npm , la q tengo no funciona
registry=http://nexus.prod.uci.cu/repository/npm-all
noproxy=nexus.prod.uci.cu
strict-ssl=false
proxy=http://127.0.0.1:3128
@Jhipster55, esa era la variante que yo usaba, intenta cambiar proxy por http_proxy y/o https_proxy, a la derecha manten todo igual … sino intenta exportar la variable del proxy del sistema.
No se configurar el brower, no logro hacer este paso
En el archivo ~/.npmrc del perfil del usuario añadir:
registry = http://nexus.prod.uci.cu/repository/npm-all
strict-ssl = false
No se continuará con los post?
@Yoandy
Como puedo tener la página https://jhipster.github.io/ local?
@JHipster55, yo la tengo, pero no la última versión, te la puedo compartir. La pagina en sí es un proyecto github que lo puedes descargar, pero pesa un poco, si puedes bajar la última versión y compartirla será bueno.
@Yoandy
chama cuando ponen el siguiente post?
@yo, colega trataré de ponerle a mas tardar este fin, lo tengo adelantado, pronto lo pondré, estoy tratando de animar a algunos colegas y a lo mejor hacemos un encuentro aquí mismo en la UCI sobre el tema para intercambiar experiencias y buenas prácticas entre los que hemos hecho algo del tema.
Gracias por el interés.
@Yoandy
Cual es la url del proyecto en git para poder clonarlo?
He aquí el portal https://github.com/jhipster/jhipster.github.io
@Yoandy
Sería buena idea la de hacer un encuentro así existiría un mejor intercambio y mas motivación gracias por responder saludos
@Yoandy
Ya tengo la última versión , el que lo desee puede contactarme ymarrero@uci.cu