Movie Challenge

Índice

• 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

---

1. Preámbulo

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 será 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).

2. Resumen del proyecto

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!

3. Consideraciones generales

• Este proyecto se debe resolver individualmente.
• 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 OMDB (The Open Movie Database) con Fetch o cualquier otra API que encuentres.
• Piensa en test driven development al momento de programar la solución. Tendrás que escribir las pruebas unitarias, aprovecha la oportunidad de comenzar haciéndolo antes de escribir la funcionalidad.
• Debes desarrollarlo en Vanilla JavaScript
• Intenta pensar en un alcance que, considerando su complejidad.

4. Objetivos de aprendizaje

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.

HTML

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Diferenciar entre tipos de datos primitivos y no primitivos

• Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• Objetos (key, value)

  Links

  • Objetos en JavaScript

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

• Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

• 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

  Links

  • Sitio oficial de GitHub Pages

• GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

Investigación

• Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

5. Criterios de aceptación mínimos del proyecto

• Utilizar la API de OMDB mediante Fetch para obtener y mostrar una interfaz basada en los datos de cada respuesta.
• Lo que sea que decidas hacer, deberás seleccionar aleatoriamente datos y mostrarlos en alguna de las características de tu proyecto. Para esto generalmente se usa el método random del objeto Math en JavaScript.
• Tu solución debe ser responsive. Debe adaptarse a pantallas de escritorio, tabletas y teléfonos.
• Debes desplegar tu aplicación usando GitHub Pages.

6. Consideraciones técnicas

• Para poder usar la API de OMDB deberás crear una llave (key) de acceso y agregarla a cada petición que hagas al servidor (revisar sección Usage de su sitio web), la llave la generas en este link llenando el formulario con la versión gratuita (free) seleccionada y luego revisando tu email para activarla y poder usarla.
• Recuerda que GitHub Pages sirve sus páginas con un certificado SSL por lo que las peticiones a la OMDB deben incluir https en la URL.
• Recuerda que tienes un máximo de 1.000 peticiones diarias a la API de la OMDB por cada IP, creemos que es suficiente, pero te recomendamos hacer un uso responsable de este recurso gratuito.

Contenido de referencia

• Fetch
• Math.random

Trata de divertirte. ¡a empezar esta aventura 🎬!