Las Interfaces Gráficas de Usuario (GUIs) se han convertido en un componente fundamental de los sistemas de software modernos, definiendo cómo los usuarios interactúan con las aplicaciones y cómo se percibe la información (y si buscas una interfaz conversacional, también contamos con ella). Pero, como probablemente sabes, esto también puede ser una de las tareas más complicadas para los desarrolladores.

Diseñar una GUI a menudo implica cambiar entre múltiples herramientas y tecnologías, lidiar con restricciones de diseño y asegurar la consistencia entre la interfaz de usuario y el modelo de datos subyacente. Incluso en entornos low-code, este proceso puede volverse rápidamente lento y propenso a errores cuando los modelos de diseño y datos no están bien integrados.

Con la última versión de BESSER, nuestra plataforma ahora incluye un editor No-Code para diseñar GUIs y dashboards directamente dentro del entorno de modelado, integrado de manera fluida con tu diagrama de clases. Esto permite la generación de aplicaciones web completas dentro de un proceso de desarrollo unificado y dirigido por modelos.

Nota: este editor no-code se centra actualmente en el diseño de dashboards y visualización de datos, pero se están desarrollando nuevas funciones (como formularios GUI adicionales) para soportar operaciones CRUD completas.

Modelado de GUIs en BESSER

Desde el Editor Web de Modelado de BESSER (WME), ahora puedes diseñar visualmente la interfaz gráfica de usuario de tu aplicación (sin necesidad de programar). Puedes crear y organizar páginas, formularios, botones, gráficos y otros elementos de interfaz usando un intuitivo editor de arrastrar y soltar.

Este editor No-Code está implementado con GrapesJS e incluye elementos como:

  • Layouts: Filas, columnas, contenedores y tarjetas para estructurar tus páginas.
  • Formularios: Botones, pies de página, barras de navegación y dashboards predefinidos.
  • Gráficos: Barras, líneas, pastel, radar y radial bar para visualización de datos.
  • Tablas de Datos: Componentes para mostrar listas de datos de tu modelo de datos.

Además de las propiedades de estilo estándar de cada elemento, puedes vincular los elementos de la interfaz a las entidades y atributos definidos en tu modelo estructural, permitiendo interfaces dinámicas y orientadas a los datos. Por ejemplo, al seleccionar un componente de tabla de datos, el panel de configuración permite elegir qué entidad o clase de tu diagrama de clases se mostrará en la tabla.

Generando una Aplicación Web Completa

Como parte de la última versión de BESSER, también se incluye un generador de código para producir una aplicación web. Con un solo clic, genera:

  • Backend: Una aplicación FastAPI con modelos SQLAlchemy, endpoints REST e integración con base de datos SQLite.
  • Frontend: Una aplicación React que implementa tu diseño GUI, con formularios dinámicos, gráficos, listas y más.
  • Despliegue: Dockerfiles para backend y frontend, más un archivo Docker Compose para un despliegue en contenedores sencillo.

Después de generar una aplicación web completa a partir de un modelo estructural y el diseño de GUI, tu código y distribución de archivos se verá algo así:

Archivos generados

Para despliegues sencillos, puedes ejecutar tu aplicación usando docker-compose, lo que crea dos contenedores (uno para el backend y otro para el frontend) y un volumen para la base de datos.

Puedes probar la plataforma BESSER en cualquier momento en https://besser-editor.pearl.org