1.Diagrama E-R - Modelo de banco de dados
Sistema de compras
Este artigo descreve um sistema de gerenciamento de compras doméstica onde é possível efetuar cadastro das compras do mercado e fazer o controle de estoque dos produtos. Abordando também o desenvolvimento do sistema em etapas contendo, diagrama de classes, modelagem de banco de dados, tecnologias utilizadas, principais telas do sistema, configurações para melhoria e testes automatizados.
Backend: roda no heroku. https://appcomprasluiz.herokuapp.com
Frontend: rodando no vercel. https://sistema-compras-om8ie1vko-luizpmonteiro8.vercel.app
Banco de dados: Postgre no heroku.
A figura 1 representa graficamente as entidades e seus relacionamentos com as demais entidades do banco de dados.
Figura 1 - Diagrama ER
A figura 2 descreve a estrutura do sistema modelando suas classes descrevendo, seus atributos e as relações entre objetos.
**Figura 2 - Diagrama de classe**
Backend:
Springboot:
- Jsonwebtoken
- Lombok
- Jasper Reports
- Spring boot starter mail
- Spring boot starter test
- e outros.
Frontend:
React:
- Next.js
- Axios
- Redux
- Redux-thunk
- React-cookie
- Apexchart
- Formik
- Yup
- React-bootstrap-table-next
- Bootstrap
- Styled-components
- React-toastify
- Jest
- e outros.
Mobile: React-native:
- Axios
- Redux
- Redux-thunk
- Formik
- Yup
- Jwt-decode
- React-native-chart-kit
- React-native-paper
- Jest
- e outros.
Login:
Na tela de login, é preciso digitar email e senha para autenticar, também possível entrar na tela de cadastro de usuário e recuperar a senha através do email.
**Figura 3 - Tela de login**
Cadastro:
Tela de cadastro pede que usuário digite nome, email e senha, onde o email deve ser único.
**Figura 4 - Tela de cadastro**
Recuperação de senha:
Na recuperação de senha, quando clicado aparece uma opção para digitar email, após verificação e enviado email com uma nova senha aleatória. Na versão mobile ele utiliza o email já digitado na opção de login.
**Figura 5 - Tela de recuperar senha**
Home:
Após login é direcionado para tela home, onde mostra a quantidade de cadastro de produtos e compras, um gráfico de compras por mês fixado no ano de 2021. A barra de menu aparece nesta tela após confirmado o login.
**Figura 6- Tela home**
Menu:
O menu tem três abas de opção (Cadastrar/Listar, compras, relatórios), botão sair e o título do sistema que volta para tela home. Já na versão web possui botão home, cadastros, listas e o botão logout.
**Figura 7 -Menu**
Cadastro:
O sistema trabalha com cadastro de: mercados, categorias, produtos, entrada/saída de produtos e compras.
Mercado:
No cadastro de mercado é necessário informar o nome do local como campo obrigatório, também pode ser informado o cnpj e bloquear para não aparecer na lista quando for ser listado. Na versão web a lista de mercados cadastrados aparece e também permite a alteração e deletar o mercado.
**Figura 8 -Cadastro de mercado**
Categoria:
No cadastro da categoria é necessário informa o nome da categoria como campo obrigatório. Na versão web a lista de categorias cadastrada aparece e também permite a alteração e deletar.
**Figura 9 -Cadastro de categoria**
Produtos:
No cadastro de produtos é necessário informa a categoria do produto, nome, quantidade mínima e se o produto está bloqueado. A categoria aparece é uma lista onde só é possível escolher uma. Na versão web a lista de produtos cadastrado aparece e também permite a alteração e deletar.
**Figura 10 -Cadastro de produto**
Compras:
No cadastro de compras, deve ser informado mercado, data e o status da compra e também gerar a lista de item da compra.
Deve escolher um produto, quantidade, preço e opcionalmente a validade para cadastra um item na lista de compras. A opção de categoria serve para facilitar filtrando os produtos.
Produtos adicionado na compra fica salvo em cookie, onde o usuário pode fechar o site ou aplicativo e depois quando retorna a lista ainda está como antes. Quando é feito a alteração de uma compra cadastrada (permitido apenas compras com status em rota) é possível adicionar item a compra sem fazer alteração com produtos cadastrados em cookie.
Quando a compra é finalizada é enviado um email, onde mostra a lista de item da compra como na figura abaixo.
**Figura 11 -Cadastro de compra**
**Figura 11.1 -Email confirmando cadastro de compras**
Entrada/saída:
No cadastro de entrada/saída, o usuário pode adicionar produtos que já tem em estoque, também informar os produtos que estão utilizados com a saída dos produtos. Caso a retirada do produto seja maior que a quantidade em estoque, deve mostrar um erro na tela informando a quantidade de produto em estoque.
**Figura 12 -Cadastro de entrada e saída**
Listas na versão mobile:
Na versão web em todas as telas menos no cadastro de compras a lista de itens cadastrado é mostrado junto com o cadastro, na versão mobile as listas ficam separadas.
Todas as listas da versão mobile tem a opção de alterar e deletar os itens, no caso das compras só e possível alterar se ainda estiver com status em rota.
Também possui a opção de listar as compras em formato pdf.
**Figura 13- Lista no mobile**
Relatório:
No relatório na versão web é possível visualizar a lista de estoque dos produtos, lista de compras e compras em pdf.
Na lista de estoque é possível visualizar categoria, produto, quantidade e se está bloqueado.
Na lista de compras é possível visualizar data, mercado, status, total, botão para alterar ou visualizar e deletar.
Na opção para compras em pdf, ao clicar ele carrega o arquivo em pdf, onde tem um relatório de todas as compras cadastradas no sistema.
**Figura 14- Relatório de estoque de produto**
**Figura 15- Relatório de compras**
**Figura 16- Relatório de compras em pdf página 1**
Login:
Caso o servidor de backend, ainda esteja inicializado será informado ao usuário através de uma mensagem. Digitando email ou senha inválido deve mostrar um erro na tela.
**Figura 17- Mensagem de espera ao logar**
**Figura 18- Mensagem quando digita senha ou email incorreto.**
Recuperar senha:
Só é permitido recuperar senha de usuário cadastrado, por exemplo o usuário teste, não pode ter sua senha recuperada, por padrão fica senha 12345678. Na versão mobile é utilizado o campo de email do login. Ao solicitar nova senha é enviado um email com uma senha aleatória de 10 dígitos.
**Figura 19- Tela de recuperar senha.**
**Figura 19.1- Email com a nova senha**
Deletar:
Só é possível deletar item do sistema que não esteja em uso, no caso de compras só pode deletar as que estiverem em rota, pois ainda não foram somadas ao estoque.
Deletar uma entrada/saída, não apagara do banco de dados, apenas mudara para o estado inativo. Como é possível ver na figura 12.
**Figura 20- Mensagem ao deletar item em uso.**
Duplicado:
Caso tente alterar ou cadastrar item que já possui no sistema receberá a mensagem de duplicado.
**Figura 21- Mensagem ao adicionar item duplicado.**
Salvo com sucesso ou alterado com sucesso:
Sempre que ocorre um cadastro ou alteração será informando o sucesso para usuário através de uma mensagem. Na versão mobile apenas é carregado a tela de lista, só tem mensagem caso ocorra um erro.
**Figura 22- Mensagem ao salvar com sucesso.**
Campos obrigatórios
Todos os cadastros possuem controle de campos obrigatórios onde o usuário não tem permissão de salva o cadastro até que todos campos estejam preenchidos, como mostra a figura abaixo. Essa mensagem de erro é mostrada quando é clicado no botão para salvar o formulário.
**Figura 23- Campo obrigatórios**
Valores inválidos
Todos os campos são validados quando é feito o envio do formulário, é feito uma verificação do tipo da informação, também os campos têm bloqueio por exemplo, na versão web se digitar letras onde deve colocar preço de compra, não vai ter entrada de valor, na versão mobile aparece apenas o teclado numérico como figura abaixo.
**Figura 24- Teclado numérico**
Sistema básico para controle de compras domésticos, criado com intuito de demonstrar meus conhecimentos na área de desenvolvimento de software.
Teste realizado no backend(junit 5):
Foi realizado teste na classe de services, repository e controller do tipo Purchases. Todos os teste foram 100% de cobertura como mostra a figura 25.
**Figura 25- Teste realizado no junit**
Teste realizado no frontend(jest):
Para o frontend foi feito teste no redux, redux-thunk, formulário de cadastro de categoria e lista de categoria, todos em 100% de cobertura.
**Figura 26- Teste realizado no jest**