- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Consideraciones generales
- 4. Objetivos de aprendizaje
- 5. Criterios de aceptación mínimos del proyecto
- 6. Consideraciones técnicas
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).
La idea de este proyecto es que, usando una API con información de películas, puedas idear, planear, organizar y desarrollar una aplicación web que aproveche estos datos y tenga una propuesta de valor atractiva para lxs usuarixs.
Aunque la decisión de qué hacer es enteramente tuya, hay algunas consideraciones generales que se presentan a continuación. Puedes cumplir esos requisitos en proyectos muy diferentes, ¡depende de tu creatividad y del entendimiento que tengas de tus potenciales usuarixs!
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.
- Este proyecto se debe resolver en equipos de 3 personas como máximo.
- Debes elegir y sustentar qué problema o necesidad estás resolviendo con el producto que estás diseñando y desarrollando.
- Debes utilizar los datos de la API de The Movie Database API V3 o OMDB (The Open Movie Database) o cualquier otra API que encuentres.
- Para implementar este proyecto debes elegir un framework entre React o Angular.
- Intenta pensar en un alcance que, considerando su complejidad y la cantidad de personas en el equipo, permita terminar el proyecto en 3 o 4 semanas.
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
-
Pruebas unitarias (unit tests)
-
Pruebas asíncronas
-
Uso de mocks y espías
-
Módulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
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
-
Chequeo estático de tipos
-
Rigurosidad
-
Tipos primitivos
-
Arreglos
-
Tipo
any
-
Funciones
-
Propiedades opcionales
-
Tipos Union
-
Alias de tipos
-
Interfaces
-
Type assertions
-
Tipos literales
-
basic-types/null-and-undefined
-
Enums
-
Narrowing
-
classes/members/fields
-
classes/members/constructor
-
classes/members/methods
-
classes/members/getter-setters
-
classes/class-heritage/implements
-
classes/class-heritage/extends
-
classes/member-visibility/public
-
classes/member-visibility/protected
-
classes/member-visibility/private
-
Miembros de clase estáticos
-
this
-
Clases abstractas
-
Decoradores
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
-
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
- Utilizar la The Movie Database API V3 o OMDB o cualquier otra API mediante fetch para obtener y mostrar una interfaz basada en los datos de cada respuesta.
- Tu solución debe ser responsive. Debe adaptarse a pantallas de escritorio, tabletas y teléfonos.
- Debes desplegar tu aplicación en cualquier servicio en la nube. Algunas opciones son GitHub Pages o Vercel o Netlify
- Para poder usar la API de The Movie Database API V3 o OMDB deberás crear una llave (key) de acceso y agregarla a cada petición que hagas al servidor.
- Recuerda que GitHub Pages sirve sus páginas con un certificado
SSL por lo
que las peticiones a las APIs deben incluir
httpsen la URL. - 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.
Trata de divertirte. ¡a empezar esta aventura 🎬!