├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── EXTRA.md ├── FAQ.md ├── README.md ├── package.json ├── src ├── data.js ├── data │ ├── athletes │ │ ├── README.md │ │ ├── README.pt-BR.md │ │ ├── athletes.js │ │ └── athletes.json │ ├── ghibli │ │ ├── README.md │ │ ├── README.pt-BR.md │ │ ├── ghibli.js │ │ └── ghibli.json │ ├── harrypotter │ │ ├── README.md │ │ ├── README.pt-BR.md │ │ ├── data.js │ │ └── harry.json │ ├── lol │ │ ├── README.md │ │ ├── README.pt-BR.md │ │ ├── lol.js │ │ └── lol.json │ ├── pokemon │ │ ├── README.md │ │ ├── README.pt-BR.md │ │ ├── pokemon.js │ │ └── pokemon.json │ └── rickandmorty │ │ ├── README.md │ │ ├── README.pt-BR.md │ │ ├── rickandmorty.js │ │ └── rickandmorty.json ├── index.html ├── main.js └── style.css ├── test ├── .eslintrc └── data.spec.js └── thumb.png /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/data 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "parserOptions": { 6 | "ecmaVersion": 2018, 7 | "sourceType": "module" 8 | }, 9 | "extends": "eslint:recommended", 10 | "rules": { 11 | "no-console": "warn", 12 | "import/extensions": 0 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.swp 3 | coverage/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /EXTRA.md: -------------------------------------------------------------------------------- 1 | # Data Lovers, viaje extendido 2 | 3 | ![Travel pic](https://assets-auto.rbl.ms/5fefc7fee587f0e4aca6794810f346d3c555463eed4e21eaa015d6fc9e6bcb5d) 4 | [Fuente](https://www.theodysseyonline.com/road-trips-worthwhile) 5 | 6 | ## Resumen 7 | 8 | Después de unas semanas trabajando en el proyecto, queremos proponerte una 9 | _segunda parte_ que se adapte a tu proceso de aprendizaje **individual**. 10 | Esto permitirá que consolides, profundices y/o complementes lo aprendido. 11 | 12 | Las alternativas son las siguientes: 13 | 14 | ### 1. Si no terminaste la "Parte Obligatoria" del proyecto 15 | 16 | Pues termínala ¿no? No te olvides de que estás acá para aprender y no para 17 | simplemente "pasar" de un proyecto a otro y tener la ilusión de que aprendes. 18 | No estás compitiendo con nadie más que contigo misma. 19 | 20 | Completa el proyecto original con todo lo que se especifica en 21 | la [parte obligatoria](README.md#parte-obligatoria). 22 | 23 | ### 2. Si completaste la "Parte Obligatoria" 24 | 25 | Tienes estas opciones: 26 | 27 | 2.1. Haz la "Parte Opcional" [(Hacker Edition)](README.md#parte-opcional-hacker-edition). 28 | Enfócate en los dos puntos principales: _cargar la data usando [`fetch`](https://developer.mozilla.org/es/docs/Web/API/Fetch_API)_ 29 | y/o _agregar gráficas con [`Chart.js`](https://www.chartjs.org/) 30 | o [`Google Charts`](https://developers.google.com/chart/)_. Si ya hiciste esto, 31 | pasa a las siguientes opciones (obviamente). 32 | 33 | 2.2. Si quieres explorar un poco más sobre el Diseño de Experiencia de Usuario 34 | (_UX Design_), te proponemos hacer sesiones de _testeo de usabilidad con 35 | usuarios_ y una evaluación heurística de tu sitio completo. Recuerda incorporar 36 | aprendizajes y oportunidades de mejora en tu _readme_. Haz una búsqueda de 37 | referentes de diseño visual para tu sitio que te sirvan de inspiración para 38 | resolver desafíos de interfaz. A partir de todos estos aprendizajes de 39 | usabilidad y diseño visual, trabaja en una iteración de la interfaz de tu sitio. 40 | 41 | Así podrás, además, reforzar tus conocimientos sobre _heurísticas de usabilidad_ 42 | y principios de diseño visual. 43 | 44 | 2.3 Si quieres profundizar sobre lo ya aprendido de Front-end y codear 45 | un poco más, elige otra [fuente de datos](README.md#resumen-del-proyecto) para hacer 46 | otro "Producto". Por ejemplo, si hiciste una visualización con datos del 47 | Banco Mundial, puedes aplicar todo lo aprendido para, esta vez, hacer una 48 | sobre Pokémon. 49 | 50 | 2.4 [Refactoriza](https://es.wikipedia.org/wiki/Refactorizaci%C3%B3n) tu código 51 | para aumentar la cobertura de _tests_ (incluyendo pruebas para componentes de 52 | interfaz). 53 | 54 | ## Consideraciones generales 55 | 56 | - Esta segunda parte del proyecto es _individual_, salvo alguna excepción que 57 | decida tu _Training Manager_. 58 | 59 | - Es responsabilidad de lxs _coaches_ y la _Training Manager_, después de las 60 | entrevistas del final del proyecto original "Data Lovers", aconsejar y validar 61 | qué opciones de todas las detalladas en este `README.md`, se adecúan más 62 | a cada estudiante. 63 | 64 | ## ¿Cómo empezar? 65 | 66 | Para actualizar tu fork/rama de este proyecto con este archivo (`EXTRA.md`), 67 | puedes hacer _pull_ de los cambios desde la rama `main` del remoto de 68 | `Laboratoria` con un comando como el siguiente: 69 | 70 | ```sh 71 | git pull 72 | ``` 73 | 74 | Por ejemplo, si el repo de tu cohort es 75 | `https://github.com/Laboratoria/LIM014-data-lovers.git`: 76 | 77 | ```sh 78 | git pull https://github.com/Laboratoria/LIM014-data-lovers.git main 79 | ``` 80 | -------------------------------------------------------------------------------- /FAQ.md: -------------------------------------------------------------------------------- 1 | # FAQ (preguntas frecuentes) 2 | 3 | - [Diferencia entre array y objetos](https://youtu.be/mJJloQY7A8Y) 4 | - [¿Cómo agrego una nueva propiedad a un objeto?](https://youtu.be/mJJloQY7A8Y?t=236) 5 | - [¿Cómo puedo recorrer un objeto?](https://youtube.com/01RHn23Bn_0) 6 | - [map, filter, sort y reduce también son métodos para objetos](https://youtu.be/bUl1R2lQvKo) 7 | - [Diferencia entre expression y statements](https://youtu.be/wlukoWco2zk) 8 | - [Diferencia entre createElement e innerHTML](https://www.javascripttutorial.net/javascript-dom/javascript-innerhtml-vs-createelement/) 9 | - [¿Qué es el Scope?](https://youtu.be/s-7C09ymzK8) 10 | - ¿Qué es git y por qué debo usarlo? 11 | - GitHub Colaborativo 12 | - ¿Qué es un Merge y existen alternativas? (Rebase) 13 | - ¿Existe una "buena forma" de usar git? 14 | 15 | [Para estas preguntas sobre Git recomendamos ver este playlist](https://www.youtube.com/watch?v=F1EoBbvhaqU&list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV) 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Data Lovers 2 | 3 | ## Índice 4 | 5 | * [1. Preâmbulo](#1-preâmbulo) 6 | * [2. Resumo do projeto](#2-resumo-do-projeto) 7 | * [3. Objetivos de aprendizagem](#3-objetivos-de-aprendizagem) 8 | * [4. Considerações gerais](#4-considerações-gerais) 9 | * [5. Critérios mínimos de aceitação do 10 | projeto](#5-critérios-mínimos-de-aceitação-do-projeto) 11 | * [6. Hacker edition](#6-hacker-edition) 12 | * [7. Considerações técnicas](#7-considerações-técnicas) 13 | * [8. Pistas, dicas e leituras 14 | complementares](#8-pistas-dicas-e-leituras-complementares) 15 | * [9. Checklist](#9-checklist) 16 | 17 | *** 18 | 19 | ## 1. Preâmbulo 20 | 21 | Segundo a 22 | [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read) 23 | 90% dos dados que existem hoje foram gerados durante os últimos dois anos. A 24 | cada dia geramos 2.5 milhões de terabytes de dados, uma cifra sem precedentes. 25 | 26 | Apesar disso, os dados por si só são de pouca utilidade. Para que essas grandes 27 | quantidades de dados se convertam em **informação** compreensível para os 28 | usuários, precisamos entender e processar estes dados. Uma forma simples de 29 | fazer isso é criando _interfaces_ e _visualizações_. 30 | 31 | Na imagem seguinte, você pode ver como os dados que estão na parte esquerda 32 | podem ser usados para construir a interface amigável e compreensível que está na 33 | parte direita. 34 | 35 | ![json-interface](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) 36 | 37 | ## 2. Resumo do projeto 38 | 39 | Neste projeto você **construirá uma _página web_ para visualizar um _conjunto 40 | (set) de dados_** que se adeque às necessidades de seu usuário. 41 | 42 | Como entregável final terá uma página web que permita **visualizar dados, 43 | filtrá-los, ordená-los e fazer algum cálculo agregado**. Por cálculo agregado 44 | nos referimos aos diversos cálculos que podem ser feitos com os dados para 45 | mostrar a informação mais relevante para os usuários (médias, valores máximos e 46 | mínimos, etc). 47 | 48 | Para este projeto trazemos uma série de dados de _temáticas diferentes_ para que 49 | você explore e decida com qual delas deseja trabalhar. Escolhemos 50 | especificamente estes conjuntos de dados porque cremos que se adequem bem a esta 51 | etapa de sua aprendizagem. 52 | 53 | Uma vez que você defina sua área de interesse, busque entender quem é seu 54 | usuário e o que exatamente ele necessita saber ou ver, para que assim possa 55 | construir a interface que o ajude a interagir e entender melhor os dados. 56 | 57 | Este são os dados que propomos: 58 | 59 | * [Pokémon](src/data/pokemon/pokemon.json): Neste conjunto você encontrará uma 60 | lista com os 151 Pokémon da região de Kanto, com suas respectivas estatísticas 61 | utilizadas no jogo [Pokémon GO](http://pokemongolive.com). 62 | - [Pesquisa com jogadores de Pokémon Go](src/data/pokemon/README.pt-BR.md) 63 | 64 | * [League of Legends - Challenger leaderboard](src/data/lol/lol.json): Este 65 | conjunto mostra a lista de jogadores de uma liga do jogo League of Legends 66 | (LoL). 67 | - [Pesquisa com jogadores de LoL](src/data/lol/README.pt-BR.md) 68 | 69 | * [Rick and Morty](src/data/rickandmorty/rickandmorty.json). Lista de 70 | personagens da série Rick & Morty. Você pode revisar a documentação da API 71 | neste [link](https://rickandmortyapi.com). 72 | - [Pesquisa com seguidores de Rick and Morty](src/data/rickandmorty/README.pt-BR.md) 73 | 74 | * [Jogos Olímpicos do Rio de Janeiro](src/data/atletas/atletas.json). 75 | Este conjunto nos fornece a lista de atletas que conquistaram medalhas nas 76 | Olimpíadas do Rio de Janeiro. 77 | - [Pesquisa com stakeholders dos Jogos Olímpicos do Rio de Janeiro](src/data/atletas/README.pt-BR.md) 78 | 79 | * [Studio Ghibli](src/data/ghibli/ghibli.json). 80 | Lista de animações e personagens do [Studio Ghibli](https://ghiblicollection.com/). 81 | - [Pesquisa com seguidores de Studio Ghibli](src/data/ghibli/README.pt-BR.md) 82 | 83 | * [Harry Potter](src/data/harrypotter/harry.json). 84 | Este conjunto nos fornece uma lista dos personagens, livros e feitiços de toda 85 | a saga Harry Potter 86 | [Harry Potter](https://harrypotter.fandom.com). 87 | - [Pesquisa com seguidores de Harry Potter](src/data/harrypotter/README.md) 88 | 89 | O objetivo principal deste projeto é que aprenda a desenhar e construir uma 90 | interface web onde se possa visualizar e manipular dados, entendendo o que o 91 | usuário necessita. 92 | 93 | ## 3. Objetivos de aprendizagem 94 | 95 | Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho. 96 | 97 | ### HTML 98 | 99 | - [ ] **Uso de HTML semântico** 100 | 101 |
Links

102 | 103 | * [HTML semântico](https://curriculum.laboratoria.la/pt/topics/html/02-html5/02-semantic-html) 104 | * [Semantics in HTML - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) 105 |

106 | 107 | ### CSS 108 | 109 | - [ ] **Uso de seletores de CSS** 110 | 111 |
Links

112 | 113 | * [Intro a CSS](https://curriculum.laboratoria.la/pt/topics/css/01-css/01-intro-css) 114 | * [CSS Selectors - MDN](https://developer.mozilla.org/pt_BR/docs/Web/CSS/CSS_Selectors) 115 |

116 | 117 | - [ ] **Empregar o modelo de caixa (box model): borda, margem, preenchimento** 118 | 119 |
Links

120 | 121 | * [Modelo de Caixa e Display](https://curriculum.laboratoria.la/pt/topics/css/01-css/02-boxmodel-and-display) 122 | * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) 123 | * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) 124 | * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) 125 | * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) 126 |

127 | 128 | - [ ] **Uso de flexbox em CSS** 129 | 130 |
Links

131 | 132 | * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 133 | * [Flexbox Froggy](https://flexboxfroggy.com/#pt-br) 134 | * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) 135 |

136 | 137 | ### Web APIs 138 | 139 | - [ ] **Uso de seletores de DOM** 140 | 141 |
Links

142 | 143 | * [Modificando o DOM](https://curriculum.laboratoria.la/pt/topics/browser/02-dom/03-1-dom-methods-selection) 144 | * [Introdução ao DOM - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction) 145 | * [Locating DOM elements using selectors - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) 146 |

147 | 148 | - [ ] **Manipulação de eventos de DOM** 149 | 150 |
Links

151 | 152 | * [Introdução a eventos - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events) 153 | * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener) 154 | * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/removeEventListener) 155 | * [Objeto Event](https://developer.mozilla.org/pt-BR/docs/Web/API/Event) 156 |

157 | 158 | - [ ] **Manipulação dinâmica de DOM** 159 | 160 |
Links

161 | 162 | * [Introdução ao DOM](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM/Introdu%C3%A7%C3%A3o) 163 | * [Node.appendChild() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild) 164 | * [Document.createElement() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElement) 165 | * [Document.createTextNode()](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createTextNode) 166 | * [Element.innerHTML - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML) 167 | * [Node.textContent - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/textContent) 168 |

169 | 170 | ### JavaScript 171 | 172 | - [ ] **Diferenciar entre tipos de dados primitivos e não primitivos** 173 | 174 | - [ ] **Manipular arrays (filter, map, sort, reduce)** 175 | 176 |
Links

177 | 178 | * [Arrays](https://curriculum.laboratoria.la/pt/topics/javascript/04-arrays) 179 | * [Array - MDN](https://developer.mozilla.org//pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/) 180 | * [Array.prototype.sort() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 181 | * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 182 | * [Array.prototype.map() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 183 | * [Array.prototype.filter() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 184 | * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) 185 |

186 | 187 | - [ ] **Manipular objects (key | value)** 188 | 189 |
Links

190 | 191 | * [Objetos em JavaScript](https://curriculum.laboratoria.la/pt/topics/javascript/05-objects/01-objects) 192 |

193 | 194 | - [ ] **Variáveis (declaração, atribuição, escopo)** 195 | 196 |
Links

197 | 198 | * [Valores, tipos de dados e operadores](https://curriculum.laboratoria.la/pt/topics/javascript/01-basics/01-values-variables-and-types) 199 | * [Variáveis](https://curriculum.laboratoria.la/pt/topics/javascript/01-basics/02-variables) 200 |

201 | 202 | - [ ] **Uso de condicionais (if-else, switch, operador ternário)** 203 | 204 |
Links

205 | 206 | * [Estruturas condicionais e repetitivas](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/01-conditionals-and-loops) 207 | * [Tomando decisões no seu código — condicionais - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals) 208 |

209 | 210 | - [ ] **Uso de laços (for, for..of, while)** 211 | 212 |
Links

213 | 214 | * [Laços (Loops)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/02-loops) 215 | * [Laços e iterações - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration) 216 |

217 | 218 | - [ ] **Uso de funções (parâmetros, argumentos, valor de retorno)** 219 | 220 |
Links

221 | 222 | * [Funções (controle de fluxo)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/03-functions) 223 | * [Funções clássicas](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/01-classic) 224 | * [Arrow Functions](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/02-arrow) 225 | * [Funções — blocos reutilizáveis de código - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions) 226 |

227 | 228 | - [ ] **Testes unitários** 229 | 230 |
Links

231 | 232 | * [Introdução ao Jest - Documentação oficial](https://jestjs.io/docs/pt-BR/getting-started) 233 |

234 | 235 | - [ ] **Módulos de ECMAScript (ES modules)** 236 | 237 |
Links

238 | 239 | * [import - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) 240 | * [export - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export) 241 |

242 | 243 | - [ ] **Uso de linter (ESLINT)** 244 | 245 | - [ ] **Uso de identificadores descritivos (Nomenclatura | Semântica)** 246 | 247 | - [ ] **Diferença entre expression e statements** 248 | 249 | ### Controle de Versões (Git e GitHub) 250 | 251 | - [ ] **Git: Instalação e configuração** 252 | 253 | - [ ] **Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)** 254 | 255 | - [ ] **Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)** 256 | 257 | - [ ] **GitHub: Criação de contas e repositórios, configuração de chave SSH** 258 | 259 | - [ ] **GitHub: Implantação com GitHub Pages** 260 | 261 |
Links

262 | 263 | * [Site oficial do GitHub Pages](https://pages.github.com/) 264 |

265 | 266 | - [ ] **GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)** 267 | 268 | ### user-centricity 269 | 270 | - [ ] **Desenhar a aplicação pensando e entendendo a usuária** 271 | 272 | ### product-design 273 | 274 | - [ ] **Criar protótipos para obter feedback e iterar** 275 | 276 | - [ ] **Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)** 277 | 278 | ### research 279 | 280 | - [ ] **Planejar e executar testes de usabilidade** 281 | 282 | ## 4. Considerações gerais 283 | 284 | * Este projeto será executado em duplas. 285 | * Este projeto será entregue através do GitHub e a interface deve ser publicada 286 | no [GitHub Pages](https://pages.github.com/). 287 | * Tempo para completá-lo: Tome como referencia 4 semanas. 288 | 289 | ## 5. Critérios mínimos de aceitação do projeto 290 | 291 | Os critérios considerados para que tenha terminado este projeto são: 292 | 293 | ### Definição de produto 294 | 295 | Documente brevemente seu trabalho no arquivo `README.md` de seu repositório, 296 | contando como foi o processo de desenho e como você acredita que o produto possa 297 | resolver o problema (ou problemas) de seu usuário. 298 | 299 | ### Histórias de usuário 300 | 301 | Uma vez que entenda a necessidade dos usuários, escreva as [Historias de 302 | Usuario](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) que 303 | representem tudo que o usuário precisa fazer/ver. As **histórias de usuário** 304 | devem ser o resultado de seu processo de investigação/pesquisa de seus usuários. 305 | 306 | Não esqueça de incluir a definição de pronto (_definition of done_) e os 307 | critérios de aceitação para cada uma. 308 | 309 | Na medida do possível, termine uma história de usuário antes de passar para a 310 | seguinte (cumpra com as definições de pronto + critérios de aceitação). 311 | 312 | ### Desenho de interface do usuário 313 | 314 | #### Protótipo de baixa fidelidade 315 | 316 | Durante seu trabalho você deverá fazer e iterar rascunhos de sua solução usando 317 | lápis e papel. Recomendamos que fotografe todas as iterações que fizer, suba 318 | para seu repositório e as mencione no `README.md`. 319 | 320 | #### Protótipo de alta fidelidade 321 | 322 | O passo seguinte é desenhar sua Interface de Usuário (UI - _User Interface_). 323 | Para isso você deverá aprender a usar alguma ferramenta de _visual design_. Nós 324 | recomendamos [Figma](https://www.figma.com/) que é uma ferramenta que funciona 325 | no navegador e no qual é possível criar uma conta gratuita. Mas você é livre 326 | para usar outros editores gráficos como Illustrator, Photoshop, PowerPoint, 327 | Keynote, etc. Lembre-se de usar a identidade gráfica correspondente ao arquivo 328 | de dados que escolher. 329 | 330 | O protótipo deve apresentar o que seria _ideal_ em sua solução. Digamos que é o 331 | que desejaria implementar se tivesse tempo ilimitado para hackear. Não se 332 | esqueça de incluir em seu protótipo os fundamentos de _visual design_. 333 | 334 | #### Testes de usabilidade 335 | 336 | Durante o desafio você deverá fazer testes de usabilidade com usuários 337 | diferentes, e com base nos resultados desses testes, iterar seus desenhos de 338 | interface. Conte-nos quais problemas de usabilidade você detectou através dos 339 | testes e como os resolveu na proposta final. 340 | 341 | ### Implementação da interface de usuário (HTML/CSS/JS) 342 | 343 | Após desenhar sua interface de usuário, deverá trabalhar na sua implementação. 344 | **Não** é necessário que construa a interface exatamente da mesma forma que 345 | desenhou. Terá um tempo limitado para trabalhar no projeto, então você deve 346 | priorizar as tarefas. 347 | 348 | No mínimo, sua implementação deverá: 349 | 350 | 1. Mostrar os dados em uma interface: pode ser em cards, tabelas, listas, etc. 351 | 2. Permitir ao usuário interagir com a interface para obter as informações que 352 | necessita; 353 | 3. Ser _responsiva_, ou seja, deve ser visualizada sem problemas a partir de 354 | diversos tamanhos de tela: celulares, tablets, notebooks, etc. 355 | 4. Que a interface siga os fundamentos de _visual design_. 356 | 357 | ### Testes unitários 358 | 359 | O _boilerplate_ do projeto não inclui testes unitários. Assim, você terá que 360 | escrever seus próprios testes para as funções encarregadas de _processar_, 361 | _filtrar_ e _ordenar_ os dados, assim como _calcular_ estatísticas. 362 | 363 | Seus testes unitários devem ter cobertura mínima de 70% de _statements_ 364 | (_sentenças_), _functions_ (_funções_), _lines_ (_linhas_), e _branches_ 365 | (_ramos_) do arquivo `src/data.js`, que irá conter suas funções e que está 366 | detalhado na seção de [Considerações técnicas](#srcdatajs). 367 | 368 | ## 6. Hacker edition 369 | 370 | As seções chamadas _Hacker Edition_ são **opcionais**. Se já tiver terminado 371 | todos os requisitos anteriores e tiver tempo, pode tentar completá-las. Dessa 372 | forma, você pode aprofundar e/ou exercitar mais os objetivos de aprendizagem 373 | deste projeto. 374 | 375 | Features/características extra sugeridas: 376 | 377 | * Ao invés de consumir dados estáticos do repositório, pode fazer isso de forma 378 | dinâmica, carregando um arquivo JSON com `fetch`. A pasta `src/data` contém 379 | uma versão `.js` e uma `.json` de cada conjunto de dados. 380 | * Adicione à sua interface visualização de dados em forma de gráficos. Para 381 | isso, recomendamos explorar bibliotecas de gráficos como 382 | [Chart.js](https://www.chartjs.org/) ou [Google 383 | Charts](https://developers.google.com/chart/). 384 | * 100% de cobertura nos testes. 385 | 386 | ## 7. Considerações técnicas 387 | 388 | A lógica do projeto deve estar implementada somente em JavaScript (ES6), HTML e 389 | CSS. Neste projeto não está permitido o uso de bibliotecas e frameworks, apenas 390 | [vanilla 391 | JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), 392 | com exceção das bibliotecas para gráficos (ver [_Parte 393 | opcional_](#6-hacker-edition) acima). 394 | 395 | O _boilerplate_ contém uma estrutura de arquivos como ponto de partida, assim 396 | como toda a configuração de dependências: 397 | 398 | ```text 399 | . 400 | ├── EXTRA.md 401 | ├── README.md 402 | ├── package.json 403 | ├── src 404 | | ├── data (de acordo com o data que forem trabalhar) 405 | | | ├── lol 406 | | | | ├── lol.js 407 | | | | ├── lol.json 408 | | | | └── README.md 409 | | | ├── pokemon 410 | | | | ├── pokemon.js 411 | | | | ├── pokemon.json 412 | | | | └── README.md 413 | | | └── rickandmorty 414 | | | | ├── rickandmorty.js 415 | | | | ├── rickandmorty.json 416 | | | | └── README.md 417 | | | └── athletes 418 | | | | ├── athletes.js 419 | | | | ├── athletes.json 420 | | | | └── README.md 421 | | | └── ghibli 422 | | | | ├── ghibli.js 423 | | | | ├── ghibli.json 424 | | | | └── README.md 425 | | | └── harrypotter 426 | | | | ├── data.js 427 | | | | ├── harry.json 428 | | | | └── README.md 429 | 430 | | ├── data.js 431 | | ├── index.html 432 | | ├── main.js 433 | | └── style.css 434 | └── test 435 | └── data.spec.js 436 | 437 | directory: 7 file: 20 438 | ``` 439 | 440 | ### `src/index.html` 441 | 442 | Como no projeto anterior, existe um arquivo `index.html`. Como já sabe, aqui 443 | entra a página que vai ser exibida ao usuário. Também serve para indicar quais 444 | scripts serão utilizados e juntar tudo o que foi feito. 445 | 446 | ### `src/main.js` 447 | 448 | Recomendamos que utilize `src/main.js` para todos os códigos que tenham a ver 449 | com a exibição dos dados na tela. Com isto nos referimos basicamente à interação 450 | com o DOM. Operações como criação de nós, registro de manejadores de eventos 451 | (_event listeners_ ou _event handlers_) e etc. 452 | 453 | Esta não é a única forma de dividir seu código. Pode utilizar mais arquivos e 454 | pastas, sempre e quando a estrutura estiver clara para suas colegas. 455 | 456 | Neste arquivo você encontrará uma séris de _imports comentados_. Para carregar 457 | diferentes fontes de dados, você deverá "descomentar" estos _imports_. Cada um 458 | destes _imports_ criará uma variável `data` com os dados correspondentes à fonte 459 | escolhida. 460 | 461 | Por exemplo, se "descomentamos" a seguinte linha: 462 | 463 | ```js 464 | // import data from './data/pokemon/pokemon.js'; 465 | ``` 466 | 467 | A linha ficaria assim: 468 | 469 | ```js 470 | import data from './data/pokemon/pokemon.js'; 471 | ``` 472 | 473 | E agora teríamos a variável `data` disponível em `src/main.js`. 474 | 475 | ### `src/data.js` 476 | 477 | O coração deste projeto é a manipulação de dados através de arrays e objetos. 478 | 479 | Recomendamos que este arquivo contenha toda a funcionalidade que corresponda a 480 | obter, processar e manipular dados (suas funções): 481 | 482 | * `filterData(data, condition)`: esta função receberia os dados e nos retornaria 483 | os que cumprem com a condição. 484 | 485 | * `sortData(data, sortBy, sortOrder)`: esta função recebe três parâmetros. O 486 | primeiro, `data`, nos entrega os dados. O segundo, `sortBy`, diz respeito a 487 | qual das informações quer usar para ordenar. O terceiro, `sortOrder`, indica 488 | se quer ordenar de maneira crescente ou decrescente. 489 | 490 | * `computeStats(data)`: essa função nos permite fazer cálculos estatísticos 491 | básicos para serem exibidos de acordo com o que os dados permitem. 492 | 493 | Estes nomes de funções e parâmetros são somente referência, o que vocês decidir 494 | utilizar vai depender da sua implementação. 495 | 496 | Estas funções devem ser 497 | [_puras_](https://imasters.com.br/desenvolvimento/serie-js-e-vida-pure-functions-funcoes-puras) 498 | e independentes do DOM. Estas funções serão depois usadas a partir do arquivo 499 | `src/main.js`, ao carregar a página e a cada vez que o usuário interagir com a 500 | interface (cliques, seleções, filtros, ordenação, etc). 501 | 502 | ### `src/data` 503 | 504 | Nesta pasta estão os dados de diferentes fontes. Você vai encontrar uma pasta 505 | para cada fonte, e dentro de cada pasta estão dois arquivos: um com a extensão 506 | `.js` e outro `.json`. Ambos os arquivos contém os mesmos dados; a diferença é 507 | que podemos usar o `.js` com uma tag ` 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { example } from './data.js'; 2 | // import data from './data/lol/lol.js'; 3 | import data from './data/pokemon/pokemon.js'; 4 | // import data from './data/rickandmorty/rickandmorty.js'; 5 | 6 | console.log(example, data); 7 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Laboratoria/SAP008-data-lovers/0e17f8ff726ac18ee66345bfdf5665be01d21a6d/src/style.css -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /test/data.spec.js: -------------------------------------------------------------------------------- 1 | import { example, anotherExample } from '../src/data.js'; 2 | 3 | 4 | describe('example', () => { 5 | it('is a function', () => { 6 | expect(typeof example).toBe('function'); 7 | }); 8 | 9 | it('returns `example`', () => { 10 | expect(example()).toBe('example'); 11 | }); 12 | }); 13 | 14 | 15 | describe('anotherExample', () => { 16 | it('is a function', () => { 17 | expect(typeof anotherExample).toBe('function'); 18 | }); 19 | 20 | it('returns `anotherExample`', () => { 21 | expect(anotherExample()).toBe('OMG'); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Laboratoria/SAP008-data-lovers/0e17f8ff726ac18ee66345bfdf5665be01d21a6d/thumb.png --------------------------------------------------------------------------------