Data Lovers - League Of Legends foi o segundo projeto desenvolvido no bootcamp da Laboratória, tem como objetivo ajudar jogadores e novos jogadores a conhecerem melhor os campeões presentes em Summoner's Rift apresentando informações como tipo e nível de ataque, defesa, magia e dificuldade de cada campeão, bem como, disponibiliza um filtro de pesquisa através do nome do campeão.
💻 Para acessar a página web clique aqui
- 1. Resumo do projeto
- 2. Etapas iniciais para o desenvolvimento da interface
- 3. Considerações técnicas
- 4. Responsividade
Temos uma página web que permite visualizar dados, filtrá-los, ordená-los e fazer algum cálculo agregado. Por cálculo agregado nos referimos 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).
Tudo isso utilizando HTML semântico, CSS responsivo e JavaScript puro.
Foram realizadas pesquisas com jogadores de LOL, utilizando as mesmas perguntas expostas no readme da Laboratória. Que foram:
Quem são os usuários principais do produto? Usuários que pretendem começar a jogar e não possuem informações sobre as regas e personagens, também usuários jogadores do LOL e que desejam informações sobre os campeões, para que possam escolher melhor com qual deles jogar.
Quais são os objetivos dos usuários com relação ao produto? Apresentar informações sobre as características dos campeões, que podem ser filtrados por tipo (lutador, assassino, mago, atirador e suporte), fornecer a classificação de acordo com o nível de ataque/defesa/magia/dificuldade, por grupo ou todos (de acordo com o interesse do usuário).
Quais são os dados mais relevantes que querem ver na interface e por quê? Filtragem por tipo de campeão e classificação do poder. Para que o usuário conheça os personagens e possa escolher de acordo com sua preferência.
Quando utilizam ou utilizariam o produto? Antes de iniciar sua partida no jogo.
Desenvolvemos o protótipo de baixa fidelidade para telas de computadores e tablets utilizando as ferramentas do Canva.
Para o protótipo para telas de celulares, utilizamos as ferramentas do Figma.
A estilização da página buscou semalhança com a interface do jogo, com objetivo de proporcionar ao usuário a sensação de já estar imerso ao mundo LOL. Sendo assim, a paleta de cores utilizada foi extraída do ícone do jogo.
A lógica do projeto foi implementada somente em JavaScript (ES6), HTML e
CSS.
Estas funções são [puras], assim, através de funções puras e independentes do DOM que foram usadas a partir do arquivo
src/main.js, ao carregar a página e a cada vez que o usuário interage com a interface (cliques, seleções, filtros, ordenação, etc).
A implementação contém:
- Exibição dos dados em interface em cards;
- Permite ao usuário interagir com a interface para obter as informações que necessita, através de filtros de buscas por nome ou tipo do campeão, bem como por classificação dos poderes.
- É responsiva, ou seja, deve ser visualizada sem problemas a partir de diversos tamanhos de tela: celulares, tablets, notebooks, etc.
Utilizamos src/main.js para inserir todos os códigos relacionados a exibição dos dados na tela, utilizando a estrutura condicional switch para tradução de palavras da API, templade string e o método map() para obter dados da API. Com isto nos referimos basicamente à interação
com o DOM. Operações como criação de nós, registro de manejadores de eventos
Para carregar a fonte de dados da API:
import lolData from "./data/lol/lol.js"Assim, criamos a variável lolData disponível em src/main.js.
Para carregar os filtros:
import { buscaTag, buscaNome, ordenarCampeoes, calculoAgragado } from "./data.js"O coração deste projeto é a manipulação de dados através de arrays e objetos.
Utilizamos este arquivo para armazenar toda a funcionalidade que corresponda a obter, processar e manipular dados (suas funções):
-
function buscaTag: esta função recebe os dados e nos retorna os campeões filtrados por tipo (assassinos, lutadores, magos, atiradores, suportes, tanques ou todos eles), no processamento dos dados utilizamos o métodofilter. -
function buscaNome: esta função retorna ao usuário o nome do campeão digitado, com auxilio do métodofilter. -
function ordenarCampeoes: responsável por ordenar os campeões de acordo com nível de ataque, defesa, magia e dificuldade, que podem ser ordenados de forma crescente ou descrecente Para esta função utilizamos o métodosort. -
function calculoAgragado: realiza o cálculo percentual do tipo de campeão selecionado pelo usuário (assassinos, lutadores, magos, atiradores, suportes)
A API do projeto foi extraída desta pasta, onde estão os dados de diferentes fontes. Utilizamos o arquivo com a extensão
.js.
Os teste unitários das funções implementadas no arquivo /test/data.spec.js, cobriram 100% dos statements, functions e lines e branches.
Para a organização do projeto utilizamos o Trello para a construção de um roadmap, fracionando cada etapa, definindo metas e prioridades.
No planejamento de sprint foram definidas as metas a serem atingidas para a próxima sprint, enquanto na daily eram definidas as prioridades das tarefas para o dia.
A interface foi produzida de modo responsivo, durante todo o processo de criação foi constantemente testada para diversos tamanhos de telas através do console do Google Chrome, nestes testes, a página pode ser visualizada sem problemas.
O teste de usabilidade foi aplicado com diferentes usuários, e com base nos Feedbacks, notou-se que:
- a página web opera perfeitamente em notebooks/desktop;
- a utlização por android também não apresentou nenhuma intercorrência, os testes foram feitos em diferentes modelos de aparelhos celulares.
WhatsApp.Video.2023-02-25.at.20.10.43.mp4
- a utilização por iOS funciona em partes, não apresenta erros na utilização dos filtros, classificação, busca por nome, calculo agregado e exibição da parte da frente dos cards.
A falha é localizada no conteúdo posterior dos cards, onde é exibida apenas uma parte das informações, que logo desaparece.
WhatsApp.Video.2023-02-27.at.11.10.21.mp4
Na tentativa de solucionar a falha, incluímos o motor de renderização webkit no css. Nos testes realizados console e no emulatos em telas de iOS a aplicação funciona perfeitamente, entretanto, nos testes realizados pelos usuários, persiste a falha no conteúdo posterior dos cards.