parts-catalog

Aplicação web para controlar o catálogo de peças (parts catalog) vendidas por uma empresa. Permitindo cadastrar, listar e apagar peças do catálogo.

Aplicação CRUD Fullstack em Java Spring Boot + Vue.js. O Back-end usa Spring Boot com Spring Web MVC para REST Controller e Spring Data JPA para interagir com o banco de dados PostgreSQL. O Front-end é feito com Vue & Vue Router.

Recursos disponíveis na API

• Cadastrar nova peça
• Busca de peças em ordem alfabética por nome
• Busca de peça por id
• Busca de peças por palavra chave no nome
• Busca de peças por palavra chave no veículo de aplicação
• Atualizar peça
• Deletar peça
• Deletar todas peças

O CRUD usa um ambiente de testes unitários com JUnit configurado acessando o banco de dados H2, usa Maven como gerenciador de dependência, e Java 11 como linguagem.

Ambiente de desenvolvimento STS 4 - Spring Tool Suite 4 e banco de dados PostgreSQL

Back-end Java Spring Boot

💫 Como Executar

• Pré-requisitos

  • É necessário possuir o Java 11 instalado e configurado no computador.
  • É necessário possuir o banco de dados PostgreSQL instalado e configurado no computador, usuário e senha: postgres.
  • É recomendável utilizar pgAdmin para gerenciar mais facilmente o PostgreSQL.
  • É necessário possuir o Git .
  • É recomendável utilizar IDE Spring Tools Suite 4 .

0. Criar o banco de dados PostgreSQL

# Acesse o pgAdmin em http://127.0.0.1/pgadmin4/browser/
# Clique em Servers / Local > [ABRIR]
# Clique com o botão direito em Database
# Create Database
# nome: partsCatalog
# Owner: postgres - senha já cadastrada
# Se suas informações estiverem diferentes veja na issue #16 
  como proceder para configurar sua aplicação de acordo com 
  seus dados.

1. Faça um clone do repositório:

  #  Crie um novo Workspace, por exemplo uma pasta chamada: 
     ws-github-teste
  
  $ mkdir ws-github-teste
  $ cd ws-github-teste
  $ git clone https://github.com/tarcnux/parts-catalog.git
  # Foi criada a pasta parts-catalog
  # cd parts-catalog
  # Dentro há duas pastas:
   - backend
   - frontend

2. Executando a Aplicação Back-end:

  #  Abra o Spring Tool Suite (STS)
  #  Selecione como Workspace a pasta recém clonada: 
     parts-catalog
  #  Import projects - Maven - Existing Maven Projects
  #  Root Directory: ../parts-catalog/backend
  #  Clicar com o botão direito em src/main/java
  #  Procurar por "Run As" e ir na opção "Spring Boot App"
  #  Pode ignorar os erros, pois não afetam a aplicação. Mais
     abaixo mostrarei como importar o JUnit e os erros 
     desaparecem.
  #  Backend App rodando em:
  - Local:   http://localhost:8080

Swagger http://localhost:8080/swagger-ui.html

Rotas da API - http://localhost:8080/api/v1

Métodos	URLs	Ações
POST	/parts	criar uma nova peça
GET	/parts	recuperar todas as peças
GET	/parts/:id	recuperar uma peça por: id
PUT	/parts/:id	atualizar uma peça por:id
DELETE	/parts/:id	apagar uma peça por:id
DELETE	/parts	apagar todas as peças
GET	/parts?name=[keyword]	encontre todas as peças cujo nome contém a [palavra-chave]
GET	/parts?vehicle=[keyword]	encontre todas as peças cujo veículo de aplicação contém a [palavra-chave]

Cadastrar uma nova peça

	POST /parts
	{
	    "name" : "Polia",
	    "applicationVehicle" : "Fusca",
	    "netWeight": 9.87,
	    "grossWeight": 10.98
	}

Atualizar uma peça

	PUT /parts/1
	{
	    "name" : "Atualizado Polia",
	    "applicationVehicle" : "Atualizado Fusca",
	    "netWeight": 9.87,
	    "grossWeight": 10.98
	}	

3. Testando a Aplicação

  #  Estando no Spring Tool Suite (STS)
  #  Clicar com o botão direito no projeto backend
     1 - Build Path
     2 - Add Libraries
     3 - JUnit
     4 - Next
     5 - Escolha JUnit 5
     6 - Finish
  #  Clicar com o botão direito em src/test/java
  #  Procurar por "Run As" e ir na opção "JUnit Test"
  

Testes Unitários OK

Importante ter a biblioteca do JUnit no Build Path, como descrito acima.

E eu feliz com os testes passando todos

Front-end Vue.Js

💫 Como Executar

• Pré-requisitos

  • É necessário possuir o Node.js® instalado e configurado no computador.
  • É necessário possuir o NPM .
  • É recomendável utilizar IDE VSCode .

4. Repositório já clonado:

  #  O repositório já foi clonado no passo 1 contendo as 
  #	 pastas backend e frontend: 
     $ .../ws-github-teste/parts-catalog
  #  Depois de testar o back-end, lembre-se de colocar 
     a API Spring Boot para rodar novamente. Ela deve
     estar rodando para se conectar ao front-end.
  #  Backend: http://localhost:8080/api/v1/parts

5. Executando a Aplicação Front-end:

  #  Estando na pasta criada no passo 1
  #  parts-catalog
  $ cd frontend
  #  Instalação das dependências - !!! Atenção para estar com 
	 as permissões de root no Linux ou admin no Windows
  $ sudo npm install
  #  Ativa o servidor e o hot-reload
  $ npm run serve
  # Frontend App rodando em:
  - Local:   http://localhost:8081/  

PS: se der problemas no npm run serve, tentar isso:

• Remove the local node_modules & package-lock.json
• Clean npm cache by npm cache verify
• Update the global npm by sudo npm i -g npm
• Reinstall the local node_modules by npm i

Diagrama de Componentes do App Vue.js com o Vue Router e Axios

01 - Tela inicial sem peças cadastradas

02 - Tela com a listagem de peças cadastradas

• Listagem em ordem alfabética pelo nome
• É possível buscar peças pelo nome
• É possível buscar peças pelo veículo
• É possível apagar uma peça ou todas

03 - Tela exibindo os detalhes de uma peça selecionada

• É possível alterar os dados de uma peça selecionada

04 - Dados de uma peça para atualização

• Campos obrigatórios: nome, peso líquido e peso bruto.
• Se o peso líquido for maior que o peso bruto a peça não é atualizada e aparece mensagem de erro.
• Números decimais com 2 casas depois da vírgula.
• É possível excluir a peça selecionada.

05 - Tela de cadastro de uma nova peça

• Campos obrigatórios: nome, peso líquido e peso bruto.
• Se o peso líquido for maior que o peso bruto a peça não é atualizada e aparece mensagem de erro.
• Números decimais com 2 casas depois da vírgula.

📝 ToDo

• Criar uma segunda entidade vehicle no banco de dados e fazer o relacionamento entre elas. Ficaria a entidade part com um relacionamento de NxN com vehicle. Uma peça pode pertencer a vários veículos e um veículo pode conter várias peças.
• Criar endpoints no backend para manipular o relacionamento entre as entidades vehicle e part.
• Criar novas telas no frontend de manipulação e exibição das entidades vehicle e parte seus relacionamentos.

📃 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

_{Projeto desenvolvido inspirado em: [Full-stack] Spring Boot + Vue.js: CRUD example Back-end inspirado em: Spring Boot, JPA/Hibernate, PostgreSQL example with Maven Front-end inspirado em: Vue.js 2 CRUD Application with Vue Router & Axios Testes unitários inspirados em: @DataJpaTest example for Spring Data Repositiory Unit Test Como colocar o Swagger no projeto Spring Boot + Swagger: documentando sua API automaticamente}