Acesse o projeto: aqui
Desenvolvido por:
- 1. Prefácio
- 2. Resumo do projeto
- 3. Histórias do Usuário
- 4.Metodologia
- 5.Interface Responsiva
- 6. Objetivos de Aprendizagem e Cobertura de Testes Unitários
- 7. Especificações Técnicas
Segundo projeto realizado pela turma SAP010 da Laboratoria. Este trabalho tem como objetivo desevolver uma aplicação web responsiva sobre a série Game of Thrones que possibilita visualizar os personagens, organizá-los em ordem alfabética crescente e decrescente, pesquisar por nome ou sobrenome, e filtrá-los por família. Também é possível encontrar informações como o título do personagem no card e informações sobre a série em uma página anexa. Game of Thrones é uma série de TV produzida pela HBO baseada na obra de George R. R. Martin e tem todos seus direitos autorais reservados.
Este trabalho foi realizado com o intuito de aplicar as tecnologias abordadas no bootcamp da Laboratória na prática e foi montado usando a linguagem JavaScript (Vanilla) de modo que fosse possível testar nossos conhecimentos com programação lógica, manipulação de DOM, dados mais complexos como listas e objetos bem como o trabalho colaborativo no GitHub. Tudo isso a partir de um arquivo de dados disponibilizado pela Laboratoria.
Pensando na experiência do usuário, desenvolvemos um produto no formato de Fanpage que permite que a experiência de consultar o elenco de personagens de forma divertida, intuitiva e prática ainda que simples.
Fãs novos e assíduos da série que tem interesse em consultar informações básicas sobre os personagens e suas casas.
Acessar informações como o nome completo dos personagens, Casa pertencente, título e ano de nascimento. Além de uma página anexa com o trailer oficial e um botão que direciona para a primeira temporada da série.
Os dados mais relevantes que os usuários desejam ver na interface são os personagens e a família à qual eles pertencem. Isso se deve ao fato de a série abordar um cenário de disputa política e territorial, tornando indispensável que os usuários possam entender esses conceitos de pertencimento dos personagens.
Quando quiserem consultar a lista de personagens.
Utilizamos a ferramenta Google Keep para o planejamento da logística, bem como divisão de tarefas e planejamento dos sprints. Usamos a ferramenta para também compartilhar links de materiais usados como bibliografia. As tecnologias utilizadas neste projeto incluem: JavaScript Vanilla, HTML5, CSS3 para criação da página, Jest para os testes unitários e o Git colaborativo na plataforma Github para o controle de versões. Uma vez que o aplicativo foi criado a partir do uso da linguagem JavaScript pura, dividimos sua aplicação em arquivos da seguinte forma:
- data.js: inclui a lógica das funções criadas para buscar nome, filtrar por família, cálculo agregado de porcentagem relacionada à família e ordenação alfabética.
- extra.js: inclui a lógica da função de tradução dos cards, uma vez que o banco de dados estava em Inglês.
- main.js: inclui toda a manipulação de DOM da página relacionados a exibição de dados na tela, filtragem e ordenação.
Para elaborar o design do aplicativo web, primeiro criamos o protótipo de baixa fidelidade a fim de definir os elementos que seriam usados, bem como um esboço de seu layout em papel sulfite e lápis.
A partir deste primeiro esboço, criamos um protótipo de alta fidelidade no Figma, onde definimos quais seriam as cores e imagens utilizadas, bem como a escolha visual dos elementos. Toda o design foi pensado na experiência de usuário, buscando que este tenha uma sensação de imersão no cenário de Game of Thrones, desde a escolha minuciosa da logo, a imagem de background referenciando Westeros, local onde a série acontece, a escolha das cores que remete à identidade visual da produção.
Na página inicial, temos a projeção dos cards de personagem com suas informações, um campo de pesquisa para que o usuário busque o personagem pelo nome ou sobrenome, um botão de direcionamento para o site oficial de GoT, e um menu hamburguer acionável que direciona para a página sobre a série, permite que o usuário escolha um filtro for familia, uma ordenação alfabética crescente e/ou descresente e uma página adjacente sobre as desenvolvedoras.
Na página sobre a série, podemos ver uma breve descrição sobre a obra e o trailer oficial produzido pela HBO.
E por fim, na página sobre as desenvolvedoras, temos uma breve descrição do projeto, apresentação das desenvolvedoras bem como divulgação de redes sociais e tecnologias utilizadas.
A interface foi trabalhada de forma responsiva para se adaptar a outros tipos de tela além do desktop, deste modo podemos visualizar:
- Uso de Vanilla JavaScript
- Uso de HTML semântico
- Uso de seletores de CSS
- Uso de filtros baseados em uma condição
- Inclusão de Cálculo Agregado
- Criação de protótipo de alta fidelidade usando o Figma
- Criação de testes unitários
- Cobertura mínima de 70% de statements, functions, lines e branches
- Responsividade
- Documentação README incluindo descrição do produto, histórias de usuário, e interface.
- Controle de versionamento colaborativo (Git)
Cobertura de 100% de statements, functions, lines e branches.
O projeto foi desenvolvido utilizando as seguintes tecnologias e ferramentas:
-
HTML: A linguagem de marcação utilizada para estruturar e organizar os elementos da interface do usuário.
-
CSS: Utilizado para estilizar e personalizar a aparência visual da aplicação, garantindo uma experiência agradável e coerente.
-
JavaScript: A linguagem de programação que permite a interatividade e funcionalidades dinâmicas na aplicação.
-
Git: Utilizado para controle de versionamento do código, permitindo o acompanhamento das alterações, rastreamento de problemas e colaboração entre membros da equipe.
-
GitHub: Plataforma de hospedagem de código-fonte que possibilita o armazenamento remoto do repositório do projeto, facilitando o compartilhamento e colaboração entre os desenvolvedores.
-
Testes unitários: Foram implementados testes unitários utilizando a biblioteca de testes Jest para garantir o correto funcionamento das funções desenvolvidas. Os testes abrangem as principais funcionalidades do projeto, como filtrar personagens por família, calcular a porcentagem por família e buscar personagens por nome.
-
Metodologia ágil: A equipe adotou uma abordagem ágil para o desenvolvimento do projeto, utilizando Scrum como metodologia. Isso permitiu uma maior flexibilidade e adaptabilidade ao longo do processo de desenvolvimento, além de promover uma comunicação eficiente e um acompanhamento contínuo das tarefas.
-
Responsividade: A aplicação foi desenvolvida seguindo princípios de design responsivo, o que significa que ela é capaz de se adaptar e fornecer uma experiência adequada em diferentes dispositivos e tamanhos de tela, desde desktops até smartphones.
-
Acessibilidade: Foram aplicadas práticas de acessibilidade para garantir que a aplicação seja utilizável por pessoas com deficiência visual, auditiva ou motora. Isso inclui o uso adequado de semântica HTML, contraste de cores adequado, compatibilidade com leitores de tela e teclado, entre outras diretrizes de acessibilidade.
Essas especificações técnicas fornecem a base para o desenvolvimento e funcionamento da aplicação, garantindo uma implementação sólida e eficiente.