Utilidad de Generación de CRUD Javascript para APIs de Plataforma

Introducción

Con el objetivo de que trabajar con la Plataforma sea cada vez más productivo se ha incorporado esta capacidad. Así, a partir de la versión 2.1.0-gradius, tendremos la opción de generar clientes JS a partir de APIs de plataforma, primero en React JS, y más adelante en Vue JS también.

Esta funcionalidad permite seleccionar las APIs de las que quiero generar el CRUD de esa Ontología, es decir las operaciones de Create, Read, Update y Delete.

Open

Se genera un cliente Javascript que ataca a esas APIS, incluyendo además el Login sobre el Identity Manager de Plataforma.

El contenido del fichero descargado, tras ser descomprimido, es el siguiente:

Open

Lo primero que haremos será descargarnos las dependencias ejecutando dentro del directorio client-js:

npm install

Una vez ejecutado tendremos un nuevo directorio node_modules, con todas las dependencias requeridas:

Ejecución en local

Si queremos ejecutar la app en local, modificaremos el fichero .env.development, que tiene las siguientes propiedades:

REACT_APP_BASE_URL=

• url base de la aplicación

REACT_APP_SERVER=http://localhost:19100

• url del ApiManager de op. En caso de no tener desplegado el ApiManager en local, podemos apuntar al de un entorno en el que sepamos que está desplegado, como https://development.onesaitplatform.com por ejemplo.

REACT_APP_SERVER_OAUTH=http://localhost:21000

• url del servidor oauth. En caso de no tener desplegado el servidor oauth de op en local, podemos apuntar al de un entorno en el que sepamos que está desplegado, como https://development.onesaitplatform.com por ejemplo.

A continuación ejecutaremos el comando

npm start

Este comando lanzará nuestra aplicación y se abrirá en el navegador, redirigiéndonos a la pantalla de Login:

Si no nos redirige a la página principal tras logarnos, deberemos validar que la respuesta del servicio de autenticación no esté siendo bloqueada por política CORS.

Si nos fijamos en el mensaje de error nos indica que nuestro dominio no coincide con el permitido, en este caso ‘http://localhost:3000, http://localhost:3000’. Esto es un error debido a duplicidad de cabeceras. Si nos fijamos en las cabeceras del mensaje de respuesta podemos ver que se está duplicando:

Para resolverlo deberemos comentar las directivas en el fichero de configuración del nginx para el OAuth2-server, ya que çestas son definidas en la aplicación.

Una vez resuelto podemos autenticarnos contra el Identity Manager:

Si las llamadas a las APIs fallan por política CORS, deberemos añadir las cabeceras en la configuración del nginx para el location api-manager.

Ejecución en Producción

En caso de querer generar la app para un entorno productivo modificaremos el fichero .env.production, que tiene las siguientes propiedades:

REACT_APP_BASE_URL=/web/api-client

• url base de la aplicación

REACT_APP_SERVER=https://gradius.onesaitplatform.com/

• url del servidor en el que servimos la aplicación

REACT_APP_SERVER_OAUTH=https://gradius.onesaitplatform.com/

• url del servidor OAuth

PUBLIC_URL=https://gradius.onesaitplatform.com/web/api-client

• url pública de la aplicación

Una vez configuradas las propiedades, desde el directorio padre ejecutaremos el comando

npm run build

El cual es un alias del comando 'react-scripts build', que genera la app en modo producción dentro de la carpeta build.

A continuación generaremos un zip con los contenidos de la carpeta, que será el que subiremos a la plataforma. Dentro del directorio build ejecutamos

zip -r client-react.zip ./*

Para concluir tenemos que crear un nuevo WebProject, al cual le pasaremos el zip que acabamos de generar. Dentro de la pantalla de gestión de WebProjects, creamos uno nuevo:

Como nombre del proyecto debemos indicar el nombre que especificamos en el parámetro REACT_APP_BASE_URL, después del path /web/ :

REACT_APP_BASE_URL=/web/api-client

Tras pinchar en NEW, ya tendremos nuestro WebProject generado y listo para ser utilizado:

Video tutorial

A continuación os dejamos un vídeo tutorial que explica cómo se usa esta herramienta.