| Table of Contents |
|---|
Objetivos
Muchos proyectos y productos hacen uso de los Formularios y Dashboards.
Por lo que en este tutorial pretendemos explicar que pasos, componentes y configuraciones hay que realizar para desplegar el template web de plataforma y que muestre en función del rol del usuario unas opciones de menú u otras, estas opciones de menú serán los distintos formularios, dashboards o componentes.
Componentes Necesarios
El ejemplo consta de tres formularios y un dashboard, se crearán dos usuarios en plataforma. Luego en el realm se le asignara un rol a cada uno de estos usuarios y en el fichero de configuración centralizado se indicarán los distintos componentes del menú para estos roles.
| Table of Contents |
|---|
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 puntodesde 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 potentes cuadros de mandosobre la información gestionada por ella, consumibles desde diferentes tipos de dispositivos y con capacidades analíticas y de Data Discovery.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 debería ser a seguir será crear los usuarios.
Para esto si contamos con una cuenta de administrador de la plataforma podemos crear todos los usuarios accediendo a esta entrada
...
Sino pues cada usuario debería darse de alta o bien desde la pantalla de login del control panel o a partir de servicios rest del API del control panel de plataforma
...
Deberiamos crear los usuarios con rol developer o analytics que serán los que produzcan 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 funcion 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 DEVELOPER, en el caso del ejemplo sería asset_dev.
crearemos tres 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.
Se puede Podéis consultar este enlace para ver como crear los formularios.: ¿Cómo trabajar con OP Forms?
y También crearemos un dashboard kpisEmployees donde se mostrarán unos kpis KPIs a partir de la información de los datos de empleados
También dejamos el enlace con la información para poder En esta entrada podéis ver cómo desarrollar un dashboard desde 0.
Cada uno de estos elementos tienen entidades y datasources asociados.
Paso 3: Creación de los archivos de internacionalización
Crearemos un fichero de internacionalización para el web template y otro u otros para los formularios y dashboard ya que estos se asignan a cada uno de estos componentes de manera independiente podemos crear un fichero para todos los formularios y dashboards o varios y luego utilizarlos bajo nuestro criterio.Para el ejemplo crearemos un archivo para el web template y otro para el resto.
...
Los crearemos en ingles inglés y castellano
...
Paso 4: Creación del Realm
Como se indicaba anterior mente tendremos que Vamos a crear un Realm para gestionar los permisos a los usuarios por roles.
En primer lugar creamos Para el ejemplo crearemos los roles en este caso para el ejemplo analyst y manager
...
y acontinuación 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 en el control panel ADMINISTRADOR podemos crear un tema desde el Control Panel, escribiendo el código css 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 cssCSS.
Paso 6: Generar el archivo de configuración centralizado
El web template necesita un archivo de configuracion 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.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
[
{
"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 Realm para restringir el acceso a los componentes por rol.:
...
La denominaremos para Para el ejemplo crearemos una aplicación denominada asset_application La 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 funcion función de los roles.
Accedemos a los recursos de la aplicación y damos permiso a estos recursos por roles
...
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 web template Template Web a la Plataforma.
Previo a ello, tendrás 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 cualquiera, abre abiremos el proyecto Vue y abre editaremos estos dos archivos: .env.production y .env.development.local, los cuales se encuentran en la raíz del proyecto.
...
| Code Block |
|---|
# 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)
...
O con yarn:
| Code Block |
|---|
yarn build |
...
Paso 9: Desplegar la aplicación web a través de los Proyectos Web de plataforma
Cuando se termine de montar, mete meteremos todo el contenido de la carpeta dist en un archivo ZIP, que .
...
Que será lo que subirás subiremos a los proyectos web de la Plataforma.
...
Una vez subido, tendrás tu el activo listo para su uso.
Paso 10: Acceder a la aplicación web creada
Tras desplegar la webapp desde el control panel ya sólo nos quedaría acceder a ella y comprobar que para los distintos usuarios se ve tal y como lo hemos configurado por lo tanto accederiamos desde el listado de webapps clicando sobre elPodemos comprobar que la primera pantalla es la de login, por lo tanto ya vemos que sin haber tenido que crear una aplicación con código tan sólo usando la ya existente y configurandola tenemos una aplicación securizada en este caso contra keycloack.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_user2El menú que aparece es el definido , nos aparecerá el menú con dos entradas, una con el formulario employeeInformationList y otra con currentReport
...