Data Lovers

Índice

• 1. Resumo do projeto
• 2. Definição de produto
• 3. Considerações técnicas
• 4. Checklist
• 5. Tecnologia Utilizadas
• 6. Contato

---

1. Resumo do projeto

Neste projeto construímos uma página web para visualizar um conjunto (set) de dados que se adeque às necessidades do usuário.

Como entregável final temos uma página web que permite visualizar dados, filtrá-los, ordená-los e mostrar um cálculo agregado. Por cálculo agregado nos referimos a porcentagem de cartas de Arcano maior ou menor em relação ao total de cartas existentes no baralho do Tarô.

Este é o banco de dados que escolhemos apresentar nesse projeto:

• Tarot: Neste conjunto você encontrará uma lista com cartas de Tarot.
  • Pesquisa com usuários de Tarot

O objetivo principal deste projeto é aprender a desenhar e construir uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita.

2. Definição de produto

Criamos nosso site direcionado para pessoas que gostam de Tarô e querem obter informações pontuais sobre esse tema, como:

• Número;
• Arcano;
• Significado (para cima ou reverso);
• Descrição completa.

Algumas destas informações podem ser obtidas através de campos de pesquisa, caso o usuário não tenha conhecimento total sobre Tarô.

Protótipos de baixa e de alta fidelidade

Para o protótipo de alta fidelidade utilizamos o Figma:

Histórias de usuário

Abaixo uma das histórias de usuário que criamos para concluir a definição de pronto. Ao todo, foram 4 histórias diferentes. Como ferramenta para organizar nossas ideias a cada sprint utilizamos o Trello.

Testes de usabilidade

Aplicamos o teste de usabilidade no final do projeto com 13 pessoas diferentes e para recerbermos o feedback, elaboramos um formulário de pesquisa simples. Nas imagens abaixo é possível observar quais foram as peguntas e a porcentagem das respostas.

Problemas detectados no teste de usabilidade:

Com base nos feedbacks recebidos, elaboramos esta lista de melhorias e implementamos em nosso projeto.

Testes unitários

Para este projeto, escrevemos os testes unitários para as funções encarregadas de processar, filtrar e ordenar os dados e atingimos 100% de cobertura de statements (sentenças), functions (funções), lines (linhas), e branches (ramos).

3. Considerações técnicas

A lógica do projeto está implementada somente em JavaScript (ES6), HTML e CSS. Neste projeto não foi permitido o uso de bibliotecas e frameworks, apenas vanilla JavaScript.

---

4. Checklist

• Usar VanillaJS.
• 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.

5. Tecnologias utilizadas

6. Contato

Amanda Araujo

Camila Gonçalves