Documentos de Académico
Documentos de Profesional
Documentos de Cultura
arroll
odeunaa pp
hí
bri
das obreel
jue
go
del
aYi ncana
MásterUniver
sit
ari
oenDesar
rol
l
odeSof
twar
e
par
aDi sposi
ti
vosMóvi
les
Tr
abaj
oFi
ndeMást
er
Aut
or:
Sant
iagoMol l
áSánchez
Tut
or/es:
Ant
onioJ av
ierGal
l
egoSánc
hez
Sept
i
embr
e2022
Desarrollo de una App hı́brida
sobre el juego de la Yincana
Autor
Santiago Mollá Sánchez
Directores
Antonio Javier Gallego Sánchez
Departamento de Lenguajes y Sistemas Informáticos
Una yincana o gincana es una competición de carácter lúdico en la que los equipos
participantes deben superar una serie de pruebas y obstáculos a lo largo de un recorrido.
El tipo de pruebas que tiene que superar los equipos pueden ser pruebas de ingenio, de
habilidad, pruebas fı́sicas o pruebas deportivas. El juego acaba cuando todos los equipos
han participado en todas las pruebas y han acabado el recorrido.
Estos juegos tradicionales han ido evolucionando a lo largo de los años, pero a pesar
de ello, no han sufrido una modernización igual a la que se ha llevado a cabo con otros
juegos tradicionales que se han visto beneficiados del uso de la tecnologı́a. Gracias a la
tecnologı́a, se podrı́a facilitar el seguimiento del juego además de que podrı́a hacerlo más
interesante y facilitar su popularidad.
Esta idea de modernizar las yincanas con el uso de la tecnologı́a junto con mis deseos
de profundizar en conocimiento y el uso del GPS de los dispositivos móviles, las API
de datos y el uso herramientas que permitan crear aplicaciones multiplataforma que se
puedan ejecutar tanto en Android como en iOS, son los principales motivos por los que
ha tenido lugar este Trabajo Fin de Máster (TFM).
El objetivo de este TFM es diseñar y desarrollar una aplicación móvil que permita a
los usuarios inscribirse en yincanas y jugarlas ı́ntegramente desde su dispositivo. Una vez
inscritos en la yincana deseada, el jugador deberá encontrar todos los puntos de control
que componen la yincana en el menor tiempo posible. Para ello, el juego le mostrará
una serie de pistas como la dirección en la que está el punto y la distancia que queda
para llegar. Será decisión del jugador el elegir la ruta más corta a dicho punto. En cada
punto de control, tendrá que resolver una prueba para poder obtener las pistas para el
siguiente punto de control.
A Antonio Javier Gallego Sánchez, mi tutor del proyecto por todo el apoyo recibido
y porque sin él no hubiese podido empezar este proyecto ni llevarlo a cabo.
A Miguel Ángel Lozano Ortega, director del Máster, porque gracias a su apoyo y
ánimos he podido completar este trabajo.
A Germán Santacruz Martı́nez, porque gracias a él me apunté a realizar este máster
y porque siempre me apoyó durante la realización del mismo.
A mi mujer Mar y a mi hija Sira por todo el apoyo recibido y por estar ahı́ siempre
en los buenos y en los malos momentos.
La educación es el arma mas poderosa
que puedes usar para
cambiar el mundo
Nelson Mandela.
v
Índice general
1 Introducción 1
1.1 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Estructura del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3 Planificación y diseño 32
3.1 Metodologı́a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2 Diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.2.1 Diseño aplicación web . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.2.2 Diseño aplicación móvil . . . . . . . . . . . . . . . . . . . . . . . . 37
4 Tecnologı́as 46
4.1 Herramientas Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.2 Herramientas Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.3 Laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.4 Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.5 Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.6 Google Maps Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5 Implementación y resultados 61
5.1 Arquitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
vi
Índice general vii
6 Conclusiones 72
Bibliografı́a 78
Índice de figuras
viii
Índice de figuras ix
4.1 Pantalla del editor Visual Studio Code editando los ficheros del proyecto. 47
4.2 Pantalla de la aplicación web Bitbucket con el repositorio del proyecto. . . 47
4.3 Pantalla de la aplicación SourceTree con el repositorio del proyecto. . . . 48
4.4 Pantalla de la aplicación DataGrip conectado a la base de datos del proyecto. 49
4.5 Pantalla del terminal zsh con el cliente mariadb conectado a la base de
datos del proyecto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.6 Captura de pantalla de la web de Laravel. . . . . . . . . . . . . . . . . . . 51
4.7 Elementos del patrón MVC. . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4.8 Imagen con la polı́tica de soporte de Laravel. . . . . . . . . . . . . . . . . 54
4.9 Captura de pantalla de la web de Ionic Framework. . . . . . . . . . . . . . 55
4.10 Imagen con la polı́tica de soporte de Ionic Framework. . . . . . . . . . . . 57
4.11 Captura de pantalla de la web de Angular. . . . . . . . . . . . . . . . . . 58
4.12 Imagen con la polı́tica de soporte de Angular. . . . . . . . . . . . . . . . . 59
Las pruebas que tienen que superar los equipos pueden ser de varios tipos, como
ingenio, habilidad, fı́sicas o deportivas. El juego acaba cuando todos los equipos han
participado en todas las pruebas y han acabado el recorrido. En la actualidad, este tipo
de juegos se practica principalmente en la India.
En otros paı́ses como España ha tenido un auge estos últimos años por la pandemia
mundial de COVID-19. Se utilizó básicamente para entretener a los más pequeños en los
dı́as de confinamiento. Gracias a las yincanas que organizaron padres y madres de todo
el mundo en casa, los más pequeños pudieron sobrellevar los dı́as de confinamiento y la
imposibilidad de salir a la calle durante esos dı́as.
Repasando la historia de este juego, ya en el siglo XIX, el ejército Británico las orga-
nizaba en la India para mantener en forma a la caballerı́a y mejorar su destreza como
jinetes. Una gymkhana tı́pica consistı́a en llevar a cabo una carrera a caballo en un circui-
to serpenteante, durante la cual los participantes debı́an sortear una serie de obstáculos
consistentes en hileras de postes situados a diversas alturas, siendo penalizados si omitı́an
saltar algún obstáculo o voltean algún poste.
En sus orı́genes, en las yincanas se competı́a a caballo. Hoy en dı́a, se celebran a pie o
en todo tipo de vehı́culos como bicicletas, coches o patinetes y son muy populares como
actividades al aire libre. En los paı́ses de habla inglesa continua siendo un concurso de
equitación, generalmente infantil, en el que la agilidad de los caballos y el talento de los
jinetes se demuestra en distintas pruebas.
1
Lengua del grupo indio, procedente del indio medio, que se habla principalmente en el norte y centro
de la India, y que difiere del urdu solo en la escritura.
1
Introducción 2
Como se ha podido ver, la yincana es un juego tradicional con siglos de historia que
aún en la actualidad se sigue practicando. De manera similar a la modernización que
se ha llevado a cabo con otros juegos tradicionales, la yincana también podrı́a verse
beneficiada con el uso de la tecnologı́a, no solo para facilitar el seguimiento del juego,
sino que incluso podrı́a hacerlo más interesante y favorecer su popularidad.
1.1. Objetivos
Este proyecto nace con el objetivo de crear una aplicación que posibilite jugar al
juego de la yincana. Los jugadores se tendrán que inscribir en la yincana que deseen y
completar todas las pruebas propuestas en cada punto de control.
Para elegir el juego se utilizará el GPS del móvil para mostrarle al jugador los juegos
que están más cerca de su posición. El usuario podrá elegir el juego que le guste más y
empezar a jugar cuando esté preparado. Una vez iniciado el juego, empezará a contar
el tiempo hasta que alcance el último punto de control. Al finalizar el juego el jugador
obtendrá una clasificación y, cuando lo hayan completado todos los participantes, se
mostrará su clasificación final.
Los juegos se podrán crear desde un portal web donde los usuarios registrados tendrán
las herramientas necesarias para geolocalizar el juego que estén creando y añadirle los
puntos de control que consideren. Cuantos más puntos de control tenga el juego, más
difı́cil se considerará.
El objetivo general de este proyecto consiste en realizar una aplicación para la pla-
taforma Android y para la plataforma iOS, que integre gran parte de los contenidos
impartidos durante el máster, obteniendo un prototipo de juego que sea funcional y
sentando las bases para futuras ampliaciones.
Estudio y diseño del esquema de base de datos para guardar toda la información
necesaria de los juegos y los usuarios.
Creación de una aplicación multiplataforma que controle todo el juego. Esta aplica-
ción estará disponible en las tiendas de aplicaciones de las diferentes plataformas.
Uso del GPS del móvil para obtener la ubicación en tiempo real del jugador y poder
saber qué juegos hay activos en su zona. Además también permitirá determinar
cuándo un jugador ha llegado al punto de control correspondiente.
Creación de una aplicación web en la que los administradores de los juegos podrán
crear y administrar los juegos de la yincana.
Integración del uso de una API de mapas en la aplicación web para poder definir
los puntos de control de cada partida que tiene recorrer cada jugador.
Creación de una API para poder enviar y recibir datos de los juegos a través de la
aplicación móvil.
Definición de pistas para los puntos de control que tienen que atravesar cada ju-
gador para acabar el juego por parte de los administradores.
Y como requisitos opcionales o avanzados que se llevarán a cabo una vez se hayan
alcanzado los objetivos principales, se encuentran:
2
Testigos
Introducción 4
Por último, entre los objetivos del autor para este proyecto, tenemos:
Establecer las bases a partir de la cuales poder iniciar otros proyectos similares.
Antes de nada, hay que aclarar que las palabras yincana y gincana son sinónimos y
por tanto se va a utilizar indistintamente una de las dos para nombrar al juego.
Haciendo una búsqueda en Google[3] se puede ver que al buscar la palabra Yincana
aparecen unos 287.000 resultados, si se busca la palabra Gincana, aparecen unos 6 mi-
llones de resultados y si se busca la palabra inglesa Gymkhana, aparecen 12 millones de
resultados. Esta última búsqueda se puede ver en la figura 2.1
Analizando estos resultados se puede comprobar que las yincanas son muy populares en
Internet y es un recurso sobre todo muy usado en el mundo de la educación. También se
puede comprobar que, por su propia definición, es un tipo de juego que se puede organizar
de muchas maneras y todas ellas son correctas. Aquı́ se puede sacar una conclusión muy
clara, que es un tipo de juego muy popular y que todo el mundo, en cierta manera, juega
o ha jugado alguna vez en su vida.
6
Estado del arte 7
Para organizar una yincana, se pueden pensar en infinitos tipos de pruebas pero las
más comunes son las siguientes:
Juego del teléfono roto: se dividen los participante en dos equipos y se ponen
en dos filas. Al primero de cada fila se le transmite un mensaje que tiene que ir
retransmitiendo al segundo y éste al tercer. Cuando se llega al último de cada fila,
se dice en voz alta y gana el equipo que su mensaje sea más similar al original.
Ésta es una magnı́fica prueba para la diversión y el ingenio de los concursantes.
Juego del relevo de ciegos: se forman dos equipos y se colocan la mitad de cada
equipo en un extremo de la pista y la otra mitad en el otro extremo. A los primeros
de cada uno de los grupos de cada equipo se les venda los ojos. El participante
de un extremo tiene que llegar al otro extremo donde está su compañero con los
ojos vendados y pasarle el relevo. Este recorrido lo tiene que hacer a su vez con
los ojos vendados y siguiendo las instrucciones de los otros miembros del equipo.
Aquı́ gana el equipo que haga todos sus relevos primero. La caracterı́stica de esta
prueba es la agilidad y el equilibro de cada concursante para llegar a hacer todo el
recorrido con los ojos vendados.
Estado del arte 8
Juego de encontrar un tesoro: ésta prueba es una de las más divertidas y que se
usan más a la hora de yincanas en grupo ya que se caracteriza por la incertidumbre
y el espı́ritu de competición. Aquı́ el objetivo es encontrar un tesoro y para llegar a
él los participantes deberán resolver una serie de acertijos y pistas con la ayuda de
un mapa y su propio ingenio. Es muy importante recordar que la piedra angular de
este juego tiene como objetivo encontrar un regalo o un tesoro como recompensa
por haber superado todos los obstáculos.
Juego de carrera de sacos: este juego se puede hacer por equipos con relevos o
individualmente. Aquı́ se colocan los concursantes de pie en fila dentro de un saco
que le cubra las piernas y el se hace una carrera donde gana el primero que llegue.
Juego de buscar caramelos en harina: con las manos a la espalda, los partici-
pantes deben buscar y coger con la boca unos caramelos escondidos en un cuenco
con harina en un tiempo determinado. El que haya encontrado más caramelos gana.
Estirar la cuerda: se traza una lı́nea en el suelo que determina el punto central
de una cuerda y cada equipo tiene que estirar de los extremos de la cuerda. Gana
el equipo que supere la marca del suelo.
Relevo de zapatillas: se forman dos equipos y se dibuja una área en el centro. Los
dos primeros jugadores deben descalzarse, dejar allı́ sus zapatos y volver al punto
inicial. Cuando todos están descalzos, se inicia la segunda parte de la prueba que
consiste en correr, calzarse y volver a la meta. La gracia de este juego es que no
podrán hacerlo antes de estar debidamente calzados y ganará el equipo que acabe
primero.
Estado del arte 9
Hay más tipos de pruebas, además, siempre se pueden hacer variaciones para adap-
tarlas a los participantes o al tipo de yincana que se esté organizando. También se puede
inventar nuevas pruebas que encajen mejor con los participantes o el tipo de yincana.
2.1.2. Beneficios
El juego de la yincana tiene muchos beneficios para niños y adultos pero los principales
son los siguientes:
2.1.3. Usos
El juego de la Yincana es un juego muy heterogéneo que puede tener muchas variantes.
Gracias a esto, es un juego que puede estar dirigido tanto a niños como a adultos. Las
yincanas son una herramienta básica para educar a base de juegos y por eso mismo
constituye una herramienta muy buena que se utiliza en educación. La gincana es una
magnı́fica forma de que todos los alumnos se sientan importantes ya que todos son
imprescindibles a la hora de superar los diferentes obstáculos que se encontraran en esta
actividad, y en la vida.
En Internet hay mucho material dedicado a la aplicación de las yincanas dentro de las
aulas. El tipo de yincana que más se organiza dentro del aula son las búsquedas del tesoro
y prueba de ello es que se pueden encontrar multitud de materiales para organizarlas y
multitud de ejemplos.
También es un recurso muy bueno para fomentar el Team Building[4] en las empresas.
Gracias a las yincanas se puede mejorar las relaciones interpersonales dentro de un
grupo y este objetivo es el que se busca con el Team Building. De hecho, hay empresas
dedicadas a organizar este tipo de gincanas dirigidas a Empresas como se puede apreciar
en la figura 2.2
Las yincanas son un recurso que se utiliza muy a menudo tanto en casa como en
eventos sociales como puede ser cumpleaños, fiestas, reuniones sociales... Por ejemplo, es
común organizar alguna búsqueda del tesoro en casa o en un cumpleaños para entretener
a los más pequeños. Además en tiempos de pandemia del coronavirus se utilizaron mucho
estas búsquedas para entretener a los niños durante el confinamiento. En esos dı́as muchas
webs escribieron artı́culos dando consejos para organizar este tipo de búsquedas en casa.
Geocaching
Escape Rooms
Estado del arte 11
Figura 2.2: Gincanas organizadas por la empresa Artemis[1] que están dirigidas a todo
tipo de públicos incluidos empresas.
Orientación
Usenet en el cual los usuarios leen y envı́an mensajes textuales a distintos tablones distribuidos entre
servidores con la posibilidad de enviar y contestar a los mensajes
Estado del arte 13
Los Escape Rooms son juegos de aventura fı́sico y mental donde se encierran un grupo
de jugadores, que forman un equipo, en una habitación. El grupo de jugadores deberá ir
resolviendo enigmas y rompecabezas de todo tipo para conseguir salir de esta habitación.
Una vez que hayan salido de la habitación, entrarán en otra habitación en la que también
tendrán que resolver rompecabezas y enigmas para conseguir salir de dicha habitación.
Esto lo harán sucesivamente hasta que consigan salir de todas las habitaciones del juego
y por tanto escapen del juego. Normalmente tienen de 60 a 90 minutos para conseguir
resolver todos los enigmas y escapar.
El primer Escape Room surgió en Japón, en el año 2007 y fue creado por el guionista
y director de anime y cine Takao Kato. Hasta el 2011 no se expandieron fuera de Japón,
siendo Singapur y San Francisco las primeras ciudades donde aparecieron. Los Escape
Room siguieron crediendo y en 2017 ya habı́an más de 8000 en todo el mundo.
Estado del arte 14
Escape Room infantil: este tipo está enfocado al publico infantil. Los jugadores ya
no se encierran en una sala, si no que se puede hacer en el exterior, en un espacio
cubierto, ludotecas... Aquı́ siempre está un Game Master Junior con los jugadores
para ayudarles a conducir el juego y darles pistas.
En ambientes académicos también se han usado los cuartos de escape como una es-
trategia de “ludificación del aprendizaje”[9] o “gamificación del aprendizaje”. Con esta
estrategia lo que se persigue es fomentar el aprendizaje motivando al alumnado a apren-
der mediante el uso de elementos de juegos y diseños de videojuegos en el entorno del
aprendizaje.
2.2.3. Orientación
El corredor puede tener que llegar en un orden preestablecido a los controles o balizas
o que el orden en que se recorren las balizas sea libre. El número de balizas, la longitud
del recorrido (o extensión del terreno utilizado) y la dificultad del terreno (cuestas,
bosque, obstáculos naturales, etc.) son variables y se eligen en función del nivel de los
participantes.
Estado del arte 15
Figura 2.5: Ejemplo de Icono para señalar los puntos de control en la orientación
La orientación tiene más de cien años de historia, originario de los Paı́ses Escandina-
vos. Concretamente de Suecia donde surgió en el siglo XIX en la Academia Militar de
Karlberg. A partir de ahı́ ha ido evolucionando desde ser una pura instrucción militar
hacia un deporte competitivo para oficiales militares y más tarde para civiles. Es un
deporte muy popular en los Paı́ses Escandinavos que se extendió al resto de Europa
después de la Segunda Guerra Mundial. En España fue introducido en los años 80.
Mapa: es uno de los elementos más importantes de este deporte ya que es el que
indica dónde están los puntos de control. Los mapas que se utilizan son especiales
para este deporte, basados en mapas cartográficos con gran detalle para ser lo más
precisos posibles. En estos mapas se tiene que representar el relieve con las curvas
de nivel del terreno. También pueden incluir elementos como caminos, zonas de
bosque, diferentes densidades de vegetación, etc. Todos los mapas se rigen por la
normativa de la OIF. En la figura 2.7 se puede ver un mapa usado en orientación.
Estado del arte 16
Brújula: facilita la orientación del mapa y ayuda a realizar rutas más precisas.
No es obligatoria, es un elemento auxiliar. En este deporte se suelen usar brújulas
planas transparentes con limbo móvil y brújulas de dedo. Estas brújulas son más
precisas porque tiene una aguja magnética dentro de una cápsula llena de lı́quido
estabilizador, el cual hace que la aguja se detenga rápidamente en vez de oscilar
repetidamente alrededor del norte magnético.
2. Larga distancia: aquı́ importa más el estado fı́sico del corredor frente a la difi-
cultad técnica. Para ello se aumenta la distancia entre cada punto de control.
El tiempo habitual de cada corredor en estos recorridos suelen variar entre la
hora y la hora y media.
Estado del arte 18
Después de revisar las principales tiendas de aplicaciones como son Google Play[12] y
la App Store[13] de Apple se ha podido comprobar que hay varias aplicaciones dedicadas
al juego de la yincana y del Geocaching o al mundo de la Orientación. A continuación
se van a exponer las que son más interesantes y tienen caracterı́sticas que se plantean
en este proyecto.
Estado del arte 20
2.3.1. GooseChase
GooseChase es una aplicación disponible para tanto para iOS como para Android
desarrollada por la empresa Goose Chase Adventures Inc. Tiene dos partes, una web[14]
desde donde el usuario se puede registrar y crear los juegos y una aplicación desde donde
los usuarios pueden jugar a dichos juegos. Está pensada de tal forma que la parte de
jugar los juegos es gratuita pero la parte de crear los juegos tiene un coste. En un primer
momento se pueden crear dos juegos sin tener hacer ninguna subscripción. tiene una
serie más de limitaciones:
Sólo pueden crear tres equipos en el modo Equipo o tres jugadores individuales en
el modo individual.
Para quitar estas limitaciones hay que pagar por cada juego que se cree. Hay tres
modalidades de pago que básicamente permiten que jugar a más usuarios a la vez,
ocho en el caso de la modalidad intermedia y 20 en la más avanzada. También hay una
modalidad de empresa en la que no hay ninguna limitación a cambio de una cuota anual.
Se pueden crear tantas partidas, que la empresa llama experiencias, hay que como
queramos pero en el plan gratuito sólo se puede tener una de estas experiencias acti-
vas a la vez. Crear una experiencia es una tarea sencilla, sólo pide un nombre para la
experiencia, una descripción y opcionalmente una localización para la misma.
Las experiencias están formadas por misiones que a su vez también son fáciles de crear.
Para crearlas hay que indicar el tipo de misión, el nombre y una puntuación. Hay tres
tipos de misiones que se pueden crear:
Enviar una foto de la galerı́a de fotos o de la cámara: en este caso tambı́en hay
que indicar la temática de la que tiene que ser la foto que posteriormente tendrá
que comprobar el administrador del juego si es correcta o no.
Contestar una pregunta: hay que indicarle el texto de la pregunta y las respuestas
que se admiten como correctas. Si el participante acierta, gana los puntos.
En cuanto a la aplicación para jugar a las experiencias es muy fácil de utilizar. Tiene
una pantalla principal donde el usuario puede entrar a la aplicación con su usuario y
contraseña y, en el caso de que no esté registrado, hacer el registro en la aplicación. Una
vez que se ha autenticado en la aplicación, puede visualizar todas las experiencias que
Estado del arte 22
Para poder registrarte en una experiencia, previamente te tienen que pasar una invita-
ción con el código de la experiencia. Sin dicho código no puedes inscribirte en la misma.
Las experiencias se pueden jugar en equipo o individuales. Esto se tiene que elegir en el
momento de crear la experiencia.
Una vez superadas todas las misiones de la experiencia, se puede consultar toda la
actividad que se ha hecho en la misma y el ranking de los usuarios que más puntuación
han obtenido. Esto se puede ver en la figura 2.12
Por lo que se puede ver en la web de GooseChase, esta aplicación es sobre todo para
fomentar el Team Building en las empresas. El esquema de precios que tiene la aplicación
y los tramos de usuarios también dan pistas de este hecho.
2.3.2. Scavify
Scavify es una aplicación muy similar a GooseChase. También está formada por una
parte web[15] desde la que se pueden crear los juegos y una aplicación de móvil[16] para
jugar a dichos juegos. La mayor diferencia que tiene con GooseChase es que si quieres
crear juegos, entonces tienes que suscribirte.
Estado del arte 23
En el caso de la aplicación del móvil, Scavify una vez instalada pide que el usuario
se registre, o en el caso de que ya lo esté, que introduzca su usuario y contraseña. En
la pantalla principal de la aplicación se pueden ver los juegos en los que ha jugado el
jugador o está jugando en este momento y un buscador para buscar nuevos juegos. Para
Estado del arte 24
poder acceder a un juegos, el usuario tiene que tener una invitación o un password de
dicho juego que se lo tiene que facilitar el administrador del juego.
Para poder probar la aplicación, hay un juego demo con una lista de tareas a completar.
Las tareas son de tres tipos: tomar una foto de la temática que indique la tarea, ir a
un sitio con el GPS del móvil, contestar una pregunta o escanear un código QR2 . En la
figura 2.14 se pueden ver las pantallas de raking y la lista de tareas de la aplicación de
Scavify.
Esta aplicación también está muy orientada al Team Building y está muy dirigidas a
empresas que quieran fomentar este tipo de dinámicas entre sus trabajadores. También
está dirigida a Universidades, conferencias y destinos turı́sticos.
2.3.3. Geocaching
La aplicación Geochaging[7] esta disponible tanto para Android como para iOS en sus
respectivas tiendas de aplicaciones. Esta aplicación es la aplicación oficial para poder
encontrar objetos escondidos por personas que practican el Geocaching. En un primer
momento, una persona escondı́a un tesoro y después publicaba sus coordenadas en algún
grupo de noticias o algún blog o web dedicados al Geocaching. Después los demás usua-
rios de los grupos de noticias o de las web donde surgı́an publicadas las coordenadas
2
Es un módulo para almacenar información en una matriz de puntos o en un código de barras bidimen-
sional
Estado del arte 25
podı́an ir a buscar estos tesoros y poder firmar en su logbook y ver que más objetos
existı́an.
Figura 2.15: Pantalla de Geocaching donde muestra los cachés cercanos a la ubicación
actual.
Con el auge de los dispositivos móviles esto ha mejorado mucho, aunque su esencia
sigue igual. Ahora con la aplicación se pueden buscar los tesoros directamente desde su
interfaz. Para ello muestra un mapa con los cachés o tesoros cercanos y que aún no los ha
encontrado el usuario (figura 2.15). Desde esta pantalla se puede seleccionar cualquier
caché que aparezca para ver más información. Una vez seleccionado, mostrará toda
información en detalle de dicho caché y aparecerá la opción de buscarlo o de guardarlo
en una lista para buscarlo posteriormente. Estas dos pantalla se pueden ver en la figura
2.17.
Una vez encontrado el caché, se añadirá a la lista de los cachés que ya ha encontrado
el usuario. Fı́sicamente, el usuario ya podrá firmar en el logbook y mirar los otros objetos
que contiene e intercambiarlos por otros. Una vez hay terminado, tiene que volver a
esconder el caché donde estaba para que lo puedan encontrar los usuarios que vengan
después.
En el perfil del usuario, éste puede ver cuantos cachés ha encontrado y cuando ha
escondido además de sus estadı́sticas. Para poder esconder un caché, los usuarios tienen
que haber encontrado antes veinte cachés, si no la aplicación no da la opción de utilizar
esta función. La aplicación tiene otras funciones interesantes como poder enviar mensajes
a otros usuarios de la comunidad para poder contactar con ellos. En el perfil de usuario
también se puede ver los objetos rasteables que ha encontrado el usuario. Cada vez que
Estado del arte 26
Todas estas funciones que se han descrito son gratuitas ya que la aplicación tiene una
modalidad de pago para poder desbloquear ciertas caracterı́sticas de la misma. El pago
es una suscripción que puede ser mensual (6,40€) o anual (32,09€). Las caracterı́sticas
que se añaden son las siguientes:
Acceso a todos los tipos de Geocachés. Hay varios tipos de cachés en la aplica-
ción, representados en el mapa con un icono verde y uno gris. En principio, los
usuarios normales, sólo pueden buscar los cachés con el icono verde. Para poder
encontrar los cachés con icono gris hay que ser usuario premium. Estos cachés
mejorados necesitan superar una prueba para acceder a ellos o tener que buscar
cachés intermedios para llegar al caché principal.
Figura 2.17: Pantalla izquierda: cachés encontrados. Pantalla central: cachés escondidos.
Pantalla derecha: objetos rasteables encontrados.
Crear y descargar listas y mapas para los usuarios sin conexión. Para poder uti-
lizar los mapas sin conexión el usuario tienen que ser premium. Esta opción es
interesante para encontrar cachés en zonas donde la cobertura sea mala o no haya
cobertura. El acceso al GPS será posible en estas zonas pero el usuario no podrá
ver un mapa de la misma para facilitarle la búsqueda del caché. Las lista sirven
para que el usuario pueda guardar varios geocachés de una zona y poder planificar
el orden en el que va a ir a buscarlos. Si además guarda el mapa de la zona, puede
ir a buscarlos cuando quiera sin necesidad de tener cobertura.
hay en esta red son libres y los puede buscar cualquier usuario sin necesidad de cuotas
mensajes o servicios premium. En esta red también se pueden registrar los usuarios para
poder guardar los cachés que encuentran y crear nuevos que deben mantener ellos.
Hay aplicaciones alternativas que se conectan a esta red para poder hacer la búsqueda.
Esto es posible gracias a que la red Opencaching tiene una API abierta con la que los
programadores pueden crear aplicaciones y servicios para consumir dicha API. Este es el
caso de la aplicación Opencaching QuickFind disponible sólo para móviles Android. Esta
aplicación es muy simple pero permite que el usuario se conecte a la red Opencaching
para marcar los cachés que ha encontrado.
Esta aplicación es muy simple si se compara con la aplicación Geocaching ya que sólo
permite guardar un caché encontrado y poco más. Para dar de alta cachés o buscar
cachés existentes el usuario tiene que consultar la web.
Una vez que el usuario ha elegido el caché que desea buscar, puede ver toda la infor-
mación referente a él. En este caso, si el usuario esta conectado a la red Geocaching,
también podrá ver el detalla de los cachés premium, cosa que en la aplicación oficial no
se pueden ver si no se tiene una cuenta premium. Esto se puede apreciar en la figura
2.20, en la pantalla de la izquierda que muestra la información avanzada de un caché
premium que se compone de otros cachés secundarios. Desde la página de detalle tam-
Estado del arte 30
bién se puede guardar el caché para buscarlo más tarde o iniciar la navegación para que
ayuda al usuario a encontrar el tesoro. Una vez lo haya encontrado también lo marcará
como encontrado y guardará los datos del usuario en la red correspondiente.
Esta aplicación es muy completa y permite hacer lo mismo que la aplicación oficial de
la red Geocaching pero sin necesitar una suscripción anual o mensual para poder tener
todas las funciones. Además, también permite acceder a casi todas las funcionalidades
Estado del arte 31
de pago de Geocaching de manera nativa y sin ninguna cuota mensual. Permite hacer
listas de cachés, guardar mapas offline como Geocaching y buscar los cachés premium
esta red. Con el añadido de que el usuario puede conectarse a otras redes de geocaching
como puede ser Opencaching.
2.4. Conclusiones
Una vez analizadas las principales aplicaciones existentes en el mercado para el Juego
de la Yincana, se puede concluir que no hay ninguna que cubra por completo todos los
objetivos que se plantean en este proyecto:
Aplicación que posibilite jugar al juego de la yincana donde los jugadores tendrán
que inscribirse en la yincana que deseen y completar todas las pruebas sin necesidad
de códigos ni invitaciones.
Sólo se podrán inscribir a las yincanas que estén dentro de su zona ya que para
jugar deberán ir de un sitio a otro y llegar a puntos concretos que se comprobarán
con el GPS del móvil.
Los juegos se podrán crear desde un portal web donde podrán geolocalizar el juego
y añadir los puntos de control que deseen. Además, a estos puntos de control se
les podrán añadir pruebas que deberán superar los jugadores.
Por todo esto, se plantea el prototipo a desarrollar en este trabajo. Este prototipo
busca sentar las bases para el desarrollo de juegos similares en un futuro.
3 Planificación y diseño
Una vez que están los conceptos claros del tipo de aplicación que se va a desarrollar, a
continuación se detallará la metodologı́a que se ha seguido para el desarrollo del proyecto
además del diseño preliminar que se hizo de su interfaz.
3.1. Metodologı́a
La metodologı́a Kanban tiene su origen en Japón. Fue desarrollado por Taiichi Ohno,
un ingeniero japonés de Toyota, a finales de la década de 1940. Es ingeniero se dio
cuenta de que se podı́a mejorar el sistema de producción cambiando a unos procesos
de producción “just-in-time” (JIT). De esta manera en vez fabricar en función de una
demanda anticipada, se pasó a producir en función de la demanda real que tenı́a el con-
sumidor. Con este método se tenı́an una serie de tarjetas para identificar las necesidades
de material en la cadena de producción.
32
Planificación y diseño 33
Se ha optado por esta metodologı́a porque se trata de una metodologı́a simple y fácil
de entender y usar. Además provee de información de una manera rápida, permitiendo
ver el estado del proyecto en cada momento de una manera inmediata.
Aplicando esta metodologı́a se ha creado un panel en Trello con cuatro listas de tareas:
Para la construcción de este proyecto, se empezó por hacer un estudio del arte a la vez
que se analizaban los requisitos de la aplicación. Como resultado de estos dos estudios,
se definieron las funcionalidades que debı́a tener la aplicación objeto de este trabajo.
3.2. Diseño
Las pantallas de las que está compuesta la aplicación web son las siguientes:
Pantalla principal (figura: 3.5): contiene dos botones, uno para entrar como
usuario registrado en la aplicación y otro para registrarse en ella. Además, contiene
el logotipo de la aplicación y un carrusel de imágenes.
Pantalla de acceso (figura: 3.6): contiene dos cuadros de texto donde el usuario
podrá poner su correo y su contraseña para iniciar sesión. También dispone de un
enlace para recuperar la contraseña en el caso de que el usuario no la recuerde.
Pantalla del panel de control(figura: 3.8): pantalla principal para los usuarios
registrados. En ella se muestra un resumen de los juegos que ha creado, los que hay
activos en este momento y los rankings que puede consultar de juegos ya acabados.
También hay un menú superior con todas las opciones de la aplicación (Resumen,
Juegos, Ranking y Logros)
Pantalla de juegos (figura: 3.11): contiene el listado de todos los juegos que
Planificación y diseño 36
Pantalla para crear juegos (figura: 3.13): esta pantalla permite al usuario
crear juegos nuevos. Para crear un juego, el usuario tiene que definir un nombre,
una descripción, una fecha de inicio y una de fin y una dificultad. La fecha de
siempre tiene que ser mayor que la fecha de inicio, pero, también puede ser vacı́a
indicando que el juego siempre estará disponible. Para acabar, el jugador tendrá
un mapa para poder elegir la zona donde estará ubicado el juegos y los puntos de
control de los cuales se compondrá.
Pantalla de logros (figura: 3.14): aquı́ el usuario podrá consultar todos los
logros que se han desbloqueado durante el juego y el jugador que ha desbloqueado
estos logros.
Planificación y diseño 37
Las pantallas de las que está compuesta la aplicación móvil son las siguientes:
Pantalla para buscar juegos (figura: 3.19 [pantalla izquierda]): esta pan-
talla permite al usuario buscar juegos en su zona para poder jugarlos. Aparece
un mapa y en el aparecen los puntos donde está el juego. También aparece un
listado con el nombre del juego, la dificultad, hasta cuando está disponible y los
participantes que lo han completado hasta ahora.
Figura 3.15: Aplicación móvil - Figura izquierda: pantalla principal. Figura derecha: pan-
talla de creación de usuarios.
Figura 3.16: Aplicación móvil - Figura izquierda: pantalla de login de usuarios. Figura
derecha: pantalla con el panel de control.
Planificación y diseño 44
Figura 3.17: Aplicación móvil - Figura izquierda: pantalla con el ranking del jugador en
todos los juegos. Figura derecha: pantalla con el ranking completo de un
juego concreto.
Figura 3.18: Aplicación móvil - Figura izquierda: pantalla general de logros. Figura de-
recha: pantalla de logros conseguidos en cada juego.
Planificación y diseño 45
Figura 3.19: Aplicación móvil - Figura izquierda: pantalla de búsqueda de juegos cer-
canos. Figura derecha: pantalla de juego con la pista al siguiente punto de
control.
Figura 3.20: Aplicación móvil - Figura izquierda: pantalla con un reto para que lo supere
el usuario. Figura derecha: pantalla con el juego finalizado.
4 Tecnologı́as
A nivel de software, se han utilizado una serie de herramientas para la realización del
proyecto que están detalladas a continuación:
Visual Studio Code[25]: editor de código fuente que está desarrollado por Mi-
crosoft. Es multiplataforma y se puede instalar en Windows, MacOS y Linux.
Además tiene una versión web que es idéntica a la versión de escritorio. Incluye
soporte para la depuración, control integrado de Git, resaltado de sintaxis, fina-
lización inteligente de código, fragmentos y refactorización de código. También es
personalizable, por lo que los usuarios pueden cambiar el tema del editor, los atajos
de teclado y las preferencias. Es gratuito y de código abierto. Todo el desarrollo
de la aplicación móvil como de la aplicación web se ha hecho en este editor. La
versión de Visual Studio Code que se ha utilizado es la 1.71.2. En la figura 4.1 se
puede ver la pantalla del editor.
46
Tecnologı́as 47
Figura 4.1: Pantalla del editor Visual Studio Code editando los ficheros del proyecto.
Figura 4.2: Pantalla de la aplicación web Bitbucket con el repositorio del proyecto.
SourceTree[28]: es un cliente gráfico para Git y, por tanto, permite hacer todas
las acciones de Git desde un entorno gráfico. Se ha utilizado para facilitar la gestión
del repositorio del proyecto. La versión de SourceTree que se ha utilizado es la 4.2.0.
En la figura 4.3 se puede ver el repositorio del proyecto en SourceTree.
De las tres únicamente se ha utilizado Apache Webserver para servir las páginas
web del proyecto y MariaDB para gestionar la base de datos del proyecto. La
versión de XAMPP que se ha utilizado es la 8.1.2-0
Figura 4.4: Pantalla de la aplicación DataGrip conectado a la base de datos del proyecto.
A nivel de software, se han utilizado una serie de herramientas para la realización del
proyecto que están detalladas a continuación:
Figura 4.5: Pantalla del terminal zsh con el cliente mariadb conectado a la base de datos
del proyecto.
• Procesador Intel Core i5-7267U [41] a 3,1GHz con Turbo boost a 3,5GHz
• Gráfica Intel Iris Plus Graphics 650 [41] con 1536MB de memoria
Dispositivos de prueba:
• Dispositivos fı́sicos: Samsung S7 [42] con Android 8.0 (64bits), Samsung Ex-
perience 9.0 y nivel de parches de seguridad del 1 de marzo de 2020. Tiene un
Exynos 8 Octa 8890 2.3 con ocho núcleos (4 de alto rendimiento y cuadro de
eficiencia). Tiene 4GB de RAM y una GPU ARM Mali-T880 MP12 650 Mhz
con una resolución de 1440x2560px px (QHD) y una pantalla de 5,1 pulgadas
(576ppi).
4.3. Laravel
Laravel tiene como objetivo ser un framework que permita el uso de una sintaxis
elegante y expresiva para crear código de forma sencilla. Intenta aprovechar lo mejor
de otros frameworks y aprovechar las caracterı́sticas de las últimas versiones de PHP.
Laravel está basado en Synfony[48], otro framework de desarrollo web y, al igual que
éste, sigue una arquitectura de modelo-vista-controlador (MVC). Además, tiene otras
caracterı́sticas:
Eloquent ORM para gestionar la base de datos. Gracias a Eloquent se puede ma-
pear las tablas de la base de datos en clases del modelo.
Tiene un “Query Builder” gracia al cual se pueden diseñar consultas para acceder
1
Término peyorativo para los programas de computación que tienen una estructura de control de flujo
compleja e incomprensible.
Tecnologı́as 52
de una manera más directa a la base de datos y se puede usar como alternativa a
Eloquent.
Tiene Reverse Routing que permite definir una relación entre las rutas de aplicación
y los links que haya dentro de las vistas. Esto hace posible que cambios en la rutas
se propaquen automáticamente a los links de las vistas.
Laravel carga las clases necesarias en todo momento sin necesidad de incluirlas
explı́citamente.
Tiene un sistema de plantillas llamado Blade para generar las vistas de la aplicación
que se esté desarrollando.
Tiene un sistema de “database seeding” que sirve para incializar los datos de la
base de datos.
Test unitadios para hacer pruebas unitarias en la aplicación que se esté desarro-
llando.
Validación de formularios
Modelo (M): aquı́ está la representación de los datos del dominio, es decir, las
entidades que sirven para almacenar información del sistema. También se encarga
de gestionar el almacenamiento y recuperación de los datos y entidades del dominio
y por tanto incluirá mecanismos de persistencia. En el caso de Laravel, Eloquent
es el que se encarga de esta representación y de las tareas de persistencia de datos.
Vista (V): los componentes de la vista son los encargados de generar la interfaz
de la aplicación. Componen las pantallas, páginas o cualquier tipo de resultado
utilizable por el usuario. La Vista es una representación del estado del Modelo en
un momento concreto y en el contexto de una acción determinada. Laravel para
facilitar la creación de las vistas tiene un sistema de procesamiento de plantillas
Tecnologı́as 53
llamado Blade. Este sistema favorece un código mucho más limpio en las vistas,
además incluye un sistema de caché que lo hace mucho más rápido.
o menos cada dos semanas lanzan una versión corrigiendo errores. También lanzan una
versión mayor cada año, concretamente en febrero. Actualmente, Laravel 9 es la versión
mayor más actual que existe. Para este proyecto se ha elegido dicha versión ya que es la
más reciente y la que tendrá un ciclo de vida mayor a la hora de mantener el proyecto
sin necesidad de cambiar de versión. La versión que se está utilizando en el mismo es la
9.29. En la figura 4.8 se pueden ver las ultimas versiones que han aparecido y la fecha
hasta las que recibirán actualizaciones de seguridad.
4.4. Ionic
2
Conjunto de herramientas de desarrollo de software que permite a un desarrollador de software crear
una aplicación informática para un sistema concreto
Tecnologı́as 55
En el caso de las aplicaciones web hı́bridas, Ionic Framework permite que se puedan
distribuir en las tiendas de aplicaciones nativas tanto de iOS como de Android gracias
al uso de Apache Cordova[51] o Capacitator[52]. Gracias al uso de los plugins de Apache
Cordova o Capacitator, Ionic es capaz de tener acceso a los dispositivos del terminal
móvil como son la cámara, el GPS o el led del flash.
Más productividad y menos costes: favorece una mayor productividad y reduce los
costes de desarrollo de la aplicación. Desarrollar aplicaciones hı́bridas en un único
código propicia un menor tiempo de desarrollo y hace que su mantenimiento y
escalado sea más sencillo. Además, resulta menos costoso que el desarrollo de una
aplicación nativa.
Peor rendimiento que las aplicaciones nativas: por su propia naturaleza, las aplica-
ciones nativas siempre serán más rápidas que las aplicaciones hı́bridas ya que las
aplicaciones nativas están diseñadas y mejor optimizadas para la plataforma.
Dependencia con los plugins: cada vez que se necesita acceder a funcionalidad
nativa deberemos recurrir a un plugin. Normalmente, siempre hay un plugin para
cada funcionalidad nativa, pero en casos de funcionalidades nuevas o para casos
muy concretos habrá que esperar a que se desarrolle plugins nuevos.
Aplicaciones más pesadas que las nativas: crear aplicaciones usando HTML, CSS
y JavaScript implica escribir mucho código y agregar librerı́as, complementos y
dependencias que harán que la aplicación sea más pesada que una aplicación nativa.
Ionic Framework lanza una versión mayor del SDK cada seis meses más o menos,
aunque este plazo se puede acortar si se ha introducido algún cambio importante en la
librerı́a. Antes de lanzar la versión final, siempre se publicarán varias versiones candida-
tas. En cuanto a las versiones menores del SDK, se publicará una cada mes, siempre que
se realicen cambios en la API que no sean importantes. Si se corrige algún error y no ha
habido ningún cambio importante o no importante en la API, se lanzará un parche para
corregir el error.
Cada versión de Ionic Framework se actualiza una media de año y medio o dos años.
A partir de ahı́ tiene un tiempo de mantenimiento extendido de medio año a un año
adicional. Una vez pase ese tiempo, se recomienda actualizar el desarrollo a una versión
más nueva. En la figura 4.10 se puede ver las versiones y su ciclo de vida.
Actualmente, Ionic Framework 6 es la versión mayor más actual que existe. Para este
proyecto se ha elegido dicha versión ya que era la más reciente y la que tendrı́a un ciclo
de vida mayor a la hora de mantener el proyecto sin necesidad de cambiar de versión.
La versión que se está utilizando en el mismo es la 6.2.1.
4.5. Angular
Enlace de datos: una de las grandes ventajas es que permite mover datos sin
esfuerzo desde el código JavaScript a la vista y reaccionar a los eventos del usuario
sin tener que escribir adicional.
Angular lanza una versión cada seis meses y cada versión la mantiene más o menos
un año y medio. Estos plazos pueden variar en el caso de que se hay introducido algún
cambio importante en el framework y sea necesario lanzar una versión mayor antes
de tiempo. Angular también se actualiza cuando hay cambios de menor importancia o
cuando hay algún parche de seguridad. En estos casos se lanzan una versión menor o
una versión de parcheo respectivamente. Cuando se lanza una versión mayor, la versión
anterior para a ser versión LTS o “Long Term Support” y se mantiene durante un año
más o menos. La versión más actual de Angular es la 14.2.3.
Tecnologı́as 59
En este proyecto se usa la versión 14.2.1 de Angular. Esta decisión viene condicionada
por la versión de Ionic que se usa ya que la versión 6 de Ionic soporta versiones de
angular a partir de la versión 12.0.0. Por lo tanto se ha elegido la versión mayor mas
reciente de Angular para ası́ tener soporte hasta diciembre de 2023.
Google Maps comenzó como una aplicación de escritorio en C++ desarrollado por
los hermanos Lars y Jens Rasmussen en Where 2 Technologies. En octubre de 2004, la
empresa fue adquirida por Google, que la convirtió en una aplicación web. Después de
adquisiciones adicionales de una empresa de visualización de datos geoespaciales y un
analizador de tráfico en tiempo real, se lanzó Google Maps en febrero de 2005.
Tecnologı́as 60
Google Maps Platform[57] utiliza la plataforma de Google Maps para ofrecer un con-
junto de APIs y SDKs para que los desarrolladores puedan incorporar Google Maps a sus
aplicaciones para dispositivos móviles y páginas web. También pueden recuperar datos
desde Google Maps para mostarlos en sus aplicaciones. Google Maps Platform ofrece los
siguientes productos:
Maps: API de Maps JavaScript, SDK de Maps para Android, SDK de Maps para
iOS, API de Maps Static, API de Street View Static, URL de Maps, API de Maps
Embed.
Places: API de Places, SDK de Places para Android, SDK de Places para iOS.
En este proyecto se va a utilizar la API de Maps para poder mostrar los mapas de los
juegos tanto en la aplicación web como en la aplicación móvil. En estos mapas es donde
se visualizarán y/o se podrán marcar los puntos de control de los juegos.
5 Implementación y resultados
Siguiendo con el trabajo realizado en este TFM, este capı́tulo está dedicado a detallar
la implementación del proyecto y analizar los resultados del mismo. Se va a desglosar en
los siguientes apartados:
Arquitectura
API
Implementación y Resultados
5.1. Arquitectura
Una vez revisado el marco teórico de la aplicación junto con la metodologı́a empleada,
el diseño de la aplicación y las tecnologı́as usadas, se presenta la arquitectura planteada
en el proyecto.
Frontend: esta parte se encargará de comunicarse con el usuario. Hay que tener en
cuenta que habrá dos frontends diferentes, uno para la aplicación web en Laravel
61
Implementación y resultados 62
users: tabla donde que contiene todos los datos de los usuarios registrados en la
aplicación.
partidas: tabla que contiene todos los datos de las partidas que se han creado.
puntos: tabla que contiene los puntos de control de todas las partidas. Estos
puntos sólo pueden pertenecer a una partida aunque una partida puede tener uno
o varios puntos de control.
Implementación y resultados 63
juegan: tabla que contiene las partidas que ha jugado cada participante. Aquı́
se guardará tanto las partidas que han sido superadas como las que no se han
superado.
puntos superados: tabla que contiene los puntos que ha superado cada partici-
pante durante una yincana.
5.3. API
Otro aspecto importante del proyecto es la API que se va a utilizar para que la
aplicación móvil pueda obtener los datos necesario y guardar los datos que va generando
durante y después de cada gincana. Una vez que ya se ha definido el diseño de la base de
datos, se puede abordar el diseño de la API junto con las peticiones a las que responderá
y su formato.
La API responderá a las operaciones CRUD (Create, Read, Update y Delete) haciendo
uso de los métodos HTTP más extendidos:
A continuación, se pueden ver las llamadas que atiende la API, con su endpoint co-
rrespondiente, el método HTTP que utilizan y los parámetros de la propia llamada:
api/v1/punto/:partida [GET]: devuelve una lista con todos los puntos de control
que están asociados a la partida que tiene como id :partida.
5.4. Desarrollo
Una vez que ya está todo el proyecto definido, ya se puede llevar a cabo el proceso
de implementación. Para ello se ha seguido la metodologı́a Kanban, tal y como se ha
explicado anteriormente. Para la implementación del proyecto primero se empezó con-
figurando todo el entorno de trabajo, el repositorio de software y la base de datos que
iba a utilizar. En la etapa de desarrollo se pueden diferenciar dos fases, en la primera se
implemento todo el backend y en la segunda el frontend.
El proyecto se abordó de esta manera para facilitar el desarrollo del mismo ya que
el frontend es más dependiente de los datos que le pueda proporcionar el backend para
comprobar su corecto funcionamiento. Se podrı́a haber abordado primero el desarrollo
del frontend pero se tendrı́a que haber usado “mocks” para simular los datos y las
llamadas al Backend.
En el backend la primera tarea que se abordó fue la creación de todas las migracio-
nes de la base de datos y sus respectivos modelos. Estos modelos están enumerados a
continuación:
En cuando a las migraciones, se hizo una por cada tabla que se iba a crear en la base
de datos. Por lo tanto, al final de su creación se han obtenido tantas migraciones como
Implementación y resultados 66
modelos de datos. En la figura 5.3 se puede ver la organización que hace Laravel de los
modelos y de las migraciones de la base de datos.
Una vez que se ha acabó de crear el modelo de datos, se pasó al desarrollo de los
controladores. En estos elementos estará toda la lógica de negocio de la aplicación tanto
para la aplicación web como para la API. Para separar un poco más el código y hacerlo
mas mantenible en un futuro se optó por crear dos Controladores para cada Modelo. Un
Controlador será el encargado de la lógica de negocio de la API y el otro controlador
tendrá toda la lógica de negocio de la aplicación web.
aplicación web pero se ha optado por hacerlo ası́ para tener separaras la lógica de negocio
de ambas para que sea más fácil de mantener. También, se hubiese podido abordar de otra
manera y crear una carpeta para agrupar ambos tipos de controladores y ası́ tenerlos más
organizados. En la figura 5.4 se puede ver el detalle de la carpeta de los controladores.
A continuación se crearon las rutas de entrada para la aplicación y para la API. Laravel
separa las rutas de la aplicación web de las rutas de la API en dos ficheros diferentes.
En la figura 5.5 se puede ver una parte del fichero donde están las rutas de la aplicación
web.
Para acabar, se diseñaron las vistas de la aplicación web que son con las que el usuario
va a interactuar. Estas vistas se hicieron con el sistema de plantillas Blade que tiene
Laravel. En este caso hay una vista especialmente compleja ya que se encarga de mostrar
el mapa de Google Maps con la ubicación actual. En este mapa se puede elegir tanto la
zona de juego donde se pueden colocar los puntos de control como los puntos de control
mismos. En la figura 5.6 se puede ver el código usado para obtener la ubicación actual
del navegador.
Implementación y resultados 68
Una vez se tenı́a la aplicación web funcionando aunque sin todas sus funcionalidades,
se pasó a desarrollar la aplicación móvil. En este caso con Ionic Framework. Primero se
definieron los modelos de datos y las llamadas a la API para obtener los datos. En este
caso me basé en los modelos hechos en Laravel, ya que los datos eran los mismos.
Para devolver las partidas más cercanas al usuario tuve que utilizar la formula del
Harvesine:
Figura 5.7: SQL para obtener los puntos que están a menos de 100KM de los puntos
dados.
Gracias a esta fórmula, se puede saber la distancia que hay entre dos puntos geográficos
ya éstos están situados en una esfera. Esta fórmula la he implementado en una consulta
Implementación y resultados 69
de la base de datos y ası́ se pueden obtener directamente los puntos que están más cerca
de las coordenadas del usuario. Esto se puede ver en la figura ??
5.5. Resultados
En las capturas de pantalla 5.8 se puede ver la pagina principal de la aplicación web
Figura 5.8: Capturas de pantalla de la aplicación web done se muestra la página principal
de la aplicación
Figura 5.9: Capturas de pantalla de la aplicación web donde se muestra el formulario de
login
Creación de una aplicación multiplataforma que controle todo el juego. Esta aplica-
ción estará disponible en las tiendas de aplicaciones de las diferentes plataformas.
Uso del GPS del móvil para obtener la ubicación en tiempo real del jugador y poder
saber qué juegos hay activos en su zona. Además también permitirá determinar
cuándo un jugador ha llegado al punto de control correspondiente.
Creación de una aplicación web en la que los administradores de los juegos podrán
crear y administrar los juegos de la yincana.
Integración del uso de una API de mapas en la aplicación web para poder definir
los puntos de control de cada partida que tiene recorrer cada jugador.
Creación de una API para poder enviar y recibir datos de los juegos a través de la
aplicación móvil.
Definición de pistas para los puntos de control que tienen que atravesar cada ju-
gador para acabar el juego por parte de los administradores.
72
Conclusiones 73
Una de las mayores dificultades que he encontrado a la hora de realizar el proyecto fue
saber realmente lo que tenı́a que hacer. Después de profundizar en el juego de la yincana,
y como se puede comprobar en el capitulo 2 dedicado al estudio del arte, el juego de la
yincana es un juego muy fácil y por eso se puede confundir con otros juegos similares
como la búsqueda del tesoro, las carreras de orientación, el geocaching... Esto hace que
en un primer momento no tenı́a muy claro que debı́a hacer ya que se las fronteras entre
un juego y otro estaban un poco difusas. De hecho tengo la convicción de que estos
juegos no son más que variantes de una yincana que han ido evolucionando y cogiendo
personalidad propia.
Una vez superado este escollo y habiendo definido los objetivos que querı́a que tuviera
el juego, el desarrollo se simplificó bastante. El único problema adicional que surgió fu
aprender a utilizar la API de Google Maps, que en un principio resulta un poco difı́cil
pero se va simplificando con forme vas profundizando en su estudio.
A nivel personal, los objetivos principales del autor, se han cumplido. Se ha creado
un sistema que utiliza el GPS y los mapas de terceros para geolocalizarte que puede
servir de base a proyectos futuros que tengan requisitos similares. Además, este trabajo
ha servido para reforzar los conocimientos adquiridos durante el máster, ası́ como para
adquirir nuevas capacidades avanzadas en el desarrollo de este tipo de aplicaciones.
74
Bibliografı́a 75
[40] Información detallada del macbook pro de 13 pulgadas del 2017. https://support.
apple.com/kb/SP755?locale=es_ESm. Accessed: 2022-09-11.
[59] Isaac Newton. Newton’s Principia: the mathematical principles of natural philo-
sophy. First American edition, 1 edition, 1846.