Tutorial: Crea tu propio proyecto web con Onesait Platform

Introducción 

Plataforma integra funcionalidades para la generación de aplicaciones, aportando facilidades para la creación de sistemas web a partir de una plantilla base. Este Template Web base nos permite crear de forma sencilla aplicaciones web desplegables como proyectos Web en la plataforma mediante No code.

En este tutorial, vamos a detallar los diferentes componentes y configuraciones a realizar para desplegar nuestro propio proyecto web. Veremos la generación de un proyecto, donde estarán embebidos diferentes recursos, como dashboards y/o formularios, que al mismo tiempo enriquecerán al template web que expondrán la información en base a una autenticación por roles.

Componentes del ejemplo generación de aplicaciones o proyectos

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, aplicación web, etc. desde un único punto.

Para este ejemplo se utilizarán diversos servicios de plataforma, para conseguir una aplicación completa, con diversos recursos y gestión de usuarios por roles, entre ellos:

  • Template web: proyecto en Vue.js, el cual incluye una integración completa con plataforma.

  • Realm: los cuales permiten crear dominios de seguridad para nuestra aplicación

  • Configuración centralizada: Permite la configuración de componentes del menú del template web y el acceso por roles o usuarios desde un fichero YAML creado en el Control Panel

  • Internalización: nos permite tener gestionados de manera centralizada los ficheros de internacionalización para aplicaciones, dashboards, formularios, menús…

  • Dashboard: 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.

  • Formularios: 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.

  • Aplicaciones web mediante Git: Sistema que nos permite gestionar nuestro proyecto web, pudiendo desde editar el proyecto hasta compilarlo y desplegarlo automáticamente.

A continuación, veremos en detalle la generación de cada uno de ellos, disponiendo finalmente nuestro propio proyecto web gestionado y enriquecido por Onesait Platform.

Pasos a seguir en el ejemplo 

Paso 0: Punto de partida

Como punto de partida y antes de comenzar a generar todos los recursos, descargaremos el template web de plataforma en nuestro local.

Donde podremos montar el distribuible del proyecto Vue2, para ello realizaremos la compilación del mismo:

npm install
npm run build

O con yarn:

yarn build

 

Nota: Onesait Platform template web es compatible con Node v16

 

Una vez configurado los recursos y generado nuestro proyecto, dispondremos una web similar a la siguiente:

 

Como se aprecia en la imagen, la plantilla se estructura en un menú de acceso en el lado izquierdo y una zona centrar para mostrar los recursos de plataforma asociados, desde aquí podremos apreciar finalmente lo que veremos y/o no podremos ver dependiendo de nuestros usuarios, roles o elementos de la plataforma añadidos al proyecto.

La plantilla también añade por defecto la gestión de usuario y una sección para notificaciones:

 

 

 

Realizaremos paso a paso la creación de los recursos en plataforma con la creación y despliegue de nuestro proyecto web, donde podremos ver como generar un sistema web sobre este template, consiguiendo nuestra propia app web.

Paso 1: Generación de Roles en la aplicación.

Para la gestión de permisos por usuarios en una aplicación se puede gestionar usuario a usuario o generar una configuración específica mediante los Realms de plataforma.

Desde el menú de plataforma Development>my realms podemos crear nuestra propia jerarquía de permisos, definiendo todos los roles necesarios para nuestra aplicación.

 

Inicialmente accederemos a un listado de los realms generados previamente, donde podremos editarlos en cualquier momento y/o crear uno nuevo. En nuestro caso, generaremos un nuevo realm desde la propia opción de creación

En la creación de un nuevo realm, debemos de definir un identificador para nuestro realm (en este caso helsinki_realm) y un secret sencillo (helsinki). También definiremos todos los roles posibles que se gestionarán finalmente en la app. En este caso añadiremos dos roles diferentes admin y rol analyst y crearemos nuestro realm.

Posteriormente generado nuestro Realm, podremos editarlo y asignar los usuarios de la plataforma que queremos con acceso a nuestra aplicación, asociando los roles específicos a cada uno de ellos. (más adelante, en la configuración centralizada y en proyectos, veremos como daremos acceso específico a cada rol o usuario)

Esta gestión, también nos permite ver las aplicaciones donde nuestro realm este asociado o asociar los propios roles de nuestro realm a otro ya generado, posibilitando enlazarlo directamente con múltiples aplicaciones, .etc.

Puedes encontrar más información sobre como trabajar con los Realms aquí

Paso 2: Generación de Datasource

Como base de información para los siguientes elementos que vamos a generar, crearemos nuestro propio datasource sobre una instancia, y así posteriormente poder enlazarlos con los recursos.

Para ello nos dirigiremos al menú de la plataforma a Visulization & GIS> My Datasources.

Desde este punto dispondremos de un listado de todos aquellos datasources en los que tenemos permisos y posibilita la creación de nuevos

 

Mediante el wizard podremos generar fácilmente una query para nuestra entidad (helsinkiPopulation)

 

 

Donde podremos realizar ejecutar nuestras queries antes de crear el datasource, validando así la estructura final que necesitaremos para generar el resto de recursos sobre nuestra consulta.

 

 

Para el apoyo a la generación de queries, la plataforma añade la funcionalidad Query Tool.

Accesible desde el menú lateral de plataforma Tools>Query Tool:

 

 

Esta herramienta nos facilita la generación queries más completas mediante el query wizard y nos permite no solo compilar y ejecutar nuestra query, sino que también podremos exportar los resultados en diferentes formatos como: fichero plano, json o csv.

 

 

Esta herramienta, dispone de una integración de IA generativa para el apoyo a la creación de consultas.

 


Paso 3: Generación de Dashboard

Como primer elemento a integrar en nuestra aplicación, utilizaremos un dashboard sencillo, aunque como veremos, disponemos de múltiples elementos para agregar a nuestra aplicación.

 

Desde el apartado Visulization & GIS>My Dashboards podremos generar nuestro propio panel de control, en este caso generaremos un dashboard sencillo aun teniendo infinidad de posibilidades, como podemos ver en detalle en la web en Dashboard Engine

 

 

En el apartado “My Dashboards” encontraremos un listado con todos aquellos a los que tengamos acceso, ya sea porque seamos propietarios o tengamos permisos sobre dashboards de terceros. Del mismo modo que todos los elementos, podremos crear un nuevo dashboard desde la propia opción arriba a la derecha.

De manera inicial configuramos el propio dashboard que llamaremos helsinki_population, añadiendo su información básica y tags, del mismo modo tendríamos la opción de añadir librerías y scripts para generar un formato propio. Una vez demos a crear, podremos entrar en el espacio de trabajo del propio dashboard y editar, añadiendo elementos al mismo.

 

Una vez creado nuestro dashboard, se habilitará un canvas de edición para poder componer nuestro panel de control mediante diversos elementos o gadget (ya creados en plataforma o con la posibilidad de generarlos al momento).

En este caso generaremos un gadget demográfico de la población de Helsinki, donde añadiremos un nuevo elemento para nuestro dashdboard.

Desde el selector de añadir elemento nos habilitará una sección con los diversos gadget y estilos, que podremos añadir mediante drag & drop.

En nuestro caso generaremos un gadget tipo bar, que al arrastrarlo al canvas nos dispondrá un wizard para completar el gadget, donde:

Asociamos el datasource que generamos previamente (helsinki_datasource).

Nota: Por ahora no entraremos en la parte de internacionalización de los elementos de la plataforma, pero a este mismo dashboard le añadiremos el fichero correspondiente para el cambio de idioma. (ver más Paso 5: ficheros de internacionalización).

Quedémonos únicamente con la identificación de los labels Name que completamos en la generación de los elementos, como X axis o Y axis (siendo estos parámetros de la estructura de la información a mostrar)

 

Vamos desplegando todas las opciones del wizard y añadiendo la información que queremos mostrar, manteniendo el literal de los nombres para posteriormente su internacionalización, helsinki.year, helsinki.population, … y enlazando en ‘Field’ el parámetro correspondiente de las instancias recogidas por el datasource.

La generación de la muestra representada en el eje Y dispone de dos configuraciones. Una primera en que se añaden los diferentes datos a mostrar:

Posteriormente, en la opción Data, enlazaremos los identificadores del eje Y con el dato a representar, permitiéndonos configurar cada uno de ellos de manera independiente, seleccionando max, min, color, etc. De este modo añadiremos todos los ejes Y configurados anteriormente.

Finalmente, a partir de la entidad de la propia plataforma, hemos podido generar una representación en tiempo real de la información registrada en la BBDD mediante pasos sencillos y bajo métodos No Code

Paso 4: Generación de Formularios

Como segundo elemento en nuestra aplicación, añadiremos dos formularios, uno con un enfoque informativo y un segundo con la posibilidad de insertar datos en una entidad.

Gracias a la plataforma, la creación de estos formularios es muy sencillos y con múltiples capacidades y con una libertad de configuración muy amplias, como podemos ver en detalle: ¿Cómo trabajar con OP Forms?

Desde VISUALIZATION & GIS > My Forms podremos generar nuevos formularios.

A continuación, se nos abrirá un listado con todos los formularios a los que el usuario tenga acceso y nos posibilitará la opción de generar uno nuevo como cualquier elemento en la plataforma, el cual nos habilitará un espacio para la creación de un nuevo formulario

El cual incluye una paleta de herramientas con diversos elementos para poder adjuntar a nuestros formularios, incluyendo sistemas básicos como añadir un ‘Text Area’ o más avanzamos como por ejemplo generación de listas

 

El propio espacio de trabajo, nos añade una sección de consejos o tips para trabajar en nuestro propio formulario, contando con un apoyo en su generación y edición.

Para este ejemplo, generaremos dos formularios donde iremos definiendo los nombres similares al resto de recursos generados para nuestra aplicación, facilitando su posterior internacionalización [ver Punto 5: ficheros de internacionalización].

Formulario de escritura

El primer formulario (helsinki_population), lo generaremos de manera automática, a partir de la estructura de la entidad HelsinkiPopulation, únicamente con enlazar la entidad podemos selección el botón ‘crear formulario desde entidad’ y se nos generará un formulario por defecto, editable y ampliable.

 

En la imagen se muestra el formulario auto generado, que en este caso únicamente se han estandarizado los nombres de los campos para facilitar posteriormente la internacionalización.

La funcionalidad del botón generado sirve por defecto para realizar inserciones/actualizaciones en la entidad correspondiente, pero el evento desencadenante es completamente editable.

Una vez generado el formulario, podremos gestionarlo desde la sección de forms, donde nos aparecerá el código asociado al mismo para su integración con otros formularios. (<form_name-user_name>)

Formulario de lectura

El segundo formulario que generaremos será exactamente similar al anterior, exceptuando que modificaremos los elementos del formulario por defecto para que únicamente nos muestre a futuro la información de un registro de la entidad seleccionada, en este caso HelsinkiPopulation.

Para ello, una vez generado el formulario, accederemos a la edición campo por campo e iremos renombrándolos para la estandarización de la internacionalización y editaremos uno a uno.

En este caso, deshabilitando el input del elemento para que únicamente sea de lectura

Finalmente, editaremos el botón por defecto y modificaremos un poco su estilo y funcionalidad, ya que nos devolverá a la página anterior de la que procedamos. Añadiremos una acción de redirección y enlazamos en “Form Code” el código de nuestro formulario principal (helsinki_form-demo_developer) para su redirección.

Terminando en la creación de un formulario de visualización con opción de retorno.

Formulario Table Pag

En un último formulario que llamaremos helsinki_form, nos centraremos en la creación de un listado, con una funcionalidad CRUD sobre la entidad asociada, donde terminaremos enlazando con los dos formularios anteriores.

En este caso no autogeneraremos nuestro formulario, sino que utilizaremos las herramientas que nos ofrece el editor como Table Pag (desde el menú Data>Table Pag), añadiéndolo al canvas mediante drag & drop.

Justo al añadir el elemento al formulario, se nos abrirá la configuración del mismo, donde definiremos los diferentes campos, como el nombre (helsinki_population) y el mismo datasource que utilizaremos (helsinki_datasource). También podremos ir añadiendo diversos campos a nuestra tabla (donde mantenemos la estandarización de los label para la internacionalización)

La propia herramienta nos irá mostrando una preview ante cualquier cambio que hagamos en la configuración, pudiendo ajustar de la mejor manera nuestro formulario final.

El Table Pag nos permite también añadir acciones sobre la propia tabla, donde fácilmente podremos generar la acción de delete sobre un dato mediante su identificador único (en este caso _id$oid) e indicando que es un botón de eliminar.

También, podremos asociar otras opciones, como la edición o creación mediante acciones enlazadas con otros formularios. Por ello, este nuevo elemento lo asociamos al código (que no al nombre) del anterior formulario creado, en este caso helsinki_crud-demo_developer

Como podemos observar en la configuración final, la creación de un formulario es sencilla gracias a un método No Code por parte de plataforma, donde añadiremos el code en el apartado “FormCode”.

 

De este modo, dispondríamos de una tabla con la funcionalidad básica para eliminar o editar registros.

También queremos poder visualizar un dato desde esta misma tabla, para ello generamos otra funcionalidad con el ico del ojo y en este caso enlazamos al código del formulario que hemos generado solamente para visualizar la información, en nuestro caso helsinki_view-demo_developer

 

Nota: cada funcionalidad que añadas se concatenará con la siguiente en el lado izquierdo, por lo que deberás de tener claro el orden en el que quieras mostrar las diferentes opciones

Por último, agregaremos un botón, el cual nos permita añadir infromación. Para ello arrastramos el elemento Button desde la paleta de herramientas.

 

Lo dispondremos, modificando su label e introduciendo la redirección al formulario en Form Code , en este caso sería helsinki_crud-demo_developer.

 

 

Para en este caso, el botón nos enviará sin información añadida, al formulario crud, permitiéndonos insertar un nuevo registro.

 

Finalmente, una vez generados y guardados las diversas funcionalidades, dispondremos la gestión de los tres formularios:

Pudiendo así, visualizar directamente helsinki_form y disponer de toda la funcionalidad centralizada, como:

 

Añadir registro

 

El formulario nos redirigirá al formulario enlazado (helsinki_crud), con un registro vacío para la inserción de un nuevo dato.

 

Visualizar registro

 

Nos enlazará con helsinki_view y podremos ver la información del registro seleccionado:

 

Editar registro

Donde el formulario nos redirigirá al formulario helsinki_crud con la información del registro actual, pudiendo realizar modificaciones sobre el mismo.

 

Eliminar el registro

Con el cual podremos eliminar el registro de la base de datos a partir de su identificador único.

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

La misma plataforma nos permite generar ficheros de internacionalización para posibilitar el cambio de idioma en elementos de la plataforma

Para ello, desde DEV TOOLS>My Internationalizations, podremos generar los ficheros de internacionalización agrupando diversos idiomas.

 

Accederemos a la gestión de internacionalizaciones, donde se agrupan en un listado aquellos ficheros en los que tengamos acceso (lectura o escritura), también desde este punto es desde donde podremos generar nuestro nuevo fichero de internacionalización para el proyecto desde

 

 

Para este ejemplo, generaremos un único fichero para todos los elementos visuales que dispongamos en nuestro proyecto, en este caso constaría del web template, el formulario y el dashboard que queremos añadir y todos aquellos idiomas que queramos implementar en nuestra aplicación.

Por otro lado, añadiremos el fichero genérico de OP Template web.

 

Internacionalización de los recursos.

Al crear un nuevo fichero, se nos abrirá una plantilla para completar tanto los tags principales para su identificación, donde podremos añadir múltiples lenguajes para su intercambio en nuestro proyecto web.

En este paso, vamos a generar estos archivos de internacionalización para que nuestros elementos se adapten y muestren la información adecuada al usuario. Para ello añadiremos un JSON por cada idioma con la siguiente estructura:

 

 

Como se ve en el ejemplo, mantenemos las mismas identificaciones que hemos utilizado a la hora de generar nuestro formulario. De aquí la importancia de estandarizar la creación de recursos para la reutilización y adaptación a futuro, reduciendo los tiempos de desarrollo y manteniendo una calidad del mismo.

 

Fijamos los literales de los froms para disponerlo homogéneos a los del dashboard.

Una vez guardado, podremos editar nuestros diferentes recursos (formularios, dashboard, etc) y asociar nuestro fichero de internacionalización. Una vez hecho, podremos visualizar nuestro recurso donde podremos observar el intercambio de los valores definidos.

Internacionalización template web

Por último, deberemos de añadir la internacionalización a nuestro template web, para poder modificar el idioma de la interfaz de usuario, como las cabeceras, pies de página o gestión del propio usuario.

 

Para ello, generaremos un nuevo fichero que llamaremos helsinki_web_en_esp y añadiremos la configuración para nuestra web.

En este caso se adjunta la configuración para el Template web de OP, el cual podríamos adaptar para un nuevo template.

 

Paso 6: Fichero de Configuración centralizada

El web template necesita un archivo de configuración centralizado, el cual almacena las propiedades como el nombre del Realm , Id del cliente a utilizar, accesos de menús, título de la aplicación, nombre del archivo de internacionalización, propiedades del logotipo, etc.

Para generar un fichero centralizado, tendremos que ir a DEV TOOLS > My configurations

 

Accederemos directamente al listado de todas las configuraciones a las que tengamos acceso y desde donde podremos generar una nueva configuración mediante la opción de creación

En este ejemplo definimos una configuración como helsinki_conf, enlazando a una configuración externa (custom) y al entorno por defecto (siendo este la propia plataforma).

La configuración es muy amplia gracias a la posibilidad de editar completamente el fichero de configuración, desde definir los menús de navegación (con sus iconos correspondientes) así como los permisos a los diferentes roles.

En este caso, introduciremos toda la gestión que hemos comentado, definimos paso a paso todos los campos que se deben de modificar para trabajar con el Template Web de OP. Ya que este fichero es editable y adaptable para cualquier template que pueda generar un usuario.

Definición fichero de configuración centralizada.

Apartado principal - configuración con plataforma, donde deberemos de adaptar los diferentes valores como:

  • 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. 

 

En nuestro caso completando los principales:

 

 

De manera adicional dispondremos de campos ajustables a un producto específico, versionado, vistas, etc. como:

 

  • 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. 

  • GlobalFilters: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». 

 

Por último, definiremos los parámetros de navegación gestionando el acceso por roles, donde daremos permiso completo al rol admin y visualización al rol analyst:

initialNavigation: Aquí definiremos el punto de entrada en la app para cada tipo de rol, en nuestro caso el administrador

 

navigation: Componentes del menú lateral de la aplicación. Nuestro ejemplo constará de dos accesos, uno para el dashboard y otro para el formulario. (helsinki_dashboard y helsinki_form) A ambas definiciones les agregaremos la información tanto del ID del componente asociado de plataforma, como el end point del recurso como /forms/helsinki_form-demo_developer

 

 

navigationAllowed: corresponde al listado de permisos de acceso de los diferentes roles respecto a los componentes del menú lateral definidos anteriormente. Utilizando los dos roles definidos anteriormente podríamos generar permisos para admin completos, mientas que al rol analyst únicamente tendrá acceso para ver el dashboard.

 

Finalmente, el ejemplo que estamos construyendo quedaría así: 

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 generar nuestro propio proyecto accederemos a DEVELOPMENT>My Applications.

Accederemos directamente al listado de los proyectos a los que tengamos acceso, ya sea completo o solo de visualización con sus correspondientes acciones. Del mismo modo podremos generar un nuevo proyecto o aplicación desde

En este caso denominamos al proyecto como helsinki_project, indicando su descripción y asociando un logo a nuestra aplicación

Una vez generada la aplicación, podremos editarla y gestionar diversas configuraciones, como:

Gestión de usuarios, donde tenemos la opción de añadir usuarios de plataforma de manera independiente o también podremos enlazar un Realm creado anteriormente, facilitando la gestión multiusuario.

En nuestro caso, enlazamos el realm generado anteriormente helsinki_realm, donde nos aparecerá los dos roles definidos.

Agrupación de elementos: La segunda configuración del proyecto nos permitirá generar un sistema colaborativo gracias a la facilidad de compartir elementos entre usuarios en un mismo proyecto. Pudiendo añadir, modificar o eliminar elementos en cualquier momento de vida del mismo.

En este paso ya deberíamos tener creados las entidades, el fichero de configuración centralizado, formularios, dashboards… para poder dar permisos en la aplicación en función de los roles definidos. Por lo que uno a uno, añadiremos los elementos asociándole los permisos correspondientes por el rol asociado al realm.

En este ejemplo, deberemos de añadir los recursos visuales, pero también añadiremos aquellos de configuración para crear un proyecto colaborativo en la evolución del proyecto, permitiendo al analyst algunas gestiones de los recursos.

Una vez añadidos todos los elementos o recursos de la plataforma, dispondremos de una visión de todos ellos y los permisos asociados.

 

Al añadir algunos recursos, la propia plataforma te añadirá aquellos otros recursos que estén asociados al principal como, por ejemplo: instancias, datasources, etc.

 

Aplicación Web: Finalmente, a la aplicación le podemos asociar una aplicación web ya creada o generar una nueva. En este caso generaremos una nueva app web que llamaremos helsinki_web

 

 

Terminaremos de configurar nuestra aplicación web mediante la opción Git, como veremos en el Paso 8.

Paso 8: Gestión APP Web

Desde plataforma también podremos gestionar completamente nuestra aplicación web desde DEV TOOLS>MyWebApps. Donde tendremos acceso a un listado con todas las aplicaciones web y la posibilidad de generar nuevas desde

 

 

Para la gestión de la app web, dispondremos de dos opciones, una subida directa de un fichero zip, donde tengamos alojada la propia app web. Y una segunda posibilidad para la gestión de la misma app web desde un repositorio GIT.

 

En este workshop, seguiremos la gestión mediante git y añadiremos la información del repositorio y el token de acceso.

 

 

Adicionalmente, podremos gestionar también proyectos NPM, pudiendo configurar diferentes comandos.

 

La siguiente configuración mostrada, nos permitirá lanzar el comando ‘build’ (npm run es añadido por la misma plataforma) del proyecto y dispondrá el fichero final (zip) en ‘dist’ (siendo este el directorio por defecto generado en la compilación con el proyecto. Esta opción habilita a la propia plataforma no solo a generar y almacenar el fichero zip del proyecto, sino también descomprimirlo y desplegarlo automáticamente como veremos más adelante.

 

 

Una vez configurado nuestra app web, podremos acceder a la opción Git de las app web desde las opciones ampliadas en el listado de las app web.

Nos abrirá de un editor con un árbol de los ficheros, que mostrará el repositorio enlazado al proyecto Git. Desde donde podremos mantener el proyecto realizando cambios, añadir nuevos ficheros, actualizaciones de los mismos y hasta podremos compilar y desplegar el proyecto.

Inicialmente podremos seleccionar la rama en la que queremos trabajar.

Una vez seleccionada nuestra rama, nos cargará todos los elementos asociados a ella y podremos trabajar en ella.

Este editor, no solo nos permitirá gestionar nuestro proyecto Git, añadiendo/modificando elementos, gestionando ramas, etc, sino que también integra IA generativa como el Query Tool, facilitando una herramienta de apoyo al desarrollador para la generación código

 

Con el acceso a todos los recursos, podremos modificar y adaptar nuestro proyecto web si fuese necesario y debemos de configurar nuestra app web para alojarla en el entorno de la plataforma y trabajar bajo la seguridad proporcionada de esta.

 

Para ello modificaremos el fichero: .env.producction añadiendo la información correspondiente:

 

Procederemos a realizar los cambios desde la herramienta de plataforma, guardaremos los cambios y estos serán subidos a nuestro repositorio con los comentarios que añadamos.

 

 

Una vez modificado el fichero, podremos compilar el proyecto web y automáticamente desplegará los cambios.

 

 

Finalmente, ya podríamos acceder a la aplicación web.

Paso 9: Acceso aplicación web creada 

Tras desplegar la webapp ya podemos acceder a ella mediante la url expuesta por plataforma https://<enviroment>/web/helsinki_population

 

Al partir del Template Web, lo primero que nos aparecerá será la UI de Login, disponiendo así de una app web securizada contra el Identity Manager de Plataforma:

 

 

Si accedemos con el usuario con rol managernos aparecerá el menú con dos entradas, una con el formulario informativo de helsinki_form, siendo esta la definida en initnavigation del fichero de configuración (ver Paso 5: Fichero de configuración centralizada) y un segundo acceso con el dashboard.

Mientras que, si accedemos con el otro usuario con rol analytics, en el menú sólo tendremos una única entrada, que será el acceso para la visualización del dashboard, siendo esta la predefinida en initnavigation en el fichero de configuración. (ver Paso 5: Fichero de configuración centralizada)

Del mismo modo, si modificamos el idioma desde el menu de usuario, todo el sistema cambiará a partir de su fichero de internacionalización.

Paso 10: Código del Activo 

Generación de Bundle

Inicialmente, generaremos un zip con agrupando todos los recursos que hemos generado, para así poder exportar a otro entorno o guardarnos un backup de nuestro proyecto. Para ello, nos desplazaremos al apartado de VERSION CONTROL>Bundle generation

 

 

En este momento se nos abrirá un árbol con todos los recursos de los que tengamos permisos, podremos seleccionar todos aquellos que hemos generado y queramos exportar.

Una vez completanda la información general (nombre, descripción, logo, etc) podremos crear nuestro fichero zip y posteriormente cargarlo en cualquier entorno.

 

 

 

Adicionalmente, la plataforma no solo permite la generación de un bundle mediante un archivo zip, sino que también podremos deseleccionar la opción de “generar Zip” y nos aparecerá un sistema para la carga del proyecto al repositorio Git que enlacemos.

Una vez completada la información de autenticación y repositorio podremos generar el bundle y automáticamente la plataforma nos realizará un commit con la estructura en la rama y el proyecto definidos

Repositorio inicial, vacío

 

 

Repositorio con bundle cargado

 

 

Restaurar Bundle

Para importar el anterior bundle o cualquier otro, simplemente descargaremos el archivo y, en este caso, 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” lincando el bundle zip generado previamente y donde dejaremos marcadas las opciones de carga mediante zip y carga de los recursos con el usuario actual. Posteriormente relazaríamos el “Import“.

 

 

Una vez importado el fichero, nos indicará que la carga ha sido correcta y dispondremos de todos los recursos asociados a nuestro usuario.

 

También disponemos de otros sistemas de restauración, como la restauración a partir de un repositorio Git. Accederemos a este sistema del mismo modo que el anterior, desmarcando la carga mediante Zip. Habilitándo, en el mismo momento, una carga mediante repositorio Git