• 1. Prefácio
• 2. Produto
  • 2.1. Definição do Produto
  • 2.2. Interface
  • 2.3. Telas
  • 2.4. Utilização
  • 2.5. Funcionalidades
• 3. Considerações técnicas
  • 3.1. Ferramentas
  • 3.2. Scripts
• 4. Autoras

Lançado em 2016, o jogo Pokémon Go logo se tornou um fenômeno, tanto entre os mais jovens, quanto no público já adulto.

Desenvolvivo pela Niantic, Inc., Nintendo e The Pokémon Company, se trata de um jogo eletrônico de realidade aumentada voltado para smartphones.

No jogo o usuário interage com um mapa baseado no mundo real e, com o auxílio da câmera do celular, visualiza e pode tentar capturar os monstrinhos. Ainda é possível escolher seu time e batalhar em ginásios.

A proposta do jogo é que o usuário explore mais a cidade em busca dos Pokémons, tendo como objetivo capturar todos e completar a Pokédex, além de vencer batalhas nos estágios.

Realizado em dupla, no segundo projeto pela Laboratória foi possível escolher a temática a ser seguida. Entre as opções era possível optar entre Pokémon, Rick and Morty e LOL. Decidimos seguir com o tema Pokémon.

No nosso projeto apresentamos todos os 151 Pokémons da região de Kanto. Ao clicar no Pokémon desejado pensamos em incorporar e mostrar as principais informações de cada monstrinho em uma representação da Pokédex.

Realizamos uma pesquisa para definir qual seria o nosso público alvo. Com os resultados chegamos a duas possibilidades: Um público mais jovem com tempo e interesse em obter o máximo de informações possíveis; Um público adulto que joga por lazer nos momentos livres e deseja acessar apenas informações mais substanciais.

Pensando nessas diferenças, criamos um site no qual o usuário consegue se localizar e obter com facilidade o conteúdo desejado.

Uma consideração importante a ser feita é que a base de dados que foi utilizada está em inglês. Para que todos os elementos do site conversassem entre si, optamos por desenvolver todo o site em inglês. As explicações do nosso projeto abaixo levam os nomes em português para facilitar o entendimento, mas entre parênteses encontra-se o nome original que foi utilizado no site.

Todo o projeto foi realizado de maneira responsiva, sendo possível acessá-lo do celular até em telas maiores, como uma televisão.

Optamos por desenvolver uma ideia inicial e individual de como imaginávamos nosso site. Feito isso, conversamos, juntamos nossas ideias e criamos um projeto final.

Após uma pesquisa de usuário (UX), realizamos algumas mudanças e melhorias no projeto original para atender melhor os usuários do site. Procuramos agilizar o carregamento das imagens, mudamos as cores e destacamos melhor os botões apresentamos na Pokédex com as informações dos Pokémons, distribuímos melhor as informações de "tipo" e "candys" dentro da Pokédex, implementamos a possibilidade de fechar a Pokédex e o Hamburger menu clicando fora da área dos mesmos.

No site é possível encontrar 4 telas:

A tela principal na qual é possível encontrar todos os Pokémons, visualizar a Pokédex ao clicar em um Pokémon e utilizar as funcionalidades da paǵina.

Tela na qual apresentamos algumas opções de gráficos. É possível escolher o modelo do gráfico como Pie ou Bar e visualizar a porcentagem dos Pokémons de cada tipo ou a porcentagem de Pokémons encontrados em cada um dos ovos.

Nessa tela apresentamos um cálculo básico da porcentagem de Pokémons de cada um dos elementos. Essas informações são apresentadas em um modelo como Progress bar

Por último apresentamos algumas dicas para os jogadores de Pokémon Go, tais como dicas inicias, de times, pokebolas, candies, ginásios, pokestops, ovos, incensos e lures.

Na tela inicial do site é possível visualizar os 151 Pokémons. Incorporamos as principais informações de cada monstrinho em um card representando uma Pokédex, a qual é apresentada ao clicar no Pokémon desejado. Na versão mobile a Pokédex é apresentada apenas com a imagem, nome, número e elementos do Pokémon. É possível optar por fechá-la ou apresentar mais informações, tais como evoluções, fraquezas e se é possível evoluir esse Pokémon com candies. Já na versão desktop todas as informações são apresentas de uma única vez ao usuário.

Logo acima dos Pokémons é possível utilizar algumas funcinalidades que foram incorporadas ao site.

É possível pesquisa o nome do Pokémon desejado na barra de pesquisa. OBS: Como a base de dados está em inglês, é necessário que o usuário faça essa pesquisa utilizando os nomes em inglês. Nesse caso "Bulbasauro" ficaria "Bulbasaur".

O usuário pode escolher filtrar os Pokémons por:

• Todos (All)
• Tipo (Type)
• Fraquezas (Weaknesses)

Com exceção da opção "todos", ao selecionar uma das opções acima, o usuário também precisa selecionar o tipo do Pokémon desejado. Essa opção está disponível em um segundo filtro, logo ao lado do primeiro, o qual leva o nome de Filter Value (Valor do filtro).

Ao lado dos filtros é possível encontrar um botão que reseta a escolha feita.

O usuário pode escolher ordenar os Pokémons por:

• Ordem alfabética crescente (Ascending Alphabetical)
• Ordem alfabética decrescente (Descending Alphabetical)
• Ordem numérica crescente (Ascending Numerical Order)
• Ordem numérica decrescente (Descending Numerical Order)

A ordenação pode ser realizada com todos os Pokémons ou com o filtro já aplicado.

O projeto foi realizado com a utilização de HTML, CSS, Vanilla JavaScript e a biblioteca Google Charts.

Nesse projeto é necessário utilizar alguns comandos para o correto funcionamento do site.

Primeiramente é importante ter o Node.JS e o NPM instalados em sua máquina para executar os comandos a seguir:

• npm install para instalar todas as dependências contidas no projeto.

• npm start, o qual vai inicializar o servidor e possibilitar a visualização do projeto.

• npm test para execução de testes nos arquivos e, assim, garantir o correto funcionamento dos mesmos.

• npm run deploy, o qual é utilizado para publicar o projeto no GitHub Pages.

Ana Ramos - [email protected]

Natasha Costa - [email protected]