DESARROLLO DE UN PROTOTIPO DE APLICACIÓN MÓVIL
Pla a o ma de dis ibución de audio
Alexande Reyes Sánchez - Tu o : Ab aham Rod íguez Rod íguez - Julio 2017
T abajo de Fin de G ado - G ado en Ingenie ía In o má ica
M USICFACT
DESARROLLO DE UN PROTOTIPO DE APLICACIÓN MÓVIL
Pla a o ma de dis ibución de audio
Alexande Reyes Sánchez - Tu o : Ab aham Rod íguez Rod íguez - Julio 2017
T abajo de Fin de G ado - G ado en Ingenie ía In o má ica
M USICFACT
Alexande Reyes Sánchez - MusicFac
I
Índice
1| In oducción .............................................................................................................. 1
1.1 Con ex o ................................................................................................................................................ 1
1.2 Obje i os ................................................................................................................................................ 2
1.3 Me odología ........................................................................................................................................... 3
1.4 Compe encias especí icas cubie as ....................................................................................................... 4
1.5 Apo aciones al en o no socioeconómico, écnico o cien í ico ............................................................... 5
1.6 Es uc u a de la memo ia ....................................................................................................................... 5
2| Análisis ...................................................................................................................... 6
2.1 Es udio de aplicaciones simila es .......................................................................................................... 6
2.2 Requisi os ............................................................................................................................................. 18
2.3 Diag amas de casos de uso ................................................................................................................... 22
2.4 Mockups, diseño de la in e az y pale a de colo es .............................................................................. 24
2.5 Modelo de negocio .............................................................................................................................. 25
2.6 No ma i a y legislación ........................................................................................................................ 27
3| Diseño e implemen ación ........................................................................................ 30
3.1 Alcance de la implemen ación .............................................................................................................. 30
3.2 Diseño a qui ec ónico .......................................................................................................................... 33
3.2.1 Módulos ........................................................................................................................................ 35
3.2.2 Componen es................................................................................................................................. 35
3.2.3 Plan illas ........................................................................................................................................ 36
3.2.4 Me ada os ..................................................................................................................................... 37
3.2.5 Da a binding .................................................................................................................................. 37
3.2.6 Di ec i as ....................................................................................................................................... 37
3.2.7 Se icios......................................................................................................................................... 38
3.2.8 Inyección de dependencias ............................................................................................................ 38
3.3 Modelo de la base de da os ................................................................................................................. 39
3.3.1 Real ime Da abase ........................................................................................................................ 39
3.3.2 Au en icación ................................................................................................................................ 45
3.3.3 S o age ......................................................................................................................................... 46
3.4 Tecnologías .......................................................................................................................................... 47
3.4.1 HTML5, Ja aSc ip , CSS3 y Sass ...................................................................................................... 47
Alexande Reyes Sánchez - MusicFac
II
3.4.2 TypeSc ip ..................................................................................................................................... 48
3.4.3 Ionic 2 ........................................................................................................................................... 49
3.4.4 Ionic Na i e y Apache Co do a/PhoneGap ..................................................................................... 50
3.4.5 Fi ebase No i ica ions .................................................................................................................... 53
3.4.6 Ionic S o age.................................................................................................................................. 54
3.4.7 Ionic C ea o .................................................................................................................................. 54
3.4.8 Angula Fi e2 .................................................................................................................................. 55
3.4.9 Lodash ........................................................................................................................................... 55
3.4.10 Angula 2-Cha s .......................................................................................................................... 56
3.4.11 Gi Hub ......................................................................................................................................... 56
3.4.12 Wa le.io ...................................................................................................................................... 56
3.4.13 Zedge ........................................................................................................................................... 57
3.5 P uebas ................................................................................................................................................ 57
3.6 Acceso al código y despliegue .............................................................................................................. 59
4| Conclusiones ............................................................................................................ 60
Fuen es de in o mación ................................................................................................ 61
Anexos ......................................................................................................................... 63
A) Manual de usua io ................................................................................................................................. 63
B) Aplicaciones Híb idas ............................................................................................................................. 76
C) Came a .................................................................................................................................................. 77
Alexande Reyes Sánchez - MusicFac
1
1| In oducción
1.1 CONTEXTO
Música/Audio
El con ex o en el que se basa nues a aplicación pa e de la sociedad ac ual que busca un mecanismo
de desconexión du an e algunas ho as del día pa a man ene la men e ocupada, ameniza las ho as
de abajo, ayec os en coche o a modo ambien al en celeb aciones.
Las aplicaciones mó iles han omado impo ancia desde el su gimien o de los sma phones, ya que
la mayo pa e de las pe sonas eligen sus disposi i os mó iles como ía p incipal pa a in e ac ua
con sus edes sociales. Po ello, el desa ollo de aplicaciones mó iles ha ido inc emen ando
exponencialmen e y, con es e c ecimien o, su giendo nue as ecnologías.
Con las nue as ecnologías, cambia la mane a de desa olla cie as a eas que p obablemen e an es
cos aban más iempo y es ue zo. De es a o ma, conseguimos aumen a la p oduc i idad de los
desa ollado es.
Ilus ación 1 - Inc emen o exponencial de aplicaciones mó iles 1
1 Inc emen o exponencial de aplicaciones mó iles - Julio 2017

Alexande Reyes Sánchez - MusicFac
2
Cen ándonos en nues o abajo, las edes sociales ienen muchas u ilidades, e dan la opo unidad
de man ene e en con ac o con us amigos, e o os de us amilia es en o os países o ciudades,
e ídeos o iginales, escucha canciones, e c. Sin emba go, ¿qué opciones ienen aquellas pe sonas
c ea i as que se dedican a g aba música indi idualmen e o con un g upo/banda, pe o que no
cuen an con el espaldo de una compañía discog á ica o un sello mul inacional? Hoy en día, no es
nada ácil da se a conoce y pa a ello no malmen e es necesa ia una in e sión.
Nues a ed social es á des inada p incipalmen e pa a esos músicos, de al mane a que puedan subi ,
egis a , p omo e y di undi sus c eaciones a a és de canales, p omocionando su música de o ma
simple sin la necesidad de u iliza o os se icios de alojamien o de a chi os.
Po o o lado, enemos a los usua ios que eligen la pla a o ma como ep oduc o de música, álbum,
seguimien o de sus a is as a o i os, ... Son es as pe sonas de di e en es luga es de odo el mundo
las que p omue en las canciones.
1.2 OBJETIVOS
Pa a es a pa e de la memo ia, es ablece emos los di e en es obje i os que se p e enden alcanza
con el desa ollo de la aplicación. Dichos obje i os los podemos di idi en es ca ego ías di e en es:
• Sociales: In ensi icando en los usua ios que eligen la pla a o ma como ep oduc o de
música, biblio eca de audio, e c.
• Económicos: Pa a los usua ios/músicos que p e enden come cializa sus c eaciones
musicales.
• Es adís icos: Pa a los usua ios/músicos que es án in e esados en es udia los gus os
musicales p edominan es en la sociedad ac ual.
En esumen, el obje i o p incipal de es e p oyec o es ayuda a las pe sonas c ea i as a saca a la luz
sus c eaciones musicales pa a que puedan llega en algún momen o a come cializase. A pa e de
p opo ciona al es o de usua ios una pla a o ma músico-social donde puedan ealiza un
seguimien o de sus a is as a o i os, escucha sus canciones y/o conoce gen e con los mismos
gus os musicales.
Como esul ado del abajo ob end emos un eno me eso o de con enidos, en e ejiéndolo odo en
la ed y haciendo que sea más ácil compa i nues o ingenio.
Alexande Reyes Sánchez - MusicFac
3
1.3 METODOLOGÍA
Pa a el desa ollo de es e p oyec o se ha seguido el modelo clásico en cascada. Es e modelo usa un
ciclo de ida lineal secuencial, es deci , cada ase debe se comple ada an es de que la siguien e ase
pueda comenza , po lo que no malmen e el esul ado de una ase ac úa como en ada pa a la
siguien e.
Den o de cada ase, u iliza emos di e en es he amien as y ecnologías. De en e ellas, cabe
des aca algunas como Wa le.io pa a la ase de equisi os, Ionic C ea o pa a el diseño de la
aplicación, Angula jun o a o as ecnologías pa a la implemen ación, Fi ebase como base de da os
en la nube y en o no pa a e i ica los da os de las p uebas, o And oid SDK pa a el despliegue de la
aplicación en un disposi i o mó il.
A con inuación, se p esen a un esquema con las di e en es ases y he amien as mencionadas
an e io men e:
En e las en ajas que iene es a me odología de so wa e des acamos el con ol. En o as palab as,
podemos ajus a plazos pa a cada e apa del desa ollo. Sin emba go, una de las g andes des en ajas
del modelo en cascada es que no pe mi e mucha e lexión o e isión. Po ejemplo, una ez que una
aplicación se encuen a en ase de p uebas, es muy di ícil ol e a ás y modi ica algún con enido.
Si compa amos es a me odología con la plani icación p e is a en la p opues a de abajo de in de
g ado, no exis en g andes des iaciones.
Análisis de
equisi os Diseño Implemen ación P uebas Despliegue Man enimien o
Esquema 1 - Fases y he amien as pa a el modelo clásico en cascada
Alexande Reyes Sánchez - MusicFac
4
Fases
Du ación
Es imada
(ho as)
Ta eas
(nomb e y desc ipción, obliga o io al menos una po ase)
Es udio p e io / Análisis
50
Ta ea 1.1: Es udio de plan inicial con el u o
Ta ea 1.2: Análisis de he amien as y ecnologías a usa
Ta ea 1.3: Es udio de me cado de aplicaciones semejan es
Diseño / Desa ollo /
Implemen ación
180
Ta ea 2.1: Diseño de o ma o pa a in e cambio de da os
Ta ea 2.2: Desa ollo de uncionalidades
Ta ea 2.3: Diseño e implemen ación lógica del lado del
se ido
Ta ea 2.4: Diseño e implemen ación in e az on end
E aluación / Validación
/ P ueba
40
Ta ea 3.1: E aluación/Validación de uncionalidades
implemen adas
Ta ea 3.2: P uebas de endimien o en disposi i o mó il
Documen ación /
P esen ación
30
Ta ea 4.1: Redacción de la memo ia inal del p oyec o
Ta ea 4.2: Desa ollo de la p esen ación pa a la de ensa
Tabla 1 - Plani icación p e is a en la p opues a de abajo
1.4 COMPETENCIAS ESPECÍFICAS CUBIERTAS
Con el p esen e abajo, de acue do con la in ensi icación Tecnologías de la In o mación del G ado
en Ingenie ía In o má ica, se han cubie o las siguien es compe encias especí icas:
• Capacidad pa a emplea me odologías cen adas en el usua io y la o ganización pa a el
desa ollo, e aluación y ges ión de aplicaciones y sis emas basados en ecnologías de la
in o mación que asegu en la accesibilidad, e gonomía y usabilidad de los sis emas.
• Capacidad de concebi sis emas, aplicaciones y se icios basados en ecnologías de ed,
incluyendo In e ne , web, come cio elec ónico, mul imedia, se icios in e ac i os y
compu ación mó il.
Alexande Reyes Sánchez - MusicFac
5
1.5 APORTACIONES AL ENTORNO SOCIOECONÓMICO, TÉCNICO O CIENTÍFICO
2Como apo ación que nos o ece la aplicación al en o no
socioeconómico, dis inguimos el impac o que ecae en el mundo
socio musical. Con es e ipo de aplicaciones, se p e ende educi
el núme o de desca gas ilegales en la ed.
El p oblema de la pi a e ía ecae en que el público ha sido
en enado po las g andes compañías de medios pa a desea y
exigi en e enimien o sin in, ya sea música, se ies, películas, e c.
Una ez que se es ablece la adicción, depende del negocio
man ene sa is echo al público. Si es o no se hace de o ma e icien e, los consumido es acudi án a
los medios de pi a e ía. Sin emba go, si p opo cionas medios pa cialmen e g a ui os al público con
s eaming, el p oblema se esuel e solo. Si al usua io le gus a la pla a o ma y le esul a cómoda (más
que moles a se en desca ga copias ilegales), p obablemen e no le impo e paga una cuo a mensual
que se ajus e a su bolsillo. En la sección 2.5 Modelo de negocio, indaga emos más sob e es e ema.
1.6 ESTRUCTURA DE LA MEMORIA
La es uc u a de la memo ia sigue la me odología de desa ollo so wa e desc i a an e io men e. En
p ime luga , la e apa de análisis cons a de un es udio p e io de aplicaciones simila es al p oyec o,
pa a luego pode de ini los equisi os que debe cumpli la aplicación. Los equisi os pueden se
an o uncionales como no uncionales. Pa a guia nos de una o ma más in ui i a, ha emos uso de
diag amas de casos de uso y algunos mockups pa a las pan allas más ep esen a i as. Finalmen e,
pa a e mina con es a ase habla emos sob e el modelo de negocio a segui y la
no ma i a/legislación que debe cumpli nues a aplicación.
En segundo luga , se de inen las ca ac e ís icas implemen adas, jun o con la a qui ec u a so wa e y
el modelo de la base de da os usados. Además, habla emos sob e cada ecnología u ilizada en el
desa ollo del p oyec o pa iendo desde las bases.
Al inaliza la e apa de implemen ación, se desc ibi á la me odología de p uebas seguida pa a alida
el co ec o uncionamien o de la aplicación. También se adjun an a ios enlaces pa a ealiza un
seguimien o del p oyec o en Gi Hub y Wa le.io. Po úl imo, se añaden las conclusiones que hemos
sacado al e mina el desa ollo de la aplicación.
2 Pi a e ía - Julio 2017
Ilus ación 2 - Pi a e ía
Alexande Reyes Sánchez - MusicFac
12
Al inicia la aplicación nos encon amos con una a je a de bien enida donde podemos c ea una
cuen a o inicia sesión p ác icamen e con las mismas ca ac e ís icas que SoundCloud. A iso al
egis a nos pa a conoce mejo nues os gus os musicales (no edad con espec o a o as
aplicaciones del mismo géne o).
En p ime luga , disponemos de cua o secciones pa a na ega en la pa e supe io . En ‘Inicio’
enemos la opción de escucha canciones suge idas en unción de los gus os que hayamos indicado
al egis a nos. Pos e io men e, apa ecen a ias ansiciones o comúnmen e llamadas ‘slides’:
• Explo a : lis a de e ique as ( ies a, elec ónica, popula , pop, depo e, niños, …)
• Selección de lis as
• Popula
• Top Spain
• Nue os lanzamien os
• (NOVEDAD) Fú bol: podemos e p óximos pa idos, compe iciones, canales, podcas s de
ú bol, playlis de ú bol.
En la sección ‘Mi Música’ podemos e nues o pe il de usua io incluyendo di e en es opciones
como, po ejemplo: Susc ipción a P emium+ con 30 días g a is (escucha música sin conexión y sin
anuncios); Ve usua ios seguidos/seguido es; Mis canciones a o i as; Ajus es donde podemos,
en e o os, susc ibi nos a Deeze Family (14,99 €/mes), ges iona nues a cuen a, ajus es de audio,
modo sin conexión, Deeze Labs (uso de nue as uncionalidades en ase de p ueba).
Den o de ‘No i icaciones’ disponemos de una lis a con di e en es ipos de no i icaciones: Álbum,
nue o single, nue o álbum, lis as. Cada no i icación mues a a su ez la echa de publicación, í ulo,
a is a/s. Aquí, podemos añadi canciones a una lis a, desca ga , ag ega a a o i os, e la icha del
a is a, compa i .
En ‘Busca ’ simplemen e exis e un buscado que il a po ex o, de o ma que nos apa ecen los
esul ados más buscados, a is as, álbumes, canciones, playlis s, pe iles.

Alexande Reyes Sánchez - MusicFac
13
Po úl imo, el ep oduc o de música que, desde mi pun o de is a uno de los mejo es, cumple las
siguien es uncionalidades:
• Añadi a una lis a c eada o añadi una nue a
• Ag ega a a o i os
• Ficha del a is a
• Ficha del álbum
• Compa i
• Le as (es ilo ka aoke sólo algunas canciones)
• Lis a de ep oducción
• Ajus e de audio is os an e io men e
• Rep oducción alea o ia o epe ición de canción ac ual
Ilus ación 8 - Rep oduc o Deeze
Alexande Reyes Sánchez - MusicFac
14
Tabla compa a i a de las aplicaciones
SoundCloud
Deeze
Spo i y
MusicFac
Desa ollado
SoundCloud
Deeze Mobile
Spo i y L d.
Alexande Reyes
Ve sión
2017.04.19- elease
5.4.4.88
8.4.1.846
2017.07
Desca gas
Más de 100
millones
Más de 100
millones
Más de 100
millones ---
Pun uación-
Vo an es 4,4/5 - 2.879.143 4,1/5 - 1.193.320 4,5/5 - 8.270.130 ---
Géne o
Música y audio
Música y audio
Música y audio
Música y audio
No edades
- The Upload:
lis a
pe sonalizada
que se ac ualiza a
dia io
- Funcionalidad
al inicia po
p ime a ez pa a
conoce gus os
musicales
- Fú bol
- Busca
concie os
popula es ce ca
de una ubicación
conc e a
- C oss ade
- Tendencias
musicales
Regis a se/Inic
ia sesión -
Google+
Regis a se/Inic
ia sesión -
Facebook
Regis a se/Inic
ia sesión -
Email/Pass
Opción ¿Has
ol idado la
con aseña?
Emiso a/Radio
(pis as
simila es)
Visualización
lis a de
canciones
Alexande Reyes Sánchez - MusicFac
15
SoundCloud
Deeze
Spo i y
MusicFac
Buscado
Canciones/lis a
s ecomendadas
Lis a de
canciones con
no edades
Lis a de
canciones Top
Lis a de éxi os
po géne o
Lis a de
canciones po
es ado de
ánimo
Busca po
e ique a
Likes/Gua da
en biblio eca
Qui a like de
una canción
Repos /Compa
i
His o ial de
ep oducción
Pe il de
usua io
Seguido es
Seguidos
No i icaciones
G aba
pis a/Subi
pis a
Alexande Reyes Sánchez - MusicFac
16
SoundCloud
Deeze
Spo i y
MusicFac
Con igu ación
básica
Con igu ación
de
no i icaciones
Ce a sesión
Rep oduc o
Compa i en
edes sociales
Mos a
in o mación de
la canción
Comen a
canción
C ea lis as de
canciones
Ag ega
canciones a una
lis a
Escucha
canciones
suge idas
Selección
playlis s
Susc ipción
Ajus es de
audio
Disposi i os
conec ados
Modo sin
conexión (ya
desca gado)
Alexande Reyes Sánchez - MusicFac
17
SoundCloud
Deeze
Spo i y
MusicFac
Uso
uncionalidades
en ase de
p ueba
Desca gas
(P emium)
Álbumes
A is as
Tus c eaciones
Publicidad
o as
aplicaciones
Le as de
canciones
(algunas)
Rep oducción
alea o ia
(obliga o ia con
cuen a g a is)
O dena lis a
Lis a de
canciones de la
playlis
Vídeos
Podcas s
Busca po
código (uso de
la cáma a del
disposi i o/
gale ía)
Busca amigos
en Facebook

Alexande Reyes Sánchez - MusicFac
18
SoundCloud
Deeze
Spo i y
MusicFac
Sesión p i ada
Añadi
canciones/lis as
a la cola de
ep oducción
(P emium)
Es udio
es adís ico pa a
a is as
Tabla 2 - Compa a i a de aplicaciones
2.2 REQUISITOS
La aplicación es igual pa a cada pe il de usua io, depende de cada uno el uso que le quie a da . Es
deci , hab á usua ios que se limi en a usa la aplicación como una ed social pa a escucha música o
aquellos que la usa án pa a di undi su música y pode e el g ado de acep ación en e los usua ios
egis ados en la aplicación.
A con inuación, se desglosan las uncionalidades de la aplicación a modo de ca álogo de equisi os,
eniendo en cuen a an o equisi os uncionales como no uncionales.
El ca álogo de equisi os es la especi icación del compo amien o que se espe a de cualquie
p oyec o so wa e. Es udiando el me cado de aplicaciones simila es en la sección an e io , se ha
p ede inido una se ie de equisi os que se conside an indispensables pa a el p oyec o.
Seguidamen e, se mues a una enume ación y b e e desc ipción de los equisi os es ablecidos pa a
el diseño y desa ollo de la aplicación.
Requisi os uncionales
Los equisi os uncionales desc iben odas las in e acciones que end án los usua ios con el
so wa e.
• Regis o
1. La aplicación debe pe mi i al usua io in oduci sus da os en el o mula io de egis o.
2. Opcionalmen e, accede a la cáma a o gale ía pa a selecciona la una imagen de pe il y
mos a la en el o mula io.
3. El sis ema se enca ga á de alida los da os.
4. El sis ema mos a á un mensaje de e o si alguno de los da os no cumple las
alidaciones especi icadas pa a el o mula io de egis o.
Alexande Reyes Sánchez - MusicFac
19
5. En el caso de que la alidación sea co ec a, se habili a á el bo ón de egis o y el sis ema
se enca ga á de gua da los da os del usua io en la base de da os.
6. El sis ema mos a á una con i mación al usua io en el caso de que el egis o se haya
e ec uado co ec amen e.
7. La aplicación edi igi á a la po ada pa a que el usua io inicie sesión.
8. Se pe mi e al usua io egis a se con su cuen a de Facebook edi igiéndolo a su
aplicación na i a pa a au en ica se.
• Inicia sesión
1. Pa a inicia sesión el usua io debe á iden i ica se con su email y con aseña
co espondien e. En el caso de ya habe iniciado sesión an e io men e, el inicio de sesión
se á au omá ico al inicia la aplicación (siemp e y cuando el usua io no haya ce ado su
sesión).
2. El sis ema se enca ga á de alida y pe mi i o denega el acceso a la aplicación.
3. El sis ema mos a á un mensaje de e o en el caso de que la alidación no sea co ec a.
4. En el caso de que la alidación sea co ec a, se mos a á un mensaje de bien enida al
usua io y se le edi igi á a la pan alla p incipal.
5. Se pe mi e al usua io inicia sesión con su cuen a de Facebook edi igiéndolo a su
aplicación na i a pa a au en ica se.
6. Inicia sesión a a és de una cuen a de Google Plus.
7. Inicia sesión a a és de una cuen a de Twi e .
8. Si no se dispone de conexión a in e ne y exis e una sesión abie a p e iamen e, al inicia
la aplicación después de 15 segundos se mos a á un mensaje de ‘Sin conexión’.
• Solici ud de cambio de con aseña
1. Se pe mi e al usua io cambia la con aseña suminis ando la di ección email inculada.
2. En el caso de se una di ección email álida egis ada, se no i ica á al usua io a a és
de un mensaje pa a que comp ueba su co eo elec ónico.
3. El sis ema mos a á un mensaje de e o en el caso de in oduci una di ección email
in álida.
• Cie e de sesión
1. Cualquie usua io de la aplicación debe pode inaliza su sesión en la aplicación
median e un bo ón que indique "Ce a sesión".
2. En el caso de que el usua io pulse el bo ón de ce a sesión, el sis ema mos a á un
mensaje pa a asegu a se de que el usua io ealmen e quie e ce a sesión, pe mi iendo
acep a o cancela .
3. El usua io se á edi igido a la po ada sin es a logueado con un mensaje que le indique
que ha ce ado su sesión.
Alexande Reyes Sánchez - MusicFac
20
• Na egación aplicación
1. Visualiza la lis a de canciones compa idas po usua ios a los que sigues.
2. Añadi a ‘like’ y gua da la canción en nues a biblio eca de ‘me gus a’.
3. Deshace ‘like’ en una canción y elimina la de la biblio eca de ‘me gus a’.
4. Repos ea o compa i una pis a de audio a us seguido es.
5. Deshace el ‘ epos ’ de una pis a de audio.
6. Comen a una pis a conc e a.
7. Elimina comen a ios p opios (desliza hacia la izquie da).
8. C ea lis as de canciones públicas o p i adas.
9. Ag ega canciones a una lis a ya exis en e.
10. Mos a mensaje de e o en caso de que se quie a ag ega una canción p i ada a una
lis a pública.
11. Compa i el í ulo y audio de la canción a a és de las edes sociales.
12. Rep oduci canción.
13. Usa ep oduc o en segundo plano (media no i ica ions).
14. Ve his o ial de ep oducción.
15. Busca pis as/usua ios.
16. Visualiza lis a de canciones que nos gus an.
17. Ve pe iles de usua ios incluido el nues o.
18. Segui a un usua io.
19. En ia no i icación de seguimien o al usua io seguido.
20. Deja de segui a un usua io.
21. Ve lis a de canciones subidas po el usua io en su pe il (sólo públicas).
22. Las pis as p i adas que hayamos subido sólo pod án se isualizadas en nues o pe il.
23. Ve lis as c eadas po el usua io en su pe il (sólo públicas).
24. Las lis as p i adas que hayamos c eado sólo pod án se isualizadas en nues o pe il.
25. Ve canciones den o de cada lis a.
26. Ve usua ios seguidos/seguido es.
27. Mos a mensaje de a iso/con i mación al compa i una canción decla ada como
p i ada.
28. Subi pis a de audio a la nube.
29. Cancela p og eso al subi pis a de audio
30. Elimina pis a de audio p opia en cascada (bo a dependencias)
31. Valida o ma o de la pis a de audio.
32. Ve endencias según es ilo de música.
33. Ve no i icaciones de quién ha comenzado a segui e.
34. Con igu a las no i icaciones eme gen es.
Alexande Reyes Sánchez - MusicFac
21
Requisi os no uncionales
Requisi os complemen a ios o a ibu os de calidad. Especi ican c i e ios que juzgan ope aciones
del sis ema en luga de su compo amien o ( equisi os uncionales).
• Rendimien o
1. Una ez iniciada la aplicación y ca gado los da os, se espe an iempos de espues a no
supe io es a un segundo al na ega po la aplicación y pa a pe iciones a la base de da os,
depende á en g an medida de la can idad de in o mación que se solici e.
2. Los cálculos que se ealicen en la aplicación no suponen demasiada ca ga pa a el
disposi i o po lo que, en es e sen ido, el endimien o se á óp imo.
El iempo de inicio se e á a ec ado, pues o que la elocidad al ejecu a la aplicación es uno
de los equisi os que no se log a con aplicaciones híb idas. És as al inicia le an an un
na egado e inician la aplicación, po ello se demo a a di e encia de las aplicaciones na i as.
• In e az y usabilidad
1. La aplicación debe cons a de una in e az sencilla, a ac i a e in ui i a. De al o ma que
su uso no suponga un impedimen o o es ue zo al usua io a la ho a de hace uso de la
aplicación.
2. Se p esen a á un menú de na egación sencillo donde el usua io encuen e sa is echas
sus consul as y cómodo su uso.
3. Los da os se mos a án es uc u ados pa a que el usua io encuen e ácilmen e lo que
desea.
4. Se da á acilidad pa a lee y ellena los o mula ios.
• Man enibilidad, disponibilidad y po abilidad
1. La aplicación es a á capaci ada pa a, bajo de e minadas condiciones de uso, conse a
o es au a su es ado ope a i o.
2. Disponibilidad pa a disposi i os mó iles (sma phones o able s) con los sis emas
ope a i os comunes (And oid, iOS).
3. Se á necesa io dispone de una conexión a in e ne , ya sea po Wi i o po a i a de da os.
• Segu idad
1. Pa a pode usa las uncionalidades que o ece la aplicación es necesa io au en ica se.
2. Si el usua io no cie a su sesión, és a se man end á abie a pa a u u os usos de la
aplicación. De es a mane a, el usua io no end á que ol e a in oduci sus c edenciales.
3. Al egis a se un usua io, la con aseña se á ci ada.
4. Al cambia la con aseña, ambién se ci a á la nue a con aseña.
• Escalabilidad y concu encia
1. La aplicación se diseña á pa a que sea posible inclui nue as uncionalidades sin pe de
calidad en los se icios o ecidos.
2. Los p ocesos a la ho a de subi da os a la nube se ejecu a án concu en emen e.
Alexande Reyes Sánchez - MusicFac
28
Funcionalidades
Den o de las uncionalidades de nues a aplicación, hay que e lexiona cuáles podemos desa olla
y cuáles no. Siemp e usando medios líci os, po lo que debemos ene cla o que lo que no se puede
hace o line o a és de campañas de ma ke ing adicional, no se pod á hace desde nues a
aplicación.
De echos p opios y de e ce os
Debemos con a con las espec i as licencias de los ecu sos que u ilicemos, ya sean lib e ías de
p og amación, bases de da os, elemen os g á icos, canciones, ex os, imágenes. En nues o caso,
debemos hace hincapié en es e aspec o al usa algunas canciones e imágenes pa a p oba nues a
aplicación. También es ecomendable lee las condiciones de uso pa a e i a p oblemas, ya que en
algunas ocasiones (no es el caso pa a un abajo de in de g ado), esos ecu sos excluyen el uso
come cial y no pod íamos u iliza los en el desa ollo de aplicaciones. Pa a e mina , es
ecomendable p o ege u abajo una ez hayas inalizado de desa olla la aplicación pa a e i a
plagios, copias.
Licencia y condiciones de uso
Como hemos señalado an e io men e, debemos añadi condiciones y licencias de uso que el usua io
debe acep a pa a pode hace uso de la aplicación. En las condiciones legales debe emos hace una
adecuación a la no ma i a y, además, pode eximi nos de las esponsabilidades que podamos, pa a
así e i a que nos eclamen po el mal uso que se hagan de ellas. Si su adecuación a la ealidad de la
aplicación y su ajus e a la legislación igen e son los co ec os, se á la mejo de ensa posible en caso
de cualquie eclamación. Po ello, la acep ación p e ia po el usua io es imp escindible.
In o mación y pe misos
Pa a es e apa ado, al a a se de aplicaciones que se ins alan y ejecu an en disposi i os mó iles,
esul a bas an e impo an e se cla os y explíci os al solici a pe misos al usua io. No malmen e,
cualquie aplicación mó il a a necesi a accede a los con ac os de la agenda o a con enidos del
mó il, ya sea po cesión de da os, compa i con enidos. Más adelan e, en el apa ado 3.4.4 Ionic
Na i e y Apache Co do a/PhoneGap, habla emos en p o undidad sob e es os pe misos a la ho a de
inicia nues a aplicación po p ime a ez.
Polí ica de Cookies
La necesidad de acep ación de las cookies es an impo an e en páginas web como en disposi i os
mó iles a la ho a de desca ga aplicaciones. Se debe á es ablece un a iso in o ma i o con la
in o mación básica sob e qué son las cookies y la inalidad de és as. Es a b e e in o mación edi igi á
al usua io a la in o mación comple a con odos los aspec os que exige la ley de polí ica de cookies.

Alexande Reyes Sánchez - MusicFac
29
In o ma al usua io
En gene al, una g an pa e de las aplicaciones mó iles pueden se conside adas como “se icios de
la sociedad de la in o mación”. Po ello, hay que cumpli con las obligaciones que la legislación
implica pa a es os se icios. La p incipal obligación es la de in o ma a los usua ios de los aspec os
ma cados po la ley, que se hace comúnmen e a a és de ex os en las secciones sob e las
condiciones legales.
Es os apa ados p o een al usua io de in o mación de de echos de au o , condiciones de uso,
polí ica de p i acidad. Además, se incluyen aspec os como in o mación de la emp esa, de con ac o,
sucu sales, exención de esponsabilidad mencionada an e io men e.
Segu idad
La segu idad en las aplicaciones mó iles es un ema p io i a io, pues o que la mayo pa e de ellas
gua dan in o mación pe sonal de sus usua ios. Uno de los aspec os pa a ene en cuen a es el ci ado
de las con aseñas. En nues o caso, es a labo es á delegada a Fi ebase que ges iona las cuen as de
usua io.
Publicidad
La mone ización de la mayo ía de las aplicaciones g a ui as puede p o eni de dis in as écnicas,
algunas más luc a i as que o as. Siemp e es ecomendable escoge un sis ema en unción de las
u ilidades y los ipos de aplicaciones mó iles.
Sin emba go, po egla gene al es á cada ez más ex endido el uso de publicidad pa a gene a los
ing esos. Aunque es o almen e líci o que una aplicación incluya publicidad, és a debe á apa ece
siemp e iden i icada como al pa a e i a posibles p oblemas.
Alexande Reyes Sánchez - MusicFac
30
3| Diseño e implemen ación
En el p esen e capí ulo se desc ibe odo el p oceso de diseño de la aplicación. Se ha ealizado un
diseño que aba ca odos los equisi os desc i os en el apa ado 2.2 Requisi os. El diseño p opo ciona
una idea comple a del so wa e desa ollado en el p oyec o. Pa a ello, di idi emos es a sección en:
3.1 Alcance de la implemen ación.
3.2 Diseño a qui ec ónico.
3.3 Modelo de la base de da os.
En cuan o a la ase de implemen ación del diseño, du an e el desa ollo del p oyec o hemos usado
el sis ema ope a i o Ubun u 16.04 LTS, basado en GNU/Linux y dis ibuido como so wa e lib e.
Como edi o de código uen e se ha u ilizado Visual S udio Code, lige o pe o po en e que se ejecu a
en el esc i o io y es á disponible pa a Windows, macOS y Linux. Además, iene con sopo e
inco po ado pa a Node.js, Ja aSc ip , TypeSc ip .
3.1 ALCANCE DE LA IMPLEMENTACIÓN
Se ha desa ollado un p o o ipo de aplicación cuya uncionalidad es alida las p incipales ideas que
hemos especi icado en el análisis y diseño expues o an e io men e. Con el obje i o de adqui i los
conocimien os básicos sob e las ecnologías que hemos es ado usando, de las cuales habla emos
más adelan e en la sección denominada 3.4 Tecnologías.
Den o de las ca ac e ís icas implemen adas podemos des aca las siguien es, que cumplen con la
mayo ía de equisi os especi icados p e iamen e.
Al inicia la aplicación nos encon amos con una página de inicio en la que podemos egis a nos o
inicia sesión con una cuen a c eada p e iamen e a a és de un pequeño o mula io p o egido con
una se ie de alidaciones. También, exis e la posibilidad de egis a nos/inicia sesión con Facebook
de una o ma más ápida.
En el caso de que el usua io aya a inicia sesión con su cuen a y no ecue de la con aseña, puede
solici a el cambio de és a in oduciendo su co eo elec ónico en el apa ado ‘¿Has ol idado u
con aseña?’. Pos e io men e, se á no i icado a a és de su clien e de email con las ins ucciones
co espondien es pa a ealiza el cambio de con aseña.
Alexande Reyes Sánchez - MusicFac
31
La aplicación es á desa ollada pa a que, si el usua io la cie a en cualquie momen o y no ha ce ado
su sesión, se gua da á dicha sesión al inicia de nue o la aplicación pa a así e i a ol e a in oduci
de nue o las c edenciales.
Una ez den o de la aplicación, el usua io pod á busca en el menú co espondien e (in ui i o
g acias a los iconos incluidos), a is as y/o canciones que o os usua ios han publicado. De cualquie
modo, podemos il a pa a busca canciones o usua ios. En el caso de que ya conozcamos al a is a,
podemos segui lo de o ma ápida en el mismo buscado o isi a su pe il y escucha algunas
canciones publicadas po él mismo. Al segui a un usua io, en ia emos una no i icación que se le
mos a á al usua io en cues ión si és e iene la sesión ac i a. Como hemos indicado an es, ambién
es posible busca canciones pa a e su au o y pode añadi lo a la lis a de seguidos. El obje i o de
segui a dis in os usua ios/a is as es pode e de o ma más amena sus publicaciones compa idas
en nues o ‘Home’. En iéndase como ‘publicación compa ida’ cualquie canción que haya sido
subida como pública y el usua io al que seguimos la ha compa ido, no son necesa iamen e
canciones subidas po el mismo au o . De es a o ma, a o ecemos la dis ibución de música y
aumen amos exponencialmen e la apidez con la que llega a los usua ios egis ados en nues a
aplicación. Pos e io men e, habla emos sob e es e mecanismo denominado ‘ epos s’.
Pa a apoya las canciones disponemos del clásico bo ón de ‘me gus a’, el cual cumple dos unciones
p incipales en nues a aplicación:
• Añadi la canción a nues a lis a de ‘me gus a’ pa a pode escucha la en cualquie o o
momen o de mane a más di ec a y o denada.
• Ayuda a los usua ios a is as que se dedican al mundo de la música a ene una lige a idea
de las endencias musicales en auge.
Al lado del bo ón ‘like’ enemos el bo ón ‘ epos ’ que hemos mencionado an es. La unción de es e
bo ón es compa i la canción a us seguido es pa a que la ean au omá icamen e en su di ec o io
p incipal ‘Home’. A su ez, es e usua io seguido pod á compa i la a sus seguido es y así
sucesi amen e. Pa a el caso en el que hayamos subido una canción como p i ada y que amos luego
compa i la, se nos a isa á pa a con e i la en pública.
O a ca ac e ís ica habi ual es la de pode ealiza comen a ios. Pa a cada canción pública es posible
e los comen a ios de los usua ios o denados po echa y añadi comen a ios p opios. En caso de
que e elimina cualquie comen a io p opio, es posible hace lo simplemen e deslizando el dedo en
la pan alla hacia la izquie da pa a mos a la opción de elimina . Conjun amen e, desde aquí
podemos na ega a la is a de pe il de cualquie usua io que haya comen ado.
Alexande Reyes Sánchez - MusicFac
32
Luego, enemos la opción de añadi la canción a una lis a c eada p e iamen e o c ea una nue a con
esa canción. Es a uncionalidad es ú il pa a aquellos usua ios que quie an man ene su biblio eca
o denada según el es ilo de música, au o , … Po o o lado, las pis as se o dena án den o de cada
lis a po an igüedad desde la más an igua has a la más nue a. Y, además, exis e la posibilidad de
c ea lis as p i adas pa a nues o uso y dis u e. De cualquie o ma, como es lógico, la aplicación no
nos deja á inclui una canción p i ada a una lis a que haya sido c eada como pública.
Además, es posible compa i el í ulo y audio de una canción a a és de las edes sociales. Al no
dispone de un dominio pa a la aplicación, el enlace compa ido edi igi á al usua io a donde es á
almacenado el audio y así al menos pode escucha lo.
La ep oducción de la canción es á disponible en la is a ampli icada de la pis a, donde podemos
ealiza cualquie a de las acciones expues as p e iamen e y, ambién, isi a el pe il público del
usua io que ha subido dicha canción.
En los pe iles, incluido el nues o, podemos e la o o de pe il o una po de ec o jun o con la
in o mación básica de pe il y, jus o al lado, el bo ón de ‘Segui ’ o ‘Siguiendo’. Pos e io men e,
podemos e las canciones p opias que hemos o ha subido el usua io en cues ión y, jus o al lado,
disponemos de las lis as c eadas an o públicas como p i adas. Lógicamen e, las lis as p i adas solo
pod án se is as po el usua io que las c eó al igual que las canciones. Finalmen e, podemos e los
usua ios seguidos y los seguido es de o ma que podemos na ega inde inidamen e en e pe iles.
Sin emba go, suponiendo que el usua io quie a ol e al menú p incipal, dispone de un bo ón pa a
e ocede au omá icamen e.
Como ca ac e ís ica des acada y undamen al, enemos el o mula io pa a subi las canciones desde
nues o mó il a la base de da os en la nube que es amos usando pa a desa olla la aplicación. Pa a
empeza , disponemos de la opción de es ablece una po ada pa a nues a publicación o deja la
que la aplicación nos o ece po de ec o. Si decidimos añadi una imagen nue a, podemos
selecciona una exis en e desde la gale ía o ab i la cáma a del mó il pa a e ec ua una ac ual. De
cualquie modo, podemos p e isualiza la en el mismo o mula io. Po consiguien e, se á necesa io
añadi el a chi o de audio gua dado en el disposi i o mó il. Pa a ello, p ime o end emos que
acep a los pe misos opo unos pa a pode accede a los eposi o ios/ca pe as del sis ema ope a i o
del sma phone. Una ez seleccionado el a chi o de audio, el sis ema alida á su o ma o y, en caso
de se acep ado, e emos la u a especí ica en el o mula io pa a pode e i ica que se ha
seleccionado una canción. Sólo nos queda añadi un í ulo de canción, una e ique a de las
p eseleccionadas que iden i ique el ipo de música y si que emos que la canción sea pública
(compa i la a nues os seguido es) o p i ada. Con odo es o y las alidaciones pe inen es, se
habili a á el bo ón pa a subi la pis a a la base de da os. Es o puede a da a ios segundos o incluso
minu os, dependiendo en g an medida de la elocidad de nues a ed y del amaño del a chi o de
audio ya que, en caso de subi alguna imagen, és a la hab emos edimensionado a un amaño
Alexande Reyes Sánchez - MusicFac
33
p ác ico y ag adable isualmen e que no a ec e al endimien o de la aplicación. Un indicado de
p og eso nos man end á in o mados de la subida pe inen e al audio y a la po ada en su caso.
En cuan o a las endencias de las que hablamos en el apa ado del bo ón ‘me gus a’, podemos e
un g á ico ci cula en el que se encuen an los po cen ajes de ‘me gus a’ de cada e ique a de es ilo
de música disponible en la aplicación. El obje i o de es e g á ico es ilus a a los a is as cómo an
a iando los gus os musicales, y omen no a de ello pa a sus pos e io es p oducciones. De es a
o ma, es posible obse a qué ipo de música se demanda más, omando como mues a a los
usua ios egis ados en la aplicación.
También, podemos e un lis ado de las no i icaciones ecibidas po los usua ios que nos han seguido
y accede al pe il. Las no i icaciones eme gen es las podemos ac i a /desac i a en la sección de
con igu ación de no i icaciones. Una ez gua dados los cambios, se nos pedi á que einiciemos la
sesión pa a es ablece la nue a con igu ación.
Po úl imo, el usua io pod á ce a su sesión y con i ma dicha acción a a és de un mensaje de
ale a.
3.2 DISEÑO ARQUITECTÓNICO
Ilus ación 11 - Lenguajes que o man la a qui ec u a de Angula 7
El diseño a qui ec ónico de nues a aplicación sigue un modelo basado en componen es. Es o quie e
deci que la aplicación es a á compues a po un á bol de componen es que se u ilizan los unos a los
o os pa a la ob ención de los obje i os globales que se quie en alcanza .
La mayo ía de amewo ks mode nos usan es a a qui ec u a, que se ha demos ado que es la que
o ece un mejo código, más ácilmen e escalable y man enible.
7 Lenguajes que o man la a qui ec u a de Angula - Julio 2017

Alexande Reyes Sánchez - MusicFac
34
Los componen es es án pensados pa a, de mane a modula y encapsulada, esol e pequeños
p oblemas. Po ejemplo, puede habe componen es pa a implemen a un sencillo bo ón, pa a
selec o es de echas o en nues o caso, componen es pa a hace un sis ema de na egación po abs,
una ba a de p og eso, e c. In eg ando componen es somos capaces de cons ui aplicaciones
g andes y complejas. El amewo k que es amos usando, Ionic 2 nos o ece ya de base una can idad
muy g ande de componen es que son capaces de abaja pe ec amen e en disposi i os mó iles
con pan allas ác iles, pe o ob iamen e pa a el desa ollo de las aplicaciones necesi a emos
cons ui nues os p opios componen es que implemen en los compo amien os más especí icos de
nues o análisis.
Ionic 2 es á desa ollado sob e el amewo k de Ja aSc ip Angula . Lo que quie e deci que pa a el
desa ollo con Ionic 2 podemos apoya nos en odas las en ajas de desa ollo con Angula , lo que
nos pe mi i á con a con una excelen e es uc u a de p oyec o, el abajo con buenas p ác icas, uso
de pa ones de diseño de so wa e a iados, p incipalmen e MVC (Model View Con olle ), y po
supues o como se ha indicado an es una buena gama de componen es y di ec i as. De es a mane a,
usando Angula podemos ap o echa muchas u ilidades pensadas pa a un desa ollo más ápido y,
además, enemos la ce eza de dispone de un código más op imizado y de mayo endimien o,
adap ado pa a el momen o ac ual y el u u o.
El siguien e diag ama mues a la a qui ec u a de Angula :
Esquema 3 - Elemen os que con o man la a qui ec u a de Angula 8
8 Elemen os que con o man la a qui ec u a de Angula - Julio 2017
Alexande Reyes Sánchez - MusicFac
35
A con inuación, enuncia emos y desc ibi emos las p incipales pa es que con o man es a
a qui ec u a:
3.2.1 Módulos
Las aplicaciones en Angula son modula es y se conocen como ‘NgModules’. Cada aplicación Angula
iene al menos un módulo, que es el módulo aíz, denominado ‘AppModule’. La mayo ía de las
aplicaciones ienen a ios módulos, cada uno es un bloque dedicado a una a ea conc e a. En
nues o caso, hemos pa ido del módulo aíz sin c ea módulos nue os.
Un módulo es una clase con el deco ado @NgModule. Los deco ado es son unciones que
modi ican las clases Ja aSc ip . Angula posee a ios deco ado es que adjun an me ada os a las
clases. Cada módulo debe á es a decla ado en el iche o ‘app.module. s’ bajo el deco ado
@NgModule.
Las p opiedades más impo an es de ‘NgModule’ son:
• Decla a ions: Las clases de is a que pe enecen a es e módulo. Angula iene es ipos de
clases de is a: componen es, di ec i as y pipes.
• Impo s: O os módulos cuyas clases expo adas son necesa ias po los componen es de las
plan illas decla adas en es e módulo.
• Boo s ap: La is a p incipal de la aplicación, denominada componen e aíz, que aloja odos
los o os pun os de is a. Sólo el módulo aíz debe es ablece es a p opiedad.
• En yComponen s: Pa a componen es añadidos dinámicamen e. Al añadi los, Angula
comunica al compilado de plan illas sin conexión que los compile.
• P o ide s: C eado es de los se icios que es e módulo u iliza (son accesibles en oda la
aplicación).
3.2.2 Componen es
Un componen e con ola una pa e de lo que se mues a en la pan alla denominado is a. El
componen e in e ac úa con la is a a a és de una se ie de p opiedades y mé odos, en los que se
de ine la lógica de la aplicación.
Angula es capaz de c ea , ac ualiza y des ui componen es a medida que el usua io na ega po la
aplicación. La ac uación se puede da en de e minados momen os del ciclo de ida como, po
ejemplo, al inicializa la is a.
Alexande Reyes Sánchez - MusicFac
36
En nues a aplicación, exis en nume osos componen es que in e ac úan en e sí pa a el co ec o
uncionamien o de la misma. A con inuación, explica emos uno de los componen es que con o man
la aplicación y que hemos c eado desde ce o.
El componen e denominado ‘P og essBa ’, lo hemos c eado desde ce o pa a ap ende cómo se
desa olla un componen e pe sonalizado y adap a lo a la uncionalidad que que emos.
Básicamen e, se a a de una ba a de p og eso que nos indica el es ado de subida de un a chi o a
nues a base de da os en la nube de Fi ebase. Cuando subimos un a chi o (audio y/o imagen)
gua damos el es ado ac ual en una a iable que almacena el po cen aje de subida. Es e po cen aje
lo calculamos a a és de un snapsho (ins an ánea) que incluye los by es subidos y el o al de by es
que se p e enden subi .
De es a mane a, cap u amos el es ado cambian e de esa a iable y se la pasamos como pa áme o
de en ada al nue o componen e. El componen e iene su p opia plan illa HTML que simplemen e
mues a una is a con una ba a cuya longi ud cambia con o me a ía la a iable cap ada como
pa áme o de en ada.
Usando el selec o que hemos decla ado en el componen e, podemos usa es a ba a de p og eso
en cualquie luga de nues a de aplicación de una o ma escalable y siguiendo el p incipio
undamen al de desa ollo de so wa e DRY (Don’ Repea You sel ).
El es o de componen es se limi an a ecoge in o mación de la base de da os, ans o ma la y
mos a la al usua io pa a que és e pueda isualiza la e in e ac ua con ella. De cualquie modo,
ambién se enca gan de en ia in o mación a la base de da os pa a egis a nue os usua ios o pa a
e i ica da os, como puede se a la ho a de inicia sesión.
3.2.3 Plan illas
Las plan illas son agmen os de HTML con e ique as especiales de Angula e Ionic 2. Es as plan illas
indica án cómo se debe ep esen a el componen e. Se a a de código HTML al que se le ha añadido
de e minadas e ique as y a ibu os especiales, an o de Angula como de Ionic en nues o caso. Es
posible añadi e ique as que ep esen an un componen e dis in o. Como, po ejemplo, el
componen e ‘P og essBa ’ bajo el di ec o io ‘componen s’ desc i o p e iamen e, abaja sob e sus
p opios da os de en ada y iene su p opia plan illa HTML.
Alexande Reyes Sánchez - MusicFac
37
3.2.4 Me ada os
Los me ada os con ienen la in o mación que Angula necesi a pa a p ocesa una clase. Pa a adjun a
me ada os a una clase es necesa io usa el deco ado @Componen y pasa le un obje o que lo
con igu e. El deco ado @Componen i á encima de la clase expo ada y como mínimo le end emos
que pasa el nomb e que ecibi á el selec o y qué plan illa debe u iliza . La plan illa, los me ada os
y los componen es desc iben una is a/módulo como se puede obse a en la igu a al comienzo de
es a sección.
3.2.5 Da a binding
El ‘da a binding’ es el enlace de la in o mación que enemos con lo que se mos a á en la plan illa
HTML. Angula es capaz de p opo ciona nos una o ma sencilla y muy limpia de a a es e enlace
de in o mación. Hay cua o o mas en las que se p oduce el ‘da a binding’:
• Desde el componen e hacia el DOM (Modelo de Obje os del Documen o) median e {{ alo }}
denominado in e polación. En es e caso se es á ecupe ando di ec amen e el alo de una
a iable que exis e en el componen e.
• Desde el componen e hacia el DOM median e [p opiedad] = “ alo ” denominado ‘p ope y
binding’. Igual que el an e io , pe o aho a se ecupe a como un a ibu o de una e ique a.
• Desde el DOM hacia el componen e median e (e en o) = “manipulado ” denominado ‘e en
binding’. En es e caso se puede llama a un mé odo del componen e a a és de un e en o
de e minado y pasa un alo .
• En ambos sen idos con [(ngModel)] = “p opiedad”, denominado ‘Two-way da a binding’ o
coloquialmen e ‘banana in a box’. Es o asocia una p opiedad y un e en o de una sola ez.
Cualquie cambio que haga el usua io se pasa á al componen e y ice e sa.
El ‘da a binding’ es impo an e pa a la comunicación en e la plan illa y el componen e, y ambién
es impo an e pa a la comunicación en e los componen es p incipales y los secunda ios como
usamos en ‘P og essBa ’.
3.2.6 Di ec i as
Las plan illas de Angula son dinámicas. El DOM se a ans o mando de acue do con las
ins ucciones pasadas en las di ec i as. De en e los p incipales ipos de di ec i as enemos:
• Es uc u ales: Son di ec i as que al e an el diseño median e la c eación, eliminación y
sus i ución de elemen os en el DOM. Po ejemplo, enemos las más habi uales que son la
di ec i a *ngFo (lógica de epe ición) y la di ec i a *ngI (lógica de condición).
Alexande Reyes Sánchez - MusicFac
44
• Usua ios: Es a es uc u a es la más amplia, pe o no quie e deci que sea más compleja que
las demás. Las elaciones se es ablecen de la misma mane a que las an e io es.
Ilus ación 16 - Es uc u a JSON pa a los usua ios

Alexande Reyes Sánchez - MusicFac
45
3.3.2 Au en icación
En cuan o a la au en icación en Fi ebase, la mayo ía de las aplicaciones deben econoce la iden idad
de un usua io. El econocimien o de la iden idad de un usua io pe mi e a una aplicación gua da
da os de és e de mane a segu a en la nube y b inda la misma expe iencia pe sonalizada en odos
sus disposi i os.
Fi ebase Au hen ica ion p opo ciona se icios de backend, SDK áciles de usa y biblio ecas ya
hechas pa a au en ica usua ios en la aplicación. Admi e au en icación con con aseña, p o eedo es
de iden idades ede adas popula es como Google, Facebook, Twi e y más opciones.
Fi ebase Au hen ica ion se in eg a es echamen e con o os se icios de Fi ebase y ap o echa
es ánda es indus iales como ‘OAu h 2.0’. És e es un p o ocolo de au o ización que pe mi e que los
usua ios au o icen a e ce os pa a accede a su in o mación. Po lo an o, se puede in eg a
ácilmen e con nues o backend pe sonalizado.
Pa a inicia la sesión de un usua io en nues a aplicación, p ime o ecibimos las c edenciales de
au en icación de és e. Es as c edenciales pueden se la di ección de co eo elec ónico y con aseña
del usua io o un oken ‘OAu h’ de un p o eedo de iden idades ede adas. Una ez enemos las
c edenciales, enemos que pasa las al Fi ebase Au hen ica ion SDK. Luego, se e i ica án dichas
c edenciales y se de ol e á una espues a al clien e.
Después del acceso exi oso, ya es posible accede a la in o mación de pe il básica del usua io y
con ola el acceso po pa e del usua io a los da os almacenados en la Fi ebase Real ime Da abase.
También se puede usa el oken de au en icación p opo cionado pa a e i ica la iden idad de los
usua ios en nues os se icios de backend. Aunque a medida que hemos ido a anzando con la
aplicación, se ha op ado po combina es e acceso con o a he amien a que nos pe mi e almacena
los da os básicos de usua io de una o ma más e icien e. Se a a de ‘Ionic S o age’, en la sección
3.4.6 Ionic S o age habla emos sob e ella.
De o ma p ede e minada, los usua ios au en icados pueden lee da os y esc ibi los en la Fi ebase
Real ime Da abase y el Fi ebase S o age, del cual habla emos a con inuación. Es posible con ola el
acceso de dichos usua ios modi icando las eglas pa a cada uno. En cualquie caso, pa a las
uncionalidades que o ece nues a aplicación nos bas an las eglas po de ec o.
Un usua io de Fi ebase iene un conjun o ijo de p opiedades básicas (un ID único, una di ección de
co eo elec ónico) almacenado en una base de da os de usua ios. Nues o o mula io de egis o
solici a más in o mación sob e los usua ios que se egis an (po ejemplo, el país/ egión). No
podemos ag ega o as p opiedades al obje o de usua io de Fi ebase di ec amen e. En luga de ello,
end emos que almacena las p opiedades adicionales en nues a Fi ebase Real ime Da abase.
Alexande Reyes Sánchez - MusicFac
46
La p ime a ez que un usua io se egis a en la aplicación, los da os de su pe il se comple an con la
in o mación disponible:
• Si el usua io se egis a con una di ección de co eo elec ónico y una con aseña a a és
del o mula io, sólo se comple a la di ección de co eo elec ónico. Sin emba go, como
hemos indicado an e io men e, es posible añadi nue os campos en nues a Fi ebase
Real ime Da abase como son el nomb e de usua io, la egión o país y la imagen de pe il que
se subi á al Fi ebase S o age.
• Si el usua io se egis a con un p o eedo de iden idades ede adas como Facebook o
Google, se usa la in o mación de la cuen a disponible a a és del p o eedo pa a comple a
el pe il de usua io de Fi ebase.
Cuando un usua io se egis a o accede, pasa a se el usua io ac ual de la ins ancia de au en icación.
La ins ancia de au en icación de Fi ebase conse a el es ado del usua io. Po lo an o, al ac ualiza se
la página (en un na egado ) o einicia la aplicación no se pie de la in o mación del usua io
( emembe me).
Cuando el usua io cie a la sesión, la ins ancia de au en icación deja de conse a una e e encia al
obje o de usua io y con ello el es ado de és e. Deja de habe usua io ac ual y la lógica de la aplicación
se enca ga de edi igi al usua io a la página de inicio.
Pa a analiza el ciclo de ida del usua io con un seguimien o del es ado ac ual de la ins ancia de
au en icación de Fi ebase usa emos ecep o es denominados ‘obse ables’ en Ja aSc ip .
3.3.3 S o age
Fi ebase S o age o ece la posibilidad de subi y desca ga a chi os de o ma segu a,
independien emen e de la calidad de la ed. Puedes usa lo pa a almacena imágenes, audio, ídeo
y o o con enido gene ado po el usua io. Fi ebase S o age es á espaldado po Google Cloud
S o age, un se icio po en e, simple y en able de almacenamien o de obje os.
Los desa ollado es usan el SDK Fi ebase S o age pa a subi y baja a chi os di ec amen e de los
clien es. Si la conexión de ed no es buena, el clien e puede ol e a in en a la ope ación jus o
donde la dejó, lo que pe mi e aho a iempo y ancho de banda a los usua ios. En nues o caso,
subimos imágenes al S o age cuando nos amos a egis a si añadimos una imagen p opia o cuando
subimos un a chi o de audio o imagen de po ada pa a las canciones.
Alexande Reyes Sánchez - MusicFac
47
Fi ebase S o age almacena us a chi os en una cube a de Google Cloud S o age, lo que signi ica que
puedes accede a ellos a a és de Fi ebase y de las APIs de Google Cloud. Es o e b inda la
lexibilidad necesa ia pa a subi y desca ga a chi os de clien es mó iles a a és de Fi ebase y
ealiza p ocesamien os en el se ido , como il ado de imágenes. Fi ebase S o age escala
au omá icamen e, lo que signi ica que no necesi as mig a de Fi ebase S o age a Google Cloud
S o age ni a ningún o o p o eedo .
Además, Fi ebase S o age se in eg a pe ec amen e con Fi ebase Au hen ica ion pa a iden i ica
usua ios y p opo ciona lenguaje de segu idad compa a i o que e pe mi e accede a con oles en
a chi os indi iduales o g upos de a chi os, de modo que puedas hace que los a chi os sean an
públicos o p i ados como desees.
3.4 TECNOLOGÍAS
En es e apa ado se enume an el es o de las di e en es he amien as y ecnologías u ilizadas
du an e el desa ollo del p oyec o. Habla emos en p o undidad sob e el amewo k de aplicaciones
híb idas Ionic 2, ya que las o as dos ecnologías undamen ales, Angula y Fi ebase, las hemos
desc i o en los apa ados an e io es de 3.2 Diseño a qui ec ónico y 3.3 Modelo de la base de da os,
espec i amen e.
3.4.1 HTML5, Ja aSc ip , CSS3 y Sass
Una aplicación híb ida es á desa ollada en base a las ecnologías web: HTML (como lenguaje pa a
c ea y ep esen a una is a) + Ja aSc ip (como lenguaje in e p e ado pa a ope aciones) + CSS
(como lenguaje de es ilo). Son como cualquie o a aplicación de las que puedes ins ala a a és de
las iendas de aplicaciones pa a cada sis ema, po lo que en p incipio los usua ios inales no
pe cibi án la di e encia con espec o a o os ipos de ap oximaciones di e en es como las
aplicaciones na i as ( e Anexo B pa a más in o mación sob e las aplicaciones híb idas).
Ilus ación 17 - Logos Lenguajes HTML5, Ja aSc ip y CSS3 10
10 Logos Lenguajes HTML5, Ja aSc ip y CSS3 - Julio 2107
Alexande Reyes Sánchez - MusicFac
48
11Además, Ionic inco po a Sass, un lenguaje de hoja de es ilos que es
aducido a CSS, con el que se pueden hace diseños a anzados pa a odo
ipo de es ilos y gus os. En el iche o ‘ a iables.scss’ bajo el di ec o io
‘ heme’, podemos pe sonaliza la apa iencia de la aplicación a a és de
a iables que se pueden sob esc ibi .
3.4.2 TypeSc ip
12O a cosa que iene dada po el desa ollo de Angula es el uso del
lenguaje TypeSc ip . TypeSc ip es Ja aSc ip , pe o con añadidos pensados
pa a mejo a el abajo po pa e de los desa ollado es, inc emen ando
la p oduc i idad.
La mayo apo ación de TypeSc ip al lenguaje Ja aSc ip es la posibilidad
de de inición de ipos pa a las a iables, pe o en gene al apo a mucho
más y además nos pe mi e usa odas las mejo as de ES6 y algunas de ES7
en las aplicaciones. ES o ECMASc ip es el es ánda que de ine cómo debe
se el lenguaje Ja aSc ip .
No debemos pensa en TypeSc ip como un p oblema po se algo que debemos ap ende de nue o.
TypeSc ip es en ealidad Ja aSc ip , po lo que no signi ica ap ende un nue o lenguaje, sino ag ega
algunas cosas al que ya conoces, cosas que en de ini i a e an a ayuda du an e la e apa de
desa ollo y a la ho a de man ene las aplicaciones en el u u o.
TypeSc ip equie e una anspilación del código, de modo que aquel código que esc ibes en
TypeSc ip se con ie a en código Ja aSc ip capaz de ejecu a se en cualquie na egado . Esa
anspilación la ealiza Ionic 2 po debajo, po lo que no ep esen a un p oblema pa a el
desa ollado .
11 Logo Sass - Julio 2017
12 Logo TypeSc ip - Julio 2017
Ilus ación 19 - Logo
TypeSc ip
Ilus ación 18 - Logo
Sass
Alexande Reyes Sánchez - MusicFac
49
3.4.3 Ionic 2
Como hemos indicado, es amos usando Ionic 2 como he amien a pa a desa olla la aplicación.
Pe o ¿po qué Ionic? A con inuación, jus i ica emos su elección.
Ilus ación 20 - Logo Ionic 2 13
Du an e el ap endizaje de es a ecnología, hemos enido que ap ende sob e odo Angula que
básicamen e hemos explicado en la sección an e io sob e el diseño a qui ec ónico. La pa e de Ionic
ha sido sencilla g acias a su documen ación o icial que incluye in inidad de uncionalidades con
a ios ejemplos que ilus an bas an e bien lo que hace cada componen e, api, plugins na i os, e c.
Ionic 2 hace uso de un SDK que nos ayuda a gene a las is as pa a cada sis ema ope a i o sin
necesidad de gene a un código pa a cada uno de ellos, lo cual inc emen a la e iciencia de un equipo
de abajo al in en a desa olla aplicaciones mó iles pa a dis in as pla a o mas.
Los componen es de Ionic 2 ya ienen adap ados al disposi i o de mane a es é ica. Quie e deci que,
cuando se compila una aplicación pa a iOS, el componen e se isualiza á de mane a di e en e que
cuando se compila pa a And oid. En And oid usa á ‘Ma e ial Design’ mien as que en iOS usa á las
guías de diseño de inidas po Apple. Sin emba go, es posible man ene , po ejemplo, el es ilo de
iconos que que amos pa a cada pla a o ma.
Es o es una en aja en sí, po que las pe sonas dis u a án de aplicaciones con una expe iencia de
usua io ce cana a la que es án acos umb ados en su elé ono y nos e i a a los desa ollado es la
necesidad de abaja más pa a consegui es e e ec o. Sin emba go, como au o es de las aplicaciones
con Ionic 2 ambién somos capaces de al e a el diseño de las aplicaciones, p opo cionando una
expe iencia de usua io especí ica y o iginal pa a nues a p opia aplicación.
13 Logo Ionic 2 - Julio 2017

Alexande Reyes Sánchez - MusicFac
50
El al o endimien o de Ionic 2 es una de las di e encias que lo deno an sob e sus compe ido es, ya
que es á cons uido con la mínima manipulación del DOM, con nada de código jQue y y con
acele aciones de ansiciones po ha dwa e. Se a a de una es upenda he amien a pa a la c eación
de aplicaciones híb idas so p enden es, pensada pa a ob ene esul ados de una mane a ápida y
con una meno in e sión económica.
3.4.4 Ionic Na i e y Apache Co do a/PhoneGap
14Ionic Na i e es un con enedo TypeSc ip pa a los
complemen os de Apache Co do a/PhoneGap que hacen que
la adición de cualquie uncionalidad na i a que necesi es
pa a u aplicación mó il sea ácil.
Es e con enedo en uel e las espues as en una ‘P omise’ o
en un ‘Obse able’, p opo cionando una in e az común pa a
odos los complemen os y asegu ando que los e en os na i os
ac i an la de ección de cambios en Angula .
Po lo an o, pa a accede a los componen es na i os del disposi i o, se usan plugins que nos
p opo ciona, p incipalmen e, Apache Co do a y Phonegap en algunos casos. Ac ualmen e, ambién
Ionic es p o eedo de algunos plugins pa a abaja con la pa e na i a del elé ono.
Aquí como na i o nos e e imos a elemen os como la cáma a, geolocalización, e c. Todos esos
elemen os se pueden usa desde las aplicaciones de Ionic a a és de los co espondien es plugins
na i os, que o man una especie de puen e en e el desa ollo con Ja aSc ip y el elé ono.
En es e apa ado, habla emos de los di e en es plugins usados en nues a aplicación.
Facebook
15Pa a egis a nos/inicia sesión en la aplicación a a és de nues a cuen a
de Facebook desde el disposi i o mó il, se á necesa io usa el plugin de
Co do a ‘co do a-plugin- acebook4’ pa a ob ene acceso a la aplicación
na i a de Facebook en iOS y And oid.
An es de odo, p ime o hay que inclui la aplicación en el po al de
desa ollado es de Facebook, en donde segui emos unos pasos guiados pa a
con igu a la aplicación. También se á necesa io habili a a Facebook en
Fi ebase como p o eedo de au en icación indicando el iden i icado de la
aplicación jun o con la cla e sec e a que nos ha gene ado Facebook en el paso an e io .
14 Logo Apache Co do a - Julio 2017
15 Logo Facebook - Julio 2017
Ilus ación 21 - Logo Apache Co do a
Ilus ación 22 -
Logo
Facebook
Alexande Reyes Sánchez - MusicFac
51
Po úl imo, pa a comple a la con igu ación, enemos que añadi una URI de edi eccionamien o de
‘OAu h’ a la con igu ación de la aplicación en Facebook. Es a URI nos la suminis a á Fi ebase en el
apa ado de au en icación al habili a a Facebook como p o eedo de inicio de sesión.
Came a
Es e complemen o de ine un obje o global que p opo ciona una API pa a cap u a imágenes con la
cáma a o elegi las de la gale ía de imágenes del disposi i o.
Como espues a exi osa a la llamada, la imagen se de uel e como una cadena que con iene la
imagen de la o o codi icada en Base64 o como una cadena que ep esen a la ubicación del a chi o
de la imagen en el almacenamien o local ( e Anexo C pa a más in o mación sob e es e plugin)
Una ez enemos la imagen, en nues o caso en base64, la amos a publica en el S o age de
Fi ebase. Pa a ello, enemos que ans o ma la a ipo ‘blob’ o ‘ ile’ que son los o ma os que acep a
Fi ebase S o age. Una ez ans o mada, p ocedemos a subi la a la nube y, pos e io men e, añadi
su e e encia o URL de desca ga a la ‘Real ime Da abase’ pa a accede a ella a a és de las pe iciones
opo unas.
And oid Pe missions
Es e complemen o es á diseñado pa a admi i nue os mecanismos de con ol de pe misos de
And oid. Necesa io pa a accede a con enido alojado en el disposi i o mó il.
File Choose
Ab e el selec o de a chi os en And oid pa a que el usua io seleccione alguno. De uel e un a chi o
URI. Complemen o usado pa a selecciona algún a chi o de audio.
File Pa h
Es e complemen o pe mi e esol e la u a del sis ema de a chi os na i o pa a los URI de con enido
de And oid y se basa en el código de la biblio eca ‘File Choose ’. Usado pa a a a la u a del a chi o
de audio.
Na i e Audio
Es e complemen o de Co do a/PhoneGap pe mi e la simul aneidad ( ep oducción mul icanal), la
poli onía ( ep oducción de múl iples oces) y la la encia minimizada (median e caché) en
aplicaciones basadas en audio, ap o echando las API de audio na i as. Es á diseñado pa a juegos
mul ipla a o ma basados en HTML5 y aplicaciones de audio híb idas mó iles.
Alexande Reyes Sánchez - MusicFac
52
Una g an pa e pa a consegui que una aplicación mó il sea de al a calidad es p opo ciona
e oalimen ación inmedia a y ob ia pa a las acciones de usua io. Cuando un usua io ealiza alguna
acción, que á comunica se con ella de mane a que pe ciba que dicha acción ha enido éxi o. Esa
in o mación puede comunica se isualmen e, a a és del sonido o incluso a a és de una sensación
ísica como la ib ación.
Si has u ilizado la aplicación de Facebook, es p obable que hayas no ado que al usa la aplicación se
ep oducen a ios e ec os de sonido. Po ejemplo, a medida que cambiamos en e las pes añas, al
pulsa algún bo ón, e c.
En nues a aplicación, hemos ag egado e ec o de sonido al pulsa un bo ón de al mane a que se
usa á audio HTML5 es ánda po de ec o o audio na i o cuando la pla a o ma sea Co do a.
Al u iliza audio HTML5, el audio se ca ga al uelo po lo que hay un lige o, pe o no able e aso
an es de que el audio se ep oduzca. De lo con a io, cuando se u iliza audio na i o, el sonido es á
p eca gado y se puede ep oduci al ins an e.
Ac ion Shee
El complemen o ‘Ac ionShee ’ mues a una lis a na i a de opciones de las que el usua io puede
elegi . Usado pa a desplega opciones e e en es a una canción.
Social Sha ing
Es e complemen o pe mi e usa la en ana na i a del disposi i o mó il pa a compa i con enido.
Es posible compa i ex o, un enlace, imágenes u o os a chi os como pd . El asun o ambién es
compa ible, cuando la aplicación de des ino lo admi e.
Pe mi e compa i a chi os desde In e ne y el sis ema de a chi os local. Además, se puede
compa i di ec amen e con Twi e , Facebook u o as aplicaciones.
Phonegap Plugin Push
U ilizamos el complemen o Push de Phonegap pa a ecibi no i icaciones na i as. Al ins ala el
plugin, es necesa io p opo ciona una a iable SENDER_ID, que es el ID del emi en e FCM (Fi ebase
Cloud Messaging). Es a a iable la podemos ob ene desde el apa ado ‘Cloud Messaging’ de
con igu ación del p oyec o en Fi ebase.
O o de los equisi os es ene ins alado Cloud Clien pa a in e ac ua con los se icios de Ionic desde
nues a aplicación. Po consiguien e, enemos que acili a nues a cla e del se ido FCM a Ionic.
Vamos al apa ado de ce i icados en la con igu ación del p oyec o de Ionic y añadimos un nue o
pe il de segu idad e inse amos la cla e FCM.
Alexande Reyes Sánchez - MusicFac
53
3.4.5 Fi ebase No i ica ions
Fi ebase No i ica ions es un se icio g a ui o pa a desa ollado es de aplicaciones pa a disposi i os
mó iles que pe mi e en ia no i icaciones o ien adas a los usua ios.
Basada en Fi ebase Cloud Messaging y en el SDK FCM, Fi ebase No i ica ions o ece una opción pa a
una pla a o ma de no i icación lexible que equie a codi icación mínima pa a comenza y una
consola g á ica pa a en ia mensajes.
Fi ebase Cloud Messaging se ocupa del en u amien o y la en ega a los disposi i os de des ino.
Cuando la aplicación es á en segundo plano en el disposi i o de un usua io, las no i icaciones se
en egan en la bandeja del sis ema. Cuando un usua io hace clic en la no i icación, el lanzado ab e
la aplicación. Si se desea, ambién es posible ag ega adminis ación de mensajes del clien e pa a
ecibi no i icaciones cuando la aplicación ya es é en p ime plano.
En nues a aplicación, en iamos mensajes de no i icación usando el p o ocolo HTTP a a és de una
soli ud POST a la API de Fi ebase Cloud Messaging. De al mane a que, enemos que especi ica en
la cabece a el ipo de con enido y la cla e de au o ización que ob enemos en la con igu ación de
nues o p oyec o de Fi ebase, jun o con el cue po del mensaje donde i án los da os y los okens de
los clien es a los que que emos en ia la no i icación. En el siguien e esquema, se mues a de o ma
esumida el ciclo de uncionamien o.
16
Esquema 4 – Ciclo no i icaciones push
16 Ciclo no i icaciones push - Julio 2017
Alexande Reyes Sánchez - MusicFac
60
4| Conclusiones
Al inaliza el desa ollo de la aplicación y comp oba los esul ados ob enidos, hemos llegado a la
conclusión de que odo el abajo dedicado a es e p oyec o da sus u os. Nues o p o o ipo cumple
con los equisi os del análisis ealizado y se alcanzan los obje i os con c eces.
Du an e el p oceso nos hemos opado con nume osos p oblemas que han alen izado nues o
abajo, pe o con calma y paciencia se han ido solucionando. Al usa ecnologías y lenguajes
ela i amen e ecien es, la documen ación que se encen a en in e ne es escasa. Po lo que el
iempo de búsqueda de in o mación ha a ec ado eno memen e al desa ollo de la aplicación.
El p oyec o puede segui mejo ando e inco po a nue as uncionalidades como, po ejemplo, la
implemen ación de un ep oduc o en segundo plano. En la columna ‘Backlog’ de Wa le.io, hemos
apun ado algunas ideas que pod ían llega a implemen a se usando las he amien as opo unas que
nos o ecen las ecnologías de las que nos hemos se ido.
La aplicación se ha ins alado y es eado en a ios disposi i os mó iles And oid sin ningún ipo de
p oblema. El siguien e paso es p oba la en un disposi i o iOS y e i ica sus uncionalidades. En es e
pun o, nos damos cuen a de que el uso de ecnologías pa a desa olla aplicaciones híb idas pa a
mó iles nos aho a una can idad de iempo conside able. No obs an e, no es o o odo lo que eluce,
el iempo de inicio de la aplicación puede no ag ada a algunos usua ios impacien es. Es o es algo
que, desde mi humilde opinión, debe ía in en a mejo a se pa a el u u o p ome edo de las
aplicaciones híb idas.
Po o o lado, la in eg ación con Fi ebase ambién ha supues o un gas o de iempo no able. Sob e
odo, a la ho a de a a con a chi os (imágenes y audios). Al usa componen es na i os del
disposi i o mó il pa a selecciona los a chi os, es necesa io o ma ea su salida según las
especi icaciones de Fi ebase. Y conside o que la documen ación de Ionic es algo escasa pa a es a
pa e que se dedica al manejo de los plugins na i os. No obs an e, el es o de documen ación de
Ionic e e en e a los componen es y APIs me pa ece bas an e comple a con ejemplos ilus a i os.
En de ini i a, c eo que es e abajo me ha apo ado g andes conocimien os que, p obablemen e,
ecicla é en el u u o pa a o os p oyec os.

Alexande Reyes Sánchez - MusicFac
61
Fuen es de in o mación
1. SDLC - Modelo en cascada
h p://www.w3ii.com/es/sdlc/sdlc_wa e all_model.h ml
[Úl imo acceso Julio 2017]
2. Pa a educi la pi a e ía, dale a la gen e lo que quie e
h p://la am.pcmag.com/musica-p oduc os/2241/opinion/pa a- educi -la-
pi a e ia-dale-a-la-gen e-lo-que-quie e
[Úl imo acceso Julio 2017]
3. Las dos ca as ocul as del modelo de negocio de Spo i y
h p://elespec ado digi al.com/modelo-de-negocio-de-spo i y/
[Úl imo acceso Julio 2017]
4. Cuál es el Modelo de Negocio de Spo i y
h p://www.subma inoa omico.com/2017/05/25/cual-es-el-modelo-de-negocio-
de-spo i y/
[Úl imo acceso Julio 2017]
5. Decálogo de buenas p ác icas: Aspec os legales de las aplicaciones mó iles
h ps://www.yeeply.com/blog/decalogo-de-buenas-p ac icas-aspec os-legales-de-
las-aplicaciones-mo iles/
[Úl imo acceso Julio 2017]
6. Aplicaciones mó iles y Ley de P o ección de Da os
h p://www.mundolopd.com/lopd/p o eccion-de-da os- egula-las-aplicaciones-
mo iles/
[Úl imo acceso Julio 2017]
7. Angula 2 - A chi ec u e
h p://www.w3ii.com/angula 2/angula 2_a chi ec u e.h ml
[Úl imo acceso Julio 2017]
8. Fi ebase pa a And oid: Base de Da os en Tiempo Real
h p://www.sgoli e .ne /blog/ i ebase-and oid-base-da os- iempo- eal-1/
[Úl imo acceso Julio 2017]
9. Documen ación Fi ebase
h ps:// i ebase.google.com/docs/
[Úl imo acceso Julio 2017]
Alexande Reyes Sánchez - MusicFac
62
10. Ionic 2 & Xama in, dos he amien as pa a c ea aplicaciones híb idas
h ps://medium.com/@juans_g o/ionic-2-xama in-el- u u o-del-desa ollo-de-
aplicaciones-ed653284e4 e
[Úl imo acceso Julio 2017]
11. Documen ación Ionic
h ps://ionic amewo k.com/docs/
[Úl imo acceso Julio 2017]
12. Ionic Na i e
h ps://ionic amewo k.com/docs/na i e/
[Úl imo acceso Julio 2017]
13. Joshmo ony Tu o ials
h ps://www.joshmo ony.com
[Úl imo acceso Julio 2017]
14. Gi Hub
h ps://gi hub.com
[Úl imo acceso Julio 2017]
15. Wa le.io
h ps://gi hub.com/wa leio/wa le.io
[Úl imo acceso Julio 2017]
16. Lodash
h ps://lodash.com/
[Úl imo acceso Julio 2017]
17. Ch ome Co do a Mocks
h ps://gi hub.com/pbe nasconi/ch ome-co do a
[Úl imo acceso Julio 2017]
18. S ack O e low
h ps://s acko e low.com/
[Úl imo acceso Julio 2017]
19. Push No i ica ions
h ps://docs.ionic.io/se ices/push/
[Úl imo acceso Julio 2017]
20. Angula Tu o ials
h ps://www.plu alsigh .com/
[Úl imo acceso Julio 2017]
Alexande Reyes Sánchez - MusicFac
63
Anexos
A) MANUAL DE USUARIO
Al a anca la aplicación se mos a á una pan alla de ca ga con un ondo de po ada.
A con inuación, podemos elegi en e egis a nos con nues o email o a a és de Facebook
(Google+ y Twi e no es án disponibles oda ía). La o a opción es inicia sesión con nues o
email/con aseña o, del mismo modo que pa a egis a se, usa nues a cuen a de Facebook.
Ilus ación 32 - Splash Sc een
Alexande Reyes Sánchez - MusicFac
64
En caso de que hayamos ol idado la con aseña, no pasa nada, podemos cambia la median e la
opción “¿Has ol idado u con aseña?”
Ilus ación 33 - Pan alla de inicio, o mula io de egis o/inicio de sesión
Ilus ación 34 - Vis a pa a ecupe a con aseña
Alexande Reyes Sánchez - MusicFac
65
Una ez iniciada la sesión, se nos mos a á un mensaje de bien enida y accedemos a la pan alla
p incipal. Nada más en a , podemos obse a un mensaje con un icono de una lupa que nos indica
y edi ige a la is a pa a busca canciones o usua ios a los que segui . Si ya, an e io men e, hemos
iniciado sesión en la aplicación y seguido a algún usua io, nos apa ece án las pis as que ha subido y
compa ido. Aquí, podemos usa la ba a de na egación y explo a las di e en es uncionalidades
que nos o ece la aplicación.
Ilus ación 35 - Vis a p incipal ambos casos

Alexande Reyes Sánchez - MusicFac
66
El usua io puede e y il a canciones/usua ios po su nomb e. En es a is a es posible segui a los
usua ios a a és de un bo ón in ui i o (o deja de segui ).
Ilus ación 36 - Vis a pa a busca canciones/usua ios y no i icación de nue o seguido
Alexande Reyes Sánchez - MusicFac
67
A pa e, podemos e en de alle las canciones y el pe il público de los usua ios.
Pa a las canciones, podemos ag ega las a me gus a pulsando el bo ón del co azón y si que emos
elimina nues o me gus a, ol emos a pulsa el co azón (obse a emos un cambio de colo y un
sonido ca ac e ís ico al ag ega a me gus a). Luego, enemos el bo ón de ‘ epos ’ que si e pa a
compa i la canción a nues os seguido es (les apa ece á en su is a p incipal ‘Home’). En la is a
de de alle de las canciones, además, podemos ep oduci la canción y na ega al pe il del usua io
que la ha subido a a és de su nomb e.
Ilus ación 37 - Vis a de alle canción y pe il de usua io
Alexande Reyes Sánchez - MusicFac
68
O a uncionalidad es la de e los comen a ios de una canción y ag ega /elimina comen a ios
p opios. También es posible na ega al pe il de cualquie usua io que ha comen ado haciendo click
en su o o.
El úl imo bo ón nos ab i á una pequeña en ana donde podemos ag ega la canción a una lis a
exis en e o c ea una nue a con esa canción. Si seleccionamos ‘c ea lis a’, se nos pedi á el í ulo y
la p i acidad que que emos pa a la lis a. Como úl ima opción, podemos compa i la canción a a és
de las edes sociales.
Ilus ación 38 - Vis a comen a ios de una canción
Alexande Reyes Sánchez - MusicFac
69
Ilus ación 40 - Vis a c ea nue a lis a
Ilus ación 39 - Vis a más opciones - Añadi a una lis a
Alexande Reyes Sánchez - MusicFac
76
B) APLICACIONES HÍBRIDAS
Al ejecu a se con ecnologías web, los desa ollado es que ya ienen expe iencia en el desa ollo en
es e medio pueden ap o echa sus conocimien os pa a lanza se de una mane a más ápida en el
desa ollo de aplicaciones pa a mó iles. Pa a hace es o posible, las aplicaciones híb idas se ejecu an
en lo que se denomina un ‘web iew’, que no es más que una especie de na egado in eg ado en el
mó il y en el que solamen e se ejecu a la aplicación híb ida.
Las aplicaciones híb idas son in e esan es po di e sos mo i os:
• Con una misma base de código se án capaces de compila aplicaciones pa a unciona
co ec amen e en una g an can idad de sis emas ope a i os de mó iles o able s.
Gene almen e nos se á su icien e que nues a aplicación uncione en iOS y And oid, pe o
Ionic es capaz de compila a o os sis emas como Windows Phone.
• El cos e del desa ollo es sensiblemen e meno , ya que no es necesa io con a con a ios
equipos de desa ollo pa a cada lenguaje conc e o de cada pla a o ma.
• El iempo de desa ollo ambién es meno , ya que solo es necesa io cons ui la aplicación
una ez e inmedia amen e la end emos en odas las pla a o mas a las que nos di igimos.
• Es de más ácil adap ación pa a los desa ollado es que ienen de p og amación web.
Pe o odo no son en ajas, ambién podemos enume a algunas des en ajas en elación con las
aplicaciones na i as (aquellas cons uidas con los lenguajes p opios de cada sis ema, Ja a pa a
And oid y Swi /Objec i e-C pa a iOS).
El endimien o de una aplicación na i a suele se mejo que el de una híb ida, aunque las híb idas
han mejo ado mucho en es e sen ido.
Al ejecu a se en un ‘web iew’ dependemos de las ecnologías disponibles pa a el desa ollo web,
que pueden se menos icas y po en es que las disponibles en na i o.
En las aplicaciones na i as abajamos di ec amen e con el ha dwa e del elé ono, mien as que en
las híb idas dependemos de plugins pa a su acceso. Es o puede de i a en p oblemas, pe o
a o unadamen e cada ez son meno es.

Alexande Reyes Sánchez - MusicFac
77
C) CAMERA
La unción ‘Came a.ge Pic u e()’ ab e po de ec o la aplicación de la cáma a del disposi i o que
pe mi e a los usua ios oma imágenes de o ma p ede e minada. Es e compo amien o se p oduce
cuando el pa áme o ‘sou ceType’ es igual a ‘Came a.Pic u eSou ceType.CAMERA’. Una ez que el
usua io con i me la o o, la aplicación de la cáma a se cie a y la aplicación se es au a como es aba
an e io men e.
Si el pa áme o ‘sou ceType’ es ‘Came a.Pic u eSou ceType.PHOTOLIBRARY’ o
‘Came a.Pic u eSou ceType.SAVEDPHOTOALBUM’, apa ece un cuad o de diálogo que pe mi e a los
usua ios selecciona una imagen exis en e.
Exis en más pa áme os opcionales pa a pe sonaliza los ajus es de la cáma a. Dos de ellos, bas an e
impo an es a la ho a de a a con imágenes en la nube, son ‘ a ge Wid h’ y ‘ a ge Heigh ’ que
limi an las dimensiones de la imagen pa a que a la ho a de subi las o desca ga las al na ega po la
aplicación, el usua io no expe imen e e a dos excesi os. En la documen ación de Ionic Na i e
Came a se pueden e de enidamen e.