Crear componentes en Angular 4


Como se explicó en el primer post de Angular 4, la forma en la que se crea una aplicación es a través de componentes. En este post se explicará como crear componentes manualmente y haciendo uso de la CLI(Command line interface). Se tomará como base el post Configura Bootstrap en Angular 4.

Una vez que se tiene un proyecto construido veremos un componente llamado app.component que será utilizado para cargar el contenido al archivo index.html. A continuación veremos como crear componentes adicionales a nuestra aplicación.

Creación de componentes manualmente

A continuación crearemos un componente nuevo llamado posts siguiendo los siguientes pasos:

  • Crear un folder con el nombre del componente dentro del folder src/app/ , en este caso nuestro folder sería /src/app/posts.
  • Dentro del folder /src/app/posts crearemos los siguientes archivos:
    • posts.component.html : Contendrá el HTML que se desplegará donde se inserte el componente
    • posts.component.ts : Contendrá una clase typescript que definirá el componente.
  • Dentro del folder /src/app editaremos el archivo app.modules.ts para registrar el nuevo componente.

Paso 1 Editar el archivo app.component.html

El primer paso para este ejemplo será editar el archivo app.component.html con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>

Con esto la aplicación se verá como se muestra en la siguiente imagen:

Captura de pantalla 2017-10-11 a las 21.13.14

Paso 2: Agregar un nuevo componente

Una vez que tenemos el componente base que es app.component, el siguiente paso es crear el componente posts. Para esto seguiremos los siguientes pasos:

1.- Crear un folder vacío en el folder /src/app/ llamado posts

2.- Crear el archivo posts.components.html dentro del folder /src/app/posts.

<div align="center">
<h3>Post List</h3>
<div>
<table  class="table">
<tr>
<th>Author Twitter</th>
<th>Post name</th>
<th>Post date</th>
</tr>
<tr>
<td>@raidentrance</td>
<td>Angular from scratch</td>
<td> 10/10/2017</td>
</tr>
</table>
</div>
</div>

3.- Crear el archivo posts.components.ts dentro del folder /src/app/posts.

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {

}

Paso 3: Incluir el nuevo componente en el archivo app.modules.ts

Una vez que ya se creó el componente el siguiente paso es registrarlo dentro del archivo app.modules.ts. Para hacerlo debemos editar el archivo como se muestra a continuación:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PostsComponent } from './posts/posts.component';

@NgModule({
  declarations: [
    AppComponent,PostsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Las modificaciones que se harán al archivo app.modules.ts son las siguientes:

  1. Incluir la sentencia import para PostsComponent desde ./posts/posts.component
  2. Incluir PostsComponent en el objeto declarations

Paso 4: Incluir el nuevo componente en el componente principal

Para hacer esto lo único que debemos hacer es editar el archivo app.components.html Como se muestra a continuación:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-posts></app-posts>

Como se puede observar,la única modificación fue agregar al final el selector de nuestro componente llamado .

Una vez concluido lo anterior la página se verá como se muestra a continuación:
Captura de pantalla 2017-10-11 a las 21.42.39

Creando un componente utilizando la CLI

Crear un componente utilizando la línea de comandos es mucho más sencillo, solo debes ejecutar el siguiente comando:

ng generate component posts

Una vez hecho esto verás que todos los archivos necesarios fueron creados automáticamente y que lo único que resta es editar los archivos para tener todo listo. Si tienes alguna pregunta sobre como hacerlo tu mismo, agrégala a los comentarios.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

 

Los sitios web que todo desarrollador debería conocer


En este post se mostrarán algunos de los sitios web que todos los desarrolladores deberían conocer así como la forma de  interactuar.

Solución de problemas

 

687474703a2f2f7777772e667265656c6f676f766563746f72732e6e65742f77702d636f6e74656e742f75706c6f6164732f323031332f30362f737461636b6f766572666c6f775f6c6f676f2e6a7067

StackOverflow (https://stackoverflow.com/)

StackOverflow es un sitio conocido por todos, es el lugar donde podemos encontrar la forma en la que podemos resolver muchos de nuestros problemas, pero ¿realmente eres parte de la comunidad? o solo eres un lector del contenido.

La mejor forma de interactuar en stackoverflow es ir ganando una reputación, para esto lo que debes hacer es ir haciendo preguntas inteligentes o respondiendo preguntas de la comunidad, de ahí viene la siguiente pregunta, ¿Qué hacer con esos puntos? Puedes utilizarlos para hacer preguntas donde des una recompensa por la respuesta que recibes de este modo puedes llamar la atención de expertos a tu pregunta.

A demás de esto stackoverflow permite conseguir ofertas de trabajo, ya que es posible subir tu CV y ver vacantes de empresas importantes en todo el mundo.

Búsqueda de empleo

glassdoor_logo_500

Glassdoor (https://www.glassdoor.com/index.htm)

Si quieres saber más sobre la compañía que te esta haciendo una oferta o sobre la compañía en la que trabajas Glassdoor es tu mejor opción, este sitio web contiene reseñas sobre las compañías más famosas, el proceso de reclutamiento, los rangos de sueldo que se manejan para cada posición,etc.

Para interactuar en esta plataforma lo único que debes hacer es dar reviews de las empresas en las que has trabajado así como el puesto que tienes, la información de tu sueldo, etc. Toda esta información será publicada de forma anónima pero ayudará a otros desarrolladores a tomar decisiones sobre si trabajar en esas empresas o no.

Mejora de habilidades de programación

logo_HRwordmark2700x670_2-1

Hackerrank (https://www.hackerrank.com)

Si lo que deseas es mejorar tus habilidades de programación, Hackerrank es el sitio perfecto para ti. En este sitio podrás resolver algoritmos de distintos tipos que te permitirán mejorar tus habilidades de programación, este sitio cuenta con retos mensuales a demás que es utilizada por muchas compañías para evaluar a los desarrolladores.

La forma perfecta para participar es resolver algoritmos para obtener hackos, e ir resolviendo problemas cada vez más complejos, de igual modo muchas empresas publican sus vacantes en este sitio y para poder aplicar debes resolver algunos algoritmos. Es importante mencionar que este sitio es utilizado por empresas como Amazon para hacer sus primeros filtros.

kaggle-logo-gray-300

kaggle (https://www.kaggle.com/)

El slogan de esta empresa es “Your Home for Data Science”, en este sitio puedes encontrar diversos datasets públicos de alta calidad, ejecutar código en la nube y recibir feedback de la comunidad y participar en competencias relacionadas con machine learning.

Para participar puedes crear una cuenta y participar en los retos, estos tienen una recompensa que puede ir hasta 1.5 millones de dólares !.

Cursos y tutoriales

logo

Udemy (https://www.udemy.com/)

Udemy es una plataforma que cuenta con cursos en linea de todo tipo, algunos gratis algunos de paga pero todos a un precio muy accesible es muy recomendable ya que pagas solo por los cursos que vas a tomar.

Para participar en esta comunidad lo único que debes hacer es enrolarte en algún curso gratis o de paga y aprender. Es importante mencionar que los cursos que compres estarán disponibles de por vida.

ps-logo-with-icon-horiz

Pluralsight (https://www.pluralsight.com/)

Pluralsight es una plataforma de pago donde pagas una cuota mensual y tienes acceso libre a miles de cursos de diversos temas de tecnología.

coursera-logo-nobg

Coursera (https://www.coursera.org/)

Esta plataforma tiene convenios con diferentes universidades con renombre en el mundo y publica cursos que puedes tomar de forma gratuita. ¿Te gustaría tomar un curso de Stanford gratis ? coursera es la plataforma perfecta para esto.

picture

CodeAcademy(https://www.codecademy.com)

Una forma gratuita e interactiva para aprender diferentes lenguajes de programación, esta comunidad cuenta con más de 25 millones de usuarios.

Blogs

Sun-Java-JDK_1

Geeks-Mexico (https://geeks-mexico.com/)

Evidentemente no podía faltar nuestra comunidad geeks-mexico la cual publica artículos de tecnología en español y en inglés con ejemplos.

mykong

Mykong(https://www.mkyong.com/)

El blog mykong se ha convertido en uno de los blogs más utilizados ya que provee explicaciones simples a problemas simples como configurar la versión del jdk, resolver alguna excepción y definitivamente es un blog que verás a lo largo de tu vida.

Herramientas de desarrollo

github-octocat

Github (https://github.com/)

Git es el repositorio que están adoptando la mayoría de las compañías en el mundo y Github se ha vuelto la herramienta web consentida por la mayoría de los desarrolladores , este sitio permite gestionar repositorios git en la nube.

bitbucket_rgb_darkblue_atlassian_1200x630

Bitbucket(https://bitbucket.org/)

Bitbucket al igual que github permite gestionar repositorios git en la nube, la diferencia es que este es propietario de Atlassian y tiene una integración perfecta con herramientas como JIRA, Confluence, FishEye, etc.

Hay muchos otros sitios que deberíamos agregar a la lista, compártenos cuales son tus favoritos.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Spring Boot + REST Jersey Part 1


In this post we will explain in a simple way the basic configuration of Spring Boot with Jersey, this is the first in a series of posts that will be explaining more advanced topics regarding the previously mentioned technologies.

1.- Configuration:

Configuring Spring Boot is a very simple task, you just need to inherit from the spring boot base project, include the dependencies of the spring modules and configure the plugins to be used in the project.

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.0.RELEASE</version>
</parent>

When we inherit from the spring boot parent project, we are inheriting all the versions defined for each component so you don’t need specify the versions in each dependency.

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jersey</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
    </dependency>
</dependencies>

As you can see, you only need specify the dependencies but not the versions, they are all specified in the spring-boot-starter-parent.

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

2.- Creating a main class:

Once we have completed our maven settings the next step is to create a main class for our application, this class will be responsible for the initialisation of the container and the project; the default container for the application is Jetty but as it is indicated by the dependencies in our pom.xml file, we will be using Tomcat.

/**
 *
 */
package com.raidentrance;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author raidentrance
 *
 */
@SpringBootApplication
public class SprinBootSampleApplication  {
    public static void main(String[] args) throws Exception {
        SpringApplication.run(SprinBootSampleApplication.class, args);
    }

}

One of the most common questions at this point is “Why are we using a main method if we are creating a web application?” The answer is quite simple, the application is not going to generate a war file but a fat jar, it is known as fat jar because besides the application itself, it includes an embedded container such as a Jetty or Tomcat one. In future posts we will explain how to use this in a production environment.

3.- Writing the REST web service.

To create a REST web service with spring you just have to use the annotations from the Jersey project and mark the classes with @Component to add it to the Spring context.

/**
 *
 */
package com.raidentrance.resource;

import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import org.springframework.stereotype.Component;

/**
 * @author raidentrance
 *
 */

@Component
@Path("/users")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class UserResource {

    @GET
    public String getUsers() {
     return "{\"username\":\"raidentrance\"}";
    }
}

The following lines are intended to describe the purpose of each annotation used in the present example:

  • @Component: Used to include the class UserResource in the Spring Context.
  • @Path(“users”): Used to define an endpoint where the service is going to be accessed, it is possible to put another annotation at method level to specify more complex endpoints.
  • @Produces(MediaType.APPLICATION_JSON) / @Consumes(MediaType.APPLICATION_JSON): These annotations specify that the endpoints registered on that class will consume and produce JSON files, for this reason the method getUsers() returns a JSON formatted string, it is possible to put these annotations in a method level to modify its behaviour.

4.- Registering the service:

Once we have the service and spring boot has been configured, the missing step is to register the service in Jersey, for this you have to create a class where all the services are going to be registered.

/**
 *
 */
package com.raidentrance.config;

import org.glassfish.jersey.server.ResourceConfig;
import org.springframework.stereotype.Component;

import com.raidentrance.resource.UserResource;

/**
 * @author raidentrance
 *
 */
@Component
public class JerseyConfig extends ResourceConfig {
    public JerseyConfig() {
         register(UserResource.class);
    }
}

This class shouldn’t be invoked from anywhere in the application, just by being registered using the @Component annotation and inheriting from ResourceConfig Spring will know which configuration to use to register the services.

5.- Executing and testing.

To test the application, the only thing we need to do is to execute  SpringBootSampleApplication class as a desktop application, or using its jar file with the command:

 java -jar target/jar-name.jar

Output:

. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v1.4.0.RELEASE)

2016-09-02 11:23:28.005 INFO 20231 --- [ restartedMain] c.r.SprinBootSampleApplication : Starting SprinBootSampleApplication on m-C02RV1WXG8WP.local with PID 20231 (/Users/maagapi/Documents/Github/spring-boot-example/target/classes started by maagapi in /Users/maagapi/Documents/Github/spring-boot-example)
2016-09-02 11:23:28.008 INFO 20231 --- [ restartedMain] c.r.SprinBootSampleApplication : No active profile set, falling back to default profiles: default
2016-09-02 11:23:28.064 INFO 20231 --- [ restartedMain] ationConfigEmbeddedWebApplicationContext : Refreshing org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@53294542: startup date [Fri Sep 02 11:23:28 CDT 2016]; root of context hierarchy
2016-09-02 11:23:28.646 INFO 20231 --- [ restartedMain] f.a.AutowiredAnnotationBeanPostProcessor : JSR-330 'javax.inject.Inject' annotation found and supported for autowiring
2016-09-02 11:23:29.000 INFO 20231 --- [ restartedMain] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat initialized with port(s): 8080 (http)
2016-09-02 11:23:29.012 INFO 20231 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service Tomcat
2016-09-02 11:23:29.013 INFO 20231 --- [ restartedMain] org.apache.catalina.core.StandardEngine : Starting Servlet Engine: Apache Tomcat/8.5.4
2016-09-02 11:23:29.075 INFO 20231 --- [ost-startStop-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2016-09-02 11:23:29.075 INFO 20231 --- [ost-startStop-1] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 1013 ms
2016-09-02 11:23:29.260 INFO 20231 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: 'characterEncodingFilter' to: [/*]
2016-09-02 11:23:29.261 INFO 20231 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: 'requestContextFilter' to: [/*]
2016-09-02 11:23:29.261 INFO 20231 --- [ost-startStop-1] o.s.b.w.servlet.ServletRegistrationBean : Mapping servlet: 'com.raidentrance.config.JerseyConfig' to [/*]
2016-09-02 11:23:29.441 INFO 20231 --- [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729
2016-09-02 11:23:29.469 INFO 20231 --- [ restartedMain] o.s.j.e.a.AnnotationMBeanExporter : Registering beans for JMX exposure on startup
2016-09-02 11:23:29.510 INFO 20231 --- [ restartedMain] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080 (http)
2016-09-02 11:23:29.513 INFO 20231 --- [ restartedMain] c.r.SprinBootSampleApplication : Started SprinBootSampleApplication in 2.206 seconds (JVM running for 2.542)

To test the code you should access http://localhost:8080/users in your web browser.

In the following sections we will explain how to add logs, configure spring security, spring data, error handling and deployments to production environments.

If you want to learn more about web services we recommend the following books:

You can find the complete code for this project in the following link:

https://github.com/raidentrance/spring-boot-example

Author: Alejandro Agapito Bautista

Twitter: @raidentrance

Contact: raidentrance@gmail.com

Translated by: Oscar Camacho – melchior01

Contact: adamfirstangel@hotmail.com

How to create a RESTful web application in minutes with JHipster (Spring Boot + AngularJS )


JHipster is an scaffolding tool developed by Yeoman and used to develop Spring Boot + AngularJS projects. The present post intends to guide you on how to create a new web application step by step.

Installing JHipster

Before starting with our application, you must be sure that you cover the following requirements:

  • Install and configure Java 8 on your system.
  • Install Node-js from its website, this will also install npm.
  • Install Yeoman using npm install –g yo.
  • Install Bower using npm install –g bower.
  • Install Gulp using npm install –g gulp-cli.
  • Install JHipster using npm install –g generator-jhipster.

With this simple steps JHipster has been successfully installed.

Creating an application

Once you have JHipster installed in your system, follow the next steps to create your new application.

  • Create an empty directory where the project is going to be allocated.
    mkdir jhipster-example
  • Go to the new directory.
    cd jhipster-example
  • Create a new application using the following command:
    yo jhipster
  •  JHipster will ask for authorization to send anonymously a report of usage statistics, you can decide this according to your preference.
  • The type of application you want to create, for this post we will choose Monolithic application.

  • Application name:
    • raidentrance
  • Base package name:
    • com.raidentrance.jhipster
  • Authentication type:
    • HTTP Session Authentication (stateful, default Spring Security Mechanism).
  • Data Base type:
    • SQL
  • Data Base to be used in production:
    • MySQL
  • Data Base to be used in development:
    • MySQL
  • Are you planning to use a second layer of cache on Hibernate?:
    • Yes, with ehcache (local cache for a single node).
  • Building tool:
    • Maven
  • Additional Tools:
    • None
  •  Use LibSass for CSS files processing:
    • Yes
  • Internationalization Support:
    • No. (By saying yes you will have to choose a native language and then additional languages you would like to install).
  • Testing framework:
    • Gatling
  • Override .gitignore file:
    • Yes

Once you are done with the initial configuration JHipster will generate the complete application displaying the following message:

Running the application

Up to now we should have a full project ready to be configured, compiled and run. To do this, we require some additional steps:

  • Compile the project using mvn clean install.
  • Create an empty data base for the project.
  • Modify the project configurations in the file application-dev.yml located on src/main/resources/config, in this post you have to fill the DB Url, DB User and password.
  • To execute the project you can run inside your IDE the RaidentranceApp.java as Spring Boot Application or you can use the command mvn spring-boot:run

Now you will be able to open a browser and look for http://127.0.0.1:8080 to retrieve the Welcome page from JHipster containing: In the top-left corner the profile that is being used (dev) and an account tab to register new users or use an existent account.

By default JHipster will generate an admin user with password admin, once you are authenticated you should see the following screen:

This screen will contain different sections described below:

  • Entities: here you will see the entities defined for the project, at the very beginning this is going to be empty since we haven’t created anyone.
  • Account:
    • Settings: Used to modify the username, last name and e-mail.
    • Password: Used to change the current user password.
    • Sessions: Shows the active sessions.
    • Sign Out.
  • Administration:
    • User management: Will allow you to view an modify your user accounts.
    • Metrics: Shows application metrics such as the number of http requests, use of the REST web services, cache and use of datasource.
  • Health: Shows the checks defined by the application.
  • Configuration: Shows all the current configurations for the application.
  • Audits: Allows you to enable and check entity audits.
  • Logs: Used to change the log levels on the application.
  • API: Shows the web services in the application together with a brief description on how to use each one of them.

All the features showed were created following development best practices by only executing one command and completing a quick wizard.

On the next post we will explain how to create new Web Pages , the idea will be to create a complete application piece by piece and in just a couple of minutes.

Author: Alejandro Agapito Bautista

Twitter: @raidentrance

Contact:raidentrance@gmail.com

Translated By: Oscar Camacho – melchior01

Contact: adamfirstangel@hotmail.com

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