FP.

211 - (P) Aplicación front-end dinámica con frameworks avanzados

© FP JesuÏtes UOC • Marzo 2023 JEP Team

Producto 2. ¡Música maestro!

Mostrar un reproductor de música
FP.211 - (P) Aplicación front-end dinámica con frameworks avanzados

Consultor: Gemma Pinyol Soto

JEPC Team

Enol Alvarez Molinuevo

Joel Garzón Agustinoy
Chadouli Salama El Maaroufi
Pau Urios Llorens

Índice
2
FP.211 - (P) Aplicación front-end dinámica con frameworks avanzados
© FP JesuÏtes UOC • Marzo 2023 JEP Team

1. Planificar las actividades del Producto 2 dentro de Trello indicando a quien le

corresponde y el tiempo estimado..........................................................................................3

2. Mejorar la experiencia de usuario y selección de un conjunto de canciones, se añadirá un

filtro, que se deja a la elección del equipo, bien mediante una caja de texto, o bien un
seleccionable de ordenación. Este filtro se incorporará al componente de listado de
canciones............................................................................................................................... 3

3. Crear un nuevo componente que incorpore el interfaz de reproductor de música. Los

elementos mínimos que deben aparecer son: Botones (play, pause y stop), tiempo de
canción total y restante y barra progresiva de reproducción...................................................4

4. Crear una nueva etiqueta en el repositorio denominada v2.1 y subir a Github incluyendo
las etiquetas ( git push origin --tags )......................................................................................4

5. Incorporar nuevos datos al ya desarrollado en el Producto 1 de una canción. Ya que

posteriormente el origen de los datos, es decir, del stream de datos de la canción van a
estar en la nube, para comprobar el buen funcionamiento del interfaz desarrollado, los datos
serán una URL a un fichero local en el mismo proyecto.........................................................4

6. Incorporar los eventos necesarios para poder interactuar con la canción seleccionada
(formato mp3 en local): Evento sobre los botones y Cambios en los tiempos y la barra de
progreso................................................................................................................................. 4

7. Integrar del componente en la aplicación...........................................................................5

8. Crear una nueva etiqueta en el repositorio denominada v2.1 y subir a Github incluyendo
las etiquetas ( git push origin --tags )......................................................................................5

9. Copiar el enlace de Github en un documento de texto para su entrega.............................5

10. Subir todo el proyecto a CodeSandbox y que compile ahí para así evitar problemas de
compilación en el ordenador del consultor. Poner el enlace al documento de entrega...........5

3
 FP.211 - (P) Aplicación front-end dinámica con frameworks avanzados
© FP JesuÏtes UOC • Marzo 2023 JEP Team

1. Planificar las actividades del Producto 2 dentro de Trello indicando a quien le

corresponde y el tiempo estimado.

https://trello.com/b/exNjA96e/fp211-productos

2. Mejorar la experiencia de usuario y selección de un conjunto de canciones, se

añadirá un filtro, que se deja a la elección del equipo, bien mediante una caja
de texto, o bien un seleccionable de ordenación. Este filtro se incorporará al
componente de listado de canciones.

4
 FP.211 - (P) Aplicación front-end dinámica con frameworks avanzados
© FP JesuÏtes UOC • Marzo 2023 JEP Team

3. Crear un nuevo componente que incorpore el interfaz de reproductor de

música. Los elementos mínimos que deben aparecer son: Botones (play,
pause y stop), tiempo de canción total y restante y barra progresiva de
reproducción.

4. Crear una nueva etiqueta en el repositorio denominada v2.1 y subir a Github

incluyendo las etiquetas ( git push origin --tags ).

5. Incorporar nuevos datos al ya desarrollado en el Producto 1 de una canción.

Ya que posteriormente el origen de los datos, es decir, del stream de datos de
la canción van a estar en la nube, para comprobar el buen funcionamiento del
interfaz desarrollado, los datos serán una URL a un fichero local en el mismo
proyecto.

6. Incorporar los eventos necesarios para poder interactuar con la canción

seleccionada (formato mp3 en local): Evento sobre los botones y Cambios en
los tiempos y la barra de progreso.

5
 FP.211 - (P) Aplicación front-end dinámica con frameworks avanzados
© FP JesuÏtes UOC • Marzo 2023 JEP Team

7. Integrar del componente en la aplicación.

8. Crear una nueva etiqueta en el repositorio denominada v2.1 y subir a Github

incluyendo las etiquetas ( git push origin --tags ).

9. Copiar el enlace de Github en un documento de texto para su entrega.

https://github.com/puriosuoc/FP.211.Producto2

10. Subir todo el proyecto a CodeSandbox y que compile ahí para así
evitar problemas de compilación en el ordenador del consultor.
Poner el enlace al documento de entrega.

https://codesandbox.io/s/empty-surf-q6tm59

https://q6tm59.csb.app/