ThalitaNeves95 / Rick-And-Morty-SAP006

👴🏼🌍🛸👦🏻

RICK AND MORTY

Para acessar o projeto, clique Aqui 🚀.

📑 Índice

• 1. Sobre o Projeto
• 2. Sobre o Tema
• 3. Experiência dos Usuários
• 4. Layout
• 5. Objetivos de Aprendizagem
• 6. Começando o Projeto
• 7. Testes
• 8. Melhorias Futuras
• 9. Autoras

🌍 1. SOBRE O PROJETO

O projeto Data-Lovers, foi criado dentro do bootcamp da Laboratória, com o intuito de estudarmos e colocarmos em prática o conteúdo do objetivos de aprendizagem. Dentre vários temas, o escolhido foi o Rick and Morty.

O projeto foi desenvolvido para os fãs e curiosos da série Rick and Morty. A idéia era desenvolver uma página web simples e objetiva, onde o usuário conseguisse filtrar as informações, como gênero, espécie, status e por ordem alfabética.

Além disso, cada filtragem que o usuário realiza, a % dos personagens da categoria aparece.

O projeto foi desenvolvido utilizando apenas vanilla JavaScript, HTML5 e CSS3, e foi realizado em 4 semanas.

💡 2. SOBRE O TEMA

Rick and Morty é uma série de animação adulta norte-americana de comédia e ficção científica criada por Justin Roiland e Dan Harmon para o bloco de programação noturno Adult Swim, exibido no canal Cartoon Network.

A série estreou em 2 de dezembro de 2013 e acompanha as perigosas aventuras do cientista alcoólatra Rick e seu neto Morty, que divide seu tempo entre a vida familiar e viagens interdimensionais.

Para saber mais, clique Aqui 🛸.

💺 3. EXPERIÊNCIA DOS USUÁRIOS

Utilizamos o FORMS para criar um formulário onde questionamos seus hábitos, o quanto se consideravam fãs da série e quais informações gostariam de acessar.

Hábitos dos usuários:

Fãs da série:

Informações que gostariam de visualizar no site:

• Origem;
• Se está vivo ou morto;
• Espécie;
• Origem;
• Localização;
• Quantos personagens de cada gênero existem;
• Quantos episódios cada personagem aparece.

Em seguida configuramos nossas Histórias de Usuários:

❶ "Gostaria que quando eu entrasse no site, eu visualizasse todos os personagens na tela"

Assim que o usuário entra no site, ele consegue visualizar todos os Cards dos personagens com as suas informações. O site também é responsivo, o usuário poderá navegar por Celular e Tablet.

❷ "Gostaria de filtrar os Cards por gênero, status, espécie e a origem".

O usuário pode filtrar as informações através de um menu, assim que realiza a filtragem a % dos personagens da categoria aparece na tela. Também pode realizar o filtro por ordem alfabética ou vice-versa.

❸ "Gostaria de pesquisar por um personagem específio e assim aparecer as informações".

No site há um campo de busca, onde o usuário apenas digita o que procura e os personagens aparecem com suas respectivas informações.

🎨 4. LAYOUT

As cores do layout foram baseados nas cores da série e dos personagens principais (Rick and Morty). Para a apresentação das imagens e informações, optamos por utilizar os Cards, facilitando a leitura e visualização.

🎯 Protótipos:

Os protótipos foram pensandos para facilitar a navegação e em trazer uma resposta rápida na busca por informações, já que o usuário poderá assistir a série e buscar por informações simultâneamente.

Protótipo em baixa fidelidade para Desktop:

Protótipo em baixa fidelidade para Celular:

Protótipo em alta fidelidade para Desktop:

Protótipo em alta fidelidade para Celular:

📚 5. OBJETIVOS DE APRENDIZAGEM

• Uso de HTML semântico.
• Uso de seletores de CSS.
• Construir sua aplicação respeitando o desenho realizado (protótipo).
• Uso de flexbox em CSS.
• Uso de seletores de DOM.
• Gerenciamento de eventos de DOM.
• Manipulação dinâmica de DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
• Uso de condicionais (if-else | switch | operador ternário)
• Uso de laços (for | for..in | for..of | while)
• Uso de funções (parâmetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules
• Diferenciar entre expression e statements.
• Diferenciar entre tipos de dados atômicos e estruturados.

💻 6. COMEÇANDO O PROJETO

Antes de tudo, precisa verificar se o CMDER, NODE e GIT estão instalados em seu computador. Para instalar e executar a aplicação:

• Faça o fork do repositório no GitHub para salvar os arquivos;
• Utilize um editor de texto como Atom ou Visual Studio Code;
• Configure o GIT pelo terminal com o nome e e-mail;
• Coloque no terminal npm install para instalar as dependências;
• Coloque no terminal npm start para gerar um localhost.
• Depois de instalar o repositório e suas dependências em seu computador, crie uma nova Branch com cada função que irá trabalhar utilizando:

git switch -b nomeDaBranch
(cria e entra direto na branch)

• Sempre que atualizar um arquivo faça um Commit para o GitHub:

1. git add nomeDaPasta/nomeDoArquivo.extensão 
**OU** git add . (para adicionar todo o conteúdo)
2. git commit -m "nome da atualização"
3. git push origin nomeDaBranch

• Para executar os testes de ESLINT, digite no terminal:

npm run pretest

• Para executar testes de unidade, digite no terminal:

npm run test

• Quando terminar o projeto, faça um Deploy no próprio terminal utilizando:

npm run deploy.

🛑 7. TESTES

🚦 TESTES UNITÁRIOS

Os testes unitários foram desenvolvidos para fazer com que o projeto rode adequadamente, caso mudem alguma funcionalidade, os testes não irão rodar.

🚦 TESTES DE USABILIDADE

Para os testes de usabilidade, desenvolvemos um FORMS, fazendo com que os usuários naveguem em nossa página e nos deem um feedback para melhorias e correções:

Como retorno, nossos usuários:

• 55% acessou pelo celular;
• 100% acharam que o layout trouxe familiaridade com o tema;
• 100% acharam que o site não demorou para carregar;
• 95% acharam que foi simples navegar pelos filtros e 5% acharam que os filtros poderiam ser integrados;
• 100% não tiveram problemas em encontrar/ler as informações na tela.

🚧 8. MELHORIAS FUTURAS:

• Quando o usuário selecionar um novo filtro, o anterior deve voltar a sua categoria neutra;
• Filtrar apenas os principais personagens;
• Realizar todos os filtros integrados;
• Fazer o flip no card todo.

👩‍💻 9. AUTORAS:

Projeto realizado para o Bootcamp da LABORATÓRIA.

Bianca Alves e Thalita Neves