Se ha propuesto realizar el desarrollo en formato interfaz web, que consumirá los datos directamente desde el API Rest que se proporciona como Backend. El desarrollo de esta interfaz se llevará a cabo mediante el Framework Vue.js. Con el liberamos la carga del servidor ya que este solo se encargará de procesar las peticiones JSON desde y hacia el explorador. Se ha elegido Vue.js por su versatilidad, adaptabilidad y escalabilidad para llevar a cabo el desarrollo.
La interfaz será de tipo Dashboard o panel de control, donde el usuario pueda experimentar que tiene el control de todo el servicio a su disposición. Una característica principal de una interfaz de este tipo es que debe proveer al usuario de una experiencia total en cuanto a tiempo real se refiere. El usuario percibirá todos los eventos que ocurran en el sistema a través de ella en el momento en el que se produzcan. En ella tendremos una barra lateral con un menú donde podremos ir rápidamente a cualquier vista definida en la aplicación.
Dentro de la definición, se establecen una serie de vistas agrupadas por funcionalidad. Para facilitar la visualización del dashboard se ha adjuntado, a cada una de las secciones definidas, una figura que contiene un ejemplo de desarrollo y organización de todos los campos presentes en ella.
Vista Principal Dashboard
La ventana principal dispone de una visualización general de la información más relevante del sistema completo. Se mostrarán las estadísticas de funcionamiento en distintos rangos de tiempo, información de los robots que actualmente se encuentran conectados, listado de errores, procesos completados y últimas ejecuciones de procesos entre otros campos disponibles de menor relevancia.
Cada componente dispone de un acceso directo a su sección concreta al que se accederá mediante un sistema de routing transparente a los usuarios de la interfaz. A continuación, se muestra un ejemplo de la vista principal:
