Pokelovers

Para acessar a página clique aqui. 💻

Projeto

O projeto Pokelovers, se trata de uma página WEB com visualização de um conjunto de dados, que se adequa a necessidade do usuário. Nela é possível ao usuário, pesquisar dados, filtrá-los, ordená-los e fazer algum calculo agregado.

Cálculo agregado se refere aos diversos cálculos que podem ser feitos com os dados para mostrar a informação mais relevante para os usuários (médias, valores máximos e mínimos, etc).

Utilizamos o banco de dados do anime Pokémon.

1. Processo de decisões do projeto:

1.1 Identificação do usuário:

Como início da nossa definição de usuário criamos personas, que representam nossos possíveis usuários e suas necessidades, para assim compreender e planejar as soluções que deveríamos oferecer em nossa aplicação.

Também fizemos uma pesquisa de preferências pelo Google Forms, para a definição dos dados e informações disponíveis ao usuário de acordo com suas reais necessidades.

1.2 Identificação de Histórias de Usuário:

Com estes dados então definimos nossas Histórias de usuário e o protótipo para o nosso projeto:

História de usuário 01

Eu como usuário, quero acessar a aplicação "POKELOVERS" e visualizar todos os pokemons de Kanto e suas informações básicas coletadas na pesquisa de preferências.

História de usuário 02

Eu como usuário, quero buscar um Pokémon específico por nome e visualizar somente ele.

História de usuário 03

Eu como usuário, quero ordenar os Pokémons por ordem alfabética, número de ID e chance de aparecer.

História de usuário 04

Eu como usuário, quero filtrar os Pokémons por tipos e fraquezas.

História de usuário 05

Eu como usuário, quero realizar algum cálculo e visualizar alguma estatística referente aos Pokémons.

1.3 Protótipo de baixa fidelidade:

Define-se wireframe como um esqueleto, um protótipo ou uma versão bastante primitiva do visual de um projeto.
Nesse projeto o Wireframe foi definido, pensando na experiência do usuário conforme esboço abaixo, realizado na ferramenta Figma.

Protótipo 01 - Página HOME

Protótipo 02 - Página EXTRAS

1.4 Teste de usabilidade:

Realizamos uma pesquisa com a ferramenta Google Forms para identificação de problemas de usabilidade, e verificamos a necessidade de correções e melhorias dos itens abaixo:

• Tamanho das fontes.
• Tamanho do card.
• Tamanho do menu.
• Necessidade da opção TODOS nos filtros.

2.Desenvolvimento do projeto

2.1 Sobre a página.

O nome Pokelover vem da junção de Pokémon e o nome do projeto Data Lovers, a fonte do título na página é inspirado no logo do anime e usa as mesmas cores, levamos em consideração a harmonia com o título para a escolha da paleta de cores geral, usando tons de azul e roxo e deixando o amarelo pontual como ponto de atenção.
A apresentação dos cards com as informações e imagem dos Pokémons, faz referência aos cards vendidos dos personagens.
Incluímos também as páginas Sobre e Extras com mais informações para os usuários, como a história do anime, importante para os usuários que desejam conhecer este universo, ou até mesmo saber um pouco mais, curiosidades sobre o universo e dicas para que os jogadores de PokémonGO aproveitem ainda mais a experiência, e na página Extras podemos calcular o Poder de Combate e obter o provável CP do Pokémon após a evolução e também consultar a porcentagem de Pokémons por tipo.

2.2 Scripts e recursos utilizados.

O HTML foi usado para estruturação do conteúdo da página, levando em consideração a utilização de tags semânticas para acessibilidade e inclusão de inputs e filtros.

O CSS foi usado para estilizar a página e definir o desenho visual, além de garantir a responsividade da página para tablets e celulares.

O JavaScript foi usado para fazer a interação do usuário com a página utilizando elementos do DOM e fazer a manipulação dos dados escolhidos, além de armazenar este banco de dados. A lógica do projeto foi implementada inteiramente em JavaScript.

Foi executado testes unitários para verificação da funcionalidade e o padrão foi verificado de acordo com as bibliotecas eslint e htmlhint. Foi utilizado também Node.js, Charts.js, Git e GitHub.

3. Montagem do ambiente de desenvolvimento - Instalação e execução.

⚠️ Para executar os comandos você precisará de um UNIX Shell, que é um programa que interpreta linhas de comando e também deve ter o git instalado. Se você usa um sistema operacional como GNU/Linux ou MacOS, você já tem um shell (terminal) instalado (e provavelmente o git também). Se você usa Windows pode baixar a versão completa do Cmder que inclue o Git bash, embora seja recomendado que você teste GNU/Linux. Se tem Windows 10 ou superior pode usar o Windows Subsystem for Linux.

Será necessária também a instalação do Node.js que contém o npm

---

• Clone o projeto na sua máquina executando o seguinte comando no seu terminal:

git clone https://github.com/naereloire/SAP004-data-lovers

• Instale as dependências do projeto com o comando:

npm install

• Rode o projeto na sua máquina com:

npm start

• E visualize o projeto no seu navegador com o link:

http://localhost:5000

Testes 📋

• Para executar os testes:

npm test

Deploy O projeto está configurado com o github pages.

• Para executar deploy no github:

npm run deploy

Desenvolvimento Camila Cunha e Naere Loire.