Sistema para cadastrar e recuperar dados de usuários, onde o cadastro é apenas feito por usuários com permissão de administrador, além de que todo usuário que for cadastrado pela plataforma será um usuário comum, isto é, sem permissão de administrador. Usuários comuns apenas podem visualizar os próprios dados, enquanto administradores podem visualizar os próprios dados e cadastrar, atualizar e deletar usuários.
O sistema foi divido em front-end (ou cliente) e back-end (ou serviço), onde a comunicação entre essas partes é feita por meio de requisições HTTP. O front foi feito utilizando as tecnologias React e bootstrap, enquanto que o back foi criado utilizando Java 8, Spring, Spring Boot, Spring Security, Hibernate, Lombok, Maven e H2.
Devido as tecnologias aqui utilizadas é necessário ter instalado tanto o Maven quanto o NPM para a execução desse sistema, além de fazer um clone ou baixar os arquivos do atual repositório. Também pode ser necessário instalar o plugin do Lombok, acaso queira abrir o back-end em alguma IDE ou editor de texto.
Cada tecnologia é iniciada de maneira separada, no caso do front-end, utilizando o terminal, deve-se entrar na pasta front-end e executar os comandos npm install, para instalar as dependências necessárias, e npm start, para iniciar a aplicação React. Por sua vez, também utilizando o terminal, para iniciar o back-end, deve-ser ir até o diretório \back-end\ServicoCadastroDeUsuarios e executar os comandos mvn clean e mvn install, para limpar o projeto e instalar as dependências necessárias, e mvn spring-boot:run, para iniciar a aplicação.
O cliente estará disponível na url http://localhost:3000/, enquanto os end-points do serviço estarão disponíveis na url http://localhost:8080/, assim como o cliente do banco de dados H2 que estará disponível na url http://localhost:8080/cadastro-de-usuarios/v1/h2-console.
Existem dois usuários já pré-definidos no sistema e que podem ser utilizados:
- Nome de Usuário: admin
- Senha: 123456
- Nome de Usuário: comum
- Senha: 123456
Ao entrar na url http://localhost:3000/, ou em qualquer url válida do sistema, o usuário será direcionando para a página de login (Figura 1):
Figura 1 - Tela de Login
Ao acessar uma url inválida do sistema, o usuário será redirecionado para a página de não encontrado (Figura 2):
Figura 2 - Tela de Não Encontrado
Após ser corretamente autenticado, o usuário é redirecionado do login para a página de visualização de dados (Figura 3):
Figura 3 - Tela de Visualização de Dados
Essa tela contém todas as informações cadastradas do usuário e uma seção para mudança de senha.
No caso de usuários comuns, essa é a única tela disponível, então o header fica apenas com a opção de sair (Figura 4):
Figura 4 - Header dos Usuários Comuns
Já no caso de usuários administradores, ainda existem as telas de cadastro e modificação, então o header dos administradores tem mais opções, como pode ser visto na Figura 3.
A tela de cadastro (Figura 5) é um formulário onde são necessários informar os dados apresentandos na tela de visualização de dados (Figura 3) e o nome de usuário, sendo que todos os campos são de preenchimento obrigatório, com exceção do complemento do endereço.
Figura 5 - Tela de Cadastro
Os campos CPF, telefones e CEP possuem máscaras, sendo que no caso dos telefones, a máscara irá varia dependendo do tipo de telefone, que pode ser celular, residencial ou comercial. Todos esses dados mascarados são persistidos no sistema sem máscara, sendo que o CPF é validado antes da inserção.
O campo nome completo deve receber uma string que tenha entre 3-100 caracteres alfanuméricos e/ou espaços.
No caso do campo email, a validação da entrada é simples, aceitando qualquer entrada no formato: xxxx@xxxx.xxx.
É possível adicionar inúmeros emails e telefones, sendo obrigatório no mínimo um de cada. Para adicionar mais uma entrada nesses campos é só clicar no botão de + (Figura 6).
Figura 6 - Adicionando novas entradas de Email
Já para excluir uma entrada desse campos, é necessário apenas clicar no botão x (Figura 6). Porém como é necessário que pelo menos um email e um telefone sejam preenchidos, o botão x não aparece quando só tem um entrada.
O sistema está configurado para buscar o CEP informado pelo usuário através da API ViaCEP e preencher o formulário com a informações retornadas (Figura 7), sendo que o usuário pode modificá-las.
 |
 |
|---|
Figura 7 - Preenchimento Automático do Endereço por Meio do CEP
Por fim, acaso ocorra uma tentativa de cadastrar uma conta com um CPF ou um nome de usuário já cadastrados, o sistema irá mostrar uma mensagem de erro.
A tela de alteração de usuários contém uma tabela (Figura 8) com todos os dados dos usuários:
Figura 8 - Tabela de Usuários
Na última coluna a esquerda da tabela de usuários estão os botões com as opções de editar ou remover, sendo que ao se clicar em remover um modal é disparado (Figura 9):
Figura 9 - Modal de Remoção de Usuário
E ao clicar em sim o usuário é removido e a tabela é atualizada (Figura 10):
Figura 10 - Tabela de Usuários após Exclusão do Usuário Comum
Por sua vez, ao se clicar em editar o usuário é redirecionado para a tela de edição de usuários (Figura 11), que é semelhante ao formulário de cadastro (Figura 5), mas com as informações já preenchidas e sem as seções de CPF e senha:
Figura 11 - Tela de Edição de Usuários
Ao terminar a edição o usuário é redirecionado de volta para a tabela de usuários (Figura 8).
E por fim, ao se clicar em sair o usuário é redirecionado para a tela de login (Figura 1).