🥚 Pokédex

Seja bem vindo (a) ao Pokédex 🤓

O Pokédex é um site onde você pode interagir através de filtros e navegar por 151 Pokémons. Com o Pokédex, esperamos que você possa ser divertir e ter a melhor experiência possível quando jogar Pokémon GO! 🥳

Acesse Pokédex

---

📄 Índice

• 1. Objetivos
• 2. Usuários
  • 2.2 Pesquisas
  • 2.3 Histórias de Usuários
• 3. Planejamento
• 4. Desenvolvimento
• 5. Funcionalidades
• 5.2 Linguagens
• 5.3 Ferramentas
• 6. Testes
• 7. Requisitos
  • 7.2 Softwares
  • 7.3 Execução
• 8. Desenvolvedoras

---

1. Objetivos

Ao iniciarmos o projeto Pokédex, de pronto percebemos alguns pontos que seriam essenciais para entregar um bom MVP:

• Conhecer o usuário e entender suas necessidades;
• Foco na experiência do usuário;
• Aplicação interativa;
• Acessibilidade;
• Organização das tarefas via Trello
• Responsividade: Essencial pois o jogo é exclusivo para celulares e o usuário precisa conseguir obter informações ao mesmo tempo que está jogando.

---

2. Usuários

Colocamos os usuários e suas necessidades como foco principal do nosso projeto. Buscamos atender todas as necessidades de forma clara, eficiente e objetiva. Para isso, realizamos uma pesquisa durante 4 dias, onde coletamos informações como:

• Perfil do usuário;
• Prioridades do usuário;
• Expectativas e desejos;
• Relacionamento com Pokémon Go;
• Principais dificuldades;

2.2 Pesquisas

Os resultados da pesquisa foram cruciais para desenvolvermos a melhor aplicação, focada em responsabilidade, acessibilidade, interatividade, disposição de dados, etc. A pesquisa foi determinante para nos dar um norte sobre o perfil da maioria de nossos usuários:

Média de idade

Esse dado nos mostrou que a mais da metade de nossos usuários tem 45 anos ou mais, enquanto ⅓ tem de 21 a 40 anos. Os demais grupos se fragmentaram em partes bem menores, o que faz com que eles não gerem demanda suficiente para viabilizar o desenvolvimento de um site adequado ao perfil informado.

Plataforma em que mais joga

Esse resultado mostra que mesmo o usuário podendo selecionar várias respostas, a plataforma mais utilizada é de Celular ou Tablet. Isso nos mostrou que um site responsivo deveria ser uma de nossas prioridades neste projeto.

Relacionamento com Pokémon Go

Podemos observar que a maioria de nossos usuários é fã de Pokémon desde o desenho e costuma jogar Pokémon Go com frequência. Os jogadores casuais e que têm algumas dúvidas sobre o funcionamento do jogo, representam quase 30% da nossa base. Também identificamos uma quantidade razoável (18.5%) de usuários em potencial, que demonstram interesse no jogo.

2.3 Histórias

Escolhemos 3 (três) histórias diferentes para atingir o máximo de usuários possível:

✍️ História de Usuário #1

Flávia Machado

Flávia é uma fã de carteirinha de Pokémon. Seu maior objetivo é descobrir as chances de spawn de Pokémons Raros. Ela precisa de um site que mostre a raridade de cada Pokémon.

✍️ História de Usuário #2

Eduardo Silva

Eduardo tem bastante interesse no jogo mas não sabe nada sobre ele. Sua maior necessidade é obter informações rápidas sobre os Pokémons. Ele precisa de um site que mostre dados como tipo, força e spawn, de forma intuitva como em um card.

✍️ História de Usuário #3

Marcelo Santos

Marcelo é fã do desenho, mas nunca jogou Pokémon Go. Ele tem muita dificuldade em escolher o melhor tipo de Pokémon antes das batalhas. Precisa de um site responsivo, para escolher o melhor momentos antes de entrar na guerra. Acreditamos que isso pode ser resolvido com um site responsivo e que possibilite uma comparação rápida entre os tipos de Pokémons.

---

3. Planejamento

Fizemos todo o planejamento no Trello:

3.2 Paleta de cores

A paleta de cores foi criada pensando em acessibilidade para quem é daltônico.

Rascunho

A interface foi rascunhada no papel:

Protótipo de Baixa Fidelidade para PC 💻

E no Figma, fizemos os protótipos de baixa fidelidade para as plataformas necessárias.

Protótipo de Baixa Fidelidade para Celulares e Tablets 📱

MVP (Mínimo Produto Viável) 🎉

---

4. Desenvolvimento

Com as informações levantadas, partimos para o desenvolvimento da interface do site.

Versão 1:

Após o desenvolvimento, partimos para as funcionalidades.

---

5. Funcionalidades

A aplicação foi desenvolvida pensando na acessibilidade e na praticidade, para que todos os usuários tenham uma boa experiência de uso.

• Visualizar todos os Pokémons na tela;
• Filtrar Pokémons por tipo;
• Filtrar Pokémons por raridade;
• Organizar os cards por ordem alfabética crescente ou decrescente;
• Botão "Limpar" para resetar a busca;
• Cards com: Nome do Pokémon, Foto, tipo e raridade;

5.2 Linguagens

O Pokedéx foi desenvolvido com as linguagens: HTML5, CSS3 e Vanilla JavaScript.

5.3 Ferramentas

As aplicações utilizadas são: Node.js, NPM, Visual Studio Code e GitHub.

---

6. Testes

Após o desenvolvimento do MVP, iniciamos os testes de usabilidade com usuários. Os feedbacks que recebemos, nos fizeram mudar alguns pontos no design

• Remoção da DIV de comparação de cards;
• Alterações de tonalidade visando melhor experiência para daltônicos ;
• Reposicionamento dos filtros para melhor visualização;

Chegamos a versão atual:

Desktop 💻

Celulares e Tablets 📱

---

7. Requisitos

Para instalar e executar o projeto localmente, você deve seguir os passos:

7.2 Softwares

• ⚓ GIT Desktop (somente se você usa Windows).
• ⬇️ Node.js com NPM incluso.
• 🧾 Visual Studio Code
• 🥠 Caso você tenha Windows 10 ou superior, pode usar o Windows Subsystem for Linux.

7.3 Execução

• 🍴 Faça o fork do repositório.
• ⬇️ Clone o projeto na sua máquina com o comando git clone https://github.com/ThWember/SAP005-data-lovers.git.
• 📂 Acesse a pasta do projeto com o comando cd SAP005-data-lovers.
• 👩‍💻 Instale o Node.js com o comando npm install e em seguida rode a aplicação com o comando npm start.
• ⚙️ Para executar os testes unitários utilize o comando npm test.
• ⛓️ Para acessar a interface no navegador, execute o comando npm start para iniciar o servidor web e acesse em http://localhost:5000.

---

8. Desenvolvedoras

Pokédex é orgulhosamente desenvolvido por Cris Mantovani e Thais Wemberlaine. Alunas da turma SAP-005 da <Laboratória> 💛.

🎓 Este projeto foi o segundo desafio do bootcamp e nos ensinou sobre:

• Manipulação do DOM, objetos e arrays;
• Funções;
• Desenvolvimento de testes unitários;
• Responsividade;
• UX Design;
• Cálculo agregado;
• GitHub (repositórios, branchs, merge, pull request e deploy);
• Soluções dos mais diversos bugs;
• Planejamento;
• Trabalho em equipe;
• Empatia;
• Aprender a aprender;

Agradecemos por esse grande desafio e pelo apoio das mentoras, psicólogas e amigas de squad!

Don't stop code 🚀