Projeto de Introdução ao Desenvolvimento Web (SCC0219) - Barão das Skins

Diogo Castanho Emídio - 11297274

Gabriel Monteiro Ferracioli - 11219129

Paulo Henrique Sebastião de Moura - 10310471

1. Introdução

1.1 Sobre o projeto

O presente projeto é um site de uma loja online que vende skins de diversos jogos. Àqueles que não sabem, skins são visuais alternativos a elementos de um jogo, podendo ser de personagens (como roupas) ou de itens (designs diferentes para armas, por exemplo). No caso, este site é exclusivo para compras de skins de personagens dos seguintes jogos:

• Overwatch;
• League of Legends;
• Valorant;
• Among Us.

O site possui 2 (dois) tipos de usuários:

• Administrador (Admin): responsável por registrar/gerenciar administradores, usuários e skins. Tem registrado: nome, nome de usuário, e-mail, telefone e senha (o nome de usuário e a senha são admin);
• Cliente: usuário padrão, que acessa o site para comprar skins. Tem registrado: nome, nome de usuário, e-mail, telefone, endereço e senha (o nome de usuário e a senha são cliente).

As skins, por sua vez, são registradas com: nome, id, jogo a que pertencem, imagem, spotlight (animação de como ficam no jogo, sendo essa a funcionalidade específica do site), descrição, quantidades vendida e em estoque e preço. Por fim, todas as informações dos usuários (administradores e clientes) e dos produtos ficam salvas no servidor.

1.2 Como instalar

1. Utilizar o comando git clone para obter o repositório completo;
2. Possuir instalados o node.js, MongoDB Community server e NPM;
3. Utilizar os seguintes comandos dentro do repositório do projeto:

• npm init -y
• npm add express mongoose
• npm install axios --save
• nodemon -D
• npm run dev

4. O último comando inciará um servidor local na porta 8080, então basta acessar digitar localhost:8000 na barra de endereços do navegador.
5. Ao abrir o MongoDB, logar por mongodb://localhost:27017/web-development-store e então criar a base de dados web-development-store-main com as coleções Product e User;
6. Popular a base de dados do servidor MongoDB Community acessando collection -> import data e adicionando o dump salvo UserDatabase.json para a coleção User.

O uso é intuitivo, porém o diagrama pode ser útil caso haja dificuldades na navegação (ver seção Navegação, em Descrição do Software).

2. Descrição do Software

2.1 Navegação

Funcionalidades:

• Página inicial: descrição do site;
• Entrar: fazer login;
• Cadastrar: fazer cadastro;
• Administrador:
  • Área de usuário: escolher ação;
  • Buscar produtos: procurar e excluir produtos;
  • Produto: ver e editar produto (imagem, spotlight e informações);
  • Adicionar produto: criar produto;
  • Editar perfil: alterar informações próprias;
  • Buscar usuários: ver, editar (conceder ou remover permissão de administrador) e excluir usuários.
• Cliente:
  • Área de usuário: escolher ação;
  • Buscar produtos: procurar e adicionar produtos ao carrinho;
  • Produto: ver (imagem, spotlight e informações) e adicionar produto ao carrinho;
  • Carrinho: comprar produto(s);
  • Editar perfil: alterar informações próprias.

Uma observação a ser feita: todas as telas levam à página inicial e à respectiva área de usuário, porém isso não foi incluído no diagrama para não poluir a imagem.

2.2 Testes

2.2.1 Plano de teste

Foi testada cada uma das telas em três navegadores diferentes (Firefox, Google Chrome e Microsoft Edge), do formato máximo (visualização em computador) ao mínimo (uso em telefone celular), mais especificamente:

• Mexer no carrossel da tela inicial;
• Criar novo perfil;
• Entrar como administrador:
  • Adicionar skin;
  • Editar skin;
  • Apagar skin;
  • Promover usuário;
  • Rebaixar usuário;
  • Excluir usuário;
  • Editar perfil.
• Entrar como cliente:
  • Visualizar skin;
  • Visualizar spotlight;
  • Adicionar skin ao carrinho;
  • Comprar skin;
  • Remover skin do carrinho;
  • Finalizar compra;
  • Editar perfil.

2.2.2 Resultados

Com os testes supracitados, obteu-se:

• Mexer no carrossel da tela inicial - OK;
• Criar novo perfil - OK;
• Entrar como administrador:
  • Adicionar skin - OK;
  • Editar skin - OK;
  • Apagar skin - OK;
  • Promover usuário - OK;
  • Rebaixar usuário - OK;
  • Excluir usuário - OK;
  • Editar perfil - OK.
• Entrar como cliente:
  • Visualizar skin - OK;
  • Visualizar spotlight - OK;
  • Adicionar skin ao carrinho - OK;
  • Comprar skin - OK;
  • Remover skin do carrinho - OK;
  • Finalizar compra - OK;
  • Editar perfil - OK.

2.3 Comentários

Não há nenhum comentário a ser feito.

3. Problemas

Os principais problemas foram o Marvel não ser muito intuitivo nem gerar o código do site modelado e, principalmente, integrar o frontend com o backend.

4. Conclusões

O processo de criação foi de grande aprendizado, sendo necessário o uso de diferentes tecnologias, conhecimentos, linguagens e estratégias. O site foi focado nas funcionalidades necessárias para uma boa experiência do cliente, evitando erros de funcionalidade que gerassem qualquer inconsistência de dados, mantendo uma liberdade razoável para clientes e administradores. Por fim, acreditamos que o trabalho foi bem executado e que toda parte técnica e prática teve um desempenho bem satisfatório e que, caso fosse aplicada a uma loja real, um usuário poderia realizar suas comprar com uma experiência agradável e em uma plataforma amigável.