angular openapiangular swagger-codegen
jolugama.com

Swagger-codegen - Genera interfaces de API Swagger a Angular

Tutorial para obtener todas las interfaces de un API generado por swagger y expórtalo de forma instantanea en un proyecto Angular.

Mediante la herramienta swagger-codegen, generamos todas las interfaces de un API que disponga de swagger en un solo click, rápido y sencillo. Si no tienes ninguna ahora no te preocupes, usaremos una gratuita online.

Swagger Codegen te ayuda en la genereción automática de modelo y servicios, olvida escribirlo a mano.

1. ¿Qué es Swagger?

Swagger es el marco de herramientas más grande del mundo para la especificación OpenAPI (OEA). Es el estándar de facto para las API reutilizables y mantenibles. El conjunto de herramientas facilita enormemente el dolor de documentar e interactuar con las API.

2. Diferencias entre Swagger y openApi

OpenAPI = Especificación.

Swagger = Herramientas para implementar la especificación.

3. Descarga swagger-codegen

La lista de lenguajes y marcos compatibles está creciendo constantemente: En nuestro caso, nos interesesa el generador de código typescript-angular.

Necesitas el generador compilado: swagger-codegen-cli.jar.

Para descargar la última versión: swagger-codegen-cli

Para más informacion: github.com/swagger-api/swagger-codegen

4. Ejemplo de api

En este artículo, usaremos el siguiente api, que tiene su propio swagger: api.angular.schule

Lo puedes explorar via Swagger UI

5. Generar código con swagger-codegen

Swagger-codegen dispone de muchos argumentos, los mínimos son:

Tan solo necesitas indicar el jar de codegen-cli, la url donde se aloja swagger.json, indicar que el tipo de generado es typescript-angular y la ruta destino es x.

java -jar ./swagger-codegen-cli-2.4.1.jar generate -i https://api.angular.schule/swagger.json -l typescript-angular  -o ./angular_api_client

Con esto ya tendrás una nueva carpeta angular_api_client con todos los modelos del api, junto a sus servicios.

6. Publicar el package a NPM

npm init
npm install
npm run build
npm publish dist --access=public
npm install nombreDelNpmInit --save

7. Referencias

angular.schule/blog/2018-04-swagger-codegen

 
... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.