TFG Juan Diego Valencia Marin

Universidad Politécnica
de Madrid
Escuela Técnica Superior de
Ingenieros Informáticos
Grado en Ingeniería Informática
Trabajo Fin de Grado
Diseño y desarrollo de una aplicación

móvil para georreferenciación de
imágenes de proyectos: FotoTIC
Autor: Juan Diego Valencia Marin

Tutor: Raúl Alonso
Madrid, marzo 2022

Este Trabajo Fin de Grado se ha depositado en la ETSI Informáticos de la
Universidad Politécnica de Madrid para su defensa.
Trabajo Fin de Grado

Grado en Ingeniería Informática
Título: Diseño y desarrollo de una aplicación móvil para georreferenciación de
imágenes de proyectos: FotoTIC
Junio 2022
Autor: Juan Diego Valencia Marin
Tutor:
Raúl Alonso Calvo
Departamento de Lenguajes y Sistemas Informáticos e Ingeniería del
Software
ETSI Informáticos
Universidad Politécnica de Madrid
Resumen
El presente trabajo de fin de grado (TFG) en una aplicación Android, realizar la
toma de fotografías georreferenciadas, customización de los nombres de los
archivos de cada imagen previamente definidos y la compresión de los mismos
para compartirlos mediante medios habituales como mail, mensajería
instantánea, etc.
Esta app en adelante llamada FotoTIC aplica al sector de las telecomunicaciones,
concretamente en el ámbito de las instalaciones y manipulación de equipos de
conmutación de datos, llevadas a cabo en salas técnicas, sin embargo, se podría
aplicar a cualquier modelo que requiera documentarse ordenadamente,
cronológicamente y detalladamente, ya que cómo más adelante se explicará en
este documento, la aplicación permite a través de plantillas predefinir el número
de ítems (fotografías) con su respectivo nombre, FotoTIC mejorará los tiempos
de entrega que debe hacer la empresa instaladora a sus clientes en materia de
documentación, y facilitará a los técnicos la tarea de recopilar las imágenes en
la fase final de instalación.
Personalmente, la realización de una aplicación para una empresa siempre me
ha resultado interesante y me ha parecido una tarea fundamental como
profesional, ya que se obtiene esa experiencia de trabajar para un cliente y
cumplir con sus requisitos y expectativas.
Esta aplicación está en una fase floreciente, debido a que su funcionalidad está
ajustada a los requisitos básicos y específicos de la empresa, cumpliendo una
ejecución lineal, es decir, realizando únicamente los pasos para suplir la
necesidad solicitada. Esta necesidad consta de los siguientes pasos:
x Realización de fotos georreferenciadas nombrándolas según un formato
específico.
x Creación de una carpeta para almacenar estas imágenes y comprimirla
una vez finalizada la revisión.
x Compartir este archivo comprimido mediante las tecnologías conocidas
(WhatsApp, Microsoft Teams, correo electrónico, etc.)
Al ser una necesidad concreta, estas funciones se cumplen actualmente
mediante dos aplicaciones externas, estando atado a su funcionamiento y no
pudiendo ajustarse a lo que realmente se desea. En este punto, toma
protagonismo este trabajo, realizando todas las funciones mencionadas
agilizando el trabajo, evitando la pérdida de datos y el mal entendimiento que
puede llegar a ocurrir realizando estas tareas por separado.
Como se mencionó anteriormente, la aplicación se ha desarrollado para
dispositivos móviles Android, siendo el entorno de trabajo Android Studio,
mediante el lenguaje de programación Java y algunas librerías adicionales.
Por lo tanto, el objetivo es que un técnico tenga un acceso instantáneo a la
aplicación para realizar su trabajo de un modo eficiente y sencillo.
i
Abstract
The present final degree project (FDP) in an Android application, take
georeferenced photographs, customize the names of the previously defined files
of each image and compress them to share them through usual means such as
mail, instant messaging, etc.
This app, hereinafter called FotoTIC, applies to the telecommunications sector,
specifically in the field of installation and manipulation of data switching
equipment, carried out in technical rooms, however, it could be applied to any
model that requires orderly documentation, chronologically and in detail, since
as will be explained later in this document, the application allows, through
templates, to predefine the number of items (photographs) with their respective
name, FotoTIC will improve the delivery times that the installation company
must make to its clients in terms of documentation, and will make it easier for
technicians to collect images in the final phase of installation.
Personally, making an application for a company has always been interesting to
me and it has seemed like a fundamental task as a professional, since you get
the experience of working for a client and meeting their requirements and
expectations.
This application is in a flourishing phase because its functionality is adjusted
to the basic and specific requirements of the company, fulfilling a linear
execution, that is, carrying out only the steps to meet the requested need. This
need consists of the following steps:
x Execution of georeferenced photos naming them according to a specific
format.
x Creation of a folder to store these images and compress it once the
revision is finished.
x Sharing this zip file using known technologies (WhatsApp, Microsoft
Teams, email, etc.)
Being a specific need, these functions are currently fulfilled by two external
applications, being tied to their operation and not being able to adjust to what
is desired. At this point, this work takes center stage, performing all the
functions, speeding up the work, avoiding data loss and the misunderstanding
that can occur when performing these tasks separately.
As mentioned above, the application has been developed for Android mobile
devices, being the Android Studio work environment, using the Java
programming language and some additional libraries.
Therefore, the objective is that a technician has instant access to the application
to carry out his work in an efficient and simple way.
ii
Tabla de contenidos
1 Introducción ......................................................................................1
1.1 Motivación y Objetivos ........................................................................ 1
2 Estado del arte ..................................................................................3
2.1 Aplicaciones móviles ........................................................................... 3
2.1.1 Historia ........................................................................................ 3
2.1.2 Aplicaciones más utilizadas ......................................................... 4
2.1.2.1 Facebook .................................................................................. 4
2.1.2.2 YouTube ................................................................................... 4
2.1.2.3 Instagram ................................................................................. 4
2.1.2.4 WhatsApp ................................................................................. 4
2.2 Sistema operativo iOS, iPhone ............................................................ 4
2.2.1 Historia ........................................................................................ 5
2.2.2 Lenguajes de programación para iOS ........................................... 5
2.2.2.1 Objective-C ............................................................................... 5
2.2.2.2 Swift ......................................................................................... 5
2.3 Sistema operativo Android .................................................................. 6
2.3.1 Historia ........................................................................................ 6
2.3.2 Lenguajes de programación para Android .................................... 6
2.3.2.1 Kotlin ........................................................................................ 6
2.3.2.2 Java .......................................................................................... 7
2.3.2.3 JavaScript ................................................................................ 7
2.3.2.4 C# ............................................................................................. 7
3 Desarrollo ..........................................................................................8
3.1 Tecnologías y herramientas de trabajo ............................................... 8
3.1.1 Herramientas utilizadas ............................................................... 8
3.1.2 Lenguajes de programación ........................................................ 12
3.1.3 Librerías/Bibliotecas .................................................................. 13
3.2 Diseño de la aplicación ..................................................................... 14
3.2.1 Diagrama de clases .................................................................... 14
3.3 Mockups .......................................................................................... 14
3.4 Implementación ................................................................................ 31
3.4.1 Metodología de trabajo ............................................................... 31
3.4.2 Funcionalidades ......................................................................... 32
3.4.3 Estructura ................................................................................. 32
3.4.3.1 Diagrama de pantallas ............................................................ 32
3.4.3.2 Casos de uso........................................................................... 34
3.4.3.3 Flujo de pantallas ................................................................... 41
3.4.4 Toma de decisiones .................................................................... 50
iii
3.4.4.1 Cuestiones de flujo de datos ................................................... 50
3.4.4.2 Cuestiones de diseño .............................................................. 51
3.4.5 Pruebas y evaluación ................................................................. 51
3.5 Plan de trabajo ................................................................................. 51
3.5.1 Lista de tareas ........................................................................... 52
3.5.2 Diagrama de Gantt..................................................................... 53
4 Conclusiones y visión a futuro .........................................................56
4.1 Conclusiones .................................................................................... 56
4.2 Visión a futuro ................................................................................. 56
5 Análisis de Impacto .........................................................................58
6 Referencias ......................................................................................59
7 Índice de figuras ..............................................................................61
8 Índice de tablas ...............................................................................63
iv
1 Introducción
El presente trabajo pretende solventar una necesidad en el ámbito de la
instalación de equipos de telecomunicaciones agilizando el proceso en la fase
crucial e importante de instalación final, que permite visualizar gráficamente al
cliente a través de las imágenes tomadas con dispositivos móviles los trabajos
desarrollados por la empresa instaladora, para su correcta documentación y
clasificación, que le permitirá en un futuro el mantenimiento, ampliación y
control de los equipos y dispositivos presentes en cada implementación. Para
ello se utilizan imágenes georreferencias fecha, coordenadas y renombramiento
de imágenes acordes con las capturas realizadas de los equipos implicados.
Esta aplicación no solo realizará fotos georreferenciadas, ya que esta
característica está presente en muchas aplicaciones de terceros en la actualidad,
sino que tiene la capacidad de importar plantillas con los títulos de las imágenes
deseadas, almacenar todas las imágenes en una carpeta, comprimirla y
compartirla mediante el medio que se desee. Facilitando de este modo el trabajo
a los técnicos que realizan la toma de imágenes, siendo estos, el colectivo que
utilizará la herramienta en campo. No obstante, no serán los únicos
beneficiados, ya que al georreferenciar las imágenes y al crear la carpeta,
guardando el nombre del operario, se facilita la recopilación de información por
parte del departamento de despliegue encargado de manipular y documentar
las imágenes para poder cotejar las informaciones entre áreas con el fin de
mejorar y contrastar que la instalación es acorde a los procedimientos de
instalación contemplados, así mismo entregar las imágenes al cliente final
acordes a los requisitos y plazos estipulados.
Actualmente, estas tareas se realizan mediante varias aplicaciones, una de ellas
para tomar las fotos georreferenciadas y otra para guardar las fotos en una
carpeta accesible por un ordenador. Mediante el ordenador se renombran las
imágenes, se genera un archivo comprimido y se comparte. La nueva aplicación
FotoTIC pretende entre otros, cubrir estos vacíos y facilitar notablemente este
proceso.
Finalmente, la metodología de trabajo utilizada es el modelo de prototipos,
presentándolos constantemente a la empresa para su aprobación, más adelante
se profundiza y se muestran los modelos propuestos con los cambios
correspondientes.
1.1 Motivación y Objetivos
Automatismos y Montajes S.L es una empresa instaladora del sector de las

comunicaciones, dedicada a ofrecer servicios de montaje, migración, cambio,
despliegue y desmontaje de equipos de conmutación de datos para operadores
de telecomunicaciones, fabricantes e integradores, en dicha actividad interviene
un importante proceso cómo lo es del documentar fotográficamente las obras y
actuaciones que se acometen en cada despliegue realizado, los clientes exigen
dentro de los servicios que prestan, fotos con una marca de agua donde indique
la fecha, hora y coordenadas donde fue hecha la captura, es aquí donde surge
la necesidad de realizar una aplicación que permita de una manera dinámica a
nuestros técnicos realiza la toma de imágenes, adaptándose a la casuística y
peculiaridad que cada proyecto exige, actualmente las herramientas que se
1
usan permiten cumplir con dicho objetivo pero sacrificando tiempo, es decir, los
técnicos entregan las fotos, el departamento de despliegue se encarga de
renombrar cada imagen y clasificarla para poder subirla a los repositorios de
los clientes, la necesidad de contar con una app que permita a los técnicos
realizar la documentación de cada proyecto según la plantilla que se le indique
y que la propia aplicación pueda nombrar a cada imagen con el campo especifico
que se desea, permitirá mejorar los tiempos de entrega, los tiempos de
documentar y permitirá agilizar el proceso iniciado en campo hasta la entrega
final.
Los “partners” que colaboran con la empresa, también se beneficiarán de dicha
herramienta ya que actualmente no existe un sistema genérico que permita
unificar todo el proceso en una determinada instalación, por lo que apuestan
por el desarrollo de esta app cómo punto de partida para mejorar los servicios
que prestan a sus clientes en materia documental, ya que la entrega ágil, rápida,
efectiva y de calidad de dichos reportes, les permiten ver el trabajo realizado en
sus instalaciones en un tiempo más corto que el actual.
Por lo tanto, está app a la carta también permitirá allanar el camino para
futuros cambios.
2
2 Estado del arte
Este capítulo se centra en la base teórica sobre el desarrollo de aplicaciones

móviles, en concreto Android junto con sus tecnologías. Por lo cual, se ha
llevado a cabo una investigación previa para su adecuada comprensión.
2.1 Aplicaciones móviles
Hoy por hoy, convivir en la sociedad actual sin un dispositivo móvil parece una
idea descabellada, es por ello por lo que día a día numerosas empresas apuestan
por desarrollar aplicaciones que puedan ser visualizadas y ejecutadas en estos
dispositivos, con el fin de ayudar a ejecutar las labores que se desempeñan en
entornos que exigen una herramienta que por su tamaño, usabilidad y facilidad
de transporte cumpla y satisfaga los objetivos propuestos, sin apartarnos claro
de la posibilidad de comunicarnos vía oral, los dispositivos cada día se adaptan,
evolucionan, mejoran y acompañan al hombre, integrándose en su vida laboral
y personal, la posibilidad de crear “app” abreviatura de la palabra inglesa
“application” hace que dicha interacción se estreche buscando mejorar en la
mayoría de casos, nuestra calidad de vida, nuestra productividad laboral,
diversión y no menos importante, mantenernos informados en un mundo digital
conectado que carecería de sentido si no existieran los dispositivos móviles.
Según el diccionario panhispánico del español jurídico [1], una aplicación móvil
es un programa informático destinado a ser ejecutado en teléfonos inteligentes,
tabletas u otros dispositivos móviles. Pueden tener una gran variedad de
funcionalidades, desde algo tan básico como ver la hora, programar una alarma
o visualizar el calendario, hasta algo tan complejas como videojuegos en
“streaming” [2], visualización de videos en directo, redes sociales donde se
pueden realizar fotos o videos, subirlos y enviar y recibir mensajes entre otras
funciones.
Por otra parte, una de las principales diferencias y características de las
aplicaciones es el sistema operativo, debido a que su programación, subida al
mercado e incluso visualización pueden variar en función del especificado. Los
más grandes y conocidos son iOS y Android. Los cuales se comentará en los
siguientes capítulos, profundizando más en Android ya que es en este sistema
operativo en el que se desarrolla esta aplicación.
2.1.1 Historia
Para conocer la primera aplicación de la historia, hay que remontarse a finales

de los años noventa, siendo estas básicas en comparación con las actuales,
como por ejemplo aplicaciones de contactos, agenda, editores de tono de
llamada, etc. Pero innovadoras en su día, pues ya no se tenía que memorizar
los números de teléfonos, sino que se guardaban en el propio móvil.
En 1994 aparece el primer juego como aplicación de móvil, ni más ni menos que
Tetris, y poco tiempo después el juego Snake. Comenzando así la era de las
aplicaciones móviles, pero la verdadera evolución no ocurre hasta el año 2008
3
cuando de la mano Apple llegan los “markets” [3], tiendas online accesibles
desde el propio dispositivo móvil en donde se pueden descargar aplicaciones y
juegos. Y posteriormente aparece el de Android. [4]
En la actualidad, los móviles ahora llamados smartphones, debido a la pantalla
táctil y sus amplias funcionalidades, son una herramienta indispensable. Y
cerca del 90% tiempo de uso del móvil es utilizando aplicaciones, por ello tienen
un gran impacto en el presente y en el futuro, por su posible evolución centrada
en la inteligencia artificial, la realidad aumentada y las aplicaciones en la nube.
[5]
2.1.2 Aplicaciones más utilizadas
Las aplicaciones más descargadas y usadas tanto en iOS como en Android son
las siguientes.
2.1.2.1 Facebook
Facebook es una red social que fue creada para poder mantener en contacto a
personas, y que éstos pudieran compartir información, noticias y contenidos
audiovisuales con sus propios amigos y familiares. [6, 7]
2.1.2.2 YouTube
YouTube es un sitio Web que permite a sus usuarios subir vídeos para que otros
puedan consumirlos en cualquier momento y de manera Online. [8, 9]
2.1.2.3 Instagram
Instagram es una red social y una aplicación móvil al mismo tiempo, que
permite a sus usuarios subir imágenes y vídeos con múltiples efectos
fotográficos como filtros, marcos, colores retro, etc., para posteriormente
compartir esas imágenes en la misma plataforma o en otras redes sociales. [10,
11]
2.1.2.4 WhatsApp
WhatsApp es una aplicación gratuita y ofrece mensajería y llamadas de una

forma simple, segura y confiable, y está disponible en teléfonos en todas partes
del mundo. [12, 13]
2.2 Sistema operativo iOS, iPhone
Como este proyecto no está basado en iOS, solo se realizará una llana
investigación. Este sistema operativo es conocido como “el sistema operativo de
4
la manzana” (Apple), y su nombre proviene de iPhone Operative System o
Sistema Operativo de iPhone.
Se trata de un sistema cerrado que no puedes utilizar salvo en dispositivos de
marca Apple. La gran diferencia con Android es esta: el sistema operativo de
Google puede instalarse en infinidad de teléfonos de todas las marcas, pero iOS
es un sistema cerrado y exclusivo para los aparatos de la marca.
2.2.1 Historia
El primer iPhone llegó en 2007 buscando revolucionar el mercado de la telefonía,

un teléfono con pantalla táctil capacitiva de 3,5 pulgadas de tipo LCD y que
permitía conectarse a WiFi, sin embargo, no había App Store. La cual llegó en
junio de 2008 y el iPhone comenzó a dar pasos agigantados, comenzando con
500 aplicaciones y multiplicando enormemente esa cifra cada año, habiendo en
2009 unas 50.000 aplicaciones disponibles.
No obstante, el 29 de junio de 2009 se lanzó oficialmente el iPhone OS. Lo que
supuso un paso más en lo que actualmente conocemos: Steve Jobs salía al
escenario para presentar su nuevo teléfono, pero también para explicar que, a
partir de ese momento, iPhone OS pasaría a denominarse definitivamente iOS.
[14]
2.2.2 Lenguajes de programación para iOS
En cuanto lenguajes para este sistema operativo, los más usados y conocidos
son los siguientes.
2.2.2.1 Objective-C
Objective-C [15] es un lenguaje orientado a objetos, permite la reutilización de

código informático y se basa en el lenguaje de programación C.
Aunque funcional, y muy popular, Objetive-C es un lenguaje de programación
bastante antiguo y complicado para aquellos que nunca han programado. Por
ello, Apple creó otro lenguaje de programación universal para todos sus
sistemas y dispositivos: Swift.
2.2.2.2 Swift
Swift [16] como código abierto, es uno de los lenguajes más recientes diseñados
para ser mejor que sus antecesores. Siendo unas de las mejoras principales su
facilidad de uso y aprendizaje, junto con su rendimiento y seguridad. Dado que
cuenta con una estructura robusta que obliga a cumplir una serie de requisitos
para garantizar una mayor seguridad.
5
2.3 Sistema operativo Android
Android es un sistema operativo pensado para teléfonos móviles, desarrollado

por Google y basado en el kernel de Linux, núcleo del sistema operativo, libre,
gratuito y multiplataforma.
Como se mencionó, una de las grandes características de este sistema operativo
es que es completamente libre. No es necesario pagar en nada para programar
en este sistema ni para incluirlo en un teléfono. Y esto lo hace muy popular
entre fabricantes y desarrolladores, ya que los costes para lanzar un teléfono o
una aplicación son muy bajos.
Así mismo, cualquiera puede bajarse el código fuente, inspeccionarlo,
modificarlo e incluso ejecutarlo. Lo que provoca una gran confianza y seguridad
en los usuarios, y gracias a esto permite detectar fallos más rápidamente.
2.3.1 Historia
La empresa que permitió el nacimiento de Android llevaba su propio nombre,

Android Inc, fundada en el año 2003. Siendo un sistema operativo orientado
inicialmente para las cámaras digitales y que permitía conectarlas con el PC sin
la necesidad de cables.
Sin embargo, no era muy conocido hasta que en 2005 Google lo compró. Y en
2007 se lanzó la Open Handset Alliance (OHA), alianza comercial que se creó
con el propósito de desarrollar estándares abiertos para dispositivos móviles. La
OHA tiene aproximadamente 80 empresas miembros, incluidas HTC, Dell, Intel,
Motorola, Qualcomm y Google. Cuyo principal producto es la plataforma
Android.
Aunque los inicios fueran un poco lentos, debido a que se lanzó antes el sistema
operativo que el primer móvil, rápidamente Android [17] se situó como uno de
los sistemas operativos de móviles más vendido del mundo.
2.3.2 Lenguajes de programación para Android
En el caso de Android hay más variedad de lenguajes de desarrollo, siendo los

más populares los siguientes.
2.3.2.1 Kotlin
Kotlin [18] es el lenguaje utilizado por la mayoría para la programación en

Android. Su popularidad se debe a los beneficios que ofrece a los
desarrolladores: un código sencillo e intuitivo, sin renunciar a la eficiencia. Se
inspira fundamentalmente en Scala, pero mejorando la velocidad de
compilación, y Java, entre otros.
En 2019, Android declara ser Kotlin First. Desde entonces, Google recomienda
desarrollar los proyectos nuevos exclusivamente en Kotlin.
6
2.3.2.2 Java
Android se ha diseñado con Java [19] , por lo que durante mucho tiempo ha
sido el lenguaje de programación por defecto para el desarrollo de aplicaciones
en este sistema operativo. Este lenguaje es rápido, sencillo y ofrece un amplio
rango de aplicaciones. Por ello, sigue siendo uno de los más populares en la
programación en Android.
2.3.2.3 JavaScript
JavaScript [20] es el lenguaje de programación multiplataforma más usado en

general, según Github [21] . En el marco específico de desarrollo móvil, se puede
usar cuando se pretende crear aplicaciones híbridas, aunque destaca
principalmente por la optimización de las funcionalidades de las páginas web y
las interfaces de usuario, haciéndolas más dinámicas e interactivas.
2.3.2.4 C#
C# [22] también es multiplataforma y, por lo tanto, una buena alternativa para

la construcción de aplicaciones híbridas. Orientado a objetos, destaca la
influencia de Java en su sintaxis, así como su sencillez y versatilidad.
7
3 Desarrollo
En este capítulo se van a definir los aspectos de la codificación, tanto como las
herramientas de desarrollo como la metodología seguida para el código o
ejecución de las tareas.
3.1 Tecnologías y herramientas de trabajo
Se comenzará comentando las herramientas utilizadas a lo largo de la

realización de la aplicación.
3.1.1 Herramientas utilizadas
x GIMP
Programa para retocar, componer y editar imágenes. Se ha utilizado para
realizar el logo de la aplicación.
Figura 1. Logo de GIMP
x Balsamiq Wireframes
Herramienta para Windows que podemos utilizar para organizar
visualmente nuestras ideas para crear prototipos que muestren
interfaces de usuario en desarrollo. Si necesitamos hacer wireframes,
bocetos, maquetas o prototipos de un proyecto, con este programa
generaremos fácilmente lo que queremos y lo mostraremos con claridad.
Utilizada para mostrar el primer boceto.
8
Figura 2. Logo de balsamiq Wireframes
x Justinmind
Programa utilizado para el prototipo de cualquier aplicación web o móvil.
Tanto para sitios web y aplicaciones para la web, iOS y Android con una
intuitiva interfaz de arrastrar y soltar, además de no involucrar ningún
código.
Figura 3. Logo de Justinmind
x Lucidchart
Lucidchart es una plataforma de diagramación que permite trabajar en
un documento con otros usuarios al mismo tiempo, en pocas palabras,
un espacio digital para crear en equipo sin importar el lugar donde se
encuentren. Empleada en la diseño y realización de los diagramas de
clases.
Figura 4. Logo de Lucidchart
9
x GitHub
Portal creado para alojar el código de las aplicaciones de cualquier
desarrollador, creada para que los desarrolladores suban el código de sus
aplicaciones y herramientas, y que como usuario no sólo puedas
descargarte la aplicación, sino también entrar a su perfil para leer sobre
ella o colaborar con su desarrollo. Como su nombre indica, la web utiliza
el sistema de control de versiones Git (diseñado por Linus Torvalds), con
el que los desarrolladores pueden administrar su proyecto, ordenando el
código de cada una de las nuevas versiones que sacan de sus
aplicaciones para evitar confusiones. Empleado para el control de
versiones.
Figura 5. Logo de GitHub
x Android Studio
Android Studio es el entorno de desarrollo integrado (IDE) oficial para el
desarrollo de apps para Android y está basado en IntelliJ IDEA. Ofrece
incluso más funciones que aumentan tu productividad cuando desarrollas
apps para Android. IDE utilizado para el desarrollo de la aplicación.
Figura 6. Logo de Android Studio
x Microsoft Word
Software informático procesador de texto, uno de los más utilizados a la
hora de trabajar con documentos digitales, que nació de la mano de IBM
en 1981. Empleado para la realización de este documento.
10
Figura 7. Logo de Microsoft Word
x Microsoft Excel
Excel es una hoja de cálculo que nos permite manipular datos numéricos
y de texto en tablas formadas por la unión de filas y columnas. Una hoja
de cálculo es lo que utilizaban los contadores para llevar registros, esto
se utilizaba mucho antes de que aparecieran las computadoras. Mediante
este programa se realizó el Diagrama de Gantt.
Figura 8. Logo de Microsoft Excel
x Microsoft PowerPoint
Microsoft PowerPoint (PPT) es un software de ofimática diseñado para
realizar presentación de diapositivas. Fue creado a mediados de los años
80 y vendido en 1987 a Bill Gates, convirtiéndose en un producto estrella
de la compañía Microsoft. Empleado para la presentación de la memoria
final en la defensa de esta TFG.
11
Figura 9. Logo de Microsoft PowerPoint
3.1.2 Lenguajes de programación
El lenguaje de programación utilizado es Java, bastante conocido globalmente

y utilizado durante la carrera. También se ha empleado xml, y aunque no sea
un lenguaje de programación, se ha añadido en este punto.
x Java
Java es un lenguaje de programación de propósito general, concurrente
y orientado a objetos diseñado específicamente para tener la menor
cantidad posible de dependencias de implementación. Originalmente
desarrollado por James Gosling de Sun Microsystems (la cual fue
adquirida por la compañía Oracle) y publicado en 1995 como un
componente fundamental de la plataforma Java de Sun Microsystems.
Su sintaxis deriva en gran medida de C y C++, pero tiene menos
utilidades de bajo nivel que cualquiera de ellos.
Figura 10. Logo de Java
x XML
XML, acrónimo de Extensible Markup Language, es un lenguaje de
marcado que define un conjunto de reglas para la codificación de
documentos. Siendo el lenguaje de marcado un conjunto de códigos que
se pueden aplicar en el análisis de datos o la lectura de textos creados
por computadoras o personas.
12
Figura 11. Logo de xml
3.1.3 Librerías/Bibliotecas
x Android SDK
El SDK de Android es un conjunto de herramientas y bibliotecas de
desarrollo de software que se requieren para desarrollar aplicaciones
Android.
Figura 12. Logo de Android SDK
x JDK
Java Development Kit es un software que provee herramientas de
desarrollo para la creación de programas en Java.
Figura 13. Logo de JDK
13
3.2 Diseño de la aplicación
En este apartado se expondrá la interfaz de la aplicación desde un punto de

vista teórico, se explicará las decisiones tomadas junto con sus motivos y el
propio flujo para realizar las funciones requeridas.
3.2.1 Diagrama de clases
Los diagramas de clases [23], son una forma eficiente de entender el diseño de
un programa, permitiendo modelar relaciones entre las diferentes entidades.
A continuación, se muestra el diagrama de este proyecto:
3.3 Mockups
Un mockup, es un fotomontaje a través del cual los diseñadores gráficos pueden

presentar sus propuestas a los clientes. Siendo el cliente, en este caso, la
empresa que requiere esta aplicación. A continuación, se procede a mostrar los
distintos mockups que se realizaron a lo largo de este periodo:
1. Primer modelo.
Este modelo se realizó con la herramienta Balsamiq Wireframes,
mostrando el primer boceto y una pequeña aproximación a como sería
la aplicación en un dispositivo Android.
Figura 14. Primer boceto, pantalla 1
Pantalla principal, mediante la cual se escogería la plantilla a utilizar.

14
Se tenía una idea de una barra lateral para escoger algunas

funcionalidades extras, como la ubicación de los archivos.
Pantalla que avisa si la localización de la ruta de archivos es la

predeterminada.
15
Mensaje de alerta para que el usuario permita a la aplicación acceder a

su ubicación con el objetivo de georreferenciar las fotos.
Pantalla con los datos básicos de la obra y los botones para realizar las
fotos con sus nombres provenientes de la plantilla seleccionada.
16
Al pulsar el botón de finalizar, se procede a guardar y comprimir los

archivos.
El loader muestra al usuario que está ejecutando la acción de guardar y

comprimir los archivos.
17
Mensaje de alerta que pregunta al usuario si desea compartir el archivo

comprimido.
Acción de compartir los archivos comprimidos mediante el propio sistema

Android del dispositivo.
18
2. Segundo modelo.
A partir de este modelo, ya se comenzó a utilizar la herramienta
Justinmind, con el objetivo de realizar los mockups un poco mas
visuales y amenos al cliente.
Figura 23. Segundo boceto, pantalla 1
Pantalla principal ya con la idea de tener una imagen representativa de

la aplicación, y con un botón flotante para seleccionar la ruta de archivos.
Mensaje de alerta si no se ha seleccionado una ruta para los archivos

mediante el botón flotante.
19
Pantalla para seleccionar la ruta para los archivos mediante el botón

flotante anterior.
Mensaje de alerta para permitir a la aplicación acceder a la ubicación.
20
Pantalla con la plantilla seleccionada más los botones de guardar,

comprimir y compartir añadidos.
Mensaje de alerta y loader que aparecen al pulsar el botón de guardar.
21
Mensaje de alerta y loader que aparecen al pulsar el botón de comprimir.
Mensaje alerta que advierte al usuario que no se puede compartir los

archivos si previamente no se ha realizado la acción de guardar y
comprimir.
22
Mensaje de alerta para compartir los archivos sin ningún problema previo.
Acción de compartir los archivos comprimidos mediante el propio sistema

Android del dispositivo.
3. Tercer modelo.
23
A partir de este punto, los cambios no son tan significativos, por lo que
se mostrarán únicamente los cambios indicando las pantallas a las que
hacen referencia.
Figura 33. Tercer boceto, pantalla 1
Se realiza el cambio del botón flotante a un icono de una carpeta y se

elimina la opción de crear plantilla, ya que no necesitan esa opción de
momento.
Los datos del cliente y obra están en la plantilla y se toman los datos del
operario y de la fase manualmente en este punto.
24
Por último, se elimina la opción de guardar, pues se guardan las

imágenes a la vez que se realizan.
4. Último modelo.
Con este modelo ya se tenía una idea clara de cómo se quería cada
pantalla, salvo algún caso puntual que se mostrará y se hará hincapié
en el apartado 3.4.3.1 flujo de pantallas.
Figura 36. Boceto Final, pantalla Principal
Se elimina el botón de la carpeta y solo permite la opción de importar o crear.
25
Figura 37. Boceto Final, pantalla permiso ubicación
Como se definió anteriormente, la aplicación pregunta al usuario por los

permisos ubicación.
Figura 38. Boceto Final, pantalla selección de plantilla
Pantalla en la que se escoge y se obtiene la plantilla de fotos a partir del archivo

txt.
26
Figura 39. Boceto Final, pantalla de datos principales mediante importar
Pantalla en la que se reciben y se escriben los datos generales de la obra a

realizar.
Figura 40. Boceto Final, pantalla número de fotos
El dialogo de alerta aparece únicamente al pulsar el botón de realizar fotos y se

pregunta al usuario el número de fotos a realizar.
27
Figura 41. Boceto Final, pantalla de datos principales mediante realizar fotos
Pantalla parecida a la figura 39, pero en este caso se escriben los datos
generales de la obra a realizar, ya que los datos obtenidos de la otra pantalla se
reciben a través de la plantilla.
Figura 42. Boceto Final, pantalla de fotos
Pantalla en la que se visualizan las tarjetas para la realización de las fotos.
28
Figura 43. Boceto Final, pantalla de fotos con foto
Una vez realizada una foto, aparece el botón flotante con el objetivo de informar
al usuario que se pueden realizar acciones una vez has fotos tomadas.
Figura 44. Boceto Final, pantalla menú flotante comprimir
Pantalla que surge al pulsar en el botón flotante con la única opción de

comprimir.
29
Figura 45. Boceto Final, pantalla comprimir
Pantalla que se muestra la acción de comprimir una pulsado el botón flotante

de comprimir.
Figura 46. Boceto Final, pantalla menú flotante comprimir compartir
Pantalla que se muestra la opción de compartir una vez se ha pulsado el botón

flotante de comprimir.
30
Figura 47. Boceto Final, pantalla compartir
Pantalla con la acción de compartir los archivos comprimidos mediante el propio

sistema Android del dispositivo, una vez pulsado el botón flotante de compartir.
3.4 Implementación
En este apartado se discutirá como se ha implementado todo lo dicho

anteriormente en esta memoria, tal como su funcionamiento, su avance y el
ritmo de trabajo.
3.4.1 Metodología de trabajo
La metodología de un trabajo es la estrategia y el método por seguir para lograr

los objetivos planteados, en donde se describe cómo se ha desarrollado cada
paso seguido para llegar a una conclusión.
Aun conociendo la gran cantidad de metodologías existentes [24], la
seleccionada y aplicada, encontrándose dentro de las metodologías ágiles [25],
es Scrum iterativa, cuya característica principal es la realización de entregas
parciales y regulares. Por otro lado, se distingue por el punto de partida, la
definición de los objetivos del proyecto, los cuales tienen que ser priorizados de
antemano por el cliente. Aspecto que ya tenían preparado cuando se propuso
esta idea, al igual que las reuniones regulares establecidas.
Por estos motivos, entre otros, se seleccionó esta metodología.
31
3.4.2 Funcionalidades
Las funcionalidades vienen propuestas por la empresa en cuestión, por lo tanto,

se enunciarán a continuación:
x Selección de plantillas de fotos provenientes de un archivo txt.
x Una vez elegida la plantilla a utilizar pediría los DATOS GENERALES =
Cliente, Ubicación si fuese necesaria, Número de obra, Fase del Proyecto
(en este caso las posibles opciones son replanteo e instalación), Nombre
del técnico, …
x Una vez realizado el anterior paso, se ejecuta la APP y empieza a pedir
fotos (que, efectuándolas, pide confirmar o volverlas a hacer).
x Todas y cada una de las Fotos irán georreferenciada y con el NOMBRE
del CAMPO marcos en las Plantillas.
x Después de la última FOTO, la APP generará el ZIP correspondiente con
el NOMBRE (automatizado del proyecto) para que se pueda compartir.
x Dará la opción de compartir por mail, por whatsapps, por TEAMS, entre
otros.
x Posteriormente, se añadió la funcionalidad de realizar fotos sin la
necesidad de importar una plantilla.
3.4.3 Estructura
En este apartado, se procederá a explicar cómo se ha llevado a cabo la

realización de las funcionalidades y todo lo mencionado anteriormente durante
esta memoria. Considero que una imagen vale más que mil palabras, por lo que
la explicación se ejecutará de la mano de capturas de pantalla para su mejor
entendimiento y visualización de la app.
3.4.3.1 Diagrama de pantallas
Primeramente, en la siguiente figura se muestra en flujo de pantallas

mencionadas en el último modelo dentro del apartado 3.3 Mockups.
32
Figura 48. Diagrama de pantallas
33
3.4.3.2 Casos de uso
A continuación, se definen los principales casos de uso [26] de la aplicación, su

descripción y pasos para llevar a cabo el caso. Los objetos principales son los
siguientes:
x Actor: Principalmente el actor el usuario, pero se ha tomado la decisión
de poner a la aplicación como actor también para facilitar su
entendimiento.
x Sistema: La aplicación FotoTIC.
x Caso de uso: A continuación, se muestra cada caso de uso.
1. Aceptación de permisos
x Descripción
Caso de uso 01 Aceptar los permisos de ubicación.

Objetivo Obtener la ubicación y realizar la georreferencia.
Precondiciones Tener activada la ubicación.
Postcondiciones Georreferencia.
Actor primario Usuario.
Tabla 1. Descripción caso de uso 01
x Pasos
Usuario Aplicación
1. Solicitud por parta de la App
de los permisos necesarios.
2. Aceptación o negación de 3. Uso de permisos.
permisos.
Tabla 2. Pasos caso de uso 01
34
x Diagrama
Figura 49. Caso de uso ubicación
2. Importación de plantilla
x Descripción
Caso de uso 02 Importar plantilla.

Objetivo Obtener la plantilla sobre la cual se realizarán las
fotografías.
Precondiciones Almacenar una plantilla previamente en la memoria del
dispositivo móvil.
Postcondiciones Obtención y muestra de datos.
x Pasos
Usuario Aplicación
1. Selección de importar
plantilla.
2. Selección de archivo txt. 3. Lectura del archivo txt.
4. Trato y muestra de datos
provenientes del txt.
5. Escritura de último dato.
35
6. Pulsación de continuar. 7. La aplicación continua a la
siguiente pantalla.
x Diagrama
Figura 50. Caso de uso importar plantilla
3. Selección de fotos
x Descripción
Caso de uso 03 Selección de fotos sin plantilla.

Objetivo Realizar las fotografías sin plantilla.
Precondiciones Ninguna.
Postcondiciones Ninguna.
x Pasos
Usuario Aplicación
1. Selección de realizar fotos.
2. Selección de cantidad de 3. Lectura de la cantidad de
fotos. fotos a realizar.
36
4. La aplicación sigue a la
siguiente ventana.
5. Escritura de datos. 6. Lectura de datos.
7. Pulsación de continuar. 8. La aplicación continua a la
siguiente pantalla.
x Diagrama
Figura 51. Caso de uso selección de fotos
4. Realización de fotos
x Descripción
Caso de uso 04 Realización de fotografías georreferenciadas.

Objetivo Preparar la imagen con su georreferencia.
Precondiciones Lectura de plantilla o realización de fotos
predeterminada.
Postcondiciones Visualización y escritura en la fotografía realizada.
37
x Pasos
Usuario Aplicación
1. Pulsación de imagen para
realizar la foto.
2. Cambio a cámara del
dispositivo.
3. Realización y comprobación
de la foto realizada.
4. Escritura de textos encima del
layout.
5. Guardado de la imagen en el
layout.
x Diagrama
Figura 52. Caso de uso realización de fotos
5. Compresión de archivos
x Descripción
Caso de uso 05 Compresión de archivos.
38
Objetivo Comprimir en un archivo zip la carpeta con las imágenes
realizadas.
Precondiciones Carpeta creada y mínimo una foto realizada.
Postcondiciones Archivo comprimido zip.
x Pasos
Usuario Aplicación
1. Pulsación de botón de
comprimir.
2. Creación de archivo zip con
las imágenes en la carpeta
correspondiente.
3. Renombrado del archivo zip
recién creado.
x Diagrama
Figura 53. Caso de uso comprimir
6. Compartición del archivo comprimido
x Descripción
39
Caso de uso 06 Compartición del archivo comprimido
Objetivo Compartir el archivo zip creado en el anterior paso.
Precondiciones Archivo zip existente.
Postcondiciones Archivo zip compartido.
x Pasos
Usuario Aplicación
1. Pulsación de botón de
compartir.
2. Selección del archivo y
compartición.
3. Selección de aplicación para
su compartición.
4. Puesta de archivo zip en la
aplicación seleccionada.
5. Escritura opcional y envío.
x Diagrama
40
Figura 54. Caso de uso compartir
3.4.3.3 Flujo de pantallas
Antes de comenzar con la explicación, cabe destacar que la gran mayoría de

información se obtuvo de la documentación oficial de Android, Android
developers [27].
Al iniciar la aplicación, lo primero que realiza es la solicitud de los permisos, en

este caso la ubicación. Pues sin la ubicación esta aplicación perdería en gran
medida su utilidad. No obstante, si el usuario no permite el acceso a la
ubicación, posteriormente se le solicitarán de nuevo.
41
Figura 55. Permisos de ubicación
En la pantalla principal, se observa la imagen y el logo de la empresa de fondo,

insertando un pequeño toque personalizado para la empresa en cuestión.
Además, aparecen dos botones para realizar una acción cada uno, se empezará
con el botón de importar plantilla, ya que es la función principal de la aplicación
y la que tendrá más uso.
42
Figura 56. Pantalla principal
Una vez pulsado el botón de importar plantilla, se avanzará a la pantalla de

selección de plantilla, proporcionada por el sistema Android.
Figura 57. Selección de plantalla
43
Al seleccionar y aceptar la plantilla, la aplicación leerá sus datos y avanzará a
la siguiente pantalla, pantalla de datos principales mediante importar. La
cual solo es necesario rellenar un campo ya que el resto son leídos por el archivo
txt importado. Este campo, ya definido con un número máximo de caracteres,
pide las iniciales del operario que va a realizar las fotografías. Adicionalmente,
se verá un dropdown que define el tipo de obra, habiendo únicamente dos
opciones, instalación o replanteo, esta última opción es la predeterminada ya
que en la mayoría de los casos será la obra por realizar. Por último, está el
elemento “selección de cabecera”, el cual aparece en el último boceto, cuya
función es permitir visualizar el nombre de las fotos en cada elemento
seleccionable donde se realizarán las imágenes. Aunque en la última reunión se
tomó la decisión de eliminarlo, con el objetivo de que siempre sea visibles estos
nombres.
Figura 58. Pantalla datos 1 Figura 59. Pantalla datos 2 Figura 60. Pantalla datos 3
Por último, aparece un botón de comenzar, el cual comprobará que el campo de

iniciales cumple con los requisitos establecidos, y si es así, se avanzará a la
siguiente, la pantalla de fotos, la cual se comentará próximamente.
44
Figura 61. Pantalla datos 4 Figura 62. Pantalla de fotos con plantilla
Volviendo a la primera pantalla principal, se procede a seguir la acción de

guardar las fotografías, pero en esta ocasión mediante el botón de realizar fotos,
el cual provocará la aparición de un pequeño cuadro de dialogo que pregunta al
usuario sobre el número de imágenes que se van a realizar, como se puede
observar en la pantalla de número de fotos.
Figura 63. Pantalla de número de fotos
45
En el cuadro de dialogo aparecen las opciones de cancelar y aceptar, las cuales
la primera se mantiene en la pantalla actual y la segundo avanza a la siguiente,
pantalla de datos principales mediante realizar fotos. En este punto, los
datos principales no se obtienen a través de la plantilla predeterminada, por lo
que el técnico debe escribir sus datos, el cliente y todo lo relacionado con la obra
manualmente.
Figura 64. Pantalla datos Figura 65. Pantalla datos Figura 66. Pantalla datos
realizar 1 realizar 2 realizar 3
Adicionalmente, hay un botón que avanza a la pantalla de fotos mencionada

anteriormente, en donde se encuentra el fondo del asunto, la realización de las
fotografías georreferenciadas.
Si el usuario no ha aceptado el permiso de ubicación previamente, cuando
seleccione la imagen para realizar la foto, se volverá a preguntar sobre este
permiso. Y una vez realizada la acción de tomar la foto y dar el visto bueno, la
imagen se podrá observar en el “Image View”.
46
Figura 67. Pantalla de fotos 1 Figura 68. Pantalla de fotos 2 Figura 69. Pantalla de fotos 3
Únicamente cuando se ha realizado una foto, aparece el botón flotante junto

con la opción de comprimir, quedándose activo por si se desea cambiar alguna
foto, por ejemplo. Se realizó de esta forma para evitar cualquier confusión y
evitar posibles errores de intentar comprimir una carpeta vacía, cumpliendo así
el diseño minimalista e intuitivo que se mencionados posteriormente.
Cabe mencionar que la creación de la carpeta y el fichero zip, solo se crea si no

existe, y en caso de que, si existe la carpeta o el archivo zip, sobrescribe lo
anterior.
Por último, cuando se pulsa el botón flotante, se ve en la pantalla del menú
flotante.
47
Figura 70. Pantalla de fotos 4 Figura 71. Pantalla menú Figura 72. Pantalla menú
flotante 1 flotante 2
En esta pantalla, aparece un fondo blanco dejando más intuitivo los botones
situados abajo a la derecha, los cuales realizan las siguientes acciones,
comprimir y compartir.
El botón de compartir, no se visualiza hasta que no se haya comprimido la
carpeta con las imágenes correspondientes, evitando de este modo cualquier
error de entendimiento y de diseño mencionado anteriormente.
48
Figura 73. Pantalla compartir Figura 74. Pantalla compartir mediante correo
Una vez comprimidos los archivos, aparece una pantalla predeterminada de

Android para seleccionar el medio que en el que se desea compartir el archivo
comprimido. En este caso se realizó mediante la aplicación de Gmail, para
enviarlo por correo electrónico.
Como se puede observar en la pantalla compartir mediante correo, se

muestra el archivo zip generado a través de la aplicación FotoTIC, con un
mensaje predefinido por la misma aplicación.
Para finalizar, se presenta la carpeta de archivos para visualizar que la carpeta,

el archivo zip y las imágenes se han creado correctamente.
49
Figura 75. Pantalla de archivos 1 Figura 76. Pantalla de archivos 2
3.4.4 Toma de decisiones
En este apartado se resumirá la toma de decisiones al realizar la aplicación,

dividiéndose en dos secciones, cuestiones de flujo de datos y cuestiones de
diseño.
3.4.4.1 Cuestiones de flujo de datos
En cuanto al flujo de datos, las decisiones fueron corroboradas por la empresa,

junto con sus modificaciones, ya que se realizó en función de los requisitos
pedidos.
En resumen, el flujo pedido fue el siguiente:
1. Selección importar plantilla o realizar las fotos.
2. Obtención/modificación de los datos necesarios.
3. Realización de las fotos georreferenciadas.
4. Creación de carpeta.
5. Guardado de imágenes originales y georreferenciadas.
6. Compresión de la carpeta junto con sus archivos internos.
7. Compartición de dicho archivo comprimido.
50
3.4.4.2 Cuestiones de diseño
El diseño de la aplicación se ha realizado siguiendo los estilos de Material

Design [28]. Siguiendo las especificaciones tanto de los colores como los
materiales.
En cuanto a los colores de la aplicación, siguiendo los estilos mencionados

anteriormente [29], se ha seleccionado como color principal el azul, en específico
el azul 700 cuyo código de color hexadecimal es (. Y el color secundario,
es azul claro 200, con código de color hexadecimal (*%

Con respecto a los componentes y al diseño completo de la aplicación, se
seguido un diseño minimalista [30] y plano [31], debido a mi preferencia
personal, su tendencia actual y sus ventajas. Puesto que es un diseño agradable
para el usuario, simple, directo y proveyendo poca distracción del contenido
principal.
3.4.5 Pruebas y evaluación
En este punto, la aplicación ya cumple con los requisitos mínimos y se inicia la

fase del ¨testing¨, en donde los instaladores ejecutan sus tareas con la aplicación
y comentan sus impresiones, tanto errores como posibles mejoras.
A continuación, se listan algunas de las observaciones más relevantes o
mencionadas:
x Una común observación es la de realizar la aplicación más amena,
conociendo que no es el estado final ni mucho menos, mejorarían
estéticamente las pantallas.
x Si la fuente del texto del móvil es bastante grande, el texto de los botones
de la pantalla no se visualiza correctamente, incluso desapareciendo
algunos caracteres.
x El tamaño del texto del título de la foto georreferenciada es muy grande
a la hora de realizar la foto y ocupa bastante espacio, además, el color
del texto pasa a ser blanco ya que el texto de color amarillo no acaba de
gustar.
x Cotejamiento de texto a la hora de importar el nombre de las fotos, pues
si un nombre de una foto contiene /n o /0 por ejemplo, no se consigue
ni realizar ni almacenar la fotografía.
x A la hora de crear, guardar y nombrar la carpeta, si existe algún acento
o carácter especial no se visualiza correctamente el texto.
3.5 Plan de trabajo
A continuación, se muestra la aplicación teórica de la organización y

sistematización para la realización de este proyecto, utilizando principalmente
el programa Excel para la planificación y ejecución de las tareas a realizar.
51
3.5.1 Lista de tareas
En este apartado, se explicará brevemente la lista de tareas definidas al

comienzo del proyecto, las cuales se verán reflejadas en el diagrama de Gantt:
1. Selección del diseño (flujo) de la aplicación.
Este primer punto se refiere al diseño del flujo que seguirá la aplicación
para la recogida de datos, es decir, los pasos a realizar para obtener la
información deseada.
2. Abrir la cámara de fotos de la aplicación.

Al abrir la cámara, la propia aplicación te dará la opción de volver a
realizar la foto si el resultado no es el deseado o se podrá aceptar la foto
para seguir con el siguiente paso.
3. Guardar la foto realizada y verla en un layout.

Al realizar la foto, se guardará esta misma imagen con un tamaño y
resolución reducidos para su previsualización al navegar por la
aplicación.
4. Georreferencia la foto y guardarla.

Por otra parte, al realizar la foto se creará una copia de esta con los datos
especificados, como longitud, latitud, fecha y hora.
5. Selección de la carpeta de guardado de imágenes.

La aplicación al seleccionar una plantilla de fotos preguntará al usuario
el lugar en donde desea crear una carpeta que almacenará los archivos
correspondientes, dando la libertad al usuario de escoger el nombre de
la carpeta.
Esta tarea se tomó la decisión de no efectuar su realización debido a que
no era una funcionalidad necesaria ni determinante, además de añadir
un paso más para cumplir el objetivo de la aplicación.
No obstante, esta tarea se realizó previamente a la toma de decisión y
queda guardada por si en un momento dado fuera necesaria.
6. Importe de plantillas.
La aplicación permitirá la importación de plantillas con un formato
previamente definido.
7. Comprimir la carpeta con las imágenes.

Una vez finalizado los procesos anteriores, se comprimirá la carpeta
creada para su futura utilización.
52
8. Compartir el archivo comprimido.
Por último, el archivo comprimido se compartirá vía Microsoft Teams,
correo, WhatsApp, etc.
3.5.2 Diagrama de Gantt
Mediante el diagrama de Gantt [32], se muestra la planificación y ejecución de

las tareas mencionadas anteriormente, se ha separado entre meses para una
visualización más amena.
Se ha optado por la utilización de este método de planificación debido a su uso
previo a lo largo del grado cursado, su rápida creación, su agradable
visualización y para obtener una mejor visión general del proyecto.
TÍTULO DEL PROYECTO
Nombre de la empresa Leyenda: Según lo previsto Riesgo bajo Riesgo medio Riesgo alto Sin asignar
Responsable del proyecto

Fecha de inicio del proyecto: 01/03/2022 marzo
Incremento de desplazamiento: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Descripción del hito Categoría Asignado a Progreso Inicio Días m m j v s d l m m j v s d l m m j v s d l m m j v s d l m m j
Alcance del proyecto
Selección del diseño (flujo) de la aplicación Riesgo medio Juan Diego V. 100% 01/03/2022 2
Abrir la cámara de fotos de la aplicación Riesgo bajo Juan Diego V. 100% 03/03/2022 3
Guardar la foto realizada y verla en un layout Riesgo medio Juan Diego V. 100% 06/03/2022 3
Georreferencia la foto y guardarla Riesgo alto Juan Diego V. 100% 09/03/2022 14
Selección de la carpeta de guardado de imágenes Riesgo alto Juan Diego V. 100% 23/03/2022 5
Importe de plantillas Riesgo alto Juan Diego V. 100% 28/03/2022 7
Comprimir la carpeta con las imágenes Riesgo bajo Juan Diego V. 100% 04/04/2022 7
Compartir el archivo comprimido Riesgo bajo Juan Diego V. 100% 11/04/2022 5
Aplicación
Arquitectura de la aplicación Riesgo alto Juan Diego V. 100% 16/04/2022 3
Implantación de funcionalidades Riesgo alto Juan Diego V. 100% 19/04/2022 10
Diseño estético de la aplicación Riesgo medio Juan Diego V. 100% 29/04/2022 5
Memoria
Introducción Riesgo medio Juan Diego V. 100% 04/05/2022 3
Desarrollo Riesgo medio Juan Diego V. 100% 07/05/2022 10
Resultados y conclusiones Riesgo medio Juan Diego V. 100% 17/05/2022 7
Analisis de impacto Riesgo medio Juan Diego V. 100% 24/05/2022 7
Bibliografía y anexos Riesgo medio Juan Diego V. 100% 01/03/2022 93
Presentación
Diapositivas Riesgo alto Juan Diego V. 0% 03/06/2022 6
Preparación de defensa Riesgo alto Juan Diego V. 0% 09/06/2022 6
Defensa Hito Juan Diego V. 0% 15/06/2022 1
Figura 77. Diagrama de Gantt mes de marzo
53

Fecha de inicio del proyecto: 01/03/2022 abril
Incremento de desplazamiento: 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Descripción del hito Categoría Asignado a Progreso Inicio Días v s d l m m j v s d l m m j v s d l m m j v s d l m m j v s
Aplicación
Memoria
Presentación
Figura 78. Diagrama de Gantt mes de abril

Fecha de inicio del proyecto: 01/03/2022 mayo
Descripción del hito Categoría Asignado a Progreso Inicio Días d l m m j v s d l m m j v s d l m m j v s d l m m j v s d l m
Aplicación
Memoria
Presentación
Figura 79. Diagrama de Gantt mes de mayo
54

Fecha de inicio del proyecto: 01/03/2022 junio
Descripción del hito Categoría Asignado a Progreso Inicio Días m j v s d l m m j v s d l m m j v s d l m m j v s d l m m j v
Aplicación
Memoria
Presentación
Figura 80. Diagrama de Gantt mes de junio
55
4 Conclusiones y visión a futuro
Para finalizar, se presentarán reflexiones sobre el resultado final del proyecto,
un análisis de lo que funcionó, áreas que podrían mejorarse y una revisión
general de cuán útil ha sido el proyecto para mis estudios y para mi futuro
profesional.
4.1 Conclusiones
En líneas generales, estoy bastante satisfecho con el trabajo realizado, inclusive

con los percances o con los cambios del diseño de la aplicación que surgieron a
lo largo del semestre y no facilitaron las cosas.
Uno de los grandes motivos de este sentimiento, es el cumplimiento de todos los
objetivos y tareas que se propusieron al principio del proyecto, incluso
añadiendo nuevas funcionalidades que se deseaban para el futuro, una vez se
comprobara el funcionamiento de la aplicación. Además de adentrarme en el
mundo laboral y cumplir con los objetivos y expectativas puestas en mí.
Por otra parte, este proyecto me ha servido en gran medida a mejorar a nivel
personal, pues no había realizado previamente un trabajo tan laborioso y de
tanta responsabilidad únicamente por mi cuenta, conociendo de antemano que,
al ser una propuesta de TFG mía y proveniente de una empresa, contaría con
menos apoyo de mi tutor que si hubiera optado por una propuesta o tema del
profesorado. Aun así, tomé la oportunidad con decisión, acepté el desafío y me
subí a este barco desconociendo su futuro.
En cuanto al nivel profesional, también noto una gran mejora dado que tuve
que enfrentarme en varias ocasiones a reuniones y presentaciones con la
empresa, adquiriendo nuevos conocimientos y enseñando conocimientos
previos adquiridos en la universidad enseñando el trabajo realizado. Además,
realicé varias autoevaluaciones con el objetivo de mi crecimiento profesional
como mencioné anteriormente.
Asimismo, me llevo conmigo unas maravillosas experiencias, un grande y a su
vez pequeño conocimiento de Android y el entorno de las aplicaciones móviles,
ya que cada vez que investigaba y aprendía, observaba que había mucho más
que aprender y lo fascinante que puede llegar a ser este mundo del desarrollo
móvil.
En conclusión, estoy orgulloso del trabajo realizado y complacido de haber
realizado esta aplicación, ya que puedo ver los resultados desde cualquier lugar,
utilizando mi dispositivo móvil. Incluso, no sería descabellado decir me ha
despertado y consolidado el gusto e interés por la realización de aplicaciones
móviles, convirtiéndose probablemente en mi fututo hobby.
4.2 Visión a futuro
Habiendo obtenido los resultados del punto 3.4.4 Pruebas y evaluación, se

encuentran varios posibles desarrollos para mejorar tanto e flujo como la
experiencia de uso, siendo unos posibles aspectos los siguientes:
56
x Botón de información.
En caso de ayuda o de no tener claro el flujo de datos o de pantallas, se
realizaría un botón de información en cada pantalla el cual permitiría
explicar al usuario en donde está y lo que ha de realizar para ejecutar las
fotografías correctamente.
x Migración fuera de Android.

Como el proyecto se ha desarrollado en Android Studio, el sistema
compatible para su utilización es obviamente Android. No obstante, la
implementación en otros sistemas operativos como iOS, supondría un
gran avance para que los usuarios tengan la posibilidad de uso en los
sistemas operativos más utilizados actualmente.
x Implementación de las plantillas en una base de datos y obtención

de la información a partir de esta base de datos.
Con esta idea, se podría almacenar plantillas usualmente usadas sin
tener que obtener la plantilla a partir de un archivo txt, agilizando
pantallas y pulsaciones para obtener el objetivo de guardar o comprimir
las imágenes georreferenciadas.
x Diseño personalizado para la empresa cliente.

Actualmente la aplicación se podría decir que tiene un diseño estándar,
no está específicamente personalizada con la propia imagen de la
empresa, por lo tanto, realizar el diseño específico aportaría una mejora
significativa para la empresa al contemplarla como interna y de aspecto
familiar.
57
5 Análisis de Impacto
Para finalizar, en este capítulo se analizará el impacto que tendrá FotoTIC tanto
a nivel personal, empresarial como económico.
A nivel personal, esta aplicación me ayudado a adquirir una gran cantidad de
conocimientos en muchos aspectos, el adentramiento al mundo del desarrollo
de las aplicaciones móviles, la responsabilidad de cumplir los objetivos de un
proyecto de este calibre, la experiencia real de realizar un software a un cliente,
entre otros. Por este abanico de motivos, el impacto que ha generado en mí y
los resultados que obtendré gracias a esta experiencia, indudablemente
influirán en gran parte en mi futuro personal y profesional.
En cuanto al impacto empresarial y económico, la aplicación FOTO Tic traerá
consigo cuando se implemente en la empresa AMSA, mejoras significativas de
tiempos en el campo de la coordinación del departamento de despliegue y el
departamento de instalaciones, ya que las dudas y las formas de realizar el
reporte fotográfico que se generan actualmente, se verán reducidas
notablemente al tener una hoja de ruta en forma de plantilla, los instaladores
tomarán las imágenes que le indiquen los gestores de proyecto, permitiendo
tomar la imagen necesaria y adecuada cuantas veces sea necesario hasta
encontrar la ideal, también en el proceso de compresión que se realiza dentro
de la aplicación permitirá al técnico ahorrar tiempo evitando utilizar
aplicaciones de terceros, todo ello en un proceso fácil, sencillo e intuitivo.
Los beneficios se reflejarán también con la reducción de no conformidades que
se generan, cuando los clientes reclaman imágenes que con el actual sistema
se pueden omitir a la hora de realizar la toma de imágenes, de igual forma afecta
el tiempo que el departamento de despliegue invierte a la hora de organizar las
imágenes para documentarlas, ya que al venir renombradas ahorra un tiempo
considerable en la organización y clasificación cuando se crean los reportes y
documentos que se suben a los distintos repositorios y herramientas de los
clientes.
58
6 Referencias
[1] «Diccionario panhispánico del español jurídico,» [En línea]. Available:
https://dpej.rae.es/lema/aplicaci%C3%B3n-
m%C3%B3vil#:~:text=Programa%20inform%C3%A1tico%20destinado%2
0a%20ser,tabletas%20u%20otros%20dispositivos%20m%C3%B3viles..
[2] «Streaming,» [En línea]. Available:
https://espanol.verizon.com/info/definitions/streaming/.
[3] «Markets,» [En línea]. Available: https://www.tecnologiaypunto.es/que-
es-android-market/.
[4] «Historia de aplicaciones móviles,» [En línea]. Available:
https://www.duacode.com/es/blog-noticia/aplicaciones-moviles-
desarrollo-historia.
[5] «Skyscanner, historia de aplicaciones,» [En línea]. Available:
https://www.skyscanner.es/noticias/esta-es-la-historia-de-las-
aplicaciones-moviles.
[6] «Facebook,» [En línea]. Available: https://www.facebook.com/.
[7] «Que es Facebook,» [En línea]. Available:
https://webescuela.com/facebook-que-es-como-funciona/.
[8] «YouTube,» [En línea]. Available: https://www.youtube.com/.
[9] «Que es Youtube,» [En línea]. Available:
https://webescuela.com/youtube-que-es-como-funciona/.
[10] «Instragram,» [En línea]. Available: https://www.instagram.com/?hl=es.
[11] «Que es Instagram,» [En línea]. Available: https://webescuela.com/que-
es-instagram-para-que-sirve/.
[12] «WhatsApp,» [En línea]. Available: https://www.whatsapp.com/?lang=es.
[13] «Que es WhatsApp,» [En línea]. Available:
https://www.whatsapp.com/about/?lang=es.
[14] «iOS y su historia,» [En línea]. Available:
https://www.adslzone.net/reportajes/software/que-es-ios/.
[15] «Objective-C,» [En línea]. Available:
https://lenguajesdeprogramacion.net/objective-c/.
[16] «Swift,» [En línea]. Available: https://www.apple.com/es/swift/.
[17] «Android,» [En línea]. Available: https://www.android.com/intl/es_es/.
[18] «Kotlin,» [En línea]. Available: https://kotlinlang.org/.
[19] «Java,» [En línea]. Available: https://www.java.com/es/.
[20] «JavaScript,» [En línea]. Available:
https://developer.mozilla.org/es/docs/Web/JavaScript.
59
[21] «Github,» [En línea]. Available: https://github.com/.
[22] «C#,» [En línea]. Available: https://docs.microsoft.com/es-
es/dotnet/csharp/.
[23] «Lucidchart,» [En línea]. Available:
https://www.lucidchart.com/pages/es/tutorial-de-diagrama-de-clases-
uml.
[24] «Metodologías de trabajo,» [En línea]. Available:
https://thedigitalprojectmanager.com/es/metodologias-gestion-
proyectos-simplificadas/.
[25] «Metodologías ágiles,» [En línea]. Available:
https://blog.incubicon.com/tipos-de-metodolog%C3%ADas-agiles-para-
la-gestion-de-proyectos.
[26] «Casos de uso,» [En línea]. Available:
https://www.juntadeandalucia.es/servicios/madeja/contenido/recurso
/416.
[27] «Android developers,» [En línea]. Available:
https://developer.android.com/.
[28] «Material Design,» [En línea]. Available: https://material.io/.
[29] «Material Design, colores,» [En línea]. Available:
https://material.io/design/color/the-color-system.html#tools-for-
picking-colors.
[30] «Diseño minimalista,» [En línea]. Available:
https://webnova.com.ar/teoria-del-diseno-minimalista/.
[31] «Diseño plano,» [En línea]. Available:
https://www.departamentodeinternet.com/que-es-flat-design-diseno-
plano/.
[32] «Diagrama de Gantt,» [En línea]. Available:
https://www.atlassian.com/es/agile/project-management/gantt-chart.
60
7 Índice de figuras
FIGURA 1. LOGO DE GIMP ............................................................................................ 8
FIGURA 2. LOGO DE BALSAMIQ WIREFRAMES .................................................................... 9
FIGURA 3. LOGO DE JUSTINMIND .................................................................................... 9
FIGURA 4. LOGO DE LUCIDCHART ................................................................................... 9
FIGURA 5. LOGO DE GITHUB ....................................................................................... 10
FIGURA 6. LOGO DE ANDROID STUDIO ........................................................................... 10
FIGURA 7. LOGO DE MICROSOFT WORD ......................................................................... 11
FIGURA 8. LOGO DE MICROSOFT EXCEL......................................................................... 11
FIGURA 9. LOGO DE MICROSOFT POWERPOINT ................................................................ 12
FIGURA 10. LOGO DE JAVA .......................................................................................... 12
FIGURA 11. LOGO DE XML ........................................................................................... 13
FIGURA 12. LOGO DE ANDROID SDK............................................................................. 13
FIGURA 13. LOGO DE JDK .......................................................................................... 13
FIGURA 14. PRIMER BOCETO, PANTALLA 1 ...................................................................... 14
FIGURA 23. SEGUNDO BOCETO, PANTALLA 1 ................................................................... 19
FIGURA 32. SEGUNDO BOCETO, PANTALLA 10 ................................................................. 23
FIGURA 33. TERCER BOCETO, PANTALLA 1 ...................................................................... 24
FIGURA 36. BOCETO FINAL, PANTALLA PRINCIPAL............................................................. 25
FIGURA 37. BOCETO FINAL, PANTALLA PERMISO UBICACIÓN ............................................... 26
FIGURA 38. BOCETO FINAL, PANTALLA SELECCIÓN DE PLANTILLA ........................................ 26
FIGURA 39. BOCETO FINAL, PANTALLA DE DATOS PRINCIPALES MEDIANTE IMPORTAR ............... 27
FIGURA 40. BOCETO FINAL, PANTALLA NÚMERO DE FOTOS ................................................. 27
FIGURA 41. BOCETO FINAL, PANTALLA DE DATOS PRINCIPALES MEDIANTE REALIZAR FOTOS ...... 28
FIGURA 42. BOCETO FINAL, PANTALLA DE FOTOS ............................................................. 28
FIGURA 43. BOCETO FINAL, PANTALLA DE FOTOS CON FOTO ............................................... 29
FIGURA 44. BOCETO FINAL, PANTALLA MENÚ FLOTANTE COMPRIMIR .................................... 29
FIGURA 45. BOCETO FINAL, PANTALLA COMPRIMIR ........................................................... 30
FIGURA 46. BOCETO FINAL, PANTALLA MENÚ FLOTANTE COMPRIMIR COMPARTIR .................... 30
FIGURA 47. BOCETO FINAL, PANTALLA COMPARTIR ........................................................... 31
FIGURA 48. DIAGRAMA DE PANTALLAS ........................................................................... 33
FIGURA 49. PERMISOS DE UBICACIÓN ............................................................................ 42
FIGURA 50. PANTALLA PRINCIPAL .................................................................................. 43
FIGURA 51. SELECCIÓN DE PLANTALLA ........................................................................... 43
FIGURA 52. PANTALLA DATOS 1 .................................................................................... 44
FIGURA 56. PANTALLA DE FOTOS CON PLANTILLA .............................................................. 45
61
FIGURA 57. PANTALLA DE NÚMERO DE FOTOS.................................................................. 45
FIGURA 58. PANTALLA DATOS REALIZAR 1 ....................................................................... 46
FIGURA 61. PANTALLA DE FOTOS 1 ................................................................................ 47
FIGURA 65. PANTALLA MENÚ FLOTANTE 1 ....................................................................... 48
FIGURA 66. PANTALLA MENÚ FLOTANTE 2 ....................................................................... 48
FIGURA 67. PANTALLA COMPARTIR ................................................................................ 49
FIGURA 68. PANTALLA COMPARTIR MEDIANTE CORREO ...................................................... 49
FIGURA 69. PANTALLA DE ARCHIVOS 1 ........................................................................... 50
FIGURA 70. PANTALLA DE ARCHIVOS 2 ........................................................................... 50
FIGURA 71. DIAGRAMA DE GANTT MES DE MARZO ............................................................ 53
FIGURA 72. DIAGRAMA DE GANTT MES DE ABRIL.............................................................. 54
FIGURA 73. DIAGRAMA DE GANTT MES DE MAYO .............................................................. 54
FIGURA 74. DIAGRAMA DE GANTT MES DE JUNIO ............................................................. 55
62
8 Índice de tablas
TABLA 1. DESCRIPCIÓN CASO DE USO 01........................................................................ 34
TABLA 2. PASOS CASO DE USO 01 ................................................................................. 34
TABLA 10. PASOS CASO DE USO 05 ............................................................................... 39
TABLA 11. DESCRIPCIÓN CASO DE USO 06...................................................................... 40
TABLA 12. PASOS CASO DE USO 06 ............................................................................... 40
63
Este documento esta firmado por
Firmante CN=tfgm.fi.upm.es, OU=CCFI, O=ETS Ingenieros Informaticos -
UPM, C=ES
Fecha/Hora Wed Jun 01 19:44:01 CEST 2022
Emisor del EMAILADDRESS=camanager@etsiinf.upm.es, CN=CA ETS Ingenieros
Certificado Informaticos, O=ETS Ingenieros Informaticos - UPM, C=ES
Numero de Serie 561
Metodo urn:adobe.com:Adobe.PPKLite:adbe.pkcs7.sha1 (Adobe
Signature)

TFG Juan Diego Valencia Marin

Cargado por

Copyright:

Formatos disponibles

TFG Juan Diego Valencia Marin

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TFG Juan Diego Valencia Marin

Cargado por

Copyright:

Formatos disponibles

Universidad Politécnica

Grado en Ingeniería Informática

Trabajo Fin de Grado

Diseño y desarrollo de una aplicación

Autor: Juan Diego Valencia Marin

Madrid, marzo 2022

Trabajo Fin de Grado

Autor: Juan Diego Valencia Marin

1.1 Motivación y Objetivos

Automatismos y Montajes S.L es una empresa instaladora del sector de las

Este capítulo se centra en la base teórica sobre el desarrollo de aplicaciones

2.1 Aplicaciones móviles

Para conocer la primera aplicación de la historia, hay que remontarse a finales

2.1.2 Aplicaciones más utilizadas

WhatsApp es una aplicación gratuita y ofrece mensajería y llamadas de una

2.2 Sistema operativo iOS, iPhone

El primer iPhone llegó en 2007 buscando revolucionar el mercado de la telefonía,

2.2.2 Lenguajes de programación para iOS

Objective-C [15] es un lenguaje orientado a objetos, permite la reutilización de

Android es un sistema operativo pensado para teléfonos móviles, desarrollado

La empresa que permitió el nacimiento de Android llevaba su propio nombre,

2.3.2 Lenguajes de programación para Android

En el caso de Android hay más variedad de lenguajes de desarrollo, siendo los

Kotlin [18] es el lenguaje utilizado por la mayoría para la programación en

JavaScript [20] es el lenguaje de programación multiplataforma más usado en

C# [22] también es multiplataforma y, por lo tanto, una buena alternativa para

3.1 Tecnologías y herramientas de trabajo

Se comenzará comentando las herramientas utilizadas a lo largo de la

3.1.1 Herramientas utilizadas

Figura 1. Logo de GIMP

Figura 3. Logo de Justinmind

Figura 4. Logo de Lucidchart

Figura 5. Logo de GitHub

Figura 6. Logo de Android Studio

Figura 8. Logo de Microsoft Excel

3.1.2 Lenguajes de programación

El lenguaje de programación utilizado es Java, bastante conocido globalmente

Figura 10. Logo de Java

Figura 12. Logo de Android SDK

Figura 13. Logo de JDK

En este apartado se expondrá la interfaz de la aplicación desde un punto de

3.2.1 Diagrama de clases

Un mockup, es un fotomontaje a través del cual los diseñadores gráficos pueden

Figura 14. Primer boceto, pantalla 1

Pantalla principal, mediante la cual se escogería la plantilla a utilizar.

Se tenía una idea de una barra lateral para escoger algunas

Figura 16. Primer boceto, pantalla 3

Pantalla que avisa si la localización de la ruta de archivos es la

Mensaje de alerta para que el usuario permita a la aplicación acceder a

Figura 18. Primer boceto, pantalla 5

Al pulsar el botón de finalizar, se procede a guardar y comprimir los

Figura 20. Primer boceto, pantalla 7

El loader muestra al usuario que está ejecutando la acción de guardar y

Mensaje de alerta que pregunta al usuario si desea compartir el archivo

Figura 22. Primer boceto, pantalla 9

Acción de compartir los archivos comprimidos mediante el propio sistema

Figura 23. Segundo boceto, pantalla 1

Pantalla principal ya con la idea de tener una imagen representativa de