Migasfree Frontend

Presentación realizada para la migascon 2022, en la que se muestra la aplicación migasfree frontend como sustituta del anterior interfaz de administración de la versión 4.

Transcript

1. Jose Antonio Chavarría 2022-05-19 MIGASFREE FRONTEND #migascon2022 Presentación realizada para la migascon 2022, en la que se muestra la aplicación migasfree frontend como sustituta del anterior interfaz de administración de la versión 4.
2. API REST BACKEND FRONTEND Separación entre servicios e interfaz de usuario. Esa era la idea central de la versión 5 de la suite migasfree. Permitiría desarrollar por separado ambos proyectos, utilizando en cada caso las mejores tecnologías para cada parte. Para empezar con esta tarea, primero había que ampliar la API REST en migasfree-backend. Una vez realizada esa parte, llegó el momento de iniciar el proyecto de migasfree-frontend.
3. SPA Hubo un primer intento de realizarlo con Nuxt (framework de desarrollo de Vue), pero poco después descrubimos Quasar (otro framework para Vue) y la cantidad de trabajo que nos iba a ahorrar en la creación de componentes iba a ser tanta, que reconducimos el proyecto con este nuevo framework. Esta ha sido la primera incursión en el frontend web development actual, con tecnologías de última generación para el desarrollo de una SPA.
4. Gráficos Seguro que cuando liberemos aparecerán errores, pero el salto cualitativo es enorme respecto a la versión actual, y el abanico de posibilidades que se nos abre es colosal. Como, por ejemplo, la geolocalización de etiquetas y atributos en la ficha de ordenador, gracias a OpenStreetMap y Leaflet. El rediseño de la interfaz es palpable y se han modernizado componentes. Se ha aprovechado también para cambiar la librería que visualiza las gráficas a eCharts (proyecto open source, con licencia Apache).
5. Ahora pasemos a contemplar algunas de las novedades más relevantes. Empezaremos por una que atañe al aspecto de la aplicación: el “dark mode”. Es una mejora en la usabilidad con determinadas condiciones lumínicas. Además, está muy de moda entre los consumidores de productos tecnológicos. Dos formas de consumir la aplicación al alcance de un solo “click”.
6. Pensando en mejorar la accesibilidad a los datos presentados en las gráficas, hemos añadido la opción de ver en crudo la información de las mismas. En ocasiones el dato es tan ínfimo que no es posible seleccionarlo con el ratón en la gráfica. Aparte, se ha añadido también la opción de guardar la representación de la gráfica.
7. Otra característica que apreciarán los usuarios de la aplicación es la posibilidad de copiar/pegar los atributos en los campos donde aparezcan los botones de edición. En el editor de textos se puede apreciar cómo se almacena la información cuando se copia uno de estos campos (un simple JSON con los identificadores de los atributos).
8. Por fin es posible agregar un paquete desde el navegador web. Tranquilos, que no se ha perdido la opción de hacerlo desde el cliente en consola. Es muy fácil de hacer ya que sólo hay que seleccionar el almacén donde alojarlo (como veis, no hay que aprenderse nada de memoria) y, además, informa del tamaño del paquete a subir al servidor.
9. En esta nueva versión de la suite migasfree cambia el concepto de conjunto de paquetes. Ahora sí que se trata como tal y es posible añadir/eliminar los paquetes del conjunto fácilmente.
10. En el servidor, el concepto de paquete tiene entidad propia y se puede obtener mucha más información (y más fiable) sobre cuándo se ha instalado o desinstalado tal o cual paquete en un equipo.
11. Otro de los cambios sustanciales con respecto a la versión 4, es que desaparecen las consultas programables. Para que no las echéis en falta, se han incorporado numerosos filtros en los datos que se pueden ver en la aplicación. Como muestra, sirvan estos que veis en el listado de ordenadores. Hay filtros globales (los de la parte superior) y otros que van campo en la zona del listado.
12. Otro gran cambio (relacionado con el concepto de paquete), es este que se puede observar en el apartado software de la ficha de ordenador. Desde el inventario se puede consultar qué otros ordenadores tienen un determinado paquete, por ejemplo. Desde el histórico se puede consultar más efizcamente qué cambios hubo en el equipo en una fecha en concreto. También es posible comparar el software de dos equipos sin tener que recurrir a herramientas externas.
13. Otra parte que ha sufrido un rediseño para ganar en usabilidad, ha sido la página de sucesos de un ordenador. Los años están separados y se pueden consultar a través de la leyenda inferior. Incluso es posible filtrar los resultados desde la propia gráfica.
14. Las alertas se comunican vía push al navegador web, utilizando websockets. De esta manera, cuando ocurra algo en el servidor, los distintos usuarios que tengan migasfree frontend abierto, recibirán al instante información sobre el evento que haya acontecido. Anteriormente el usuario debía “refrescar” las alertas abriendo el desplegable. Mientras ese desplegable continuara visible, la información se actualizaba cada pocos segundos. La ventaja en el cambio de la comunicación de las alertas es evidente y mucho más eficiente.
15. Y para terminar, no podemos olvidarnos de la geolocalización de atributos y etiquetas. Esta geolocalización también se puede ver en la ficha de ordenador. Para ello usamos los mapas proporcionados por OpenStreetMap.
16. #migascon2022 Muchas gracias por estar aquí @migasfree Quedan más detalles por explorar dentro de la aplicación. Aquí sólo hemos mostrado los cambios más relevantes. La metamorfosis ha sido grande y ambiciosa, y busca mejorar la experiencia de uso. Deseamos haberlo conseguido. Como siempre, quedamos atentos a vuestros comentarios y seguro que nuevas funcionalidades serán añadidas a futuro. Migasfree es lo que es gracias a vosotros: nuestra comunidad.