Introducción

El Template Web es una plantilla base que permite crear de forma sencilla aplicaciones web desplegables como proyectos Web en plataforma simplemente configurando un conjunto de endpoints en los ficheros JS de configuración.

En este tutorial vamos a detallar los pasos, componentes y configuraciones a realizar para desplegar el template web de plataforma junto a dashboards y formularios.

Componentes del ejemplo

En el ejemplo tendremos:

Template web

Es un proyecto Vue.js, 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.

Realm

Permite crear dominios de seguridad para tus aplicaciones y utilizar estos dominios desde tus aplicaciones a través de la autenticación y autorización del Identity Manager

Aplicación

El concepto de Proyecto o Aplicación en Plataforma permite crear un Entorno colaborativo en el que los usuarios de plataforma con diferentes roles pueden crear los conceptos de Plataforma agrupados, permitiendo asignar también un dominio de seguridad, una aplicación web, etc., desde un único punto.

Configuración centralizada

Permite crear un fichero YAML desde el Control Panel en el que indicaremos los distintos componentes del menú para estos roles.

Internacionalización

El servicio de internacionalización nos permite tener gestionados de manera centralizada los ficheros de internacionalización para aplicaciones, dashboards y formularios.

Fomularios

El objetivo de esta funcionalidad es soportar dentro de Onesait Platform el desarrollo de aplicaciones Web con un enfoque NoCode. Así, desde el Control Panel podrás crear formularios, asignarles Entidades (y datasources) y hacer navegación entre formularios.

Dashboards

La plataforma permite la creación y visualización de cuadros de mando sobre la información gestionada por ella, consumibles desde diferentes tipos de dispositivos y con capacidades analíticas y de Data Discovery.

Código del Activo

En este ZIP se encuentra el código del activo del ejemplo.

Para importarlo simplemente descargaremos el archivo y nos dirigiremos a la sección de “Bundle Load“ dentro de “Version Control” en Plataforma.

Una vez en esta página haremos click en el boton “Upload ZIP” y esto tran ello en “Import“.

Pasos a seguir en el ejemplo

Paso 1: Creación de usuarios

El primer paso a seguir será crear los usuarios.

Podemos hacerlo usando una cuenta de administrador de la plataforma desde el Control Panel, desde los Servicios REST de creación de usuarios,…

Estos usuarios deberán tener rol DEVELOPER o ANALYTICS que serán los que generen los formularios y dashboards, así como entidades, datasources y demás componentes necesarios.

Para el ejemplo crearemos un usuario asset_dev que será el desarrollador del contenido y luego otros dos usuarios cada uno con un rol distinto para ver como gestionar y mostrar recursos en función de los roles estos serán asset_user1 y asset_user2.

Paso 2: Creación de Formularios y Dashboards

Accederemos a la plataforma utilizando el usuario con rol DEVELOPER, en el ejemplo sería asset_dev.

Crearemos 3 formularios para el ejemplo

employeeInformationList : listado con la información de los empleados
createEmployeeInformation: formulario para la inserción de datos de nuevos empleados
currentReport: Generamos un pequeño informe a partir de los datos de los empleados.

Podéis consultar este enlace para ver como crear los formularios: ¿Cómo trabajar con OP Forms?

También crearemos un dashboard kpisEmployees donde se mostrarán unos KPIs a partir de la información de los datos de empleados

En esta entrada podéis ver cómo desarrollar un dashboard desde 0.

Paso 3: Creación de los archivos de internacionalización

Crearemos un fichero de internacionalización para el web template y otro para los formularios y dashboard ya que estos se asignan a cada uno de estos componentes.

Los crearemos en inglés y castellano

Paso 4: Creación del Realm

Vamos a crear un Realm para gestionar los permisos a los usuarios por roles.

Para el ejemplo crearemos los roles analyst y manager

y a continuación asignamos a los usuarios los roles.

Estos roles se utilizarán posteriormente en el fichero de configuración centralizado.

Paso 5: Definir un tema personalizado para el Template Web

Con un usuario con rol ADMINISTRADOR podemos crear un tema desde el Control Panel, escribiendo el código CSS que queramos que se ejecute en el web template.

Para esto accedemos a esta entrada del menú, asignamos un identificador y en el apartado CSS podemos incluir nuestro propio código CSS.

Paso 6: Generar el archivo de configuración centralizado

El web template necesita un archivo de configuración centralizado para guardar 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.

Las propiedades más importantes a configurar son:

realmId: el nombre del Realm de Onesait Platform.
clientId: el nombre del cliente del Realm.
secret: el token a utilizar en el cliente del Realm.
title: el nombre que queremos darle al proyecto.
i18n: el nombre del archivo de configuración de idioma.
project: el nombre de la aplicación de configuración centralizada.
productInfo: las propiedades del logotipo del proyecto. Las principales son:
suite: nombre de la suite. Por ejemplo: «suite».
product: el nombre del producto. Por ejemplo: «product name»
productModule: el nombre del módulo del producto. Por ejemplo: «module»
onesait: si se marca, se ocultan las propiedades de product y productModule. Por defecto está en «false».
appVersion: hace referencia a capas de seguridad. Por defecto está a 0.
customizacion: capa de personalización del frontend.
Para mostrar el selector de idiomas, hay que poner a «true» la propiedad «user.showLanguage».
Para cambiar el esquema de colores, se pueden tocar las propiedades CSS de «styles».
navigationAllowed: corresponde al listado de permisos de acceso de los diferentes roles respecto a los componentes del menú lateral (qué ve cada rol del Realm, no cada usuario).
navigation: componentes del menú lateral de la aplicación.

El del ejemplo que estamos construyendo sería así:

[
    {
        "realmId": "asset",
        "clientId": "asset",
        "secret": "Secrettttt",
        "title": "Onesait Platform Tutorial",
        "i18n": "webtemplate_asseti18n",
        "project": "asset_application",
        "productInfo": {
            "suite": "platform",
            "product": "OneOps",
            "productModule": " ",
            "secondary": false,
            "negative": false,
            "simple": false,
            "onesait": false,
            "accentBlock": false
        },
        "pluginsOpts": {
            "filterDatasources": {}
        },
        "appVersion": 0,
        "customization": {
            "showActiveFilters": false,
            "showFilters": false,
            "showFavorites": false,
            "user": {
                "showTheme": false,
                "showLanguage": true
            },
            "styles": {
                "--color-bg-interactive": "#2e4454",
                "--color-border-interactive": "#2e4454",
                "--color-bg-interactive-soft": "#2e4454",
                "--color-bg-hover-2": "#c8e0de"
            }
        },
        "globalFilters": [],
        "initialNavigation": [
            {
                "type": "component",
                "path": "/forms",
                "role": "manager",
                "params": {
                    "formcode": "employeeInformationList-asset_dev"
                },
                "id": "Forms"
            },
            {
                "type": "dashboard",
                "role": "analyst",
                "id": "kpisEmployees"
            }
        ],
        "navigationAllowed": [
            {
                "role": "manager",
                "components": [
                    {
                        "id": "employeeInformationList",
                        "options": {}
                    },
                    {
                        "id": "currentReport",
                        "options": {}
                    }
                ]
            },
            {
                "role": "analyst",
                "components": [
                    {
                        "id": "kpisEmployees",
                        "options": {}
                    }
                ]
            }
        ],
        "navigation": {
            "employeeInformationList": {
                "cssClass": "my-custom-class",
                "langs": {
                    "en": "Employee Information List",
                    "es": "Listado Información Empleados"
                },
                "icon": "file-add",
                "type": "component",
                "componentId": "employeeInformationList",
                "to": "/forms/employeeInformationList-asset_dev/"
            },
            "currentReport": {
                "cssClass": "my-custom-class",
                "langs": {
                    "es": "Informe Actual",
                    "en": "Current Report"
                },
                "icon": "file-filled",
                "type": "component",
                "componentId": "currentReport",
                "to": "/forms/currentReport-asset_dev/"
            },
            "kpisEmployees": {
                "cssClass": "my-custom-class",
                "langs": {
                    "es": "Indicadores Empleados",
                    "en": "Kpis Employees"
                },
                "icon": "review",
                "dashboardId": "kpisEmployees",
                "to": "/dashboard/kpisEmployees"
            }
        }
    }
]

Paso 7: Crear la Aplicación y asociar los recursos

Ahora toca crear la aplicación y asociar los recursos en función de los roles del Realm para restringir el acceso a los componentes por rol:

Para el ejemplo crearemos una aplicación denominada asset_application y la enlazamos con el Realm creado anteriormente

En este paso ya deberíamos tener creados las entidades, el fichero de configuración centralizado, formularios, dashboards,… para poder darle acceso en la aplicación en función de los roles.

Accedemos a los recursos de la aplicación y damos permiso a estos recursos por roles

También habría que incluir las entidades y datasources usados por formularios y dashboards.

Como se puede apreciar se han asignado los formularios al rol manager y el dashboard al rol analyst.

Paso 8: Configurar proyecto web y desplegarlo

Por último, sólo faltaría subir el Template Web a la Plataforma.

Previo a ello, tenemos que configurar un par de archivos con variables de entorno para definir en el proyecto los endpoints a los que apuntarás.

Para ello, partiremos del Template Web subido en Github: https://xxx

Una vez descargado el código, con un IDE abiremos el proyecto Vue y editaremos 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.

Contenido del fichero env.production

# REQUIRED CONFIGURATION
VUE_APP_APPLICATION = assetapp
VUE_APP_PROJECT = asset_application
VUE_APP_PLATFORM = https://lab.onesaitplatform.com
VUE_APP_PLATFORM_I18n = webtemplate_asseti18n
VUE_APP_PLATFORM_CONFIGURATION = ASSETCONFIGURATION
VUE_APP_LOGIN_TYPE = realm
VUE_APP_AUTH_TYPE = KEYCLOAK
VUE_APP_KEYCLOAK_REALMID = onesaitplatform
VUE_APP_KEYCLOAK_CLIENTID = asset
VUE_APP_THEME = ''

# ADDITIONAL CONFIGURATION
VUE_APP_I18N_LOCALE = es
VUE_APP_I18N_FALLBACK_LOCALE = es

# APP ENDPOINTS
VUE_APP_USERINFO = '/controlpanel/api/users'
VUE_APP_USERINFO_REALM = '/controlpanel/api/realms'
VUE_APP_USERINFO_REALM_ELEMENTS = '/controlpanel/api/projects'
VUE_APP_CONFIGURATION = '/controlpanel/api/configurations/'
VUE_APP_USER_AVAILABLE_APPS = '/controlpanel/api/realms/member'
VUE_APP_APPDS = ''
VUE_APP_USERDS = ''

Descripción de las variables

VUE_APP_APPLICATION = (nombre de la aplicación para cuando se despliega para web/nombre_aplicación)

VUE_APP_PROJECT = ( proyecto/ aplicación donde se asigna el realm y los recursos)
VUE_APP_PLATFORM = https://… (host)
VUE_APP_PLATFORM_I18n = (identificador del fichero internacionalizacion)
VUE_APP_PLATFORM_CONFIGURATION = ASSETCONFIGURATION (fichero configuracion centralizado)
VUE_APP_LOGIN_TYPE = realm (tipo de autenticacion puede ser default, realm)
VUE_APP_AUTH_TYPE = KEYCLOAK (poner KEYCLOAK en caso de KEYCLOAK sino cualquier otro valor o dejar vacío)
VUE_APP_KEYCLOAK_REALMID = onesaitplatform (realmid de keycloak)
VUE_APP_KEYCLOAK_CLIENTID = asset (client id de keycloak)
VUE_APP_THEME = '' (tema de plataforma se recogen los css del tema y se aplican en la aplicació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:

Paso 9: Desplegar la aplicación web a través de los Proyectos Web de plataforma

Cuando se termine de montar, meteremos todo el contenido de la carpeta dist en un archivo ZIP.

Que será lo que subiremos a los proyectos web de la Plataforma.

Una vez subido, tendrás el activo listo para su uso.

Paso 10: Acceder a la aplicación web creada

Tras desplegar la webapp ya podemos acceder a ella en la URL: https://lab.onesaitplatform.com /web/assetapp

Al parti del Template Web lo primero que nos aparecerá será la UI de Login, que nos permite tener la aplicación securizada contra el Identity Manager de Plataforma:

Si accedemos con el usuario con rol manager asset_user2, nos aparecerá el menú con dos entradas, una con el formulario employeeInformationList y otra con currentReport

Si accedemos con el otro usuario asset_user1 en el menú sólo tendremos una entrada kpisEmployees

platform-doc-es

Tutorial de uso del Template Web con Formularios (Activo Ejemplo Aplicación Web usando Template Web)