PokeFã

1. Resumo

Pokefã é uma plataforma contendo informações dos 151 pokemons da região de Kanto, onde o usuário poderá visualizar todos os pokemons na tela, buscar o Pokémon por nome, filtrar sua busca por tipo e por ovos e ordenar os pokemons por ordem alfabética ou numérica. Essa plataforma tambem fornece ao usuário as estatísticas sobre cada tipo de pokémon, além de uma calculadora que calcula quantos metros deverá ser percorridos para chocar todos os ovos! oferecendo ao usuário informações relevantes para utilizar no jogo Pokemon Go.

📌 Clique aqui para acessar a Pokefã.

2. Usuários

O Projeto foi pensado e desenvolvido para todos os jogadores de Pokemon Go e fãs de Pokemon. Pensando nisso desenvolvemos um site responsivo, o qual é possível ser acessado por vários tipos de dispositivos, como computador, celular, tablet, etc.

2.1 Histórias do Usuário

A partir da pesquisa de usuários, conseguimos identificar as necessidades e tentamos atende-las da melhor forma possível, elaborando as Histórias de Usuário abaixo:

• Historia 1 "Mostrar os dados na tela" - Eu como usuário gostaria de ver todos os cards de pokemons na tela para melhor visualização.
• História 2 "Filtrar" - Eu como usuario gostaria de filtrar os pokemons que serão exibidos, para que apareçam na tela somente os que estiverem dentro do filtro escolhido.
• Historia 3 "Ordenar" - Eu como usuario gostaria de ver os cards na ordem que eu escolher para melhor visualização.
• História 4 "Buscar" - Eu como usuario gostaria de poder buscar por um pokemon pelo nome para que pudesse ver as informações dele na tela, sem ter que procurar de um por um.
• História 5 "Estatísticas" - Eu como usuario gostaria de ver as estatísticas do tipo de pokemon escolhido, para saber se são muitos ou poucos que se incluem naquele tipo.
• História 6 "Calculadora de ovos" - Eu como usuario gostaria de calcular quantos metros terei que percorrer para chocar todos os ovos que tenho.

3. Funcionalidades

O usuário poderá visualizar todos os Pokemons na tela, filtrar somente os pokemons por tipo e or quantidade de ovos, escolher se quer vê-los em ordem alfabética, pequisar os Pokemons por nome, ver as estatisticas de Pokemons do mesmo tipo e fazer o cálculo quantos metros terá que percorrer para chocar todos os ovos que tem.

4. Protótipação

Criamos um protótipo de baixa fidelidade para desenhar o layout do site e então começarmos a desenvolvê-lo. Abaixo estão as imagens do nosso protótipo, tambem fizemos um prototipo utilizando o aplicativo Marvel, onde podemos visualizar como seria a navegação dentro desse protótipo, podendo ser acessado através desse link.

5. Testes de usabilidade

Durante o desenvolvimento do projeto, fizemos os testes de usabilidades com usuários, que nos retornaram feedbacks muito importantes para a melhoria do projeto, várias sugestões foram implementadas, como por exemplo: deixar a fonte do site padronizada, deixar claro na calculadora que o usuário deve digitar apenas numeros, entre outras.

6. Ferramentas e linguagens utilizadas

HTML5, CSS3, Vanilla JavaScript, Jest , Node.js, Npm, VS Code e GitHub.

7. Instalação e Execução

Primeiro é preciso ter em sua máquina as seguintes aplicações:

• Git
• Node.js (com Npm incluso)
• VS Code ou outro editor de sua preferência.

Com essas aplicações instaladas em seu computador, você poderá seguir as instruções a seguir:

• Fazer um fork no repositório do Github onde está o projeto.
• Clonar o fork para seu computador.
• Usar o comando npm install no terminal de sua maquina para instalar as dependências do projeto
• Usar o comando npm start para executar o projeto e entre na url http://localhost:5000 no seu navegador.
• Usar o comando npm run deploy para fazer o deploy no gitHub pages.

8. Autoras

Desenvolvido por Karine, Luana e Pamela e refatorado por Luana.

Projeto desenvolvido para fins de aprendizado no Bootcamp da Laboratória Brasil.

9. Considerações finais

Durante a elaboração do projeto aprendemos muito. Aqui estão alguns dos conhecimentos Adquiridos:

*UX Design (Experiência do usuário): pesquisa com usuarios / entrevistas

• Princípios de design/UI
• Organização e planejamento em equipe.
• Princípios de UX e UI design
• Prototipagem e pesquisa com usuários
• Responsividade
• Manipular objetos e arrays
• Definir regras de estilo do CSS.
• Manipular eventos com o DOM.
• Manipular strings (cadeias de texto).
• Usar controle de fluxo (loops, condicionais, como o for, if e else).
• Trabalhar com funções.
• Elaborar Testes unitários (unit test) com Jest.
• Trabalhar com branchs, fazer pull request, merge e resolver conflitos no Git e GitHub.
• Manter o repositório remoto sempre atualizado (commit, pull, push), utilizando o terminal.
• Subir o seu projeto para o Github Pages, fazendo deploy.