- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Consideraciones técnicas
- 6. Criterios mínimos de aceptación del proyecto
- 7. Despliegue
- 8. Planificación
- 9. Consideraciones para pedir tu Project Feedback
- 10. Pistas, tips y lecturas complementarias
La manera en que vemos películas ha cambiado radicalmente durante los últimos años debido, en parte, a la aparición de los servicios de streaming que nos permiten hacerlo desde donde estemos y en cualquier momento. El mejor reflejo de este fenómeno es el éxito de Netflix, HBO y Disney+, etc.
Creemos que hay una gran oportunidad de proponer productos/experiencias innovadoras de todo tipo utilizando datos de películas (directorxs, actorxs, sagas, secuelas, fechas, etc.). Podríamos pensar en juegos, comunidades, catálogos, recomendaciones basadas en gustos personales, etc. (sólo por mencionar algunas ideas obvias).
En este proyecto, crearás una página web destinada a visualizar, filtrar y ordenar el catálogo de películas de The Movie Database API V3. Esta página puede servir como un catálogo de películas general, pero también, si te animas, puedes considerar la posibilidad de diseñarla para un público y usuarias específicas con preferencias como "películas western" o "películas de las 80's" por ejemplo.
Para implementar este proyecto deberás elegir un framework entre React y Angular. Al elegir un framework o librería para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web: mantener la interfaz sincronizada con el estado. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las características específicas de nuestra aplicación.
Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, etc...
Como desarrolladora Front-end, estos kits de desarrollo pueden resultarte de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de flexbox en CSS
-
Uso de CSS Grid Layout
-
Uso de media queries
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Pruebas unitarias (unit tests)
-
Pruebas asíncronas
-
Uso de mocks y espías
-
Módulos de ECMAScript (ES Modules)
-
Git: Instalación y configuración
-
Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
-
GitHub: Creación de cuenta y repos, configuración de llaves SSH
-
GitHub: Despliegue con GitHub Pages
-
GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
GitHub: Organización en Github (projects | issues | labels | milestones | releases)
-
Consulta o petición (request) y respuesta (response).
-
Cabeceras (headers)
-
Cuerpo (body)
-
Verbos HTTP
-
Códigos de status de HTTP
-
Encodings y JSON
-
CORS (Cross-Origin Resource Sharing)
-
Components & templates
-
Directivas estructurales (ngIf / ngFor)
-
@Input | @Output
-
Creación y uso de servicios
-
Manejo de rutas
-
Creación y uso de Observables.
-
Uso de HttpClient
-
Estilos de componentes (ngStyle / ngClass)
-
JSX
-
Componentes y propiedades (props)
-
Manejo de eventos
-
Listas y keys
-
Renderizado condicional
-
Elevación de estado
-
Hooks
-
CSS modules
-
React Router
-
Instancia de Vue.js
-
Datos y métodos
-
Uso y creación de componentes
-
Props
-
Directivas (v-bind | v-model)
-
Iteración (v-for)
-
Eventos (v-on)
-
Propiedades Computadas y Observadores
-
Routing
-
Clases y Estilos
-
Narrowing
-
Decoradores
-
Chequeo estático de tipos
-
Rigurosidad
-
Tipos primitivos
-
Arreglos
-
Tipo
any
-
Funciones
-
Tipos Union
-
Alias de tipos
-
Interfaces
-
Type assertions
-
Tipos literales
-
null y undefined
-
Enums
-
Propiedades opcionales
-
Visibilidad de miembros de clase (public, protected, private)
-
Miembros de clase estáticos
-
this
-
Clases abstractas
-
Campos
-
Constructors
-
Métodos
-
Getters y Setters
-
implements Clausas
-
extends Clausas
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
Este proyecto se debe "resolver" de manera individual.
Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines y branches.
El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints.
Para implementar este proyecto te recomendamos usar la planificación sugerida que se encuentra en el repo movie-challenge-planner el cual provee un CLI para hacer fork del presente repositorio y crear un GitHub Project con el milestone e issues de cada historia de usuaria.
La aplicación debe ser un Single Page App.
La aplicación no debe ser responsive.
Para poder usar la API de The Movie Database API V3 deberás crear una cuenta, luego una llave (key) de acceso y usarla en cada petición que hagas al servidor. Recuerda que tienes un máximo de 1.000 peticiones diarias a la APIs por cada IP, creemos que es suficiente, pero te recomendamos hacer un uso responsable de este recurso gratuito.
Uno de los mayores objetivos de este proyecto es aprender a usar una librería o framework popular para desarrollar una web app. Debes elegir entre React o Angular.
Si usas Angular o React, tienes la obligación de usar TypeScript. Typescript es un lenguaje de programación fuertemente tipado basado en javascript.
Si usas Angular, te recomendamos usar la versión 14. Para esto es necesario que tengas instalada la version 12 de NodeJS. Puedes encontrar una guia de instalación acá o consultar con tus coaches.
La aplicación debe hacer uso de npm-scripts y contar con scripts start,
test, build y deploy, que se encarguen de arrancar, correr las pruebas,
empaquetar y desplegar la aplicación respectivamente.
El Product Owner nos entrega una primera iteración del prototipo de baja fidelidad de la aplicación en esta imagen y esta otra.
El Product Owner nos presenta este backlog que es el resultado de su trabajo con el clientx hasta hoy.
Al iniciar un proyecto siempre hay una serie de tareas a las que debemos dedicar tiempo.
-
Es posible ejecutar el proyecto y que nuestro navegador muestre la aplicación por defecto.
-
Es posible ejecutar el linter y los tests unitarios.
-
No es posible hacer un push directo a la rama principal
-
Existe un Figma con los diseños de alta fidelidad
-
La aplicación esta desplegada correctamente y se proporciona una URL pública.
Como usuario, quiero visualizar el catálogo de películas en filas y columnas.
- Al visitar la aplicación desplegada debe visualizar en una tabla (filas y columnas) el catálogo de películas de The Movie Database API V3
Como usuario, quiero navegar por el catálogo de las películas dividido en páginas.
- Al visitar nuestra aplicación desplegada debe visualizar el catálogo de películas y navegar entre páginas.
Como usuario, quiero poder filtrar las películas por género y ordenarlas por año en orden ascendente y descendente.
-
El usuario debe poder filtrar el catálogo por género.
-
El usuario debe poder eliminar el filtro para ver películas sin filtrar
-
El usuario debe poder ordenar de forma ascendente el catálogo por año.
-
El usuario debe poder ordenar el catálogo de forma descendente por año.
-
El usuario debe poder eliminar la clasificación para ver las películas sin ordenar
Como usuario, quiero poder ver información detallada sobre una película, para poder tomar decisiones informadas sobre si verla o no.
-
Los usuarios pueden navegar a la página de detalles de la película desde la lista de películas o cualquier sección relevante.
-
Los detalles de la película se muestran de forma destacada, proporcionando información completa sobre la película seleccionada.
-
Los usuarios pueden volver fácilmente a la página anterior.
Puedes elegir el proveedor (o proveedores) que prefieras junto con el mecanismo de despligue y estrategia de alojamiento. Te recomendamos explorar las siguientes opciones:
- Vercel es una plataforma de despliegue que nos permite desplegar nuestra aplicación web estática (HTML, CSS y JavaScript) y también nos permite desplegar aplicaciones web que se ejecutan en el servidor (Node.js).
- Netlify al igual que Vercel, es una plataforma de despliegue que nos permite desplegar nuestra aplicación web estática (HTML, CSS y JavaScript) y también nos permite desplegar aplicaciones web que se ejecutan en el servidor (Node.js).
Para implementar este proyecto te recomendamos usar la planificación sugerida que se encuentra en el repo movie-challenge-planner, el cual provee un CLI que te ayudará a forkear el presente repositorio y crear un GitHub Project con el milestone e issues de cada historia de usuaria.
El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. Te sugerimos organizarte de la siguiente manera:
- Sprint 1: completar la Historia técnica 1 y Historia de usuario 2
- Sprint 2: completar la Historia de usuario 3 e iniciar con la Historia de usuario 4
- Sprint 3: completar la Historia de usuario 4
- Sprint 4: completar la Historia de usuario 5
Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:
- Protipo de alta fidelidad en Figma
- Cumple con todos los criterios mínimos de aceptación
- Está subido a GitHub
- Esta desplegado
- Tiene un README con la definición del producto.
Recuerda que debes hacer una autoevaluación de objetivos de aprendizaje y life skills desde tu dashboard de estudiante.
Si no has completado todo lo anterior, no consideramos que estás lista para tu sesión de Project Feedback.
Súmate al canal de Slack #project-movie-challenge-fw para conversar y pedir ayuda del proyecto.
Tomando como base el prototipo de baja fidelidad entregado, crea uno de alta fidelidad en Figma. Define una paleta de colores y un diseño grafico. Procura que esto te tome entre 1 o 2 días.
Explora la documentación de The Movie Database API. Inicia leyendo la sección Getting Started, luego AUTHENTICATION --> Application y finalmente las referencias de endpoints /discover/movie y /movie/{movie_id}.
Luego crear una cuenta y genera una llave (key) de acceso para consumir la API.
Finalmente, realiza peticiones HTTP de prueba a la API usando herramientas como Postman o REST Client. Identifica los headers, body, verbos, códigos de respuesta y encodings las peticiones.
La comunidad de desarrolladoras de cada framework se ha forzado mucho por crear documentaciones amigables para quienes inician con cada tecnología. Por lo tanto, date la oportunidad de explorar la documentación y probar sus ejemplos y tutoriales.
Toma la primera vista de prototipo de alta e implementala. Te sugerimos seguir los siguientes pasos independiente del framework que uses:
- Paso 1: Separa la UI en una jerarquía de componentes
- Paso 2: Construye una versión estática de la UI sin añadir ninguna interactividad aún
- Paso 3: Encuentra la representación mínima pero completa del estado de la UI. Piensa en el estado como el conjunto mínimo de datos cambiantes que la aplicación necesita recordar.
- Paso 4: Después de identificar los datos mínimos de estado de tu aplicación, debes identificar qué componente es responsable de cambiar este estado, o posee el estado.
- Paso 5: Identifica el flujo de comunicación entre cada componente: padre a hijo o hijo a padre. Implementa la estrategia identificada tal como te sugiere el framework.