Projeto Web - AZULÃO PETSHOP

Projeto da disciplina Introdução ao Desenvolvimento Web - SCC0219.
Foi decidido pelo grupo que o website a ser desenvolvido seria um petshop virtual.

Autores:

• Felipe Cadavez Oliveira - 11208558

• Gustavo Lelli Guirao - 11918182

• Luiz Fernando Rabelo - 11796893
  
  
  

1. Requisitos

O sistema deve ter 2 tipos de usuários: clientes e administradores.
Os administradores são responsáveis por registrar/gerenciar clientes, produtos e serviços fornecidos. O aplicativo já vem com uma conta "admin" com senha "admin".
Clientes são usuários que acessam o sistema para comprar produtos e/ou serviços.
O registro de cada cliente contém nome, CPF, gênero, telefone e e-mail.
Os registros de produto incluem nome, id, foto, descrição, preço, quantidade em estoque.
Os registros de serviços incluem nome, id, foto, descrição, preço, agenda, hora de funcionamento.
Venda de produtos: Os produtos e serviços são selecionados, são incluídos em um carrinho e sua quantidade escolhida. Os produtos são comprados usando um número de cartão de crédito (qualquer número é aceito pelo sistema). A quantidade de produto vendida é subtraída da quantidade em estoque. Os carrinhos são esvaziados somente quando o pagamento é efetuado ou quando os clientes removem todos os produtos.
Gerenciamento de produto: os administradores podem criar/atualizar/ler/excluir novos produtos. Por exemplo, eles podem alterar a quantidade em estoque.
Gerenciamento de serviços: os serviços agem como produtos com a diferença que a “quantidade em estoque” de um serviço é na verdade a quantidade de vezes que esse serviço pode ser solicitado em um dia, essa quantidade pode ser alterada porém receberá um “refresh” para a quantidade diária inicial toda vez que um dia passar. O serviço também possui um campo extra de horário de funcionamento impedindo que um serviço seja solicitado fora do horário de funcionamento da loja. O sistema é responsivo e visa uma boa acessibilidade e usabilidade para seus usuários.

2. Descrição do Projeto

Nosso site é um petshop virtual, que vende todo tipo de produtos destinados aos cuidados dos pets, o que inclui higiene, lazer, alimentação e outros cuidados. Além de produtos, também serão oferecidos serviços, como banhos, tosas, consultas veterinárias, etc.

Diagrama de navegação:

As imagens do mockup estão na pasta /mockups. Também pode ser acessado nos links abaixo:

• Homepage

• Lista de Produtos por Categoria

• Produto

• Serviço

• Login

• Criar conta

• Carrinho

• Finalizar Compra

• Edição de Informações pessoais (Admin)

• Edição de Informações pessoais (Cliente)

• Edição de Endereço (Cliente)

• Edição de Pagamento (Cliente)

• Gerência de Produtos

• Gerência de Usuários

• Gerência de Produto Específico

• Gerência de Usuário Específico

Funcionalidades

As funcionalidades visadas pelo nosso site são:

• Login com email e senha na plataforma, com opção de criar uma nova conta, ou esqueceu a senha.
• Visualização das informações do cliente, com opção de alterar informaçoes pessoais, de pagamento ou de endereço.
• Visualização da página de administrador, com opção de administrar os produtos e usuários da loja.
• Inserção de sserviços pelo administrador, com agenda, hora de funcionamente e descrição do serviço
• Acesso à homepage, com visualização de alguns produtos selecionados pela loja.
• Visualização de um produto, com seu nome, descrição, preço e botão para adicionar ao carrinho.
• Visualização de um serviço, com seu nome, descrição, preço, agendamento, opção de buscar o animal em casa ou levar o animal no petshop (obs essa função está disponível apenas para CEPs de São Carlos)
• Comentário e avaliação de um produto/serviço
• Acesso ao carrinho de compras, com opção de mudar a quantidade de itens, conferir o preço total com o frete e finalizar compra.
• Opção de inserir informações do cartão de crédito para efetuar o pagamento de maneira mais rápida.
• Opção de alterar o endereço de entrega.
  
  

Informações armazenaadas no servidor

Contas:

• Email
• Senha
• Nome
• CPF
• Gênero
• É_Adm?
  
  

Endereços:

• Conta associada
• CEP
• Número
• Complemento
  
  

Cartão Salvos:

• CPF do titular
• Número do cartão
• Nome do titular
  
  

Produtos:

• Nome
• Descrição
• Preço
• Id
• Foto
• Quantidade em estoque
  
  

Serviços:

• Nome
• Id
• Foto
• Agenda
• Horário de funcionamento
  
  

3. Comentários sobre o código

O código ainda não possui responsividade, apenas a estrutura do site e uma estilização compatível com desktops tradicionais. Como o código foi feito em Vue não tivemos grandes dificuldades exceto para aprender como utilizava, e para realizar o uso do localStorage, porem uma vez compreendido esses conceitos, a escrita do código foi apenas trabalhosa pela enorme quantidade de scripts a serem feitos.

4. Plano de teste

O plano de teste é constituído em testar o site enquanto ele é produzido, usando navegadores como Google Chrome, Firefox e Brave.

5. Resultados dos testes

Ele apresenta resultado satisfatório, ainda não apresentando responsividade (dado que ainda não foi implementada), porém há uma integração entre todas as abas de forma que tanto o cliente quanto o administrador não caiam em páginas "vazias"

6. Building

Front

cd site

Instalação de Dependências:

npm install

Compilação no Modo de Desenvolvimento:

npm run serve

Compilação e Minificação para Produção:

npm run build

Back

cd server

Instalação de Dependências:

npm install

Inicialização do servidor

npm start

7. Problemas

Os maiores problemas foram o aprendizado da estrutura do vue e o gerenciamento do local storage (armazenamento de contas, dados dos produtos, etc...) além do tempo necessário para fazer o cadastro de cada um dos produtos

8. Comentários

A segurança da aplicação foi completamente negligenciada por fins educativos. Para fins de produção, procure alternativas mais seguras.
A ferramenta utilizada para o desenvolvimento dos mockups foi o Figma. Para o desenvolvimento de scripts tais como, html, CSS, javascript, utilizamos o framework VueJS