Projeto de extensão: Movie Challenge

Índice

• 1. Preâmbulo
• 2. Resumo do projeto
• 3. Considerações gerais
• 4. Objetivos de aprendizagem
• 5. Critérios de aceitação mínimos do projeto
• 6. Considerações técnicas

---

1. Preâmbulo

A forma que vemos filmes mudou radicalmente durante os últimos anos devido, em parte, a aparição dos serviços de streaming que nos permite assistir em qualquer lugar e momento. O melhor reflexo deste fenômeno é o sucesso da Netflix, HBO e Disney+, etc.

Em tempos em que uma das principais ferramentas para combater a pandemia de Covid-19 é evitar compartilhar espaços com muitas pessoas (como no cinema), e assistir streaming será uma das poucas formas (ou a única) de ver filmes.

Acreditamos que há uma grande oportunidade de propor produtos/experiências inovadoras de tudo tipo utilizando dados de filmes (directorxs, atores/atrizes, sagas, sequências, datas, etc.). Poderíamos pensar em jogos, comunidades, catálogos, recomendações baseadas em gostos pessoais, etc. (apenas para mencionar algumas ideias obvias).

2. Resumo do projeto

A ideia deste projeto é que, usando uma API com informações de filmes, possa idealizar, planejar, organizar e desenvolver uma aplicação web que aproveite estes dados e tenha uma proposta de valor atrativa para os usuários.

Ainda que a decisão do que fazer é inteiramente sua, há algumas considerações gerais que se apresentam a seguir. Pode atender esses requisitos em projetos muitos distintos, depende de sua criatividade e do entendimento dos seus potenciais usuários!

3. Considerações gerais

• Este projeto deve ser feito em equipes de 2 ou mais pessoas.
• Devem escolher qual problema ou necessidades estão resolvendo com o produto que estão desenhando e desenvolvendo.
• Devem utilizar os dados da API de OMDB (The Open Movie Database) com Fetch ou qualquer outra API que encontrem.
• Pensem em test driven development no momento de programar a solução. Terão que escrever os testes unitários, aproveitem a oportunidade de fazer-lo antes de escrever a funcionalidade.
• Este projeto é "agnóstico" a tecnologia, ou seja, podem desenvolver em Vanilla JavaScript ou em algum framework ou biblioteca de sua escolha.
• Pense em um escopo que, considerando a sua complexidade e a quantidade de pessoas na equipe, permita a conclusão do projeto em 2 semanas.

4. Objetivos de aprendizagem

Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.

HTML

• Uso de HTML semântico

  Links

  • HTML semântico
  • Semantics in HTML - MDN

CSS

• Uso de seletores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caixa (box model): borda, margem, preenchimento

  Links

  • Modelo de Caixa e Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox em CSS

  Links

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

Web APIs

• Uso de seletores de DOM

  Links

  • Modificando o DOM
  • Introdução ao DOM - MDN
  • Locating DOM elements using selectors - MDN

• Manipulação de eventos de DOM (listeners, propagação, delegação)

  Links

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • Objeto Event

• Manipulação dinâmica de DOM

  Links

  • Introdução ao DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Diferenciar entre tipos de dados primitivos e não primitivos

• Arrays (arranjos)

  Links

  • Arranjos
  • 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 em JavaScript

• Variáveis (declaração, atribuição, escopo)

  Links

  • Valores, tipos de dados e operadores
  • Variáveis

• Uso de condicionais (if-else, switch, operador ternário, lógica booleana)

  Links

  • Estruturas condicionais e repetitivas
  • Tomando decisões no seu código — condicionais - MDN

• Uso de laços (while, for, for..of)

  Links

  • Laços (Loops)
  • Laços e iterações - MDN

• Funções (params, args, return)

  Links

  • Funções (controle de fluxo)
  • Funções clássicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários (unit tests)

  Links

  • Introdução ao Jest - Documentação oficial

• Módulos de ECMAScript (ES modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descritivos (Nomenclatura e Semântica)

• Diferença entre expressões (expressions) e declarações (statements)

Controle de Versões (Git e GitHub)

• Git: Instalação e configuração

• Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)

• Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)

• GitHub: Criação de contas e repositórios, configuração de chave SSH

• GitHub: Implantação com GitHub Pages

  Links

  • Site oficial do GitHub Pages

• GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)

user-centricity

• Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro

product-design

• Criar protótipos para obter feedback e iterar

• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

research

• Planejar e executar testes de usabilidade

5. Critérios de aceitação mínimos do projeto

• Utilizar a API de OMDB usando Fetch para obter e mostrar uma interface baseada nos dados de cada resposta.
• Independentemente do que decida fazer, deve selecionar dados aleatoriamente e mostrar-los em alguma das características de seu projeto. Para isto geralmente se usa o método random do objeto Math em JavaScript.
• Sua solução deve ser responsive. Deve se adaptar as telas desktop, tablets e celulares.
• Deve implantar a sua aplicação usando GitHub Pages.

6. Considerações técnicas

• Para usar a API de OMDB deve criar uma chave (key) de acesso e adiciona-la em cada requisição que faça ao servidor (revisar seção Usage de sua documentação). A chave pode ser gerada neste link preenchendo o formulário com a versão gratuita (free) selecionada, precisando verificar seu email para ativar e usá-la.
• Lembre que o GitHub Pages serve suas páginas com um certificado SSL, portanto as requisições a OMDB devem incluir https na URL.
• Lembre que há um limite de 1.000 requisições diárias à API de OMDB para cada IP. Acreditamos que é suficiente, mas te recomendamos o uso responsável deste recurso gratuito.

Conteúdo de referência

• Fetch
• Math.random

Se divirta e comece esta aventura 🎬!