Objetivo

Muchos proyectos y productos hacen uso de los Dashboards para la representación de los datos. Sin embargo, las necesidades no se quedan únicamente ahí, sino que se requiere poder crearlos y configurarlos desde la propia interfaz de usuario del proyecto.

Por ellos, hemos creado una nueva interfaz válida para todos los entornos en la que los proyectos puedan embeber esta gestión en su propia web.

¿En qué consiste este activo?

El activo de Dashboard está compuesto por los siguientes elementos:

Un proyecto Vue, que incluye:
- Integración nativa con el Identity Manager de la Plataforma.
- Despliegue del distribuible como aplicación web de la Plataforma.
- Uso de los componentes de Aplicación y Realm de la Plataforma para la securización.
Un archivo de configuración en formato JSON, para que los proyectos la puedan adaptar completamente a sus necesidades.
Un par de archivos de internacionalización -en español e inglés- para su uso con el activo.
Una guía de uso y configuración de la la aplicación (lo que estás leyendo).

Instalación y uso del activo

Instalarse el activo no es complicado, pero sí cuenta con una serie de pasos que será preciso seguir para poder configurar y dar de alta el activo correctamente.

Generar el archivo de configuración

Este archivo es el que va a configurar el funcionamiento del activo de Dashboard. Se incluye uno de ejemplo, llamado «ASSET_DSH_CONFIG.json», el cual puedes editar para adaptar a tus necesidades.

Aquí se definirán propiedades tales como el nombre del Realm y del ID del cliente a utilizar, el título de la aplicación, el nombre del archivo de internacionalización, las propiedades del logotipo, etc.

También se podrá definir los menús de navegación (con sus iconos correspondientes) así como los permisos a los diferentes roles del Realm:

Este archivo, una vez configurado a tu gusto, debes subirlo a la Configuración Centralizada de la Plataforma.

Creación del Realm

En el archivo de configuración, has indicado todo lo que vas a necesitar, por lo que el siguiente paso será crear un Realm en la Plataforma que contenga los roles que hayas definido (Asset_Admin y Asset_User como ejemplo).

Una vez creados los roles, incluye los usuarios que quieras en cada rol.

En caso de que estés usando Keycloak para la autentificación, entonces tendrás que crear en el propio Keycloak un cliente con el mismo nombre del realm que hayas creado.

Creación del archivo de internacionalización

Otro elemento a generar es el archivo de internacionalización. Para ello, harás uso de los dos archivos de traducciones incluidos en formato JSON.

Si quieres añadir nuevas palabras traducibles a tu aplicación, tendrás que incluirlos en estos archivos. También, si quieres añadir un nuevo idioma (esperanto, por ejemplo), tendrás que generar un JSON nuevo con la misma estructura.

Asociar los recursos

Una vez con todos los archivos preparados, asócialos entre ellos mediante una Aplicación de la Plataforma. Con ello conseguirás «empaquetar» todos los archivos que necesitas en un cajón, controlado por la seguridad del Realm.

Aquí dentro introduce la configuración del activo, así como todos aquellos elementos que puedas necesitar (en el ejemplo hemos incluido un Dashboard de prueba, que a su vez incluye un Gadget que se incorpora automáticamente).

Proyecto web

Por último, sólo faltaría subir el proyecto web a la Plataforma. Previo a ello, tendrás que configurar un par archivos de entorno para definir en el proyecto los endpoints a los que apuntarás.

Para ello, con un IDE cualquiera, abre el proyecto Vue y abre estos dos archivos: .env.production y .env.development.local, los cuales se encuentran en la raíz del proyecto.

Ambos archivos son idénticos, así que los cambios de uno se pueden copiar íntegramente en el otro archivo.

Aquí, indica los nombres de los diferentes elementos que tienes:

El proyecto, que corresponde con la Aplicación de Onesait Platform.
El nombre del archivo de internacionalización.
La URL del entorno de la Plataforma.
El nombre del archivo de configuración.
El tipo de autorización y autentificación.

La única regla de este archivo de entorno es que los nombres de los elementos deben coincidir exactamente; si algo está en mayúsculas, así tiene que estar en la Plataforma.

Hecho esto, puedes montar el distribuible del proyecto Vue, ya sea con npm:

npm run build

O con yarn:

yarn build

Cuando se termine de montar, mete todo el contenido de la carpeta dist en un archivo ZIP, que será lo que subirás a los proyectos web de la Plataforma.

Una vez subido, tendrás tu activo listo para su uso:

Desde el activo de Dashboards, podrás crear, editar, borrar y visualizar Dashboards de manera rápida y sencilla, igual que si te encontrases trabajando desde la Plataforma.

Bundle para creación, visualización y gestión de Dashboards