O sistema é um site para venda de cones trufados e festas na caixa. Os cones trufados são vendidos em diferentes formatos: cone simples, cone cascão, cone na caixa e cone comemorativo (páscoa, natal, dia das crianças, entre outros). As festas na caixa são produtos com tema pré-definido (café da manhã, quitutes, caixa bar, vinho, petiscos, entre outros) ou podem ser montadas pelo cliente, escolhendo assim seus itens e decoração.
- O sistema acomoda dois tipos de usuários: clientes e administradores;
- Os administradores são responsáveis por registrar e gerenciar administradores, clientes e produtos. A aplicação possui uma conta admin com senha admin;
- Os clientes são usuários que se cadastram e acessam o sistema para comprar produtos. A aplicação possui uma conta breno@usp.br com senha breno;
- O sistema permite que um administrador cadastre outro. As informações armazenadas sobre um administrador são: CPF, nome, endereço, telefone, e-mail e senha.
O sistema permite que um administrador cadastre um cliente. As informações armazenadas sobre um cliente são: CPF, nome, endereço, telefone, e-mail e senha.
O sistema permite que um administrador consulte, atualize e remova clientes/administradores; - O sistema permite que um cliente se cadastre no mesmo. As informações armazenadas sobre um cliente são: CPF, nome, endereço, telefone, e-mail e senha;
- O sistema permite que o administrador cadastre, consulte, atualize e remova produtos.
As informações armazenadas sobre um produto são: nome, preço, descrição, quantidade e fotos. Note que obrigatoriamente são armazenadas 3 fotos de cada produto. Além disso, o sistema armazena o caminho onde as fotos estão armazenadas, não as fotos em si, por exemplo:img/cones.jpeg
; - O sistema permite a venda dos produtos. Para cada produto vendido, a quantidade vendida deve ser incrementada e quantidade em estoque decrementada conforme a quantidade vendida. Uma venda não pode ser realizada caso não haja a quantidade em estoque necessária.
A venda é paga com um cartão de crédito; - O sistema deve conter um carrinho, no qual os produtos selecionados estarão listados com as informações de nome, foto, descrição, preço e quantidade selecionada. Além disso, deve ser mostrado o preço total associado a todos os itens. Os carrinhos serão limpos apenas no pagamento ou pelos clientes;
- O sistema permite a montagem de uma festa na caixa personalizada. Por meio desta funcionalidade o cliente pode definir quais serão os itens que compõem a festa na caixa e a sua decoração (cores) com base em um tema: Festa na Caixa, Café da Manhã ou Caixa-Bar. Além disso, é possível ver o valor total da festa na caixa customizada.
Note que como a festa na caixa personalizada é feita sob demanda, não há um limite no estoque; - O sistema fornece requisitos de acessibilidade e fornecer boa usabilidade. O sistema é responsivo.
A plataforma foi implementada com HTML5, CSS3, Javascript, VueJS, NodeJS e MongoDB.
A base de dados utiliza MongoDB e está hospedada na Cloud (cloud.mongodb.com), na organização da Loja Doce Chamego.
São armazenadas as informações de usuários e produtos.
Usuários
O sistema conta com dois tipos de usuários: administrador e cliente.
Além disso, o sistema conta com o visitante, que representa um usuário que não possui associação com a plataforma e apenas pode consultar produtos.
Produtos
O sistema permite a venda de 2 modalidades de produtos: cones e festas na caixa.
Ao acessar a plataforma, o visitante é levado para a tela inicial.
A partir dessa tela, o visitante consegue visualizar os produtos à venda. Além disso, é possível visualizar informações sobre o contato da empresa.
Utilizando o menu do sistema, o visitante consegue realizar login ou cadastro na plataforma.
Na tela de login, o usuário consegue acessar a plataforma. Para acessar a plataforma, o usuário deve informar o e-mail e senha cadastrados.
Após o acesso, clientes e administradores possuem acesso a funcionalidades distintas.
Além disso, através da tela de login, o usuário consegue acessar a tela de cadastro.
O cadastro na tela de cadastro é realizado por usuários do tipo cliente.
Quando um usuário do tipo administrador acessa a plataforma, ele pode acessar a tela de produtos. Na tela de produtos é possível ver uma listagem dos produtos, editá-los e removê-los. Também é possível cadastrar novos produtos.
Quando um usuário do tipo administrador acessa a plataforma, ele pode acessar a tela de cadastro de produto. É possível cadastrar um novo produto do tipo cone.
Quando um usuário do tipo administrador acessa a plataforma, ele pode acessar a tela de editar produto. É possível editar as informações de um cone.
Quando um usuário do tipo administrador acessa a plataforma, ele pode acessar a tela de usuários. Na tela de usuários é possível ver uma listagem dos usuários, editá-los e removê-los. Também é possível cadastrar novos usuários.
Quando um usuário do tipo administrador acessa a plataforma, ele pode acessar a tela de cadastro de usuário. É possível cadastrar um novo usuário do tipo administrador ou cliente.
Quando um usuário do tipo administrador acessa a plataforma, ele pode acessar a tela de editar usuário. É possível editar as informações de um usuário.
Quando um usuário do tipo cliente acessa a plataforma, ele pode acessar a tela de personalização. É possível que o cliente personalize sua própria caixa dentre os três tipos disponibilizados pela loja: Festa na Caixa, Café da Manhã e Caixa-Bar. O cliente pode escolher os componentes e a cor da caixa. O cliente também pode finalizar a personalização.
Quando um usuário do tipo cliente acessa a plataforma, ele pode acessar a tela de carrinho.
É listado todos os produtos selecionados para compra. Além disso, é possível aumentar a quantidade de um determinado produto, remover ele da lista ou finalizar o pedido.
No diagrama a seguir, os retângulos representam as telas.
- css: Arquivos CSS;
- img: Imagens utilizadas no código e na documentação;
- templates: Templates criados com VueJS que são reutilizados em várias páginas (rodapé e menu);
- vue: Código VueJS criado para cada tela.
- bin: Armazena o código do servidor;
- source: Contém os controllers, models, repositories, routes e configurações do servidor.
Para o funcionamento do login, foi utilizado o Local Storage do navegador.
Os testes da aplicação back-end foram realizados utilizando Postman
e via navegador.
- GET /
Retorna a listagem de usuários; - GET /:id
Retorna as informações do usuário com o id correspondente se existir.
Se não existir, retorna informando que o usuário não existe. - POST /
Armazena o usuário.
Caso algum dos campos não tenha sido preenchido, informa erro; - PUT /:id
Atualiza o usuário com base no id.
Caso o usuário não exista, retorna informando que o usuário não existe.
Caso algum dos campos não tenha sido preenchido, informa erro; - DELETE /:id
Remove o usuário com base no id.
Caso o usuário não existe, retorna informando que o usuário não existe; - POST /authenticate
Autentica o usuário no banco de dados.
Caso o usuário não existe ou os dados estejam incorretos, informa acesso negado.
- GET /
Retorna a listagem de produtos; - GET /:id
Retorna as informações do produto com o id correspondente se existir.
Se não existir, retorna informando que o produto não existe. - POST /
Armazena o produto.
Caso algum dos campos não tenha sido preenchido, informa erro; - PUT /:id
Atualiza o produto com base no id.
Caso o produto não exista, retorna informando que o produto não existe.
Caso algum dos campos não tenha sido preenchido, informa erro; - DELETE /:id
Remove o produto com base no id.
Caso o produto não existe, retorna informando que o produto não existe;
- Visitante: No modo visitante, é permitida a navegação entre a tela inicial, cadastro e login. Foi testado os botões dos menus nas telas;
- Cliente: Com perfil de cliente, é permitida a navegação entre a tela inicial, carrinho e personalização. Foi testado os botões do menu nas telas;
- Administrador: Com perfil de administrador, é permitida a navegação entre a tela inicial, tela de usuários (listagem, edição e cadastro) e tela de produtos (listagem, edição e cadastro). Foi testado os botões do menu nas telas.
Além disso, foram testados:
- O logo da marca Doce Chamego localizado no menu que, ao ser clicado, encaminha para a tela inicial;
- O logo da marca Doce Chamego localizado no rodapé que, ao ser clicado, encaminha para a tela inicial;
- O ícone do Instagram e Whatsapp localizado no rodapé que, ao ser clicado, encaminha para as redes sociais da Doce Chamego.
Foram feitos testes nos formulários de:
-
Login: Os campos e-mail e senha são obrigatórios e caso não sejam preenchidos uma mensagem de erro informa a necessidade de preenchimento. Para realização do teste, foi realizada a tentativa de login sem digitar um ou mais dos campos. Além disso, é feita validação se o usuário é válido, ou seja, esta cadastrado no sistema;
-
Cadastrar usuário (Visitante): Todos os campos são obrigatórios e caso não sejam preenchidos uma mensagem de erro informa a necessidade de preenchimento. Para realização do teste, foi realizada a tentativa de cadastro sem digitar um ou mais campos. Além disso, o campo CPF exige 11 valores numéricos, o campo e-mail exige um e-mail com formato válido e o telefone exige DDD e o número telefônico. Para realização do teste, foi feita tentativa de cadastro não cumprindo os requisitos descritos anteriormente;
-
Personalização: O campo de cor e bebida são os únicos que são digitados pelo usuário e são obrigatórios, se não forem preenchidos uma mensagem de erro informa a necessidade de preenchimento. Para realização do teste, foi realizada a tentativa de adicionar ao carrinho sem digitar algum dos valores. Além disso, a quantidade de bebida só aceita ser alterada via botão no campo e não aceita valores negativos ou maiores que 5. Para realização do teste, foi feita tentativa de inserir valores negativos ou maiores que 5. Note que a seleção se acompanhamento e/ou aperitivos é opcional.
-
Administrar usuários: Nesta página serão exibidos todos os usuários cadastrados no banco de dados. A partir desta página é possível navegar entre a página de administração de usuários, cadastro de novos usuários e ainda é possível a exclusão de usuários. Os testes foram realizados conforme a navegação entre as páginas e verificando se o destino está correto, o botão "Editar" redireciona a página de edição de usuários e o botão de "Cadastrar Usuário" redireciona para a página de cadastro de novo usuário; por fim, o botão "Excluir" elimina o usuário da aplicação, este foi testado verificando que o mesmo foi eliminado da lista de usuários cadastrados.
-
Cadastrar usuário (Administrador): Diferentemente de quando um visitante se cadastra na plataforma, o administrador, além de poder cadastrar um novo cliente, ele também poderá cadastrar um novo administrador. Todos os campos são obrigatórios e caso não sejam preenchidos uma mensagem de erro informa a necessidade de preenchimento. Para realização do teste, foi feita a tentativa de cadastro sem digitar algum dos valores. Além disso, o campo CPF exige 11 valores numéricos, o campo e-mail exige um e-mail com formato válido, o telefone exige DDD e o número, e o cargo que o novo usuário irá ocupar na aplicação (Cliente ou Administrador). Para realização do teste, foi feita tentativa de cadastro não cumprindo os requisitos;
-
Editar usuário: Igualmente a operação do administrador cadastrar um novo usuário, os mesmos campos serão apresentados, logo, todos os campos são obrigatórios e foram testados da mesma forma que a operação de cadastro descrita anteriormente!
-
Administrar produtos: Nesta página serão exibidos todos os produtos cadastrados no banco de dados. A partir desta página é possível navegar entre a página de administração de produtos, cadastro de novos produtos e ainda é possível a exclusão de produtos. Os testes foram realizados conforme a navegação entre as páginas e verificando se o destino está correto, o botão "Editar" redireciona a página de edição de produtos e o botão de "Cadastrar Produto" redireciona para a página de cadastro de novo produto; por fim, o botão "Excluir" elimina um produto da aplicação, este foi testado verificando que o mesmo foi eliminado da lista de produtos cadastrados.
-
Cadastrar produto: Todos os produtos apresentados na tela inicial, ou seja, que estão disponíveis para comprar, foram inicialmente cadastrados pelo administrador. Para cadastrar um novo produto é necessário preencher todos os campos e caso não sejam preenchidos uma mensagem de erro informa a necessidade de preenchimento. Para realização do teste, foi feita a tentativa de cadastro sem digitar um ou mais dos campos. Além disso, o preço deve ser maior ou igual a R$0,01, a quantidade em estoque deve ser maior ou igual a 1 e todos os produtos possuem uma breve descrição. Para realização do teste, foi feita tentativa de cadastro não cumprindo os requisitos descritos anteriormente;
-
Editar produto: Igualmente a operação do administrador cadastrar um novo produto, os mesmos campos serão apresentados, logo, todos os campos são obrigatórios e foram testados da mesma forma que a operação de cadastro descrita anteriormente!
-
Carrinho:
- Todos os campos sobre os dados do cartão são obrigatórios e caso não sejam preenchidos uma mensagem de erro informa a necessidade de preenchimento. Para realização do teste, foi feita a tentativa de cadastro sem digitar um ou mais dos campos. Além disso, o número do cartão exige 16 dígitos, o CVV exige 3 dígitos e a validade do cartão deve ser maior que a data atual. Para realização do teste, foi feita tentativa de cadastro não cumprindo os requisitos descritos anteriormente;
- O botão de "Remover" exclui o item referente a ele do carrinho de compras; para alterar a quantidade de um produto é necessário que inserir a quantidade desejada na caixa numérica e, após isso, clicar no botão "Adicionar" para validar a operação e atualizar quantidade do item na compra. Para a realização do teste foi feita a inserção de valores inválidos como letras, números negativos, zero e excessivamente grandes (maior do que 30); ao violar alguma dessas condições, o usuário será informado do problema e orientado a colocar um valor válido. Além disso, o usuário apenas pode colocar uma quantidade que esteja disponível, caso o valor seja maior, uma notificação é retornada;
- Por fim, o checkbox "Este pedido é um presente" é uma validação para mudar a embalagem do envio, em um caso real seria uma embalagem especial, ele foi testado verificando o resultado da finalização do pedido com o checkbox marcado, onde a mensagem explicita que o envio será especial e, caso contrário, apenas a mensagem padrão será exibida.
- Foi testado o campo de pesquisa de produtos por nome na tela inicial. Para realização do teste, foram digitados:
- Textos maiusculos e minusculos: Não é feita diferenciação;
- Acentos: Letras com acento e sem acento são tratadas como diferentes;
- Nenhum caractere é ignorado, ou seja, ao digitar espaço ou caracteres especiais, a pesquisa utiliza esse caractere para realizar a busca;
- Nome de produto que não existe: Não é retornado nenhum produto;
- Nome de produto que existe: É retornado o produto desejado, sendo o nome de produto digitado procurado em qualquer parte do título do produto.
- Foi testado o botão "Adicionar ao carrinho" na tela inicial. Para a realização do teste, foram feitas as seguintes verificações:
- Caso o usuário não esteja logado (visitante), o sistema informa uma mensagem informando que o visitante deve acessar a plataforma e encaminha para a tela de login;
- Caso o usuário esteja logado como administrador, o sistema informa uma mensagem de usuário inválido para a operação e permanece na tela de inicial;
- Caso o usuário esteja logado como cliente, o sistema informa uma mensagem de item adicionado ao carrinho e encaminha para a tela de carrinho;
- Caso o usuário cliente tente adicionar um produto que já está no carrinho, uma notificação é retornada.
- Verificar o funcionamento das telas no Firefox e Chromium. Como resultado, todas as telas funcionam corretamente em ambos navegadores.
Para a execução, é utilizado o npm
(https://www.npmjs.com/) e NodeJS.
Após a instalação dos aplicativos, acesse o diretório backend
e digite os seguintes comandos:
Para instalar as dependências:
npm install
Para iniciar a aplicação:
npm start
Para execução do sistema, é utilizado o node-static
(https://www.npmjs.com/package/node-static).
Para instalá-lo, digite o comando a seguir no terminal:
npm install -g node-static
Em seguida, execute o comando a seguir dentro do diretório frontend
para iniciar o site:
static -p 8000
Após isso, o site estará disponível em http://localhost:8000/.
Como o MongoDB está hospedado na Cloud, não é necessário executá-lo.
Não há.
- Não é feita validação de acesso a rota proibida. Por exemplo, caso um usuário não administrador tente entrar na rota "/admin.html", não há uma validação.
Project for Web Development (SCC0219) - Computer Science @ Instituto de Ciências Matemáticas e de Computação (ICMC) - Universidade de São Paulo (USP). São Carlos, Brazil, 2021.
Bruna Magrini da Cruz, 11218813
Marlon José Martins, 10249010
Wellington Matos Amaral, 11315054