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

DESARROLLO DE UN PROTOTIPO DE APLICACIÓN MÓVIL 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.