#1. modulo-3-evaluacion-final-evalopezm
Antes de empezar, hay que crear un nuevo repositorio desde GitHub Classroom. Una vez creado, hay que clonar en nuestro ordenador y en la carpeta creada empezaremos a trabajar en el ejercicio. El ejercicio consiste en desarrollar una página web con un listado de personajes de Rick and Morty, que podemos filtrar por el nombre del personaje. Vamos a usar React para realizarlo. Vamos de definir las distintas partes del ejercicio:
-
Listado de personajes: En primer lugar, vamos a realizar una web con el listado de personajes de Rick and Morty. Para eso, vamos a utilizar el servicio de https://rickandmortyapi.com/documentation/#get-all-characters que nos devuelve información sobre los primeros 20 personajes de la serie. Sobre cada uno, vamos a pintar al menos: Foto - Nombre - Especie. Si este servicio no funcionase (porque nos hubieran baneado) tenemos una url de backup: https://raw.githubusercontent.com/Adalab/rick-y-morty/master/data/rick-y-morty.json. Para esta primera parte del ejercicio es suficiente pintar la información sin maquetar.
-
Filtrado de personajes: Ahora que ya tenemos el listado de personajes en pantalla, la segunda parte consiste en poder buscarlos por nombre. Para eso, añadimos un input a la interfaz, de forma que al ir escribiendo un nombre queden en la interfaz solo los personajes cuyo nombre contiene las letras escritas. En el pantallazo de arriba, al escribir 'Ric' aparecen personajes cuyo nombre completo contiene esas letras en ese orden.
-
Componentes del listado de personajes El listado debe tener los siguientes componentes como mínimo: *Componente para los filtros *Componente para el listado *Componente para la tarjeta de cada personaje del listado Componente para el detalle de cada personaje
-
Detalle de personajes: Vamos a implementar una nueva funcionalidad: al hacer clic sobre la tarjeta de un personaje, su información aparecerá a pantalla completa. Para hacer esto usaremos rutas y React router. En la pantalla de detalle aparecerá además de la foto, nombre y especie, el planeta de origen, el número de episodios en los que aparece y si está vivo o muerto. NOTA: en principio no es necesario tener en cuenta si las letras están en mayúscula / minúscula para la búsqueda, pero si queréis añadir esta mejora pues genial.
-
Detallitos de calidad: *Como nos gusta cuidar la semántica, el campo de texto debe estar recubierto por una etiqueta
. *Si estando en el campo de filtrado pulsamos intro debéis impedir que el navegador navegue o cambie la ruta sin querer. *Si se busca por un texto por ejemplo "XXX" y no hay ningún personaje que coincida con dicho texto se debe mostrar un mensaje del tipo "No hay ningún personaje que coincida con la palabra XXX". *El filtro debe filtrar independientemente de que la usuaria introduzca el texto en mayúsuclas o minúsculas. *Al entrar en el detalle de un personaje y a continuación pulsar atrás, el campo de texto debe mostrar el texto que tenía anteriormente. -
BONUS: Mejoras visuales. Para terminar, podéis realizar algunas mejoras visuales del ejercicio. Por ejemplo: Mostrar la especie y si un personajes está muerto con un icono. Usar algún sistema de grid para pintar el listado de personajes. Que funcione bien el responsive en dispositivos pequeños.
-
BONUS: URL compartible. Como ejercicio extra os proponemos que la URL del detalle de personaje sea compartible, es decir, que si visitamos esa URL directamente en el navegador se vea el detalle del personaje. Y en el caso de que el usuario navegue a una URL inexistente como por ejemplo http://localhost:3000/#/detail/12345 (el id 12345 no existe) debemos mostrar un mensaje del tipo "El personaje que buscas no existe".
-
BONUS: Ordenación. Un extra interesante sería que ordenáseis el listado de personajes alfabéticamente por nombre.
Hemos pautado 12 horas de dedicación al ejercicio, por lo que el límite de entrega es: Turno de mañana: 25/04/2020 a las 23:59:59:999 horas Turno de tarde: 25/04/2020 a las 23:59:59:999 horas Solo debéis hacer commits y merges en la rama master de vuestro repositorio hasta la fecha límite. Si después del ejercicio queréis seguir trabajando sobre el ejercicio, lo podéis hacer en otra rama y no debéis mergearla hasta que los profesores os lo indiquen. La evaluación solo se considerará terminada cuando: Esté publicada en GitHub Pages y esté funcionando, para lo cual tendréis que subir el código, también a la carpeta docs/ del repositorio. El enlace a GitHub Pages esté en la página página principal del repositorio, en la parte superior, al lado de la descripción.
Este ejercicio está pensado para que lo realices de forma individual en clase, pero podrás consultar tus dudas con la profesora y tus compañeras si lo consideras necesario. Ellas no te darán directamente la solución de tu duda, pero sí pistas para poder solucionarla. Aún facilitando la comunicación entre compañeras, durante la prueba no debes copiar código de otra persona ni acceder a su portátil. Confiamos en tu responsabilidad.
La evaluación es una buena oportunidad para conocer cómo estás progresando, saber qué temas debes reforzar durante las siguientes semanas y cuáles dominas. Te recomendamos que te sientas cómoda con el ejercicio que entregues y no envíes cosas copiadas que no entiendas.
Si detectamos que has entregado código que no es tuyo, no entiendes y no lo puedes defender, pasarás directamente a la re-evaluación del módulo. Tu objetivo no debería ser pasar la evaluación sino convertirte en programadora, y esto debes tenerlo claro en todo momento.
Una vez entregado el ejercicio realizarás una revisión del mismo con la profesora (25 minutos), que se asemenjará a una entrevista técnica: te pedirá que expliques las decisiones tomadas para realizarlo y te propondrá realizar cambios in situ sobre tu solución.
Es una oportunidad para practicar la dinámica de una entrevista técnica donde te van a proponer cambios sobre tu código que no conoces a priori. Si evitas que otras compañeras te den pistas sobre la dinámica de feedback, podrás aprovecharlo como una práctica y pasar los nervios con la profesora en lugar de en tu primera entrevista de trabajo. Al final tendrás un feedback sobre aspectos a destacar y a mejorar en tu ejercicio, y sabrás qué objetivos de aprendizaje has superado de los listados a continuación.
Vamos a listar los criterios de evaluación de este ejercicio. Si no superas al menos el 80% de estos criterios o no has superado algún criterio clave (marcados con *) te pediremos que realices una re-evaluación con el fin de que termines el curso mejor preparada y enfrentes tu primera experiencia profesional con más seguridad. En caso contrario, estás aprendiendo al ritmo que hemos pautado para poder afrontar los conocimientos del siguiente módulo.
React básico
- Crea componentes con sintaxis correcta
- Crea una estructura adecuada de componentes
- Usa las props para pasar datos a componentes hijos
- Sabe pintar listados
- Sabe usar métodos funcionales de array (map, filter, etc.)
- Usa el estado para gestionar información de la interfaz
- El componente principal App.js maneja el estado de la aplicación
- Usa eventos en React para atender a interacciones del usuario
- Usa métodos / hooks del ciclo de vida para las peticiones al servidor
- Escribe un código sólido, sin errores en la consola
Usa propTypes para evitar errores de tipado Tiene soltura a la hora de realizar cambios en el ejercicio presencial React router: Crea rutas navegables dentro de una aplicación Issues: Haber resuelto las issues de la evaluación intermedia* Otros criterios a tener en cuenta: Usar inglés para nombres de variables, funciones, clases, mensajes de commit, nombres de ficheros. El repositorio de GitHub debe tener README.