Introducción

En esta Release incorporamos una nueva herramienta que permite generar UIs en Vue JS a partir de un diseño FIGMA.

Uso

Plugin FIGMA

Dentro de FIGMA haremos uso del plugin figma-low-code , que instalaremos en nuestra cuenta de FIGMA en primer lugar.

...

Una vez definidas todas las variables y métodos/acciones en nuestros componentes, ¡estaremos listos para utilizar la nueva herramienta de la onesait Platform!

Herramienta de generación UIs en Plataforma

Encontraremos esta herramienta en el menú de herramientas:

...

En primer lugar, nos aparecerán dos opciones: habilitar log in Oauth 2 y mapear un componente de FIGMA a un Dashboard de plataforma.

...

Funcionalidad login con OAuth2

Marcaremos la opción del login, si nuestro diseño posee una página de log in. Si es así, deberemos indicar cuales son las variables definidas en FIGMA que hacen referencia al usuario y la contraseña, así como la página a la que dirigiremos al usuario después de logarse.

Funcionalidad componente Dashboard

La opción de utilizar un componente Dashboard hará uso de este wrapper Vue JS, y servirá para que un componente FIGMA marcado como custom, sirva de contenedor para un Dashboard de plataforma. Se nos pedirá el nombre que le dimos al componente FIGMA, el nombre del Dashboard, y si queremos permitir la edición en el mismo.

...

Mapping de funciones con APIs de plataforma

Por último tendremos la sección de mapping de métodos definidos con el plugin FIGMA. Podremos mapear cada método definido con una API y operación concretas de plataforma.

...

Al añadir estas operaciones se mostrarán en la tabla y podremos borrarlas o ver que mapeo de parámetros habíamos seleccionado:

...

Generar la UI

Por último quedará generar la UI. Al pinchar en “Generate” se generará un .zip que tendremos que descomprimir.

Ejecutar la aplicación web generada

Iremos al directorio y ejecutaremos un npm ipara instalar las dependencias necesarias.

A continuación, ejecutaremos npm run serve y se levantará la aplicación para poder probarla.

...