- 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. Deploy
- 8. Consideraciones para pedir tu project feedback
- 9. Consejos, guías 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.
En tiempos en los que una de las principales herramientas para combatir la pandemia de Covid-19 es evitar compartir espacios con muchas personas (como en el cine), ver películas por streaming es una de las pocas maneras de hacerlo (¿o la única?).
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 para ver, filtrar y ordenar el catálogo de peliculas de la The Movie Database API V3. Esta página puede servir como un catálogo de películas general, pero también si ud quiere, puede considerar la posibilidad de diseñarlo para un público en específico con preferencias como "películas occidentales" o "películas de los 80", por ejemplo.
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!
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
-
Fetch API
-
Ruteado (History API, evento hashchange, window.location)
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Diferenciar entre expresiones (expressions) y sentencias (statements)
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
Arrays (arreglos)
-
Objetos (key, value)
-
Callbacks
-
Promesas
-
Pruebas unitarias (unit tests)
-
Uso de mocks y espías
-
Pruebas asíncronas
-
Módulos de ECMAScript (ES Modules)
-
Consulta o petición (request) y respuesta (response).
-
Cabeceras (headers)
-
Códigos de status de HTTP
-
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)
- 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
- Este proyecto se debe resolver individual.
- El plazo estimado para completar el proyecto es de 4 Sprints.
- Además, debes definir la estructura de carpeta y los archivos que considera que sean necesario. Por lo tanto, las pruebas y la configuración requeridas para ejecutarlos será su responsabilidad, para hacerlo puedes basarte en los proyectos anteriores.
-
La aplicación debe ser una aplicación de una sola página.
-
Las pruebas unitarias deben cubrir al menos el 90% statements, functions, lines y branches.
-
La aplicación debe ser responsive.
-
Para poder usar la La API V3 de la Base de Datos de Películas deberás crear una llave (key) de acceso agregarla a cada petición que hagas al servidor
-
Recuerda que tienes un máximo de 1.000 peticiones diarias a la API por cada IP, creemos que es suficiente, pero te recomendamos hacer un uso responsable de este recurso gratuito.
El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:
.
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── package.json
├── README.md
├── src
├── components
│ ├── App.js
│ └── App.spec.js
├── index.html
├── main.js
└── style.css
Como en el proyecto anterior, hay un archivo index.html . Como ya sabes, aquí
ingresa la página que se mostrará al usuario. También sirve para indicar cuales
son los scripts se utilizarán y armarán todo lo que se ha hecho.
Recomendamos usar src/main.js, como punto de entrada de tu aplicación. El
boilerplate incluye este archivo para conectar o montar el componente App
en el DOM. De esta manera podemos hacer test unitarios de nuestros componentes
que necesitemos que están conectados a una DOM global.
Aquí es donde recomendamos implementar su SPA (Single Page Application).
Esta no es la única manera de dividir tu código. Puede utilizar más archivos y carpetas, siempre que la estructura esté clara.
Este archivo contiene un componente ejemplo que muestra cómo podemos representar
un componente en función que devuelve un HTMLElement. A la hora de construir
interfaces, es útil pensar en los términos de los componentes o vistas que
podemos anidar una dentro de las otras. Te invitamos a que pienses
en qué componentes o cajita se necesitas para construir tu aplicación y que
componentes añade en la dirección components a aplicar a cada uno de ellos.
Aunque de nuevo al final, la manera de organizar sus archivos depende de de ti y
tu equipo. Hay muchas maneras de hacerlo, y el boilerplate es sólo una
sugerencia".
Este archivo muestra cómo podemos crear archivos con especificaciones (expresado como test unitarios) de nuestros componentes.
El Product Owner nos proporciona una primera iteración del prototipo de baja fidelidad de la aplicación en esta imagen de pagina de detalle y en este imagen de lista de peliculas otro.
Tenemos dos opciones para un backlog de Historias de Usuario. Lo que eliges depende en los objetivos de aprendizaje que tienes que reforzar. Habla con un coach si necesitas ayuda en elegir cual camino.
- Backlog 1 - Refuerza objetivos de arreglos, objetos y sus metódos antes de aprender HTTP y javascript asíncrona.
- Backlog 2 - Empieza con el uso de un API y objetivos HTTP y javascript asíncrona.
Puede elegir el proveedor (o proveedores) que prefiera, junto con el mecanismo de deploy y la estrategia de hospedía. Recomendamos explorar las siguientes opciones:
- Vercel es una plataforma que permite desplegar nuestra aplicación web estática (HTML, CSS, JavaScript) y también permite implementar aplicaciones web que se ejecutan en el servidor (Node.js).
- Netlify es similar a Vercel, siendo una plataforma que permite implementar nuestra aplicación web estática (HTML, CSS y JavaScript) y también permite implementar aplicaciones web que se ejecutan en el servidos (Node.js).
Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:
- Tiene prototipo de alta fidelidad en Figma
- Tiene todos los Criterios minimos de Aceptación
- El código deberá esta en Github
- Esta con Deploy
- Tiene un Readme con definición de 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.
Basandote en el prototipo de baja fidelidad proporcionado, deberás crear un prototipo de alta fidelidad en Figma. Agrega paleta de colores y un diseño gráfico. Intenta terminar en 1 o 2 días como máximo.
Explora la documentación de la API de la base de datos de la Película. Comienza leyendo la sección Getting Started, despues continúa AUTHENTICATION --> Application y finalmente las referencias de los endpoints /discover/movie y /movie/{movie_id}
Deberás crear una cuenta y generar una clave(key) de acceso para consumir la API
Por último, puedes probar hacer peticiones HTTP a la API utilizando herramientas como Postam o REST Client Identificando encabezados(header), cuerpo(body), verbos, códigos de respuesta y códigos de solicitudes.
Toma la primera historia de usuario y dividela en tareas más pequeñas, identificando el orden y prioridades de cada tarea. Documenta tu planificación en Trello o Github Project.
Antes de comenzar con el código de Router, asegúrate de entender los conceptos de una single page aplication (SPA) y enrutado (router) de páginas. Investiga las mejores prácticas y herramientas disponibles para implementar una SPA en tu proyecto.
Depende en los tiempos de tu proyecto, podemos recomendar hacer una
SPA más simple usando hashchange. Este video
puede ayudarte a construir tu SPA en main.js de tu proyecto.
Si puedes tomarte el tiempo y quieres profundizar en las rutas y en la
construcción de una SPA mas robusta, como Hacker Edition, puedes inplementar
Router con JavaScript puro
Trata de divertirte. ¡a empezar esta aventura 🎬!