- 1. Preâmbulo
- 2. Resumo do projeto
- 3. Definição de produto
- 4. Protótipos
- 5. Testes de usabiliade
- 6. Testes unitários
- 7. Checklist
- 8. Ferramentas utilizadas
- 9. Desenvolvedoras
Segundo a Forbes, 90% dos dados que existem hoje foram gerados durante os últimos dois anos. A cada dia geramos 2.5 milhões de terabytes de dados, uma cifra sem precedentes.
Apesar disso, os dados por si só são de pouca utilidade. Para que essas grandes quantidades de dados se convertam em informação compreensível para os usuários, precisamos entender e processar estes dados. Uma forma simples de fazer isso é criando interfaces e visualizações.
Neste projeto construímos uma página web para visualizar um conjunto (set) de dados que se adéquem às necessidades do nosso usuário. Como itens essenciais, era necessária uma interface que permita visualizar dados, filtrá-los, ordená-los e fazer algum cálculo agregado.
Definimos nossa área de interesse diante dos temas propostos e procuramos entender quem seria nosso usuário e o que exatamente ele necessitaria saber ou ver, para assim conseguir construir uma interface que o ajude a interagir e entender melhor os dados.
Este foi nosso "dado" escolhido:
- Pokémon: Neste conjunto você encontrará uma lista com os 251 Pokémons da região de Kanto e Johto, com suas respectivas estatísticas utilizadas no jogo Pokémon GO.
O objetivo principal deste projeto foi aprender a desenhar e construir uma interface web onde se possa visualizar e manipular dados, entendendo a necessidade do usuário.
O projeto foi construído para jogadores de Pokémon GO. Onde os usuários pudessem ter uma série de informações dos pokémons para assim ajudá-los nas estratégias de jogo.
Com tais informações sua escolha será mais precisa na hora de jogar. Para auxiliar na busca, o projeto conta com a barra de pesquisa, o filtro por tipo, e a opção de ordenar.
Para acessar o projeto clique aqui
Para a execução do projeto, planejamos um protótipo capaz de suprir as necessidades de nosso público-alvo. Partindo das seguintes histórias de usuários:
-
Eu, como jogador novato de Pokémon Go, quero ter acesso a uma lista de pokémons para conhecê-los;
-
Eu como jogador de Pokémon Go, quero ter opção de filtrar por tipo para saber quais e quantos pokémons pertencem ao tipo especificado;
-
Eu, como jogador, quero organizar os pokémons em ordem alfabética e numérica para encontrá-los com mais facilidade;
-
Eu como mestre pokémon, quero saber quantos candies serão necessários para um pokémon evoluir;
-
Eu como jogador de Pokémon Go, quero uma barra de pesquisa para buscar rapidamente um pokémon específico.
Ao acessar o site, o usuário clica na pokebola e será direcionado para uma página com todos os cards de pokémons. Cada card possui na parte frontal informações como: peso, altura, raridade, e geração. Ao passar o mouse pelo card, o mesmo vira e irá trazer informações de: fraqueza, resistência, evoluções e quantos candies são necessários para sua evolução.
Uma vez tendo essas referências do tópico acima, seguimos para o desenvolvimento de dois protótipos. Um voltado para desktop e outro para mobile.
Fizemos testes de usabilidades e constatamos que:
1º - A barra de pesquisa deveria aceitar somente letras e corrigimos esta questão na estrutura do HTML do projeto;
2º - Ao analisar todos os cards dos pokémons, haviam 2 cards (Golbat e Chansey) não continham os dados de candy-cost, pesquisamos e adicionamos as informações no arquivo de dados;
3º - Em telas de 1366 x 768, os cards ficavam com a altura cortando as informações, fizemos os ajustes necessários;
4º - Na utilização do filtro de tipos, o usuário ao selecionar a opção "todos os tipos" o campo aparecia vazio, sem nenhuma informação, colocamos uma condicional no código para quando o usuário escolher um tipo específico;
5º - Em alguns cards como, Eevee e Tyrogue, foi observado constarem algumas vírgulas(",,,") embaixo da tabela de evolução, corrigimos no código colocando o método join("") depois da tabela.
6º - Nos cards, o tamanho da letra do nome do pokémon estava pouco destacado. Resolvemos aumentar o tamanho da fonte.
7º - O nosso usuário sentiu falta de alguma descrição do que pode ser encontrado no site. Resolvemos isso colocando um alert assim que o usuário acessa a página dos cards.
Durante o projeto escrevemos nossos testes unitários para as funções encarregadas de processar, filtrar e ordenar os dados, assim como calcular estatísticas.
Nossos testes unitários tiveram uma cobertura mínima de 100% de statements (sentenças), 100% de functions (funções), 100% de lines (linhas), e 91.66% de branches (ramos) do arquivo src/data.js
Ao rodar os testes, observamos que apesar da cobertura de 100% das linhas, uma em específico não foi coberta pelos testes. Tivemos a orientação que isso não iria impactar no resultado final do projeto, uma das possibilidades seria algum bug no Jest.
- [✓] Usar VanillaJS.
- [✓] Passar pelo linter (
npm run pretest) - [✓] Passar 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.
- Git
- GitHub
- HTML
- CSS
- JavaScript
- Node.js
- Jest
- Figma
- Trello
