Aplicación multiplataforma para la consulta y gestión de contenido multimedia

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA INGENIERÍA DEL SOFTWARE Aplicación multiplataforma para la consulta y gestión de contenido multimedia Multiplatform service for consultation and manage multimedia content Realizado por Antonio Romero Gómez Tutorizado por Eduardo Guzmán De los Riscos Departamento Lenguajes y Ciencias de la Computación UNIVERSIDAD DE MÁLAGA MÁLAGA, Diciembre 2016 Fecha defensa: El Secretario del Tribunal 5 Resumen: En la actualidad consumimos más de 8 horas diarias de contenido multimedia, pero siempre que nos disponemos a ver una nueva película o serie, se nos plantea el mismo dilema: ¿Qué película o serie ver? ¿Será buena? etc. Es habitual perder mucho tiempo eligiendo, ya que para ello solemos buscar valoraciones, comentarios en diferentes web y aplicaciones, pero a menudo nos equivocamos. Este proyecto pretende paliar este problema, proporcionando información relevante de calidad, para reducir al mínimo el tiempo decisión y el número de equivocaciones. Para ello se ha creado una plataforma unificada, a la que se podrá acceder, a través, de las aplicaciones nativas de Android e IOS, además de la aplicación web. La plataforma ofrece al usuario un sistema de clasificación de películas intuitivo y rápido, que mantendrá ordenado el contenido, en listas de favoritos, vistos, pendientes y lista negra. Cada película tendrá asociada una puntuación media que se actualizará, en función, de las puntuaciones de los sitios más relevantes: IMDb, filmaffinity, RottenTomatoes, TVISO, Metacritic, etc. Además de ofrecer a simple vista información básica de una película: el título, la portada y su puntuación media, se podrá ver información más detallada como: sinopsis, género, puntuaciones, duración, año, participantes. Adicionalmente, se pondrán consultar las películas en la que ha trabajado cualquiera de los participantes de la película consultada. Finalmente, el usuario podrá buscar a otros y seguirlos, pudiendo consultar su lista de películas favoritas y su información básica. Palabras claves: móvil, aplicación, script, araña, películas, multimedia, animación, IOS, Swift, Django, Python, API, REST, TVISO, Metacritic, PostgrestSQL, IMDb, filmaffinity, RottenTomatoes. 6 Abstract: Actually we consume more than eight hours daily in multimedia. When we are prepared to watch a new movie or TV show, frequently we ask ourselves some questions such as: ¿What movie/show can we watch? or ¿Does this movie/show worth? In order to solve these issues, we could search for movies reviews o comments in different websites and applications, what sometimes is a waste of time and we probably did not choose the right film or series. This project tries to palliate this problem, providing some relevant quality information to minimize the decision time and the number of mistakes committed. Therefore, a unified platform has been created that can be accessed through native applications developed for Android and IOS systems and, also, through the web application. Each film will have associated an average scoring that will be updated according to the score taken from the most relevant websites, i.e. IMDb, filmaffinity, Rotten Tomatoes, TVISO, Metacritic, among others. Furthermore, to offer the basic information about the film, as the title, the cover and the average scoring, at first sight, we could also see more information in detail, as the synopsis, the film genre, the scoring, the length, the first release and the participants of the film. There is also the possibility to search the movies, as well as to look up the film performed by anyone of its participants. This platform has a social nature, because any user could look for other users and follow them, and also consult their favorites films and their basic information. Keywords: mobile, application, script, scrapers, movie, film, multimedia, animation, swipe, IOS, Swift, Django, Python, API, REST, TVISO, Metacritic, PostgrestSQL, IMDb, filmaffinity, RottenTomatoes 7 Capítulo 1.!Introducción ...................................................................................... 9! 1.1.!Motivación ................................................................................................................. 9! 1.2.!Objetivos ................................................................................................................. 11! 1.3.!Materiales y tecnología usada. ............................................................................... 12! 1.4.!Contenido de la memoria ........................................................................................ 13! 1.5.!División del trabajo ................................................................................................. 14! Capítulo 2.!Herramientas y tecnologías empleadas ....................................... 15! 2.1.!Python ..................................................................................................................... 15! 2.2.!Django .................................................................................................................... 15! 2.3.!API REST ............................................................................................................... 16! 2.4.!Django Rest Framework ......................................................................................... 16! 2.5.!Base de datos PostgreSQL .................................................................................... 16! 2.6.!Herramienta de desarrollo Xcode. .......................................................................... 17! 2.7.!Gestor de paquetes Carthage ................................................................................ 17! 2.8.!Swift ........................................................................................................................ 17! 2.9.!Git, GitHub y Git-Flow ............................................................................................. 18! Capítulo 3.!Especificación de requisitos ......................................................... 19! 3.1.!Recopilación de datos ............................................................................................ 19! 3.2.!Aplicación IOS ........................................................................................................ 20! 3.2.1.!Requisitos funcionales .................................................................................... 20! 3.2.2.!Requisitos no funcionales ............................................................................... 22! Capítulo 4.!Análisis y diseño ............................................................................ 23! 4.1.!Casos de uso, aplicación IOS. ................................................................................ 23! 4.2.!Arquitectura ............................................................................................................ 35! 4.3.!Base de datos ......................................................................................................... 36! Capítulo 5.!Implementación e Instalación ....................................................... 39! 5.1.!API REST ............................................................................................................... 39! 5.1.1.!User ................................................................................................................ 39! 5.1.2.!Movie .............................................................................................................. 45! 5.2.!Scripts ..................................................................................................................... 47! 5.3.!Creación e instalación del proyecto. ....................................................................... 48! 5.3.1.!Servidor Django .............................................................................................. 48! 5.3.2.!Aplicación móvil IOS ....................................................................................... 51! 5.4.!Desarrollo y manual aplicación móvil IOS .............................................................. 51! 5.4.1.!LaunchScreen, inicio de sesión y registro ...................................................... 52! 5.4.2.!Clasificación swipe. ......................................................................................... 53! 5.4.3.!Listas de películas del usuario. ....................................................................... 55! 5.4.4.!Perfil de usuario. ............................................................................................. 56! 5.4.5.!Búsqueda de películas .................................................................................... 57! 5.4.6.!Detalle de una película. .................................................................................. 57! Capítulo 6.!Conclusiones y trabajo futuro ...................................................... 61! 6.1.!Conclusiones .......................................................................................................... 61! 6.2.!Trabajo futuro ......................................................................................................... 62! Bibliografía ............................................................................................................... 65! 8 9 Capítulo 1. Introducción 1.1. Motivación En las últimas décadas se han producido diversos hitos en la historia, que han favorecido el avance de las tecnologías. Se puede destacar alguno de ellos, como el primer ordenador personal, la posibilidad de acceder a internet desde los hogares o dispositivos móviles, el incremento de la velocidad de las conexiones en todo el mundo y la aparición de los “dispositivos inteligentes”. La penetración de las redes 3G/4G supuso un gran avance, ya que hasta entonces, las redes móviles no tenían la suficiente velocidad para favorecer el uso de dispositivos móviles, de la forma, en que los usamos en la actualidad. Esto unido a la facilidad de hacer cualquier gestión en cualquier sitio, sin la necesidad de un ordenador, provocó un cambio de tendencias en todo el mundo. Si observamos la Figura 1.1, se puede afirmar, que en los últimos años se ha incrementado vertiginosamente la venta de dispositivos móviles. Como consecuencia de esta demanda y la gran competencia existente, las empresas del sector se han visto obligadas a realizar una gran inversión en I+D+I, para que sus dispositivos sean los mejores y más vendidos, además de cubrir las necesidades y exigencias del mercado. Figura 1.1 Dispositivos conectados a internet (Percolate, 2015) 16 Actualmente estamos utilizando Django 1.8, que es la última versión estable. Para ejecutar el servidor es tan simple como, “python3 manage.py runserver”. De esta forma, solo se ejecutará en local, por defecto en el puerto 8000; si añadimos 0.0.0.0: Puerto, se ejecutará para estar disponible en toda la red. Se ha elaborado un documento con las instrucciones para instalar todo lo necesario, configurarlo y poner en funcionamiento este servidor. 2.3. API REST REST, Representational State Transfer, es un tipo de arquitectura que utiliza el protocolo estándar HTTP. Se creó en el año 2.000 por Roy Fielding, coautor también de la especificación HTTP. Nos permite crear servicios para cualquier aplicación, con independencia de qué tipo de dispositivo, el lenguaje que se haya utilizado o el sistema operativo donde esté funcionando; solo es necesario que soporte la especificación HTTP. 2.4. Django Rest Framework Es un componente externo, para Django, que nos “facilita” la creación de la API REST que utilizaremos para la comunicación entre las aplicaciones y el servidor. Actualmente utilizamos la versión 3; las clases más importantes de este framework son: - Los ViewSets, que son los controladores, donde se define la lógica de cada servicio de la API. - Los Serializers, que tienen una doble función, serializar los datos que provienen de las llamadas a la API y para las respuestas. Se utiliza para convertir los datos serializados en datos soportados por la especificación http, en nuestro caso JSON. 2.5. Base de datos PostgreSQL Es un sistema de gestión de bases de datos relacional, que es una extensión de los sistemas relacionales tradicionales. Añade características de la programación orientada a objetos. Se distribuye bajo la licencia BSD y su código está disponible libremente. Es el sistema de código abierto más potente y en sus últimas versiones puede llegar a competir con sistemas comerciales. Utiliza un sistema multiproceso, en vez de multihilo, característica que mejora su estabilidad; si falla algún proceso, no afectará al resto. 17 2.6. Herramienta de desarrollo Xcode. Es el entorno de desarrollo integrado de Apple. Se ofrece gratuitamente con el sistema MacOS. Se pueden desarrollar aplicaciones en varios lenguajes; incluye una colección de compiladores del proyecto GNU y puede compilar código en C, C++, Swift, Objective-C, Objective-C++, Java y AppleScript. Consta de un sistema de depuración muy completo en el que, además de las opciones habituales de otros IDEs, podemos monitorizar los recursos consumidos por la aplicación, memoria RAM, ROM, actividad de red, etc. Permite optimizar las aplicaciones para que consuman menos recursos. 2.7. Gestor de paquetes Carthage Es un gestor de dependencias para Xcode; hay otras opciones como CocoaPods, pero esta es una opción más flexible y menos intrusiva. El uso es parecido a la de la mayoría gestores de paquetes. En el directorio principal del proyecto, tendremos un archivo denominado Cartfile, en él se recogerán todas las dependencias. Podremos instalar y actualizar las dependencias con el comando “carthage update”. Esto descargará las dependencias para todas las plataformas de Apple. Si especificamos la plataforma añadiendo al final “–platform IOS”, solo se descargarán para esa plataforma. Las principales librerías externas utilizadas en la aplicación IOS son: Alamofire, para las llamadas a los servicios de la API REST, Kingfisher para la descarga y el almacenamiento en caché de imágenes. 2.8. Swift La aplicación de IOS se ha desarrollado en el lenguaje Swift, lenguaje por el que apuesta Apple para todos sus dispositivos, dejando atrás ya, al veterano Objective-c. Este lenguaje soporta programación orientada a objetos y, a partir de Swift 2, se introdujo un nuevo paradigma, la programación orientada a protocolos, que intenta complementar las carencias y problemas que tienen la programación orientadas a objetos. Las piezas claves de esta nueva forma de programar son: - Los protocolos: son plantillas de especificación que definimos para crear unas reglas determinadas, parecido a las interfaces de la orientación a objetos, pero estos se pueden aplicar varias clases, estructuras e incluso enumeraciones. - Las extensiones: aplicada a los protocolos, nos permiten generar la implementación por defecto de los métodos o propiedades especificadas en el protocolo. 18 Desde que Apple en 2015 liberase el código, Swift es un lenguaje de código abierto. Este cambio de rumbo, ha abierto un nuevo abanico de posibilidades. Pretende llegar a ser un lenguaje multiplataforma, ya es posible programar en Swift bajo Linux. Empresas tan relevantes como IBM están empezando a utilizar este lenguaje en sus servidores. 2.9. Git, GitHub y Git-Flow Sistema de control de versiones, diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones de un gran número de archivos de código fuente. GitHub es una plataforma de desarrollo colaborativo de software para alojar proyectos usando el sistema de control de versiones Git. Hemos utilizado un repositorio privado, que hemos obtenido gratuitamente por ser estudiantes. Git-Flow, es una guía de buenas prácticas para organizar las ramas de un repositorio. El esquema básico consta de dos ramas principales: master y develop, y 3 temporales: Feature, Hotfix y Realease, conocidas como ramas de soporte. Existe un comando, “git-flow”, que facilita la creación del esquema básico de esta estructura de ramas, además de poder gestionar la creación y gestión de ramas siguiendo esta estructura. En la Figura 2.1 podemos observar la estructura. Figura 2.1 Estructura Git-Flow (Driessen, 2010) 19 Capítulo 3. Especificación de requisitos Es el conjunto de técnicas y procedimientos que nos permiten definir los servicios que debe ofrecer el sistema y sus restricciones. Esta descripción del sistema, entre otras características, tiene que ser completa, consistente y debe evitar ambigüedades. Los requisitos suelen clasificarse en dos grupos: - Requisitos funcionales: La mayoría de los requisitos suelen ser de este tipo, ya que son los definen todas los servicios y respuestas que debe cumplir el sistema. - Requisitos no funcionales: En ellos se definen todos los requisitos que no se refieren directamente a las funciones del sistema, sino a sus propiedades, como la fiabilidad, la velocidad de respuesta, la capacidad, la seguridad, etc. 3.1. Recopilación de datos Nuestro proyecto es particular, ya que no hay un cliente que nos demande la creación de este proyecto, sino es más una idea, que surge por iniciativa propia con el objetivo de proporcionar un entorno de herramientas que ayuden al usuario con la selección de una nueva película o serie para ver. Hemos comenzado investigando qué aplicaciones relacionadas con el cine existían en ese momento, siendo usuarios durante un periodo de tiempo, para descubrir qué posibles funcionalidades podríamos incluir, con el objetivo de que nuestro proyecto se diferenciara de lo que existía actualmente en el mercado. Una de las grandes preocupaciones era de dónde íbamos a recopilar todos los datos sobre las películas, para tener una base de datos completa y, con ella, poder ofrecer un buen servicio. Nos hemos puesto en contacto, intercambiando varios correos con los sitios más relevantes de puntuaciones tales como IMDb, filmaffinity, Tviso, Sensacine, Metacritic, RottenTomatoes, etc. En los contactos que hemos realizado, hemos encontrado diversas situaciones: Algunos tenían API y nos han facilitado el acceso; otros no tenían, pero nos han dado permiso para hacer un scrapper que recopile los datos de su web. Por último, algunos sitios no nos han contestado e incluso, en el caso de RottenTomatoes, nos ha llegado a pedir más de 80.000 $ por utilizar su API. 20 3.2. Aplicación IOS 3.2.1. Requisitos funcionales RF01 - Registro de usuario: El usuario debe poder registrarse en la aplicación. • RF01.1 - El usuario podrá registrarse en la aplicación rellenando los campos obligatorios de usuario, correo electrónico y contraseña. • RF01.2 - El sistema mostrará dos campos de contraseña en el registro, para evitar equivocaciones. • RF01.3 - El sistema mostrará un mensaje de error cuando los dos campos de contraseñas no coincidan. • RF01.4 - El sistema mostrará un mensaje de error si el nombre de usuario elegido está ya siendo utilizado por otro usuario registrado. • RF01.5 - El sistema mostrará un mensaje de error, si el correo electrónico indicado está ya siendo usado por otro usuario. • RF01.6 - El sistema creará el perfil con el idioma configurado en el móvil. • RF01.7 - El sistema creará el perfil con un avatar por defecto. • RF01.8 - El sistema inicializara por defecto los campos opcionales. RF02 - Inicio de sesión: El usuario debe poder iniciar su sesión en la aplicación. • RF02.1 - El usuario debe poder iniciar su sesión, introduciendo su usuario y contraseña, con los que previamente se haya registrado. • RF02.2 - El usuario debe poder iniciar su sesión, introduciendo su correo electrónico y contraseña, con los que previamente se haya registrado. • RF02.3 - El sistema mostrará un mensaje de error, cuando el usuario/email o la contraseña sean incorrectas. RF03 - Cierre de sesión: El usuario debe poder cerrar la sesión. • RF03.1 - El sistema borrará todos los datos del usuario guardados en la aplicación. FR04 - Sistema de clasificación de películas: El usuario podrá clasificar las películas, según su preferencia. • FR04.1 - Sistema de clasificación swipe: El usuario debe poder clasificar las películas mostradas, de una manera rápida e intuitiva 1. FR04.1.1 - El usuario podrá clasificar la película mostrada como favorita, deslizando su carátula hacia arriba. 2. FR04.1.2 - El usuario podrá clasificar la película mostrada como pendiente, deslizando su carátula a la izquierda. 3. FR04.1.3 - El usuario podrá clasificar la película mostrada como vista, deslizando su carátula a la derecha. 4. FR04.1.4 - El usuario podrá clasificar la película mostrada como como no interesante, deslizando su carátula hacia abajo. • FR04.2 - Sistema de clasificación mediante botones: El usuario podrá clasificar sus películas pulsando el botón correspondiente. 21 1. FR04.2.1 - El usuario podrá clasificar la película mostrada pulsando el botón de favoritos. 2. FR04.2.2 - El usuario podrá clasificar la película mostrada pulsando el botón de pendientes. 3. FR04.2.3 - El usuario podrá clasificar la película mostrada pulsando el botón de vistas. 4. FR04.2.4 - El usuario podrá clasificar la película mostrada pulsando el botón de no interesante. RF05 - Barra de pestañas: El usuario podrá acceder a todas las secciones de la aplicación fácilmente a través de la barra de pestañas. RF06 - Consular perfil: El usuario podrá consultar los datos de su perfil. • RF06.1 - El usuario podrá ver su nombre de usuario. • RF06.2 - El usuario podrá ver su correo electrónico. • RF06.3 - El usuario podrá ver su género. • RF06.4 - El usuario podrá ver su fecha de nacimiento. • RF06.5 - El usuario podrá ver su país. • RF06.6 - El usuario podrá ver sus seguidores. • RF06.7 - El usuario podrá ver los usuarios que sigue. • RF06.8 - El usuario podrá ver su avatar. RF07 - Editar perfil: El usuario podrá editar cualquiera de los datos de su perfil. • RF07.1 - El usuario podrá modificar su nombre de usuario. • RF07.2 - El usuario podrá modificar su correo electrónico. • RF07.3 - El usuario podrá modificar su género. • RF07.4 - El usuario podrá modificar su fecha de nacimiento. • RF07.5 - El usuario podrá modificar su país. • RF07.6 - El usuario podrá modificar el idioma de su perfil. • RF07.7 - El usuario podrá modificar su avatar. • RF07.8 - El sistema mostrará un mensaje de error si el nombre de usuario elegido, está ya utilizado por otro usuario registrado. • RF07.9 - El sistema mostrará un mensaje de error, si el correo electrónico indicado, está ya usado por otro usuario. RF08 - Visualizar las listas de películas clasificadas. • RF08.1 - El usuario podrá visualizar una vista general, donde se mostrará las últimas películas clasificadas de cada lista. • RF08.2 - El usuario podrá visualizar todas las películas clasificadas en las listas de: 1. Favoritas. 2. Vistas 3. Pendientes 4. No deseadas (lista negra) • RF08.3 - El sistema mostrará las últimas películas clasificadas primero. 22 • RF08.4 - El sistema representará cada película, con su carátula, título y una puntuación media. RF09 - Visualizar la información detallada de una película. • RF09.1 - El usuario podrá ver un listado con todas las puntuaciones de los sitios más relevantes. • RF09.2 - El usuario podrá ver el título de la película. • RF09.3 - El usuario podrá ver la duración de la película. • RF09.4 - El usuario podrá ver el año de la película. • RF09.5 - El usuario podrá ver los géneros de la película. • RF09.6 - El usuario podrá ver la sinopsis de la película. • RF09.7 - El usuario podrá ver los productores de la película. • RF09.8 - El usuario podrá ver un listado con todos los participantes, directores, actores, escritores, etc. • RF09.9 - El usuario podrá consultar las películas, donde han trabajado sus participantes. • RF09.9 - El sistema mantendrá actualizadas las puntuaciones de los diferentes sitios. • RF09.10 - El sistema recalculará la media de las puntuaciones cuando estas sean actualizadas. RF10 - Búsqueda de películas: El usuario podrá buscar las películas por título. • RF10.1 - El sistema realizará la búsqueda por el título original o en el idioma del perfil de usuario. RF11 - Soporte multilenguaje: El usuario tendrá disponible la aplicación tanto en inglés como en español. • RF11.1 - El sistema mostrará la interfaz de usuario en el idioma que tenga configurado el teléfono. Si es diferente a los lenguajes disponibles, por defecto se mostrará en inglés. • RF11.2 - El sistema mostrará los datos de las películas en el idioma que se haya configurado en el perfil. RF12 - El sistema mostrará un mensaje de error cuando la aplicación no pueda conectar con el servidor. 3.2.2. Requisitos no funcionales RNF01 - Las claves se guardarán cifradas en la base de datos. RNF02 - Se utilizará un sistema de autenticación mediante la utilización de token, que se generará en función del usuario y la contraseña. RNF03 - Las comunicaciones entre el servidor y las aplicaciones se harán utilizando el protocolo de aplicación HTTPS, para asegurar un canal seguro para las comunicaciones de datos. 23 Capítulo 4. Análisis y diseño 4.1. Casos de uso, aplicación IOS. En esta sección mostraremos los casos de uso que se han generado, a partir del análisis de requisitos que se ha expuesto en el capítulo anterior. Figura 4.1 Diagrama de casos de uso de la aplicación IOS 24 CU01 – Registro de usuario: • Descripción: El usuario podrá registrarse en el sistema, rellenando los campos de usuario, correo electrónico y contraseña. • Actores: Usuario • Pre-condición: Ninguna • Post-condición: El usuario se registra en el sistema correctamente • Prioridad: Alta • Escenario principal: 1. El usuario pulsa el botón para crear una cuenta. 2. El sistema muestra el formulario de registro. 3. El usuario introduce el nombre. 4. El sistema comprueba que el tamaño del usuario es de más de 5 caracteres. 5. El usuario introduce su correo electrónico. 6. El sistema comprueba que el correo tiene un formato correcto. 7. El usuario introduce una contraseña. 8. El sistema comprueba que el tamaño de la contraseña es de más de 5 caracteres. 9. El usuario introduce la confirmación de la contraseña. 10. El sistema comprueba que las dos contraseñas coinciden 11. El usuario pulsa el botón para registrarse. 12. El sistema comprueba que todos los campos son válidos. 13. El sistema creará la cuenta e iniciará la sesión automáticamente. • Escenario alternativo: 4.a) El sistema comprueba que el tamaño del usuario es menor a 5 caracteres. 4.a.1) El sistema muestra un mensaje en rojo, encima del campo de usuario, indicando que el usuario debe tener al menos 5 caracteres. 6.a) El sistema comprueba que el formato del correo es incorrecto. 6.a.1) El sistema muestra un mensaje en rojo, encima del campo de correo, indicando que el correo tiene un formato incorrecto. 8.a) El sistema comprueba que el tamaño de la contraseña es menor de 5 caracteres. 8.a.1) El sistema muestra un mensaje en rojo, encima del campo de contraseña, indicando que la contraseña debe ser al menos de 5 caracteres 10.a) El sistema comprueba que las contraseñas son diferentes. 10.a.1) El sistema muestra un mensaje en rojo, encima del campo de confirmar contraseña, indicando que las contraseñas son diferentes. 12.a.1) El sistema comprueba que hay campos que son inválidos. 12.a.1.1) El sistema comprueba que el nombre de usuario, ya está utilizado por otro usuario registrado. 25 12.a.1.1.1) El sistema muestra un mensaje de error, indicando que el nombre de usuario ya está utilizado. 12.a.1.2) El sistema comprueba que el correo ya está usado por otro usuario. 12.a.1.2.1) El sistema muestra un mensaje de error, indicando que el correo electrónico ya está utilizado. 12.a.2) El sistema no tiene conexión con el servidor. 12.a.2.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. CU02.1 - Acceso al sistema por nombre de usuario: • Descripción: El usuario podrá acceder al sistema introduciendo, su nombre de usuario y contraseña. • Actores: Usuario • Pre-condición: El usuario tendrá que estar registrado en el sistema • Post-condición: El usuario accederá al sistema • Prioridad: Alta • Escenario principal: 1. El usuario introduce su usuario. 2. El usuario introduce su contraseña. 3. El usuario pulsa el botón de inicio de sesión. 4. El sistema comprueba que el usuario y la contraseña son correctos. 5. El sistema muestra la vista de clasificación swipe. • Escenario alternativo: 4.a.1) El sistema comprueba que el usuario o la contraseña son incorrectos 4.a.1.1) El sistema muestra un mensaje de error, indicando que el usuario o la contraseña son incorrectos. 4.a.2) El sistema no tiene conexión con el servidor. 4.a.2.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. CU02.2 – Acceso al sistema por correo electrónico: • Descripción: El usuario podrá acceder al sistema introduciendo, su correo electrónico y contraseña. • Actores: Usuario • Pre-condición: El usuario tendrá que estar registrado en el sistema • Post-condición: El usuario accederá al sistema • Prioridad: Media • Escenario principal: 1. El usuario introduce su correo electrónico. 2. El usuario introduce su contraseña. 3. El usuario pulsa el botón de inicio de sesión. 4. El sistema comprueba que el correo electrónico y la contraseña son correctos. 5. El sistema muestra la vista de clasificación swipe. 32 5.a) El usuario no modifica su correo electrónico. 6.a) El sistema comprueba que el formato del correo es incorrecto. 7.a.1) El sistema muestra un mensaje en rojo, encima del campo de correo, indicando que el correo tiene un formato incorrecto. 7.a) El usuario no modifica su nombre. 8.a) El usuario no modifica sus apellidos. 9.a) El usuario no modifica su fecha de nacimiento. 10.a) El sistema comprueba que la fecha tiene un formato incorrecto. 10.a.1) El sistema restaura el campo, con el último valor válido. 11.a) El usuario no modifica su sexo. 12.a) El sistema comprueba que el sexo introducido es inválido. 12.a.1) El sistema restaura el campo, con el último valor válido. 13.a) El usuario no modifica su país. 14.a) El sistema comprueba que el país introducido es inválido. 15.a.1) El sistema restaura el campo, con el último valor válido. 15.a) El usuario no modifica el idioma de su perfil. 16.a) El usuario no pulsa el botón de modificar avatar. 18.a) El usuario cierra la biblioteca. 18.a.1) El sistema vuelva a mostrar la vista de editar perfil. 20.a) El usuario pulsa el botón para volver a la vista de perfil. 20.a.1) El sistema descarta los cambios y muestra la vista del perfil. 21.a.1) El sistema comprueba que hay campos que son inválidos. 21.a.1.1) El sistema comprueba que el nombre de usuario, ya está utilizado por otro usuario registrado. 21.a.1.1.1) El sistema muestra un mensaje de error, indicando que el nombre de usuario ya está utilizado. 21.a.1.2) El sistema comprueba que el correo ya está usado por otro usuario. 21.a.1.2.1) El sistema muestra un mensaje de error, indicando que el correo electrónico ya está utilizado. 21.a.2) El sistema no tiene conexión con el servidor. 21.a.2.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. CU07 - Visualizar la información de una película: • Descripción: El usuario podrá visualizar la información detallada de la película. • Pre-condición: El usuario tiene que estar identificado en el sistema y estar en la vista de clasificación swipe, la vista de lista general o en la vista de una lista concreta. • Post-condición: El usuario está en la vista de detalle de la película seleccionada • Prioridad: media • Escenario principal: 1. El usuario pulsa sobre la carátula de la película. 33 2. El sistema muestra la vista de detalle de la película. 3. El sistema carga un listado con todas las puntuaciones actualizadas. 4. El sistema carga un listado con todos los participantes de la película. 5. El sistema carga la información básica de la película: título, duración, año, géneros, sinopsis, productores. • Escenario alternativo: 3.a) El sistema no tiene conexión con el servidor. 3.a.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. CU08 - Consultar las películas donde trabaja una persona: • Descripción: El usuario podrá consultar las películas, donde ha trabajado una persona (actor, director, etc.). • Pre-condición: El usuario tiene que estar identificado en el sistema y estar en la vista de detalle de una película. • Post-condición: El usuario visualiza el listado de películas donde ha trabajado el participante seleccionado. • Prioridad: media-baja • Escenario principal: 1. El usuario pulsa sobre un participante. 2. El sistema carga la lista de películas donde ha trabajado y muestra la vista. • Escenario alternativo: 2.a) El sistema no tiene conexión con el servidor. 2.a.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. CU09 - Búsqueda de películas: • Descripción: El usuario podrá buscar una película por el título. • Pre-condición: El usuario tiene que estar identificado en el sistema y estar en la vista clasificación swipe o en la vista de listas general. • Post-condición: El usuario visualiza el listado de películas contenga la palabra búsqueda en su título. • Prioridad: media • Escenario principal: 1. El usuario pulsa el botón de búsqueda. 2. El sistema muestra la vista de búsqueda. 3. El usuario introduce la palabra en el campo del buscador y pulsa el botón buscar. 4. El sistema realiza una búsqueda por el título original y por el título en el idioma del perfil. 5. El sistema cargara el listado con los resultados de la búsqueda. • Escenario alternativo: 3.a) El usuario le da al botón de volver. 34 3.a.1) El sistema muestra la vista desde donde se accedió a la búsqueda. 4.a) El sistema no tiene conexión con el servidor. 4.a.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. CU10 - Visualizar lista completa: • Descripción: El usuario podrá cargar un listado con todas las películas que estén en una lista. • Pre-condición: El usuario tiene que estar identificado en el sistema y estar en la vista de listas general. • Post-condición: El usuario visualiza el listado de películas de la lista elegida. • Prioridad: media • Escenario principal: 1. El usuario pulsa el botón con un más de una lista. 2. El sistema cargará el listado con las películas de la lista elegida, ordenado por fecha de la clasificación (primero las últimas películas clasificadas) y mostrará la vista. • Escenario alternativo: 2.a) El sistema no tiene conexión con el servidor. 2.a.1) El sistema muestra un mensaje de error, indicando que se ha perdido la conexión con el servidor. 35 4.2. Arquitectura Hemos seguido los principios de una arquitectura REST, que básicamente es una arquitectura cliente/servidor con una serie de particularidades. Entre ellas, podemos destacar las dos siguientes: no guarda el estado y utiliza servicios para las comunicaciones a través del protocolo HTTP. Esto reduce los costes de mantenimiento del sistema ya que, al ser cada parte más independiente, la modificación y la corrección de errores es menos costosa. En la Figura 4.2 podemos ver el esquema que ilustra la arquitectura utilizada. A la hora de diseñar las aplicaciones móviles, hemos seguido el patrón arquitectónico Modelo-Vista-Controlador, que separa los datos, la lógica de negocios y la interfaz de usuario. Esta separación de conceptos favorece la reutilización de código, facilita el desarrollo de la aplicación y su mantenimiento. Figura 4.2 Arquitectura REST Figura 4.3 Patrón Modelo Vista Controlador (Wikipedia®, 2016) 36 4.3. Base de datos Para la base de datos hemos optado por una solución relacional, ya que la información que guardamos, referente a las películas, tiene una gran cantidad de relaciones entre sí; además, así nos aseguramos de evitar duplicidades de la misma. En concreto hemos optados por el Sistema Gestor de Bases de Datos PostgreSQL que, como hemos comentado en el capítulo sobre herramientas y tecnologías utilizadas, es relacional. Adicionalmente, otra de sus características más destacadas es que es el sistema de código abierto más potente y que, además, encaja perfectamente con Django, el framework utilizado en el desarrollo del servidor. A continuación se describirá la estructura de la base de datos. Hemos separado la estructura en dos diagramas de entidad-relación para facilitar la legibilidad. Podemos observar en la Figura 5.1 y Figura 5.2 ambos diagramas relacionados a través de las relaciones Collection-Movie y Profile-Celebrity. El diagrama entidad-relación de la figura 5.1 representa la estructura de los datos guardados sobre las películas. Las principales entidades son: Figura 5.1 Diagrama Entidad-Relación, datos de las películas. 37 - Movie: Contiene la información de la película, serie, etc. - Celebrity: Contiene la información de los actores, directores, etc. - Source: Contiene información de los sitios de donde se obtienen las puntuaciones de las películas. - Rating: Esta entidad se genera por la relación mucho a muchos entre “Movie” y “Source”; en ella se guardan las puntuaciones, la fecha de actualización “date_update” e información necesaria para actualizar la puntación. - Participation: Esta entidad se genera por la relación muchos a muchos entre “Movie” y “Celebrity”; en ella guardamos información referente a la participación en la película, su función (actor, director, etc.), premios y nombre del personaje en la película, si es un actor. - Lang: Contiene el código de los lenguajes soportados. Para cumplir con el requisito funcional RF11, se ha creado una estructura de base de datos que, sin incurrir en duplicidades, proporciona un soporte multilenguaje, preparado para incorporar nuevos lenguajes con facilidad, sin necesidad de modificar la estructura. Las entidades acabadas en “_lang”, surgen de la relación muchos a muchos entre “Lang” y otras entidades que posean datos sensibles de traducción. Estas contendrán la información traducida en cada idioma soportado. El diagrama de entidad-relación de la figura 5.2 representa la estructura de los datos de los usuarios registrados. Las principales entidades son: - User: Contiene los relacionados directamente con el registro, autenticación e información básica del usuario. Figura 5.2 Diagrama de Entidad-Relación, datos usuarios. 38 - Profile: Contiene los datos del perfil de usuario, que complementan a los datos de “User”. - Collection: Contiene las películas clasificadas por el usuario. - Feeling: Contiene las emociones que te ha hecho sentir la película. - Like_Celebrity: Contiene los actores, directores, etc., favoritos del usuario. - Relationship: Contiene el conjunto de los usuarios que le siguen y el conjunto de los usuarios a los cuales sigue. Esta entidad se genera por la relación muchos a muchos entre “Profile” y sí misma, con la restricción de que es una relación asimétrica, es decir, un usuario podrá seguir a otro, pero este otro no tiene por qué seguir al primero. Como podemos observar en la figura 5.2, la entidad “Profile” está relacionada con la entidad “Lang”. En este caso se utiliza para la configurar el idioma del perfil, los datos de las películas se mostrarán en función de esa configuración. 39 Capítulo 5. Implementación e Instalación 5.1. API REST Como hemos comentado en el apartado 4.2, hemos utilizado una arquitectura REST. A continuación, mostraremos los servicios ofrecidos por la API. Hemos separado los servicios en dos bloques: “User”, donde detallaremos los servicios relacionados directamente con el usuario y “Movie”, donde detallaremos los relacionados con las películas, series, etc. Normalmente las llamadas a todos los servicios tendrán una cabecera con dos parámetros básicos: “Authorization” que lo llevaran todas las llamadas que no sean de tipo AUTH, y "Content-Type", que podrá ser de tipo "application/json” o “application/x-www-form-urlencoded”. 5.1.1. User - AUTH - PostLogin: Iniciar sesión en el sistema. (POST) /users/login/ Datos del formulario Obtenemos los datos del usuario y su perfil, además del “token” necesario para realizar el resto de peticiones que no son de tipo AUTH (Autorizadas). Respuesta { "message":"Login successfully", "status":200, "user":{ "username":"movie", "profile": { "avatar":"/media/user/default/no-image.png", "lang": { "code":"es" } }, "id":9, "email":"[email protected]" }, "token":"8a0ac632536d7d1ac5db90f6f05338cef2778516" } Campo Tipo Descripción username Text Nombre de usuario o email registrado en el sistema password Text Contraseña asociada al usuario 40 Si el usuario o la contraseña no coinciden, devolverá un mensaje de error. - AUTH - PostSignUp: Registrar un usuario en el sistema. (POST) /users/ Datos del formulario Obtenemos los datos del usuario y su perfil, además del token, necesario para realizar el resto de peticiones que no son de tipo AUTH (Autorizadas). Error 4xx { "message": "User or password incorrect", "status": 404, "user": null, "token": null } Campo Tipo Descripción username Text Nombre de usuario email Text Email password Text Contraseña profile.lang.code Text Código de idioma. Actualmente los valores posibles son: es: español, en: inglés Respuesta { "status": 201, "user": { "id": 9, "username": "movie", "email": "[email protected]", "profile": { "lang": { "code": "es" }, "avatar": "/media/user/default/no-image.png" } }, "errors": null, "token": "8a0ac632536d7d1ac5db90f6f05338cef2778516" } 41 Si ya existe un usuario en el sistema con los campos introducidos nos devolverá un campo de error con los mensajes correspondientes. - User - GetUserProfile: Obtener el perfil de un usuario. (GET) /users/{id}/ Datos en la URL Obtenemos todos los datos del usuario y su perfil. Respuesta { "status": 200, "user": { "first_name": "", "last_name": "", "username": "movie", "profile": { "born": null, "gender": null, "avatar": "/media/user/default/no-image.png", "lang": { "code": "es" }, "postalCode": null, "city": null }, "id": 9, "email": "[email protected]" } } Error { "status": 400, "user": null, "errors": { "username": [ "Ya existe un usuario con ese nombre de usuario." ], "email": [ "Ya existe un usuario con ese email." ] }, "token": null } Campo Tipo Descripción id Number Id de un usuario registrado en el sistema 48 - Extracción mediante Api (Trakt_tv): Llamamos al método con la “id” de la película de nuestra base de datos y la de, en este caso, “imdb”, aunque también puede ser la id de “trakt_tv”. Con estos datos podremos obtener fácilmente los datos de la puntuación, para insertarla en la base de datos. Posteriormente, cuando queramos actualizar la base de datos, solo tendremos que llamar al script correspondiente, pasándole el parámetro “source_id” que tenemos guardado en la tabla Rating. - Extracción mediante scrapper (IMDb): Para implementar los scrappers hemos utilizado la librería “BeautifulSoup” (Richardson, 2004-2015). En el fragmento del código anterior, podemos ver la gran diferencia con el script utilizando API. La llamada al script sería la misma, pero en el scrapper existe una función aparte para extraer los datos. 5.3. Creación e instalación del proyecto. El proceso se puede separar en dos partes: la del servidor y la del cliente, en este caso, la aplicación IOS. En ellas explicaremos cómo crear y configurar el proyecto, a partir de la carpeta del proyecto o de nuestro repositorio de GitHub. 5.3.1. Servidor Django Para comenzar, procederemos a instalar un gestor de paquetes: en el caso de que utilicemos Linux nos valdrá con “apt-get” que viene por defecto. En Mac hay varias opciones, pero una de las más utilizadas es Homebrew. Para instalarlo, visitamos su sitio web y seguimos las instrucciones de instalación. En el caso de Windows habrá descargar los instaladores de las aplicaciones utilizadas. def insert_rating(db, movie_id, imdb_id): error_code = False error_message = "" url_movie = "/movies/" + imdb_id + "?extended=full" data = interface.get_info(url_movie) try: sourceid = int(data["ids"]["trakt"]) rating = int(data["rating"] * 10) count = int(data["votes"]) … from bs4 import BeautifulSoup … rating = soup.find(itemprop="ratingValue").get_text().strip() count = soup.find(itemprop="ratingCount").get_text().strip() rating = int(rating.replace(".", "")) count = int(count.replace(",", "")) … 49 A partir de aquí la instalación es parecida para todas las plataformas; en principio nos hará falta instalar el servidor de base de datos PostgreSQL: Después creamos la base de datos de la aplicación: Con el último comando entramos a la consola de postgresql y, desde ahí, le daremos todos los privilegios de la base de datos al usuario root. Una vez instalado el servidor de base de datos, el próximo paso es instalar git, para clonar el repositorio: Podremos copiar la carpeta del proyecto en cualquier sitio; en el caso de utilizar el repositorio de GitHub, lo clonaremos con el siguiente comando: Para el proyecto se utiliza Python 3; si no lo tenemos instalado, tendremos que hacerlo con los siguientes comandos: Posteriormente, procederemos a instalar las dependencias: entramos a la carpeta del proyecto, “requirements.txt”, que contiene todas las dependencias necesarias, así que solo tendremos que ejecutar el siguiente comando: # macOS $ sudo brew install postgresql # Linux $ sudo apt-get install postgresql # Create the database (as root) $ createdb mooviest $ createuser -P # Activate the PostrgreSQL CLI to grant privileges to the user root $ psql >> GRANT ALL PRIVILEGES ON DATABASE mooviest TO root; # macOS $ sudo brew install git # Linux $ sudo apt-get install git $ git clone https://github.com/JoseAntpr/mooviest.git # macOS $ sudo brew install python3 # Linux $ sudo apt-get install python3 pip3 install –r requirements.txt 50 Pasamos a configurar la base de datos. Para ello accedemos al archivo “settings_develop.py” y completaremos la información con los datos necesarios para la creación de la base de datos. El resultado sería el siguiente: Ahora crearemos las migraciones y las ejecutaremos para generar la estructura de la base de datos, con los siguientes comandos: Ya tenemos todo configurado y listo. Actualmente la base de datos está vacía, así que lo último será cargar todos los datos de las películas. Para ello se ha proporcionado un script denominado “backup_sql.sql”, que automatiza esta tarea con el siguiente comando: Solo aclarar que “postgres” será el usuario de la base de datos al que le dimos permisos; “mooviest” es el nombre de la base de datos; “backup_sql.sql” será el script proporcionado y “mooviest.log”, el archivo donde se guarde el resultado de importar los datos. Ya solo nos queda iniciar el proyecto con el siguiente comando: Con este comando solo se ejecutará en local, por lo tanto, solo funcionará desde el mismo equipo que se ejecute, en el puerto 8000 por defecto. Si añadimos 0.0.0.0: Puerto, será accesible desde cualquier máquina de la red. DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql_psycopg2', 'NAME': 'mooviest', 'USER': 'root', 'PASSWORD': 'root', 'HOST': 'localhost', 'PORT': '5432', } } python3 manage.py makemigrations python3 manage.py migrate psql –U postgres –d mooviest < backup_sql.sql > mooviest.log 2>&1 python3 manage.py runserver 51 5.3.2. Aplicación móvil IOS Tendremos que tener un mac, instalar Xcode 8.1 y para las dependencias del proyecto instalaremos el gestor de paquetes Carthage, con el comando: Podremos copiar la carpeta del proyecto en cualquier sitio; en el caso de utilizar el repositorio de GitHub, lo clonaremos con el siguiente comando: Para instalar las dependencias, entramos en la carpeta del proyecto. El archivo “Cartfile” contiene todas las dependencias necesarias, así que solo tendremos que ejecutar el siguiente comando: Una vez finalizado, solo tenemos que abrir el proyecto y ejecutarlo, también tendremos que tener iniciado el servidor para que funcione. 5.4. Desarrollo y manual aplicación móvil IOS Comenzaremos explicando cómo se ha estructurado el proyecto y describiremos los archivos más importantes: - AppDelegate.swift: Es el punto inicial desde donde parte la aplicación, similar a la clase “Application” en Android. En él se recogen una serie de eventos de la aplicación, tales como la terminación de la carga de opciones, cuando se cierra la aplicación etc. - Info.plist: Este es el archivo de configuración del proyecto. - LaunchScreen.storyboard: Es la imagen que se verá nada más abrir la aplicación. Se han separado por un lado las vistas, con su correspondiente controlador, los recursos, donde podemos encontrar los métodos que llaman a la API REST del servidor, y los modelos. $ git clone https://github.com/JoseAntpr/mooviest_ios.git $ brew install carthage $ carthage update --platform IOS Figura 5.4 Estructura aplicación móvil IOS 52 En los siguientes subapartados mostraremos las diferentes vistas de la aplicación, explicaremos su funcionamiento y enseñaremos las partes de código más reseñables. 5.4.1. LaunchScreen, inicio de sesión y registro La primera vista es el LaunchScreen, comentado anteriormente. Esta vista se muestra mientras se está cargando la aplicación. La siguiente vista es la de inicio de sesión. Si ya tenemos cuenta en la aplicación, introducimos el usuario o email y la contraseña, accediendo al sistema. Si alguno de los parámetros es incorrecto, se muestra un mensaje de error; si por alguna razón no tenemos conexión con el servidor, también se mostrará un mensaje de error. Si por el contrario no estamos registrados, pulsando el texto de la parte de abajo, aparecerá el formulario de inicio con una animación de izquierda a derecha. Rellenamos los campos, que tienen asignados su validadores y, si todo es correcto, se creará la cuenta y se iniciará la sesión. En caso contrario, se mostrará el mensaje de error. Como explicamos en el apartado de la API, la llamada para iniciar sesión y la de registro nos devuelve la misma respuesta: el usuario y su token asociado; quizás la serialización de estos datos sería lo más destacable de este apartado. //Extract token guard let token = json["token"] as? String else{ throw SerializationError.missing("token") } //Extract user guard let userJson = json["user"] as? [String:Any] else { throw SerializationError.missing("user") } Figura 5.5 LaunchScreen, vista de inicio de sesión y registro 53 Las guardas (guard), que se introdujeron en Swift 2, nos permiten realizar chequeos en el flujo de nuestro programa. Si esta no es válida, lanzaremos una excepción que indicará dónde ha fallado la serialización. Se ha seguido la guía que aparece en la página oficial de Apple, “Working with JSON in Swift”, para la creación de los serializadores. En referencia al diseño, en este apartado, se ha mantenido el mismo estilo que en la aplicación desarrollada en Android, para que hubiera una uniformidad entre ambas plataformas móviles. En los siguientes apartados se han seguido las guías de estilo de IOS, manteniendo el color corporativo, pero intentando diseñar una interfaz más limpia y menos saturada. 5.4.2. Clasificación swipe. La clasificación swipe es la vista que se cargará inmediatamente después de iniciarse la sesión. Es una de las vistas más importante, ya que pretende ser un sistema de clasificación rápido e intuitivo. Se podrá clasificar la película de dos formas: - Mediante los botones inferiores, que de izquierda a derecha serían: no deseada (cruz), pendiente (marca páginas), vista (ojo) y favorita (estrella). - Mediante swipe: deslizando la portada hacia abajo “no deseada”, hacia arriba “favorita”, hacia la derecha “vista” y hacia la izquierda “pendiente”. Cada vez que clasifiquemos una película, se incrementará el número de la pestaña de las listas, para indicar al usuario cuántas películas ha clasificado. Esta vista quizás sea la más compleja, ya que entran en juego varios elementos: consta de una vista general donde están los botones, la vista de la portada que es deslizable y el icono que aparece encima de la portada, dependiendo de cuál sea la Figura 5.5 Clasificación swipe 54 dirección al deslizar. Se han realizado animaciones, utilizando “transform”, equivalentes a los utilizados en los juegos, para dar movimiento, escalar la vista y realizar la rotación cuando deslizamos la portada. A continuación, mostraremos los fragmentos de código con lo más destacable: En el fragmento de código anterior podemos ver cómo se calcula el desplazamiento, la rotación de la portada conforme se va deslizando. Además vamos actualizando el icono que aparece encima, en función de dónde se encuentre la carátula. Cuando cargamos la vista, se hace una llamada a la API que nos devuelve un número determinado de películas. Sería poco eficiente cargarlas todas en la vista; lo que hacemos es tener dos listas de películas: una con todas y otra con las películas cargadas. Funcionaría de forma similar a un buffer; hemos definido una constante para indicar el tamaño máximo de ese buffer. El mínimo debería ser al menos dos ya que, si no, cuando se deslice la película no habría ninguna detrás. Una vez que clasifiquemos la película, se borrará de la vista y se ejecutará la función “afterSwiped”. Esta borrará la película de las listas, cargará más películas, según el tamaño de buffer indicado, y comprobará si seguimos teniendo suficientes películas en la lista general; si no volverá a hacer una nueva petición a la API. let rotationStrength: Float = min(xFromCenter/ROTATION_STRENGTH, ROTATION_MAX) let rotationAngle = ROTATION_ANGLE * rotationStrength var scale = max(1 - fabsf(rotationStrength) / SCALE_STRENGTH, SCALE_MAX) let rotationStrength2: Float = min(yFromCenter/ROTATION_STRENGTH, ROTATION_MAX) let scale2 = max(1 - fabsf(rotationStrength2) / SCALE_STRENGTH, SCALE_MAX) scale = min(scale, scale2) let translation = CGAffineTransform(translationX: CGFloat(xFromCenter), y:CGFloat(yFromCenter)) let rotation = CGAffineTransform(rotationAngle: CGFloat(rotationAngle)) let scaleTransform = rotation.concatenating(translation).scaledBy(x:CGFloat(scale), y: CGFloat(scale)) self.transform = scaleTransform self.updateOverlay(sinceXCenter: CGFloat(xFromCenter),sinceYCenter: CGFloat(yFromCenter)) func afterSwiped() { loadedCards.remove(at: 0) allCards.remove(at: 0) movies.remove(at: 0) loadMoreCards() if allCards.count == MIN_CARDS { self.loadSwipe() } } 55 La función “loadMoreCards” cargará nuevas películas en la vista si hay cargadas un número menor que el tamaño del buffer. 5.4.3. Listas de películas del usuario. En la vista de las listas, podremos ver las últimas películas clasificadas ordenada. Si pulsamos el botón “more” de una lista concreta, podremos consultar todas sus películas. En el apartado de la API, comentamos que la llamada a las listas se hacía con paginación. Quizás la parte más interesante del código es aquella en la que se ha gestionado esta paginación. La función “collectionView” se ejecutará antes de mostrar una película. Lo que hacemos es que, si quedan un número menor que la constante “MIN_MOVIES”, que Figura 5.5 Listas de películas de usuario func loadMoreCards() { var i = loadedCards.count while loadedCards.count < MAX_BUFFER_SIZE && i < allCards.count { loadedCards.append(allCards[i]) v.panelSwipeView.insertSubview(loadedCards[i], belowSubview: loadedCards[i-1]) setupConstraintsSubView(Index: i) i += 1 } } func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath){ if !isIOS10 { if (movies.count-indexPath.row) < MIN_MOVIES { nextMovies() } } } 56 en principio la hemos inicializado a 10, se hará una llamada a la API pidiendo la siguiente página. A partir de IOS 10 (Apple Inc., 2016) se han introducido una serie de mejoras en las colecciones. Entre ellas la posibilidad de precargar el contenido de la celda para mejorar la respuesta del desplazamiento. Aprovechando esta nueva novedad, hacemos una precarga de las portadas de las películas. 5.4.4. Perfil de usuario. En la vista de perfil, podemos consultar el nombre de usuario, los seguidores, los usuarios que sigues, la imagen de avatar, etc. Se puede cerrar la sesión pulsando en el botón de arriba a la izquierda y modificar el perfil pulsando el botón de la parte superior derecha. En la vista de perfil podremos modificar todos los datos del perfil, incluido el avatar y otros datos privados que no se muestran en la vista de perfil. Figura 5.5 Listas de películas de usuario func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) { var urls = [URL]() for indexPath in indexPaths { let image = movies[indexPath.item].image if image != ""{ urls.append(URL(string: image)!) } } ImagePrefetcher(urls: urls).start() if (movies.count - (indexPaths.last?.item)!) < indexPaths.count { nextMovies() } } 57 El código de estas vistas no tiene nada especialmente relevante; quizás podríamos destacar que, para editar la foto y poder acceder a la biblioteca del móvil, se tiene que configurar en el archivo “info.plist” una serie de parámetros. 5.4.5. Búsqueda de películas Podremos acceder a esta vista, desde la del swipe o desde la de listas de películas, presionando la lupa situada en la parte superior derecha. Para buscar, simplemente escribimos el nombre de la película o parte del mismo y, al presionar el botón de buscar, cargará los resultados, al igual que la vista de una lista concreta, utiliza el paginado de la misma forma. 5.4.6. Detalle de una película. Figura 5.5 Búsqueda de películas Figura 5.5 Listas de películas 64 65 Bibliografía [1] Apple Inc. (2016). Develop Apple. Obtenido de Develop Apple: https://developer.apple.com/xcode/ [2] Apple Inc. (2016). Developer Apple. Obtenido de Developer Apple: https://developer.apple.com/swift/ [3] Apple Inc. (2016). Developer Apple. Obtenido de Developer Apple: https://developer.apple.com/videos/play/wwdc2016/219/ [4] Apple Inc. (2016). Developer Apple. Obtenido de Developer Apple: https://developer.apple.com/library/content/documentation/UserExperienc e/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/ui d/TP40010853-CH9-SW1 [5] Carthage. (2016). github. Obtenido de github: https://github.com/Carthage/Carthage [6] Christie, T. (2011-2016). Django REST framework. Obtenido de Django REST framework: http://www.django-rest-framework.org/ [7] django. (2005-2016). djangoproject. Obtenido de django The web framework for perfectionists with deadlines: https://www.djangoproject.com/ [8] Driessen, V. (2010). nvie. Obtenido de nvie: http://nvie.com/posts/asuccessful-git-branching-model/ [9] Git. (2016). Git. Obtenido de Git: https://git-scm.com/ [10] GitHub Inc. (2016). Help Github. Obtenido de Help GitHub: https://help.github.com/ [11] Marqués, A. (2013). asiermarques. Obtenido de asiermarques: http://asiermarques.com/2013/conceptos-sobre-apis-rest/ [12] Percolate, 5. M. (2015). Percolate. Obtenido de Percolate: http://read.prclt.com/50-Most-Important-Mobile-Charts.pdf [13] PostgreSQL. (2009-2013). PostgreSQL-es. Obtenido de PostgreSQL-es: http://www.postgresql.org.es/sobre_postgresql [14] Python, F. S. (2001-2016). Python. Obtenido de Python: https://www.python.org/ 66 [15] Richardson, L. (2004-2015). Crummy . Obtenido de Crummy: The Site : https://www.crummy.com/software/BeautifulSoup/bs4/doc/ [16] Wikipedia®. (2016). Wikipedia. Obtenido de Wikipedia la enciclopedia libre: https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93control ador [17] ZenithOptimedia. (2015). ZenithMedia. Obtenido de Zenith The ROI Agency: http://www.zenithmedia.com/internet-use-drive-1-4-increasemedia-consumption-2015/