Guilherme Alves Neves Tavares - 11218730
Guilherme Jun Yazaki Grillo - 11208350
Gustavo de Oliveira Silva - 10734366
Trabalho da disciplina SCC0219, Introdução ao Desenvolvimento Web
O projeto é um sistema web completo para um Petshop fictício chamado Cão Cuidado. Este petshop realiza vendas de produtos para diversos animais, além de disponibilizar serviços como banho e tosa para os pets dos clientes. Adicionalmente, o estabelecimento também trabalha com a adoção de animais abandonados, exibindo no website uma lista de todos que ainda podem ser adotados.
Clone o repositório:
git clone https://github.com/Gustavo-de-Oliveira/Cao-Cuidado-Petshop.gitAcesse o projeto na pasta /frontend:
cd frontendInstale as dependências:
npm installExecute a aplicação:
npm run devIrá rodar na porta:3000 -> acesse http://localhost:3000
Para acessar o site em deploy uso o link: https://cao-cuidado-petshop-gustavo-de-oliveira.vercel.app/
Clone o repositório:
git clone https://github.com/Gustavo-de-Oliveira/Cao-Cuidado-Petshop.gitAcesse o projeto na pasta /backend:
cd backendInstale as dependências:
npm installExecute a aplicação:
npm startIrá rodar na porta:8000 -> acesse http://localhost:8000
- O sistema deve comportar dois tipos de usuários:
- Cliente: Aquele que acessa o website para adquirir produtos e serviços.
- Administrador: É responsável por gerenciar os produtos, animais a serem adotados e os horários de agendamento.
- O sistema deve permitir que os usuários realizem seu cadastro no site, as informações dos clientes a serem armazenadas são: email, nome, senha, data de nascimento, endereço e formas de pagamento,.
- Os administradores devem poder colocar produtos e serviços em oferta, alterando, assim, seu preço atual. Todos itens em oferta devem aparecer na página inicial do site.
- Um usuário que já adquiriu um item ou serviço deve ser capaz de avaliar o produto. A avaliação consiste obrigatoriamente de uma nota, e pode conter um comentário
- O sistema deve permitir que o cliente coloque itens do catálogo em um "carrinho", para comprar todos efetuando apenas um único pagamento. Adicionalmente, o sistema deverá calcular um desconto que será proporcional ao valor da compra do cliente.
- O sistema deve garantir que os usuários possam cadastrar diversas formas de pagamento que serão sugeridas ao cliente na hora de pagar.
- Os administradores podem adicionar, remover e gerenciar animais da adoção. Para cadastrar um animal, deve ser fornecida uma descrição geral sobre o animal. Os dados a serem armazenados sobre cada animal são: Espécie, raça, idade, descrição, vacinas e imagens.
- O sistema deve permitir que os clientes sinalizem ao petshop que têm interesse em adotar um animal.
- O sistema deve conter uma lista com todos horários disponíveis na semana para os clientes visitarem os animais em adoção.
- Os clientes devem poder agendar um horário para visitar o petshop paara conhecer os animais em adoção.
As páginas web do site foram feitas em HTML5 e CSS3. O servidor foi feito em nodeJS, utilizando mongoDB para a base de dados.
O diagrama a seguir representa o Modelo Entidade-Relacionamento do sistema, e será útil para ilustrar como as principais funcionalidades do sistema serão implementadas:
- Os tipos de usuários do sistema foram implementados com uma generalização, de forma que clientes e administradores são diferenciados por um atributo booleano que indica se o usuário é administrador, ou não
- As vendas do sistema serão armazenadas de forma que, serão associados, para cada pedido, o cliente que o realizou, e a lista de itens envolvidos. Além disso, será possível associar uma avaliação para cada item comprado.
- A adoção será instanciada dado um par Cliente e Animal , de forma que, cada adoção será identificada pelo par e pela data em que foi realizada. Nota-se também que, os animais são identificados por um código numérico
- Nota-se que o mongoDB utiliza de identificadores sintéticos para toda entidade.
O protótipo das páginas do website estão contidas em: Figma
Ao acessar o sistema, o cliente é direcionado para esta página. Nela, o usuário encontra as ofertas da semana, as promoções selecionadas, e as marcas com as quais o petshop trabalha
As telas de lista estão relacionadas a um tipo de animal, de forma que, o usuário pode acessar cada Tela de Lista pelo header das páginas. Nesta tela o usuário tem acesso aos produtos vendidos pelo petshop, podendo realizar buscas ou filtrá-los por categoria, preço ou marca.
O usuário tem acesso a essa tela ao selecionar um produto ou serviço. Nela, o produto é descrito com imagens, descrição geral, especificação técnica, perguntas mais frequentes, avaliações e comentários dos usuários. Além disso, na tela do produto, é possível adicioná-lo ao carrinho e ver outros produtos relacionados
O usuário é redirecionado para esta tela ao clicar em seu carrinho. Ela exibe todos itens adicionados ao carrinho do usuário.
Esta tela contém uma descrição sobre o petshop.
Obs: Este é um diagrama que ilustra a navegação lógica em que as páginas podem ser acessadas porém, ela desconsidera os headers e footers do website. As Páginas "Inicial", "Lista", "Carrinho", e "About" podem ser acessadas a partir de qualquer outra página do website, através do header.
Foi realizado 1 teste de UI (interface de usuário), utilizando o framework Cypress. O Cypress permite a visualização dos testes automatizados em um browser criado por ele.
O teste realizado verifica se o valor final do carrinho, após adicionar produtos e somar os valores com o frete, está correto. Para testar, faça os passos:
- Verifique se está na pasta /frontend:
/cd frontend- Verifique se o projeto está rodando localmente (localhost:3000):
npm run dev- Rode o teste com cypress
npm run test:open- O Cypress abrirá uma janela com uma lista de testes. Clique no único item da lista, o 'cart.spec.js'.
- Abrirá outra janela, carregando e rodando o teste.