Plataforma de promoció per a grups de música

Escola d’Enginyeria de Terrassa. EET Grau en Enginyeria de Sistemes Audiovisuals Per Marc Grau Lao Dirigit per Jordi Marco Gomez Terrassa, juny 2015 PLATAFORMA DE PROMOCIÓ PER A GRUPS MUSICALS Treball Fi de Grau Resum Aquest Treball Final de Grau consisteix en la creació, des de zero, d’una Plataforma Musical formada per: una aplicació per a dispositius mòbils i un Portal Web. L’ús del Portal Web està pensat perquè els artistes musicals puguin gestionar les cançons pròpies que posen a disposició del públic. Des del Portal Web es podrà portar un seguiment de l’acceptació de les cançons, així com la possibilitat de programar els concerts. L’aplicació per a dispositius mòbils està dissenyada per permetre als usuaris descobrir noves cançons, ja sigui per mitjà del sistema implementat de recomanacions, com per les pròpies cerques de l’usuari o pels diferents llistats preordenats que rep l’aplicació. També estaran disponibles les metadades dels artistes, així com els llistats del concerts que s’hagin programat. Per obtenir la funcionalitat completa de la Plataforma Musical, també s’ha acabat dissenyant i implementant, tant la Base de Dades, com els servidors encarregats de servir les dades. 1 Agraïments Abans de res, vull donar les gràcies al professor Jordi Marco per la supervisió del projecte al llarg d’aquest quadrimestre, pels consells a l’hora d’estructurar el disseny de la plataforma musical i per les encertades indicacions que m’han servit per sobrepassar els petits entrebancs que han sorgit durant el desenvolupament del projecte. També voldria agrair a tots els professors i professores que al llarg de la carrera m’han proporcionat els coneixements necessaris per tenir una base sòlida i tirar endavant un projecte tant entretingut i desafiant. Per últim, agrair a la família i als amics que m’han aportat diferents punts de vista i idees de millora per a la Plataforma Musical. 2 Taula de continguts Resum ......................................................................................................................................... 1 Agraïments ................................................................................................................................ 2 1Introducció ....................................................................................................................... 6 1.1 Motivació ....................................................................................................................... 6 1.2 Estat de l’art ................................................................................................................. 6 1.3 Planificació ................................................................................................................... 7 2Requeriments i especificacions .................................................................................... 9 3Disseny ............................................................................................................................ 11 3.1 Servidor de dades i media ....................................................................................... 12 3.2 Aplicació per a mòbils ............................................................................................. 16 3.3 Portal Web ................................................................................................................... 20 3.4 Servidor Web .............................................................................................................. 21 3.5 Esquema de connexió dels elements de la Plataforma Musical ...................... 23 4Implementació ............................................................................................................... 24 4.1 Base de Dades ............................................................................................................ 25 4.1.1 Gestió de les metadades musicals ................................................................ 25 4.1.2 Gestió de les metadades dels usuaris .......................................................... 28 4.2 Servidor HTTP ............................................................................................................ 30 4.3 Aplicació per a dispositius mòbils ........................................................................ 35 4.3.1 LoginActivity ...................................................................................................... 35 4.3.2 MainActivity ....................................................................................................... 36 4.3.3 VersionActivity .................................................................................................. 47 4.3.4 ArtistActivity ..................................................................................................... 49 4.3.5 SearchActivity .................................................................................................... 50 4.4 Portal Web ................................................................................................................... 52 4.5 Servidor Web .............................................................................................................. 60 5Opinió personal i conclusions .................................................................................... 61 5.1 Futures millores ........................................................................................................ 61 3 6Tecnologies i programaris utilitzats ......................................................................... 63 Bibliografia ............................................................................................................................... 65 Taula de figures Figura 1 - Esquema bàsic de la Plataforma Musical ......................................................... 11 Figura 2 - Esquema de la Plataforma amb el Servidor Pont ........................................... 12 Figura 3 - Esquema ideal de la Plataforma Musical .......................................................... 13 Figura 4 - Diagrama Entitat-Relació ..................................................................................... 15 Figura 5 - Esquema en blocs de l'aplicació per a mòbils ................................................ 19 Figura 6 - Esquema connexió aplicació-servidor .............................................................. 20 Figura 7 - Esquema del Portal Web ...................................................................................... 21 Figura 8 - Esquema proposat pels elements de la Plataforma Musical ........................ 23 Figura 9 - Implementació de la Plataforma Musical ......................................................... 24 Figura 10 - Fases del Servidor HTTP .................................................................................... 31 Figura 11 - Estructures utilitzades pel Servidor HTTP .................................................... 32 Figura 12 - Tipus de metadades que serveix el Servidor HTTP ..................................... 34 Figura 13 - Activitat Login · Identificació ........................................................................... 35 Figura 14 - Activitat Login · Identificació ........................................................................... 35 Figura 15 - Gerarquía dels Views principals en l'activitat MainActivity ...................... 37 Figura 16 - Activitat Main · Menú lateral ............................................................................ 37 Figura 17 - Fragment Front Songs ........................................................................................ 39 Figura 18 - Fragment Newest Songs .................................................................................... 39 Figura 19 - Fragment MostPopular ...................................................................................... 39 Figura 20 - Fragment TopRated Songs ................................................................................ 39 Figura 21 - Fragment MyFavorites Songs ........................................................................... 40 Figura 22 - Pantalla completa reproducció ........................................................................ 40 Figura 23 - Diagrama de fases de la classe MediaPlayer ................................................. 41 Figura 24 - Fragment Newest Artists ................................................................................... 43 Figura 25 - Fragment Front Artists ...................................................................................... 43 Figura 26 - Fragment TopRated Artists .............................................................................. 43 Figura 27 - Fragment MostPopular Artists ......................................................................... 43 Figura 28 - Fragment Following Artists .............................................................................. 44 Figura 29 - Fragment Front Events ...................................................................................... 45 Figura 30 - Fragment ComingSoon Events ......................................................................... 45 Figura 31 - Fragment Personal Profile ................................................................................. 46 Figura 32 - Fragment Statistics Profile ................................................................................ 46 Figura 33 - Fragment Settings ............................................................................................... 47 4 Figura 34 - Activitat VersionActivity ................................................................................... 48 Figura 35 - Activitat ArtistActivity....................................................................................... 49 Figura 36 - Activitat SearchActivity · Artists ..................................................................... 50 Figura 37 - Activitat SearchActivity · Songs ....................................................................... 50 Figura 38 - SwipeRefresh ....................................................................................................... 51 Figura 39 - Activitat SearchActivity · Songs ....................................................................... 51 Figura 40 - Accés al Portal Web ............................................................................................ 52 Figura 41 - Registre d'artista ................................................................................................. 53 Figura 42 - Web de gestió dels àlbums i cançons ............................................................. 54 Figura 43 - Creació de l'àlbum .............................................................................................. 55 Figura 44 - Creació de la cançó ............................................................................................. 56 Figura 45 - Web de gestió dels concerts ............................................................................. 57 Figura 46 - Creació del concert ............................................................................................. 57 Figura 47 - Web gestió de membres i dades de l'artista ................................................. 58 Figura 48 - Creació membre .................................................................................................. 59 Figura 49 - Implementació final del Portal Web ............................................................... 60 5 1 Introducció L’objectiu del projecte és aconseguir crear una Plataforma Musical, formada per dos elements principals: una aplicació per a dispositius mòbils i un Portal Web. El Portal Web servirà d’eina als artistes per crear àlbums on afegir les seves composicions, programar futurs concerts, i informar als artistes sobre l’acceptació de les seves cançons. Per altra banda, l’aplicació per a dispositius mòbils està dissenyada per tal de fer accessible les metadades que els diferents artistes han proporcionat, mitjançant el Portal Web. Addicionalment, per tal d’aconseguir la funcionalitat completa de la Plataforma Musical, s’ha dissenyat i implementat un conjunt d’elements amb la funció d’emmagatzemar i servir les metadades de la Plataforma Musical. D’aquesta manera, el projecte queda format pels següents elements: • Base de Dades • Servidor de metadades tipus text • Servidor multimèdia (àudio i imatge) • Servidor Web • Aplicació per a dispositius mòbils • Portal Web 1.1 Motivació La motivació per realitzar aquest projecte ha estat la de fer accessible als milers d’artistes musicals, independentment del seu nivell de professionalitat, una eina que puguin utilitzar per compartir les seves composicions amb la resta de persones. Aquesta eina els servirà per expandir els seus horitzons, i alhora, portar un seguiment de les seves composicions. 1.2 Estat de l’art En l’actualitat existeixen diferents serveis on un artista pot fer pública i compartir la seva música. Entre els portals d’accessos a continguts musicals més populars hi trobem: Google Music, iTunes Music Store, Spotify, SoundCloud, Last.fm i Deezer. Es poden apreciar les seves principals característiques en la Taula 1. 6 Taula 1 - Comparativa de plataformes musicals de streaming Streaming sense límit Recomanacions Llista de reproducció /compartida Comprar música Concerts Play Music premium premium sí / sí sí no iTunes Music Store compra prèvia sí sí / sí sí no Spotify premium sí sí / sí no no SoundCloud sí sí sí / sí sí sí Last.fm sí (a través de YouTube) sí sí / sí no sí Deezer premium sí sí / sí no no La nostra Plataforma sí sí sí / no no sí De tots els competidors, la plataforma SoundCloud és la més similar a la nostra, ja que segueix la nostra filosofia de connectar l’artista amb el públic. Ambdues plataformes disposen d’una part específica de gestió pels artistes, on es proporcionen diferents estadístiques, també permeten a l’usuari fer un seguiment dels seus artistes favorits i escoltar cançons a través de streaming. No obstant, SoundCloud limita el número de cançons que poden compartir els artistes, així com les diferents estadístiques que proporciona. Per tenir accés a més estadístiques i augmentar el límit de les cançons que poden compartir, els artistes han d’utilitzar el sistema de subscripció Premium que ofereix SoundCloud. 1.3 Planificació El desenvolupament d’aquest projecte requereix de moltes hores d’aprenentatge. Això dificulta el compliment de qualsevol planificació molt detallada que es prepari pel projecte, no obstant, s’espera seguir la següent taula (Taula 2) de tasques generals: 7 Taula 2 - Planificació general del desenvolupament del projecte Setmana Febrer Març Abril Maig Juny 1 Servidor HTTP Servidor HTTP & Aplicació Mòbil HTML, PHP Memòria PFG 2 Disseny de la Plataforma Aplicació Mòbil Portal Web Presentació PFG 3 Base de Dades Servidor HTTP & Aplicació Mòbil Portal Web & Memòria PFG 4 Go Sorprenentment, el desenvolupament del projecte ha seguit bastant la planificació general presentada. No obstant, la Base de Dades ha anat patint petites modificacions al llarg de les setmanes conforme s’afegien noves funcionalitats a l’aplicació, per la part d’aprenentatge, s’ha de dir que aquest es produïa conforme s’anava implementant els diferents elements de la Plataforma, i la implementació de l’aplicació mòbil s’ha allargat fins l’última setmana. Aprenentatge Implementació 8 Figura 4 - Diagrama Entitat-Relació 15 Degut a les interrelacions entre les diferents entitats que composen la Base de dades, s’esdevenen situacions en el transcurs de funcionament de la Plataforma que requereixen la modificació de diferents taules quasi de manera immediata. Aquests casos succeeixen quan: 1. Es fa una petició per escoltar una cançó: com a conseqüència s’afegeix una entrada nova a la taula de peticions, immediatament s’actualitza l’atribut de corresponent al número de reproduccions a la taula de versions i es modifica l’atribut de l’última connexió de la taula usuaris. 2. Es puntua una cançó: com a conseqüència s’afegeix una entrada nova a la taula de puntuacions, o es modifica la puntuació prèvia, immediatament s’actualitza l’atribut de la mitjana de puntuacions i el número de puntuacions rebudes a la taula de versions. 3. Es segueix o es deixa de seguir a un artista: com a conseqüència s’afegeix una entrada nova a la taula de seguidors, o s’elimina l’entrada corresponent, i immediatament s’actualitza l’atribut de número de seguidors de la taula artistes. 4. Es fa favorit o es deixa de ser favorit d’una cançó: com a conseqüència s’afegeix una entrada nova a la taula de favorits, o s’elimina l’entrada corresponent, i immediatament s’actualitza l’atribut de número de favorits de la taula de versions. Per poder realitzar aquestes modificacions de la manera més ràpida i eficient, ja que redueix el tràfic de la xarxa, s’han utilitzat quatre Stored Procedures (Procediments Emmagatzemats) en MySQL, d’aquesta manera, les múltiples instruccions associades a un Procediment Emmagatzemat seran executades el més ràpid possible. 3.2 Aplicació per a mòbils L’Aplicació per a mòbils és l’element amb més impacte en el conjunt de la Plataforma Musical, doncs és l’eina utilitzada pels usuaris per poder tenir accés als continguts multimèdia emmagatzemats als diferents servidors, i per tant, l’eina que genera més volum de tràfic. 16 S’ha dissenyat l’aplicació per a mòbils tenint present que: l’usuari ha de ser capaç de tenir accés a les metadades generades pels diferents artistes i als fitxers multimèdia de la manera més clara, pràctica i eficient possible. Tenim doncs, tres grans blocs de metadades que han de ser accessibles des de l’aplicació d’Android: 1. Metadades de les cançons: totes les dades identificatives d’una cançó i els seus fitxers multimèdia associats (el fitxer d’àudio i la imatge associada a la cançó o al àlbum). 2. Metadades dels artistes: totes les dades identificatives d’un artista i els seus fitxers multimèdia associats (la imatge associada a l’artista). 3. Metadades del concerts: totes les dades identificatives d’un concert. Els usuaris han de ser capaços d’interactuar amb aquestes metadades mitjançant una comunicació bidireccional, de forma que: es puguin escoltar les cançons per streaming, es puguin seguir diferents artistes, es puguin fer favorits de vàries cançons, puguin puntuar cançons i puguin realitzar una cerca tant de cançons/àlbums, artistes i concerts. És per això que és necessària la identificació prèvia, per part de l’usuari, abans d’accedir a aquests continguts i interactuar amb ells. Per aquests motius, la comunicació amb el Servidor Pont es realitzarà mitjançant tecnologia WebSocket. El WebSocket és una tecnologia que proporciona un canal de comunicació bidireccional i full-duplex sobre un únic socket TCP. Està dissenyada per ser utilitzada en navegadors i servidors web, però pot utilitzar-se per qualsevol aplicació client/servidor. Normalment, per temes de seguretat, els administradors de xarxes bloquegen les connexions als ports diferents del port 80, així els WebSockets pretenen solucionar aquest problema, aportant una tecnologia que proporcioni una funcionalitat similar a la que s'obté obrint diferents connexions en diferents ports però multiplexant els diferents serveis de a través d'un únic port TCP. Aquesta tecnologia compleix els nostres requisits per la comunicació entre el Servidor Pont i l’Aplicació Mòbil: • Comunicació bidireccional • Comunicació simultània sobre un únic canal TCP. • Resposta ràpida. 17 L’Aplicació necessitarà de vàries activitats per tal d’incloure totes les funcionalitats numerades en la secció de requisits. El primer pas és realitzar la identificació de l’usuari. D’aquí sorgeix l’activitat Identificació, on s’haurà de permetre el registre i la identificació a l’usuari. La següent activitat és l’Activitat Principal, des d’on es permet l’accés a les metadades de les cançons, artistes i concerts. Tot i que aquesta activitat treballa amb diferents metadades, la seva funció segueix sent la mateixa, proporcionar les metadades des del Servidor Pont a l’usuari, és per això que es proposa utilitzar una sola activitat. No obstant, també seria vàlid dividir l’activitat en tres activitats, on cadascuna d’elles gestiona un únic tipus de metadades. La següent activitat proposada és la de Cançó. En aquesta activitat s’obté la informació relacionada de la cançó seleccionada en l’activitat prèvia. Des d’aquesta activitat s’ha de permetre iniciar el streaming de la cançó, així com puntuar, i afegir/eliminar la cançó de la llista de cançons favorites. Una altra activitat seria la de Artista, des d’on es proporcionaran les metadades relacionades de l’artista seleccionat. Entre les diferents metadades, si trobaran el llistat de concerts programats per l’artista, en aquesta activitat també es permetrà afegir/eliminar l’artista de la llista d’artistes que es segueixen, així com permetre cercar totes les cançons relacionades amb l’artista. Una funcionalitat de l’Aplicació Mòbil és permetre cercar cançons, àlbums, artistes i concerts. És per això que es necessita una activitat encarregada de realitzar aquesta funció. D’aquí sorgeix l’activitat Cerca, que haurà de ser accessible des de l’Activitat Principal, i des de l’activitat Artista. També és necessària una secció encarregada de gestionar la informació relacionada amb l’usuari. Des d’aquesta activitat l’usuari podrà modificar les seves dades privades, i també tindrà accés a diferents estadístiques que ha generat durant la utilització de l’Aplicació Mòbil. L’última activitat es l’activitat de Configuració, des d’on es permet tancar la sessió de l’usuari i modificar les opcions disponibles de l’Aplicació Mòbil. En la figura 5 es pot observar l’esquema que segueix l’aplicació: 18 Figura 5 - Esquema en blocs de l'aplicació per a mòbils 19 El funcionament de l’aplicació per a mòbils és independent de la implementació final dels diferents servidors, l’únic requisit és que el servidor amb qui es connecti l’aplicació, ha de ser capaç de servir totes les peticions de metadades i de fitxers multimèdia que es necessitin. Per tant, l’esquema de connexions pel correcte funcionament de l’Aplicació per a Mòbils és el següent: 3.3 Portal Web El Portal Web és l’eina que utilitzen els diferents artistes musicals per compartir i fer pública les seves composicions musicals, també permet planificar els concerts i portar un seguiment de les seves obres musicals. Cal doncs, una identificació prèvia per tal de garantir la protecció d’aquestes dades i una navegació segura entre les diferents webs que composen el Portal Web. Les metadades de tipus text que generin els artistes s’emmagatzemaran en el Servidor de Metadades, on es troba la Base de Dades, mentre que els fitxers multimèdia d’imatge i àudio, s’emmagatzemaran en el Servidor Multimèdia, en els seus respectius directoris. Per tal de complir amb totes les funcionalitats esmentades anteriorment, el Portal Web estarà format pels següents blocs: Figura 6 - Esquema connexió aplicació-servidor 20 El bloc Identificació, des d’on es permet l’accés a la resta de webs. En aquest bloc s’ha de permetre realitzar el procés de registre de l’artista, i el procés d’identificació de l’artista. El bloc següent és el de gestió d’àlbums i cançons. En aquest bloc s’ha de permetre afegir/eliminar àlbums, així com les seves cançons. També informarà a l’usuari sobre estadístiques relacionades amb les seves cançons, com el número de reproduccions, i el número de favorits. Un altre bloc és el de gestió de concerts, des d’on es programen els concerts que realitzarà l’artista. L’últim bloc gestiona les metadades públiques de l’artista, així com la gestió dels diferents membres que composen la banda. També permet obtenir estadístiques com el número d’usuaris, de l’Aplicació Mòbil, que segueix a l’artista. L’esquema del Portal Web s’observa en la figura 7: 3.4 Servidor Web Té la funció de servir el conjunt de webs del Portal Web. Obtindrà les dades tipus text a través del Servidor de Metadades, mentre que els fitxers d’àudio i imatge els obtindrà del Servidor Multimèdia. El conjunt de webs realitzen consultes al Servidor de Metadades, per tant, el Portal Web no té un contingut estàtic. Per poder servir aquest contingut dinàmic, és necessari Figura 7 - Esquema del Portal Web 21 que el Servidor Web integri l’intèrpret PHP, que és el llenguatge més popular i més àmpliament utilitzat a l’hora de generar contingut dinàmic en webs. Aquest servidor, idealment, hauria d’estar dintre una xarxa privada, així tindria una accés més ràpid als fitxers multimèdia d’imatge, i permetria transmetre les cançons i imatges que emmagatzemen els artistes molt més ràpidament, i en principi sense incidències, al Servidor Multimèdia. 22 3.5 Esquema de connexió dels elements de la Plataforma Musical Figura 8 - Esquema proposat pels elements de la Plataforma Musical 23 L’esquema de connexions de la Plataforma Musical permet molta flexibilitat a l’hora d’implementar els diferents elements que la composen. Al final, s’ha decidit implementar tot el conjunt de la Plataforma Musical en una sola màquina servidor, aquesta decisió s’ha pres degut als limitats recursos de que es disposen. De forma que la Plataforma Musical segueix la implementació que s’observa en la figura 9: Figura 9 - Implementació de la Plataforma Musical 24 4 Implementació s’utilitzen funcions http.Handle(). Per gestionar les connexions s’utilitza la funció http.ListenAndServe() amb el handler de tipus ServeMux, aquest handler realitza la funció de multiplexació de les peticions, de manera que en el moment que es sol·licita una URL, aquest crida a la funció http.HandleFunc() o http.Handle() que té assignada la mateixa URL. Totes les metadades de tipus text s’envien serialitzades seguint l’estàndard JSON, aquest procés es fa mitjançant la funció json.MarshalIndent() de la llibreria “encoding/json”. També cal destacar l’ús de la llibreria "database/sql" que permet treballar amb la Base de dades i la llibreria "github.com/go-sql-driver/mysql" que és el controlador que ens permet establir la connexió amb la Base de Dades de MySQL i poder realitzar consultes SQL. Figura 10 - Fases del Servidor HTTP 31 Figura 11 - Estructures utilitzades pel Servidor HTTP 32 Les estructures de dades de la figura 11 són utilitzades pel Servidor HTTP a l’hora de serialitzar les metadades en format JSON. En la taula que s’observa a continuació, es troben les funcions que utilitza el Servidor HTTP per transmetre les dades sol·licitades pels clients: Taula 4 - Estructures de dades utilitzades per les funcions http.HandleFunc() Funció Estructura utilitzada login() Login signUp() noti_songs() MetadadaCanco frontRecommended_songs() newest_songs() mostPopular_songs() topRated_songs() myFavorites() frontRecommended_artists() MetadadaArtista newest_artists() mostPopular_artists() topRated_artists() following() getArtistByID() noti_events() MetadadaConcert front_events() comingsoon_events() personal_profile() MetadadaPerfil stats_profile() search() MetadadaCanco MetadadaArtista MetadadaConcert petition() No cal transmetre dades follow() save_profile() favorite() rate() MetadadaCanco 33 Figura 12 - Tipus de metadades que serveix el Servidor HTTP Com ja s’ha explicat anteriorment, els fitxers multimèdia d’àudio i imatge s’han fet accessibles mitjançant funcions http.Handle(). Aquestes funcions tenen assignades els següents directoris (que segueixen la mateixa organització proposada a la part de disseny) en diferents URLS (path): Path: /images/songs/ • Fa accessible les imatges de les cançons que estan emmagatzemades al directori /IMAGES/SONGS de la màquina servidor. Path: /images/artists/ • Fa accessible les imatges dels artistes que estan emmagatzemades al directori /IMAGES/ARTISTS de la màquina servidor. Path: /images/albums/ • Fa accessible les caràtules dels albums que estan emmagatzemades al directori /IMAGES/ALBUMS de la màquina servidor. Path: /songs/ • Fa accessible els fitxers d’àudio (que han fet públics els artistes des del Portal web) que estan emmagatzemats en el directori /SONGS de la màquina servidor. Al final, el codi utilitzat per implementar el Servidor HTTP ha superat les 3000 línies amb un total de 29 funcions concurrents. 34 4.3 Aplicació per a dispositius mòbils S’ha decidir implementar l’aplicació només per a dispositius amb sistema Android. No obstant, la conversió per a altres sistemes com el iOS, és fàcilment implementable si es segueix el mateix esquema que en l’aplicació d’Android. Aquesta aplicació està formada per un total de 5 Activitats, 5 Tabs, 15 Fragments i 14 classes pròpies, entre les quals es troben 8 Adapters. L’aplicació es connecta només al Servidor HTTP mitjançant WebSockets, permetent d’aquesta manera, la connexió bidireccional que necessita l’aplicació d’Android per funcionar de manera adient. Per realitzar aquesta connexió s’ha optat per utilitzar la llibreria “android-async-http-1.4.6” que permet realitzar connexions mitjançant WebSockets asíncronament, d’una manera molt pràctica. També s’ha utilitzat la llibreria externa “android-smart-image-view-1.0.0”, aquesta llibreria ens permet utilitzar un objecte view anomenat SmartImageView, aquesta classe ens permet emmagatzemar les imatges obtingudes a traves de URL, a la memòria cache del dispositiu d’Android, permetent així, un accés molt més ràpid a les imatges. 4.3.1 LoginActivity Es tracte de la primera activitat amb la que s’inicia l’aplicació d’Android. La seva funció principal és la d’identificar l’usuari. Figura 14 - Activitat Login · Identificació Figura 13 - Activitat Login · Identificaci ó 35 Pel procés de registre d’usuari, és necessari proporcionar el nom d’usuari desitjat, la contrasenya i el email. Per dur a terme aquest procés s’utilitza la funció signUp() implementada en el Servidor HTTP, si l’usuari o el email ja estaven utilitzats es notificarà a l’usuari, en el cas de que tot estigui correcte l’aplicació passarà a la següent activitat (MainActivity). Si l’usuari estava registrat anteriorment i no ha tancat la sessió prèviament, només farà falta que proporcioni el seu nom d’usuari i contrasenya. Aquest procés utilitza la funció login() implementada en el Servidor, si l’usuari o la contrasenya eren incorrectes es notificarà a l’usuari, en el cas de que tot estigui correcte l’aplicació passarà a la següent activitat (MainActivity). Instants abans de passar a la següent activitat, ja sigui després de realitzar el registre, o després de realitzar la identificació, s’emmagatzema a la memòria persistent del dispositiu d’Android, l’objecte serialitzable SavedData. Aquest objecte està format pels atributs _user, _password, _lastConnection i _wifiOnly, tots ells de tipus String, i els mètodes que conté són els gettets i setters dels seus atributs. El fet d’emmagatzemar aquest objecte, ens permet saltar el procés d’identificació sempre i quant, l’usuari no hagi fet l’acció de desconnexió disponible al Tab de Settings. Cal afegir que, en el moment d’iniciar la següent activitat (MainActivity), els valors com l’identificador de l’usuari (id_usuari), la seva contrasenya (pwd) i la seva última connexió (ultima_connexio) són enviats mitjançant l’objecte intent. Aquests valors, en especial el valor identificatiu de l’usuari, són vitals a l’hora del bon funcionament de l’aplicació d’Android. 4.3.2 MainActivity Es tracte de l’activitat principal de l’aplicació, des d’aquesta activitat podem accedir a tots els llistats de cançons, artistes i concerts que ens proporciona el Servidor HTTP. Abans d’explicar el funcionament de l’activitat cal entendre l’estructura dels diferents views que utilitza aquesta activitat. Per tal d’assegurar una navegació clara i intuïtiva per l’usuari, s’ha optat per utilitzar un View de tipus Tab. Els Tabs ens permeten dividir els diferents elements que composen una activitat i fer-los accessibles per mitjà de pestanyes i desplaçar-nos entre aquestes prement la pantalla i arrossegant el dit fent moviments horitzontals. En el nostre cas, hem utilitzat FragmentActivity com a elements del Tab. Els FragmentActivity ens permeten interactuar amb diferents layouts sense canviar d’activitat, i en el nostre cas resulta de gran utilitat. 36 Figura 15 - Gerarquía dels Views principals en l'activitat MainActivity Un cop s’inicia l’activitat, es procedeix a crear el menú lateral que s’utilitza per navegar entre els diferents Tabs (Tab_songs, Tab_artists, Tab_events, Tab_profile, Tab_settings) i per accedir a l’activitat de cerca (SearchActivity). Per a la implementació d’aquest menú s’ha utilitzat la classe DrawerLayout, disponible des de la llibreria “android.support.v4.widget”. Per tal d’accedir a aquest menú, s’ha de prémer l’extrem esquerra de la pantalla del dispositiu mòbil i arrossegar en direcció a la dreta. Aquest menú però, només està disponible en l’activitat MainActivity. Figura 16 - Activitat Main · Menú lateral 37 A continuació es llisten els diferents Tabs utilitzats per l’activitat principal: 1. Tab Songs Conté un total de 5 Fragments, tots cinc estan destinats a proporcionar les metadades de les cançons accessibles des del Servidor HTTP. a. Fragment Front • Informa a l’usuari sobre les noves cançons que han publicat els artistes que està seguint. Per implementar correctament aquesta funcionalitat, és de vital importància l’existència de l’atribut ultima_connexio en la taula tUsuaris de la Base de Dades. Obté les metadades gràcies a la funció noti_songs() implementada en el Servidor HTTP. • També conté el llistat de cançons recomanades segons l’activitat de l’usuari. Aquestes metadades les obté gràcies a la funció frontRecommended_songs() implementada en el Servidor HTTP. b. Fragment Newest • Proporciona el llistat de les cançons ordenades per la data de publicació. Obté les metadades gràcies a la funció newest_songs() implementada en el Servidor HTTP. c. Fragment Most Popular • Proporciona el llistat de les cançons ordenades pel número de reproduccions. • Aquest fragment també permet canviar l’ordenació del llistat segons intervals de temps: day, week, month i alltime. Les metadades s’obtenen gràcies a la funció mostPopular_songs() implementada en el Servidor HTTP. d. Fragment Top Rated • Proporciona el llistat de les cançons ordenades per la puntuació mitjana. Obté les metadades gràcies a la funció topRated_songs() implementada en el Servidor HTTP. e. Fragment My Favorites • Proporciona el llistat de les cançons que l’usuari ha marcat com a favorites. Les metadades s’obtenen gràcies a la funció myFavorites() implementada en el Servidor HTTP. • També permet la reproducció del llistat de les cançons favorites de l’usuari. Es pot escollir l’opció d’escoltar totes les cançons favorites, o personalitzar la llista de reproducció escollint-ne unes quantes. 38 Figura 17 - Fragment Front Songs Figura 18 - Fragment Newest Songs Figura 20 - Fragment TopRated Songs Figura 19 - Fragment MostPopular 39 En el Fragment MyFavorites s’utilitza la classe MediaPlayer de la llibreria d’Android per poder reproduir els fitxers d’àudio que posa accessibles el Servidor HTTP. La utilització d’aquesta classe és molt senzilla un cop s’observa el diagrama de funcionament de la figura 23. En el nostre cas, els mètodes utilitzats d’aquesta classe han estat: 1. setDataSource(): com a paràmetre entrem la URL del Servidor HTTP on es troba . el fitxer d’àudio que volem escoltar. 2. prepareAsync(): per preparar asíncronament el streaming del fitxer d’àudio. 3. onPreparedListener(): per escriure el títol de la cançó en el TextView. 4. start(): per començar la reproducció del streaming d’àudio. 5. pause(): per pausar la reproducció del streaming d’àudio. 6. stop(): per aturar la reproducció del streaming d’àudio. (Si es torna a fer un start() . de l’objecte MediaPlayer, aquest comença des del principi). 7. onCompletionListener(): per preparar el streaming de la següent cançó de la llista . de reproducció. 8. release(): per reduir el consum de memòria quan l’objecte MediaPlayer no ..................s’utilitza. Figura 21 - Fragment MyFavorites Songs Figura 22 - Pantalla completa reproducció 40 Figura 33 - Fragment Settings 4.3.3 VersionActivity En aquesta activitat s’informa a l’usuari de la majoria de les metadades relacionades amb una cançó (títol de la cançó, nom de l’artista, gènere, nom de l’àlbum, any de publicació, duració de la cançó, puntuació mitjana, puntuació prèvia que havia assignat l’usuari, número de favorits, directori imatge de la cançó, directori caràtula del àlbum). Per accedir a aquesta activitat s’ha de prémer a un element dels llistats de cançons. Totes les metadades necessàries per aquesta activitat s’envien a través de l’intent, d’aquesta forma no es realitzen peticions individuals de metadades de cançons al Servidor HTTP. 47 Figura 34 - Activitat VersionActivity En aquesta activitat podem reproduir la cançó a través de streaming, utilitzant la mateixa classe MediaPlayer utilitzada en el Fragment MyFavorites del Tab Songs. També ens permet afegir/eliminar la cançó a la llista de cançons favorites (funció follow() implementada al Servidor HTTP), i puntuar la cançó. Si l’usuari ja havia puntuat la cançó prèviament, la seva puntuació apareixerà en el view RatingBar de la llibreria Android. Sempre que es premi el RatingBar, aquest enviarà la puntuació al Servidor HTTP, i acte seguit, la funció rate() implementada al Servidor HTTP procedirà a executar-se, actualitzant la informació corresponent a la Base de Dades. Com a curiositat, la imatge que es visualitza s’escollirà entre la imatge de l’àlbum i la imatge de la cançó. En el cas de que la cançó tingui assignada la imatge per defecte (aquesta imatge s’assigna durant el procés de creació d’una nova cançó, des del Portal Web), s’utilitzarà la imatge de l’àlbum. 48 4.3.4 ArtistActivity En aquesta activitat s’informa a l’usuari de la majoria de les metadades relacionades amb un artista (nom de l’artista, imatge de l’artista, ciutat i país d’origen, any del debut, membres de la banda, web, número de seguidors i per últim el llistat dels seus concerts programats). Figura 35 - Activitat ArtistActivity De la mateixa forma que l’activitat VersionActivity, per accedir a aquesta activitat s’ha de prémer un element d’un llistat de metadades, en aquest cas llistats d’artistes. En el moment en que es prem l’element, s’envia les metadades relacionades amb l’artista a través de l’intent. Un cop l’activitat ja s’hagi inicialitzat, ens permetrà afegir/eliminar l’artista del llistat dels artistes que es segueixen (funció follow() implementada en el Servidor HTTP), i en facilitarà l’accés a totes les seves cançons. 49 4.3.5 SearchActivity Aquesta activitat permet a l’usuari realitzar cerques de cançons, artistes i concerts. Es pot accedir a l’activitat mitjançant el menú lateral, o prement el botó de cercar cançons, situat en l’activitat ArtistActivity. Quan l’usuari sol·licita la cerca d’un terme, s’inicia la connexió amb el Servidor HTTP i es demana l’execució de la funció search() 3 cops. El primer cop, la resposta del Servidor HTTP serveix metadades de cançons (figura 36), el segon cop serveix metadades d’artistes (figura 37), i el tercer cop serveix metadades de concerts (figura 38). Figura 37 - Activitat SearchActivity · Songs Figura 36 - Activitat SearchActivity · Artists 50 Un, dels molts elements que s’han utilitzat per millorar l’experiència de l’usuari, és l’ús del view SwipeRefreshLayout (figura 39). Aquest view està disponible per mitjà de la llibreria “android.support.v4.widget.SwipeRefreshLayout”. La funcionalitat que s’ha implementat en aquest element, és permetre actualitzar els llistats de metadades prement i arrossegant cap avall en qualsevol llistat. Per tal de gestionar les diferents metadades que serveix el Servidor HTTP, es va decidir crear 4 classes destinades a emmagatzemar aquestes dades. 1. MetadadesCanco: 21 atributs amb els corresponents setters i getters. 2. MetadadesArtista: 17 atributs amb els corresponents setters i getters. 3. MetadadesEvent: 8 atributs amb els corresponents setters i getters. 4. MetadadesProfile: 10 atributs amb els corresponents setters i getters. En total l’aplicació per dispositius d’Android ha sumat més de 7000 línies de codi, sense tenir en compte els fitxers de layouts (26 en total), ni els de les variables (strings.xml). Tal com es demanava en les especificacions, l’aplicació està disponible en els idiomes: anglès, castellà, i català. Figura 39 - Activitat SearchActivity · Songs Figura 38 - SwipeRefresh 51 4.4 Portal Web El Portal web és l’eina que utilitzen els artistes per gestionar totes les metadades que publiquen en la Plataforma musical. És per això que requereix d’un procés d’identificació previ, abans de poder interactuar amb les eines de gestió d’àlbums i concerts. Per tal de protegir les dades i obtenir una navegació segura s’ha optat per enviar tots els formularis amb mètodes POST, d’aquesta manera les dades queden encapsulades en el missatge HTTP. També s’ha fet ús de cookies, de manera que un cop l’artista s’identifica, s’obre una sessió de durada 24h, o fins que es tanca el navegador. Les diferents webs que composen el Portal web són les següents: 1. index.html • Permet l’accés a les webs de gestió de àlbums/cançons, concerts i membres, a traves del email i la contrasenya de l’artista. En aquest pas s’obté el valor identificatiu de l’artista (id_artista) obtingut de la consulta a la Base de dades. • Permet fer el registre d’un nou artista, en aquest cas es redirecciona la web: registrar_artista.php. Figura 40 - Accés al Portal Web 52 2. registrar_artista.php • Permet crear un nou artista, a través d’un formulari. En aquest pas s’omplen les metadades de l’artista: nom de la banda, gènere principal, idioma, ciutat origen, país origen, any debut, últim any d’activitat, facebook, twitter, web, contrasenya, email i imatge de l’artista. Totes aquestes dades s’entren a la taula tArtistes de la Base de dades per finalment redireccionar a l’artista a la web: desk.php Figura 41 - Registre d'artista A partir d’aquest punt, el conjunt de webs restants incorporen un menú vertical a l’esquerra que permet navegar dintre el Portal Web pels panells de gestió d’àlbums/cançons, el panell de gestió dels concerts i el panell de gestió de l’artista, d’aquesta forma, l’artista pot recórrer pel Portal Web d’una manera intuïtiva i pràctica. 53 3. desk.php • Permet visualitzar els àlbums i les cançons que ha fet públiques fins ara l’artista. També pot veure el número de reproduccions que han tingut les seves cançons, així com el número de favorits i la puntuació mitjana. • Permet crear un nou àlbum, en aquest cas es redirecciona a la web: album.php • Permet afegir una cançó a un àlbum prèviament creat, en aquest cas es redirecciona a la web: canco.php • Permet eliminar un àlbum que s’hagi creat. • Permet eliminar una cançó que s’hagi creat. Figura 42 - Web de gestió dels àlbums i cançons 54 4. album.php • Permet crear un nou àlbum mitjançant un formulari on es demanen les següents dades: nom de l’àlbum, any d’estrena, número de cançons i la caràtula de l’àlbum. Totes aquestes dades s’entren a la taula tAlbums de la Base de dades, per finalment redireccionar a l’artista a la web: desk.php Figura 43 - Creació de l'àlbum En tots els formularis del conjunt de webs, s’han implementat funcions JavaScript per tal d’assegurar que tots els camps necessaris tenen un valor assignat. D’aquesta forma els inserts a les taules de la Base de Dades no ens donaran errors, també s’ha tingut en compte el número màxim de caràcters permesos pels diferents camps dels formularis, de manera que aquests coincideixin amb els atributs de les taules de la Base de Dades. 55 5. canco.php • Permet afegir una cançó a l’àlbum seleccionat mitjançant un formulari on es demanen les següents dades: títol de la cançó, artista col·laboració, tipus de col·laboració (Feat./Cover/Remix), número de la cançó dintre l’àlbum, gènere de la cançó, idioma de la cançó, imatge de la cançó i per últim l’àudio en format mp3 de la cançó. Totes aquestes dades s’entren a la taula tCancons i tVersions de la Base de dades, per finalment redireccionar a l’artista a la web: desk.php Figura 44 - Creació de la cançó 56 6 Tecnologies i programaris utilitzats SQL: llenguatge que permet realitzar consultes a la Base de Dades. Ja es tenien coneixements previs, gràcies l’assignatura de Base de Dades del Q3. No obstant, s’ha hagut de profunditzar en la matèria i utilitzar nous conceptes com els Procediments Emmagatzemats. GO: llenguatge de programació concurrent, eficient, relativament nou (2009), i orientat a objectes (però sense herència). És el llenguatge utilitzat per desenvolupar el Servidor HTTP. En aquest cas, no es disposaven de coneixements previs, això ha comportat la despesa de moltes hores d’adquisició de coneixements. Java: llenguatge de programació orientat a objectes, utilitzat per desenvolupar l’aplicació per a dispositius de sistema Android. Ja es tenien coneixements previs de l’optativa de Programació Android Q7. Els coneixements adquirits en l’optativa han servir per tenir una base sòlida a l’hora de començar amb el desenvolupament de l’aplicació, no obstant, s’ha profunditzat molt en la matèria, doncs s’han utilitzat tabs, fragments, streaming d‘àudio, websockets, animació, handlers, i altres elements utilitzats que es desconeixien de la seva existència. HTML 5: llenguatge utilitzat per escriure el codi del conjunt de webs del Portal Web. Es tenien conceptes molt bàsics adquirits en les últimes setmanes de l’assignatura de Base de Dades del Q3. Han estat necessàries moltes hores d’adquisició de coneixements per tal de crear un Portal Web presentable i funcional. CSS: llenguatge utilitzat per descriure la presentació dels elements que forment les webs del Portal Web. Igual que el llenguatge HTML, els coneixements previs eren molt escassos. PHP: llenguatge de programació utilitzat en el desenvolupament del Portal Web. S’ha profunditzat en els coneixements previs adquirits en les últimes setmanes de l’assignatura de Base de Dades del Q3. JavaScript: llenguatge de programació interpretat. S’ha utilitzat per millorar la interfície del Portal Web, així com algunes funcionalitats. jQuery: llibreria JavaScript utilitzada per afegir alguna funcionalitat al Portal Web. 63 WebSockets: tecnologia que proporciona un canal de comunicacions bidireccional i fulldúplex sobre un únic socket. S’ha utilitzat per la comunicació entre l’aplicació mòbil i el Servidor HTTP. EasyPHP: programa lliure que incorpora un servidor web Apache i el intèrpret PHP. S’ha utilitzat per servir el nostre Portal Web dinàmic. MySQL: programari lliure per la gestió de la Base de Dades relacional. La majoria de consultes a la nostra Base de Dades són de lectura, i MySQL es caracteritza per la seva rapidesa a l’hora d’executar aquest tipus de consultes. Geany: programari lliure i lleuger amb funció d’editor de text. S’ha utilitzat per programar amb el llenguatge Go, prèviament s’ha hagut d’instal·lar el intèrpret i ..les llibreries de Go per poder compilar des del mateix programa. Eclipse: IDE lliure multiplataforma, utilitzat a l’hora de desenvolupar l’aplicació per a dispositius Android. Prèviament s’ha hagut d’instal·lar l’extensió que incorpora totes les llibreries necessàries per poder programar amb Android. DreamWeaver: programari amb funció d’editor de text que proporciona un entorn de treball pràctic per poder escriure codi HTML i PHP. S’ha utilitzat per escriure el codi de les webs del Portal Web. Word: programari per l’edició de text, s’ha utilitzar per escriure la memòria del projecte. Photoshop: programari utilitzat per crear els elements gràfics utilitzats tant de l’aplicació d’Android, com del Portal Web i com de la memòria del.projecte. 64 Bibliografia [1] “Activity | Android Developers.” [Online]. Available: http://developer.android.com/intl/es/reference/android/app/Activity.html. [Accessed: 07-Mar-2015]. [2] “Creating Swipe Views with Tabs | Android Developers.” [Online]. Available: http://developer.android.com/intl/es/training/implementingnavigation/lateral.html. [Accessed: 13-Mar-2015]. [3] “CSS - w3schools.” [Online]. Available: http://www.w3schools.com/css/default.asp. [Accessed: 03-May-2015]. [4] “EasyPHP | A quick starter guide for PHP developers : how to use EasyPHP and how to create a PHP file.” [Online]. Available: http://www.easyphp.org/introduction.php. [Accessed: 01-May-2015]. [5] ECMAScript Fifth Edition -The JSON Data Interchange Format. [Accessed: 03-Apr2015]. [6] “Endless Scrolling ListView in Android.” [Online]. Available: http://benjii.me/2010/08/endless-scrolling-listview-in-android/. [Accessed: 19Apr-2015]. [7] “Fragments | Android Developers.” [Online]. Available: http://developer.android.com/intl/es/guide/components/fragments.html. [Accessed: 07-Mar-2015]. [8] “HTML - w3schools.” [Online]. Available: http://www.w3schools.com/html/. [Accessed: 03-May-2015]. [9] “http - The Go Programming Language.” [Online]. Available: https://golang.org/pkg/net/http/. [Accessed: 22-Feb-2015]. [10] “How to Create and Use Cookies in PHP.” [Online]. Available: http://www.thesitewizard.com/php/set-cookies.shtml. [Accessed: 28-May-2015]. [11] “JavaScript - w3schools.” [Online]. Available: http://www.w3schools.com/js/default.asp. [Accessed: 12-May-2015]. [12] “jQuery - w3schools.” [Online]. Available: http://www.w3schools.com/jquery/default.asp. [Accessed: 17-May-2015]. [13] “MediaPlayer | Android Developers.” [Online]. Available: http://developer.android.com/intl/es/reference/android/media/MediaPlayer.ht ml. [Accessed: 27-May-2015]. 65 [14] “MySQL :: MySQL 5.7 Reference Manual.” [Online]. Available: http://dev.mysql.com/doc/refman/5.7/en/. [Accessed: 27-Feb-2015]. [15] “mysql: go-sql-driver.” [Online]. Available: http://godoc.org/github.com/go-sqldriver/mysql. [Accessed: 22-Feb-2015]. [16] “PHP 5 - w3schools.” [Online]. Available: http://www.w3schools.com/php/default.asp. [Accessed: 03-May-2015]. [17] “sql - The Go Programming Language.” [Online]. Available: https://golang.org/pkg/database/sql/. [Accessed: 22-Feb-2015]. [18] “SQL - w3schools.” [Online]. Available: http://www.w3schools.com/sql/default.asp. [Accessed: 03-May-2015]. [19] “Treballs acadèmics: recomanacions d’elaboració | Publica!” [Online]. Available: http://publica.upc.edu/ca/que-vols-publicar/tfg/recomanacions. [Accessed: 13May-2015]. [20] “View Animation | Android Developers.” [Online]. Available: http://developer.android.com/intl/es/guide/topics/graphics/viewanimation.html. [Accessed: 28-Apr-2015]. [21] “WebSocket.org -- A WebSocket Community.” [Online]. Available: https://www.websocket.org/. [Accessed: 03-May-2015]. 66