Java na Web: Como Integrar Spring Boot com React e Angular para Aplicações Modernas 🚀

Introdução

Você quer levar suas habilidades com Java para outro nível? Descubra como criar aplicações modernas e escaláveis com Spring Boot, React e Angular, explorando boas práticas de arquitetura e segurança para APIs REST!

No cenário atual do desenvolvimento web, a integração entre Java no Back-End e frameworks modernos no Front-End desempenha um papel crucial na criação de aplicações robustas. Este artigo explora como conectar o Spring Boot com React e Angular, garantindo segurança e eficiência.

1️⃣ Por que Escolher Java para o Desenvolvimento Web?

O Java continua sendo uma das linguagens mais utilizadas para aplicações empresariais devido à sua:

• 🔹 Escalabilidade: ótimo para sistemas de grande porte.
• 🔹 Segurança: recursos como autenticação e criptografia são amplamente suportados.
• 🔹 Ecosistema poderoso: frameworks como Spring Boot aceleram o desenvolvimento.

2️⃣ Criando uma API REST com Spring Boot

📌 Configuração do Projeto

1. Acesse Spring Initializr
2. Escolha as dependências Spring Web, Spring Boot DevTools e Spring Security
3. Gere o projeto e importe no seu IDE favorito

📌 Implementação do Endpoint REST

@RestController
@RequestMapping("/api/produtos")
public class ProdutoController {
  @GetMapping
  public List<String> listarProdutos() {
      return Arrays.asList("Produto 1", "Produto 2", "Produto 3");
  }
}

Esse código expõe um endpoint GET /api/produtos que retorna uma lista de produtos.

3️⃣ Conectando a API com o Front-End

📌 Consumindo a API no React

import { useEffect, useState } from 'react';

function App() {
  const [produtos, setProdutos] = useState([]);

  useEffect(() => {
      fetch('http://localhost:8080/api/produtos')
          .then(response => response.json())
          .then(data => setProdutos(data));
  }, []);

  return (
      <ul>
          {produtos.map((produto, index) => (
              <li key={index}>{produto}</li>
          ))}
      </ul>
  );
}

export default App;

📌 Consumindo a API no Angular

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-root',
template: '<ul><li *ngFor="let produto of produtos">{{ produto }}</li></ul>'
})
export class AppComponent implements OnInit {
produtos: string[] = [];

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get<string[]>('http://localhost:8080/api/produtos')
    .subscribe(data => this.produtos = data);
}
}

4️⃣ Segurança no Desenvolvimento Web com Java

📌 Implementando JWT com Spring Security

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
  @Override
  protected void configure(HttpSecurity http) throws Exception {
      http.csrf().disable()
          .authorizeRequests()
          .antMatchers("/api/produtos").authenticated()
          .and()
          .oauth2Login();
  }
}

🔹 Boas práticas adicionais:

• Criptografar senhas com BCrypt
• Prevenir injeção SQL utilizando ORM como Hibernate
• Habilitar CORS corretamente para comunicação entre APIs e Front-End

🔥 Conclusão

A integração de Spring Boot com React e Angular possibilita a criação de aplicações modernas e escaláveis. Utilizando boas práticas de arquitetura e segurança, garantimos aplicações robustas e preparadas para o futuro.