Desarrollo de un prototipo de aplicación móvil como plataforma social de distribución de audio

DESARROLLO DE UN PROTOTIPO DE APLICACIÓN MÓVIL Plataforma de distribución de audio Alexander Reyes Sánchez - Tutor: Abraham Rodríguez Rodríguez - Julio 2017 Trabajo de Fin de Grado - Grado en Ingeniería Informática M USICFACT DESARROLLO DE UN PROTOTIPO DE APLICACIÓN MÓVIL Plataforma de distribución de audio Alexander Reyes Sánchez - Tutor: Abraham Rodríguez Rodríguez - Julio 2017 Trabajo de Fin de Grado - Grado en Ingeniería Informática M USICFACT Alexander Reyes Sánchez - MusicFact I Índice 1| Introducción .............................................................................................................. 1 1.1 Contexto ................................................................................................................................................ 1 1.2 Objetivos ................................................................................................................................................ 2 1.3 Metodología ........................................................................................................................................... 3 1.4 Competencias específicas cubiertas ....................................................................................................... 4 1.5 Aportaciones al entorno socioeconómico, técnico o científico ............................................................... 5 1.6 Estructura de la memoria ....................................................................................................................... 5 2| Análisis ...................................................................................................................... 6 2.1 Estudio de aplicaciones similares .......................................................................................................... 6 2.2 Requisitos ............................................................................................................................................. 18 2.3 Diagramas de casos de uso ................................................................................................................... 22 2.4 Mockups, diseño de la interfaz y paleta de colores .............................................................................. 24 2.5 Modelo de negocio .............................................................................................................................. 25 2.6 Normativa y legislación ........................................................................................................................ 27 3| Diseño e implementación ........................................................................................ 30 3.1 Alcance de la implementación .............................................................................................................. 30 3.2 Diseño arquitectónico .......................................................................................................................... 33 3.2.1 Módulos ........................................................................................................................................ 35 3.2.2 Componentes................................................................................................................................. 35 3.2.3 Plantillas ........................................................................................................................................ 36 3.2.4 Metadatos ..................................................................................................................................... 37 3.2.5 Data binding .................................................................................................................................. 37 3.2.6 Directivas ....................................................................................................................................... 37 3.2.7 Servicios......................................................................................................................................... 38 3.2.8 Inyección de dependencias ............................................................................................................ 38 3.3 Modelo de la base de datos ................................................................................................................. 39 3.3.1 Realtime Database ........................................................................................................................ 39 3.3.2 Autenticación ................................................................................................................................ 45 3.3.3 Storage ......................................................................................................................................... 46 3.4 Tecnologías .......................................................................................................................................... 47 3.4.1 HTML5, JavaScript, CSS3 y Sass ...................................................................................................... 47 Alexander Reyes Sánchez - MusicFact II 3.4.2 TypeScript ..................................................................................................................................... 48 3.4.3 Ionic 2 ........................................................................................................................................... 49 3.4.4 Ionic Native y Apache Cordova/PhoneGap ..................................................................................... 50 3.4.5 Firebase Notifications .................................................................................................................... 53 3.4.6 Ionic Storage.................................................................................................................................. 54 3.4.7 Ionic Creator .................................................................................................................................. 54 3.4.8 AngularFire2 .................................................................................................................................. 55 3.4.9 Lodash ........................................................................................................................................... 55 3.4.10 Angular2-Charts .......................................................................................................................... 56 3.4.11 GitHub ......................................................................................................................................... 56 3.4.12 Waffle.io ...................................................................................................................................... 56 3.4.13 Zedge ........................................................................................................................................... 57 3.5 Pruebas ................................................................................................................................................ 57 3.6 Acceso al código y despliegue .............................................................................................................. 59 4| Conclusiones ............................................................................................................ 60 Fuentes de información ................................................................................................ 61 Anexos ......................................................................................................................... 63 A) Manual de usuario ................................................................................................................................. 63 B) Aplicaciones Híbridas ............................................................................................................................. 76 C) Camera .................................................................................................................................................. 77 Alexander Reyes Sánchez - MusicFact 1 1| Introducción 1.1 CONTEXTO Música/Audio El contexto en el que se basa nuestra aplicación parte de la sociedad actual que busca un mecanismo de desconexión durante algunas horas del día para mantener la mente ocupada, amenizar las horas de trabajo, trayectos en coche o a modo ambiental en celebraciones. Las aplicaciones móviles han tomado importancia desde el surgimiento de los smartphones, ya que la mayor parte de las personas eligen sus dispositivos móviles como vía principal para interactuar con sus redes sociales. Por ello, el desarrollo de aplicaciones móviles ha ido incrementando exponencialmente y, con este crecimiento, surgiendo nuevas tecnologías. Con las nuevas tecnologías, cambia la manera de desarrollar ciertas tareas que probablemente antes costaban más tiempo y esfuerzo. De esta forma, conseguimos aumentar la productividad de los desarrolladores. Ilustración 1 - Incremento exponencial de aplicaciones móviles 1 1 Incremento exponencial de aplicaciones móviles - Julio 2017 Alexander Reyes Sánchez - MusicFact 2 Centrándonos en nuestro trabajo, las redes sociales tienen muchas utilidades, te dan la oportunidad de mantenerte en contacto con tus amigos, ver fotos de tus familiares en otros países o ciudades, ver vídeos originales, escuchar canciones, etc. Sin embargo, ¿qué opciones tienen aquellas personas creativas que se dedican a grabar música individualmente o con un grupo/banda, pero que no cuentan con el respaldo de una compañía discográfica o un sello multinacional? Hoy en día, no es nada fácil darse a conocer y para ello normalmente es necesaria una inversión. Nuestra red social está destinada principalmente para esos músicos, de tal manera que puedan subir, registrar, promover y difundir sus creaciones a través de canales, promocionando su música de forma simple sin la necesidad de utilizar otros servicios de alojamiento de archivos. Por otro lado, tenemos a los usuarios que eligen la plataforma como reproductor de música, álbum, seguimiento de sus artistas favoritos, ... Son estas personas de diferentes lugares de todo el mundo las que promueven las canciones. 1.2 OBJETIVOS Para esta parte de la memoria, estableceremos los diferentes objetivos que se pretenden alcanzar con el desarrollo de la aplicación. Dichos objetivos los podemos dividir en tres categorías diferentes: • Sociales: Intensificando en los usuarios que eligen la plataforma como reproductor de música, biblioteca de audio, etc. • Económicos: Para los usuarios/músicos que pretenden comercializar sus creaciones musicales. • Estadísticos: Para los usuarios/músicos que están interesados en estudiar los gustos musicales predominantes en la sociedad actual. En resumen, el objetivo principal de este proyecto es ayudar a las personas creativas a sacar a la luz sus creaciones musicales para que puedan llegar en algún momento a comercializase. A parte de proporcionar al resto de usuarios una plataforma músico-social donde puedan realizar un seguimiento de sus artistas favoritos, escuchar sus canciones y/o conocer gente con los mismos gustos musicales. Como resultado del trabajo obtendremos un enorme tesoro de contenidos, entretejiéndolo todo en la red y haciendo que sea más fácil compartir nuestro ingenio. Alexander Reyes Sánchez - MusicFact 3 1.3 METODOLOGÍA Para el desarrollo de este proyecto se ha seguido el modelo clásico en cascada. Este modelo usa un ciclo de vida lineal secuencial, es decir, cada fase debe ser completada antes de que la siguiente fase pueda comenzar, por lo que normalmente el resultado de una fase actúa como entrada para la siguiente. Dentro de cada fase, utilizaremos diferentes herramientas y tecnologías. De entre ellas, cabe destacar algunas como Waffle.io para la fase de requisitos, Ionic Creator para el diseño de la aplicación, Angular junto a otras tecnologías para la implementación, Firebase como base de datos en la nube y entorno para verificar los datos de las pruebas, o Android SDK para el despliegue de la aplicación en un dispositivo móvil. A continuación, se presenta un esquema con las diferentes fases y herramientas mencionadas anteriormente: Entre las ventajas que tiene esta metodología de software destacamos el control. En otras palabras, podemos ajustar plazos para cada etapa del desarrollo. Sin embargo, una de las grandes desventajas del modelo en cascada es que no permite mucha reflexión o revisión. Por ejemplo, una vez que una aplicación se encuentra en fase de pruebas, es muy difícil volver atrás y modificar algún contenido. Si comparamos esta metodología con la planificación prevista en la propuesta de trabajo de fin de grado, no existen grandes desviaciones. Análisis de requisitos Diseño Implementación Pruebas Despliegue Mantenimiento Esquema 1 - Fases y herramientas para el modelo clásico en cascada Alexander Reyes Sánchez - MusicFact 4 Fases Duración Estimada (horas) Tareas (nombre y descripción, obligatorio al menos una por fase) Estudio previo / Análisis 50 Tarea 1.1: Estudio de plan inicial con el tutor Tarea 1.2: Análisis de herramientas y tecnologías a usar Tarea 1.3: Estudio de mercado de aplicaciones semejantes Diseño / Desarrollo / Implementación 180 Tarea 2.1: Diseño de formato para intercambio de datos Tarea 2.2: Desarrollo de funcionalidades Tarea 2.3: Diseño e implementación lógica del lado del servidor Tarea 2.4: Diseño e implementación interfaz frontend Evaluación / Validación / Prueba 40 Tarea 3.1: Evaluación/Validación de funcionalidades implementadas Tarea 3.2: Pruebas de rendimiento en dispositivo móvil Documentación / Presentación 30 Tarea 4.1: Redacción de la memoria final del proyecto Tarea 4.2: Desarrollo de la presentación para la defensa Tabla 1 - Planificación prevista en la propuesta de trabajo 1.4 COMPETENCIAS ESPECÍFICAS CUBIERTAS Con el presente trabajo, de acuerdo con la intensificación Tecnologías de la Información del Grado en Ingeniería Informática, se han cubierto las siguientes competencias específicas: • Capacidad para emplear metodologías centradas en el usuario y la organización para el desarrollo, evaluación y gestión de aplicaciones y sistemas basados en tecnologías de la información que aseguren la accesibilidad, ergonomía y usabilidad de los sistemas. • Capacidad de concebir sistemas, aplicaciones y servicios basados en tecnologías de red, incluyendo Internet, web, comercio electrónico, multimedia, servicios interactivos y computación móvil. Alexander Reyes Sánchez - MusicFact 5 1.5 APORTACIONES AL ENTORNO SOCIOECONÓMICO, TÉCNICO O CIENTÍFICO 2Como aportación que nos ofrece la aplicación al entorno socioeconómico, distinguimos el impacto que recae en el mundo socio musical. Con este tipo de aplicaciones, se pretende reducir el número de descargas ilegales en la red. El problema de la piratería recae en que el público ha sido entrenado por las grandes compañías de medios para desear y exigir entretenimiento sin fin, ya sea música, series, películas, etc. Una vez que se establece la adicción, depende del negocio mantener satisfecho al público. Si esto no se hace de forma eficiente, los consumidores acudirán a los medios de piratería. Sin embargo, si proporcionas medios parcialmente gratuitos al público con streaming, el problema se resuelve solo. Si al usuario le gusta la plataforma y le resulta cómoda (más que molestarse en descargar copias ilegales), probablemente no le importe pagar una cuota mensual que se ajuste a su bolsillo. En la sección 2.5 Modelo de negocio, indagaremos más sobre este tema. 1.6 ESTRUCTURA DE LA MEMORIA La estructura de la memoria sigue la metodología de desarrollo software descrita anteriormente. En primer lugar, la etapa de análisis consta de un estudio previo de aplicaciones similares al proyecto, para luego poder definir los requisitos que debe cumplir la aplicación. Los requisitos pueden ser tanto funcionales como no funcionales. Para guiarnos de una forma más intuitiva, haremos uso de diagramas de casos de uso y algunos mockups para las pantallas más representativas. Finalmente, para terminar con esta fase hablaremos sobre el modelo de negocio a seguir y la normativa/legislación que debe cumplir nuestra aplicación. En segundo lugar, se definen las características implementadas, junto con la arquitectura software y el modelo de la base de datos usados. Además, hablaremos sobre cada tecnología utilizada en el desarrollo del proyecto partiendo desde las bases. Al finalizar la etapa de implementación, se describirá la metodología de pruebas seguida para validar el correcto funcionamiento de la aplicación. También se adjuntan varios enlaces para realizar un seguimiento del proyecto en GitHub y Waffle.io. Por último, se añaden las conclusiones que hemos sacado al terminar el desarrollo de la aplicación. 2 Piratería - Julio 2017 Ilustración 2 - Piratería Alexander Reyes Sánchez - MusicFact 12 Al iniciar la aplicación nos encontramos con una tarjeta de bienvenida donde podemos crear una cuenta o iniciar sesión prácticamente con las mismas características que SoundCloud. Aviso al registrarnos para conocer mejor nuestros gustos musicales (novedad con respecto a otras aplicaciones del mismo género). En primer lugar, disponemos de cuatro secciones para navegar en la parte superior. En ‘Inicio’ tenemos la opción de escuchar canciones sugeridas en función de los gustos que hayamos indicado al registrarnos. Posteriormente, aparecen varias transiciones o comúnmente llamadas ‘slides’: • Explorar: lista de etiquetas (fiesta, electrónica, popular, pop, deporte, niños, …) • Selección de listas • Popular • Top Spain • Nuevos lanzamientos • (NOVEDAD) Fútbol: podemos ver próximos partidos, competiciones, canales, podcasts de fútbol, playlist de fútbol. En la sección ‘Mi Música’ podemos ver nuestro perfil de usuario incluyendo diferentes opciones como, por ejemplo: Suscripción a Premium+ con 30 días gratis (escuchar música sin conexión y sin anuncios); Ver usuarios seguidos/seguidores; Mis canciones favoritas; Ajustes donde podemos, entre otros, suscribirnos a Deezer Family (14,99 €/mes), gestionar nuestra cuenta, ajustes de audio, modo sin conexión, Deezer Labs (uso de nuevas funcionalidades en fase de prueba). Dentro de ‘Notificaciones’ disponemos de una lista con diferentes tipos de notificaciones: Álbum, nuevo single, nuevo álbum, listas. Cada notificación muestra a su vez la fecha de publicación, título, artista/s. Aquí, podemos añadir canciones a una lista, descargar, agregar a favoritos, ver la ficha del artista, compartir. En ‘Buscar’ simplemente existe un buscador que filtra por texto, de forma que nos aparecen los resultados más buscados, artistas, álbumes, canciones, playlists, perfiles. Alexander Reyes Sánchez - MusicFact 13 Por último, el reproductor de música que, desde mi punto de vista uno de los mejores, cumple las siguientes funcionalidades: • Añadir a una lista creada o añadir una nueva • Agregar a favoritos • Ficha del artista • Ficha del álbum • Compartir • Letras (estilo karaoke sólo algunas canciones) • Lista de reproducción • Ajuste de audio vistos anteriormente • Reproducción aleatoria o repetición de canción actual Ilustración 8 - Reproductor Deezer Alexander Reyes Sánchez - MusicFact 14 Tabla comparativa de las aplicaciones SoundCloud Deezer Spotify MusicFact Desarrollador SoundCloud Deezer Mobile Spotify Ltd. Alexander Reyes Versión 2017.04.19-release 5.4.4.88 8.4.1.846 2017.07 Descargas Más de 100 millones Más de 100 millones Más de 100 millones --- PuntuaciónVotantes 4,4/5 - 2.879.143 4,1/5 - 1.193.320 4,5/5 - 8.270.130 --- Género Música y audio Música y audio Música y audio Música y audio Novedades - The Upload: lista personalizada que se actualiza a diario - Funcionalidad al iniciar por primera vez para conocer gustos musicales - Fútbol - Buscar conciertos populares cerca de una ubicación concreta - Crossfade - Tendencias musicales Registrarse/Inic iar sesión - Google+ Registrarse/Inic iar sesión - Facebook Registrarse/Inic iar sesión - Email/Pass Opción ¿Has olvidado la contraseña? Emisora/Radio (pistas similares) Visualización lista de canciones Alexander Reyes Sánchez - MusicFact 15 SoundCloud Deezer Spotify MusicFact Buscador Canciones/lista s recomendadas Lista de canciones con novedades Lista de canciones Top Lista de éxitos por género Lista de canciones por estado de ánimo Buscar por etiqueta Likes/Guardar en biblioteca Quitar like de una canción Repost/Compar tir Historial de reproducción Perfil de usuario Seguidores Seguidos Notificaciones Grabar pista/Subir pista Alexander Reyes Sánchez - MusicFact 16 SoundCloud Deezer Spotify MusicFact Configuración básica Configuración de notificaciones Cerrar sesión Reproductor Compartir en redes sociales Mostrar información de la canción Comentar canción Crear listas de canciones Agregar canciones a una lista Escuchar canciones sugeridas Selección playlists Suscripción Ajustes de audio Dispositivos conectados Modo sin conexión (ya descargado) Alexander Reyes Sánchez - MusicFact 17 SoundCloud Deezer Spotify MusicFact Uso funcionalidades en fase de prueba Descargas (Premium) Álbumes Artistas Tus creaciones Publicidad otras aplicaciones Letras de canciones (algunas) Reproducción aleatoria (obligatoria con cuenta gratis) Ordenar lista Lista de canciones de la playlist Vídeos Podcasts Buscar por código (uso de la cámara del dispositivo/ galería) Buscar amigos en Facebook Alexander Reyes Sánchez - MusicFact 18 SoundCloud Deezer Spotify MusicFact Sesión privada Añadir canciones/listas a la cola de reproducción (Premium) Estudio estadístico para artistas Tabla 2 - Comparativa de aplicaciones 2.2 REQUISITOS La aplicación es igual para cada perfil de usuario, depende de cada uno el uso que le quiera dar. Es decir, habrá usuarios que se limiten a usar la aplicación como una red social para escuchar música o aquellos que la usarán para difundir su música y poder ver el grado de aceptación entre los usuarios registrados en la aplicación. A continuación, se desglosan las funcionalidades de la aplicación a modo de catálogo de requisitos, teniendo en cuenta tanto requisitos funcionales como no funcionales. El catálogo de requisitos es la especificación del comportamiento que se espera de cualquier proyecto software. Estudiando el mercado de aplicaciones similares en la sección anterior, se ha predefinido una serie de requisitos que se consideran indispensables para el proyecto. Seguidamente, se muestra una enumeración y breve descripción de los requisitos establecidos para el diseño y desarrollo de la aplicación. Requisitos funcionales Los requisitos funcionales describen todas las interacciones que tendrán los usuarios con el software. • Registro 1. La aplicación debe permitir al usuario introducir sus datos en el formulario de registro. 2. Opcionalmente, acceder a la cámara o galería para seleccionarla una imagen de perfil y mostrarla en el formulario. 3. El sistema se encargará de validar los datos. 4. El sistema mostrará un mensaje de error si alguno de los datos no cumple las validaciones especificadas para el formulario de registro. Alexander Reyes Sánchez - MusicFact 19 5. En el caso de que la validación sea correcta, se habilitará el botón de registro y el sistema se encargará de guardar los datos del usuario en la base de datos. 6. El sistema mostrará una confirmación al usuario en el caso de que el registro se haya efectuado correctamente. 7. La aplicación redirigirá a la portada para que el usuario inicie sesión. 8. Se permite al usuario registrarse con su cuenta de Facebook redirigiéndolo a su aplicación nativa para autenticarse. • Iniciar sesión 1. Para iniciar sesión el usuario deberá identificarse con su email y contraseña correspondiente. En el caso de ya haber iniciado sesión anteriormente, el inicio de sesión será automático al iniciar la aplicación (siempre y cuando el usuario no haya cerrado su sesión). 2. El sistema se encargará de validar y permitir o denegar el acceso a la aplicación. 3. El sistema mostrará un mensaje de error en el caso de que la validación no sea correcta. 4. En el caso de que la validación sea correcta, se mostrará un mensaje de bienvenida al usuario y se le redirigirá a la pantalla principal. 5. Se permite al usuario iniciar sesión con su cuenta de Facebook redirigiéndolo a su aplicación nativa para autenticarse. 6. Iniciar sesión a través de una cuenta de Google Plus. 7. Iniciar sesión a través de una cuenta de Twitter. 8. Si no se dispone de conexión a internet y existe una sesión abierta previamente, al iniciar la aplicación después de 15 segundos se mostrará un mensaje de ‘Sin conexión’. • Solicitud de cambio de contraseña 1. Se permite al usuario cambiar la contraseña suministrando la dirección email vinculada. 2. En el caso de ser una dirección email válida registrada, se notificará al usuario a través de un mensaje para que comprueba su correo electrónico. 3. El sistema mostrará un mensaje de error en el caso de introducir una dirección email inválida. • Cierre de sesión 1. Cualquier usuario de la aplicación debe poder finalizar su sesión en la aplicación mediante un botón que indique "Cerrar sesión". 2. En el caso de que el usuario pulse el botón de cerrar sesión, el sistema mostrará un mensaje para asegurarse de que el usuario realmente quiere cerrar sesión, permitiendo aceptar o cancelar. 3. El usuario será redirigido a la portada sin estar logueado con un mensaje que le indique que ha cerrado su sesión. Alexander Reyes Sánchez - MusicFact 20 • Navegación aplicación 1. Visualizar la lista de canciones compartidas por usuarios a los que sigues. 2. Añadir a ‘like’ y guardar la canción en nuestra biblioteca de ‘me gusta’. 3. Deshacer ‘like’ en una canción y eliminarla de la biblioteca de ‘me gusta’. 4. Repostear o compartir una pista de audio a tus seguidores. 5. Deshacer el ‘repost’ de una pista de audio. 6. Comentar una pista concreta. 7. Eliminar comentarios propios (deslizar hacia la izquierda). 8. Crear listas de canciones públicas o privadas. 9. Agregar canciones a una lista ya existente. 10. Mostrar mensaje de error en caso de que se quiera agregar una canción privada a una lista pública. 11. Compartir el título y audio de la canción a través de las redes sociales. 12. Reproducir canción. 13. Usar reproductor en segundo plano (media notifications). 14. Ver historial de reproducción. 15. Buscar pistas/usuarios. 16. Visualizar lista de canciones que nos gustan. 17. Ver perfiles de usuarios incluido el nuestro. 18. Seguir a un usuario. 19. Enviar notificación de seguimiento al usuario seguido. 20. Dejar de seguir a un usuario. 21. Ver lista de canciones subidas por el usuario en su perfil (sólo públicas). 22. Las pistas privadas que hayamos subido sólo podrán ser visualizadas en nuestro perfil. 23. Ver listas creadas por el usuario en su perfil (sólo públicas). 24. Las listas privadas que hayamos creado sólo podrán ser visualizadas en nuestro perfil. 25. Ver canciones dentro de cada lista. 26. Ver usuarios seguidos/seguidores. 27. Mostrar mensaje de aviso/confirmación al compartir una canción declarada como privada. 28. Subir pista de audio a la nube. 29. Cancelar progreso al subir pista de audio 30. Eliminar pista de audio propia en cascada (borrar dependencias) 31. Validar formato de la pista de audio. 32. Ver tendencias según estilo de música. 33. Ver notificaciones de quién ha comenzado a seguirte. 34. Configurar las notificaciones emergentes. Alexander Reyes Sánchez - MusicFact 21 Requisitos no funcionales Requisitos complementarios o atributos de calidad. Especifican criterios que juzgan operaciones del sistema en lugar de su comportamiento (requisitos funcionales). • Rendimiento 1. Una vez iniciada la aplicación y cargado los datos, se esperan tiempos de respuesta no superiores a un segundo al navegar por la aplicación y para peticiones a la base de datos, dependerá en gran medida de la cantidad de información que se solicite. 2. Los cálculos que se realicen en la aplicación no suponen demasiada carga para el dispositivo por lo que, en este sentido, el rendimiento será óptimo. El tiempo de inicio se verá afectado, puesto que la velocidad al ejecutar la aplicación es uno de los requisitos que no se logra con aplicaciones híbridas. Éstas al iniciar levantan un navegador e inician la aplicación, por ello se demora a diferencia de las aplicaciones nativas. • Interfaz y usabilidad 1. La aplicación debe constar de una interfaz sencilla, atractiva e intuitiva. De tal forma que su uso no suponga un impedimento o esfuerzo al usuario a la hora de hacer uso de la aplicación. 2. Se presentará un menú de navegación sencillo donde el usuario encuentre satisfechas sus consultas y cómodo su uso. 3. Los datos se mostrarán estructurados para que el usuario encuentre fácilmente lo que desea. 4. Se dará facilidad para leer y rellenar los formularios. • Mantenibilidad, disponibilidad y portabilidad 1. La aplicación estará capacitada para, bajo determinadas condiciones de uso, conservar o restaurar su estado operativo. 2. Disponibilidad para dispositivos móviles (smartphones o tablets) con los sistemas operativos comunes (Android, iOS). 3. Será necesario disponer de una conexión a internet, ya sea por Wifi o por tarifa de datos. • Seguridad 1. Para poder usar las funcionalidades que ofrece la aplicación es necesario autenticarse. 2. Si el usuario no cierra su sesión, ésta se mantendrá abierta para futuros usos de la aplicación. De esta manera, el usuario no tendrá que volver a introducir sus credenciales. 3. Al registrarse un usuario, la contraseña será cifrada. 4. Al cambiar la contraseña, también se cifrará la nueva contraseña. • Escalabilidad y concurrencia 1. La aplicación se diseñará para que sea posible incluir nuevas funcionalidades sin perder calidad en los servicios ofrecidos. 2. Los procesos a la hora de subir datos a la nube se ejecutarán concurrentemente. Alexander Reyes Sánchez - MusicFact 28 Funcionalidades Dentro de las funcionalidades de nuestra aplicación, hay que reflexionar cuáles podemos desarrollar y cuáles no. Siempre usando medios lícitos, por lo que debemos tener claro que lo que no se puede hacer offline o través de campañas de marketing tradicional, no se podrá hacer desde nuestra aplicación. Derechos propios y de terceros Debemos contar con las respectivas licencias de los recursos que utilicemos, ya sean librerías de programación, bases de datos, elementos gráficos, canciones, textos, imágenes. En nuestro caso, debemos hacer hincapié en este aspecto al usar algunas canciones e imágenes para probar nuestra aplicación. También es recomendable leer las condiciones de uso para evitar problemas, ya que en algunas ocasiones (no es el caso para un trabajo de fin de grado), esos recursos excluyen el uso comercial y no podríamos utilizarlos en el desarrollo de aplicaciones. Para terminar, es recomendable proteger tu trabajo una vez hayas finalizado de desarrollar la aplicación para evitar plagios, copias. Licencia y condiciones de uso Como hemos señalado anteriormente, debemos añadir condiciones y licencias de uso que el usuario debe aceptar para poder hacer uso de la aplicación. En las condiciones legales deberemos hacer una adecuación a la normativa y, además, poder eximirnos de las responsabilidades que podamos, para así evitar que nos reclamen por el mal uso que se hagan de ellas. Si su adecuación a la realidad de la aplicación y su ajuste a la legislación vigente son los correctos, será la mejor defensa posible en caso de cualquier reclamación. Por ello, la aceptación previa por el usuario es imprescindible. Información y permisos Para este apartado, al tratarse de aplicaciones que se instalan y ejecutan en dispositivos móviles, resulta bastante importante ser claros y explícitos al solicitar permisos al usuario. Normalmente, cualquier aplicación móvil va a necesitar acceder a los contactos de la agenda o a contenidos del móvil, ya sea por cesión de datos, compartir contenidos. Más adelante, en el apartado 3.4.4 Ionic Native y Apache Cordova/PhoneGap, hablaremos en profundidad sobre estos permisos a la hora de iniciar nuestra aplicación por primera vez. Política de Cookies La necesidad de aceptación de las cookies es tan importante en páginas web como en dispositivos móviles a la hora de descargar aplicaciones. Se deberá establecer un aviso informativo con la información básica sobre qué son las cookies y la finalidad de éstas. Esta breve información redirigirá al usuario a la información completa con todos los aspectos que exige la ley de política de cookies. Alexander Reyes Sánchez - MusicFact 29 Informar al usuario En general, una gran parte de las aplicaciones móviles pueden ser consideradas como “servicios de la sociedad de la información”. Por ello, hay que cumplir con las obligaciones que la legislación implica para estos servicios. La principal obligación es la de informar a los usuarios de los aspectos marcados por la ley, que se hace comúnmente a través de textos en las secciones sobre las condiciones legales. Estos apartados proveen al usuario de información de derechos de autor, condiciones de uso, política de privacidad. Además, se incluyen aspectos como información de la empresa, de contacto, sucursales, exención de responsabilidad mencionada anteriormente. Seguridad La seguridad en las aplicaciones móviles es un tema prioritario, puesto que la mayor parte de ellas guardan información personal de sus usuarios. Uno de los aspectos para tener en cuenta es el cifrado de las contraseñas. En nuestro caso, esta labor está delegada a Firebase que gestiona las cuentas de usuario. Publicidad La monetización de la mayoría de las aplicaciones gratuitas puede provenir de distintas técnicas, algunas más lucrativas que otras. Siempre es recomendable escoger un sistema en función de las utilidades y los tipos de aplicaciones móviles. Sin embargo, por regla general está cada vez más extendido el uso de publicidad para generar los ingresos. Aunque es totalmente lícito que una aplicación incluya publicidad, ésta deberá aparecer siempre identificada como tal para evitar posibles problemas. Alexander Reyes Sánchez - MusicFact 30 3| Diseño e implementación En el presente capítulo se describe todo el proceso de diseño de la aplicación. Se ha realizado un diseño que abarca todos los requisitos descritos en el apartado 2.2 Requisitos. El diseño proporciona una idea completa del software desarrollado en el proyecto. Para ello, dividiremos esta sección en: 3.1 Alcance de la implementación. 3.2 Diseño arquitectónico. 3.3 Modelo de la base de datos. En cuanto a la fase de implementación del diseño, durante el desarrollo del proyecto hemos usado el sistema operativo Ubuntu 16.04 LTS, basado en GNU/Linux y distribuido como software libre. Como editor de código fuente se ha utilizado Visual Studio Code, ligero pero potente que se ejecuta en el escritorio y está disponible para Windows, macOS y Linux. Además, viene con soporte incorporado para Node.js, JavaScript, TypeScript. 3.1 ALCANCE DE LA IMPLEMENTACIÓN Se ha desarrollado un prototipo de aplicación cuya funcionalidad es validar las principales ideas que hemos especificado en el análisis y diseño expuesto anteriormente. Con el objetivo de adquirir los conocimientos básicos sobre las tecnologías que hemos estado usando, de las cuales hablaremos más adelante en la sección denominada 3.4 Tecnologías. Dentro de las características implementadas podemos destacar las siguientes, que cumplen con la mayoría de requisitos especificados previamente. Al iniciar la aplicación nos encontramos con una página de inicio en la que podemos registrarnos o iniciar sesión con una cuenta creada previamente a través de un pequeño formulario protegido con una serie de validaciones. También, existe la posibilidad de registrarnos/iniciar sesión con Facebook de una forma más rápida. En el caso de que el usuario vaya a iniciar sesión con su cuenta y no recuerde la contraseña, puede solicitar el cambio de ésta introduciendo su correo electrónico en el apartado ‘¿Has olvidado tu contraseña?’. Posteriormente, será notificado a través de su cliente de email con las instrucciones correspondientes para realizar el cambio de contraseña. Alexander Reyes Sánchez - MusicFact 31 La aplicación está desarrollada para que, si el usuario la cierra en cualquier momento y no ha cerrado su sesión, se guardará dicha sesión al iniciar de nuevo la aplicación para así evitar volver a introducir de nuevo las credenciales. Una vez dentro de la aplicación, el usuario podrá buscar en el menú correspondiente (intuitivo gracias a los iconos incluidos), artistas y/o canciones que otros usuarios han publicado. De cualquier modo, podemos filtrar para buscar canciones o usuarios. En el caso de que ya conozcamos al artista, podemos seguirlo de forma rápida en el mismo buscador o visitar su perfil y escuchar algunas canciones publicadas por él mismo. Al seguir a un usuario, enviaremos una notificación que se le mostrará al usuario en cuestión si éste tiene la sesión activa. Como hemos indicado antes, también es posible buscar canciones para ver su autor y poder añadirlo a la lista de seguidos. El objetivo de seguir a distintos usuarios/artistas es poder ver de forma más amena sus publicaciones compartidas en nuestro ‘Home’. Entiéndase como ‘publicación compartida’ cualquier canción que haya sido subida como pública y el usuario al que seguimos la ha compartido, no son necesariamente canciones subidas por el mismo autor. De esta forma, favorecemos la distribución de música y aumentamos exponencialmente la rapidez con la que llega a los usuarios registrados en nuestra aplicación. Posteriormente, hablaremos sobre este mecanismo denominado ‘reposts’. Para apoyar las canciones disponemos del clásico botón de ‘me gusta’, el cual cumple dos funciones principales en nuestra aplicación: • Añadir la canción a nuestra lista de ‘me gusta’ para poder escucharla en cualquier otro momento de manera más directa y ordenada. • Ayudar a los usuarios artistas que se dedican al mundo de la música a tener una ligera idea de las tendencias musicales en auge. Al lado del botón ‘like’ tenemos el botón ‘repost’ que hemos mencionado antes. La función de este botón es compartir la canción a tus seguidores para que la vean automáticamente en su directorio principal ‘Home’. A su vez, este usuario seguidor podrá compartirla a sus seguidores y así sucesivamente. Para el caso en el que hayamos subido una canción como privada y queramos luego compartirla, se nos avisará para convertirla en pública. Otra característica habitual es la de poder realizar comentarios. Para cada canción pública es posible ver los comentarios de los usuarios ordenados por fecha y añadir comentarios propios. En caso de querer eliminar cualquier comentario propio, es posible hacerlo simplemente deslizando el dedo en la pantalla hacia la izquierda para mostrar la opción de eliminar. Conjuntamente, desde aquí podemos navegar a la vista de perfil de cualquier usuario que haya comentado. Alexander Reyes Sánchez - MusicFact 32 Luego, tenemos la opción de añadir la canción a una lista creada previamente o crear una nueva con esa canción. Esta funcionalidad es útil para aquellos usuarios que quieran mantener su biblioteca ordenada según el estilo de música, autor, … Por otro lado, las pistas se ordenarán dentro de cada lista por antigüedad desde la más antigua hasta la más nueva. Y, además, existe la posibilidad de crear listas privadas para nuestro uso y disfrute. De cualquier forma, como es lógico, la aplicación no nos dejará incluir una canción privada a una lista que haya sido creada como pública. Además, es posible compartir el título y audio de una canción a través de las redes sociales. Al no disponer de un dominio para la aplicación, el enlace compartido redirigirá al usuario a donde está almacenado el audio y así al menos poder escucharlo. La reproducción de la canción está disponible en la vista amplificada de la pista, donde podemos realizar cualquiera de las acciones expuestas previamente y, también, visitar el perfil público del usuario que ha subido dicha canción. En los perfiles, incluido el nuestro, podemos ver la foto de perfil o una por defecto junto con la información básica de perfil y, justo al lado, el botón de ‘Seguir’ o ‘Siguiendo’. Posteriormente, podemos ver las canciones propias que hemos o ha subido el usuario en cuestión y, justo al lado, disponemos de las listas creadas tanto públicas como privadas. Lógicamente, las listas privadas solo podrán ser vistas por el usuario que las creó al igual que las canciones. Finalmente, podemos ver los usuarios seguidos y los seguidores de forma que podemos navegar indefinidamente entre perfiles. Sin embargo, suponiendo que el usuario quiera volver al menú principal, dispone de un botón para retroceder automáticamente. Como característica destacada y fundamental, tenemos el formulario para subir las canciones desde nuestro móvil a la base de datos en la nube que estamos usando para desarrollar la aplicación. Para empezar, disponemos de la opción de establecer una portada para nuestra publicación o dejar la que la aplicación nos ofrece por defecto. Si decidimos añadir una imagen nueva, podemos seleccionar una existente desde la galería o abrir la cámara del móvil para efectuar una actual. De cualquier modo, podemos previsualizarla en el mismo formulario. Por consiguiente, será necesario añadir el archivo de audio guardado en el dispositivo móvil. Para ello, primero tendremos que aceptar los permisos oportunos para poder acceder a los repositorios/carpetas del sistema operativo del smartphone. Una vez seleccionado el archivo de audio, el sistema validará su formato y, en caso de ser aceptado, veremos la ruta específica en el formulario para poder verificar que se ha seleccionado una canción. Sólo nos queda añadir un título de canción, una etiqueta de las preseleccionadas que identifique el tipo de música y si queremos que la canción sea pública (compartirla a nuestros seguidores) o privada. Con todo esto y las validaciones pertinentes, se habilitará el botón para subir la pista a la base de datos. Esto puede tardar varios segundos o incluso minutos, dependiendo en gran medida de la velocidad de nuestra red y del tamaño del archivo de audio ya que, en caso de subir alguna imagen, ésta la habremos redimensionado a un tamaño Alexander Reyes Sánchez - MusicFact 33 práctico y agradable visualmente que no afecte al rendimiento de la aplicación. Un indicador de progreso nos mantendrá informados de la subida pertinente al audio y a la portada en su caso. En cuanto a las tendencias de las que hablamos en el apartado del botón ‘me gusta’, podemos ver un gráfico circular en el que se encuentran los porcentajes de ‘me gusta’ de cada etiqueta de estilo de música disponible en la aplicación. El objetivo de este gráfico es ilustrar a los artistas cómo van variando los gustos musicales, y tomen nota de ello para sus posteriores producciones. De esta forma, es posible observar qué tipo de música se demanda más, tomando como muestra a los usuarios registrados en la aplicación. También, podemos ver un listado de las notificaciones recibidas por los usuarios que nos han seguido y acceder al perfil. Las notificaciones emergentes las podemos activar/desactivar en la sección de configuración de notificaciones. Una vez guardados los cambios, se nos pedirá que reiniciemos la sesión para establecer la nueva configuración. Por último, el usuario podrá cerrar su sesión y confirmar dicha acción a través de un mensaje de alerta. 3.2 DISEÑO ARQUITECTÓNICO Ilustración 11 - Lenguajes que forman la arquitectura de Angular 7 El diseño arquitectónico de nuestra aplicación sigue un modelo basado en componentes. Esto quiere decir que la aplicación estará compuesta por un árbol de componentes que se utilizan los unos a los otros para la obtención de los objetivos globales que se quieren alcanzar. La mayoría de frameworks modernos usan esta arquitectura, que se ha demostrado que es la que ofrece un mejor código, más fácilmente escalable y mantenible. 7 Lenguajes que forman la arquitectura de Angular - Julio 2017 Alexander Reyes Sánchez - MusicFact 34 Los componentes están pensados para, de manera modular y encapsulada, resolver pequeños problemas. Por ejemplo, puede haber componentes para implementar un sencillo botón, para selectores de fechas o en nuestro caso, componentes para hacer un sistema de navegación por tabs, una barra de progreso, etc. Integrando componentes somos capaces de construir aplicaciones grandes y complejas. El framework que estamos usando, Ionic 2 nos ofrece ya de base una cantidad muy grande de componentes que son capaces de trabajar perfectamente en dispositivos móviles con pantallas táctiles, pero obviamente para el desarrollo de las aplicaciones necesitaremos construir nuestros propios componentes que implementen los comportamientos más específicos de nuestro análisis. Ionic 2 está desarrollado sobre el framework de JavaScript Angular. Lo que quiere decir que para el desarrollo con Ionic 2 podemos apoyarnos en todas las ventajas de desarrollo con Angular, lo que nos permitirá contar con una excelente estructura de proyecto, el trabajo con buenas prácticas, uso de patrones de diseño de software variados, principalmente MVC (Model View Controller), y por supuesto como se ha indicado antes una buena gama de componentes y directivas. De esta manera, usando Angular podemos aprovechar muchas utilidades pensadas para un desarrollo más rápido y, además, tenemos la certeza de disponer de un código más optimizado y de mayor rendimiento, adaptado para el momento actual y el futuro. El siguiente diagrama muestra la arquitectura de Angular: Esquema 3 - Elementos que conforman la arquitectura de Angular 8 8 Elementos que conforman la arquitectura de Angular - Julio 2017 Alexander Reyes Sánchez - MusicFact 35 A continuación, enunciaremos y describiremos las principales partes que conforman esta arquitectura: 3.2.1 Módulos Las aplicaciones en Angular son modulares y se conocen como ‘NgModules’. Cada aplicación Angular tiene al menos un módulo, que es el módulo raíz, denominado ‘AppModule’. La mayoría de las aplicaciones tienen varios módulos, cada uno es un bloque dedicado a una tarea concreta. En nuestro caso, hemos partido del módulo raíz sin crear módulos nuevos. Un módulo es una clase con el decorador @NgModule. Los decoradores son funciones que modifican las clases JavaScript. Angular posee varios decoradores que adjuntan metadatos a las clases. Cada módulo deberá estar declarado en el fichero ‘app.module.ts’ bajo el decorador @NgModule. Las propiedades más importantes de ‘NgModule’ son: • Declarations: Las clases de vista que pertenecen a este módulo. Angular tiene tres tipos de clases de vista: componentes, directivas y pipes. • Imports: Otros módulos cuyas clases exportadas son necesarias por los componentes de las plantillas declaradas en este módulo. • Bootstrap: La vista principal de la aplicación, denominada componente raíz, que aloja todos los otros puntos de vista. Sólo el módulo raíz debe establecer esta propiedad. • EntryComponents: Para componentes añadidos dinámicamente. Al añadirlos, Angular comunica al compilador de plantillas sin conexión que los compile. • Providers: Creadores de los servicios que este módulo utiliza (son accesibles en toda la aplicación). 3.2.2 Componentes Un componente controla una parte de lo que se muestra en la pantalla denominado vista. El componente interactúa con la vista a través de una serie de propiedades y métodos, en los que se define la lógica de la aplicación. Angular es capaz de crear, actualizar y destruir componentes a medida que el usuario navega por la aplicación. La actuación se puede dar en determinados momentos del ciclo de vida como, por ejemplo, al inicializar la vista. Alexander Reyes Sánchez - MusicFact 36 En nuestra aplicación, existen numerosos componentes que interactúan entre sí para el correcto funcionamiento de la misma. A continuación, explicaremos uno de los componentes que conforman la aplicación y que hemos creado desde cero. El componente denominado ‘ProgressBar’, lo hemos creado desde cero para aprender cómo se desarrolla un componente personalizado y adaptarlo a la funcionalidad que queremos. Básicamente, se trata de una barra de progreso que nos indica el estado de subida de un archivo a nuestra base de datos en la nube de Firebase. Cuando subimos un archivo (audio y/o imagen) guardamos el estado actual en una variable que almacena el porcentaje de subida. Este porcentaje lo calculamos a través de un snapshot (instantánea) que incluye los bytes subidos y el total de bytes que se pretenden subir. De esta manera, capturamos el estado cambiante de esa variable y se la pasamos como parámetro de entrada al nuevo componente. El componente tiene su propia plantilla HTML que simplemente muestra una vista con una barra cuya longitud cambia conforme varía la variable captada como parámetro de entrada. Usando el selector que hemos declarado en el componente, podemos usar esta barra de progreso en cualquier lugar de nuestra de aplicación de una forma escalable y siguiendo el principio fundamental de desarrollo de software DRY (Don’t Repeat Yourself). El resto de componentes se limitan a recoger información de la base de datos, transformarla y mostrarla al usuario para que éste pueda visualizarla e interactuar con ella. De cualquier modo, también se encargan de enviar información a la base de datos para registrar nuevos usuarios o para verificar datos, como puede ser a la hora de iniciar sesión. 3.2.3 Plantillas Las plantillas son fragmentos de HTML con etiquetas especiales de Angular e Ionic 2. Estas plantillas indicarán cómo se debe representar el componente. Se trata de código HTML al que se le ha añadido determinadas etiquetas y atributos especiales, tanto de Angular como de Ionic en nuestro caso. Es posible añadir etiquetas que representan un componente distinto. Como, por ejemplo, el componente ‘ProgressBar’ bajo el directorio ‘components’ descrito previamente, trabaja sobre sus propios datos de entrada y tiene su propia plantilla HTML. Alexander Reyes Sánchez - MusicFact 37 3.2.4 Metadatos Los metadatos contienen la información que Angular necesita para procesar una clase. Para adjuntar metadatos a una clase es necesario usar el decorador @Component y pasarle un objeto que lo configure. El decorador @Component irá encima de la clase exportada y como mínimo le tendremos que pasar el nombre que recibirá el selector y qué plantilla debe utilizar. La plantilla, los metadatos y los componentes describen una vista/módulo como se puede observar en la figura al comienzo de esta sección. 3.2.5 Data binding El ‘data binding’ es el enlace de la información que tenemos con lo que se mostrará en la plantilla HTML. Angular es capaz de proporcionarnos una forma sencilla y muy limpia de tratar este enlace de información. Hay cuatro formas en las que se produce el ‘data binding’: • Desde el componente hacia el DOM (Modelo de Objetos del Documento) mediante {{ valor }} denominado interpolación. En este caso se está recuperando directamente el valor de una variable que existe en el componente. • Desde el componente hacia el DOM mediante [propiedad] = “valor” denominado ‘property binding’. Igual que el anterior, pero ahora se recupera como un atributo de una etiqueta. • Desde el DOM hacia el componente mediante (evento) = “manipulador” denominado ‘event binding’. En este caso se puede llamar a un método del componente a través de un evento determinado y pasar un valor. • En ambos sentidos con [(ngModel)] = “propiedad”, denominado ‘Two-way data binding’ o coloquialmente ‘banana in a box’. Esto asocia una propiedad y un evento de una sola vez. Cualquier cambio que haga el usuario se pasará al componente y viceversa. El ‘data binding’ es importante para la comunicación entre la plantilla y el componente, y también es importante para la comunicación entre los componentes principales y los secundarios como usamos en ‘ProgressBar’. 3.2.6 Directivas Las plantillas de Angular son dinámicas. El DOM se va transformando de acuerdo con las instrucciones pasadas en las directivas. De entre los principales tipos de directivas tenemos: • Estructurales: Son directivas que alteran el diseño mediante la creación, eliminación y sustitución de elementos en el DOM. Por ejemplo, tenemos las más habituales que son la directiva *ngFor (lógica de repetición) y la directiva *ngIf (lógica de condición). Alexander Reyes Sánchez - MusicFact 44 • Usuarios: Esta estructura es la más amplia, pero no quiere decir que sea más compleja que las demás. Las relaciones se establecen de la misma manera que las anteriores. Ilustración 16 - Estructura JSON para los usuarios Alexander Reyes Sánchez - MusicFact 45 3.3.2 Autenticación En cuanto a la autenticación en Firebase, la mayoría de las aplicaciones deben reconocer la identidad de un usuario. El reconocimiento de la identidad de un usuario permite a una aplicación guardar datos de éste de manera segura en la nube y brindar la misma experiencia personalizada en todos sus dispositivos. Firebase Authentication proporciona servicios de backend, SDK fáciles de usar y bibliotecas ya hechas para autenticar usuarios en la aplicación. Admite autenticación con contraseña, proveedores de identidades federadas populares como Google, Facebook, Twitter y más opciones. Firebase Authentication se integra estrechamente con otros servicios de Firebase y aprovecha estándares industriales como ‘OAuth 2.0’. Éste es un protocolo de autorización que permite que los usuarios autoricen a terceros para acceder a su información. Por lo tanto, se puede integrar fácilmente con nuestro backend personalizado. Para iniciar la sesión de un usuario en nuestra aplicación, primero recibimos las credenciales de autenticación de éste. Estas credenciales pueden ser la dirección de correo electrónico y contraseña del usuario o un token ‘OAuth’ de un proveedor de identidades federadas. Una vez tenemos las credenciales, tenemos que pasarlas al Firebase Authentication SDK. Luego, se verificarán dichas credenciales y se devolverá una respuesta al cliente. Después del acceso exitoso, ya es posible acceder a la información de perfil básica del usuario y controlar el acceso por parte del usuario a los datos almacenados en la Firebase Realtime Database. También se puede usar el token de autenticación proporcionado para verificar la identidad de los usuarios en nuestros servicios de backend. Aunque a medida que hemos ido avanzando con la aplicación, se ha optado por combinar este acceso con otra herramienta que nos permite almacenar los datos básicos de usuario de una forma más eficiente. Se trata de ‘Ionic Storage’, en la sección 3.4.6 Ionic Storage hablaremos sobre ella. De forma predeterminada, los usuarios autenticados pueden leer datos y escribirlos en la Firebase Realtime Database y el Firebase Storage, del cual hablaremos a continuación. Es posible controlar el acceso de dichos usuarios modificando las reglas para cada uno. En cualquier caso, para las funcionalidades que ofrece nuestra aplicación nos bastan las reglas por defecto. Un usuario de Firebase tiene un conjunto fijo de propiedades básicas (un ID único, una dirección de correo electrónico) almacenado en una base de datos de usuarios. Nuestro formulario de registro solicita más información sobre los usuarios que se registran (por ejemplo, el país/región). No podemos agregar otras propiedades al objeto de usuario de Firebase directamente. En lugar de ello, tendremos que almacenar las propiedades adicionales en nuestra Firebase Realtime Database. Alexander Reyes Sánchez - MusicFact 46 La primera vez que un usuario se registra en la aplicación, los datos de su perfil se completan con la información disponible: • Si el usuario se registra con una dirección de correo electrónico y una contraseña a través del formulario, sólo se completa la dirección de correo electrónico. Sin embargo, como hemos indicado anteriormente, es posible añadir nuevos campos en nuestra Firebase Realtime Database como son el nombre de usuario, la región o país y la imagen de perfil que se subirá al Firebase Storage. • Si el usuario se registra con un proveedor de identidades federadas como Facebook o Google, se usa la información de la cuenta disponible a través del proveedor para completar el perfil de usuario de Firebase. Cuando un usuario se registra o accede, pasa a ser el usuario actual de la instancia de autenticación. La instancia de autenticación de Firebase conserva el estado del usuario. Por lo tanto, al actualizarse la página (en un navegador) o reiniciar la aplicación no se pierde la información del usuario (remember me). Cuando el usuario cierra la sesión, la instancia de autenticación deja de conservar una referencia al objeto de usuario y con ello el estado de éste. Deja de haber usuario actual y la lógica de la aplicación se encarga de redirigir al usuario a la página de inicio. Para analizar el ciclo de vida del usuario con un seguimiento del estado actual de la instancia de autenticación de Firebase usaremos receptores denominados ‘observables’ en JavaScript. 3.3.3 Storage Firebase Storage ofrece la posibilidad de subir y descargar archivos de forma segura, independientemente de la calidad de la red. Puedes usarlo para almacenar imágenes, audio, vídeo y otro contenido generado por el usuario. Firebase Storage está respaldado por Google Cloud Storage, un servicio potente, simple y rentable de almacenamiento de objetos. Los desarrolladores usan el SDK Firebase Storage para subir y bajar archivos directamente de los clientes. Si la conexión de red no es buena, el cliente puede volver a intentar la operación justo donde la dejó, lo que permite ahorrar tiempo y ancho de banda a los usuarios. En nuestro caso, subimos imágenes al Storage cuando nos vamos a registrar si añadimos una imagen propia o cuando subimos un archivo de audio o imagen de portada para las canciones. Alexander Reyes Sánchez - MusicFact 47 Firebase Storage almacena tus archivos en una cubeta de Google Cloud Storage, lo que significa que puedes acceder a ellos a través de Firebase y de las APIs de Google Cloud. Esto te brinda la flexibilidad necesaria para subir y descargar archivos de clientes móviles a través de Firebase y realizar procesamientos en el servidor, como filtrado de imágenes. Firebase Storage escala automáticamente, lo que significa que no necesitas migrar de Firebase Storage a Google Cloud Storage ni a ningún otro proveedor. Además, Firebase Storage se integra perfectamente con Firebase Authentication para identificar usuarios y proporciona lenguaje de seguridad comparativo que te permite acceder a controles en archivos individuales o grupos de archivos, de modo que puedas hacer que los archivos sean tan públicos o privados como desees. 3.4 TECNOLOGÍAS En este apartado se enumeran el resto de las diferentes herramientas y tecnologías utilizadas durante el desarrollo del proyecto. Hablaremos en profundidad sobre el framework de aplicaciones híbridas Ionic 2, ya que las otras dos tecnologías fundamentales, Angular y Firebase, las hemos descrito en los apartados anteriores de 3.2 Diseño arquitectónico y 3.3 Modelo de la base de datos, respectivamente. 3.4.1 HTML5, JavaScript, CSS3 y Sass Una aplicación híbrida está desarrollada en base a las tecnologías web: HTML (como lenguaje para crear y representar una vista) + JavaScript (como lenguaje interpretado para operaciones) + CSS (como lenguaje de estilo). Son como cualquier otra aplicación de las que puedes instalar a través de las tiendas de aplicaciones para cada sistema, por lo que en principio los usuarios finales no percibirán la diferencia con respecto a otros tipos de aproximaciones diferentes como las aplicaciones nativas (ver Anexo B para más información sobre las aplicaciones híbridas). Ilustración 17 - Logos Lenguajes HTML5, JavaScript y CSS3 10 10 Logos Lenguajes HTML5, JavaScript y CSS3 - Julio 2107 Alexander Reyes Sánchez - MusicFact 48 11Además, Ionic incorpora Sass, un lenguaje de hoja de estilos que es traducido a CSS, con el que se pueden hacer diseños avanzados para todo tipo de estilos y gustos. En el fichero ‘variables.scss’ bajo el directorio ‘theme’, podemos personalizar la apariencia de la aplicación a través de variables que se pueden sobrescribir. 3.4.2 TypeScript 12Otra cosa que viene dada por el desarrollo de Angular es el uso del lenguaje TypeScript. TypeScript es JavaScript, pero con añadidos pensados para mejorar el trabajo por parte de los desarrolladores, incrementando la productividad. La mayor aportación de TypeScript al lenguaje JavaScript es la posibilidad de definición de tipos para las variables, pero en general aporta mucho más y además nos permite usar todas las mejoras de ES6 y algunas de ES7 en las aplicaciones. ES o ECMAScript es el estándar que define cómo debe ser el lenguaje JavaScript. No debemos pensar en TypeScript como un problema por ser algo que debemos aprender de nuevo. TypeScript es en realidad JavaScript, por lo que no significa aprender un nuevo lenguaje, sino agregar algunas cosas al que ya conoces, cosas que en definitiva te van a ayudar durante la etapa de desarrollo y a la hora de mantener las aplicaciones en el futuro. TypeScript requiere una transpilación del código, de modo que aquel código que escribes en TypeScript se convierta en código JavaScript capaz de ejecutarse en cualquier navegador. Esa transpilación la realiza Ionic 2 por debajo, por lo que no representa un problema para el desarrollador. 11 Logo Sass - Julio 2017 12 Logo TypeScript - Julio 2017 Ilustración 19 - Logo TypeScript Ilustración 18 - Logo Sass Alexander Reyes Sánchez - MusicFact 49 3.4.3 Ionic 2 Como hemos indicado, estamos usando Ionic 2 como herramienta para desarrollar la aplicación. Pero ¿por qué Ionic? A continuación, justificaremos su elección. Ilustración 20 - Logo Ionic 2 13 Durante el aprendizaje de esta tecnología, hemos tenido que aprender sobre todo Angular que básicamente hemos explicado en la sección anterior sobre el diseño arquitectónico. La parte de Ionic ha sido sencilla gracias a su documentación oficial que incluye infinidad de funcionalidades con varios ejemplos que ilustran bastante bien lo que hace cada componente, api, plugins nativos, etc. Ionic 2 hace uso de un SDK que nos ayuda a generar las vistas para cada sistema operativo sin necesidad de generar un código para cada uno de ellos, lo cual incrementa la eficiencia de un equipo de trabajo al intentar desarrollar aplicaciones móviles para distintas plataformas. Los componentes de Ionic 2 ya vienen adaptados al dispositivo de manera estética. Quiere decir que, cuando se compila una aplicación para iOS, el componente se visualizará de manera diferente que cuando se compila para Android. En Android usará ‘Material Design’ mientras que en iOS usará las guías de diseño definidas por Apple. Sin embargo, es posible mantener, por ejemplo, el estilo de iconos que queramos para cada plataforma. Esto es una ventaja en sí, porque las personas disfrutarán de aplicaciones con una experiencia de usuario cercana a la que están acostumbrados en su teléfono y nos evita a los desarrolladores la necesidad de trabajar más para conseguir este efecto. Sin embargo, como autores de las aplicaciones con Ionic 2 también somos capaces de alterar el diseño de las aplicaciones, proporcionando una experiencia de usuario específica y original para nuestra propia aplicación. 13 Logo Ionic 2 - Julio 2017 Alexander Reyes Sánchez - MusicFact 50 El alto rendimiento de Ionic 2 es una de las diferencias que lo denotan sobre sus competidores, ya que está construido con la mínima manipulación del DOM, con nada de código jQuery y con aceleraciones de transiciones por hardware. Se trata de una estupenda herramienta para la creación de aplicaciones híbridas sorprendentes, pensada para obtener resultados de una manera rápida y con una menor inversión económica. 3.4.4 Ionic Native y Apache Cordova/PhoneGap 14Ionic Native es un contenedor TypeScript para los complementos de Apache Cordova/PhoneGap que hacen que la adición de cualquier funcionalidad nativa que necesites para tu aplicación móvil sea fácil. Este contenedor envuelve las respuestas en una ‘Promise’ o en un ‘Observable’, proporcionando una interfaz común para todos los complementos y asegurando que los eventos nativos activan la detección de cambios en Angular. Por lo tanto, para acceder a los componentes nativos del dispositivo, se usan plugins que nos proporciona, principalmente, Apache Cordova y Phonegap en algunos casos. Actualmente, también Ionic es proveedor de algunos plugins para trabajar con la parte nativa del teléfono. Aquí como nativo nos referimos a elementos como la cámara, geolocalización, etc. Todos esos elementos se pueden usar desde las aplicaciones de Ionic a través de los correspondientes plugins nativos, que forman una especie de puente entre el desarrollo con JavaScript y el teléfono. En este apartado, hablaremos de los diferentes plugins usados en nuestra aplicación. Facebook 15Para registrarnos/iniciar sesión en la aplicación a través de nuestra cuenta de Facebook desde el dispositivo móvil, será necesario usar el plugin de Cordova ‘cordova-plugin-facebook4’ para obtener acceso a la aplicación nativa de Facebook en iOS y Android. Antes de todo, primero hay que incluir la aplicación en el portal de desarrolladores de Facebook, en donde seguiremos unos pasos guiados para configurar la aplicación. También será necesario habilitar a Facebook en Firebase como proveedor de autenticación indicando el identificador de la aplicación junto con la clave secreta que nos ha generado Facebook en el paso anterior. 14 Logo Apache Cordova - Julio 2017 15 Logo Facebook - Julio 2017 Ilustración 21 - Logo Apache Cordova Ilustración 22 - Logo Facebook Alexander Reyes Sánchez - MusicFact 51 Por último, para completar la configuración, tenemos que añadir una URI de redireccionamiento de ‘OAuth’ a la configuración de la aplicación en Facebook. Esta URI nos la suministrará Firebase en el apartado de autenticación al habilitar a Facebook como proveedor de inicio de sesión. Camera Este complemento define un objeto global que proporciona una API para capturar imágenes con la cámara o elegirlas de la galería de imágenes del dispositivo. Como respuesta exitosa a la llamada, la imagen se devuelve como una cadena que contiene la imagen de la foto codificada en Base64 o como una cadena que representa la ubicación del archivo de la imagen en el almacenamiento local (ver Anexo C para más información sobre este plugin) Una vez tenemos la imagen, en nuestro caso en base64, la vamos a publicar en el Storage de Firebase. Para ello, tenemos que transformarla a tipo ‘blob’ o ‘file’ que son los formatos que acepta Firebase Storage. Una vez transformada, procedemos a subirla a la nube y, posteriormente, añadir su referencia o URL de descarga a la ‘Realtime Database’ para acceder a ella a través de las peticiones oportunas. Android Permissions Este complemento está diseñado para admitir nuevos mecanismos de control de permisos de Android. Necesario para acceder a contenido alojado en el dispositivo móvil. File Chooser Abre el selector de archivos en Android para que el usuario seleccione alguno. Devuelve un archivo URI. Complemento usado para seleccionar algún archivo de audio. File Path Este complemento permite resolver la ruta del sistema de archivos nativo para los URI de contenido de Android y se basa en el código de la biblioteca ‘File Chooser’. Usado para tratar la ruta del archivo de audio. Native Audio Este complemento de Cordova/PhoneGap permite la simultaneidad (reproducción multicanal), la polifonía (reproducción de múltiples voces) y la latencia minimizada (mediante caché) en aplicaciones basadas en audio, aprovechando las API de audio nativas. Está diseñado para juegos multiplataforma basados en HTML5 y aplicaciones de audio híbridas móviles. Alexander Reyes Sánchez - MusicFact 52 Una gran parte para conseguir que una aplicación móvil sea de alta calidad es proporcionar retroalimentación inmediata y obvia para las acciones de usuario. Cuando un usuario realiza alguna acción, querrá comunicarse con ella de manera que perciba que dicha acción ha tenido éxito. Esa información puede comunicarse visualmente, a través del sonido o incluso a través de una sensación física como la vibración. Si has utilizado la aplicación de Facebook, es probable que hayas notado que al usar la aplicación se reproducen varios efectos de sonido. Por ejemplo, a medida que cambiamos entre las pestañas, al pulsar algún botón, etc. En nuestra aplicación, hemos agregado efecto de sonido al pulsar un botón de tal manera que se usará audio HTML5 estándar por defecto o audio nativo cuando la plataforma sea Cordova. Al utilizar audio HTML5, el audio se carga al vuelo por lo que hay un ligero, pero notable retraso antes de que el audio se reproduzca. De lo contrario, cuando se utiliza audio nativo, el sonido está precargado y se puede reproducir al instante. Action Sheet El complemento ‘ActionSheet’ muestra una lista nativa de opciones de las que el usuario puede elegir. Usado para desplegar opciones referentes a una canción. Social Sharing Este complemento permite usar la ventana nativa del dispositivo móvil para compartir contenido. Es posible compartir texto, un enlace, imágenes u otros archivos como pdf. El asunto también es compatible, cuando la aplicación de destino lo admite. Permite compartir archivos desde Internet y el sistema de archivos local. Además, se puede compartir directamente con Twitter, Facebook u otras aplicaciones. Phonegap Plugin Push Utilizamos el complemento Push de Phonegap para recibir notificaciones nativas. Al instalar el plugin, es necesario proporcionar una variable SENDER_ID, que es el ID del remitente FCM (Firebase Cloud Messaging). Esta variable la podemos obtener desde el apartado ‘Cloud Messaging’ de configuración del proyecto en Firebase. Otro de los requisitos es tener instalado Cloud Client para interactuar con los servicios de Ionic desde nuestra aplicación. Por consiguiente, tenemos que facilitar nuestra clave del servidor FCM a Ionic. Vamos al apartado de certificados en la configuración del proyecto de Ionic y añadimos un nuevo perfil de seguridad e insertamos la clave FCM. Alexander Reyes Sánchez - MusicFact 53 3.4.5 Firebase Notifications Firebase Notifications es un servicio gratuito para desarrolladores de aplicaciones para dispositivos móviles que permite enviar notificaciones orientadas a los usuarios. Basada en Firebase Cloud Messaging y en el SDK FCM, Firebase Notifications ofrece una opción para una plataforma de notificación flexible que requiera codificación mínima para comenzar y una consola gráfica para enviar mensajes. Firebase Cloud Messaging se ocupa del enrutamiento y la entrega a los dispositivos de destino. Cuando la aplicación está en segundo plano en el dispositivo de un usuario, las notificaciones se entregan en la bandeja del sistema. Cuando un usuario hace clic en la notificación, el lanzador abre la aplicación. Si se desea, también es posible agregar administración de mensajes del cliente para recibir notificaciones cuando la aplicación ya esté en primer plano. En nuestra aplicación, enviamos mensajes de notificación usando el protocolo HTTP a través de una solitud POST a la API de Firebase Cloud Messaging. De tal manera que, tenemos que especificar en la cabecera el tipo de contenido y la clave de autorización que obtenemos en la configuración de nuestro proyecto de Firebase, junto con el cuerpo del mensaje donde irán los datos y los tokens de los clientes a los que queremos enviar la notificación. En el siguiente esquema, se muestra de forma resumida el ciclo de funcionamiento. 16 Esquema 4 – Ciclo notificaciones push 16 Ciclo notificaciones push - Julio 2017 Alexander Reyes Sánchez - MusicFact 60 4| Conclusiones Al finalizar el desarrollo de la aplicación y comprobar los resultados obtenidos, hemos llegado a la conclusión de que todo el trabajo dedicado a este proyecto da sus frutos. Nuestro prototipo cumple con los requisitos del análisis realizado y se alcanzan los objetivos con creces. Durante el proceso nos hemos topado con numerosos problemas que han ralentizado nuestro trabajo, pero con calma y paciencia se han ido solucionando. Al usar tecnologías y lenguajes relativamente recientes, la documentación que se encentra en internet es escasa. Por lo que el tiempo de búsqueda de información ha afectado enormemente al desarrollo de la aplicación. El proyecto puede seguir mejorando e incorporar nuevas funcionalidades como, por ejemplo, la implementación de un reproductor en segundo plano. En la columna ‘Backlog’ de Waffle.io, hemos apuntado algunas ideas que podrían llegar a implementarse usando las herramientas oportunas que nos ofrecen las tecnologías de las que nos hemos servido. La aplicación se ha instalado y testeado en varios dispositivos móviles Android sin ningún tipo de problema. El siguiente paso es probarla en un dispositivo iOS y verificar sus funcionalidades. En este punto, nos damos cuenta de que el uso de tecnologías para desarrollar aplicaciones híbridas para móviles nos ahorra una cantidad de tiempo considerable. No obstante, no es oro todo lo que reluce, el tiempo de inicio de la aplicación puede no agradar a algunos usuarios impacientes. Esto es algo que, desde mi humilde opinión, debería intentar mejorarse para el futuro prometedor de las aplicaciones híbridas. Por otro lado, la integración con Firebase también ha supuesto un gasto de tiempo notable. Sobre todo, a la hora de tratar con archivos (imágenes y audios). Al usar componentes nativos del dispositivo móvil para seleccionar los archivos, es necesario formatear su salida según las especificaciones de Firebase. Y considero que la documentación de Ionic es algo escasa para esta parte que se dedica al manejo de los plugins nativos. No obstante, el resto de documentación de Ionic referente a los componentes y APIs me parece bastante completa con ejemplos ilustrativos. En definitiva, creo que este trabajo me ha aportado grandes conocimientos que, probablemente, reciclaré en el futuro para otros proyectos. Alexander Reyes Sánchez - MusicFact 61 Fuentes de información 1. SDLC - Modelo en cascada http://www.w3ii.com/es/sdlc/sdlc_waterfall_model.html [Último acceso Julio 2017] 2. Para reducir la piratería, dale a la gente lo que quiere http://latam.pcmag.com/musica-productos/2241/opinion/para-reducir-lapirateria-dale-a-la-gente-lo-que-quiere [Último acceso Julio 2017] 3. Las dos caras ocultas del modelo de negocio de Spotify http://elespectadordigital.com/modelo-de-negocio-de-spotify/ [Último acceso Julio 2017] 4. Cuál es el Modelo de Negocio de Spotify http://www.submarinoatomico.com/2017/05/25/cual-es-el-modelo-de-negociode-spotify/ [Último acceso Julio 2017] 5. Decálogo de buenas prácticas: Aspectos legales de las aplicaciones móviles https://www.yeeply.com/blog/decalogo-de-buenas-practicas-aspectos-legales-delas-aplicaciones-moviles/ [Último acceso Julio 2017] 6. Aplicaciones móviles y Ley de Protección de Datos http://www.mundolopd.com/lopd/proteccion-de-datos-regula-las-aplicacionesmoviles/ [Último acceso Julio 2017] 7. Angular 2 - Architecture http://www.w3ii.com/angular2/angular2_architecture.html [Último acceso Julio 2017] 8. Firebase para Android: Base de Datos en Tiempo Real http://www.sgoliver.net/blog/firebase-android-base-datos-tiempo-real-1/ [Último acceso Julio 2017] 9. Documentación Firebase https://firebase.google.com/docs/ [Último acceso Julio 2017] Alexander Reyes Sánchez - MusicFact 62 10. Ionic 2 & Xamarin, dos herramientas para crear aplicaciones híbridas https://medium.com/@juans_gro/ionic-2-xamarin-el-futuro-del-desarrollo-deaplicaciones-ed653284e4fe [Último acceso Julio 2017] 11. Documentación Ionic https://ionicframework.com/docs/ [Último acceso Julio 2017] 12. Ionic Native https://ionicframework.com/docs/native/ [Último acceso Julio 2017] 13. Joshmorony Tutorials https://www.joshmorony.com [Último acceso Julio 2017] 14. GitHub https://github.com [Último acceso Julio 2017] 15. Waffle.io https://github.com/waffleio/waffle.io [Último acceso Julio 2017] 16. Lodash https://lodash.com/ [Último acceso Julio 2017] 17. Chrome Cordova Mocks https://github.com/pbernasconi/chrome-cordova [Último acceso Julio 2017] 18. Stack Overflow https://stackoverflow.com/ [Último acceso Julio 2017] 19. Push Notifications https://docs.ionic.io/services/push/ [Último acceso Julio 2017] 20. Angular Tutorials https://www.pluralsight.com/ [Último acceso Julio 2017] Alexander Reyes Sánchez - MusicFact 63 Anexos A) MANUAL DE USUARIO Al arrancar la aplicación se mostrará una pantalla de carga con un fondo de portada. A continuación, podemos elegir entre registrarnos con nuestro email o a través de Facebook (Google+ y Twitter no están disponibles todavía). La otra opción es iniciar sesión con nuestro email/contraseña o, del mismo modo que para registrarse, usar nuestra cuenta de Facebook. Ilustración 32 - Splash Screen Alexander Reyes Sánchez - MusicFact 64 En caso de que hayamos olvidado la contraseña, no pasa nada, podemos cambiarla mediante la opción “¿Has olvidado tu contraseña?” Ilustración 33 - Pantalla de inicio, formulario de registro/inicio de sesión Ilustración 34 - Vista para recuperar contraseña Alexander Reyes Sánchez - MusicFact 65 Una vez iniciada la sesión, se nos mostrará un mensaje de bienvenida y accedemos a la pantalla principal. Nada más entrar, podemos observar un mensaje con un icono de una lupa que nos indica y redirige a la vista para buscar canciones o usuarios a los que seguir. Si ya, anteriormente, hemos iniciado sesión en la aplicación y seguido a algún usuario, nos aparecerán las pistas que ha subido y compartido. Aquí, podemos usar la barra de navegación y explorar las diferentes funcionalidades que nos ofrece la aplicación. Ilustración 35 - Vista principal ambos casos Alexander Reyes Sánchez - MusicFact 66 El usuario puede ver y filtrar canciones/usuarios por su nombre. En esta vista es posible seguir a los usuarios a través de un botón intuitivo (o dejar de seguir). Ilustración 36 - Vista para buscar canciones/usuarios y notificación de nuevo seguidor Alexander Reyes Sánchez - MusicFact 67 A parte, podemos ver en detalle las canciones y el perfil público de los usuarios. Para las canciones, podemos agregarlas a me gusta pulsando el botón del corazón y si queremos eliminar nuestro me gusta, volvemos a pulsar el corazón (observaremos un cambio de color y un sonido característico al agregar a me gusta). Luego, tenemos el botón de ‘repost’ que sirve para compartir la canción a nuestros seguidores (les aparecerá en su vista principal ‘Home’). En la vista de detalle de las canciones, además, podemos reproducir la canción y navegar al perfil del usuario que la ha subido a través de su nombre. Ilustración 37 - Vista detalle canción y perfil de usuario Alexander Reyes Sánchez - MusicFact 68 Otra funcionalidad es la de ver los comentarios de una canción y agregar/eliminar comentarios propios. También es posible navegar al perfil de cualquier usuario que ha comentado haciendo click en su foto. El último botón nos abrirá una pequeña ventana donde podemos agregar la canción a una lista existente o crear una nueva con esa canción. Si seleccionamos ‘crear lista’, se nos pedirá el título y la privacidad que queremos para la lista. Como última opción, podemos compartir la canción a través de las redes sociales. Ilustración 38 - Vista comentarios de una canción Alexander Reyes Sánchez - MusicFact 69 Ilustración 40 - Vista crear nueva lista Ilustración 39 - Vista más opciones - Añadir a una lista Alexander Reyes Sánchez - MusicFact 76 B) APLICACIONES HÍBRIDAS Al ejecutarse con tecnologías web, los desarrolladores que ya tienen experiencia en el desarrollo en este medio pueden aprovechar sus conocimientos para lanzarse de una manera más rápida en el desarrollo de aplicaciones para móviles. Para hacer esto posible, las aplicaciones híbridas se ejecutan en lo que se denomina un ‘web view’, que no es más que una especie de navegador integrado en el móvil y en el que solamente se ejecuta la aplicación híbrida. Las aplicaciones híbridas son interesantes por diversos motivos: • Con una misma base de código serán capaces de compilar aplicaciones para funcionar correctamente en una gran cantidad de sistemas operativos de móviles o tablets. Generalmente nos será suficiente que nuestra aplicación funcione en iOS y Android, pero Ionic es capaz de compilar a otros sistemas como Windows Phone. • El coste del desarrollo es sensiblemente menor, ya que no es necesario contar con varios equipos de desarrollo para cada lenguaje concreto de cada plataforma. • El tiempo de desarrollo también es menor, ya que solo es necesario construir la aplicación una vez e inmediatamente la tendremos en todas las plataformas a las que nos dirigimos. • Es de más fácil adaptación para los desarrolladores que vienen de programación web. Pero todo no son ventajas, también podemos enumerar algunas desventajas en relación con las aplicaciones nativas (aquellas construidas con los lenguajes propios de cada sistema, Java para Android y Swift/Objective-C para iOS). El rendimiento de una aplicación nativa suele ser mejor que el de una híbrida, aunque las híbridas han mejorado mucho en este sentido. Al ejecutarse en un ‘web view’ dependemos de las tecnologías disponibles para el desarrollo web, que pueden ser menos ricas y potentes que las disponibles en nativo. En las aplicaciones nativas trabajamos directamente con el hardware del teléfono, mientras que en las híbridas dependemos de plugins para su acceso. Esto puede derivar en problemas, pero afortunadamente cada vez son menores. Alexander Reyes Sánchez - MusicFact 77 C) CAMERA La función ‘Camera.getPicture()’ abre por defecto la aplicación de la cámara del dispositivo que permite a los usuarios tomar imágenes de forma predeterminada. Este comportamiento se produce cuando el parámetro ‘sourceType’ es igual a ‘Camera.PictureSourceType.CAMERA’. Una vez que el usuario confirme la foto, la aplicación de la cámara se cierra y la aplicación se restaura como estaba anteriormente. Si el parámetro ‘sourceType’ es ‘Camera.PictureSourceType.PHOTOLIBRARY’ o ‘Camera.PictureSourceType.SAVEDPHOTOALBUM’, aparece un cuadro de diálogo que permite a los usuarios seleccionar una imagen existente. Existen más parámetros opcionales para personalizar los ajustes de la cámara. Dos de ellos, bastante importantes a la hora de tratar con imágenes en la nube, son ‘targetWidth’ y ‘targetHeight’ que limitan las dimensiones de la imagen para que a la hora de subirlas o descargarlas al navegar por la aplicación, el usuario no experimente retardos excesivos. En la documentación de Ionic Native Camera se pueden ver detenidamente.