Desarrollo de una aplicación móvil para gestionar colecciones Development of a mobile application to manage collections
←
→
Transcripción del contenido de la página
Si su navegador no muestra la página correctamente, lea el contenido de la página a continuación
Desarrollo de una aplicación móvil para gestionar colecciones Development of a mobile application to manage collections Grado en Ingeniería de Software Facultad de Informática Universidad Complutense de Madrid Trabajo de Fin de Grado Autor Pablo López Veleiro Tutores Sergio Bernabé García Guillermo Botella Juan 20 de septiembre de 2021
Agradecimientos Gracias a mis padres y mi hermano, José María, Malen y Adrián, por apoyarme siempre que me propongo hacer algo. Sin vosotros no habría llegado nunca a donde estoy. También tengo que agradecer, especialmente a mi padre, que si no fuera por él seguramente no me apasionaría y emocionaría a tan alto nivel la informática. Gracias a esa gente maravillosa que me he encontrado a lo largo de la carrera, vosotros me sacabais (y seguís sacando) una sonrisa en esos momentos malos y nos ayudábamos entre todos cuando alguien tenía algún problema o alguna duda. Finalmente, gracias a mis tutores, Sergio y Guillermo, que siempre me habéis animado a seguir trabajando en este proyecto.
Índice general
Resumen VIII
Abstract IX
Lista de Acrónimos X
1. Introducción 1
1.1. Motivación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3. Plan de Trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Organización de esta memoria . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2. Estado del Arte 7
2.1. Dispositivos móviles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2. Aplicaciones móviles para el coleccionismo . . . . . . . . . . . . . . . . . . . . . 8
2.2.1. Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.2. iOS e iPadOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.3. Multiplataforma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3. Plataformas de desarrollo para el cliente multiplataforma . . . . . . . . . . . . . 15
2.3.1. Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.2. React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.3. Xamarin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3.4. Selección de la plataforma . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.4. Plataformas de desarrollo para el servidor . . . . . . . . . . . . . . . . . . . . . 17
2.4.1. ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
I
2.4.2. NodeJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.4.3. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.4.4. Selección de la plataforma . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3. Diseño de la Aplicación 20
3.1. Dispositivo hardware elegido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2. Arquitectura del servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3. Arquitectura de la App multiplataforma . . . . . . . . . . . . . . . . . . . . . . 21
3.4. Casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5. Base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.6. Seguridad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4. Implementación de la Aplicación 34
4.1. Front-end o Lado de cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.1.1. Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.2. Back-end o Lado de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.2.1. Desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5. Resultados Obtenidos 46
5.1. API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2. Aplicación multiplataforma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.1. Profiling o resultados técnicos . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.2. Resultados de usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
6. Conclusiones y Trabajo Futuro 58
6.1. Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
6.2. Trabajo Futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Bibliografía 62
A. Introduction 63
A.1. Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
A.2. Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
II
A.3. Work Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
A.4. Organization of this report . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
B. Conclusions and Future Work 68
B.1. Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
B.2. Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
C. Documentación de la API 71
D. Flujo de uso y Demo de la Aplicación 72
D.1. Flujo de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
D.1.1. Crear una colección . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
D.1.2. Listar colecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
D.1.3. Crear un ítem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
D.1.4. Listar ítems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
D.1.5. Visualizar el detalle de un ítem . . . . . . . . . . . . . . . . . . . . . . . 76
D.1.6. Editar un ítem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
D.1.7. Duplicar un ítem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
D.1.8. Eliminar un ítem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
D.1.9. Editar una colección . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
D.1.10. Eliminar una colección . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
D.2. Demo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
III
Índice de figuras
1.1. Diagrama de Gantt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1. Logo de la aplicación Colecciones de Eerton Menezes. . . . . . . . . . . . . . . . 9
2.2. Logo de la aplicación Control de colecciones de Augusto App Mobile. . . . . . . 10
2.3. Logo de la aplicación Colecciones de cromos de Emilio Sarabia. . . . . . . . . . 10
2.4. Logo de la aplicación Mi colección de juegos de WHYNOT Applications. . . . . 11
2.5. Logo de la aplicación myCollections PRO. . . . . . . . . . . . . . . . . . . . . . 12
2.6. Logo de la aplicación Colecciones familiares. . . . . . . . . . . . . . . . . . . . . 13
2.7. Logo de la aplicación Collect All (Lite). . . . . . . . . . . . . . . . . . . . . . . . 13
2.8. Logo de la aplicación iDatabase. . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.9. Logo de la aplicación MyCollections de Altova GmbH. . . . . . . . . . . . . . . 15
3.1. Arquitectura usada en el servidor. . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.2. Arquitectura de Xamarin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.3. Arquitectura Modelo-Vista-Modelo de vista usado en la aplicación. . . . . . . . 23
3.4. Mockup en el servicio de Figma. . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5. Modelo UML de la base de datos. . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.6. Modelo Entidad-Relación de la base de datos. . . . . . . . . . . . . . . . . . . . 32
4.1. Vista del listado de colecciones con las opciones disponibles. . . . . . . . . . . . 36
4.2. Vista del listado de ítems con las opciones disponibles. . . . . . . . . . . . . . . 37
4.3. Categorías disponibles en la aplicación. . . . . . . . . . . . . . . . . . . . . . . . 38
4.4. Vista de los ajustes disponibles dentro de la aplicación. . . . . . . . . . . . . . . 39
4.5. Vista de la página de inicio de sesión de la aplicación. . . . . . . . . . . . . . . . 41
4.6. Vista de la página de gestión del usuario de la aplicación. . . . . . . . . . . . . . 41
IV
A.1. Gantt diagram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
D.1. Selector de categoría al crear una colección. . . . . . . . . . . . . . . . . . . . . 73
D.2. Creación de una colección. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
D.3. Listado de colecciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
D.4. Creación de un ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
D.5. Listado de ítems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
D.6. Visualización del detalle de un ítem. . . . . . . . . . . . . . . . . . . . . . . . . 77
D.7. Edición de un ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
D.8. Duplicación de un ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
D.9. Mensaje de confirmación en la eliminación de un ítem. . . . . . . . . . . . . . . 80
D.10.Edición de una colección. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
D.11.Mensaje de confirmación en la eliminación de una colección. . . . . . . . . . . . 82
V
Índice de tablas
2.1. Comparación de las aplicaciones disponibles en Android. . . . . . . . . . . . . . 9
2.2. Comparación de las aplicaciones disponibles en iOS/iPadOS. . . . . . . . . . . . 12
2.3. Comparación frameworks desarrollo móvil. . . . . . . . . . . . . . . . . . . . . . 16
2.4. Comparación software desarrollo servidor. . . . . . . . . . . . . . . . . . . . . . 18
3.1. Caso de uso 01: Crear colección. . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2. Caso de uso 02: Crear ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.3. Caso de uso 03: Editar colección. . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.4. Caso de uso 04: Editar ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.5. Caso de uso 05: Eliminar colección. . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.6. Caso de uso 06: Eliminar ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.7. Caso de uso 07: Duplicar ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.8. Caso de uso 08: Visualizar colección. . . . . . . . . . . . . . . . . . . . . . . . . 28
3.9. Caso de uso 09: Visualizar ítem. . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.10. Caso de uso 10: Compartir colección. . . . . . . . . . . . . . . . . . . . . . . . . 29
3.11. Caso de uso 11: Compartir ítem de colección. . . . . . . . . . . . . . . . . . . . 29
3.12. Caso de uso 12: Iniciar sesión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.13. Caso de uso 13: Editar usuario. . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.1. Tiempo de respuesta de la API. . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2. Medidas de rendimiento en la obtención de categorías. . . . . . . . . . . . . . . 48
5.3. Medidas de rendimiento en la obtención de subcategorías. . . . . . . . . . . . . 48
5.4. Medidas de rendimiento en la creación de colecciones. . . . . . . . . . . . . . . . 49
5.5. Medidas de rendimiento en la edición de colecciones. . . . . . . . . . . . . . . . 49
5.6. Medidas de rendimiento en la eliminación de colecciones. . . . . . . . . . . . . . 49
VI5.7. Medidas de rendimiento en el listado de colecciones. . . . . . . . . . . . . . . . . 50
5.8. Medidas de rendimiento en la creación de ítems. . . . . . . . . . . . . . . . . . . 50
5.9. Medidas de rendimiento en la edición de ítems. . . . . . . . . . . . . . . . . . . 50
5.10. Medidas de rendimiento en la eliminación de ítems. . . . . . . . . . . . . . . . . 51
5.11. Medidas de rendimiento en el listado de ítems. . . . . . . . . . . . . . . . . . . . 51
5.12. Medidas de rendimiento en la visualización del detalle de ítems. . . . . . . . . . 51
5.13. Medidas de rendimiento en la visualización del usuario. . . . . . . . . . . . . . . 52
5.14. Medidas de rendimiento en la edición del usuario. . . . . . . . . . . . . . . . . . 52
5.15. Valoración de Miguel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.16. Valoración de Leila. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
5.17. Valoración de Víctor P. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.18. Valoración de Víctor F. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
VIIResumen
Este Trabajo Fin de Grado tiene como finalidad el desarrollo de un sistema de gestión de
colecciones, con el objetivo de disponer de un sistema moderno y elegante en el que poder
gestionar y compartir la afición del coleccionismo.
Este sistema está formado por una aplicación multiplataforma para dispositivos móviles
(teléfonos inteligentes o smartphones y tabletas) que harán de centro de gestión y obtención de
datos de las colecciones. El sistema se integrará con un servidor para sincronizar las colecciones
entre los dispositivos de los usuarios y con el propósito de permitir a los usuarios compartir sus
colecciones con otros.
Palabras Clave
Coleccionismo, aplicación móvil, iOS, Android, multiplataforma, Xamarin, NodeJS, SQL.
VIIIAbstract
This Final Degree Project aims to develop a software for managing collections, in order to
have an elegant and modern system that allows us to manage and share our hobby of collecting.
This system consists in a multiplatform mobile application (smartphones and tablets) which
will act as a collection management and data collection center. The system will be integrated
with a server to synchronise collections between users’ devices and to allow users to share their
collections with other people.
Keywords
Collecting, mobile application, iOS, Android, multiplatform, Xamarin, NodeJS, SQL.
IXLista de Acrónimos
API - Application Programming Interface o Interfaz de Programación de Aplicaciones
CPU - Central Processing Unit o Unidad Central de Procesamiento
DAO - Data Access Object o Objeto de Acceso a Datos
JSON - Extensible Application Markup Language o Lenguaje Extensible de Formato para
Aplicaciones
MVVM - Model-View-View Model o Modelo Vista Modelo de Vista
RAM - Random Access Memory o Memoria de Acceso Aleatorio
TFG - Trabajo Fin de Grado
UWP - Universal Windows Platform o Plataforma Universal de Windows
VPS - Virtual Private Server o Servidor Virtual Privado
XAML - JavaScript Object Notation o Notación de Objeto de JavaScript
XCapítulo 1
Introducción
El coleccionismo consiste en el ocio de reunir, conservar y mostrar todo tipo de objetos. Se
tiene constancia de esto en tiempos de los asirios, en la antigua Mesopotamia, aunque en estos
casos se realizaba esto por motivos de conocimiento. Otros ejemplos de los que disponemos en
la antigüedad son, la gran conocida Biblioteca de Alejandría y el menos conocido Museo de
Alejandría [1], aunque ambos de gran valor histórico, ya que gracias al primero se originó el
formato que actualmente conocemos de los libros, aunque se estima que la biblioteca no hubiese
existido sin el museo, por lo que también debe recibir la relevancia que merece.
En la actualidad existen una gran cantidad y variedad de museos, ya sean de arte, como el
Louvre o el Reina Sofía; de armamentística, como el Museo del Ejercito o el Museo del Aire;
de ciencias naturales como el Museo de Ciencias Naturales de Madrid, la Ciudad de las Artes
y las Ciencias de Valencia; o de libros y documentos como la Biblioteca Nacional de España.
Dado que los objetos coleccionables pueden ser únicos, ediciones especiales limitadas o inclu-
so, aunque sea producido durante mucho tiempo, puede pasar a ser un objeto de coleccionista
con el tiempo, existe un gran mercado de compra-venta asociado al coleccionismo. Todo tipo
de muebles clásicos, obras de arte o componentes electrónicos del inicio de la informática son
elementos que actualmente son muy cotizados por su rareza. Esto ha facilitado la proliferación
de un gran mercado que ofrece a los coleccionistas la posibilidad de comprar, vender o inter-
cambiar bienes de estos tipos entre ellos. Como ejemplos de este tipo de mercados disponemos
de plataformas especializadas como todocoleccion o catawiki y otras menos especializadas como
Wallapop o eBay. En el ámbito de los libros existen algunas librerías especializadas como por
ejemplo Librería Berceo, en Madrid.
Como curiosidad interesante sobre el coleccionismo, se puede destacar que algunos tipos de
1este cuentan con un nombre propio dada su importancia y popularidad. Algunos ejemplos de
esto, entre muchos otros, son la Bibliofilia, relacionada con los libros; la Filatelia, relacionada
a los sellos, sobres y otros documentos postales; la Muñecofilia, relacionada con todo tipo de
muñecas; o la Notafilia y Numismática, relacionado con los billetes y las monedas respectiva-
mente.
1.1. Motivación
El mundo del coleccionismo, aun estando muy extendido, no disfruta del mismo cariño
que otras aficiones. Actualmente este mundo ha crecido dada su mayor visibilidad gracias a
fenómenos como el de los Funkos o el auge del fenómeno fan con las ediciones exclusivas y
de coleccionista de diferentes tipos como ropa, figuras o accesorios de los distintos grupos de
música, series, películas y videojuegos entre otros.
Aun así, las formas de las que podemos disfrutar para mantener nuestras colecciones organi-
zadas y recogidas de forma digital sigue siendo muy limitadas o prácticamente nulas, como ya
veremos en el Capítulo 2. Por esto surgió la idea de desarrollar una aplicación multiplataforma
con el fin de suplir esta carencia.
Adicionalmente se considero buen aliciente dotar a la aplicación de funcionalidades sociales,
ofreciendo visualizar y compartir tus colecciones con el resto de usuarios. Pocas veces se han
visto relacionadas estas funcionalidades a este mundo, ya que siempre se ha considerado una
afición solitaria, pero aun así pueden resultar interesantes. Esto es porque estamos en un mundo
en el que, cada vez más, buscamos conocer a gente con nuestros mismos gustos y aficiones, como
bien nos ha demostrado el tiempo con los grupos de fans y los amigos que, de forma más común,
se conocen por internet.
1.2. Objetivos
El objetivo general de este Trabajo Fin de Grado (TFG) es la implementación de una
aplicación móvil para registrar, actualizar y mantener los datos sobre las colecciones de las que
dispone el usuario. Para ello, se llevará a cabo a lo largo de esta memoria la ejecución de los
siguientes objetivos específicos:
2Desarrollar una aplicación que esté disponible para los sistemas iOS y Android y permita
registrar y mantener las colecciones de los usuarios. Por tanto, debe disponer de las
siguientes funciones:
1. Registrar una nueva colección, con el fin de poder organizar nuestros elementos por
colecciones.
2. Registrar un nuevo ítem, con el fin de poblar de elementos las colecciones.
3. Eliminar un ítem, con el fin de reflejar la desaparición de un elemento de una colec-
ción.
4. Eliminar una colección, con el fin de reflejar la desaparición de una colección.
5. Modificar un ítem, con el fin de aumentar o corregir los detalles del elemento.
6. Modificar una colección, con el fin de aumentar o corregir los detalles de la colección.
Diseñar una interfaz elegante y sencilla, con el fin de que sea atractiva para el usuario y,
al mismo tiempo, acompañe la facilidad de uso haciendo que sea accesible a todo tipo de
usuarios.
Ofrecer acceso a las colecciones e ítems públicos de otros usuarios, dado que queremos
también centrarnos en una parte social.
1.3. Plan de Trabajo
Para comenzar se realizó un trabajo de investigación sobre las formas de gestión de colec-
ciones actuales y sobre las aplicaciones disponibles en las diferentes plataformas con este fin.
Para ello, en la medida de lo posible, se descargaron las aplicaciones y se hicieron pruebas de
uso, observando las diferentes funcionalidades que ofrecían. También se realizó un trabajo de
investigación en los sistemas de desarrollo disponibles para la programación tanto del cliente
multiplataforma como del servidor.
Con el fin de realizar un trabajo iterativo de mejora y aumento de funcionalidades se empezó
realizando una aplicación multiplataforma completamente local, con el fin de ofrecer un lugar en
el que registrar y mantener las colecciones. Esta parte del proyecto, junto a las modificaciones
3para la sincronización con el servidor, se encuentra disponible en el siguiente repositorio de
GitHub1 .
A continuación se quiso implementar el servicio de sincronización, empezando con la imple-
mentación del lado del servidor en el que se almacenan los datos de los usuarios. Este desarrollo
incluye tanto el almacenamiento de los datos en el servidor como la API de sincronización para
la aplicación. El código de este se encuentra disponible en el siguiente repositorio de GitHub2 .
Para dar uso al servidor, posterior a su desarrollo se realizaron las modificaciones pertinentes
a la aplicación, dejando así disponible la sincronización de colecciones e ítems en la aplicación.
Esta integración incluyó una gran cantidad de pruebas con el fin de confirmar que la aplicación
seguía siendo accesible sin hacer uso de la sincronización al mismo tiempo que se comprobaba
en otras pruebas que la sincronización funciona perfectamente.
Finalmente se desarrollo el contendido de esta memoria, con el fin de plasmar todo el
desarrollo del proyecto y dejar constancia de las tomas de decisiones realizadas a lo largo de
todo el trabajo.
Con el fin de mostrar los tiempos dedicados a cada uno de los bloques del desarrollo de este
TFG, se ha realizado un diagrama de Gantt, disponible en la Figura 1.1.
1.4. Organización de esta memoria
Con el objetivo de aclarar la redacción de la memoria y poder acceder más rápidamente a
la parte deseada, a continuación se incluye una breve descripción de que se puede encontrar en
cada capítulo:
En el Capítulo 2 se detalla las posibles plataformas de destino, así como el estado actual
de las aplicaciones con el mismo o parecido cometido que la planteada y las posibles
plataformas para el desarrollo de la aplicación y el servidor.
En el Capítulo 3 se habla en detalle de las plataformas de destino finales, los diseños de
arquitectura del servidor y la aplicación, los casos de uso de la aplicación así como del
diseño final de las bases de datos, tanto la local de la aplicación como la del servidor.
1
https://github.com/pablolop002/Collectio-Mobile
2
https://github.com/pablolop002/Collectio-Server
45
Figura 1.1: Diagrama de Gantt.En el Capítulo 4 se detalla todo el desarrollo de la aplicación, el diseño de la interfaz y
los diferentes componentes añadidos durante el desarrollo.
En el Capítulo 5 se analiza los resultados obtenidos de las métricas obtenidas del uso de
la aplicación y los comentarios recibidos de los usuarios.
En el Capítulo 6 se comenta la experiencia y fundamentos desarrollados durante la rea-
lización del proyecto y algunas de las ideas que no han podido ser realizadas y podrían
ser interesantes para un trabajo futuro.
6Capítulo 2
Estado del Arte
Tras definir la motivación y el propósito de este proyecto, se van a analizar la situación actual
del mercado de las aplicaciones y las plataformas para el desarrollo de nuestra aplicación. La
intención con este capítulo es ofrecer una vista sobre las aplicaciones ya disponibles, con sus
virtudes y carencias, y analizar las diferentes plataformas y los diferentes sistemas que se pueden
usar para llevar a cabo el desarrollo de la aplicación.
2.1. Dispositivos móviles
En la actualidad, existen multitud de dispositivos móviles que van desde los teléfonos más
simples a dispositivos con una gran cantidad de electrónica conglomerada en pequeños relojes
o pulseras cuantificadoras, pasando por todo tipo de teléfonos modernos y con el rendimien-
to propio de dispositivos más grandes como los ordenadores y otros dispositivos iguales con
mayor pantalla denominados tablets. A continuación revisaremos los detalles de cada tipo de
dispositivo:
Smartphones: Estos dispositivos acostumbran a tener un tamaño medio, entre cuatro
y siete pulgadas de pantalla con el fin de ofrecer gran comodidad al transportarlos, ya
que están pensados para que nos acompañen a todos los sitios, y adicionalmente que sea
cómodo poder manejarlos con una sola mano. Este suele ser el centro de operaciones
de otros dispositivos conectados ya que suelen delegar el procesamiento a este. Es la
evolución directa de los teléfonos, añadiendo funcionalidades que antiguamente estaban
disponibles en las PDAs u ordenadores de bolsillo y evolucionando otras funcionalidades
propias de los teléfonos como las llamadas y las videollamadas.
7Tablets: Estos dispositivos son básicamente como los smartphones pero con una pantalla
de mayor tamaño y, según marca y modelo, pueden disponer o no de red de telefonía para
llamadas, mensajes y/o acceso a internet. Originalmente pensados para el entretenimiento,
tanto juegos como consumo de contenido audiovisual, actualmente están muy extendidos
en el mundo laboral por su facilidad de uso y posibilidades de transporte. Algunos de
estos dispositivos son compatibles con lapiceros muy precisos, lo que los convierte en el
equipo perfecto para tomar apuntes a mano o realizar diseño gráfico.
Wearables: Estos dispositivos están centrados en la monitorización de diferentes apar-
tados de salud y deporte. Están pensados para llevarlos en la muñeca por lo que suelen
ser pequeños. Son complementos de un smartphones en la mayoría de los casos, ya que
dado su tamaño cuentan con los mecanismos para la obtención de los datos pero derivan
el procesado al teléfono e incluso algunos de estos no incluyen ningún tipo de pantalla o
forma de visualizar los datos.
Smartwatches: Estos son la mezcla o evolución de los wearables unidos a los clásicos
relojes. Son de mayor tamaño, ofreciendo una pantalla, normalmente a color, y, además
de ofrecer las funciones de salud y deporte de los wearables, ofrecen las funciones de un
reloj, añadiendo la visualización de los datos obtenidos por sus sensores y algunas otras
funciones como la notificación con vista previa de las alertas recibidas en el teléfono o el
pago en comercios entre otras opciones.
2.2. Aplicaciones móviles para el coleccionismo
En este apartado se van a analizar las opciones actualmente disponibles en el mercado para
gestionar colecciones, ya sean para algún tipo de coleccionismo específico o generalista.
2.2.1. Android
La búsqueda de las aplicaciones disponibles para Android se han basado en la principal
tienda de aplicaciones de esta plataforma, Google Play. Esta búsqueda ha arrojado unas cuantas
aplicaciones, algunos de los resultados más interesantes son analizados a continuación. De forma
adicional, en la Tabla 2.1 se puede observar una comparación de las aplicaciones analizadas.
8Control de Colecciones Mi colección
Colecciones
colecciones de cromos de juegos
Múltiples
Si Si No No
temáticas
Backup/
No Backup Backup Sincronización
sincronización
Funciones
No No No Si
sociales
Tipo Gratis Gratis Gratis Gratis
Gratis
Si No No No
limitado
Multi idioma Si Si No No
Última
2021 Si 2021 2021
actualización
Tabla 2.1: Comparación de las aplicaciones disponibles en Android.
Colecciones - Eerton Menezes
Ofrece una gestión básica de colecciones. No ofrece ninguna función social ni forma de
compartir tus colecciones con otros usuarios. La versión gratuita solo permite una cantidad
limitada de artículos y solo dispone de una foto por artículo. Hay una opción dentro de la
aplicación para mejorar a la versión de pago que ofrece 2 fotografías por artículo y una cantidad
ilimitada de estos. En la Figura 2.1 se puede observar el icono de la aplicación.
Figura 2.1: Logo de la aplicación Colecciones de Eerton Menezes.
Control de colecciones - Augusto App Mobile
Es una aplicación sencilla completamente local para gestionar las colecciones. Ofrece copias
de seguridad para poder restaurarlo en otro dispositivo Android, ya que no se ha encontrado
9su homónima en la tienda de aplicaciones de iOS. Los detalles de las colecciones son bastante
limitados al solo incluir un campo descripción y no poder añadir información según el tipo de
elementos de la colección. La interfaz está diseñada acorde a las ultimas guías de diseño de
Android, aunque algunos apartados de configuración están excesivamente condensados. Adi-
cionalmente está soportada por publicidad. En la Figura 2.2 se puede observar el icono de la
aplicación.
Figura 2.2: Logo de la aplicación Control de colecciones de Augusto App Mobile.
Colecciones de cromos - Emilio Sarabia
Aplicación muy sencilla centrada de forma exclusiva en la gestión de colecciones de cromos.
Con un diseño acorde a la última fecha de actualización, 2014, tiene los elementos básicos
de diseño de Android de entonces. Permite realizar copias de seguridad de la aplicación para
posteriormente poder realizar restauraciones. En la Figura 2.3 se puede observar el icono de la
aplicación.
Figura 2.3: Logo de la aplicación Colecciones de cromos de Emilio Sarabia.
10Mi colección de juegos - WHYNOT Applications
Centrada en las colecciones de juegos, es una aplicación en la que vienen los juegos ya
registrados y tu los añades a tu colección o a tu lista de deseados, requiriendo cuenta para
esto. También dispone de avisos de lanzamientos de juegos, un apartado de noticias con ofertas
en juegos actuales y se pueden visitar los perfiles de otros usuarios, donde aparecen los juegos
que tienen por plataforma, imágenes compartidas por los usuarios y un sistema de chats para
interactuar con otros usuarios. En la Figura 2.4 se puede observar el icono de la aplicación.
Figura 2.4: Logo de la aplicación Mi colección de juegos de WHYNOT Applications.
2.2.2. iOS e iPadOS
La búsqueda de las aplicaciones disponibles para iOS e iPadOS se ha basado en la única
tienda de aplicaciones disponible en esta plataforma, la Apple App Store, ya que no resulta
viable analizar las aplicaciones disponibles mediante el Jailbreak del dispositivo, que es una
práctica que consiste en modificar el software del dispositivo para saltarse las medidas de
seguridad y limitaciones impuestas en este por Apple ofreciendo acceso, entre otras cosas, a
tiendas no oficiales. De forma adicional, en la Tabla 2.2 se puede observar una comparación de
las aplicaciones analizadas.
myCollections PRO
Esta aplicación de gestión de colecciones ofrece copias de seguridad en local, en iCloud y
vía servidor. Algunas funciones como el acceso a colecciones de otros usuarios o la importación
de catálogos requieren una cuenta. Como lado negativo, los detalles del objeto solo ofrece un
nombre, una imagen representativa, una valoración de estrellas y 3 atributos como máximo por
11myCollections Colecciones
Collect All (Lite) iDatabase
PRO familiares
Múltiples
Si Si Si Si
temáticas
Backup/
Ambos Backup Backup Backup
sincronización
Funciones
Si No No No
sociales
Tipo Gratis Gratis Gratis Pago
Gratis
Si No Si -
limitado
Multi idioma Si Si Si Si
Última
2019 2021 2018 2020
actualización
Tabla 2.2: Comparación de las aplicaciones disponibles en iOS/iPadOS.
elemento. Es necesario realizar un pago por cada catálogo o colección nueva añadida. En la
Figura 2.5 se puede observar el icono de la aplicación.
Figura 2.5: Logo de la aplicación myCollections PRO.
Colecciones familiares
Esta aplicación ofrece la gestión de colecciones de forma básica y local. Permite la sincro-
nización de las colecciones en iCloud para poder recuperarlas en otro dispositivo y permite
compartir los objetos de las colecciones por diferentes redes sociales. En los detalles de los obje-
tos ofrece una gran cantidad de campos. Como lado negativo, el aspecto visual de la aplicación
se siente sobrecargado y en algunos casos no se puede distinguir bien el texto del fondo. En la
Figura 2.6 se puede observar el icono de la aplicación.
12Figura 2.6: Logo de la aplicación Colecciones familiares.
Collect All (Lite)
Es una aplicación básica de gestión de colecciones. Permite tener tantas colecciones y ele-
mentos como se desee pero los detalles de los elementos están limitados a nombre e imagen en
la versión gratuita. Como añadidos interesantes permite exportar una colección a ficheros .csv
o .pdf y los elementos de cada colección por separado a ficheros .pdf. Como aspectos negati-
vos, no se pueden hacer copias de los datos para restaurarlos en otro dispositivo ni dispone de
sincronización con un servidor o servicios como Dropbox (servicio de alojamiento de archivos
multiplataforma en la nube) o iCloud (sistema de almacenamiento de archivos en la nube de
Apple Inc.). En la Figura 2.7 se puede observar el icono de la aplicación. Lamentablemente, a
septiembre de 2021 la aplicación ya no está disponible en la App Store.
Figura 2.7: Logo de la aplicación Collect All (Lite).
iDatabase
En este caso nos encontramos ante una aplicación de pago. Esta ofrece una gestión local de
las colecciones, ofreciendo al usuario establecer campos propios, con disponibilidad de diferentes
13tipos de datos, por colección para los elementos de esta. También ofrece plantillas de ejemplo
de colecciones. Utiliza Dropbox para la copia de seguridad de la base de datos de colecciones y
permite sincronización por wifi entre las aplicaciones de iOS, iPadOS y macOS, las plataformas
de móvil, tablet y escritorio de Apple Inc respectivamente. En la Figura 2.8 se puede observar
el icono de la aplicación.
Figura 2.8: Logo de la aplicación iDatabase.
2.2.3. Multiplataforma
En esta sección se incluyen las aplicaciones multiplataforma encontradas y servicios, prin-
cipalmente webs, con APIs públicas para sincronizar y obtener los datos.
MyCollections - Altova GmbH
Es una aplicación multiplataforma para todo tipo de colecciones, con funciones sociales y
sistema de compra-venta integrado en la aplicación. La interfaz se siente bastante condensada,
no está adaptada a pantallas curvas muy comunes en teléfonos actuales y solo sirve para ges-
tionar tus colecciones, ya que la visualización de colecciones de otros usuarios te redirige a una
web. Para el primer inicio de la aplicación, requiere conexión a internet de forma obligatoria,
sino se queda en una pantalla de carga eterna, por lo que si el servidor no está disponible no
puedes empezar a usar esta. En la Figura 2.9 se puede observar el icono de la aplicación.
Aplicaciones de registro de visionado de series o películas
En este apartado nos vamos a centrar en Trakt, una de las plataformas más usadas para
registrar el visionado de películas y series; crear y mantener listados; comentar y debatir sobre
el contenido; y almacenar las temporadas, series y películas que tenemos, tanto física como
14Figura 2.9: Logo de la aplicación MyCollections de Altova GmbH.
digitalmente.
Esta plataforma es una red social en la que puedes ir indicando que visionados multimedia
vas realizando, pudiendo valorar con una escala del 1 al 10 y/o dejar comentarios sobre las
series, ya sea de manera genérica, de una temporada o de un episodio en especifico; o películas.
También dispone de listas para, por ejemplo, tener que contenido tienes pendiente de ver; un
calendario para ir informando de nuevos lanzamientos del contenido que has visto o estas viendo
y una colección, donde puedes marcar que contenido tienes, ya sea en cd, dvd, blu-ray o digital.
Como ejemplos de estas aplicaciones tenemos Infuse, Watcht, Rippple y Serist entre otras
para iOS e iPadOS o SeriesGuide, MovieBase, Hobi y Showly entre otras para Android.
Aplicaciones de compra-venta como todocolección
Aunque propiamente no son herramientas de gestión de colecciones, plataformas como to-
docolección o catawiki merecen una mención ya que forman parte en un grado muy importante
en las colecciones, ya que pertenecen al apartado de compra-venta de estas. En estas platafor-
mas puedes encontrar prácticamente cualquier objeto coleccionable que desees para ampliar tu
colección y al mismo tiempo puedes vender todo aquello que ya no te interese.
2.3. Plataformas de desarrollo para el cliente multipla-
taforma
Dado que vamos a priorizar que sea una aplicación multiplataforma, quedan descartados
los desarrollos nativos para ambas plataformas (Android e iOS), dada la dificultad de mante-
15nimiento a largo plazo de 2 clientes con las mismas características al mismo tiempo. Por tanto,
barajamos las opciones de desarrollo con las 3 herramientas multiplataforma más conocidas [2].
Podemos observar una pequeña comparación preliminar en la Tabla 2.3.
Flutter React Native Xamarin
Desarrollador Google Facebook Microsoft
Fundado 2017 2015 2011
Lenguaje Dart JavaScript C#, XAML
Componentes Pub NPM/Yarn Nuget
IDE Android Studio - Visual Studio (for Mac)
Multiplataforma Si Si Xamarin.Forms
Integración con código nativo Si Si Si
Tabla 2.3: Comparación frameworks desarrollo móvil.
2.3.1. Flutter
Flutter es el framework de desarrollo multiplataforma creado y soportado por Google. Como
ventajas, ofrece una solución completa con todo lo necesario para realizar el desarrollo, tiene
una gran biblioteca de recursos prediseñados aunque también ofrece una gran personalización
y es completamente gratuito.
En contra de este framework tenemos que no expone al desarrollador las APIs específicas
de las plataformas, aunque si hay capas conjuntas de determinados elementos, como la cámara,
micrófono y GPS entre otros; al ser tan joven no dispone de una gran comunidad y al generar los
binarios de instalación de las aplicaciones estos son de gran tamaño por la capa de traducción
necesaria entre el lenguaje nativo y el lenguaje dart, algo que se puede ir subsanando con el
tiempo y el desarrollo de este framework.
2.3.2. React Native
React Native es el framework de desarrollo multiplataforma de Facebook. Ofrece una interfaz
de usuario muy parecida a una interfaz nativa, con una gran biblioteca de recursos prediseñados,
opción de optimización mediante el uso de código nativo y completamente gratuito.
En contra de este framework tenemos que la navegación dentro de la aplicación no es tan
agradable e intuitiva como la navegación nativa y no funciona bien con interfaces complejas y
con muchas animaciones.
162.3.3. Xamarin
Xamarin es el framework de desarrollo de Microsoft. Empezó siendo un desarrollo de los
miembros del proyecto mono hasta que fueron comprados por Microsoft y en el futuro se
integrará con las herramientas de .NET con la versión 6 del lenguaje, ganando compatibilidad
de desarrollo para Windows y macOS con el mismo código compartido.
Es conocido por ser el framework que ofrece uno de los mejores rendimientos, llegando al
punto de parecer completamente nativo. Ofrece una capa de abstracción para el desarrollo
multiplataforma muy completo (Xamarin.Forms), que incluso permite la personalización de sus
elementos mediante el uso de Xamarin nativo. Dada su antigüedad, tiene una gran cantidad de
componentes, tanto oficiales como no oficiales disponibles y dispone de un gran apoyo por parte
de la comunidad al ser software libre. Añadimos como ventaja el conocimiento ya adquirido por
haber trabajado con este sistema anteriormente.
En contra tenemos un tamaño de binario de aplicación mayor por la necesidad de incorporar
la biblioteca mono para traducir las llamadas C# a nativas, aplicaciones muy pesadas en caso
de requerir muchos gráficos como por ejemplo juegos.
2.3.4. Selección de la plataforma
Una vez comparadas las diferentes plataformas de desarrollo, finalmente se decide hacer uso
de Xamarin.Forms para el desarrollo de la aplicación, dado que es una plataforma madura, con
una gran comunidad, muy bien documentada y adicionalmente conocida y muy usada por el
integrante del TFG. Finalmente añadimos como característica decisiva que la aplicación podrá
ser migrada a .NET MAUI sin tener que realizar cambios en el código ganando una versión de
la aplicación para Windows y macOS.
2.4. Plataformas de desarrollo para el servidor
Con la elección del framework para el desarrollo del cliente multiplataforma para dispositivos
móviles y planteada la funcionalidad social de la aplicación, es necesario investigar y elegir el
lenguaje en el que se desarrollara las funciones de servidor de la aplicación.
En la Tabla 2.4 se puede observar una pequeña comparación de las tres opciones planteadas
[3].
17PHP ASP.NET NodeJS
Desarrollador PHP Group Microsoft OpenJS Foundation
Fundado 1995 2002 2009
Lenguaje PHP C# JavaScript
Componentes Composer Nuget NPM
IDE - Visual Studio -
Tabla 2.4: Comparación software desarrollo servidor.
2.4.1. ASP.NET
ASP.NET es la implementación de Microsoft .NET para servidores web. Inicialmente se
plantea el uso de este como opción para desarrollar el servidor por la posibilidad de compartir
código, como los modelos, con el cliente ya que ambos usan C#. El problema más llamativo es
el completo desconocimiento sobre su funcionalidad al no parecerse a los lenguajes web clásicos.
2.4.2. NodeJS
NodeJS es un servidor basado en el motor de JavaScript de Google Chrome. Es relativa-
mente reciente pero ha cosechado un gran apoyo por parte de la comunidad gracias al uso
de JavaScript. Tiene componentes desarrollados por la comunidad bien asentados aunque en
algunos casos, igual que pasa con PHP, los componentes de terceros usan implementaciones
propias de funciones haciendo que el tamaño del código crezca con funciones repetidas. Como
ventaja adicional esta el conocimiento de esta plataforma al ser la usada en la asignatura de
Desarrollo Web de la carrera.
2.4.3. PHP
PHP es el lenguaje por excelencia para la programación del servidor. Esta muy bien docu-
mentado y tiene un gran soporte por parte de la comunidad. Como problemas tenemos una
difícil depuración y solución de fallos por la naturaleza del sistema ya que prioriza mantener
el servicio disponible a verificar el correcto funcionamiento y que la mayoría de componentes
de la comunidad usan implementaciones propias de funciones, por tanto, el tamaño del código
crece de forma rápida al usarlos.
182.4.4. Selección de la plataforma
Una vez comparadas las diferentes plataformas de desarrollo del servidor, finalmente se de-
cide hacer uso de NodeJS para el desarrollo de la aplicación, dado que es una plataforma en
constante desarrollo pero estable, con una gran comunidad, muy bien documentada y adicio-
nalmente esta plataforma es la que se usa durante el cuarto curso de la carrera Ingeniería del
Software en la asignatura de Aplicaciones web.
19Capítulo 3
Diseño de la Aplicación
Como ya se ha comentado en la Sección 1.4, en este capítulo se va a hablar en detalle de
las plataformas de destino finales, los diseños de arquitectura tanto del servidor como de la
aplicación, los casos de uso de esta, así como del diseño final de las bases de datos, tanto la
local de la aplicación como la del servidor.
3.1. Dispositivo hardware elegido
Con el fin de facilitar el acceso a los datos en cualquier sitio, se ha decidido hacer una
aplicación móvil multiplataforma para smartphones que soporta los dos principales sistemas
operativos para estos dispositivos, iOS/iPadOS y Android. Esto se ha decidido así ya que el
diseño de este tipo de dispositivos ofrece una serie de características interesantes como: una
pantalla multitáctil, que ofrece una forma de navegación sencilla; una pantalla a color, que
ofrece la posibilidad de visualizar las fotografías de los diferentes elementos coleccionables; es
un dispositivo portable, por tanto se puede acceder a sus contenidos desde cualquier lugar; y
finalmente, dispone de conexión a internet, por tanto nos permite acceder al contenido que no
se encuentra en el dispositivo.
Dado que queremos una aplicación lo más sencilla y accesible posible, las compatibilidades
de Android parten de la versión 5 del sistema operativo, ya que, aunque Google ya no ofrece
datos actualizados del uso de su sistema1 , Android Studio ofrece unas estimaciones. Según estas
estimaciones las versiones de Android anteriores a Lollipop (5.0) suman una cuota de mercado
total del 5.9 % del total de dispositivos Android activos. En el caso de iOS/iPadOS, la aplicación
es compatible desde la versión 11 del sistema operativo. Según los datos de distribución oficiales
1
https://developer.android.com/about/dashboards/
20de Apple, si solo se soportara las dos últimas versiones del sistema, iOS/iPadOS 13 y 14,
dejaríamos fuera un 8 % de móviles iOS activos y un 16 % de tablets iOS, ya que Apple no
distingue en versiones más antiguas en los últimos datos publicados (3 de junio de 20212 ).
Sabiendo esto, hemos navegado por internet hasta descubrir un usuario que actualiza los datos
de uso de su aplicación [4], aclarando que, siempre en relación a su aplicación, solo un 1.8 % de
dispositivos usa una versión anterior a iOS 11.
3.2. Arquitectura del servidor
Para el desarrollo del servidor se ha seguido una estructura híbrida, como se puede observar
en la Figura 3.1 en la que se ha separado las clases de conexión con la base de datos de la lógica
de negocio y la capa de comunicación con la aplicación. En este caso, al no contar con diferentes
capas de comunicación o con una implementación web de la aplicación, la capa de negocio está
unida a la capa de comunicación, aunque dentro de esto está separado por funcionalidades. Esto
nos ofrece una estructura de carpeta conformada por los archivos de traducción; la carpeta de
contenido público; los DAO, componentes software que ofrece una interfaz de conexión con
la base de datos para el tipo de dato deseado; los archivos de gestión de rutas (routers); la
carpeta de almacenamiento, que a su vez se encuentra dividida en documentación, imágenes
del servicio, logs, los archivos de creación de la base de datos; y las vistas. Adicionalmente, en
la raíz del directorio se encuentran los archivos de configuración y dependencias de NodeJS y
archivos de configuración de servicios adicionales implementados como Crowdin, usado para la
gestión de traducciones.
Figura 3.1: Arquitectura usada en el servidor.
3.3. Arquitectura de la App multiplataforma
Antes de desarrollar la arquitectura de la aplicación, se va a profundizar un poco en el
funcionamiento de Xamarin y Xamarin.Forms. Para ilustrar este funcionamiento disponemos
2
Web oficial de Apple: https://developer.apple.com/support/app-store/
21de la Figura 3.2, en la que se puede observar el detalle de las 3 plataformas de destino disponible
para Xamarin aunque una de ellas, Windows Phone, se encuentra en desuso dado que el sistema
ya no está soportado.
Figura 3.2: Arquitectura de Xamarin.
En esta arquitectura Xamarin.Forms, la capa en la que se programa de forma compartida
para los 3 sistemas, es la más alta. Esta se ayuda de la implementación especifica de Xamarin
para cada arquitectura: Xamarin.Android, Xamarin.iOS y la Plataforma Universal de Windows.
Estas capas a su vez se ayudan de la biblioteca de .NET Standard, que es el interprete que
abstrae las funciones a las APIs de las plataformas en una API accesible desde C#. Finalmente
todo esto se ejecuta sobre el interprete Mono, que originalmente funcionaba como maquina
virtual para traducir el tiempo de ejecución el código pero que gracias a los años de desarrollo
actualmente se traduce en tiempo de compilación en código nativo, en el caso de Android e iOS
y sobre .NET nativo en el caso de Windows Phone.
Para el desarrollo de la aplicación multiplataforma se ha decidido hacer uso de una estruc-
tura Modelo-Vista-Modelo de vista por el único oficialmente soportado en el framework usado,
22Xamarin.Forms [5], como bien se puede observar en la documentación oficial de comparación
entre este y la nueva versión, .NET MAUI3 .
En esta configuración, reflejada en la Figura 3.3, se separa la lógica de las vistas de la repre-
sentación de la misma. Con esto se consigue una estructura desacoplada que permite modificar
una parte sin tener que alterar la otra parte. La comunicación entre las partes se basa en las
notificaciones, de lo cual se encarga la implementación de Xamarin.Forms de esta estructura
[6]. Esta estructura se respalda en una estructura de carpetas con la misma diferenciación en
la que se dispone de las carpetas “Models”, que incluye los objetos usados para la transmisión
de los datos entre el modelo y la vista y entre el cliente y el servidor; “ViewModels”, donde
está toda la lógica necesaria para las vistas; y “Views”, donde se encuentran finalmente las vis-
tas con algunos componentes que no pueden ser separados de esta como los argumentos de la
navegación de rutas de Xamarin.Shell. Adicionalmente se incluyen las carpetas “Repositories”,
que incluye el acceso a la base de datos SQLite de la aplicación y dispone de las funciones para
sincronizar con el servidor en caso de que el usuario inicie sesión [7]; “Resources”, que incluye
las fuentes de iconos usadas de FontAwesome en la aplicación y los archivos de recursos de texto
usados para las traducciones de la aplicación; y “Utils”, que esta conformado por una serie de
clases de ayuda en determinados componentes como el de las estadísticas de AppCenter, las
funciones que requieren implementaciones propias de la plataforma de destino (iOS/Android)
o la implementación de la encapsulación realizada de la clase HttpClient que es la encargada
de realizar la conexión con el servidor.
Figura 3.3: Arquitectura Modelo-Vista-Modelo de vista usado en la aplicación.
Adicionalmente se desarrollo un mockup del diseño de la aplicación mediante la herramienta
Figma. Este mockup, observable en la Figura 3.4, es accesible desde la web de la plataforma
mediante el siguiente enlace4 .
3
https://github.com/dotnet/maui/wiki/Xamarin.Forms-vs-.NET-MAUI
4
https://www.figma.com/file/zj6tQBBo7zLzyQVoMzqAm5/Colecciones?node-id=0%3A1
23Figura 3.4: Mockup en el servicio de Figma.
3.4. Casos de uso
En nuestra aplicación se puede observar la existencia de un solo actor, el coleccionista. Para
este actor disponemos los siguientes casos de uso:
Caso de uso de crear colección, reflejado en la Tabla 3.1, muestra los pasos a realizar para
la creación de una colección en el sistema.
Caso de uso de crear ítem, reflejado en la Tabla 3.2, muestra los pasos a realizar para la
creación de un ítem en el sistema.
Caso de uso de editar colección, reflejado en la Tabla 3.3, muestra los pasos a realizar
para la edición de una colección del sistema.
Caso de uso de editar ítem, reflejado en la Tabla 3.4, muestra los pasos a realizar para la
edición de un ítem del sistema.
Caso de uso de eliminar colección, reflejado en la Tabla 3.5, muestra los pasos a realizar
para la eliminación de una colección del sistema.
24Caso de uso de eliminar ítem, reflejado en la Tabla 3.6, muestra los pasos a realizar para
la eliminación de un ítem del sistema.
Caso de uso de duplicar ítem, reflejado en la Tabla 3.7, muestra los pasos a realizar para
la creación de un ítem a raíz de otro ítem del sistema.
Caso de uso de visualizar colección, reflejado en la Tabla 3.8, muestra los pasos a realizar
para la visualización de los detalles de una colección del sistema.
Caso de uso de visualizar ítem, reflejado en la Tabla 3.9, muestra los pasos a realizar para
la visualización de los detalles de un ítem del sistema.
Caso de uso de compartir colección, reflejado en la Tabla 3.10, muestra los pasos a realizar
para compartir con otro usuario una colección del sistema.
Caso de uso de compartir ítem, reflejado en la Tabla 3.11, muestra los pasos a realizar
para compartir con otro usuario un ítem del sistema.
Caso de uso de iniciar sesión, reflejado en la Tabla 3.12, muestra los pasos a realizar para
la creación de una cuenta en el sistema y acceder a la misma o el acceso a una cuenta ya
registrada en el sistema.
Caso de uso de editar usuario, reflejado en la Tabla 3.13, muestra los pasos a realizar para
editar un usuario ya registrado en el sistema.
25CU-01 Crear colección
Descripción Crear colección
Autor Coleccionista
Título
Categoría
Entradas Descripción
Fotografía representativa
Privada o publica
Salidas Redirección a la lista de colecciones
Precondición Tener al menos los campos obligatorios (título, categoría) rellenos
Validar los datos introducidos.
En caso de error mostrar este.
Secuencia En caso de sesión iniciada llamar a la API de creación
En caso de error con la API mostrar este.
Volver a la pantalla de lista de colecciones
Postcondición Colección creada
Tabla 3.1: Caso de uso 01: Crear colección.
CU-02 Crear ítem
Descripción Crear ítem
Autor Coleccionista
Título
Subcategoría
Descripción
Entradas
Fotografías
Privado o publico
Campos adicionales
Salidas Redirección a la lista del contenido de la colección
Precondición Tener al menos los campos obligatorios (título, subcategoría) rellenos
Validar los datos introducidos.
En caso de error mostrar este.
Secuencia En caso de tener sesión iniciada llamar a la API de creación.
En caso de error con la API mostrar este.
Volver a la pantalla de lista del contenido de la colección
Postcondición ítem creado
Tabla 3.2: Caso de uso 02: Crear ítem.
26CU-03 Editar colección
Descripción Editar una colección
Autor Coleccionista
Entradas Colección a editar
Salidas Redirección a la lista de colecciones
Precondición Tener al menos los campos obligatorios (título) rellenos
Validar los datos introducidos.
En caso de error mostrar este.
Secuencia En caso de tener sesión iniciada llamar a la API de actualización.
En caso de error con la API mostrar este.
Volver a la pantalla de lista de colecciones
Postcondición Colección actualizada
Tabla 3.3: Caso de uso 03: Editar colección.
CU-04 Editar ítem
Descripción Editar ítem
Autor Coleccionista
Entradas ítem a editar
Salidas Redirección a la lista del contenido de la colección
Precondición Tener al menos los campos obligatorios (título, subcategoría) rellenos
Validar los datos introducidos.
En caso de error mostrar este.
Secuencia En caso de tener sesión iniciada llamar a la API de actualización.
En caso de error con la API mostrar este.
Volver a la pantalla de lista del contenido de la colección
Postcondición ítem actualizado
Tabla 3.4: Caso de uso 04: Editar ítem.
CU-05 Eliminar colección
Descripción Eliminar una colección
Autor Coleccionista
Entradas Colección a eliminar
Salidas Redirección a la lista de colecciones
Precondición Ser el propietario de la colección
Seleccionar la colección a eliminar.
Comprobar propiedad, en caso negativo mostrar error.
Mostrar dialogo de confirmación.
Secuencia
En caso de tener sesión iniciada llamar a la API de eliminación.
En caso de error con la API mostrar este.
Volver a la pantalla de lista de colecciones
Postcondición Colección eliminada
Tabla 3.5: Caso de uso 05: Eliminar colección.
27También puede leer
