- Nota: Cada pregunta se valorará como bien o como mal (valoraciones intermedias serán excepcionales).
- Nota2: Cada pregunta computará únicamente en el examen al que pertenezca (diseño o desarrollo).
- Nota3: Para aprobar cada examen hay que obtener una puntuación mínima de 5 puntos en ese examen.
- Nota4: Organice su tiempo. Si no consigue resolver un apartado pase al siguiente. El examen consta de apartados de diseño y de desarrollo que se pueden resolver por separado. Si un apartado depende de otro que no sabe resolver, siempre puede dar una solución que aunque no sea correcta, le permita seguir avanzando.
- Nota5: Para que una solución sea correcta, no sólo hay que conseguir que haga lo que se pide, sino que, además, todo lo que funcionaba lo tiene que seguir haciendo. La solución debe estar implementada según las prácticas de código limpio explicadas en clase. Esto incluye React, JavaScript, CSS y HTML. No debe haber errores de tipos ni de ejecución.
- Nota6: Lea completamente el examen antes de empezar y comience por lo que le parezca más fácil.
- Nota7: No se permite utilizar ninguna librería que no esté ya incluida en el fichero
package.json. - Nota8: El examen de diseño se puede resolver usando CSS, SASS, TailwindCSS o combinaciones de los tres.
Pasos previos antes de empezar
- Clone el repositorio del enunciado
git clone https://gitlab.com/surtich/enunciado-examen-final-2024-2025.git- Vaya al directorio del proyecto
cd enunciado-examen-final-2024-2025- Si no lo ha hecho anteriormente, configure su usuario de git:
git config user.name "Sustituya por su nombre y apellidos"
git config user.email "Sustituya por su correo electrónico"- Cree un branch con su nombre y apellidos separados con guiones (no incluya mayúsculas, acentos o caracteres no alfabéticos, excepción hecha de los guiones). Ejemplo:
git checkout -b fulanito-perez-gomez- Compruebe que está en la rama correcta:
git status- Suba la rama al repositorio remoto:
git push origin <nombre-de-la-rama-dado-anteriormente>- Instale las dependencias:
npm install- Prepare la base de datos (puede omitir este paso ya que la base de datos se suministra ya actualizada):
npx prisma db push
npx prisma db seedArranque el servidor:
npm run devNavegue a http://localhost:3000
- Dígale al profesor que ya ha terminado para que compruebe que todo es correcto y desconecte la red.
Ahora las recetas pueden tener comentarios y valoraciones de los usuarios. En este ejercicio sólo se pide que se muestren los comentarios y las valoraciones de las recetas. No se pide que se puedan añadir ni eliminar comentarios ni valoraciones.
Para hacer esto, se ha creado el modelo Rating con la siguiente definición:
model Rating {
id String @id @default(cuid())
stars Int
title String?
comment String?
recipeId String
userId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
recipe Recipe @relation(fields: [recipeId], references: [id])
user User @relation(fields: [userId], references: [id])
}Observe que una reseña pertenece a un usuario y a una receta, y contiene un número del 1 al 5 obligatorio y un título y un comentario opcionales.
Además, se ha añadido un campo ratings los modelos Recipe y User:
model Recipe {
id String @id @default(cuid())
name String
...
ratings Rating[]
...
}
model User {
id String @id @default(cuid())
email String @unique
...
ratings Rating[]
...
}No se permite hacer modificaciones en la estructura de los modelos.
Se pretende crear la siguiente vista en la ruta /discover/recipeId/:
Se han creado tres ficheros en el directorio components:
stars.tsx: Muestra las estrellas de las valoraciones de usuario y la global.
review.tsx: Muestra una reseña de usuario.
ratings.tsx: Muestra el resumen de estrellas global.
Observe que stars.tsx se usa tanto en review.tsx como en ratings.tsx.
Se pueden añadir ficheros si se considera necesario, pero se deben utilizar los ficheros stars.tsx, review.tsx y ratings.tsx como están previstos.
- La estructura de los ficheros
htmlfacilitados es una mera orientación, se puede modificar como se desee. - Para conseguir el resultado es indiferente cómo lo haga (FlexBox, Grid Layout, ...) siempre y cuando respete las recomendaciones de buenas prácticas de diseño Web.
4.2.- (1 punto) Por conseguir que las opiniones globales y la del usuario se muestren en una columna cuando la pantalla sea pequeña.
4.3.- (2 puntos) Por conseguir que primero se muestren las opiniones las opiniones del usuarios y luego las globales cuando se muestren en una sola columna, y que sea al revés cuando se muestren en dos columnas.
5.- (2 puntos) El componente stars.tsx recibirá el número de estrellas a mostrar en amarillo (propiedad value) y opcionalmente el número de estrellas a mostrar (propiedad size con valor por defecto 5). Las estrellas mayores que value se mostrarán en gris. Si se pasa un número fraccionario se truncará al anterior entero (por ejemplo, con 3.9 se mostrarán 3 estrellas amarillas).
Nota: La media se calculará redondeando con dos decimales.
6.2.- (2 puntos) Por calcular el porcentaje de puntuaciones de cada valoración y mostrarlo ordenado de forma inversa (de 5 a 1).
Nota: Los porcentajes se calcularán redondeando al entero más próximo.
Nota: Esto se puede hacer recuperando todas las puntuaciones y contando cuántas hay de cada valoración. También se puede hacer usando consultas de agregación de Prisma. Ejemplo:
const groupUsers = await prisma.user.groupBy({
by: ["country", "city"],
_count: {
_all: true,
city: true,
},
_sum: {
profileViews: true,
},
orderBy: {
country: "desc",
},
having: {
profileViews: {
_avg: {
gt: 200,
},
},
},
});
8.- (2 puntos) Al pulsar sobre el enlace con el número de estrellas se mostrarán las reseñas de esa receta que tengan ese número de estrellas. Si se pulsa sobre Customer Review se mostrarán las 5 últimas reseñas.
Nota: Puede hacer esto como quiera. Algunas opciones son navegando, con formularios o con estados de React.
- El usuario está conectado y ha valorado la receta. Se mostrará la reseña.
- El usuario está conectado y no ha valorado la receta. Se mostrará un botón.
- El usuario no está conectado. No se mostrará nada.
Nota: Sólo se puntuará uno de ellos
Nota: Debe crear una función al que se le pase una fecha y devuelva el literal del mes año o el literal del mes día, año según corresponda.
- Ejecute el siguiente comando para comprobar que está en la rama correcta y ver los ficheros que ha cambiado:
git status- Prepare los cambios para que se añadan al repositorio local:
git add .
git commit -m "completed exam"- Compruebe que no tiene más cambios que incluir:
git status-
Dígale al profesor que va a entregar el examen.
-
Conecte la red y ejecute el siguiente comando:
git push origin <nombre-de-la-rama>- Abandone el aula en silencio.