Neste Projeto Integrador com React, Node.js e Express, vamos desenvolver, na prática, um Catálogo de Produtos, entendendo como Front-end e Back-end trabalham juntos em uma aplicação web por meio de uma API REST.

O projeto foi desenvolvido de forma integrada entre as disciplinas de Programação Web II (PW II) e Desenvolvimento de Sistemas I (DS I), permitindo aplicar os conteúdos das duas disciplinas em um único sistema.

A aplicação está dividida em duas partes principais:

• Front-end com React: responsável pela interface, formulário de cadastro e exibição dos produtos;
• Back-end com Node.js e Express: responsável pela API, rotas e processamento dos dados;
• Integração via API REST: responsável pela comunicação entre Front-end e Back-end utilizando requisições HTTP.

Durante o projeto, vamos acompanhar o caminho completo percorrido pelos dados: desde o preenchimento do formulário no React, passando pela requisição para a API, pelo processamento realizado no Back-end e, finalmente, pelo retorno da resposta para a interface.

O objetivo, portanto, não é apenas fazer o sistema funcionar. O mais importante é compreender a responsabilidade de cada parte da aplicação, como Front-end e Back-end se comunicam e como os dados percorrem um sistema Full Stack.

A partir dessa primeira versão, o projeto poderá ser evoluído gradativamente em sala de aula, incorporando novos conceitos e funcionalidades conforme avançamos nos conteúdos.

---

🎯 Objetivo do Projeto Integrador

Em aplicações modernas, é muito comum termos o Front-end e o Back-end separados.

O Front-end é responsável pela interface com o usuário.

É nele que o usuário:

• visualiza os produtos;
• preenche formulários;
• envia informações;
• recebe mensagens da aplicação.

O Back-end é responsável por receber as requisições do Front-end, processar os dados e devolver uma resposta.

Neste projeto, portanto, teremos o seguinte fluxo:

Usuário → React → API → Node.js/Express

e, na resposta:

Node.js/Express → API → React → Usuário

Entender esse fluxo é um dos principais objetivos do projeto.

---

🧩 Arquitetura do Projeto

A aplicação foi dividida em dois projetos:

Projeto Catálogo de Produtos
│
├── frontend
│   └── React
│
└── backend
    └── Node.js + Express

Essa separação é importante porque cada aplicação possui uma responsabilidade diferente.

O React não precisa saber como o servidor processa internamente os dados.

Da mesma forma, o Back-end não precisa saber como os produtos serão exibidos visualmente.

A comunicação acontece através de uma API.

---

💻 Parte 1 — Front-end com React

Na primeira etapa do Projeto Integrador desenvolvemos a interface utilizando React.

O Front-end foi dividido em componentes.

Entre os principais componentes utilizados estão:

App
│
├── Header
├── FormProduto
└── ListaProdutos
       │
       └── Produto

Cada componente possui uma responsabilidade.

Essa divisão ajuda a manter o projeto organizado e facilita sua evolução.

---

Header

O componente Header representa o cabeçalho da aplicação.

Ele possui uma responsabilidade simples: apresentar o projeto ao usuário.

Embora seja um componente pequeno, ele ajuda a demonstrar uma característica importante do React:

Uma interface pode ser dividida em componentes menores e reutilizáveis.

---

FormProduto

O componente FormProduto é responsável pelo cadastro dos produtos.

O formulário trabalha com três informações:

• nome;
• descrição;
• preço.

Para controlar esses valores utilizamos o Hook:

useState()

Cada campo possui seu próprio estado.

Conceitualmente temos:

Usuário digita
      ↓
onChange
      ↓
setNome / setDescricao / setPreco
      ↓
Estado do componente atualizado

Quando o formulário é enviado, os dados são organizados em um objeto representando o novo produto.

Exemplo:

{
  nome: "Teclado",
  descricao: "Teclado mecânico",
  preco: 150
}

O componente não precisa ser responsável por todo o funcionamento da aplicação.

Ele recebe uma função através de props e envia o produto para o componente responsável pelo restante do processo.

Aqui já conseguimos observar vários conceitos importantes do React trabalhando juntos:

• componentes;
• props;
• estado;
• eventos;
• formulários.

---

📦 Exibindo os produtos

Depois de cadastrar um produto precisamos apresentá-lo na tela.

Para isso o projeto utiliza os componentes ListaProdutos e Produto.

ListaProdutos

O componente recebe a lista de produtos e percorre os registros utilizando:

map()

Para cada registro encontrado é criado um componente Produto.

Conceitualmente:

Lista de produtos
       ↓
      map()
       ↓
Produto
Produto
Produto
Produto

Caso não existam produtos cadastrados, a aplicação também pode apresentar uma mensagem informando que nenhum produto foi encontrado.

---

Produto

O componente Produto representa individualmente um item do catálogo.

Ele recebe um produto através de props e apresenta informações como:

Nome
Descrição
Preço

Dessa forma temos uma divisão de responsabilidades:

ListaProdutos
      ↓
controla a lista

Produto
      ↓
exibe um produto

Essa separação será importante conforme o projeto crescer.

---

🧠 O papel do App.jsx

O App.jsx funciona como um dos principais pontos de integração do Front-end.

Nele mantemos o estado da lista de produtos:

const [produtos, setProdutos] = useState([]);

Também é nele que encontramos a comunicação com o Back-end.

O projeto utiliza:

fetch()

para realizar requisições HTTP.

Temos duas operações importantes nesta primeira versão:

GET  /api/produtos
POST /api/produtos

O GET busca os produtos existentes.

O POST envia um novo produto para o servidor.

---

🔄 useEffect e o carregamento inicial

Quando a aplicação é aberta precisamos buscar os produtos existentes no Back-end.

Para isso utilizamos:

useEffect()

O useEffect executa a função responsável por carregar os produtos quando o componente é iniciado.

O fluxo fica semelhante a:

Aplicação React inicia
        ↓
    useEffect
        ↓
carregarProdutos()
        ↓
GET /api/produtos
        ↓
Back-end responde
        ↓
setProdutos()
        ↓
Interface atualizada

Esse é um ponto importante do projeto.

O Front-end não possui mais apenas informações criadas dentro da própria interface.

Agora ele consegue consultar dados fornecidos por outro sistema.

---

🎥 Aula completa — Desenvolvimento do Front-end

Nesta aula foi desenvolvido o Front-end do projeto utilizando React.

Durante o vídeo observe principalmente:

• criação dos componentes;
• utilização de useState;
• utilização de useEffect;
• formulário;
• props;
• renderização da lista;
• comunicação com a API utilizando fetch.

---

⚙️ Parte 2 — Construindo o Back-end

Depois do Front-end, precisamos criar a aplicação responsável por fornecer e receber os dados.

Para isso utilizamos:

• Node.js;
• Express;
• JavaScript;
• API REST.

Nesta primeira versão do Projeto Integrador, os dados são mantidos em memória.

O objetivo neste momento é compreender a comunicação e a arquitetura da aplicação.

Persistência de dados pode ser incorporada posteriormente conforme o projeto evoluir.

---

🏗️ Organização do Back-end

O Back-end foi dividido em responsabilidades.

Uma estrutura simplificada é:

backend
│
└── src
    │
    ├── controllers
    │   └── produtoController.js
    │
    ├── routes
    │   └── produtoRoutes.js
    │
    ├── data
    │   └── produtos
    │
    └── app.js

Essa organização evita colocar toda a aplicação dentro de um único arquivo.

Cada parte possui uma responsabilidade.

---

🌐 app.js

O app.js é responsável pela configuração principal do servidor Express.

Primeiro criamos a aplicação:

const app = express();

Também precisamos permitir que o servidor interprete informações enviadas em JSON:

app.use(express.json());

Depois registramos as rotas dos produtos:

app.use("/api/produtos", produtoRoutes);

Isso significa que as operações relacionadas aos produtos serão acessadas através de:

/api/produtos

---

🛣️ Rotas da API

As rotas determinam quais operações a API disponibiliza.

Nesta etapa temos:

GET  /api/produtos
POST /api/produtos

A rota GET é responsável por solicitar a listagem.

A rota POST é responsável por solicitar o cadastro.

As rotas não precisam realizar todo o processamento.

Elas direcionam a requisição para o Controller correspondente.

Podemos visualizar assim:

Requisição
    ↓
  Route
    ↓
Controller
    ↓
Resposta

---

🧠 Controller

O Controller concentra a lógica necessária para processar as requisições.

Temos inicialmente duas operações:

listarProdutos
cadastrarProduto

listarProdutos

Quando o Front-end realiza:

GET /api/produtos

a função responsável pela listagem devolve os produtos existentes em formato JSON.

O React recebe essa resposta e atualiza a interface.

---

cadastrarProduto

Quando o React envia:

POST /api/produtos

o Back-end recebe as informações através de:

req.body

Os dados são analisados e utilizados para criar um novo produto.

Também existe uma validação para verificar informações obrigatórias, como nome e preço.

Depois disso, o novo produto é adicionado à coleção e enviado novamente para o Front-end.

---

🔗 Agora Front-end e Back-end trabalham juntos

Esta é a parte mais importante do Projeto Integrador.

Imagine que o usuário preencha:

Nome: Monitor
Descrição: Monitor 24 polegadas
Preço: 899.90

Ao clicar em Cadastrar produto, começa uma sequência de operações.

FORMULÁRIO REACT
       ↓
FormProduto
       ↓
App.jsx
       ↓
fetch()
       ↓
POST /api/produtos
       ↓
ROTA EXPRESS
       ↓
CONTROLLER
       ↓
novo produto
       ↓
JSON
       ↓
REACT
       ↓
setProdutos()
       ↓
TELA ATUALIZADA

Observe que várias partes diferentes da aplicação participaram de uma única operação.

É justamente essa integração que queremos compreender.

---

🔍 Entendendo a API como um contrato

Uma maneira importante de compreender Front-end e Back-end é pensar na API como um contrato entre as duas aplicações.

O Front-end precisa saber:

Para onde enviar?
Qual método HTTP utilizar?
Quais dados enviar?
Qual resposta esperar?

O Back-end precisa definir exatamente essas regras.

Neste projeto temos, por exemplo:

GET /api/produtos

para consultar produtos.

E:

POST /api/produtos

para cadastrar produtos.

O React não precisa conhecer toda a implementação interna do Controller.

Ele precisa conhecer o contrato da API.

Esse conceito será cada vez mais importante conforme nossos projetos ficarem maiores.

---

🎥 Aula completa — Desenvolvimento do Back-end

Nesta aula foi desenvolvido o Back-end do Projeto Integrador utilizando Node.js e Express.

Durante o vídeo observe principalmente:

• criação do servidor;
• utilização do Express;
• express.json();
• organização das rotas;
• Controller;
• GET;
• POST;
• req.body;
• respostas JSON;
• comunicação com o Front-end.

---

📂 Código-fonte do projeto

O projeto completo utilizado como referência está disponível no GitHub:

https://github.com/marcoscaldas/Projeto_Catalogo_Produtos_PW2_DSI.git

Utilize o repositório para estudar a organização e consultar a implementação.

O objetivo do projeto em sala não é simplesmente reproduzir os arquivos.

Procure entender:

• por que cada arquivo existe;
• qual é a responsabilidade de cada componente;
• como os dados são enviados;
• como a API recebe esses dados;
• como a resposta retorna ao Front-end;
• como o estado do React é atualizado.

---

🚀 O projeto não termina aqui

O Catálogo de Produtos apresentado neste artigo representa uma primeira versão do sistema.

Atualmente já conseguimos:

✓ cadastrar produtos
✓ listar produtos
✓ enviar dados do React para o Back-end
✓ receber dados do Back-end
✓ trabalhar com GET
✓ trabalhar com POST
✓ organizar o Front-end em componentes
✓ organizar responsabilidades no Back-end

Mas um sistema pode continuar evoluindo.

Podemos pensar, por exemplo:

Como editar um produto?

Como excluir um produto?

Como impedir dados inválidos?

Como manter os produtos depois que o servidor for reiniciado?

Como organizar uma aplicação maior?

Como melhorar a experiência do usuário?

Essas perguntas representam possíveis evoluções do projeto.

---

🧪 Evoluir faz parte do desenvolvimento

Em desenvolvimento de sistemas, raramente construímos tudo de uma única vez.

Uma aplicação normalmente começa com uma versão menor e recebe novas funcionalidades gradativamente.

Podemos imaginar a evolução deste projeto assim:

VERSÃO 1
React básico
      ↓
VERSÃO 2
GET + POST
      ↓
VERSÃO 3
CRUD completo
      ↓
VERSÃO 4
Persistência
      ↓
VERSÃO 5
Novas páginas e organização
      ↓
VERSÃO 6
Autenticação e novas funcionalidades

Cada nova versão exige compreender o que já existe antes de modificar o sistema.

Esse é um dos objetivos do nosso Projeto Integrador.

---

🎓 O que você deve compreender

Depois de estudar o projeto e assistir às duas aulas, você deve conseguir explicar com suas próprias palavras:

Qual é a responsabilidade do Front-end?

Qual é a responsabilidade do Back-end?

Para que serve uma API?

Como o React envia informações para o Express?

O que acontece quando executamos um GET?

O que acontece quando executamos um POST?

Qual é a função das rotas?

Qual é a função do Controller?

Por que dividimos uma aplicação em componentes e arquivos diferentes?

Como um produto sai do formulário e aparece na lista?

Se você consegue acompanhar o caminho percorrido pelos dados, já está começando a compreender a arquitetura de uma aplicação Full Stack.

---

💡 Antes de modificar o código, entenda o fluxo

Não tente decorar cada linha.

Observe o processo:

INTERFACE
   ↓
EVENTO
   ↓
FUNÇÃO
   ↓
REQUISIÇÃO
   ↓
ROTA
   ↓
CONTROLLER
   ↓
RESPOSTA
   ↓
ESTADO
   ↓
INTERFACE

Quando você entende esse fluxo, o código deixa de ser apenas um conjunto de comandos e começa a representar partes de um sistema.

É exatamente esse raciocínio que vamos utilizar para continuar evoluindo o Projeto Integrador durante as próximas aulas.