SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
 
 
Construcción de 
Interfaces de Usuario 
Departamento de Ciencia y Tecnología 
 
TraiFlix Web >> TP2 
Esta particular empresa que busca posicionarse con una aplicación de trailers 
necesita ahora una interfaz web para que los usuarios puedan disfrutar de sus 
contenidos. Solicitan también que el sitio web sea SPA (Single Page Application) 
para estar a tono de los últimos estándares a nivel web. 
Parte 1: Servicio REST 
Para poder consumir datos desde la SPA va a ser necesario primeramente contar 
con un servicio REST que provea la información mediante una API. Para ellos vamos 
a utilizar el framework llamado ​XTRest​ que permite exponer un servicio de API REST 
utilizando Xtend. 
Se Pide 
Proveer un servicio REST que entienda y dé respuestas a (por lo menos) los 
siguientes requests: 
POST /auth 
Dado un ​username​ determinar si es un usuario válido o no 
Parámetros 
● username​: nombre del usuario a autenticarse 
Responses 
204 No content | 200 OK 
Si es un usuario válido. 
El cuerpo del mensaje puede estar vacío. Pero también podría contener una 
respuesta. Por ejemplo: 
{​"status"​: ​"ok"​,
​"message"​:​"¡Listo!"​} 
 
 
 
401 Unauthorized 
Si ​no​ es un usuario válido. 
Cuerpo del mensaje: 
{​"status"​: ​"error"​,
​"message"​: ​"Usuario Inválido"​} 
GET /categories 
Que retorne el listado de las categorías de la plataforma 
Parámetros 
Sin parámetros 
Responses 
200 OK 
El cuerpo del mensaje debe contener un listado de categorías. Por ejemplo: 
{
​"data"​: [​"Drama"​, ​"Acción"​, ​"Estrenos 2018"​, ...]
} 
GET /content/{category} 
Que retorne el listado de los contenidos que tengan la categoría ​{category}​. En los 
contenidos puede haber Películas y Series, pero no Capítulos de series. 
Parámetros 
● category​: slug del nombre de la categoría (ej: drama, ciencia-ficcion) 
Responses 
200 OK 
Por ejemplo: 
{ ​"category"​: ​"Drama"​,
​"data"​: [{
​"id"​: ​"MOV1236"​,
​"type"​: ​"movie"​,
​"title"​: ​"Pulp Fiction"​,
 
 
"classify"​: ​"+16"​,
​"year"​: ​1994​,
​"rating"​: ​4.8
}, {
​"id"​: ​"SER445"​,
​"type"​: ​"serie"​,
"title"​: ​"Better call Saul"​,
​"classify"​: ​"+13"​,
​"year"​: ​2015​,
​"rating"​: ​4.6
}, ...
]}
GET /{username}/favs 
Que retorne el listado del contenido favorito del usuario. En los contenidos puede 
haber Películas y Series, pero no Capítulos de series. 
Parámetros 
● username​: Nombre del Usuario 
Responses 
200 OK 
Por ejemplo: 
{​"data"​: [{
​"id"​: ​"MOV1234"​,
​"type"​: ​"movie"​,
​"title"​: ​"Machete"​,
"classify"​: ​"+16"​,
​"year"​: ​2010​,
​"rating"​: ​3.8
}, {
​"id"​: ​"SER4455"​,
​"type"​: ​"serie"​,
"title"​: ​"Rick & Morty"​,
​"classify"​: ​"+13"​,
​"year"​: ​2013​,
​"rating"​: ​4.5
}, ...
]}
 
 
GET /{username}/movie/{id} 
Que retorne la información de la película con id ​{id}​ para el usuario ​{username}​. Se 
debe añadir también cierta información relevante para el usuario: si vió la película y 
también la lista de amigos que se la recomendaron. 
Parámetros 
● id​: el id de la película 
● username​: nombre del usuario 
Responses 
200 OK 
Por ejemplo: 
{
​"id"​: ​"MOV333"​,
​"title"​: ​"Mi Vecino Totoro"​,
​"categories"​: [​"Infantiles"​, ​"Animación"​, ​"Fantasía"​],
​"classification"​: ​"ATP"​,
​"year"​: ​1988​,
​"duration"​: ​86​,
​"directors"​: [​"Hayao Miyazaki"​],
​"actors"​: [​"Hitoshi Takagi"​, ​"Noriko Hidaka"​, ​"Chika Sakamoto"​],
​"rating"​: ​4.2​,
​"related-content"​: [
{​"id"​: ​"MOV444"​, ​"type"​: ​"movie"​,
​"title"​: ​"El viaje de Chihiro"​, ​"year"​: ​2001​},
{​"id"​: ​"MOV555"​, ​"type"​: ​"movie"​,
​"title"​: ​"El castillo en el cielo"​, ​"year"​: ​1986​}],
​"link"​: ​"https://www.youtube.com/watch?v=92a7Hj0ijLs"​,
​"watched"​: ​true​,
​"recommendations"​: [​"juancito87"​, ​"el-pol"​, ​"miya-fan"​]
}
404 Not Found 
Si no se encontró película con esos valores. Cuerpo del mensaje: 
{​"status"​: ​"error"​,
​"message"​: ​"No se encontró la película"​} 
 
 
 
GET /{username}/serie/{id} 
Que retorne la información para ​{username}​ de la serie con id = ​{id}​. 
Parámetros 
● id​: el id de la serie 
● username​: nombre del usuario 
Responses 
200 OK 
Por ejemplo: 
{
​"id"​: ​"SER333"​,
​"title"​: ​"The Sopranos"​,
​"categories"​: [​"Drama"​, ​"Crímen"​],
​"classification"​: ​"+16"​,
​"creators"​: [​"David Chase"​],
​"related-content"​: [
{​"id"​: ​"MOV666"​, ​"type"​: ​"movie"​,
​"title"​: ​"The Godfather"​, ​"year"​: ​1972​},
{​"id"​: ​"SER555"​, ​"type"​: ​"serie"​,
​"title"​: ​"The Wire"​, ​"year"​: ​2002​}],
​"chapters"​: [
{​"id"​: ​"CHA111"​, ​"season"​: ​1​, ​"chapter"​: ​1​, ​"duration"​: ​53​,
​"title"​: ​"Pilot"​, ​"watched"​: ​true​, ​"rating"​: ​4.1​},
{​"id"​: ​"CHA112"​, ​"season"​: ​1​, ​"chapter"​: ​2​, ​"duration"​: ​56​,
​"title"​: ​"46 Long"​, ​"watched"​: ​false​, ​"rating"​: ​4.2​}],
​"recommendations"​: [​"godfather01"​, ​"tony22"​]
}
404 Not Found 
Si no se encontró serie con esos valores. Cuerpo del mensaje: 
{​"status"​: ​"error"​,
​"message"​: ​"No se encontró la serie"​}
   
 
 
POST /recommend/{type}/{id} 
Que genere una recomendación de una serie o película de un usuario a otro. 
Parámetros 
● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores: 
[​movie, serie] 
● id​: Id del contenido 
● user-from​: nombre de usuario que recomienda un contenido 
● user-to​: nombre de usuario al que le recomiendan un contenido 
Responses 
202 Accepted | 200 OK 
Si se pudo establecer la recomendación. El cuerpo del mensaje puede estar vacío. 
Pero también podría contener una respuesta. Por ejemplo: 
{​"status"​: ​"ok"​,
​"message"​:​"¡Bravo! ant-boy le recomendó Capitana Marvel a the-wasp"​} 
400 Bad Request 
Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la 
recomendación. Por ejemplo: 
{​"status"​: ​"error"​,
​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​} 
POST /search 
Que busque en todo el contenido y retorne aquellos que matchean con la búsqueda. 
Parámetros 
● text​: Valor a buscar 
Responses 
200 OK 
Si se pudo efectuar la búsqueda. Por ejemplo, buscando “game”: 
{​"data"​: [{
​"id"​: ​"MOV124"​,
​"type"​: ​"movie"​,
 
 
​"title"​: ​"The Hunger Games"​,
"classify"​: ​"+13"​,
​"year"​: ​2012​,
​"rating"​: ​3.6
}, {
​"id"​: ​"SER445"​,
​"type"​: ​"serie"​,
"title"​: ​"Game of Thrones"​,
​"classify"​: ​"+16"​,
​"year"​: ​2011​,
​"rating"​: ​4.9
}, ...
]}
400 Bad Request 
Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la 
recomendación. Por ejemplo: 
{​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​} 
PUT /{username}/fav/{type}/{id} 
Que establezca si el usuario marcó como visto o no visto determinado contenido. 
Parámetros 
● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores: 
[​movie, serie] 
● id​: Id del contenido 
● value​: Valor booleano que indique si se marca como favorito o se quita de los 
favoritos. Debería aceptar sólo alguno de estos valores: [​true, false] 
● username​: Nombre de usuario que está generando la acción 
Responses 
202 Accepted | 200 OK 
Si se pudo establecer el contenido como favorito o fue quitado correctamente. El 
cuerpo del mensaje de la respuesta puede estar vacío. Pero también podría 
contener una respuesta. Por ejemplo: 
{​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​} 
 
 
400 Bad Request 
Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la 
recomendación. Por ejemplo: 
{​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​} 
BONUS 
PUT /{username}/watched/{type}/{id} 
Que establezca si el usuario marcó como visto o no visto determinado contenido. 
Parámetros 
● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores: 
[​movie, serie] 
● id​: Id del contenido 
● value​: Valor booleano que indique si vió o no vió el contenido. Debería aceptar 
sólo alguno de estos valores: [​true, false] 
● username​: Nombre de usuario que está generando la acción 
Responses 
202 Accepted | 200 OK 
Si se pudo establecer la marca de visto. El cuerpo del mensaje de la respuesta puede 
estar vacío. Pero también podría contener una respuesta. Por ejemplo: 
{​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​} 
400 Bad Request 
Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la 
recomendación. Por ejemplo: 
{​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}
   
 
 
PUT /{username}/rating/{type}/{id} 
Que establezca el rating estipulado por el usuario. 
Parámetros 
● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores: 
[​movie, chapter] 
● id​: Id del contenido 
● stars​: Valor que represente el rating efectuado. Debería aceptar sólo alguno 
de estos valores: [​1, 2, 3, 4, 5] 
● username​: Nombre de usuario que está generando la acción 
Responses 
202 Accepted | 200 OK 
Si se pudo establecer la marca de visto. El cuerpo del mensaje de la respuesta puede 
estar vacío. Pero también podría contener una respuesta. Por ejemplo: 
{​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​} 
400 Bad Request 
Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la 
recomendación. Por ejemplo: 
{​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}
   
 
 
Parte 2: Interfaz Web 
Realizar una interfaz web con ​Bootstrap​ (HTML+CSS) y ​ReactJS​. La aplicación debe 
permitir autenticarse (de manera muy primitiva) para saber qué usuario está usando 
la aplicación y poder ofrecerle sus contenidos y contener una serie de pantallas para 
poder consumir las series y películas como un usuario final. 
Si el usuario no pudo autenticarse debería poder mostrarse el mensaje de error en el 
formulario de autenticación. Una vez logueado debería visualizarse una ​pantalla 
principal​ donde se vean los siguientes listados: 
● Favoritos 
● Recomendados 
● Género {gen1} 
● … 
● Género {genX} 
Donde cada sección tenga un listado de algunos contenidos (se puede limitar por 
ejemplo a 5 por sección). Al cliquear en un contenido se debería navegar hacia la 
pantalla del contenido, donde se muestre la información correspondiente según sea 
Serie o Película (ver mockups). También debería ser posible efectuar búsqueda y se 
muestren los resultados de esa búsqueda con el mismo formato que la pantalla 
principal.  
En las pantallas de contenido debería existir un player en el cual reproducir el trailer 
(link de youtube), mostrar información detallada (clasificación, géneros, año o fecha 
de estreno, contenido relacionado). 
Como ​bonus​ debería ser posible recomendarle el contenido a un amigo, marcar el 
contenido como “visto” o “no visto” y marcar/desmarcar el contenido como favorito. 
   
 
 
Login 
 
   
 
 
Principal 
 
   
 
 
Película 
 
   
 
 
Serie 
 
   
 
 
Búsqueda 
 
Bonus 
● Las siguientes interacciones: 
○ Agregar/Quitar de Favoritos 
○ Recomendar a un amigo 
○ Marcar como Vista/No Vista 
● Pantalla de Capítulo (similar a Película) 
Entrega 
La fecha de entrega es el jueves 8 de Noviembre de 2018. 
La entrega es presencial y deben estar presentes todos los integrantes del equipo. 
De existir alguna situación de fuerza mayor se deberá avisar a los docentes con 
antelación.  
Para organizar mejor las correcciones vamos a establecer horarios para cada grupo. 
 

Más contenido relacionado

Más de xavazque2

3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-bindingxavazque2
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_httpxavazque2
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-androidxavazque2
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdfxavazque2
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventorxavazque2
 
7. react js-1
7. react js-17. react js-1
7. react js-1xavazque2
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdfxavazque2
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdfxavazque2
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-bindingxavazque2
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdfxavazque2
 
3.mvc app model-valida-excep
3.mvc app model-valida-excep3.mvc app model-valida-excep
3.mvc app model-valida-excepxavazque2
 
4.windows dialogs
4.windows dialogs4.windows dialogs
4.windows dialogsxavazque2
 
392287381 lenguajes-para-programar-en-android
392287381 lenguajes-para-programar-en-android392287381 lenguajes-para-programar-en-android
392287381 lenguajes-para-programar-en-androidxavazque2
 
Capitulo 9788494717024
Capitulo 9788494717024Capitulo 9788494717024
Capitulo 9788494717024xavazque2
 
1.2. kotlin (1)
1.2. kotlin (1)1.2. kotlin (1)
1.2. kotlin (1)xavazque2
 

Más de xavazque2 (20)

3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-android
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdf
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
 
7. react js-1
7. react js-17. react js-1
7. react js-1
 
Tp1
Tp1Tp1
Tp1
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf
 
5.layouts
5.layouts5.layouts
5.layouts
 
6.2. js
6.2. js6.2. js
6.2. js
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-binding
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf
 
3.mvc app model-valida-excep
3.mvc app model-valida-excep3.mvc app model-valida-excep
3.mvc app model-valida-excep
 
4.windows dialogs
4.windows dialogs4.windows dialogs
4.windows dialogs
 
392287381 lenguajes-para-programar-en-android
392287381 lenguajes-para-programar-en-android392287381 lenguajes-para-programar-en-android
392287381 lenguajes-para-programar-en-android
 
Kotlin
KotlinKotlin
Kotlin
 
Capitulo 9788494717024
Capitulo 9788494717024Capitulo 9788494717024
Capitulo 9788494717024
 
1.2. kotlin
1.2. kotlin1.2. kotlin
1.2. kotlin
 
1.2. kotlin (1)
1.2. kotlin (1)1.2. kotlin (1)
1.2. kotlin (1)
 

Último

#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
carta combinada para tecnología de sara Garzón
carta combinada para tecnología de sara Garzóncarta combinada para tecnología de sara Garzón
carta combinada para tecnología de sara GarzónSaraGarzon13
 
tecnologia11-6 Juan Sebastián Gonzalez liceo
tecnologia11-6 Juan Sebastián Gonzalez liceotecnologia11-6 Juan Sebastián Gonzalez liceo
tecnologia11-6 Juan Sebastián Gonzalez liceoSebastinOrdez4
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nóminacuellosameidy
 
TRABAJO TECNOLOGÍA E INFORMATICA TABLAAA
TRABAJO TECNOLOGÍA E INFORMATICA TABLAAATRABAJO TECNOLOGÍA E INFORMATICA TABLAAA
TRABAJO TECNOLOGÍA E INFORMATICA TABLAAASebastinOrdez4
 
TECNOLOGIA 11-4.8888888888888888888888888
TECNOLOGIA 11-4.8888888888888888888888888TECNOLOGIA 11-4.8888888888888888888888888
TECNOLOGIA 11-4.8888888888888888888888888ElianaValencia28
 
tecnologia trabajo sobre excel avanzado método estadístico
tecnologia trabajo sobre excel avanzado método estadísticotecnologia trabajo sobre excel avanzado método estadístico
tecnologia trabajo sobre excel avanzado método estadísticojuliana280780
 
tecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdftecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdflauralizcano0319
 
Trabajo de tecnología primer periodo 2024
Trabajo de tecnología primer periodo 2024Trabajo de tecnología primer periodo 2024
Trabajo de tecnología primer periodo 2024anasofiarodriguezcru
 
BLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docx
BLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docxBLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docx
BLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docxhellendiaz12
 
Trabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamentalTrabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamentalEmanuelCastro64
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxCarolina Bujaico
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfcristianrb0324
 
La electricidad y la electrónica saray 10-2
La electricidad y la electrónica saray 10-2La electricidad y la electrónica saray 10-2
La electricidad y la electrónica saray 10-2SariGarcs
 
LA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPO
LA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPOLA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPO
LA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPOv16959670
 
Taller de tecnología año 2024 11-2 sofia nava
Taller de tecnología año 2024  11-2 sofia navaTaller de tecnología año 2024  11-2 sofia nava
Taller de tecnología año 2024 11-2 sofia navaSofaNava1
 
JUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCEL
JUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCELJUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCEL
JUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCELSebastinOrdez4
 
Tecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestríaTecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestríaElizabethLpezSoto
 
Materiales didácticos de Arelis y maria.
Materiales didácticos de Arelis y maria.Materiales didácticos de Arelis y maria.
Materiales didácticos de Arelis y maria.cabreraarelis37
 

Último (20)

#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
carta combinada para tecnología de sara Garzón
carta combinada para tecnología de sara Garzóncarta combinada para tecnología de sara Garzón
carta combinada para tecnología de sara Garzón
 
tecnologia11-6 Juan Sebastián Gonzalez liceo
tecnologia11-6 Juan Sebastián Gonzalez liceotecnologia11-6 Juan Sebastián Gonzalez liceo
tecnologia11-6 Juan Sebastián Gonzalez liceo
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nómina
 
TRABAJO TECNOLOGÍA E INFORMATICA TABLAAA
TRABAJO TECNOLOGÍA E INFORMATICA TABLAAATRABAJO TECNOLOGÍA E INFORMATICA TABLAAA
TRABAJO TECNOLOGÍA E INFORMATICA TABLAAA
 
TECNOLOGIA 11-4.8888888888888888888888888
TECNOLOGIA 11-4.8888888888888888888888888TECNOLOGIA 11-4.8888888888888888888888888
TECNOLOGIA 11-4.8888888888888888888888888
 
tecnologia trabajo sobre excel avanzado método estadístico
tecnologia trabajo sobre excel avanzado método estadísticotecnologia trabajo sobre excel avanzado método estadístico
tecnologia trabajo sobre excel avanzado método estadístico
 
tecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdftecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdf
 
Trabajo de tecnología primer periodo 2024
Trabajo de tecnología primer periodo 2024Trabajo de tecnología primer periodo 2024
Trabajo de tecnología primer periodo 2024
 
BLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docx
BLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docxBLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docx
BLOG, EXCEL AVANZADO, MÉTODOS ESTADÍSTICOS..docx
 
Trabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamentalTrabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamental
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptx
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdf
 
La electricidad y la electrónica saray 10-2
La electricidad y la electrónica saray 10-2La electricidad y la electrónica saray 10-2
La electricidad y la electrónica saray 10-2
 
LA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPO
LA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPOLA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPO
LA ELECTRICIDAD Y LA ELECTRÓNICA TRABAJO EN GRUPO
 
Taller de tecnología año 2024 11-2 sofia nava
Taller de tecnología año 2024  11-2 sofia navaTaller de tecnología año 2024  11-2 sofia nava
Taller de tecnología año 2024 11-2 sofia nava
 
JUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCEL
JUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCELJUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCEL
JUANITA Y SEBASTIAN TRABAJO TEGNOLOGIA TABLA EXCEL
 
Tecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestríaTecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestría
 
Materiales didácticos de Arelis y maria.
Materiales didácticos de Arelis y maria.Materiales didácticos de Arelis y maria.
Materiales didácticos de Arelis y maria.
 

Tp2

  • 1.     Construcción de  Interfaces de Usuario  Departamento de Ciencia y Tecnología    TraiFlix Web >> TP2  Esta particular empresa que busca posicionarse con una aplicación de trailers  necesita ahora una interfaz web para que los usuarios puedan disfrutar de sus  contenidos. Solicitan también que el sitio web sea SPA (Single Page Application)  para estar a tono de los últimos estándares a nivel web.  Parte 1: Servicio REST  Para poder consumir datos desde la SPA va a ser necesario primeramente contar  con un servicio REST que provea la información mediante una API. Para ellos vamos  a utilizar el framework llamado ​XTRest​ que permite exponer un servicio de API REST  utilizando Xtend.  Se Pide  Proveer un servicio REST que entienda y dé respuestas a (por lo menos) los  siguientes requests:  POST /auth  Dado un ​username​ determinar si es un usuario válido o no  Parámetros  ● username​: nombre del usuario a autenticarse  Responses  204 No content | 200 OK  Si es un usuario válido.  El cuerpo del mensaje puede estar vacío. Pero también podría contener una  respuesta. Por ejemplo:  {​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​}   
  • 2.     401 Unauthorized  Si ​no​ es un usuario válido.  Cuerpo del mensaje:  {​"status"​: ​"error"​, ​"message"​: ​"Usuario Inválido"​}  GET /categories  Que retorne el listado de las categorías de la plataforma  Parámetros  Sin parámetros  Responses  200 OK  El cuerpo del mensaje debe contener un listado de categorías. Por ejemplo:  { ​"data"​: [​"Drama"​, ​"Acción"​, ​"Estrenos 2018"​, ...] }  GET /content/{category}  Que retorne el listado de los contenidos que tengan la categoría ​{category}​. En los  contenidos puede haber Películas y Series, pero no Capítulos de series.  Parámetros  ● category​: slug del nombre de la categoría (ej: drama, ciencia-ficcion)  Responses  200 OK  Por ejemplo:  { ​"category"​: ​"Drama"​, ​"data"​: [{ ​"id"​: ​"MOV1236"​, ​"type"​: ​"movie"​, ​"title"​: ​"Pulp Fiction"​,
  • 3.     "classify"​: ​"+16"​, ​"year"​: ​1994​, ​"rating"​: ​4.8 }, { ​"id"​: ​"SER445"​, ​"type"​: ​"serie"​, "title"​: ​"Better call Saul"​, ​"classify"​: ​"+13"​, ​"year"​: ​2015​, ​"rating"​: ​4.6 }, ... ]} GET /{username}/favs  Que retorne el listado del contenido favorito del usuario. En los contenidos puede  haber Películas y Series, pero no Capítulos de series.  Parámetros  ● username​: Nombre del Usuario  Responses  200 OK  Por ejemplo:  {​"data"​: [{ ​"id"​: ​"MOV1234"​, ​"type"​: ​"movie"​, ​"title"​: ​"Machete"​, "classify"​: ​"+16"​, ​"year"​: ​2010​, ​"rating"​: ​3.8 }, { ​"id"​: ​"SER4455"​, ​"type"​: ​"serie"​, "title"​: ​"Rick & Morty"​, ​"classify"​: ​"+13"​, ​"year"​: ​2013​, ​"rating"​: ​4.5 }, ... ]}
  • 4.     GET /{username}/movie/{id}  Que retorne la información de la película con id ​{id}​ para el usuario ​{username}​. Se  debe añadir también cierta información relevante para el usuario: si vió la película y  también la lista de amigos que se la recomendaron.  Parámetros  ● id​: el id de la película  ● username​: nombre del usuario  Responses  200 OK  Por ejemplo:  { ​"id"​: ​"MOV333"​, ​"title"​: ​"Mi Vecino Totoro"​, ​"categories"​: [​"Infantiles"​, ​"Animación"​, ​"Fantasía"​], ​"classification"​: ​"ATP"​, ​"year"​: ​1988​, ​"duration"​: ​86​, ​"directors"​: [​"Hayao Miyazaki"​], ​"actors"​: [​"Hitoshi Takagi"​, ​"Noriko Hidaka"​, ​"Chika Sakamoto"​], ​"rating"​: ​4.2​, ​"related-content"​: [ {​"id"​: ​"MOV444"​, ​"type"​: ​"movie"​, ​"title"​: ​"El viaje de Chihiro"​, ​"year"​: ​2001​}, {​"id"​: ​"MOV555"​, ​"type"​: ​"movie"​, ​"title"​: ​"El castillo en el cielo"​, ​"year"​: ​1986​}], ​"link"​: ​"https://www.youtube.com/watch?v=92a7Hj0ijLs"​, ​"watched"​: ​true​, ​"recommendations"​: [​"juancito87"​, ​"el-pol"​, ​"miya-fan"​] } 404 Not Found  Si no se encontró película con esos valores. Cuerpo del mensaje:  {​"status"​: ​"error"​, ​"message"​: ​"No se encontró la película"​}   
  • 5.     GET /{username}/serie/{id}  Que retorne la información para ​{username}​ de la serie con id = ​{id}​.  Parámetros  ● id​: el id de la serie  ● username​: nombre del usuario  Responses  200 OK  Por ejemplo:  { ​"id"​: ​"SER333"​, ​"title"​: ​"The Sopranos"​, ​"categories"​: [​"Drama"​, ​"Crímen"​], ​"classification"​: ​"+16"​, ​"creators"​: [​"David Chase"​], ​"related-content"​: [ {​"id"​: ​"MOV666"​, ​"type"​: ​"movie"​, ​"title"​: ​"The Godfather"​, ​"year"​: ​1972​}, {​"id"​: ​"SER555"​, ​"type"​: ​"serie"​, ​"title"​: ​"The Wire"​, ​"year"​: ​2002​}], ​"chapters"​: [ {​"id"​: ​"CHA111"​, ​"season"​: ​1​, ​"chapter"​: ​1​, ​"duration"​: ​53​, ​"title"​: ​"Pilot"​, ​"watched"​: ​true​, ​"rating"​: ​4.1​}, {​"id"​: ​"CHA112"​, ​"season"​: ​1​, ​"chapter"​: ​2​, ​"duration"​: ​56​, ​"title"​: ​"46 Long"​, ​"watched"​: ​false​, ​"rating"​: ​4.2​}], ​"recommendations"​: [​"godfather01"​, ​"tony22"​] } 404 Not Found  Si no se encontró serie con esos valores. Cuerpo del mensaje:  {​"status"​: ​"error"​, ​"message"​: ​"No se encontró la serie"​}    
  • 6.     POST /recommend/{type}/{id}  Que genere una recomendación de una serie o película de un usuario a otro.  Parámetros  ● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores:  [​movie, serie]  ● id​: Id del contenido  ● user-from​: nombre de usuario que recomienda un contenido  ● user-to​: nombre de usuario al que le recomiendan un contenido  Responses  202 Accepted | 200 OK  Si se pudo establecer la recomendación. El cuerpo del mensaje puede estar vacío.  Pero también podría contener una respuesta. Por ejemplo:  {​"status"​: ​"ok"​, ​"message"​:​"¡Bravo! ant-boy le recomendó Capitana Marvel a the-wasp"​}  400 Bad Request  Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la  recomendación. Por ejemplo:  {​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}  POST /search  Que busque en todo el contenido y retorne aquellos que matchean con la búsqueda.  Parámetros  ● text​: Valor a buscar  Responses  200 OK  Si se pudo efectuar la búsqueda. Por ejemplo, buscando “game”:  {​"data"​: [{ ​"id"​: ​"MOV124"​, ​"type"​: ​"movie"​,
  • 7.     ​"title"​: ​"The Hunger Games"​, "classify"​: ​"+13"​, ​"year"​: ​2012​, ​"rating"​: ​3.6 }, { ​"id"​: ​"SER445"​, ​"type"​: ​"serie"​, "title"​: ​"Game of Thrones"​, ​"classify"​: ​"+16"​, ​"year"​: ​2011​, ​"rating"​: ​4.9 }, ... ]} 400 Bad Request  Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la  recomendación. Por ejemplo:  {​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}  PUT /{username}/fav/{type}/{id}  Que establezca si el usuario marcó como visto o no visto determinado contenido.  Parámetros  ● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores:  [​movie, serie]  ● id​: Id del contenido  ● value​: Valor booleano que indique si se marca como favorito o se quita de los  favoritos. Debería aceptar sólo alguno de estos valores: [​true, false]  ● username​: Nombre de usuario que está generando la acción  Responses  202 Accepted | 200 OK  Si se pudo establecer el contenido como favorito o fue quitado correctamente. El  cuerpo del mensaje de la respuesta puede estar vacío. Pero también podría  contener una respuesta. Por ejemplo:  {​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​} 
  • 8.     400 Bad Request  Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la  recomendación. Por ejemplo:  {​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}  BONUS  PUT /{username}/watched/{type}/{id}  Que establezca si el usuario marcó como visto o no visto determinado contenido.  Parámetros  ● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores:  [​movie, serie]  ● id​: Id del contenido  ● value​: Valor booleano que indique si vió o no vió el contenido. Debería aceptar  sólo alguno de estos valores: [​true, false]  ● username​: Nombre de usuario que está generando la acción  Responses  202 Accepted | 200 OK  Si se pudo establecer la marca de visto. El cuerpo del mensaje de la respuesta puede  estar vacío. Pero también podría contener una respuesta. Por ejemplo:  {​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​}  400 Bad Request  Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la  recomendación. Por ejemplo:  {​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}    
  • 9.     PUT /{username}/rating/{type}/{id}  Que establezca el rating estipulado por el usuario.  Parámetros  ● type​: Tipo del contenido. Debería aceptar sólo alguno de estos valores:  [​movie, chapter]  ● id​: Id del contenido  ● stars​: Valor que represente el rating efectuado. Debería aceptar sólo alguno  de estos valores: [​1, 2, 3, 4, 5]  ● username​: Nombre de usuario que está generando la acción  Responses  202 Accepted | 200 OK  Si se pudo establecer la marca de visto. El cuerpo del mensaje de la respuesta puede  estar vacío. Pero también podría contener una respuesta. Por ejemplo:  {​"status"​: ​"ok"​, ​"message"​:​"¡Listo!"​}  400 Bad Request  Si el request fue mal realizado o si ocurrió un error por el cual no se pudo realizar la  recomendación. Por ejemplo:  {​"status"​: ​"error"​, ​"message"​:​"¡Ups! Hubo un error, intentá más tarde."​}    
  • 10.     Parte 2: Interfaz Web  Realizar una interfaz web con ​Bootstrap​ (HTML+CSS) y ​ReactJS​. La aplicación debe  permitir autenticarse (de manera muy primitiva) para saber qué usuario está usando  la aplicación y poder ofrecerle sus contenidos y contener una serie de pantallas para  poder consumir las series y películas como un usuario final.  Si el usuario no pudo autenticarse debería poder mostrarse el mensaje de error en el  formulario de autenticación. Una vez logueado debería visualizarse una ​pantalla  principal​ donde se vean los siguientes listados:  ● Favoritos  ● Recomendados  ● Género {gen1}  ● …  ● Género {genX}  Donde cada sección tenga un listado de algunos contenidos (se puede limitar por  ejemplo a 5 por sección). Al cliquear en un contenido se debería navegar hacia la  pantalla del contenido, donde se muestre la información correspondiente según sea  Serie o Película (ver mockups). También debería ser posible efectuar búsqueda y se  muestren los resultados de esa búsqueda con el mismo formato que la pantalla  principal.   En las pantallas de contenido debería existir un player en el cual reproducir el trailer  (link de youtube), mostrar información detallada (clasificación, géneros, año o fecha  de estreno, contenido relacionado).  Como ​bonus​ debería ser posible recomendarle el contenido a un amigo, marcar el  contenido como “visto” o “no visto” y marcar/desmarcar el contenido como favorito.     
  • 15.     Búsqueda    Bonus  ● Las siguientes interacciones:  ○ Agregar/Quitar de Favoritos  ○ Recomendar a un amigo  ○ Marcar como Vista/No Vista  ● Pantalla de Capítulo (similar a Película)  Entrega  La fecha de entrega es el jueves 8 de Noviembre de 2018.  La entrega es presencial y deben estar presentes todos los integrantes del equipo.  De existir alguna situación de fuerza mayor se deberá avisar a los docentes con  antelación.   Para organizar mejor las correcciones vamos a establecer horarios para cada grupo.