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 instalado el plugin, podemos usarlo en nuestro diseño.

Open

Este plugin nos permitirá definir data bindings y method bindings en nuestros elementos FIGMA, para después generar funcionalidad siguiendo el paradigma Low Code.

Open

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:

Para empezar se nos pedirá el ID del proyecto FIGMA, y un token de API FIGMA.

El token podemos generarlo aquí.

El ID del proyecto se saca de la URL de FIGMA, por ejemplo:

https://www.figma.com/file/HOj2i7P5nczItTfOL16vHM/Low-Code-ToDo---With-login?node-id=52%3A1

Será HOj2i7P5nczItTfOL16vHM

Una vez introducidos, le daremos a “Fetch” y se cargarán el resto de secciones de la herramienta.

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

Se nos pedirá el nombre del método que queremos mapear, la API y su operación. Adicionalmente se nos pedirá la variable de input para operaciones PUT o POST, la variable de output por si queremos guardar el resultado de la operación JSON en el modelo, y la página a la que redirigir al usuario al terminar la operación, si procede.

Para operaciones que tengan parámetros en el path, se pedirá también mapear dichos parámetros:

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 i para instalar las dependencias necesarias.

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

Explicación en vídeo