- Preâmbulo
- Descrição
- Considerações gerais
- Objetivos de aprendizagem
- Parte obrigatória
- Parte opcional
- Considerações técnicas
- Primeiros passos
- Conteúdo de referência
- Checklist
Segundo um estudo da IBM, 90% dos dados que existem hoje foram criados durante os últimos dois anos. A cada dia geramos 2,5 trilhões de bytes de dados, uma cifra sem precedentes. Apesar disso, os dados por sozinhos são de pouca utilidade. Para que essas grandes quantidades de dados se convertam em informação fácil de ler para os usuários, temos que entendê-los e processá-los. Uma maneira simples de se fazer isso seria criando interfaces e visualizações. Na seguinte imagem, você pode ver de que forma, com os dados que vemos na parte esquerda, é possível construir uma interface amigável e legível para o usuário.
Você pode ver os detalhes dos dados neste link e a interface construída neste link.
Neste projeto você desenvolverá uma página web para visualizar um conjunto (set) de dados que se adeque ao que seu usuário necessita. Fornecemos a vocês uma série de dados de diferentes temáticas para que explore e decida com o que gostaria de trabalhar. Nós elegemos especificamente estes sets de dados porque acreditamos que se adequem bem a esta etapa de sua aprendizagem. Uma vez definida sua área de interesse, entenda quem é seu usuario e o que ele necessita saber ou ver exatamente; assim já poderá criar uma interface que o ajude a interagir e entender melhor os dados. Estes são os dados que propomos:
- Indicadores de desenvolvimento: Indicadores de desenvolvimento do Banco Mundial de alguns países (Brasil, Chile, México e Peru). Estes dados incluim indicadores demográficos, econômicos e comerciais.
- Pokémon: Neste set você encontrará uma lista com os 151 Pokémons da região de Kanto, junto com suas respectivas estatísticas usadas no jogo Pokémon GO.
- Steam notícias: Lista de notícias relacionadas aos jogos presentes na plataforma Steam.
- League of Legends - Challenger leaderboard: Este set de dados mostra a lista de jogadores em uma liga do jogo League of Legends (LoL). Você pode revisar a documentação de sua API neste link link.
- Pessoas feridas por meios de transporte nos EUA. Este set nos mostra o número de pessoas feridas em acidentes em meios de transporte, com a data anual desde 1960 e categorizada por tipo de transporte (aéreo, barco, automóvel, moto, bicicleta, etc).
Como produto final você terá que criar uma página web que permita visualizar
os dados, filtrá-los, ordená-los e fazer algum cálculo agregado. Como esclarecimento,
ao falar de cálculo agregado, nos referimos a diferentes cálculos que se pode fazer
com os dados e trazer informações ainda mais relevantes para o usuário. Uma opção
seriam cálculos estatísticos com média, mínimo e máximo. Por exepmplo, se temos
uma coleção que representa um grupo de pessoas e cada pessoa está representada
com um objeto com uma propriedade altura, poderíamos calcular a
altura média em um grupo, entre outras coisas.
Esperamos que cada set de dados esteja acompanhado de uma identidade gráfica condizente. Você pode pesquisar na internet para ter referências sobre cada um dos temas e trabalhar em uma identidade para sua página.
- Este projeto deve ser feito em duplas.
- O projeto será entregue através do Github (commit/push) e a interface será entregue pelo Github Pages.
O objetivo principal deste projeto é que você aprenda a desenvolver uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita.
Falando com mais clareza, você aprenderá a:
- Aplicar e aprofundar tudo o que aprendeu no projeto anterior.
- Pensar nas necessidades dos usuários para criar uma interface que faça sentido e com tarefas claras.
- Trabalhar com suas definições de pronto (definition of done) na organização e planificação de seu trabalho.
- Definir os dados e de que forma mostrá-los no produto, baseando-se em seu entendimento de usuário.
- Criar produtos que sigam os princípios básicos de usabilidade.
- Iterar o desenho do produto, baseando-se nos resultados dos testes de usabilidade.
- Manipular arrays e objetos.
- Manipular o DOM (agregar elementos dinamicamente, baseados nos dados).
- Manejar eventos do DOM para permitir interação com o usuário (dados filtrados, ordenados, etc).
- Entender os benefícios e complexidades de trabalhar em equipe em um ambiente de incertezas.
Os critérios para considerar que você completou o projeto são:
Documente brevemente seu trabalho no arquivo README.md de seu repositório,
nos contando como foi seu processo de desenvolvimento do projeto e como
acredita que seu produto resolve o problema (os problemas) do seu usuário.
Durante seu trabalho você deverá ter feito esboços de sua solução usando papel
e lápis. Recomendamos que você tire fotos de todas as iterações que faça, suba
para seu repositório, e as mencione em seuREADME.md. Caso queira, pode
desenhar protótipos de média fidelidade usando o Marvel
ou o Figma.
Durante o desafio você deverá realizar testes de usabilidade com diversos usuários. Com base nos resultados dos testes, você deverá reorganizar seu protótipo. Documente as diversas iterações para ter ideia da evolução e para conseguir resgatar ideias mais tarde.
Logo após desenhar sua interface de usuário você deverá trabalhar em sua implementação. Como mencionamos, não é necessário que desenvolva uma interface tal como a desenhou. Você terá um tempo limitado para codar, então, deverá priorizar. Como mínimo, sua implementação deve:
- Mostrar os dados em uma interface: pode ser um card, uma tabela, uma lista, etc.
- Permitir ao usuário filtrar e ordenar os dados.
- Calcular estatísticas como média aritmética, máximo e/ou mínimo de algum atributo numérico, ou contar quantas vezes aparece um determinado valor, por exemplo.
Features/características extras sugeridas:
- No lugar de consumir os dados de forma estática, você pode trabalhar com
eles de forma dinâmica, carregando um arquivo JSON por meio de um
fetch. A pastasrc/datacontém uma versão.jse uma.jsonde cada set de dados. - Agregar em sua interface de usuário visualizações gráficas. Para isso, recomendamos explorar bibliotecas de gráficos como Chart.js ou Google Charts.
Vídeo do Dani usando o HighCharts Vídeo da Ju usando o Google Charts
A lógica do projeto deve estar implementada completamente em JavaScript
(ES6), HTML e CSS. Neste projeto NÃO está permitido usar bibliotecas ou
frameworks, somente vanilla JavaScript, com exceção das
bibliotecas para fazer gráficos (charts).
Você não deve utilizar a pseudo-variable this.
O boilerplate contém uma estrutura de arquivos como ponto de partida
assim como toda configuração de dependências:
.
├── README.md
└──src
├── data
│ ├── injuries
│ │ ├── injuries.js
│ │ └── injuries.json
│ ├── lol
│ │ ├── lol.js
│ │ └── lol.json
│ ├── pokemon
│ │ ├── pokemon.js
│ │ └── pokemon.json
│ ├── steam
│ │ ├── steam.js
│ │ └── steam.json
│ └── worldbank
│ ├── worldbank.js
│ └── worldbank.json
├── index.html
├── main.js
└── style.css
8 directories, 16 files
Assim como no projeto anterior, existe um arquivo index.html. Como
você já sabe, aqui vai a página que se mostrará ao usuário. Também nos serve para indicar que scripts serão usados e unir tudo que fizemos.
Neste arquivo você encontrará uma série de etiquetas (tags) <script>
comentadas. Para carregar as diferentes fontes de dados você terá que
descomentar estas tags. Cada um destes scripts vai atribuir uma
variável global com os dados correspondentes a essa fonte de dados.
Por exemplo, se descomentamos a seguinte linha:
<!-- <script src="./data/worldbank/worldbank.js"></script> -->A linha ficaria assiim:
<script src="./data/worldbank/worldbank.js"></script>E agora teríamos a variável global WORLDBANK disponível em nossos
outros scripts (como src/data.js ou src/main.js).
Recomendamos usar src/main.js para toda a parte do seu código destinada
a mostrar dados na tela. Com isto nos referimos basicamente as manipulações de DOM: operações como criação de nós, registro de manipuladores de eventos (event listeners o event handlers), etc.
Esta não é a única forma de dividir seu código. Você pode usar mais arquivos e pastas para que sua estrutura fique clara para suas companheiras.
Nesta pasta estão os dados das diferentes fontes. Você encontrará uma pasta para cada fonte e dentro de cada pasta dois arquivos: um com a extensão .js e outro .json. Ambos arquivos contêm os mesmos dados; a diferença é que o .js usaremos através de uma tag <script>, enquanto
que o .json está aí para que você possa, caso queira, carregar os dados de forma assíncrona com fetch().
Te aconselhamos revisar a rúbrica para ver a descrição detalhada de cada habilidade e cada nível.
Esta é uma lista de todas as habilidades que avaliaremos ao final deste projeto:
CS Lógica Arquitetura Padrões/Paradigmas SCM Git GitHub JavaScript Nomenclatura/semântica Funções/modularidade Estruturas de dados HTML Validação Semântica CSS DRY
Antes de começar a escrever o código, você deve definir o que será feito com base nos conhecimentos que você possa obter dos usuários do seu produto. Essas perguntas podem te ajudar:
- Quem são os principais usuários de seu produto?
- Quais são os objetivos de seu usuário com relação ao seu produto?
- Quais os dados mais importantes que eles querem ver em sua interface?
- Quando utilizam ou utilizariam seu produto?
Quando já estiver pronta para codar, te recomendamos começar desta forma:
- Uma das integrantes da dupla deve realizar um 🍴 fork do repositório. Seus mentores compartilharão um link que te dará acesso ao repo. A outra integrante deve fazer um fork do repositório de sua companheira e trabalharem juntas.
- ⬇️ Clone seu fork para seu computador (cópia local).
- Let's code! 🚀
- Entrevistas com usuários
- Princípios de usabilidade
- Unidade de arrays no curso de JavaScript no LMS.
- Unidade de objetos no curso de JavaScript no LMS.
- Unidade de funções no curso de JavaScript no LMS.
- Unidade de DOM no curso de Browser JavaScript no LMS.
- Array no MDN
- Array.sort no MDN
- Array.map no MDN
- Array.filter no MDN
- Array.reduce no MDN
- Array.forEach no MDN
- Object.keys no MDN
- Object.entries no MDN
- Fetch API no MDN
- json.org
- Usar VanillaJS.
- Inclui Definição de produto clara e informativa no
README.md. - Inclui esboço da solução (protótipo de baixa fidelidade e de alta fidelidade, se houver) no
README.md. - Inclui a lista de problema detectados através dos testes de usabilidade
no
README.md. - UI: Mostra lista e/ou tabela com dados e/ou indicadores.
- UI: Permite ordenar os dados por meio de um ou mais campos (asc e desc).
- UI: Permite filtrar os dados com base em uma condição.