KARAOKE 4 ALL

Canta, graba, comparte, comenta, desafía y gana

Canta desde cualquier dispositivo móvil, Tablet, gana fans y conviértete en una estrella

25/04/2015 Ingenieria Multimedia - Universidad de Alicante

2EVENINGS Alicante - España

Carlos Morales Navarro | [David Diego Louelh | Jorge López Arangua

Karaoke 4 all

Karaoke 4 all pretende crear una comunidad de cantantes sin necesidad que estén el mismo espacio físico. Esta comunidad ofrece todas las herramientas de un bar de karaoke además de añadir un control de puntuaciones como el singstar, también cuenta con una comunidad lo que posibilita a los usuarios compartir sus grabaciones y que el resto de usuarios le escuchen

Es decir, karaoke 4 all tiene la ventaja de un karaoke en casa combinado con el karaoke de bar donde las personas que acuden al bar también escuchan las interpretaciones sin conocer personalmente al cantante (Siempre el usuario tendrá la opción de no compartir).

KARAOKE 4 ALL no se limita su uso a la red social. Permitirá compartir en el hogar, o en dispositivos móviles, la experiencia completa de un karaoke. Pero enfatiza en el hecho de la comunidad, con el fin de crear interacción entre usuarios mediante desafíos, campeonatos, rankings,... a nivel comunitario, nacional, e incluso mundial.

Desglosando la aplicación Primero analizamos el proyecto y seleccionamos todos los requerimientos de la APP, una vez teniendo esto podemos seguir desglosando hasta llegar a una lista de tareas.

SCRUM es la metodología escogida para este proyecto, ya que como en realidad no sabíamos cuál sería el alcance real de este, su estructura iterativa es perfecta para ir añadiendo mejoras, además la lista de tareas tipo SCRUM se hace mucho más amena son cortas y constantes

REQUERIMIENTOS FUNCIONALES 1. Iniciar sesión

1.1. Login El usuario se identificara en la aplicación mediante un formulario de

usuario y contraseña 1.2. Redes sociales

El usuario se identificara en la aplicación mediante un formulario de usuario y contraseña

2. Registro nuevo usuario El usuario podrá utilizar un registro de identificación con correo electrónico, fecha de nacimiento (política de privacidad) y contraseña

3. Modificar datos personales El usuario podrá modificar sus datos personales, fotografía de perfil, lugar, pero no podrá modificar su correo electrónico

4. Listar canciones El usuario podrá acceder a la zona de “Karaoke” donde podrá encontrar una lista de todas las canciones disponibles en la aplicación 4.1. Filtrar búsqueda indexación

Una vez listadas las canciones, el usuario podrá ordenar o filtrar los resultados en función de los parámetros del formulario (fecha, autor, puntuaciones, etc…).

5. Listar grabaciones El usuario podrá acceder a la zona de “Grabaciones” donde podrá encontrar una lista de todas las grabaciones realizadas por usuarios a los que sigue

5.1. Una vez listadas las grabaciones, el usuario podrá ordenar o filtrar los resultados en función de los parámetros del formulario (fecha, usuario que la ha grabado, artista, etc…)

6. Reproducir video karaoke El usuario podrá elegir una de las canciones listada donde comenzara a reproducir el video de la canción igual que un karaoke normal

7. Detalle de canción El usuario podrá seleccionar una canción donde aparecerá el detalle de esta, se mostraran valores como:

Mi puntuación: Se mostrara la puntuación del usuario si ha hecho alguna grabación antes de la misma

Máxima puntuación: Máxima puntuación de entre todos los usuarios de karaoke4all en esta canción

Grabaciones: Numero de grabaciones hechas en toda la comunidad de esta canción

Veces compartida: Número de veces que dicha canción se ha compartido entre la comunidad

Modo Estrella: Cantar modo Estrella con sistema de puntuaciones, el usuario podrá almacenar solo la máxima puntuación de una canción

Modo Cantar: Sin puntuaciones, el usuario podrá practicar las veces que quiera en cada canción

Modo Reto: Reta a un usuario de la comunidad que esta siguiendo, listado de usuarios

Nombre de canción, artista, cover

8. Almacenar grabación

En cuanto comience la reproducción se inicia la grabación de la voz del usuario utilizando el micrófono del dispositivo móvil o PC que disponga el usuario

9. Comunidad

El usuario accede a una zona dedicada al completo para el usuario con mensajes, comentarios, seguidores, seguidos, actividades, etc. Todos los listados se realizan ordenados por fecha La comunidad se dividirá en dos menus: Menu slide: el menú slide contendrá la actividad de usu amigos, muro de usuario, listado de usuarios y editar perfil Menu lateral: se activara un modal con cada una de las opciones. Siguiendo, seguidores, mensajes 9.1. Actividad

Permite al usuario ver la actividad de los usuarios a los que sigue muy similar Twitter - Tipos de Actividades: Nuevo usuario, nueva grabación, nuevo desafío, nueva petición de “amistad”, etc.

9.2. Muro Permite al usuario acceder al listado de todas sus actividades realizadas últimamente

9.3. Visitar muro usuario Permite al usuario visitar el muro de otro al pulsar su nombre

9.4. Usuarios Listado de todos los usuarios donde podrá seguir, dejar de seguir y enviar un mensaje

9.5. Mensajes Permite a los usuarios un chat privado para comentar y enviar mensajes a distintos usuarios

9.6. Siguiendo Permite al usuario seguir a otro, con esto activa la visualización de las publicaciones de este usuario Se realiza un listado de los usuarios que sigue en esos momentos, siempre podrá dejar de seguir al usuario

9.7. Seguidores Listado de seguidores del usuario, estos son los usuarios que pueden ver tus publicaciones

9.8. Comentarios Permite al usuario comentar cualquier publicación de la red social, se considera publicación cualquier actividad de la red, nuevos registros, mensajes de karaoke4all, grabaciones, peticiones de amistad, etc.

10. Cierre de sesión: Cierra sesión y sale de la APP

Aplicación WEB Se realiza un soporte WEB que dará acceso al usuario a todas las opciones ya descritas de la APP móvil, mas algunas vistas personalizadas aprovechando el espacio que nos da la web para insertar el contenido

El usuario podrá grabar, reproducir, listar canciones, listar grabaciones, enviar mensajes a usuario, en fin básicamente todo el soporte de la APP móvil pasarlo al formato WEB

Esto se hace de forma sencilla con PHONEGAP (apache cordova) ya que reutilizaremos gran parte del código de la APP móvil, modificando el diseño y algunas vistas

Problema WEB Nos encontramos con un problema, en estos momentos no existe un estándar para todos los navegadores sobre el tratamiento de archivos multimedia

Flash : Tecnología utilizada actualmente por la mayoría de webs que manejen multimedia streaming

WebRTC : Nueva tecnología fomentada por Google y Mozilla para realizar un estándar en todos los navegadores en tratamiento de streaming con una gran versatilidad. En estos momentos no existe mucha información y ejemplos solo está la API

Vistas WEB INDEX

CANCIONES

CANCION DETALLE

CANCION KARAOKE

COMUNIDAD - ACTIVIDAD

COMUNIDAD - MENSAJES

COMUNIDAD - USUARIOS

GRABACIONES

Tecnologias utilizadas Primero se ha hecho un estudio de las nuevas tendencias de programación, sabemos que la oferta de Karaoke4all es tener un karaoke en el dispositivo móvil. El objetivo es llegar a la mayor parte de dispositivos, ya sea Android, IOS, FirefoxOS, etc. Pero nos encontramos con que cada uno utiliza distintos entornos y lenguajes de desarrollo, el desarrollo se multiplica por las n plataformas a las que queremos que esté disponible nuestra APP

PHONEGAP – apache cordova PhoneGap llega para solucionar este problema. Básicamente lo que nos ofrece es poder desarrollar nuestra aplicación en HTML5, CSS y Javascript y poder ejecutarla de forma nativa en las distintas plataformas; ofreciendo un único API Javascript para acceder a los servicios nativos.

SERVICIOS NATIVOS Es un acceso a las diferentes prestaciones que ofrece un teléfono móvil servicio nativo del dispositivo (acceso a la cámara, los contactos, el acelerómetro, micrófono, GPS, alertas) en nuestro caso Karaoke4all utilizara la cámara para insertar o cambiar la imagen de perfil y el micrófono para guardar la voz de nuestro usuario al cantar

De esta forma, solo tenemos que crear una página HTML5 que haciendo una llamada Javascript nos permita hacer uso de la cámara de cualquier dispositivo independientemente de su plataforma. Con lo que conseguimos ejecutar nuestra aplicación en todas las plataformas del mercado teniendo solo conocimientos de HTML5, CSS3 y Javascript. No tenemos que aprender Java, ni Objective-C, ni ningún otro lenguaje; reduciendo drásticamente el tiempo y por tanto el coste de desarrollo

Karaoke4all contara con una WEB donde el usuario pueda acceder a toda la información presentada en el teléfono móvil, en un formato web donde reutilizaremos gran parte del código hecho para los dispositivos móviles, cambiando un poco el diseño y algo en la estructura ya tenemos una web en condiciones y reutilizando prácticamente todo el código

ANGULAR JS – by google Es un framework javascript con un conjunto de librerías de codigo abierto que agregamos a nuestro proyecto One Page para hacer la aplicación del lado del cliente.

Utiliza el patrón de diseño MVC (modelo-vista-controlador). Esto, junto con otras herramientas disponibles en Angular nos permite un desarrollo ordenado, sencillo de realizar y sobre todo más fácil de mantener en un futuro.

AngularJS está apoyado por Google y cada día más desarrolladores están adoptándolo, lo que nos da una idea del prometedor futuro de la librería.

BOOTSTRAP – by twitter Hemos dejado la tarea del diseño a Bootstrap, es un framework Responsive Design desarrollado por Mark Otto y Jacbod Thornton de Twitter y esta diseñado para ayudar a diseñadores y desarrolladores en el proceso de creación de sitios web y aplicaciones de una manera rápida y fácil controlando la parte front de los sitios.

Una de las grandes ventajas de este framework es que las clases CSS incluyen todo el codigo necesario para hacer la aplicación compatible con todos los navegadores modernos, incluyendo IExplorer.

El sistema de grid adaptativo dividido en 12 celdas en porcentajes, hace un maquetado fácil y sencillo para cualquier diseñador, estas celdas cuentan con diferentes tamaños para tablets, móviles y webs.

Por último, este framework está comprobado por los programadores de twitter y ampliamente aceptado por su gran comunidad de usuarios, además se puede adaptar a cualquier tipo de diseño

API PHP PHP es un lenguaje de código abierto muy popular y especialmente adecuado para desarrollo web, está centrado en la programación de script del lado del servidor para generar contenido dinámico haciendo llamadas a la base de datos. Es conocido como una de los lenguajes más flexibles, potentes y de alto rendimiento conocidos hasta el día de hoy

Todas las llamadas a la base de datos se hace con un archivo aparte, la API la dividimos en dos carpetas una para usuario y otra para admin, así si luego necesitamos la misma consulta solo debemos llamar al archivo correcto. Se tiene especial cuidado en los nombres de los archivos para dejar claro la función que desempeñan., se utilizan los prefijos get, set, delete, update seguido de la petición

1Listado de archivos PHP

MYSQL Sistema de gestión para la base de datos relacional, multihilo y multiusuario, en las aplicaciones web el entorno es intensivo en lectura de datos, lo que hace a MySQL ideal para este tipo de aplicaciones, es usado por sitios web muy populares como Wikipedia, Facebook, Twitter, Youtube

2ejemplo de archivo canciones donde manejamos la consulta segun la "op"enviada

3Modelo entidad relacion de la base de datos

Seguridad, sistema de tokens Toda la API del usuario utiliza un tipo de sistema de seguridad con tokens. Cuando el usuario se logea se genera un TOKEN que se guarda en tanto en la sesión del servidor como en la BBDD, este token generado junto con la ID de usuario se comprueba cada vez que se realiza cada petición, básicamente es añadir una peldaño más de seguridad.

Por ejemplo: cuando el usuario inicia sesión desde la APP móvil y la deja abierta, luego vuelve a entrar a karaoke4all pero esta vez desde WEB, cualquier actualización desde el móvil te expulsara de aplicación ya que el usuario current en ese momento es el WEB

Este es un ejemplo aplicado al archivo getGrabaciones.php en el cual podemos ver como antes de hacer cualquier consulta inserta el archivo get_token.php (la siguiente imagen) donde se corrobora el token y la id de usuario, devolvemos el resultado con la variable $login true o false según el caso