Este codelab está planeado para ver una forma en que se puede crear un proyectos de tipo gateway para una aplicación basada en APIs.

Requisitos:

• NodeJS LTS
• Git
• Generador de JHipster
• Api publicada en apicurio (deseable)
• Docker (opcional)

Para poder crear el proyecto, primero se debe crear un directorio, posicionarse en él y ejecutar el comando de JHipster.

mkdir appGw
cd appGw
jhipster app --jhi-prefix core --skip-user-management --skip-fake-data

Una vez iniciado el generador de JHipster, es necesario seleccionar como tipo de proyecto gateway.

Se debe indicar el nombre del proyecto.

Se debe especificar el puerto que va a usar el gateway, este no debe chocar con ninguna otra aplicación que se tenga en el ambiente local.

Se debe indicar la estructura de paquetes a utilizar en el proyecto.

Se debe indicar el tipo de service discovery a utilizar.

Se debe indicar el tipo de autenticación a utilizar.

Los proyectos gateway típicos de JHipster están divididos en dos proyectos:

1. Proyecto Spring Boot :: Proyecto que tiene la lógica de negocio y el gateway para los microservicios.
2. Proyecto NodeJS :: El front de la aplicación.

En Conacyt se optó por usar solo el gateway de microservicios y no tener lógica de negocios en el proyecto Spring Boot.

Por tal motivo, se debe seleccionar No Database:

Debido a que el proyecto gateway no tendrá base de datos, se debe seleccionar No Cache:

Es posible seleccionar el administrador de proyecto java (Maven o Gradle).

El generador JHipster puede agregar frameworks extras al proyecto; sin embargo, para esta configuración no se agregará nada extra:

El generador de JHipster permite seleccionar tres frameworks para el front:

1. Angular
2. React
3. Vue

Vue como framwwork front

En Conacyt se usa Vue como framwwork front, por tal motivo se debe seleccionar esa opción:

Administrador UI

A partir de la versión 7 de JHipster se permite la opción de eliminar el administrador de JHipster.

Si no se está seguro de la necesidad del administrador, se recomienda dejar la opción defautl.

Tema usado en el front

JHipster incluye varios temas para usar en el front, sin embargo, en Conacyt ya se tiene un tema oficial. De tal manera que se dejará la opción default.

Se agrega el soporte de internacionalización al proyecto.

Se define español como lenguaje principal.

Se define inglés como lenguaje secundario (se pueden seleccionar más lenguajes)

Por default, el proyecto tiene soporte con JUnit; sin embargo, como este proyecto no tendrá lógica de negocia en el proyecto Spring Boot, no se seleccionará nada extra.

JHipster tiene la posibilidad de agregar otros generadores, sin embargo, no se seleccionará nada extra.

Una vez que se contesta la última opción, el generador creará el proyecto, creará un repositorio git y se compilará una primera versión.

Al concluir las operaciones, deberá salir una pantalla como la siguiente.

La estrategia utilizad para unir al microservicio y el front, es por medio del API del microservicio. Para esto, se utiliza un generador que crea los servicios que se comunican con los endpoints definidos en el API.

Agregado de dependencias

En la raíz de proyecto se ejecuta el siguiente comando:

npm install --save-dev @openapitools/openapi-generator-cli

Declaración del generador

En el archivo package.json, es necesario agregar un nuevo script:

{
  "scripts": {
    "client:generate": "npx @openapitools/openapi-generator-cli generate -i <URL_API> -g typescript-axios -o src/main/webapp/app/shared/microservice-client"
  }
}

Generación de prueba

Una vez declarado el script de OpenAPI Generator, se puede ejecutar manualmente la creación del código.

npm run client:generate

Esto creará una serie de archivos en src/main/webapp/app/shared/microservice-client.

Reconfiguración de prettier

Para evitar que git detecte cambios no reales cada vez que se genera el cliente, se debe evitar que prettier formateé el código generado.

En el archivo .prettierignore se debe agregar la ruta del código generado:

node_modules
target
build
package-lock.json
.git
.mvn
gradle
.gradle
src/main/webapp/app/shared/microservice-client

Una vez que se tenga endpoints declarados en el archivo api.yml del proyecto microservicio, se puede usar en el proyecto front.

Declaración de servicio

Toda la configuración es dentro del archivo src/main/webapp/app/main.ts.

Importar el servicio

Se agregan los imports necesarios.

import { Configuration, PetApi } from './shared/microservice-client';

Declarar la configuración del path en el gateway para microservicio

Se define un configuración que se pueda reusar en el resto de los servicios.

export const apiMsConfiguration = new Configuration({
  basePath: '/services/appms/api',
});

Declarar el servicio

Se agrega el servicios a los objetos administrador por Vue.

new Vue({
  provide: {
    petApi: () => new PetApi(apiMsConfiguration)
  },
}

Uso del servicio

Dentro de alguno módulo, el servicio se puede usar como cualquier otro servicio:

import { PetApi } from './shared/microservice-client';

@Component
export default class UserPet extends Vue {
  @Inject('petApi')
  private petApi: () => petApi;

  public ejemplo() {
    this.petApi().getPets()
      .then(data => { /* hacer algo con el objeto data */ })
      .catch(err => { /* hacer algo con el objeto err */ });
  }
}

Después de crear el proyecto, es recomendable revisar el codelab de adecuaciones extras a proyectos de gateway para realizar cambios requeridos en los proyectos de Conacyt.

Por otro lado, se recomienda tener en cuenta lo siguiente:

Integración continua

Al proyecto se le deberá agregar un proceso de integración continua

• DroneCI
• GitlabCI

Cambios en la arquitectura

Cualquier cambio en la arquitectura (uso de otras tecnologías, cambios en la estructura del proyecto, cambios en el tipo de seguridad, etc.); deberá ser consultado y autorizado por el equipo de arquitectura.