Asignatura: Trabajo Final de Grado
Grado o Máster de la asignatura: Grado Multimedia
Nombre del estudiante: Juan Ramón Vidal Pardo
Consultor y profesor: Helena Boltà Torrell, Jordi Almirall López, Carles Garrigues Olivella
Introducción
El 23 de septiembre de 1999, a más de 600 millones de kilómetros de nuestro planeta, la sonda espacial Mars Climate Orbiter se precipitaba contra la superficie de Marte quedando totalmente inoperativa. Los científicos y técnicos de la misión no fueron capaces de percatarse de un problema fundamental. La NASA había realizado los cálculos para que la nave ingresase en la órbita marciana utilizando las unidades del Sistema Internacional mientras que una de las empresas constructoras de la sonda espacial seguía utilizando el Sistema Anglosajón de Unidades. El malentendido provocó un accidente de pérdidas millonarias.
Trabajo en una empresa de fabricación de polímeros como técnico en instrumentos industriales y, como en la anécdota de la sonda Mars Climate Orbiter, debo ser consciente de los inconvenientes que pueden surgir al trabajar con unidades de diferentes sistemas, incluso con los múltiplos y submúltiplos de una unidad en un mismo sistema. Para desempeñar mi trabajo puede ser muy eficaz utilizar una herramienta de conversión de unidades y moneda que sea eficaz, fácil de utilizar y personalizable como Convertidor App, la aplicación para dispositivos móviles que presento como parte del trabajo final de grado de los estudios de Multimedia.
Convertidor App pretende innovar proporcionando al usuario una nueva forma de introducción y recuperación de datos más simplificada y rápida que las herramientas de conversión habituales, con un alto nivel de personalización por lo que respecta a los convertidores y sus opciones. La otra vertiente innovadora de la aplicación es la incorporación de información adicional relacionada con los sistemas de unidades y los factores de conversión (fórmulas, curiosidades, anécdotas, etc.), que convierte la utilidad, además de en una herramienta fundamental en el terreno de la ciencia y la ingeniería, en una aplicación educativa por su contenido didáctico.
Etapas y Retos
Solución tecnológica aplicada
¿Qué opción tecnológica elegir para el desarrollo de la aplicación? ¿Solución híbrida o nativa? Esta es, sin lugar a dudas, una de las decisiones más importantes que hay que tomar en las primeras etapas del proyecto. He considerado que la mejor opción es desarrollar una app híbrida fundamentalmente porque en los estudios de multimedia se adquieren muchos más conocimientos relacionados con esta tecnología que con la opción nativa. Además, el contenido y las funcionalidades que se pretenden implementar en la aplicación permiten el desarrollo híbrido sin ningún problema. Así pues, el framework elegido ha sido Ionic y, a pesar de tratarse de una solución multiplataforma, se ha realizado la exportación únicamente a la plataforma Android al no disponer de un equipo iOS. Apache Cordova será el entorno de desarrollo que permitirá usar las tecnologías estándares web como HTML5, CSS3 y JavaScript para confeccionar la aplicación como una página web SPA (single-page application) que se incrustará en el WebView nativo del dispositivo.
Diseño centrado en el usuario
El proyecto empieza a avanzar y es hora de pensar en cuáles son las necesidades, los objetivos y las características de los usuarios potenciales, determinando también el ámbito de uso de la aplicación. Arranca la fase de análisis del «diseño centrado en el usuario (DCU)» y se utilizan principalmente dos métodos de investigación cualitativa con los cuales se obtendrá importante información: método de seguimiento (shadowing) y análisis competitivo (benchmarking). Para aplicar el método de seguimiento colaboran voluntariamente un técnico en instrumentación industrial, un estudiante de bachillerato y un técnico comercial que viaja a menudo al extranjero. Paralelamente, se aplica el método de análisis de la competencia examinando seis utilidades relacionadas con la conversión de unidades correspondientes a las plataformas Android e iOS.
Con los resultados obtenidos se pueden identificar diferentes perfiles de usuario que, en función de sus habilidades con la tecnología móvil, actitudes, expectativas y aspectos sociodemográficos, se pueden clasificar en perfiles de usuario básico y avanzado. Asimismo, con el objetivo de averiguar las necesidades del usuario, sus objetivos y las funcionalidades que necesita, se confeccionan varias fichas que muestran diferentes escenarios de uso para valorar la utilización de Convertidor App en diferentes contextos.
Llegados a este punto, se dispone de suficiente información para plasmar las primeras ideas de la estructura y el diseño de la aplicación. Para ello se realizan diferentes esbozos (sketches) de las pantallas más significativas. Comienza así la fase de diseño del DCU que culminará con un prototipo horizontal de alta fidelidad donde se verán las diferentes pantallas de la utilidad con un aspecto muy parecido a como se pretenden diseñar durante el proceso de desarrollo. Se diseña también un icono original para la aplicación, así como una pantalla de bienvenida que se podrá ver durante el arranque de la app (splash screen).
Finalmente se planifica la evaluación del prototipo. Es la última fase del DCU y permitirá ir corrigiendo las decisiones de diseño susceptibles de mejora para adaptarlas a los resultados obtenidos y volverlas a evaluar posteriormente, aplicando así un proceso iterativo entre las diferentes fases. Para llevar a cabo la evaluación se utiliza la técnica del test con usuarios que consiste en recopilar y analizar la información obtenida de una serie de usuarios reales que presumiblemente utilizarán la app.
Diseño técnico
En esta etapa se definen diferentes casos de uso donde se especifica la comunicación y el comportamiento del sistema mediante su interacción con el usuario en diferentes escenarios. Asimismo, se diseña un diagrama UML que muestra las principales funcionalidades de la aplicación y sus relaciones con un usuario exterior (actor), así como un diagrama de arquitectura del sistema que ilustra las diferencias entre el paradigma model view controller (MVC) clásico y el llamado model view viewmodel (MVVM), utilizado por Ionic/Angular.
Otro gráfico fundamental que muestra la estructura del sistema es el diagrama UML de entidades y clases. Sin embargo, se ha sustituido este tipo de diagrama por uno de arquitectura de una aplicación híbrida, ya que se han encontrado muchas dificultades en representar una aplicación Ionic/Angular con un sistema de entidades y clases típico como los estudiados en asignaturas como Ingeniería Web o Programación Orientada a Objetos. En un momento dado se valoró la posibilidad de, prescindiendo de las clases reales implementadas en los ficheros TypeScript, hacer una especie de abstracción y, analizando el comportamiento de la aplicación, determinar las clases necesarias con sus atributos, métodos e interrelaciones. Finalmente, se descartó esta posibilidad por no considerarla apropiada.
Implementación
Esta etapa ha supuesto un reto muy importante para mí, puesto que no tenía ningún conocimiento previo de los frameworks Ionic y Angular. En primer lugar, tuve que refrescar los conocimientos adquiridos en asignaturas como Lenguajes y Estándares Web, Programación Web y Programación Web Avanzada antes de iniciar el aprendizaje de esta tecnología. Más tarde, utilizando como principal fuente de información las páginas web y foros oficiales de Ionic, poco a poco fui familiarizándome con sus mecanismos y filosofía de funcionamiento para ir avanzando en el desarrollo de la aplicación.
En la mayoría de utilidades de este tipo se requieren varios pasos para realizar una conversión: elegir el tipo de convertidor, seleccionar la unidad a partir de la cual se desea hacer el cálculo, introducir el valor a convertir, seleccionar la unidad a la que se desea realizar la conversión y leer el resultado. Sin embargo, con Convertidor App, solo hay que seleccionar el convertidor e introducir los datos en el lugar deseado para obtener, inmediatamente y de forma automática, el resultado de todas las conversiones posibles. Para ello se utiliza la función ngDoCheck que se ejecuta cada vez que hay un cambio en pantalla. De esta manera, aprovechando las características del Data Binding que permiten sincronizar automáticamente los datos entre el modelo y la vista, tenemos la vista continuamente actualizada a medida que el usuario va introduciendo los datos de la unidad a convertir.
Otro de los aspectos más complejos del desarrollo ha sido la construcción dinámica de la sección de convertidores favoritos. Dicha sección aparece vacía cuando se instala la aplicación. A medida que el usuario va seleccionando diferentes unidades como preferidas, en la sección de favoritos van apareciendo las unidades seleccionadas incluidas en sus respectivos convertidores. De esta manera, en este apartado solo aparecerán los convertidores utilizados con más frecuencia y se podrá acceder a ellos de forma rápida y fácil. Para ello se dispone de una serie de arrays booleanos que controlan los favoritos seleccionados y se almacenan en la memoria local del dispositivo con la intención de conservar la configuración aunque se cierre o se reinicie la aplicación. Desde el HTML de la página, se consultan los registros mencionados para cargar la página de forma dinámica mostrando solo las unidades seleccionadas como preferidas.
Finalmente, cabe destacar las peculiaridades del convertidor de divisas. Así como en el resto de convertidores de unidades el factor de conversión es siempre el mismo, en el caso de las divisas este valor cambia diariamente. Para solucionar este inconveniente se utiliza la API Fixer que permitirá obtener los valores de cambio actuales publicados por el Banco Central Europeo. Una vez registrados en el servicio se consigue una API Key que, concatenada con la URL base del servicio, permitirá realizar las consultas HTTP pertinentes que retornarán los resultados esperados. En el almacenamiento local del dispositivo, se guarda el resultado de la última consulta válida con la finalidad de utilizarlo si no se dispone de conexión o el servicio no funciona en el momento de la consulta.
Conclusiones
En los estudios de multimedia se abordan diferentes disciplinas de forma que los estudiantes adquirimos conocimientos muy variados. En primer lugar, tenemos un grupo de asignaturas relacionadas con el medio artístico, es decir, las que tienen que ver con el diseño gráfico y la comunicación interactiva. En segundo lugar, nos encontramos con otro grupo más ligado a la tecnología, los lenguajes de programación y las metodologías de diseño y producción multimedia. Además, no podemos olvidar un tercer grupo de asignaturas donde aparecen aquellas relacionadas con la técnica de gestión y los aspectos económicos de la producción multimedia, las competencias comunicativas, el trabajo en equipo en la red, idioma moderno, etc.
La realización de este proyecto implica poner en práctica recursos de diferentes disciplinas. Por este motivo considero que ha sido una experiencia muy positiva, me atrevería a decir que ideal para un final de grado. Por un lado, ha sido necesario aplicar conocimientos que prácticamente tenía olvidados, así como poner en práctica recursos aprendidos en las asignaturas de los tres grandes grupos que se acaban de nombrar. Por otro lado, para poder desarrollar la aplicación he tenido que aprender, aunque de forma básica, el framework Angular. Debo decir que, aunque su metodología cuesta un poco de asimilar, hay que reconocer la gran labor que han hecho los desarrolladores con este entorno de trabajo.
El objetivo es continuar optimizando algunos aspectos y funcionalidades de la aplicación, añadir nuevos convertidores, unidades y divisas, además de mejorar y complementar la información asociada a cada conversión. La idea es intentar que mis compañeros de trabajo utilicen la aplicación habitualmente con la finalidad de recibir sus consejos y observaciones para implementar mejoras que la hagan más útil y atractiva. Convertidor App se publicó en la tienda Google Play en julio de 2020.
Enlaces Relacionados
Documentación
ALMIRALL LÓPEZ, Jordi. Disseny Centrat en l’Usuari per a dispositius mòbils [en línea]. Universitat Oberta de Catalunya Wiki (2013). [Consulta: 20 de marzo de 2020]. Disponible en:
A bird’s eye view of Ionic and related technologies [en línea]. Ionic Framework Forum (2017). [Consulta: 3 de abril de 2020]. Disponible en: https://forum.ionicframework.com/t/is-there-a-graphic-diagram-available-that-shows-how-ionic-2-and-all-related-technologies-connect/88375/6
Mars Climate Orbiter [en línea]. Wikipedia (2019). [Consulta: 10 de julio de 2020]. Disponible en: https://es.wikipedia.org/wiki/Mars_Climate_Orbiter
Métodos aplicables para el desarrollo de aplicaciones móviles [en línea]. GENBETA (2011). [Consulta: 29 de febrero de 2020]. Disponible en: https://www.genbeta.com/desarrollo/metodos-aplicables-para-el-desarrollo-de-aplicaciones-moviles
Model-View-Whatever [en línea]. Beyond Java (2015). [Consulta: 1 de abril de 2020]. Disponible en: https://www.beyondjava.net/model-view-whatever
System of Measurement Units [en línea]. Engineering and Technology History Wiki (2012). [Consulta: 28 de febrero de 2020]. Disponible en: https://ethw.org/System_of_Measurement_Units
Cita recomendada: VIDAL PARDO, Juan Ramón. Convertidor App: convertidor de unidades y divisas. Mosaic [en línea], marzo 2021, no. 191. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n191.2112
Deja un comentario