Claro! Vou criar exemplos de código para cada uma das etapas mencionadas, utilizando uma stack comum que inclui Spring Boot para o backend, React para o frontend e PostgreSQL como banco de dados. Vou abordar os principais componentes do sistema descrito.
1. Configuração do Ambiente de Desenvolvimento
1.1 Configuração do Backend com Spring Boot
pom.xml (dependências do Maven):
<project ...>
<dependencies>
<!-- Spring Boot Starter Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Spring Boot Starter Data JPA -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- PostgreSQL Driver -->
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<scope>runtime</scope>
</dependency>
<!-- Spring Boot Starter Security -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
</dependencies>
</project>
application.properties (configuração do banco de dados):
spring.datasource.url=jdbc:postgresql://localhost:5432/loja
spring.datasource.username=postgres
spring.datasource.password=senha
spring.jpa.hibernate.ddl-auto=update
2. Desenvolvimento Backend
2.1 Modelagem de Dados:
Produto.java (Entidade):
@Entity
public class Produto {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String nome;
private String descricao;
private double preco;
private int quantidade;
// Getters e Setters
}
Cliente.java (Entidade):
@Entity
public class Cliente {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String nome;
private String email;
private String telefone;
// Getters e Setters
}
Venda.java (Entidade):
@Entity
public class Venda {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@ManyToOne
private Cliente cliente;
@ManyToMany
private List<Produto> produtos;
private LocalDate data;
private double total;
// Getters e Setters
}
2.2 Repositórios:
ProdutoRepository.java:
public interface ProdutoRepository extends JpaRepository<Produto, Long> {
}
ClienteRepository.java:
public interface ClienteRepository extends JpaRepository<Cliente, Long> {
}
VendaRepository.java:
public interface VendaRepository extends JpaRepository<Venda, Long> {
}
2.3 Serviços:
ProdutoService.java:
@Service
public class ProdutoService {
@Autowired
private ProdutoRepository produtoRepository;
public List<Produto> listarTodos() {
return produtoRepository.findAll();
}
public Produto salvar(Produto produto) {
return produtoRepository.save(produto);
}
public void deletar(Long id) {
produtoRepository.deleteById(id);
}
}
ClienteService.java:
@Service
public class ClienteService {
@Autowired
private ClienteRepository clienteRepository;
public List<Cliente> listarTodos() {
return clienteRepository.findAll();
}
public Cliente salvar(Cliente cliente) {
return clienteRepository.save(cliente);
}
public void deletar(Long id) {
clienteRepository.deleteById(id);
}
}
VendaService.java:
@Service
public class VendaService {
@Autowired
private VendaRepository vendaRepository;
public List<Venda> listarTodas() {
return vendaRepository.findAll();
}
public Venda salvar(Venda venda) {
return vendaRepository.save(venda);
}
public void deletar(Long id) {
vendaRepository.deleteById(id);
}
}
2.4 Controladores:
ProdutoController.java:
@RestController
@RequestMapping("/produtos")
public class ProdutoController {
@Autowired
private ProdutoService produtoService;
@GetMapping
public List<Produto> listarTodos() {
return produtoService.listarTodos();
}
@PostMapping
public Produto salvar(@RequestBody Produto produto) {
return produtoService.salvar(produto);
}
@DeleteMapping("/{id}")
public void deletar(@PathVariable Long id) {
produtoService.deletar(id);
}
}
ClienteController.java:
@RestController
@RequestMapping("/clientes")
public class ClienteController {
@Autowired
private ClienteService clienteService;
@GetMapping
public List<Cliente> listarTodos() {
return clienteService.listarTodos();
}
@PostMapping
public Cliente salvar(@RequestBody Cliente cliente) {
return clienteService.salvar(cliente);
}
@DeleteMapping("/{id}")
public void deletar(@PathVariable Long id) {
clienteService.deletar(id);
}
}
VendaController.java:
@RestController
@RequestMapping("/vendas")
public class VendaController {
@Autowired
private VendaService vendaService;
@GetMapping
public List<Venda> listarTodas() {
return vendaService.listarTodas();
}
@PostMapping
public Venda salvar(@RequestBody Venda venda) {
return vendaService.salvar(venda);
}
@DeleteMapping("/{id}")
public void deletar(@PathVariable Long id) {
vendaService.deletar(id);
}
}
3. Desenvolvimento Frontend com React
3.1 Configuração Inicial:
Inicie um novo projeto React:
npx create-react-app loja-frontend
cd loja-frontend
3.2 Estrutura do Projeto:
Organize o projeto da seguinte forma:
src/
├── components/
│ ├── ProdutoList.js
│ ├── ClienteList.js
│ └── VendaList.js
├── services/
│ ├── produtoService.js
│ ├── clienteService.js
│ └── vendaService.js
└── App.js
3.3 Componentes:
ProdutoList.js:
import React, { useState, useEffect } from 'react';
import produtoService from '../services/produtoService';
const ProdutoList = () => {
const [produtos, setProdutos] = useState([]);
useEffect(() => {
produtoService.getAll().then(response => {
setProdutos(response.data);
}).catch(error => {
console.error("Erro ao buscar produtos", error);
});
}, []);
return (
<div>
<h2>Lista de Produtos</h2>
<ul>
{produtos.map(produto => (
<li key={produto.id}>{produto.nome} - {produto.preco}</li>
))}
</ul>
</div>
);
}
export default ProdutoList;
ClienteList.js:
import React, { useState, useEffect } from 'react';
import clienteService from '../services/clienteService';
const ClienteList = () => {
const [clientes, setClientes] = useState([]);
useEffect(() => {
clienteService.getAll().then(response => {
setClientes(response.data);
}).catch(error => {
console.error("Erro ao buscar clientes", error);
});
}, []);
return (
<div>
<h2>Lista de Clientes</h2>
<ul>
{clientes.map(cliente => (
<li key={cliente.id}>{cliente.nome} - {cliente.email}</li>
))}
</ul>
</div>
);
}
export default ClienteList;
VendaList.js:
import React, { useState, useEffect } from 'react';
import vendaService from '../services/vendaService';
const VendaList = () => {
const [vendas, setVendas] = useState([]);
useEffect(() => {
vendaService.getAll().then(response => {
setVendas(response.data);
}).catch(error => {
console.error("Erro ao buscar vendas", error);
});
}, []);
return (
<div>
<h2>Lista de Vendas</h2>
<ul>
{vendas.map(venda => (
<li key={venda.id}>{venda.cliente.nome} - {venda.total}</li>
))}
</ul>
</div>
);
}
export default VendaList;
3.4 Serviços:
produtoService.js:
import axios from 'axios';
const API_URL = 'http://localhost:8080/produtos';
const getAll = () => {
return axios.get(API_URL);
}
const produtoService = {
getAll
};
export default produtoService;
clienteService.js:
import axios from 'axios';
const API_URL = 'http://localhost:8080/clientes';
const getAll = () => {
return axios.get(API_URL);
}
const clienteService = {
getAll
};
export default clienteService;
vendaService.js:
import axios from 'axios';
const API_URL = 'http://localhost:8080/vendas';
const getAll = () => {
return axios.get(API_URL);
}
const vendaService = {
getAll
};
export default vendaService;
3.5 App.js:
import React from 'react';
import ProdutoList from './components/ProdutoList';
import ClienteList from './components/ClienteList';
import VendaList from './components/VendaList';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Sistema de Gestão de Loja de Confecção</h1>
<ProdutoList />
<ClienteList />
<VendaList />
</header>
</div>
);
}
export default App;
4. Integração e Testes
4.1 Integração Backend e Frontend
Para comunicar o frontend com o backend, certifique-se de que o backend está rodando e que as URLs das APIs estão corretas nos serviços do React.
4.2 Testes Unitários e de Integração
Teste Unitário para ProdutoService:
@RunWith(SpringRunner.class)
@SpringBootTest
public class ProdutoServiceTest {
@Autowired
private ProdutoService produtoService;
@Test
public void testSalvarProduto() {
Produto produto = new Produto();
produto.setNome("Camiseta");
produto.setDescricao("Camiseta de Algodão");
produto.setPreco(29.90);
produto.setQuantidade(100);
Produto salvo = produtoService.salvar(produto);
assertNotNull(salvo.getId());
}
}
5. Deploy e Manutenção
5.1 Containerização com Docker
Dockerfile para Backend:
FROM openjdk:11-jre-slim
VOLUME /tmp
COPY target/loja-backend.jar loja-backend.jar
ENTRYPOINT ["java", "-jar", "/loja-backend.jar"]
Dockerfile para Frontend:
FROM node:14
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
5.2 Orquestração com Kubernetes
deployment.yaml:
apiVersion: apps/v1
kind: Deployment
metadata:
name: loja-backend
spec:
replicas: 2
selector:
matchLabels:
app: loja-backend
template:
metadata:
labels:
app: loja-backend
spec:
containers:
- name: loja-backend
image: loja-backend:latest
ports:
- containerPort: 8080
---
apiVersion: apps/v1
kind: Deployment
metadata:
name: loja-frontend
spec:
replicas: 2
selector:
matchLabels:
app: loja-frontend
template:
metadata:
labels:
app: loja-frontend
spec:
containers:
- name: loja-frontend
image: loja-frontend:latest
ports:
- containerPort: 3000
Conclusão
Esses exemplos de código fornecem uma base sólida para começar o desenvolvimento do sistema de gestão de loja de confecção. Cada etapa é essencial para garantir que o sistema seja robusto, seguro e escalável. Certifique-se de adaptar os exemplos às necessidades específicas do seu projeto e realizar testes adequados para garantir a qualidade do software.
