Conectando o Frontend e o Backend: Usando Java e Angular de Forma Divertida

#Java
#Angular

Introdução

Olá! Hoje vamos aprender como fazer uma mágica no mundo da programação: conectar duas partes importantes de um site! Vamos usar Java com Spring Boot no backend e Angular no frontend. Imagine que estamos construindo uma loja online onde podemos ver produtos legais. E sabe o que é mais legal? Vamos usar algumas ferramentas para deixar tudo bonito e organizado!

Criando o Backend com Java e Spring Boot

Começando o Projeto

Primeiro, vamos fazer a parte do site que guarda as informações. Pense nisso como um grande armário onde ficam guardados todos os dados dos produtos da loja. Para isso, vamos usar Java e Spring Boot. Aqui está um exemplo de como começamos:

xml

<!-- Este é o arquivo que diz quais ferramentas vamos usar -->
<dependencies>
  <!-- Ferramenta para criar sites -->
  <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <!-- Ferramenta para guardar dados -->
  <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
  </dependency>
  <!-- Banco de dados temporário -->
  <dependency>
      <groupId>com.h2database</groupId>
      <artifactId>h2</artifactId>
      <scope>runtime</scope>
  </dependency>
</dependencies>

Criando a Lista de Produtos

Vamos criar uma classe chamada Product que representa cada produto que vamos vender:

java

// Esta classe representa um produto
@Entity
public class Product {
  // Este é o identificador único do produto
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  // Nome do produto
  private String name;
  // Preço do produto
  private Double price;

  // Aqui ficam os métodos para pegar e mudar os dados
  // (não precisa entender tudo agora)
}

Agora, precisamos de um lugar para guardar e pegar esses produtos:

java

// Interface para guardar e pegar produtos
public interface ProductRepository extends JpaRepository<Product, Long> {
}

E aqui está nosso controlador mágico que faz a ponte:

java

// Controlador que cuida dos pedidos de informações sobre produtos
@RestController
@RequestMapping("/api/products")
public class ProductController {

  @Autowired
  private ProductRepository productRepository;

  // Método para pegar todos os produtos
  @GetMapping
  public List<Product> getAllProducts() {
      return productRepository.findAll();
  }

  // Método para adicionar um novo produto
  @PostMapping
  public Product createProduct(@RequestBody Product product) {
      return productRepository.save(product);
  }
}

Criando o Frontend com Angular

Começando o Projeto Angular

Agora, vamos criar a parte do site que as pessoas veem e interagem. Isso é como a vitrine da loja. Vamos usar Angular para isso:

bash

// Cria um novo projeto Angular
ng new product-sales
cd product-sales
// Adiciona o Bootstrap para deixar tudo bonito
ng add @ng-bootstrap/ng-bootstrap

Criando o Componente de Produtos

Vamos criar uma tela que mostra nossos produtos:

bash

Copiar

// Cria um novo componente para listar produtos
ng generate component product-list

Aqui está o código que faz a tela funcionar:

typescript

// Importa as coisas que precisamos
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// Define como é um produto
interface Product {
id: number;
name: string;
price: number;
}

// Nosso componente para listar produtos
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
// Lista de produtos que vamos mostrar
products: Product[] = [];

constructor(private http: HttpClient) {}

// Quando a tela inicia, pegamos os produtos do servidor
ngOnInit(): void {
  this.http.get<Product[]>('/api/products').subscribe(data => {
    this.products = data;
  });
}
}

Estilizando com Bootstrap

Para deixar nossa loja bonita, vamos usar o Bootstrap. Ele é como um estilista para nosso site:

No arquivo que diz quais estilos vamos usar, adicionamos o Bootstrap:

json

"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],

E aqui está como deixamos nossa lista de produtos bonita com Bootstrap:

html

<div class="container mt-5">
<h2>Lista de Produtos</h2>
<div class="row">
  <!-- Mostra cada produto em um cartão -->
  <div *ngFor="let product of products" class="col-md-4">
    <div class="card mb-4 shadow-sm">
      <div class="card-body">
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">Preço: {{ product.price | currency }}</p>
      </div>
    </div>
  </div>
</div>
</div>

Conectando Tudo

Para fazer o frontend conversar com o backend, criamos um caminho especial. Pense nisso como um telefone entre os dois:

Criamos um arquivo para dizer ao Angular onde encontrar os dados:

json

{
"/api": {
  "target": "http://localhost:8080",
  "secure": false
}
}

E dizemos ao Angular para usar esse telefone especial:

json

"architect": {
"serve": {
  "options": {
    "proxyConfig": "src/proxy.conf.json"
  }
}
}

Conclusão

Agora você conhece a mágica por trás de um site que tem um frontend e um backend se comunicando. Com isso, você pode criar sua própria loja online e adicionar muitos produtos legais!

Chamada para Ação

Que tal criar seu próprio site e inventar uma loja com seus produtos favoritos? Experimente e compartilhe suas criações com seus amigos!

Meta Description

Aprenda de forma divertida a conectar Angular e Spring Boot para criar uma loja online usando Java, com dicas simples e exemplos fáceis!

Hashtags

#Java #SpringBoot #Angular #Frontend #Backend #CodingForKids #Bootstrap #ProductList #WebFun #ProgrammingAdventure