Participantes
Figma
Requisitos do Sistema
Descrição do Projeto
Comentários Sobre o código
Testes Automatizados
Resultados dos Testes
Executando o código
Problemas
Comentários
Reviews
Diógenes Silva Pedro - 11883476
Marco Antônio Ribeiro de Toledo - 11796419
Milena Corrêa da Silva - 11795401
- O sistema trabalha com a venda de discos de vinis importados e nacionais.
- O sistema possui dois tipos de usuários: Clientes e Admnistradores.
- Os admnistradores são aqueles responsáveis por gerenciar clientes, produtos e outros admnistradores.
- Os clientes são as pessoas que compraram os discos.
- A aplicação já vem com uma conta padrão de administrador com
login: admin; senha: admin.
- O sistema utiliza a lógica tradicional de "carrinhos" para realizar as vendas.
- O usuário logado pode adicionar/remover itens do carrinho.
- A compra pode ser concluída após o cliente confirmar/adicionar o endereço de entrega e o método de pagamento (cartão, boleto ou pix).
- O carrinho é esvaziado quando uma compra é concluída.
- Admnistradores: id, nome, telefone e um cadastro (email e senha).
- Clientes: id, nome, telefone, um cadastro (email e senha), uma lista de endereços de entrega (inicialmente vazia), uma lista de cartões (inicialmente vazia) e uma lista de pedidos (inicialmente vazia).
- Produtos (Discos de Vinil): id, título, capa, descrição (curta e detalhada), data de lançamento, artistas, gêneros, informações adicionais sobre o disco físico, preço, quantidade em estoque e quantidade vendida.
- Cupons: id, id do usuário, id do disco, porcentagem do desconto.
- O usuário consegue filtrar os produtos. Além de que em cada página específica de um produto, no final temos um sugestão de discos parecidos.
- O sistema deve ser responsivo e possuir boa usabilidade.
- Os administradores podem catalogar/gerenciar os produtos e usuários do sistema de maneira fácil e prática.
- Tanto clientes como visitantes (usuários não cadastrados) podem visualizar a listagem de produtos do site, pesquisar produtos e utilizar filtros.
- Visitantes podem se cadastrar no site, tornando-se clientes.
- A cada dia, clientes tem direito a ganhar desconto em algum disco aleatório.
- Clientes podem acessar e editar sua conta e informações nela contidas, como endereços e dados de cadastro.
- Clientes podem adicionar/remover itens ao carrinho de compras, adicionar/confirmar o endereço de entrega e o metódo de pagamento e, por fim, concluir o pedido.
- Clientes podem acompanhar seu histórico de pedidos.
- A página de cada disco possui uma uma secção que sugere itens similares.
- Os registros de dados dos clientes, administradores, produtos e cupons.
Para garantir uma boa experiência de usuário, tentamos utilizar os princípios definidos pelo Material.
Para uma melhor expêriencia de usuário, decidimos separar as páginas de administrador das demais. Assim, o admin consegue acessa-las pelo link localhost:8080/admin sem ter âncora com as páginas principais, ou seja, sem que essa página apareça para usuários comuns (visitantes e clientes).
Foi utilizada o padrão do Vue, com uma pasta para components, uma para views, uma para css globais, uma para assets, etc.
Além disso em cada arquivo .vue o css é scoped, ou seja, ele só é aplicado nos elementos da página ou componente.
Foi usado localStorage para simular o funcionamento do backend. Além de um arquivo de dados, ao invés dos dados do banco.
Component FlexTable
Algumas funcionalidades foram implementadas para testar o funcionamento do site, antes do desenvolvimento do backend. Para a simulação das funcionalidades foram implementadas:
- Cadastro de conta
- Login (usuário e admin)
- Logout
- Operações no carrinho (adição e remoção de discos)
- Compra
- Adicionar ou editar endereços no perfil do usuário
- Filtro pro gênero, preço e nome do artista (funcionaidade extra).
- Sugestão de discos (funcionalidade extra).
- Operações dos admins (adição, edição e remoção de admins e produtos, além de remoção de usuários)
Para testar as funcionalidades temos:
-
Compra:
O usuário pode adicionar e remover produtos do carrinho. Os produtos podem ser adicionados pela página inicial, pela página de produtos ou pela página de um produto específico.
O filtro está implementado na página de produto e é aplicado automaticamente.
-
Admin:
Ao entrar na página de admin o usuário precisa ter a permissão necessária para poder logar. (Temos no arquivo user.js dentro de src/store/modules um usuário admin que pode logar na página para poder fazer os testes)
Ao logar ele pode acessar as páginas de produto, admins e usuários. Nessas temos um menu responsivo para adição, edição e remoção de produtos, admins ou usuários.
-
Novas informações para o usuário
Entrando na página do perfil do usuário o mesmo pode adicionar ou editar endereços para entrega.
Pelos testes realizados, temos um bom funcionamento em todos os casos. Não houveram problemas ao integrar com o servidor.
Para você poder executar o código é necessário
que a máquina tenha o npm e o yarn instalado.
Caso você ainda não os tenha siga esse tutorial
Após a instalação do yarn, para instalar os pacotes necessários basta executar:
yarn install
Para compilar o código e ter o hot-reload para desenvolvimento:
yarn serve
Para compilar para produção:
yarn build
Para rodar o servidor, na pasta backend basta rodar:
yarn run dev
Vale o adendo de que no repositório não temos o .env do banco, ou seja, é possível rodar o banco, mas não é possível acessá-lo.
Todos os problemas que foram citados anteriormente nesse documento, foram resolvidos ao integrar o frontend com o backend.
Homenagem aos paulistinhas de menta que nos acompanharam nessa trajetória
- release/v2.0.0: Entrega do Milestone 2, 21/06/2022
- release/v3.1.0: Entrega do Milestone 3, 09/07/2022