Explicaciones mediante realidad aumentada de sistemas de recomendación social en el dominio del ocio

EXPLICACIONES MEDIANTE REALIDAD AUMENTADA DE SISTEMAS DE RECOMENDACIÓN SOCIAL EN EL DOMINIO DEL OCIO Diego Acuña Berger, Daniel Calle Sánchez, Carlos Gómez Cereceda, Zihao Hong GRADO EN INGENIERÍA DEL SOFTWARE. FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID Trabajo Fin de Grado en Ingeniería del Software CURSO 2018-2019 Director/es y/o colaborador: Juan Antonio Recio García Guillermo Jiménez Díaz Autorización de difusión Diego Acuña Berger, Daniel Calle Sánchez, Carlos Gómez Cereceda, Zihao Hong Fecha Los abajo firmantes, matriculados en el Grado en Ingeniería del Software de la Facultad de Informática, autoriza a la Universidad Complutense de Madrid (UCM) a difundir y utilizar con fines académicos, no comerciales y mencionando expresamente a sus autores el presente Trabajo Fin de Grado: “EXPLICACIONES MEDIANTE REALIDAD AUMENTADA DE SISTEMAS DE RECOMENDACIÓN SOCIAL EN EL DOMINIO DEL OCIO”, realizado durante el curso académico 2018-2019 bajo la dirección de Juan Antonio Recio García y Guillermo Jiménez Díaz en el Departamento de Ingeniería del Software e Inteligencia Artificial, y a la Biblioteca de la UCM a depositarlo en el Archivo Institucional E-Prints Complutense con el objeto de incrementar la difusión, uso e impacto del trabajo en Internet y garantizar su preservación y acceso a largo plazo. Resumen Actualmente, en un mundo cada vez más tecnológico, es muy común que surjan aplicaciones diseñadas para satisfacer las necesidades de la sociedad en distintos ámbitos, como pueden ser el de la salud, la educación o el ocio entre otros. Nosotros con nuestro proyecto decidimos centrarnos en el ámbito del ocio y, más concretamente, en el mundo del cine. Nuestra aplicación surge de la necesidad de aquellas personas que quieren ver una película acompañados ya que, pocas personas hoy en día deciden ir al cine solas y podemos estar de acuerdo en que la mayoría de personas prefieren ver una película en compañía. Para dar respuesta a ésto, nuestra aplicación permite crear planes para ver una cierta película con amigos o personas que tengan un gusto similar. Además, existe la posibilidad de que un usuario no sepa que película quiere ver, por lo que la aplicación tendrá la capacidad de recomendar a los usuarios películas que se ajusten a los gustos que tienen. Lo más relevante de nuestra aplicación es la facilidad con la que un usuario puede interactuar con las películas y con los usuarios. Con esto nos referimos a que, gracias a la Realidad Aumentada, podremos reconocer con la cámara de nuestro dispositivo carteles de películas e incluso nos permite el reconocimiento facial de usuarios, para así obtener explicaciones sobre lo que estamos reconociendo en tiempo real y así poder interactuar a través de la Realidad Aumentada. Palabras clave Lista de palabras clave Realidad Aumentada Sistemas de Recomendación Filtrado Colaborativo Ocio Película Aplicación móvil Abstract Nowadays, in a more and more technological world, it is very common that applications designed to satisfy society0s needs in different ambits, such as health, education or leisure appear. With our project we decided to focus on leisure0s ambit and, more concretely, in the cinema0s world. Our application comes up from the need of those people who want to watch a movie accompanied, since few people nowadays decide to go to the cinema alone and we can agree that the majority of people prefer to watch a movie in company. To answer this, our application allows the creation of plans to go watch a certain movie with friends or even people who have a similar taste. Also, it is possible that an user doesn0t know what movie he wants to see, so that the application will be capable of recommending the users movies that suit their tastes. What is more important about our application is the ease with which an user can interact with the films and the users. With this we mean that, thanks to augmented reality, we will be able to recognize with our device0s camera movie posters and it even allows facial recognition of users, so we can obtain explications about what we are recognizing in real time and so be able to interact with it through augmented reality. Keywords Keywords list Augmented Reality Recommendation Systems Collaborative Filtering Leisure Film Mobile application Índice general Índice i Agradecimientos iv 1. Introducción 1 1.1. Antecedentes ................................... 2 1.2. Objetivos ..................................... 2 1.3. Plandetrabajo.................................. 3 1.4. Introduction.................................... 4 1.5. Background .................................... 4 1.6. Objectives..................................... 5 1.7. Workplan ..................................... 5 2. Estado del arte 7 2.1. RealidadAumentada............................... 7 2.1.1. Tecnologías actuales . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 2.2. Fuentesdeinformación.............................. 15 2.3. Técnicas de recomendación . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.4. Conclusiones.................................... 19 3. Diseño de la aplicación 20 3.1. Análisis de la competencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.2. Escenariosdeuso................................. 21 3.3. Requisitosfuncionales .............................. 23 3.4. Interfazdeusuario ................................ 25 3.4.1. Interfazprincipal ............................. 25 3.4.2. Interfaz de mis planes . . . . . . . . . . . . . . . . . . . . . . . . . . 26 3.4.3. Interfaz de información de un plan . . . . . . . . . . . . . . . . . . . 27 3.4.4. Interfaz Mis películas . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 3.4.5. Interfaz de información de una película . . . . . . . . . . . . . . . . . 29 3.4.6. Interfaz Recomendaciones . . . . . . . . . . . . . . . . . . . . . . . . 30 3.4.7. InterfazUsuario.............................. 31 3.4.8. Interfaz Lista de amigos . . . . . . . . . . . . . . . . . . . . . . . . . 32 3.4.9. Búsquedas en las vistas . . . . . . . . . . . . . . . . . . . . . . . . . . 33 3.4.10. Interfaz de Realidad Aumentada principal . . . . . . . . . . . . . . . 34 3.4.11. Interfaz de Realidad Aumentada tras reconocer un cartel de película . 35 i 3.4.12. Interfaz de Realidad Aumentada al reconocer a un usuario que no es amigo ................................... 36 3.4.13. Interfaz de Realidad Aumentada al reconocer a un usuario que sí es amigo ................................... 37 3.5. Navegación entre interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3.6. Conclusiones.................................... 41 4. Implementación 42 4.1. Pruebasdearquitectura ............................. 42 4.1.1. ARCore .................................. 43 4.1.2. ViroMedia ................................ 43 4.1.3. Vuforia+Android ............................ 46 4.1.4. Vuforia+Unity.............................. 50 4.1.5. Vuforia + Unity + Android . . . . . . . . . . . . . . . . . . . . . . . 51 4.1.6. ServerenSpring ............................. 52 4.1.7. Microservicios............................... 53 4.2. Arquitectura.................................... 53 4.3. Servidor ...................................... 54 4.3.1. Entidades ................................. 56 4.3.2. Repositorios................................ 58 4.3.3. Servicios de Aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . 58 4.3.4. Controladores............................... 58 4.3.5. Sistemas de recomendación . . . . . . . . . . . . . . . . . . . . . . . . 60 4.4. Cliente....................................... 60 4.4.1. Actividades ................................ 63 4.4.2. Adaptadores................................ 64 4.4.3. Comandos................................. 64 4.4.4. Entidades ................................. 65 4.4.5. Fragmentos ................................ 65 4.4.6. Petición de servicios . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 4.4.7. Vistas ................................... 67 4.5. Despliegue..................................... 68 4.6. Herramientasdetrabajo ............................. 68 4.7. Conclusiones.................................... 70 5. Conclusiones 73 5.1. Conclusions .................................... 75 5.2. Trabajofuturo .................................. 77 6. Contribución al proyecto 79 6.1. DiegoAcuñaBerger................................ 79 6.1.1. Estadodelarte .............................. 79 6.1.2. Diseño de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . 79 ii 6.1.3. Implementación.............................. 80 6.1.4. Memoria.................................. 80 6.2. DanielCalleSánchez............................... 81 6.2.1. Estadodelarte .............................. 81 6.2.2. Diseño de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . 81 6.2.3. Implementación.............................. 81 6.2.4. Memoria.................................. 83 6.3. CarlosGómezCereceda ............................. 83 6.3.1. Estadodelarte .............................. 83 6.3.2. Diseño de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . 84 6.3.3. Implementación.............................. 84 6.3.4. Memoria.................................. 86 6.4. ZihaoHong .................................... 86 6.4.1. Estadodelarte .............................. 86 6.4.2. Diseño de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . 87 6.4.3. Implementación.............................. 87 6.4.4. Memoria.................................. 90 Bibliography 94 A. Guía de instalación para el servidor 95 A.1.Docker....................................... 95 A.2.Heroku....................................... 97 A.3.Guíaparagenerarunapk ............................101 A.3.1. Generar la parte de la aplicación en Unity. . . . . . . . . . . . . . . . 101 A.3.2. Cómo unir la parte de Unity y Android . . . . . . . . . . . . . . . . . 103 A.3.3.GenerarunAPK .............................104 iii Agradecimientos Nos gustaría agradecer a nuestra familia y compañeros/as la confianza depositada en nosotros así como la realimentación recibida por parte de toda persona que se ha involucrado en mayor o menor medida en la realización de nuestro proyecto, ya fuera mediante comentarios constructivos o la redirección a la documentación de tecnologías que usaríamos posteriormente. iv Capítulo 1 Introducción En este capítulo introduciremos la idea de nuestro proyecto, de dónde surge, qué objetivos queremos lograr y cómo nos hemos organizado a la hora de trabajar. Con este proyecto queremos desarrollar una aplicación para solventar una serie de situaciones en las que una persona tiene ganas de ver cierta película, ya sea porque se ha encontrado el cartel de la nueva película de su saga favorita anunciada en la calle y no sabe con quién ir, o porque quizás un amigo le ha sugerido que le acompañe a ver una película de la que no saben nada por el mero hecho de ir al cine. Decidimos ponernos manos a la obra y desarrollar una aplicación móvil que permitiera a sus usuarios actuar en distintas situaciones para que con el simple uso de la cámara de su smartphone, e incluso sin ella, pudieran de forma fácil e interactiva, organizarse para ir al cine o a ver la película a casa de otra persona. Además, podrían apoyarse en la información que la aplicación les proporciona sobre las distintas películas para decidir si les es interesante ir a verla, sobre todo si es para ir al cine ya que el usuario podría ahorrarse el gasto de acabar viendo una película que no le gusta por no poder saber si se ajusta a sus gustos. Además, tener una red de contactos de personas interesadas en ver películas que a ti también te gusten y tener la posibilidad de quedar en un lugar, fecha y hora determinados refuerzan el atractivo de nuestra aplicación en el dominio del ocio. Nuestro proyecto ofrecerá a los usuarios explicaciones sobre el producto que se esté reconociendo mediante la Realidad Aumentada, es decir, al usuario se le recomendarán productos relevantes de la aplicación según sus gustos, también se le mostrará información 1 Figura 2.1:Telemadrid anuncia el uso de RA en las elecciones de 2019 Figura 2.2:Antena 3 usa RA para las elecciones del ayuntamiento de Madrid convertido en una herramienta útil, sino que es una tecnología atractiva y además signo de modernidad. Por estas razones actualmente vemos ejemplos como el de las televisiones, que compiten por aplicarla a sus programas y presumir de dar el mejor servicio a sus espectadores como vemos en la Figura 2.1 yFigura 2.2. Con esta situación podemos por tanto estar de acuerdo en que es una tecnología en auge actualmente. Los smartphones son los dispositivos que más interaccionan con esta tecnología, ya que prácticamente todas las personas poseen uno y están dotados de un amplio abanico de sensores necesarios para su correcto funcionamiento. Por esto elegimos este tipo de dispositivos para nuestro proyecto ya que, esta tecnología, aporta un gran valor añadido a nuestra aplicación, incluso siendo el grueso de la misma. La Realidad Aumentada en cualquier dispositivo se basa en dónde nos encontramos y hacia donde estamos mirando, es decir, si usamos la cámara del teléfono, según a donde estemos mirando a través de ésta, la Realidad Aumentada superpondrá objetos virtuales o información a nuestra realidad, con un cierto tamaño y una cierta posición basándose en las medidas de lo que vemos a través de nuestra cámara. Por ejemplo, la famosa aplicación de Pokemon Go, que superpone la imagen de un pokemon a la realidad que vemos con la cámara para que podamos atraparlo, haciendo así que su uso sea más interactivo y visual para el usuario, como podemos observar en la Figura 2.3. En la Figura 2.4 yFigura 2.5 podemos ver otros ejemplos del uso de la Realidad Aumentada en dispositivos móviles, 8 como el reconocimiento de monumentos turísticos o para medir ciertas distancias. Figura 2.3:RA en Pokemon Go30 Figura 2.4:RA para zonas turísticas33 Figura 2.5:RA para mediciones16 9 2.1.1. Tecnologías actuales A continuación, describiremos las distintas tecnologías que hemos investigado para la implementación de la Realidad Aumentada. ARCore9: esta plataforma creada por Google para desarrollar aplicaciones de Realidad Aumentada con soporte para Android, Android NDK, iOS, Unity y Unreal Engine, aunque las funcionalidades que se ofrecen para iOS y Unity for iOS se limitan a Cloud Anchors. Los anchors son herramientas que permiten que objetos virtuales aparezcan en un lugar captado por la cámara de nuestro dispositivo, estos son compartidos en la nube para que multitud de dispositivos disfruten de la misma experiencia, aquellos que posean iOS podrán usarlos utilizando ARKit. ARCore usa tres características a través de la cámara del dispositivo: •Motion tracking: permite al dispositivo conocer la posición relativa del mundo. •Environmental understanding: permite al dispositivo detectar el tamaño y localización de todos los tipos de superficies. •Light estimation: permite al dispositivo estimar las condiciones de luz del entorno actual. Puntos positivos: •Buena integración con Android. •Tiene una curva de aprendizaje media y con su versión 1.5 demuestra una estabilidad interesante respecto a su reciente creación. Puntos negativos: •Poca documentación para soluciones más complejas. 10 •No todos los dispositivos son compatibles. Esto depende de que las empresas que desarrollan estos dispositivos cumplan unos requisitos para asegurar que la experiencia con ARCore es la adecuada y de la versión del sistema operativo. ARKit1: es una librería desarrollada por Apple que podemos utilizar para crear experiencias de Realidad Aumentada persistente y compartirlas entre distintos dispositivos iOS. Esta tecnología se basa en la odometría visual inercial, esta es capaz de reconocer las imágenes que capta la cámara y la forma en la que la luz se refleja en los diferentes elementos que aparecen para obtener un mapa 3D del entorno y, calcular las distancias que hay entre los diferentes objetos desde la posición del dispositivo. Tras iniciar la Realidad Aumentada con ARKit, nuestro dispositivo crea un entorno virtual donde nuestro dispositivo representa la coordenada (0,0,0), con los tres ejes, el horizontal, vertical y el de profundidad, pero también es necesario otro eje, el eje W que representa la rotación del dispositivo. En la Figura 2.6 se puede observar cómo cambia el elemento virtual según como situemos nuestro smartphone. Figura 2.6:RA en ARKit10 Puntos positivos: •Detecta imágenes 2D incluso en movimiento y objetos 3D. •Buena integración con iOS. Puntos negativos: 11 •Es necesario ordenadores con macOS para el desarrollo. Wikitude32: es un kit de desarrollo para Realidad Aumentada con soporte para Android, iOS, Unity, Cordova, Xamarin, Titanium y React Native. Utiliza ARCore o ARKit cuando los dispositivos lo soportan y en caso contrario utiliza tecnología de Wikitude para que el número de dispositivos compatibles sea mayor. Algunas de las tecnologías que soporta Wikitude son la geolocalización, el reconocimiento de imágenes y el reconocimiento en la nube. Para entender cómo funciona este SDK tenemos que describir tres términos básicos fundamentales: •Target: conjunto de datos extraídos de una imagen, empleados por un rastreador al reconocerla para realizar alguna acción. •Target Collection: es un conjunto de targets empleado por el rastreador para reconocer imágenes en el mundo real. •Client Tracker: rastreador que usa la cámara para analizar objetos 2D, analiza el Target Collection y busca similitudes con la imagen reconocida. Puntos positivos: •Compatibilidad con muchos dispositivos. •Dispone de reconocimiento de imágenes en la nube. Puntos negativos: •Su licencia es de pago, aunque hay versiones limitadas gratuitas, pero limitan su funcionalidad. •Documentación obsoleta para algunas plataformas de desarrollo. Vuforia31: Kit de desarrollo para Realidad Aumentada con soporte para Android, iOS, UWP y Unity. Su integración con Unity permite crear aplicaciones y juegos para que sean usados en Android y iOS simplemente arrastrando y soltando elementos. Usa 12 un seguimiento basado en marcadores, los marcadores son las imágenes u objetos reconocidos por la aplicación para desencadenar la visualización del contenido virtual sobre su posición en la vista de la cámara. Los Image Targets u objetivos de imagen, son un tipo específico de marcador, son imágenes que se registran manualmente en la aplicación y que pueden ser guardadas en un Cloud, reduciendo así el peso de tener las imágenes a reconocer en el dispositivo. También se puede realizar un seguimiento sin marcado, basado en el GPS o en un giroscopio para insertar modelos de objetos virtuales en la realidad que capta la cámara. Puntos positivos: •Se encuentran fácilmente ejemplos y documentación sobre su uso. •Compatibilidad con muchos dispositivos. •Dispone de reconocimiento de imágenes en la nube. Puntos negativos: •Su licencia es de pago, aunque puede usarse gratis para desarrollar y probar. Con límites en su funcionalidad. ViroReact15: Plataforma para construir aplicaciones con Realidad Aumentada usando React Native. Es capaz de combinar tecnologías web que se pueden utilizar en distintas plataformas con llamadas a APIs internas de las distintas plataformas móviles. De este modo, podemos generar aplicaciones fácilmente que funcionen en Android utilizando el potencial de ARCore y en iOS utilizando el de ARKit. A pesar de ser software privativo, su licencia no tiene limitaciones en las funcionalidades. Puntos positivos: •Curva de aprendizaje fácil. •Se utiliza el mismo código para generar aplicaciones en iOS y Android. 13 Puntos negativos: •Al basarse en React Native, que no tiene versión estable, provoca problemas con las versiones de dependencias. •Configuraciones tediosas y largas compilaciones. Expo AR7: Es un conjunto de librerías escritas de forma nativa para cada plataforma, proporcionando acceso a la funcionalidad del sistema del dispositivo (como pueden ser la cámara, notificaciones emergentes, contactos, almacenamiento local y otro tipo de hardware) desde JavaScript. Está desarrollado para suavizar las diferencias entre plataformas lo máximo posible, consiguiendo que los proyectos que se realicen sean muy portables ya que pueden ejecutarse en cualquier entorno nativo que contengo el SDK de Expo. También proporciona componentes de interfaz de usuario para manejar una variedad de casos de uso que casi todas las aplicaciones móviles tienen que cubrir pero no están construidas en el núcleo de React Native, por ejemplo, iconos, vistas borrosas (aquellas que aparecen de fondo para que el usuario se centre más en los elementos que están superpuesto a la imagen), etc. Puntos positivos: •Curva de aprendizaje fácil. Puntos negativos: •En el momento del desarrollo de este proyecto solo tiene soporte para iOS con ARKit. •Al basarse en React Native que no tiene versión estable provoca problemas con las versiones de dependencias. •Configuraciones tediosas y largas compilaciones. 14 2.2. Fuentes de información Como nuestra aplicación muestra información sobre las películas que se recomiendan y que los usuarios han guardado, hemos tenido que investigar de qué fuentes de información podríamos obtener estos datos tan relevantes. Con la finalidad de extraer estos datos, guardarlos en contenedores de datos y por último, representarlos ante los usuarios. FilmAffinity8: es una de las páginas webs más relevantes para obtener información sobre películas y series, además de críticas y valoraciones de profesionales y sugerencias personalizadas. Esta página fue creada con el objetivo de ser un sistema de recomendación, siendo un factor que nos beneficia ya que podemos estar seguros de que sus datos nos servirán para realizar recomendaciones a los usuarios. Por otro lado, la página está en dos idiomas, español e inglés, otro factor a favor ya que nuestra aplicación muestra los datos en inglés. Sin embargo, al ser una página en la que se realizan críticas serias y profesionales, las valoraciones suelen ser bajas. MovieLens18: es una fuente de información, quizás menos conocida que FilmAffinity y que IMDB pero que ofrece sugerencias personalizadas y la posibilidad de valorar. Se trata de un sistema de recomendación basado en una técnica de recomendación llamada filtrado colaborativo28, técnica candidata a usar en nuestra aplicación y de la que hablaremos posteriormente. Los datos que nos proporciona están en inglés, valiéndonos perfectamente para nuestra aplicación. IMDB11: se trata de una base de datos online donde se guarda información sobre películas y series. Es una de las páginas más usadas a nivel mundial en estos aspectos. Actualmente, le pertenece a una de las empresas que más clouds de almacenamiento tiene en el mundo, Amazon, por lo que podemos asegurar su fiabilidad. El idioma de la página también es el inglés. Rotten Tomatoes29: es una web donde usuarios y críticos profesionales puntúan películas y espectáculos televisivos. La puntuación es representada con tomates frescos si 15 el 60% de las críticas son positivas y si es menor de ese porcentaje es representada con un tomate podrido explotando. Existen certificados de una distinción especial si además cumplen más requisitos: •Una puntuación constante en el Tomatómetro de 75% o más. •Al menos cinco reseñas de los mejores críticos. •Las películas en “wide release” deben tener un mínimo de 80 revisiones. •Las películas en “limited release” deben tener un mínimo de 40 revisiones. •Solo las temporadas individuales de un programa de televisión son certificables, y cada uno ha de tener un mínimo de 20 revisiones. Estos certificados además de que tienen que ser valorados por un grupo de jurados, pueden además ser retirados una vez que esta película o serie no sea capaz de mantener los requisitos. Finalmente, hemos elegido IMDB como fuente de información para nuestra aplicación, ya que es una de las páginas webs más conocidas mundialmente. Su fiabilidad está asegurada y además estamos más familiarizados con ella ya que es la que usamos normalmente en nuestro día a día. 2.3. Técnicas de recomendación Comenzaremos esta sección definiendo qué es un sistema de recomendación y para qué se usan. Los sistemas de recomendación (SRs)27 son herramientas software y técnicas que proporcionan sugerencias de productos útiles para un usuario. Las sugerencias están relacionadas a varios procesos de toma de decisiones como pueden ser productos que comprar, qué música escuchar, o que noticias online podrías leer. Un SR normalmente se centra en un tipo específico de producto (por ejemplo, CDs o noticias) y de acuerdo a su diseño, su interfaz gráfica de usuario, y el núcleo de la técnica de recomendación usada para generar 16 recomendaciones están todas personalizadas para proveer de sugerencias útiles y efectivas para ese tipo específico de objeto. Hoy en día, con toda la información que dejamos en internet, los sistemas de recomendación comienzan a ganar popularidad. Muchas empresas mundialmente conocidas nos ofrecen recomendaciones de sus productos en base a un análisis de nuestros datos y comportamientos. Por ejemplo Youtube, que registra los últimos videos que hemos visto y nos recomienda vídeos similares, basándose en el contenido de dichos vídeos. Otro caso es Netflix, que recomienda películas en base a factores como las interacciones de los usuarios en la página web o de usuarios con gustos similares23. Es una de las empresas pioneras en el sector de las recomendaciones junto con Amazon. Netflix además tiene numerosas técnicas de recomendación debido a un concurso que hizo en 2009, ofreciendo un millón de dólares a quienes mejor optimizaran sus sistemas de recomendación22. Los sistemas de recomendación se pueden dividir según su forma de realizar las recomendaciones: Filtrado basado en el contenido26: al usuario se le recomendará aquella información que le ha interesado en el pasado, es decir, se le mostrarán elementos similares, independientemente de lo que opinen otros usuarios. Se basa en contenido de los objetos, se analiza el objeto para sacar características relevantes de ello, y a partir de las características extraídas, recomendar otros objetos con características similares. Filtrado Demográfico19: al contrario que el filtrado basado en el contenido que se basa en los objetos, este se basa en el usuario, se realiza en función de las características que tienen los usuarios, como edad, sexo, profesión, etc. Ya que se asume que usuarios que, por ejemplo, han nacido en la misma década van a tener preferencias similares frente a los de otras décadas. O que a los profesores de matemáticas les gustan más los números que a los profesores de filología. Filtrado Colaborativo28: esta técnica busca similitudes de preferencias entre usuarios, 17 5. Información de un plan: la película que se quiere ver, los usuarios que se han unido, el usuario que lo ha creado, la fecha, el lugar, una descripción y la hora. Películas guardadas: Las películas guardadas son aquellas que el usuario ha decidido guardar para ver su información más tarde o para posteriormente añadirlas a un plan. Funciones: 1. Guardar película: cuando un usuario reconoce una película con la cámara, se le permitirá guardar la película como favorita. También podrá guardar la película si la busca desde la aplicación sin necesidad de la Realidad Aumentada. 2. Información de una película: un usuario puede ver la información de una película que haya guardado. Podrá ver una pequeña sinopsis, el género, el director, su valoración y su tráiler en Youtube. 3. Valorar una película: también se le permite a un usuario valorar una película a su gusto. Usuarios: Usuario es toda aquella persona que se haya registrado en la aplicación y se haya creado un perfil. Funciones: 1. Añadir como amigo: cuando un usuario reconoce a otro con la cámara se le permitirá añadirle como amigo. También podrá hacerlo si le busca desde la aplicación sin necesidad de la Realidad Aumentada. 2. Eliminar un amigo: existe la posibilidad de eliminar a un usuario de tu lista de amigos. 3. Información de un usuario: un usuario puede ver la información de otro usuario, como su nombre y su foto de perfil. Si son amigos podrá ver además 3 planes que le interesan 24 a ambos. Recomendaciones: Aquellas películas o planes que son afines a un cierto usuario de la aplicación según sus gustos. Funciones: 1. Recomendar películas: al usuario de la aplicación se le recomendarán películas que se ajusten a sus gustos para que le sea más fácil tomar una decisión. 2. Recomendar planes: cuando un usuario quiere ver una película con un amigo, se da la opción de que, enfocando al amigo mediante Realidad Aumentada pueda ver los planes que tiene su amigo y cuanto se estima que le podrían gustar. De esta forma el usuario puede hacerse una idea de cómo de afín es a los planes de su amigo y si encaja en alguno. 3.4. Interfaz de usuario A continuación, describiremos las distintas interfaces de usuario que hemos realizado. En ellas hemos recogido las funcionalidades anteriormente para tratar de atender a los escenarios planteados inicialmente. Hemos dividido nuestra aplicación en 3 vistas diferentes: la interfaz de Mis planes, la de Recomendaciones y la de Mis películas. Además, poseemos una serie de interfaces de Realidad Aumentada que mostraremos. A continuación hablaremos de las interfaces de usuario más relevantes que hemos diseñado: 3.4.1. Interfaz principal Tenemos una barra en la parte inferior para movernos por las 3 secciones de nuestra aplicación: mis planes, recomendaciones y mis películas. Cada sección incluye un icono para 25 apoyar a la representación. Además, encontramos un botón con un símbolo de una cámara en todas las secciones que nos permitirá acceder a la interfaz de Realidad Aumentada. 3.4.2. Interfaz de mis planes El objetivo de esta vista es el de mostrar los planes públicos que existen, es decir, aquellos en los que estás o hayas creado, indicando con una imagen de fondo la película para la que se creó el plan, el usuario que creó dicho plan y los usuarios que se han unido. Podemos observar como cada elemento representa un plan, con el fondo siendo el cartel de la película, la fecha en la que tendrá lugar el plan en la esquina superior izquierda, justo debajo el título del plan, arriba a la derecha el número del plan (algo simple pero que nos indica claramente lo que representa este elemento) y en la parte inferior aparecen las fotos de los usuarios que se han unido al plan. Todo esto podemos verlo en la Figura 3.1. Figura 3.1:Lista de planes 26 3.4.3. Interfaz de información de un plan Figura 3.2:Información del plan Figura 3.3:Información del plan Esta interfaz aparece cuando pulsamos en un plan, (Figura 3.2). Nos aparecerá en grande la imagen de la película que se quiere ir a ver con dicho plan, junto con información relevante de dicho plan, que podemos ver en la Figura 3.3: Fecha y hora del plan. Lugar: localización que haya puesto el creador del plan para ver la película. Descripción: breves anotaciones características que haya escrito el creador sobre el plan. Usuarios unidos: imágenes de los usuarios que se han unido al plan. 27 La información de cada plan la introduce el usuario mediante un formulario muy simple cuando crea un plan con una película. Además, nos aparece un botón en la parte inferior con el texto UNIRSE AL PLAN o SALIR DEL PLAN, según estemos o no ya dentro del plan. También en la parte inferior derecha de la imagen de la película tenemos un botón que nos redirige a la interfaz de información de dicha película. En la parte superior derecha nos aparecería un icono de una basura, lo que nos permitirá borrar el plan, si somos el creador. 3.4.4. Interfaz Mis películas Para mostrar las películas guardadas decidimos usar una cuadrícula que muestre solamente los carteles de las películas, es una interfaz simple pero muy visual. Para acceder a la información de cada película simplemente debemos pulsar en uno de los carteles. Figura 3.4:Lista de películas guardadas En la Figura 3.4 podemos observar cómo es la interfaz. En este caso el usuario solo ha guardado 2 películas. 28 3.4.5. Interfaz de información de una película Tras pulsar en una de las películas que hemos guardado nos aparecerá dicha interfaz. Esta vista nos permite ver en primer plano el cartel de la película y la información correspondiente a la misma, como puede ser la sinopsis de la película, el género y el nombre del director, podemos observarlo en la Figura 3.5 y la Figura 3.6. Además, la interfaz cuenta con un indicador circular en el que se muestra, haciendo uso de colores, la nota de la película. Si pulsamos este, nos permite valorar la película mediante un deslizador. Si hacemos scroll hacia abajo, la imagen de la película se irá ocultando para ofrecernos una mejor visión de la información de la película. En la parte inferior se nos presentan dos botones, uno para crear un plan con la película con el texto: AÑADIR AL PLAN. El otro botón con el símbolo de reproducir un vídeo, nos llevará al tráiler de la película en Youtube. Arriba a la derecha observamos el icono de un corazón, lo que nos permitirá quitar esta película de nuestras favoritas y ya no aparecerá en la lista de películas guardadas. 29 Figura 3.5:Información de la película Figura 3.6:Información de la película 3.4.6. Interfaz Recomendaciones Esta interfaz cuenta con tres secciones de recomendaciones (películas recomendadas específicamente para el usuario, películas populares y en estreno), cada una de estas secciones tiene un conjunto de carteles de películas que se le recomiendan al usuario. Cada sección presenta scroll horizontal para poder visualizar todas las películas que se le recomiendan en dicha sección, (ver en las Figuras 3.7 y3.8). La primera sección son las películas recomendadas al usuario según sus gustos, la segunda representa las películas más populares y las películas que están siendo estrenadas. Al pulsar en cada una de ellas accederemos a la información de cada película (Figura 3.5) pudiendo guardarla como favorita, si no lo hemos hecho ya. 30 Figura 3.7:Recomendaciones de películas Figura 3.8:Recomendaciones de películas 3.4.7. Interfaz Usuario Al pulsar la foto de un amigo en cualquier lugar de la aplicación, podremos acceder a una vista de ese usuario. En esta interfaz podremos ver la imagen del usuario, el nombre de este, los planes que tiene actualmente activos y el estado de nuestra relación con él. Este estado puede ser: 1. Enviar petición de amistad. No hemos interactuado con este usuario y tenemos la posibilidad de enviarle una petición de amistad. 2. Esperando respuesta. Le hemos enviado en algún momento una petición de amistad y estamos esperando su respuesta. 3. Aceptar o rechazar. El usuario en el que estamos nos ha enviado una petición de amistad y tenemos la posibilidad de aceptarlo o rechazarlo. 31 4. Eliminar amigo. El usuario que estamos viendo es nuestro amigo y tenemos la opción de dejar de serlo. Figura 3.9:Vista de usuario 3.4.8. Interfaz Lista de amigos Hemos decidido incorporar esta vista a nuestra aplicación ya que, es una forma muy intuitiva para que el usuario pueda ver una lista de sus amigos y usuarios a los que ha enviado una petición de amistad. La vista es una lista en la que se muestra la foto del amigo o usuario al que se le he enviado la petición de amistad y su nombre. 32 Figura 3.10:Lista de amigos 3.4.9. Búsquedas en las vistas Para facilitar al usuario el uso de la aplicación cuando haya muchos datos en esta, hemos implementado un buscador para cada una de las siguientes vistas: 1. En la vista de Mis planes para permitir al usuario encontrar un plan determinado. 2. En la vista de Recomendaciones para encontrar una película determinada. 3. En la vista de Mis películas para, al igual que en la vista anterior, encontrar una película determinada. 33 4. Al presionar alguna de las películas de la vista de Mis películas se accede a la vista de cada película (Figura 3.5). 5. Desde cualquiera de las vistas citadas en el punto 1 se puede acceder a la Realidad Aumentada haciendo uso del botón habilitado para ello. 6. Al pulsar la imagen de un usuario desde cualquier vista en la aplicación, nos redirigirá a la vista de ese usuario. (Figura 3.9). 7. Una vez estamos en la Realidad Aumentada, dependiendo de a qué decidamos enfocar con la cámara accederemos a una vista u otra: a) Al enfocar a un usuario que no es amigo se accederá a la vista en Realidad Aumentada habilitada para añadirlo como amigo. (Figura 3.15). b) Al enfocar a un usuario que sí es amigo accederemos a la interfaz en la que podremos unirnos a alguno de los planes de nuestro amigo. (Figura 3.16). Si finalmente decidimos unirnos a uno de sus planes, accederemos a la vista fuera de la Realidad Aumentada habilitada para ello (Figura 3.2). c) Al enfocar a una película, podremos ver todos los detalles de esta en Realidad Aumentada. (Figura 3.14). Si decidimos ver más información de la película fuera de la Realidad Aumentada, al presionar el botón habilitado para ello, accederemos a la interfaz de Película (Figura 3.5). 40 Figura 3.17:Diagrama que muestra cómo es la navegación entre interfaces en la aplicación 3.6. Conclusiones En este capítulo hemos observado los distintos escenarios que hemos planteado para el uso de nuestra aplicación, a partir de ellos hemos sacado una serie de requisitos funcionales que posteriormente han sido mejor especificados tras las descripciones de las interfaces de usuario que hemos diseñado, apoyándonos en imágenes para mostrar visualmente a lo que nos referimos en cada subsección de las interfaces de usuario. 41 Capítulo 4 Implementación Nuestra aplicación es una aplicación móvil desarrollada en Android, Unity y Vuforia y con un servidor desarrollado en Java usando Spring. En este capítulo comenzaremos describiendo todos los prototipos de implementación que hemos desarrollado, en los cuáles veremos los pros y contras de las tecnologías que hemos probado y el porqué de nuestra elección de implementar la aplicación con estas tecnologías. Después describiremos cómo hemos implementado nuestra aplicación, desde la arquitectura que hemos seguido, las tecnologías usadas para la parte frontend y la parte backend junto a las dificultades que nos hemos encontrado mientras trabajábamos. Finalmente hablaremos de las herramientas de trabajo utilizadas para facilitarnos el trabajo en equipo. La aplicación FilmAR que se ha construido como solución para este proyecto se encuentra en https://filmar-team.github.io/FilmAR/. Esta aplicación tiene una licencia Apache License 2.0. 4.1. Pruebas de arquitectura Estas pruebas sirven para conocer si las tecnologías seleccionadas de la Subsección 2.1.1 son viables dentro de nuestro proyecto. Desarrollaremos prototipos con funcionalidades básicas y evaluaremos las partes positivas y negativas de dichas tecnologías. Esto nos permitirá decidir cuales son las mejores opciones para construir el software. 42 4.1.1. ARCore Al comenzar la fase de desarrollo de proyectos, pensamos que una de las tecnologías que debíamos investigar y probar debía ser ARCore. Esto se debía a que, la empresa detrás de esta tecnología es Google y esto podría significar que tendríamos más material de consulta y ejemplos en comparación con otras tecnologías de fabricantes con menos recursos. ARCore se encuentra disponible para Java, Unity, Unreal e iOS. Comenzamos realizando el "Quickstart" para Android y posteriormente para Unity. Tras realizar los proyectos propuestos por ARCore, realizamos algún proyecto propio para comprobar si la herramienta se ajustaba a la idea que teníamos para nuestro futuro proyecto. Tras realizar ambos proyectos, concluimos que, aunque ARCore reúne las características necesarias para en un futuro convertirse en una de las tecnologías más importantes en Realidad Aumentada, no íbamos a seleccionarla para nuestro proyecto por las siguientes razones: Dispone de mucha documentación para comenzar a usar la herramienta, pero poca para realizar tareas más complejas. Resulta muy útil para realizar superposiciones de modelos 3D sobre superficies. Sin embargo, una de las funcionalidades más importantes que nuestra aplicación requería era la interacción con la Realidad Aumentada mediante el uso de botones, imágenes y la carga dinámica de elementos para posicionar en la pantalla de Realidad Aumentada e interaccionar con el usuario. En este sentido ARCore no está, por el momento, tan preparada como otras tecnologías. 4.1.2. Viro Media El objetivo del prototipo realizado con Viro Media es reconocer imágenes almacenadas en el dispositivo para mostrar texto y objetos virtuales. Además de probar tecnologías de desarrollo móvil web como en este caso React Native para plataformas iOS y Android. Comenzamos construyendo una interfaz sencilla con botones que nos redirigen a la escena de 43 Realidad Aumentada (ver Figura 4.1 yFigura 4.2). Para esta interfaz utilizamos NativeBase que es una librería que nos permite realizar una aplicación con apariencias de tipo iOS o Android según el dispositivo. Figura 4.1:Visualización con NativeBase en Android Figura 4.2:Visualización con NativeBase en iOS Para la escena de Realidad Aumentada mostramos texto y al detectar el póster de Pantera Negra, reacciona mostrando una animación de dicho superhéroe saliendo del póster (ver Figura 4.3). 44 Figura 4.3:Visualización de RA Una de las ventajas que apreciamos fue la facilidad del lenguaje, en este caso Javascript, utilizando la popular librería ReactJS y la buena documentación de Viro Media que hacían que el proceso de codificación fuera agradable. Uno de los problemas que presentaba este prototipo era que las dependencias de Viro Media entraban en conflicto con las de NativeBase imposibilitándonos la forma de encontrar versiones compatibles. Utilizamos las últimas que, a pesar de lanzar advertencias, funcionaba en el ejemplo realizado. Otro problema fue la compilación de la aplicación, Viro Media tiene una aplicación para probar lo que desarrollamos conectándose a nuestro ordenador a través de la red. El problema es que algunos recursos, como los iconos que utilizaba NativeBase, no eran descargados, por lo que la mejor forma era probar la versión compilada de iOS y Android. La forma de compilar la aplicación era un proceso costoso para los ordenadores, lento y 45 con multitud de problemas según se ampliaban las librerías que se utilizan. La conclusión que obtuvimos de este prototipo fue que Viro Media y React Native son tecnologías muy prometedoras, pero debido a los problemas surgidos y a que todas sus versiones no eran estables vimos un claro riesgo para el proyecto. 4.1.3. Vuforia + Android En este prototipo utilizamos la librería nativa de Vuforia para Android para realizar las pruebas de tecnología de reconocimiento de imágenes tanto en local como usando la nube que nos ofrecía Vuforia, para la posterior renderización de objetos y textos. Las características tecnológicas de este prototipo son las siguientes: 1. La librería de Vuforia para Android está diseñada a muy bajo nivel. 2. Vuforia para dibujar en 3D usa la librería OpenGL (ver Figura 4.5). 3. OpenGL utiliza una serie de espacios donde se van colocando los elementos (ver Figura 4.4): a) Local space: Es el espacio local de cada objeto. b) World space: Es el mundo donde se encuentran los objetos. c) View space: El mundo visto desde la perspectiva de la cámara. d) Clip space: Se integra con la pantalla del móvil y, definiendo los límites visibles, se establecen unas coordenadas de rango (-1,-1) - (1,1). Las transformaciones de estos espacios se realizan mediante matrices 4x4, en las que la primera fila hace referencia a la coordenada x, la segunda a la coordenada yy la tercera a la coordenada z, mientras que la última columna hace referencia a los desplazamientos de los objetos en esos 3 ejes. 46 Figura 4.4:Esquema de los distintos espacios que usa OpenGL24 Figura 4.5:Captura de un ejemplo de un modelo en 3D 4. En OpenGL es necesario escribir código para que las tarjetas gráficas rendericen el modelo 3D, el lenguaje que se usa es GLSL. Este código de GLSL se escribe en forma de String y se llama a un método que proporciona OpenGL, podemos ver un ejemplo de este código en la Figura 4.6. 47 Figura 4.6:Código en GLSL 48 Figura 4.7:Pipeline de la construcción de un modelo25 Figura 4.8:Mapa de bits de caracteres usado 5. Otro aspecto a tener en cuenta es que OpenGL solo nos ofrece lo básico, no nos ofrece métodos para dibujar directamente objetos, sino que hay que seguir un pipeline de procesos para conseguir dibujar algo (ver Figura 4.7). Esto consiste en pasar un array de números (cada tres para definir un punto) a las tarjetas gráficas, establecer triángulos entre los puntos (más arrays de números) definir colores a partir de los puntos (más arrays...), y con el código del shader, ejecutar estos datos. 6. Por último, como sólo ofrece métodos básicos, no hay métodos de escritura de texto, y la forma que encontramos para que funcione fue usar un bitmap con los caracteres (ver Figura 4.8). Este fue el principal motivo de rechazar esta tecnología ya que, dependiendo de la funcionalidad que se desee implementar, es necesario codificar a muy bajo nivel, lo que costaría mucho tiempo y esfuerzo. 49 Figura 4.12:Diagrama de funcionamiento del servidor 4.3.1. Entidades En el servidor tendremos todas las entidades que necesitamos (Ver Figura 4.13), éstas son representadas mediante clases Java y anotaciones de JPA, para facilitar el mapeo entre tablas de la base de datos y dichas entidades. Hemos implementado las siguientes entidades: 56 Figura 4.13:Modelo entidad-relación Film: entidad referente a las películas que guardamos, con su respectivo título, director, duración, valoración, url del tráiler, sinopsis, url de la imagen de la película, género, país y fecha de estreno. User: entidad para representar a los usuarios de la aplicación, con su nombre, foto, email y contraseña. Friendship: entidad para representar la relación de amistad entre usuarios. Plan: entidad para representar los planes. Estos poseerán una película, un usuario creador, fecha, hora, lugar, título, descripción y una lista de usuarios unidos. UserFilm: entidad intermedia para representar la relación de usuarios con películas, es decir, las películas que son guardadas por cierto usuario. 57 4.3.2. Repositorios Tendremos un repositorio por cada entidad. En Spring las clases de tipo repositorio son aquellas clases que heredan de la clase JPARepository. Son una serie de interfaces que nos proporcionan ya implementados los métodos de tipo CRUD (crear, leer, actualizar y borrar) para la entidad que gestiona dicho repositorio. También se pueden crear métodos personalizados. Los repositorios nos simplifican la forma de acceder a la base de datos ya que nos evita tener que implementar métodos para ello. 4.3.3. Servicios de Aplicación Tendremos un servicio de aplicación por cada entidad. Son las clases encargadas de la lógica de negocio de nuestra aplicación. Se comprueba que los datos que le llegan a los servicios de aplicación a través de los controladores o del sistema de recomendación sean correctos. Tras comprobar la validez de los datos, el servicio de aplicación llamará a los métodos correspondientes de la clase repositorio que corresponda. 4.3.4. Controladores Para cada una de estas entidades necesitamos una clase Controller, que actuará de controlador para saber redirigir cada petición HTTP a su correspondiente servicio de aplicación. A la búsqueda por ID tuvimos que añadir la búsqueda por UUID en usuarios y películas.El ID es necesario para utilizarlo en el sistema de recomendación de Mahout yel UUID es necesario para el reconocimiento de imágenes de Vuforia. Las distintas peticiones HTTP que realizamos son las siguientes: Film Obtener todas las películas GET /films/ Guardar una película POST /films/ Actualizar una película PUT /films/ Buscar una película por su nombre GET /films/search/{name} Buscar una película por su id GET /films/{id} Buscar una película por su uuid GET /films/uuid/{uuid} Borrar una película DELETE /films/{id} 58 User Obtener todos los usuarios GET /users/ Guardar un usuario POST /users/ Actualizar un usuario PUT /users/ Buscar un usuario por su nombre GET /users/search/{name} Buscar un usuario por su id GET /users/{id} Buscar un usuario por su uuid GET /users/uuid/{uuid} Borrar un usuario DELETE /users/{id} Obtener amistades de un usuario GET /users/{id}/friendships Obtener amigos de un usuario GET /users/{id}/friends Obtener planes de un usuario GET /users/{id}/plans Obtener películas que gustan a un usuario GET /users/{id}/films Login de un usuario POST /users/login UserFilm Obtener todas las valoraciones GET /user-films/ Guardar valoración POST /user-films/ Actualizar valoración PUT /user-films/{userId}/{filmId}/rate/{rating} Buscar una valoración GET /user-films/{userId}/{filmId} Borrar una valoración GET /user-films/{id} Recommender Obtener todas las recomendaciones GET /recommendations/ Obtener películas random GET /recommendations/random Obtener películas más relevantes GET /recommendations/trending Obtener películas más nuevas GET /recommendations/premiere Recomendaciones para un usuario GET /recommendations/{id} Obtener las recomendaciones de planes GET /recommendations/{id}/plans/{friend} Borrar todas las recomendaciones DELETE /recommendations/ Borrar todas las recomendaciones DELETE /recommendations/{id} Images Obtener imagen GET /{image}/ Friendships Obtener todas las amistades GET /friendships/ Petición de amistad POST /friendships/{requesterId}/{friendId}/request Aceptación de amistad POST /friendships/{requesterId}/{friendId}/accept Declinar amistad DELETE /friendships/{requesterId}/{friendId}/decline Eliminar amistad DELETE /friendships/{requesterId}/{friendId} 59 Plans Obtener todos los planes GET /plans/ Guardar un plan POST /plans/ Unirse a un plan PUT /plans/{id}/join/{userId} Eliminar un plan DELETE /plans/{id} Obtener planes por id GET /plans/{id} Obtener los usuarios unidos a plan GET /plans/{id}/joined-users Obtener los usuarios de un plan GET /plans/{id}/users Buscar un plan por nombre GET /plans/search/{title} 4.3.5. Sistemas de recomendación Implementamos el sistema de recomendación para obtener películas y planes que pueden ser interesantes para cada usuario, en base a sus gustos. Estas recomendaciones se utilizan en la parte de cliente y se muestran al usuario a través de la interfaz. Los datos de las recomendaciones se guardan en una tabla de la base de datos. Cada periodo de tiempo establecido previamente un procedimiento se ejecuta y actualiza la tabla para aplicar los nuevos datos guardados a las recomendaciones. Este procedimiento usa una funcionalidad de la librería Mahout, para extraer los datos de valoraciones de usuarios a películas. Con estos datos y usando una técnica de filtrado colaborativo genera las recomendaciones. Como generar las recomendaciones es un proceso costoso y lento guardamos los resultados para ser utilizados. 4.4. Cliente Nuestra aplicación está implementada principalmente en Android, las interfaces principales para el uso de los planes, recomendaciones y acceso a la información de las películas guardadas han sido desarrolladas mediante Android Studio. Sin embargo,la parte del cliente que otorga el gran valor a nuestra aplicación está desarrollada en Unity usando la librería de Vuforia. Todas las escenas que aparecen al reconocer carteles de películas e imágenes de usuarios fueron implementadas de esta forma. La parte de la aplicación realizada en Unity, utiliza una serie de clases de la parte desa60 rrollada en Android para realizar las peticiones al servidor y así poder mostrar información específica cuando se reconoce una cierta imagen. Toda la parte de la aplicación que hace uso de Realidad Aumentada está desarrollada en Unity con Vuforia. Vuforia, como hemos explicado anteriormente, sirve para identificar fotografías que se han fijado previamente como objetivos. Esta técnica nos ha resultado muy útil para el reconocimiento de carteles de películas. Sin embargo, nos encontramos con un problema a la hora de identificar usuarios para todas las mecánicas relacionadas con ellos en Realidad aumentada tales como agregar amigos u obtener recomendaciones. Este problema surge de que Vuforia aún no incluye en su librería el reconocimiento facial. Por este motivo hemos decidido a modo de prototipo, que nuestra aplicación reconozca las imágenes de los usuarios. Como comentaremos más adelante en Sección 5.2, si en un futuro Vuforia introduce la posibilidad de reconocer mediante reconocimiento facial, actualizaríamos esta mecánica. Al principio, tanto la parte de Android como la parte de Unity, realizaban peticiones al servidor de forma independiente. Más tarde, para tener un mejor control y no hacer peticiones de dos sitios diferentes, decidimos implementar la obtención de datos únicamente en Android y que Unity usara las clases de Android para acceder al servidor. En la Sección A.3 podemos encontrar una guía con las instrucciones para construir la aplicación y para integrar la parte de Unity y Android. Como la mayor parte de la aplicación está implementada en Android Studio, la estructura de ésta se adapta a lo que ofrece el IDE, consistiendo en el flujo de actividades. Una Activity (Subsección 4.4.1) es cada una de las pantallas o vistas de una aplicación3, las cuales pueden ser modificadas a través de Adapters (Subsección 4.4.2), para crear listas de objetos o incluso dividir una misma actividad en varias. Tras dividir una actividad obtenemos Fragments (Subsección 4.4.5), que son considerados secciones de una actividad con un comportamiento determinado6. Los Fragments los hemos usado para hacer una actividad principal con 3 secciones por las que se puede navegar, donde 61 cada sección representa un Fragment. Las Entities (Subsección 4.4.4) son los modelos de datos correspondientes a las tablas almacenadas en la base de datos. Tendremos una Entity en Android por cada Entidad del Servidor (Subsección 4.3.1), para así mapear los datos de las Entities del Servidor a las Entities de la parte Android. También tendremos las clases View (Subsección 4.4.7) que permiten configurar comportamientos personalizados para las vistas, como ocultar y mostrar objetos según los gestos que se realicen. Para acceder al servidor, debemos implementar unas clases para obtener datos, llamadas Request (Subsección 4.4.6). Como tenemos una parte de cliente implementada en Unity, y anteriormente hemos dicho que Unity utiliza las clases de Android para acceder al servidor, hemos implementado el patrón Command (Subsección 4.4.3). Esto permite que la Activity creada para comunicar Android con Unity use comandos para saber que petición realizar al Servidor. La arquitectura de la parte de cliente podemos verla en la Figura 4.14. Figura 4.14:Diagrama de arquitectura de cliente 62 4.4.1. Actividades Son los componentes de la aplicación que representan una pantalla con la que los usuarios pueden interactuar para realizar una determinada acción (ver Figura 4.15). Figura 4.15:Diagrama de Actividades Entre nuestras actividades podemos destacar dos: MainActivity: La primera actividad (actividad principal) que se activa al iniciar la aplicación, la cual comprueba el estado de sesión del usuario, si está logueado se queda en la actividad, y si no, se redirige al usuario a otra actividad llamada LoginActivity que mediante un formulario muy simple nos permite iniciar sesión o registrarnos. En 63 MainActivity se encuentra un paginador (ViewPager) de 3 fragmentos, donde cada fragmento representa las interfaces de planes, recomendaciones y películas guardadas correspondientemente. Podemos observarlo en la Figura 3.1,Figura 3.4 yFigura 3.7 del Capítulo 3. UnityPlayerActivity: Se trata de una actividad especial que nos permite comunicar la parte desarrollada en Unity con nuestro proyecto Android. Aquí se encuentran llamadas a funciones desde la parte de Unity, se realizan las órdenes y se devuelven a Unity. 4.4.2. Adaptadores Son elementos de manipulación de datos que se aplican a vistas y componentes. En el proyecto se les ha dado mucho uso a las vistas de tipo RecyclerView para representar listas de objetos. Para manejar los datos de cada elemento de la lista, se ha utilizado un RecyclerView.Adapter, el cual manipula cada dato correspondiente a un elemento de la lista. También se han creado otros adaptadores, como uno para manejar tres fragmentos dentro de una actividad, como hemos dicho anteriormente al describir la actividad principal (MainActivity). 4.4.3. Comandos Aquí se encuentran todos los elementos relacionados con el patrón comando (ver Figura 4.16). Ha sido diseñado para realizar la conexión con la parte del proyecto desarrollado en Unity. Al principio las peticiones al servidor se realizaban tanto en Android como en Unity. Esto causaba que tuviéramos implementaciones duplicadas y originaba problemas si había que modificar estos métodos, porque era necesario aplicar los cambios en ambas capas. Decidimos utilizar desde Unity los métodos de Android para resolver el problema. Para evitar que Unity tuviera múltiples dependencias con la capa de Android, decidimos aplicar el patrón comando. Este patrón nos permite abstraer la capa de Android con la capa 64 de Unity y minimizar las dependencias que eran necesarias. Figura 4.16:Patrón comando 4.4.4. Entidades Todos los modelos de datos que podemos recibir del servidor, los cuales hemos descrito anteriormente en este capítulo, en la Sección 4.3, son representados por entidades en nuestro proyecto de Android, con los mismos atributos que tienen sus entidades correspondientes en el servidor. 4.4.5. Fragmentos Representan un comportamiento o una parte de la interfaz de usuario en una actividad. Se utilizan para formar una vista compuesta de paginación en una actividad. Aquí es donde tendremos los 3 componentes principales de nuestra aplicación, la actividad referente a mis planes, la actividad de las recomendaciones y la de mis películas. 65 de Picasso de Android, pero esto era muy lento y decidimos guardarlas en el mismo servidor. Incompatibilidades con las nuevas actualizaciones de Unity. Hemos tenido cuidado con no actualizar el IDE de Unity porque nuestro proyecto quedaría obsoleto, ya nos vimos en la situación de que uno de los miembros tenía una versión superior a la de los demás y tuvimos que rehacer lo que habíamos implementado. 72 Capítulo 5 Conclusiones El objetivo de nuestro proyecto ha sido la realización de explicaciones mediante Realidad Aumentada sobre carteles de películas y caras de usuarios. La información que mostramos debe ser relevante y entendible para el usuario, tanto para las películas como para los usuarios de la aplicación que se reconozcan con la cámara del dispositivo. Para lograr esto hemos implementado una aplicación móvil completa que nos permitiese realizar dicha función. Cuando comenzamos a hablar sobre este proyecto, lo que nos motivó fue el reto de aprender nuevas tecnologías desconocidas para nosotros y afrontarlas en un proyecto que soluciona un problema concreto. La solución a este problema es una aplicación móvil que nos ofrece la facilidad de crear y gestionar planes con amigos para ir al cine. Usando un sistema de recomendación somos capaces de tener una previsión sobre lo que nos podría gustar la película en base a otras que hayamos valorado anteriormente. Con el uso de tecnología de RA buscamos que el usuario se sienta más cómodo utilizando la aplicación, siendo propio dispositivo móvil capaz de reconocer los carteles de películas, o las imágenes de usuarios, ofreciéndonos la posibilidad de realizar acciones sobre éstas. Al principio buscamos aprender los aspectos más básicos que nos permitieran diseñar e implementar la aplicación. Para ello realizamos un estudio del estado del arte en el que desempeñamos las siguientes tareas: Buscamos información y explicamos que es la Realidad Aumentada y cuál es su estado actual. Describimos diferentes librerías de Realidad Aumentada con sus aspectos más 73 destacables. Descubrimos y especificamos distintas fuentes de información de las cuales extraer los datos necesarios sobre las películas de la aplicación, que se mostrarán o se utilizarán para el sistema de recomendación. Buscamos información sobre los distintos tipos de técnicas de recomendación y definimos las más interesantes. En el siguiente paso, diseñamos la aplicación y definimos su funcionalidad, realizando las siguientes tareas: Realizamos un análisis de competencia en el cual descubrimos aplicaciones similares que nos ayudaron a visualizar el diseño de nuestra aplicación. Definimos escenarios donde se podría usar nuestra aplicación. En base a los escenarios anteriormente definidos, establecimos los requisitos funcionales que describen la funcionalidad de la aplicación. Diseñamos las interfaces de la aplicación para las funcionalidades anteriormente comentadas. Posteriormente, pasamos a la parte de implementación donde realizamos las siguientes tareas: Desarrollamos prototipos con distintas librerías de realidad aumentada en aplicaciones móviles y valoramos la experiencia con ellas. Definimos una arquitectura REST para nuestra aplicación y un reconocimiento de imágenes en la nube. Implementamos un servidor en Spring desplegado en Heroku que usa como base de datos PostgreSQL. 74 Implementamos la aplicación móvil en Android y la parte de RA en Unity con la librería Vuforia. Valoramos distintos sistemas de recomendación y finalmente lo implementamos con Mahout. Finalmente, fuimos capaces de aplicar los conceptos generales que aprendimos en el grado en un entorno nuevo y desafiante, gracias al valor humano de un equipo multidisciplinar en el cual los integrantes complementan sus puntos débiles individuales. 5.1. Conclusions Our project0s objective is based on carrying out explanations through augmented reality about movie posters and user0s faces. The information that we show must be relevant and understandable for the user, both for the movies and for the users of the application which are recognized by the device0s camera. To achieve this we implemented a complete mobile app that allowed us to perform this functionality. When we started talking about this project, the fact of learning new technologies and facing them to solve a specific problem was the main issue that encouraged us. Our solution to this problem is a mobile application that offers us the ease of creating and managing movie-based plans with friends. We are able to get predictions about the likeliness of enjoyment for a movie by using a recommendation system, based on a historical film valorations list. Using Augmented Reality, our objective is that a user feels more comfortable using this application, being the mobile device capable of recognizing movie posters, or user images, offering us the possibility of performing actions on these. At the beginning we seek to learn the most basic aspects that would allow us to design and implement the application. In order to do so we carried out a study of the state of art where we did the following tasks: We searched for information and explained what Augmented Reality is and what is 75 it0s current state. We described different Augmented Reality libraries with their most remarkable aspects. We discovered and specificated different information sources from which we could extract the necessary data about the films in our application, which will be showed or used for the recommendation system. We searched for information about the different types of recommendation techniques and we defined the most interesting ones. In the next step, we designed the application and defined it0s functionality, doing the following tasks: We made a competition analysis in which we discovered similar applications to ours which helped us visualize our application0s design. We defined scenarios where our application could be used. Based on those scenarios previously defined, we established the functional requirements which describe the application0s functionality. We designed the interfaces of the application for the functionalities previously commented. Later, we started with the implementation part, where we did the following tasks: We developed prototypes with different augmented reality libraries for mobile devices and we valued our experience with them. We defined a REST arquitecture for our application and image recognition on the cloud. We implemented a server on Spring deployed on Heroku which uses PostgreSQL as a database. 76 We implemented the mobile application on Android and the AR part on Unity using Vuforia0s library. We valorated different recommendation systems and finally implemented one using Mahout. Finally, we were capable of applying the general concepts that we learned in our degree in a new and challenging environment, thanks to the human value of a multidisciplinary team in which the members complement each others individual weak points. 5.2. Trabajo futuro Uno de los mayores problemas del proyecto fue la dificultad de integrar distintas tecnologías entre sí y que estas cumplieran con todos los requisitos que buscábamos. Esto ocasiono que el tiempo de aprendizaje y adaptación del uso de estas tecnologías se disparará, por tanto, a las primeras funcionalidades que teníamos en mente tuvimos que priorizar las que daban el uso básico al problema que planteábamos. A continuación, destacaremos todas esas funcionalidades o mejoras que nos gustaría que tuviera en un futuro la aplicación para que la usabilidad y posibilidades sean más ricas para el usuario: 1. Una de las situaciones que se pueden encontrar nuestros usuarios es que quieren ir al cine a ver una película con amigos, pero no les importe que película si no pasar un buen rato con buena compañía. En este caso la aplicación podría crear planes y una vez se unan todos los amigos sea capaz de recomendar la película que mejor se ajusta a sus preferencias. 2. Otra situación similar a la anterior es que queramos que nos recomiende la película que mejor se adapta a los gustos del grupo, pero acotando a las películas que elijamos previamente. 3. En el momento del desarrollo de este proyecto el reconocimiento facial no está integrado en las librerías de RA que hemos investigado y la complejidad de integrar tecnologías 77 de reconocimiento facial, así como su aprendizaje no era viable para el tiempo de este proyecto. Con lo que se decidió realizar el reconocimiento del usuario con imágenes asemejando esta funcionalidad. Creemos interesante el uso de reconocimiento facial para funcionalidades de usuario, aunque pueda ser polémica es algo nuevo que aporta valor a la aplicación. 4. La escena de RA esta implementada en Unity por lo que podemos exportarla a otras plataformas como iOS, consiguiendo con esto que la aplicación se abra a más usuarios y estos consigan un mayor crecimiento y enriquecimiento de la aplicación. 5. Facilitar la compra de entradas desde la aplicación para que los usuarios puedan realizar la mayoría de las acciones, necesarias para ir al cine, redireccionando a la página web de venta de los cines a los que se quieren acudir para ver la película. 6. Publicar la aplicación a una plataforma de distribución digital de aplicaciones como Google Play, para que los usuarios tengan acceso a instalarla en sus dispositivos. 7. Automatizar con web scraping la obtención de datos de las fuentes de información de películas para que la aplicación siempre tenga la información actual. 8. Utilizar distintos idiomas para el contenido de las películas en la base de datos del servidor usando una columna que indique el idioma de la información. 9. Una de las cosas más importantes que falta por realizar es una evaluación con usuarios que nos proporcionen retroalimentación de la aplicación de la cual obtendremos una visión más amplia sobre si satisface la necesidad al problema que tratamos en el proyecto o si hay que realizar cambios. 78 Capítulo 6 Contribución al proyecto En este capítulo especificaremos las aportaciones de cada integrante del grupo, las cuales se ordenarán por las fases del proyecto. 6.1. Diego Acuña Berger 6.1.1. Estado del arte Investigación de las distintas fuentes de información para la obtención de los datos referentes para las películas, valorando cuál sería la que mejor información aportaba para el proyecto. 6.1.2. Diseño de la aplicación Diseños de vistas de la aplicación con MockFlow. Es decir, el diseño de los primeros bocetos de las interfaces que terminaron por ser lo que hemos diseñado en el Capítulo 3. Diseño de las interfaces de usuario de los planes y películas guardadas. Tras varias pruebas y diseños fallidos diseñé la forma de mostrar los planes y películas basándome en aplicaciones del ámbito del cine o de las series, como puede ser TV Time13 Diseño de la vista que aparece tras guardar una película mediante la Realidad Aumentada, con la que se confirma que película se ha guardado. 79 6.1.3. Implementación Estudio y creación del prototipo de servidor en Spring. Búsqueda de tutoriales y la codificación de un pequeño servidor en local usando el framework de Spring, tras el prototipo contribuí a su ampliación y modificación para que se ajustase correctamente a lo que necesitaba nuestra aplicación. Obtención de imágenes mediante Picasso a la aplicación. Funcionalidad para guardar películas mediante Realidad Aumentada, esto implica la comunicación con Android y Unity para saber la relación que tiene la película que se ha reconocido desde el cloud, con la película que se guarda en el servidor y otorgar feedback al usuario de su correcto funcionamiento. Disposición y diseño de botones que aparecen tras reconocer una película con Realidad Aumentada. Los botones que mostrábamos al principio no tenían mucho sentido con sus iconos y ocupaban mucho espacio, opté por incluir un botón inicial que al pulsarse se desplegase y mostrase más botones por encima del mismo, en los cuales puedes acceder a la información de la película o guardarla. Implementación de funciones del servidor tales como unirse a un plan, salirse de un plan y buscar los planes de un usuario concreto. Cuando me dedicaba a implementar ciertas vistas de la aplicación de Android, como mostrar los planes o las películas guardadas, me vi en la necesidad de incluir funciones en el servidor para obtener los datos que necesitaba, las cuales no nos habíamos planteado ninguno hasta el momento en el que fueron necesarias. 6.1.4. Memoria Redacción del resumen tanto en español como en inglés. Redacción de la introducción a nuestro proyecto así como de los antecedentes. 80 Redacción de los escenarios en los que se usaría nuestra aplicación. Redacción de los requisitos funcionales de la aplicación. Redacción de las distintas interfaces de usuario de la aplicación. Redacción del prototipo del servidor que implementé con Spring. Redacción de cómo está implementado nuestro servidor, es decir, qué entidades poseemos, que servicios de aplicación, controladores y repositorios. Revisión de calidad de la memoria. Me he ocupado de revisar las posibles faltas ortográficas o fallos de estilo al usar LaTeX. Redacción de las dificultades de trabajo así como de las soluciones que les dimos durante el desarrollo del proyecto. 6.2. Daniel Calle Sánchez 6.2.1. Estado del arte Investigación de las tecnologías de Realidad Aumentada ViroReact y Expo AR. Con el fin de decidir el entorno en el que finalmente se implementará la aplicación. 6.2.2. Diseño de la aplicación Colaboración en la identificación de requisitos funcionales de la aplicación. Creación de los segundos bocetos para las interfaces en MockFlow, definiendo un recorrido en el uso de la aplicación. 6.2.3. Implementación Creación de un prototipo con ViroReact y React Native siguiendo los ejemplos de la documentación oficial de Viro Media15, incluye un menú desde el que se accede a dos 81 Intento de escribir texto en el proyecto de Vuforia, el cual se consiguió mediante uso de mapa de bits, pero se rechaza finalmente pues se trata de una implementación muy complicada. Creación de prototipo de la arquitectura de Microservicios, para posterior incorporación en el proyecto. Utilizando un gateway llamado Zuul y un cloud de registros llamado Eureka, de los cuales los demás servicios se registran y zuul los organiza. Evaluación del uso del Docker ofrecido por la universidad, creación de scripts para imágenes de Docker y su posterior despliegue como contenedor en local, preparación de las distintas herramientas necesarias para el despliegue del servidor en un entorno Linux, preparación de bases de datos dentro del contenedor, creación de distintos perfiles para el despliegue en el proyecto del servidor y final implementación de scripts usados para activar el servicio del servidor en Docker. Implementación inicial del servidor para su conexión con la base de datos junto con sus entidades más fundamentales. Implementación de rutas en el servidor, como consecuencia también sus servicios de aplicación, repositorios, etc. Creación de la base de la de arquitectura del proyecto de Android para establecer el flujo de actividades inicial en el proyecto de Android. Implementación de un Viewpager para integrar tres interfaces en una actividad para que el usuario pueda moverse entre ellas. Se establece como la principal interfaz al entrar en la aplicación. Implementación de actividades de sesión y sus correspondientes controles. Se ha conseguido que la sesión del usuario siga activa incluso cuando se cierra la aplicación, solo se termina cuando el usuario decide cerrar su sesión. 88 Implementación de un panel de menú a la izquierda de la aplicación para darle más funcionalidad a la aplicación. Establecimiento de la clase RecyclerView para mostrar listas de objetos en la aplicación, ya que es la más usada en Android, la clase ListView está obsoleta. Creación de algunas vistas propias con características especiales para satisfacer las necesidades que tiene la aplicación para mostrar algunas cosas. Establecimiento de la conexión del proyecto de Android con el proyecto de Unity mediante una actividad llamada UnityPlayerActivity, la cual recibe, ejecuta y retorna datos desde Unity. Para ello se ha usado el patrón de diseño de comando para abstraer dependencias entre Android y Unity. Diseño de una clase genérica para hacer peticiones contra el servidor y así facilitar su uso. Las respuestas se devuelven en forma de callback ya que estas son asíncronas. Establecimiento de algunos efectos cuando se haga una transición de actividades dentro de la aplicación. Implementación en el servidor del sistema de recomendación usando la librería de Mahout, que ofrece un método para la conexión con la base de datos PostgreSQL sin tener que leer los datos de un fichero csv. Revisor de código en todos los proyectos, principalmente en Android y en el servidor para la generalización del estilo de código y correcciones en cuanto se identifiquen errores. Establecimiento del uso de patrones de diseño, como comandos, singleton, constructor, etc. Los cuales se encuentran en la implementación de Android. 89 6.4.4. Memoria Explicación de técnicas de recomendación en el Sección 2.3. Explicación del prototipo de Vuforia y Android en el apartado Subsección 4.1.3. Redacción de la parte cliente de la aplicación en el apartado Sección 4.4. Explicación de sistemas de recomendación en el apartado Subsección 4.3.5. Redacción de la guía de despliegue del servidor en Docker en el Sección A.1. 90 Bibliografía [1] Apple. ARKit 2. https://developer.apple.com/arkit/, 2019. Último acceso Mayo de 2019. [2] Paramount AR+. Paramount AR+. https://play.google.com/store/apps/ details?id=com.paramount.ar.paramountar&hl=es_419, 2019. Último acceso Mayo de 2019. [3] Andrea Ardións. ¿qué es un activity en android studio? https://androidstudiofaqs. com/conceptos/que-es-un-activity-en-android, 2015. Último acceso Mayo de 2019. [4] Pio Calderon. An overview of recommendation systems. http://datameetsmedia. com/an-overview-of-recommendation-systems/, 2017. Último acceso Mayo de 2019. [5] Paul Chapman. Microservicios. https://spring.io/blog/2015/07/14/ microservices-with-spring, 2018. Último acceso Mayo de 2019. [6] Android Developer. Fragmentos. https://developer.android.com/guide/ components/fragments?hl=es-419, 2019. Último acceso Mayo de 2019. [7] Expo. Expo augmented reality. https://docs.expo.io/versions/latest/sdk/AR/, 2019. Último acceso Mayo de 2019. [8] FilmAffinity. FilmAffinity. https://www.filmaffinity.com/es/main.html, 2019. Último acceso Mayo de 2019. [9] Google. ARCore overview. https://developers.google.com/ar/discover/, 2019. Último acceso Mayo de 2019. 91 [10] Marius Horga. Using arkit with metal. http://metalkit.org/2017/07/29/ using-arkit-with-metal.html, 2017. Último acceso Mayo de 2019. [11] IMDB. IMDB. https://www.imdb.com/, 2019. Último acceso Mayo de 2019. [12] Kong. Microservicios. https://microservices.io/patterns/microservices.html, 2018. Último acceso Mayo de 2019. [13] Toze Labs. Tv time la guia de series no1. https://play.google.com/store/apps/ details?id=com.tozelabs.tvshowtime&hl=es, 2019. Último acceso Mayo de 2019. [14] main_bug. Como crear un microservicio o servicio web rest con spring boot (parte 1). http://sinbugs.com/ como-crear-un-microservicio-o-servicio-web-rest-con-spring-boot-1/, 2017. Último acceso Mayo de 2019. [15] Viro Media. Viro React. https://viromedia.com/viroreact, 2019. Último acceso Mayo de 2019. [16] melty. Photo de memoji-jeux-en-realite-virtuelle-siri-5nouveautes-a-tester-d-urgence-sur-ios-12. https://www.melty.fr/ memoji-jeux-en-realite-virtuelle-siri-5-nouveautes-a-tester-d-urgence-sur-ios-12-galerie-3049239-3792089. html, 2018. Último acceso Mayo de 2019. [17] Moviebase. Moviebase. https://play.google.com/store/apps/details?id=com. moviebase&hl=es, 2019. Último acceso Mayo de 2019. [18] MovieLens. MovieLens. https://movielens.org/, 2019. Último acceso Mayo de 2019. [19] Ricardo Moya. Filtrado demográfico. https://jarroba.com/ que-son-los-sistemas-de-recomendacion/, 2013. Último acceso Mayo de 2019. 92 [20] Ricardo Moya. Filtrado híbrido. https://jarroba.com/ que-son-los-sistemas-de-recomendacion/, 2013. Último acceso Mayo de 2019. [21] Neosentec. ¿qué es la realidad aumentada? https://www.neosentec.com/ realidad-aumentada/, 2019. Último acceso Mayo de 2019. [22] Netflix. Netflix prize. https://www.netflixprize.com/, 2009. Último acceso Mayo de 2019. [23] Netflix. Netflix recommendation factors. https://help.netflix.com/en/node/ 100639, 2019. Último acceso Mayo de 2019. [24] Learn OpenGL. Coordinate systems. https://learnopengl.com/Getting-started/ Coordinate-Systems, 2019. Último acceso Mayo de 2019. [25] Learn OpenGL. Hello triangle. https://learnopengl.com/Getting-started/ Hello-Triangle, 2019. Último acceso Mayo de 2019. [26] Denis Parra. Filtrado basado en contenido. https://recommendersys.wordpress. com/2017/11/05/filtrado-basado-en-contenido/, 2017. Último acceso Mayo de 2019. [27] Francesco Ricci, Lior Rokach, Bracha Shapira, and Paul B. Kantor. Recommender Systems Handbook. Springer US, 2011. [28] Juan Saavedra. Sistemas de recomendación, parte 2: filtrado colaborativo. https://medium.com/@eng.saavedra/sistemas-de-recomendaci%C3% B3n-parte-2-b8a5dc9dc730, 2017. Último acceso Mayo de 2019. [29] Rotten Tomatoes. Rotten Tomatoes. https://www.rottentomatoes.com, 2019. Último acceso Mayo de 2019. 93 [30] Vibhav Vibsz. Pokemon go ar contest winners announced. https://otakukart.com/ animeblog/2017/11/19/pokemon-ar-contest-winners-announced/, 2017. Último acceso Mayo de 2019. [31] Vuforia. Vuforia overview. https://library.vuforia.com/getting-started/ overview.html, 2019. Último acceso Mayo de 2019. [32] Wikitude. Wikitude augmented reality sdk. https://www.wikitude.com/products/ wikitude-sdk/, 2019. Último acceso Mayo de 2019. [33] Kirsten Winkler. How social learning through implied networks will change the travel experience. https://bigthink.com/disrupt-education/ how-social-learning-through-implied-networks-will-change-the-travel-experience, 2011. Último acceso Mayo de 2019. [34] Cristina Delgado Rodríguez, Ignacio Rocillo Landa, Jorge Muñoz Rodríguez, Jorge Rueda Garzón y Sergio Fuentes Urabayen. Recomendación dinámica de productos a grupos con realidad aumentada. Universidad Complutense de Madrid, 2015-2016. 94 Apéndice A Guía de instalación para el servidor A.1. Docker Esta es una guía para el despliegue del servidor en Docker. El repositorio del proyecto del servidor se encuentra en: https://github.com/DanielCalle/TFG-Server Para ello primero tenemos que tener docker instalado, el cual se puede instalar por el siguiente enlace: https://www.docker.com/ Tras descargarse el repositorio e iniciado docker, situarse en la carpeta raíz del proyecto mediante el comando cd. Listing A.1:Despliegue de la instancia de docker # Ir a la raiz del proyecto cd <path -del -proyecto > # Despliegue docker - compose up Con la sentecia docker-compose up se despliega la instancia de docker con las configuraciones que están en el archivo docker-compose.yml. Esperar hasta que en el terminal de comandos aparezcan las líneas de la Figura A.1 Figura A.1:Docker desplegado 95 Ahora que se ha levantado la instancia de docker y sus respectivos puertos mapeados. Abrir un nuevo terminal de comandos y conectarse al contenedor mediante ssh con la contraseña tfg-ucm Listing A.2:Conexión ssh # El puerto 22022 es el que se habia mapeado ssh root@localhost -p 22022 Una vez conectado al contenedor, hay que ir a la ruta en la que se encuentra el proyecto: /usr/src/app Listing A.3:Ir a la ruta del proyecto # Ir a ruta cd /usr /src/app Antes de levantar el servicio, hay que preparar postgresql. Hay que ejecutar el script de configuración llamado database.sh. Para ello hace falta primero darle permiso de ejecución al script. Listing A.4:Configuración postgresql # Dar permiso de ejecucion al script chmod +x database .sh # Ejecutar el script ./ database .sh Una vez configurado postgres, se procede al despliegue del servicio. Con service.sh. Listing A.5:Despliegue # Dar permiso de ejecucion al script chmod +x service . sh # Para iniciar el servicio ./ service .sh start # Para reiniciar el servicio ./service.sh restart # Para parar el servicio ./ service .sh stop Puede que haya problemas con el formato de los scripts pues los scripts se escribieron en Windows, para ello hace falta descargarse vim, y cambiarle el formato a los scripts. 96 Listing A.6:Ayudas # Descarga de vim apt -get install -y vim # Cambiar formato vim script .sh :set fileformat = unix :wq Una vez terminada la ejecución, ya está levantado el servicio en el puerto 8080, se puede probar con el siguiente enlace en cualquier navegador localhost:8080/films. Si se quiere ver la estructura de la base de datos se encuentra en el siguiente fichero: path-al-proyecto/src/main/webapp/WEB-INF/sql/filmar_low.sql. Cuando queramos terminar el proyecto, habríamos que desconectar la conexión de ssh y apagar la instancia de docker. Listing A.7:Salir de ssh y docker # Para desconectar la conexion con el ssh exit # Para apagar la instancia de docker docker - compose down A.2. Heroku Para comenzar debemos crear una cuenta en Heroku. Una vez la tenemos creamos una nueva aplicación a la cual daremos un nombre como vemos en la Figura A.2 y este nombre a su vez será parte de la URL pública. 97 seguiremos los siguientes pasos: 1. Accederemos a los directorios FilmAR >src >main de las dos aplicaciones (la generada por Unity con los nuevos cambios y la aplicación en Android general de la aplicación). 2. Eliminaremos la carpeta Assets de la aplicación general y la cambiaremos por la nueva carpeta Assets generada por Unity. De esta manera, tendremos la aplicación en Android actualizada a los nuevos cambios de la parte de Realidad Aumentada. A.3.3. Generar un APK Para generar un APK, simplemente tendremos que ir en Android Studio a la pestaña Build y hacer click en generar APK. De esta forma podremos descargar la aplicación. 104