/Rick-and-Morty

Primary LanguageJavaScript

Rick and Morty - Who's this mysterious character?

O objetivo deste projeto é criar uma aplicação web que exibe um conjunto de dados sobre a série. O site permite a visualização, bem como filtrar, ordenar e obter informações estatísticas sobre os personagens da animação.

Índice

1. Introdução

Em 2013, foi lançada Rick and Morty. A série de animação adulta conta as aventuras repletas de ficção científica e comédia de Rick e seu neto não muito brilhante, o Morty. A série é americana e tem sido exibida em várias regiões do mundo, possui boas críticas nos principais sites de avaliação. Rick and Morty se originou de uma paródia animada em curta metragem do filme De volta para o futuro.

2. Histórias de usuários

1º História: para fãs da série

Foi definido que seria relevante ter funcionalidades que pudessem entregar informações sobre o status dos personagens, se ele está vivo ou morto na história. A série contém um número elevado de personagens e os fãs gostariam de obter esse dado.

2º História: para interessados em ficção científica

Foi definido que seria relevante ter funcionalidades que pudessem entregar informações sobre as espécies e a origem dos personagens, pois esses são temas relacionados à ficção científica.

3. Desenvolvimento de layout

Protótipo de baixa fidelidade

Protótipo de baixa fidelidade

Paleta de cores

Escolhemos a paleta de cores com base em uma imagem da série. As cores mais utilizadas foram:

Paleta de cores -fullwidth

Interface

Interface

Interface

Interface

4. Testes de usabilidade

O nosso formulário de usabilidade está aqui.

As sugestões de alterações enviadas pelos usuários por meio do formulário foram:

  1. Diminuir a margem entre as logos do site e o início da página;

  2. Incluir o botão "Limpar filtro";

  3. Ajustar o tamanho dos cards na versão mobile;

  4. Aumentar o tamanho da fonte nas informações sobre os personagens;

Todas as alterações foram executadas.

5. Objetivos de aprendizagem

HTML e CSS

DOM e Web APIs

  • Uso de seletores de DOM.
  • Gerenciamento de eventos de DOM.
  • Manipulação dinâmica de DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

  • Uso de condicionais (if-else | switch | operador ternário)
  • Uso de laços (for | for..in | for..of | while)
  • Uso de funções (parâmetros | argumentos | valor de retorno)
  • Manipular arrays (filter | map | sort | reduce)
  • Manipular objects (key | value)
  • Uso ES modules (import | export)
  • Diferenciar entre expression e statements.
  • Diferenciar entre tipos de dados atômicos e estruturados.

Testing

Estrutura do código e guia de estilo

  • Organizar e dividir o código em módulos (Modularização)
  • Uso de identificadores descritivos (Nomenclatura | Semântica)
  • Uso de linter (ESLINT)

Git e GitHub

  • Uso de comandos de git (add | commit | pull | status | push)
  • Gerenciar repositórios de GitHub (clone | fork | gh-pages)
  • Colaboração no Github (branches | pull requests | |tags)

9. Checklist

  • Usar VanillaJS.
  • Não utilizar this.
  • Passa pelo linter (npm run pretest)
  • Passa pelos testes (npm test)
  • Testes unitários cobrem um mínimo de 70% de statements, functions, lines e branches.
  • Inclui uma definição de produto clara e informativa no README.md.
  • Inclui histórias de usuário no README.md.
  • Inclui rascunho da solução (protótipo de baixa fidelidade) no README.md.
  • Inclui uma lista de problemas detectados nos testes de usabilidade no README.md.
  • UI: Mostra lista/tabela/etc com dados e/ou indicadores.
  • UI: Permite ordenar dados por um ou mais campos (asc e desc).
  • UI: Permite filtrar dados com base em uma condição.
  • UI: É responsivo.