- 1. Proposta de projeto
- 2. Projeto realizado
- 3. Histórias de Usuários
- 4. Protótipo de baixa fidelidade
- 5. Protótipo de alta fidelidade
- 6. Paleta de Cores
- 7. Ferramentas e metodologia aplicada
- 8. Aprendizado adquirido
- 9. Considerações técnicas
- 10. Desenvolvido
- 11. Como usar
Projeto Data Lovers realizado no bootcamp da Laboratória (SAP007) com a proposta de construir uma página web para visualizar um conjunto (set) de dados, tendo como objetivo principal aprender a desenhar e construir uma interface que se adeque às necessidades do usuário.
O entregável final deve conter:
- UI: Visualizar dados.
- UI: Permite ordenar dados por um ou mais campos (Ex:asc e desc).
- UI: Permite filtrar dados com base em uma condição.
- UI: Cálculo agregado (Ex: médias, valores máximos e mínimos, etc).
- UI: É responsivo.
- Utilização de VanillaJS.
- Passa pelo linter
- Testes unitários (Jest) cobrem um mínimo de 70% de statements, functions, lines e branches.
A escolha do tema para o projeto foi o Studio Ghibli.
O Studio Ghibli é um estúdio de animação japonês, fundado em 1985 por Hayao Miyazaki, Isao Takahata, Toshio Suzuki e Yasuyoshi Tokuma. Ele conta com 20 longas-metragens, como, Meu Amigo Totoro, A Viagem de Chihiro, O Castelo Animado.
As animações são bem recebidas em todo o mundo e algumas já receberam nomeações e prêmios. Os longas se destacam ao provar que a animação não é só para crianças, bem como pela representatividade feminina em seus personagens. Seus filmes tratam de diversos temas, desde aqueles que são normalmente abordados em obras direcionadas a crianças, como amizade, amor e família. Até temáticas que não aparecem com frequência, como amadurecimento, medo, guerra, consciência ecológica e muitos outros.
A interface proposta no site é dividido em 3 páginas:
- Página de filmes - Possibilita a visualização de todos os filmes do estúdio com detalhes sobre cada um. Os filmes podem ser filtrados por diretor e produtor e ordenados por ordem alfabética e data de lançamento.
- Página de Personagens - Possibilita a visualização de cards com as informações de todos os personagens que podem ser filtrados por gênero, por filme e ordenados por ordem alfabética.
- Página de curiosidades - Mostra um dashboard com a média de idades dos personagens e um gráfico com notas por filme e sua média de avaliação.
Uma História de Usuário representa em linguagem simples o que o usuário faz, precisa e o por que, de maneira concisa. Algumas das averiguações levadas em consideração para o desenvolvimento destas histórias são:
- Studio Ghibli tem várias animações e para nossos usuários é importante saber quantas e quais são
- As mentes por trás de cada animação são os diretores e produtores, sendo que eles podem ter contribuído na criação de mais de uma obra. Portanto, é importante para nosso usuário poder conhecê-los e saber quantas e quais são as criações em que eles trabalharam
- As animações possuem informações relevantes para nossos usuários, como descrição, data de lançamento, diretor, produtor e personagens
- Cada animação tem seus personagens e para nossos usuários é importante saber quantos e quais são
- Os personagens têm características únicas que o usuário deseja conhecer, como nome, idade, sexo, espécie, etc.
![História1] O usuário pode filtrar os filmes por nome de diretor ou nome de produtor. Pode também escolher a ordem de exibição dos filmes por ordem alfabética, data de lançamento mais antigo ou mais recente.
![História2] O usuário pode filtrar os personagens por gênero(feminino, masculino, indefinido) ou por filme em que aparece. O usuário também escolhe a ordem que os personagens aparecem na tela por ordem alfabética crescente ou decrescente.
![História3] O usuário pode visualisar as curiosidades sobre os filmes e personagens. A média de idade dos personagens, o personagem mais velho e o mais novo. Além de poder visualizar em gráfico a média das notas de avaliação dos filmes.
- Pentende de inclusão
Utilização do Trello para organização durante as Sprints do projeto, realizando a divisão de baby steps para as tarefas desenvolvidas, geradas a partir do Backlog.
Realização das cerimonias de metodologia ágil: Daily, Sprint Planning, Sprint Review, Sprint Retrospective, e Sprint Checkout.
- Uso de HTML semântico.
- Uso de seletores de CSS.
- Construir sua aplicação respeitando o desenho realizado (protótipo).
- Uso de flexbox em CSS, bem como, borda, margem, preenchimento*.
- Uso de seletores de DOM.
- Gerenciamento de eventos de DOM.
- Manipulação dinâmica de DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- 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.
- Organizar e dividir o código em módulos (Modularização)
- Uso de identificadores descritivos (Nomenclatura | Semântica)
- Uso de linter (ESLINT)
- 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)
- bibliotecas de gráficos Chart.js
O boilerplate contém a seguinte estrutura de arquivos:
.
├── EXTRA.md
├── README.md
├── package.json
├── src
| ├── data
| | └── ghibli
| | | ├── ghibli.js
| ├── data.js
| ├── index.html
| ├── main.js
| └── style.css
└── test
└── data.spec.js
[Keila Hadama]
[Taize Santos]
Você precisará usar o Node.js
Clonar o projeto
$ git clone https://github.com/taizesantos/SAP007-data-lovers
Instalar as dependências do projeto
$ npm install or yarn
Iniciar a aplicação
$ npm start or yarn start
Realizar os testes unitários
$ npm test or yarn test