{"id":2315,"date":"2026-08-14T12:43:01","date_gmt":"2026-08-14T15:43:01","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2315"},"modified":"2026-08-14T13:03:49","modified_gmt":"2026-08-14T16:03:49","slug":"projeto-integrador-catalogo-de-produtos-com-react-node-js-e-express","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2315","title":{"rendered":"Projeto Integrador: Cat\u00e1logo de Produtos com React, Node.js e Express"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Neste <strong>Projeto Integrador com React, Node.js e Express<\/strong>, vamos desenvolver, na pr\u00e1tica, um <strong>Cat\u00e1logo de Produtos<\/strong>, entendendo como <strong>Front-end e Back-end trabalham juntos em uma aplica\u00e7\u00e3o web<\/strong> por meio de uma <strong>API REST<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O projeto foi desenvolvido de forma integrada entre as disciplinas de <strong>Programa\u00e7\u00e3o Web II (PW II)<\/strong> e <strong>Desenvolvimento de Sistemas I (DS I)<\/strong>, permitindo aplicar os conte\u00fados das duas disciplinas em um \u00fanico sistema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A aplica\u00e7\u00e3o est\u00e1 dividida em duas partes principais:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Front-end com React:<\/strong> respons\u00e1vel pela interface, formul\u00e1rio de cadastro e exibi\u00e7\u00e3o dos produtos;<\/li>\n\n\n\n<li><strong>Back-end com Node.js e Express:<\/strong> respons\u00e1vel pela API, rotas e processamento dos dados;<\/li>\n\n\n\n<li><strong>Integra\u00e7\u00e3o via API REST:<\/strong> respons\u00e1vel pela comunica\u00e7\u00e3o entre Front-end e Back-end utilizando requisi\u00e7\u00f5es HTTP.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o projeto, vamos acompanhar o caminho completo percorrido pelos dados: desde o preenchimento do formul\u00e1rio no React, passando pela requisi\u00e7\u00e3o para a API, pelo processamento realizado no Back-end e, finalmente, pelo retorno da resposta para a interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O objetivo, portanto, n\u00e3o \u00e9 apenas fazer o sistema funcionar. O mais importante \u00e9 compreender <strong>a responsabilidade de cada parte da aplica\u00e7\u00e3o, como Front-end e Back-end se comunicam e como os dados percorrem um sistema Full Stack<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A partir dessa primeira vers\u00e3o, o projeto poder\u00e1 ser <strong>evolu\u00eddo gradativamente em sala de aula<\/strong>, incorporando novos conceitos e funcionalidades conforme avan\u00e7amos nos conte\u00fados.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf Objetivo do Projeto Integrador<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Em aplica\u00e7\u00f5es modernas, \u00e9 muito comum termos o Front-end e o Back-end separados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>Front-end<\/strong> \u00e9 respons\u00e1vel pela interface com o usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 nele que o usu\u00e1rio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>visualiza os produtos;<\/li>\n\n\n\n<li>preenche formul\u00e1rios;<\/li>\n\n\n\n<li>envia informa\u00e7\u00f5es;<\/li>\n\n\n\n<li>recebe mensagens da aplica\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>Back-end<\/strong> \u00e9 respons\u00e1vel por receber as requisi\u00e7\u00f5es do Front-end, processar os dados e devolver uma resposta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto, portanto, teremos o seguinte fluxo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Usu\u00e1rio \u2192 React \u2192 API \u2192 Node.js\/Express<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">e, na resposta:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Node.js\/Express \u2192 API \u2192 React \u2192 Usu\u00e1rio<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entender esse fluxo \u00e9 um dos principais objetivos do projeto.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\udde9 Arquitetura do Projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">A aplica\u00e7\u00e3o foi dividida em dois projetos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Projeto Cat\u00e1logo de Produtos\n\u2502\n\u251c\u2500\u2500 frontend\n\u2502   \u2514\u2500\u2500 React\n\u2502\n\u2514\u2500\u2500 backend\n    \u2514\u2500\u2500 Node.js + Express\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa separa\u00e7\u00e3o \u00e9 importante porque cada aplica\u00e7\u00e3o possui uma responsabilidade diferente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O React n\u00e3o precisa saber como o servidor processa internamente os dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Da mesma forma, o Back-end n\u00e3o precisa saber como os produtos ser\u00e3o exibidos visualmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A comunica\u00e7\u00e3o acontece atrav\u00e9s de uma <strong>API<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udcbb Parte 1 \u2014 Front-end com React<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Na primeira etapa do Projeto Integrador desenvolvemos a interface utilizando <strong>React<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O Front-end foi dividido em componentes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entre os principais componentes utilizados est\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>App\n\u2502\n\u251c\u2500\u2500 Header\n\u251c\u2500\u2500 FormProduto\n\u2514\u2500\u2500 ListaProdutos\n       \u2502\n       \u2514\u2500\u2500 Produto\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada componente possui uma responsabilidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa divis\u00e3o ajuda a manter o projeto organizado e facilita sua evolu\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O componente <code>Header<\/code> representa o cabe\u00e7alho da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele possui uma responsabilidade simples: apresentar o projeto ao usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Embora seja um componente pequeno, ele ajuda a demonstrar uma caracter\u00edstica importante do React:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Uma interface pode ser dividida em componentes menores e reutiliz\u00e1veis.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">FormProduto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O componente <code>FormProduto<\/code> \u00e9 respons\u00e1vel pelo cadastro dos produtos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O formul\u00e1rio trabalha com tr\u00eas informa\u00e7\u00f5es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nome;<\/li>\n\n\n\n<li>descri\u00e7\u00e3o;<\/li>\n\n\n\n<li>pre\u00e7o.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Para controlar esses valores utilizamos o Hook:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useState()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada campo possui seu pr\u00f3prio estado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conceitualmente temos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Usu\u00e1rio digita\n      \u2193\nonChange\n      \u2193\nsetNome \/ setDescricao \/ setPreco\n      \u2193\nEstado do componente atualizado\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o formul\u00e1rio \u00e9 enviado, os dados s\u00e3o organizados em um objeto representando o novo produto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  nome: \"Teclado\",\n  descricao: \"Teclado mec\u00e2nico\",\n  preco: 150\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O componente n\u00e3o precisa ser respons\u00e1vel por todo o funcionamento da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele recebe uma fun\u00e7\u00e3o atrav\u00e9s de <strong>props<\/strong> e envia o produto para o componente respons\u00e1vel pelo restante do processo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui j\u00e1 conseguimos observar v\u00e1rios conceitos importantes do React trabalhando juntos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>componentes;<\/li>\n\n\n\n<li>props;<\/li>\n\n\n\n<li>estado;<\/li>\n\n\n\n<li>eventos;<\/li>\n\n\n\n<li>formul\u00e1rios.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udce6 Exibindo os produtos<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de cadastrar um produto precisamos apresent\u00e1-lo na tela.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para isso o projeto utiliza os componentes <code>ListaProdutos<\/code> e <code>Produto<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ListaProdutos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O componente recebe a lista de produtos e percorre os registros utilizando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>map()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Para cada registro encontrado \u00e9 criado um componente <code>Produto<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conceitualmente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Lista de produtos\n       \u2193\n      map()\n       \u2193\nProduto\nProduto\nProduto\nProduto\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Caso n\u00e3o existam produtos cadastrados, a aplica\u00e7\u00e3o tamb\u00e9m pode apresentar uma mensagem informando que nenhum produto foi encontrado.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Produto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O componente <code>Produto<\/code> representa individualmente um item do cat\u00e1logo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele recebe um produto atrav\u00e9s de <code>props<\/code> e apresenta informa\u00e7\u00f5es como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Nome\nDescri\u00e7\u00e3o\nPre\u00e7o\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma temos uma divis\u00e3o de responsabilidades:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ListaProdutos\n      \u2193\ncontrola a lista\n\nProduto\n      \u2193\nexibe um produto\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa separa\u00e7\u00e3o ser\u00e1 importante conforme o projeto crescer.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\udde0 O papel do App.jsx<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>App.jsx<\/code> funciona como um dos principais pontos de integra\u00e7\u00e3o do Front-end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nele mantemos o estado da lista de produtos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;produtos, setProdutos] = useState(&#91;]);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m \u00e9 nele que encontramos a comunica\u00e7\u00e3o com o Back-end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O projeto utiliza:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">para realizar requisi\u00e7\u00f5es HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos duas opera\u00e7\u00f5es importantes nesta primeira vers\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET  \/api\/produtos\nPOST \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O GET busca os produtos existentes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O POST envia um novo produto para o servidor.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd04 useEffect e o carregamento inicial<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Quando a aplica\u00e7\u00e3o \u00e9 aberta precisamos buscar os produtos existentes no Back-end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para isso utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useEffect()\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>useEffect<\/code> executa a fun\u00e7\u00e3o respons\u00e1vel por carregar os produtos quando o componente \u00e9 iniciado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo fica semelhante a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Aplica\u00e7\u00e3o React inicia\n        \u2193\n    useEffect\n        \u2193\ncarregarProdutos()\n        \u2193\nGET \/api\/produtos\n        \u2193\nBack-end responde\n        \u2193\nsetProdutos()\n        \u2193\nInterface atualizada\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 um ponto importante do projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O Front-end n\u00e3o possui mais apenas informa\u00e7\u00f5es criadas dentro da pr\u00f3pria interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora ele consegue <strong>consultar dados fornecidos por outro sistema<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfa5 Aula completa \u2014 Desenvolvimento do Front-end<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula foi desenvolvido o Front-end do projeto utilizando React.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o v\u00eddeo observe principalmente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cria\u00e7\u00e3o dos componentes;<\/li>\n\n\n\n<li>utiliza\u00e7\u00e3o de <code>useState<\/code>;<\/li>\n\n\n\n<li>utiliza\u00e7\u00e3o de <code>useEffect<\/code>;<\/li>\n\n\n\n<li>formul\u00e1rio;<\/li>\n\n\n\n<li>props;<\/li>\n\n\n\n<li>renderiza\u00e7\u00e3o da lista;<\/li>\n\n\n\n<li>comunica\u00e7\u00e3o com a API utilizando <code>fetch<\/code>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"React para Iniciantes | Crie um Cat\u00e1logo de Produtos do Zero\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/LhvIpDl8PnI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2699\ufe0f Parte 2 \u2014 Construindo o Back-end<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois do Front-end, precisamos criar a aplica\u00e7\u00e3o respons\u00e1vel por fornecer e receber os dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para isso utilizamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js;<\/li>\n\n\n\n<li>Express;<\/li>\n\n\n\n<li>JavaScript;<\/li>\n\n\n\n<li>API REST.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta primeira vers\u00e3o do Projeto Integrador, os dados s\u00e3o mantidos em mem\u00f3ria.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O objetivo neste momento \u00e9 compreender <strong>a comunica\u00e7\u00e3o e a arquitetura da aplica\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Persist\u00eancia de dados pode ser incorporada posteriormente conforme o projeto evoluir.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfd7\ufe0f Organiza\u00e7\u00e3o do Back-end<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O Back-end foi dividido em responsabilidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma estrutura simplificada \u00e9:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>backend\n\u2502\n\u2514\u2500\u2500 src\n    \u2502\n    \u251c\u2500\u2500 controllers\n    \u2502   \u2514\u2500\u2500 produtoController.js\n    \u2502\n    \u251c\u2500\u2500 routes\n    \u2502   \u2514\u2500\u2500 produtoRoutes.js\n    \u2502\n    \u251c\u2500\u2500 data\n    \u2502   \u2514\u2500\u2500 produtos\n    \u2502\n    \u2514\u2500\u2500 app.js\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa organiza\u00e7\u00e3o evita colocar toda a aplica\u00e7\u00e3o dentro de um \u00fanico arquivo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada parte possui uma responsabilidade.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udf10 app.js<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>app.js<\/code> \u00e9 respons\u00e1vel pela configura\u00e7\u00e3o principal do servidor Express.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primeiro criamos a aplica\u00e7\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const app = express();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m precisamos permitir que o servidor interprete informa\u00e7\u00f5es enviadas em JSON:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.use(express.json());\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Depois registramos as rotas dos produtos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.use(\"\/api\/produtos\", produtoRoutes);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isso significa que as opera\u00e7\u00f5es relacionadas aos produtos ser\u00e3o acessadas atrav\u00e9s de:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/api\/produtos\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udee3\ufe0f Rotas da API<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">As rotas determinam quais opera\u00e7\u00f5es a API disponibiliza.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta etapa temos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET  \/api\/produtos\nPOST \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A rota GET \u00e9 respons\u00e1vel por solicitar a listagem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A rota POST \u00e9 respons\u00e1vel por solicitar o cadastro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As rotas n\u00e3o precisam realizar todo o processamento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elas direcionam a requisi\u00e7\u00e3o para o <strong>Controller<\/strong> correspondente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos visualizar assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Requisi\u00e7\u00e3o\n    \u2193\n  Route\n    \u2193\nController\n    \u2193\nResposta\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\udde0 Controller<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O Controller concentra a l\u00f3gica necess\u00e1ria para processar as requisi\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos inicialmente duas opera\u00e7\u00f5es:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>listarProdutos\ncadastrarProduto\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">listarProdutos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o Front-end realiza:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">a fun\u00e7\u00e3o respons\u00e1vel pela listagem devolve os produtos existentes em formato JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O React recebe essa resposta e atualiza a interface.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">cadastrarProduto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o React envia:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">o Back-end recebe as informa\u00e7\u00f5es atrav\u00e9s de:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>req.body\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Os dados s\u00e3o analisados e utilizados para criar um novo produto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m existe uma valida\u00e7\u00e3o para verificar informa\u00e7\u00f5es obrigat\u00f3rias, como nome e pre\u00e7o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois disso, o novo produto \u00e9 adicionado \u00e0 cole\u00e7\u00e3o e enviado novamente para o Front-end.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd17 Agora Front-end e Back-end trabalham juntos<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Esta \u00e9 a parte mais importante do Projeto Integrador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que o usu\u00e1rio preencha:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Nome: Monitor\nDescri\u00e7\u00e3o: Monitor 24 polegadas\nPre\u00e7o: 899.90\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ao clicar em <strong>Cadastrar produto<\/strong>, come\u00e7a uma sequ\u00eancia de opera\u00e7\u00f5es.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>FORMUL\u00c1RIO REACT\n       \u2193\nFormProduto\n       \u2193\nApp.jsx\n       \u2193\nfetch()\n       \u2193\nPOST \/api\/produtos\n       \u2193\nROTA EXPRESS\n       \u2193\nCONTROLLER\n       \u2193\nnovo produto\n       \u2193\nJSON\n       \u2193\nREACT\n       \u2193\nsetProdutos()\n       \u2193\nTELA ATUALIZADA\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Observe que v\u00e1rias partes diferentes da aplica\u00e7\u00e3o participaram de uma \u00fanica opera\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 justamente essa integra\u00e7\u00e3o que queremos compreender.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd0d Entendendo a API como um contrato<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Uma maneira importante de compreender Front-end e Back-end \u00e9 pensar na API como um <strong>contrato entre as duas aplica\u00e7\u00f5es<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O Front-end precisa saber:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Para onde enviar?\nQual m\u00e9todo HTTP utilizar?\nQuais dados enviar?\nQual resposta esperar?\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O Back-end precisa definir exatamente essas regras.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto temos, por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">para consultar produtos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">para cadastrar produtos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O React n\u00e3o precisa conhecer toda a implementa\u00e7\u00e3o interna do Controller.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele precisa conhecer o <strong>contrato da API<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse conceito ser\u00e1 cada vez mais importante conforme nossos projetos ficarem maiores.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfa5 Aula completa \u2014 Desenvolvimento do Back-end<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula foi desenvolvido o Back-end do Projeto Integrador utilizando Node.js e Express.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o v\u00eddeo observe principalmente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cria\u00e7\u00e3o do servidor;<\/li>\n\n\n\n<li>utiliza\u00e7\u00e3o do Express;<\/li>\n\n\n\n<li><code>express.json()<\/code>;<\/li>\n\n\n\n<li>organiza\u00e7\u00e3o das rotas;<\/li>\n\n\n\n<li>Controller;<\/li>\n\n\n\n<li>GET;<\/li>\n\n\n\n<li>POST;<\/li>\n\n\n\n<li><code>req.body<\/code>;<\/li>\n\n\n\n<li>respostas JSON;<\/li>\n\n\n\n<li>comunica\u00e7\u00e3o com o Front-end.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Node.js e Express para Iniciantes | Crie o Backend de um Cat\u00e1logo de Produtos\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/gANzlQ0PlEQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udcc2 C\u00f3digo-fonte do projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O projeto completo utilizado como refer\u00eancia est\u00e1 dispon\u00edvel no GitHub:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/marcoscaldas\/Projeto_Catalogo_Produtos_PW2_DSI.git\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/marcoscaldas\/Projeto_Catalogo_Produtos_PW2_DSI.git<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilize o reposit\u00f3rio para <strong>estudar a organiza\u00e7\u00e3o e consultar a implementa\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O objetivo do projeto em sala n\u00e3o \u00e9 simplesmente reproduzir os arquivos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Procure entender:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>por que cada arquivo existe;<\/li>\n\n\n\n<li>qual \u00e9 a responsabilidade de cada componente;<\/li>\n\n\n\n<li>como os dados s\u00e3o enviados;<\/li>\n\n\n\n<li>como a API recebe esses dados;<\/li>\n\n\n\n<li>como a resposta retorna ao Front-end;<\/li>\n\n\n\n<li>como o estado do React \u00e9 atualizado.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\ude80 O projeto n\u00e3o termina aqui<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O Cat\u00e1logo de Produtos apresentado neste artigo representa uma <strong>primeira vers\u00e3o do sistema<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Atualmente j\u00e1 conseguimos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2713 cadastrar produtos\n\u2713 listar produtos\n\u2713 enviar dados do React para o Back-end\n\u2713 receber dados do Back-end\n\u2713 trabalhar com GET\n\u2713 trabalhar com POST\n\u2713 organizar o Front-end em componentes\n\u2713 organizar responsabilidades no Back-end\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mas um sistema pode continuar evoluindo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos pensar, por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Como editar um produto?\n\nComo excluir um produto?\n\nComo impedir dados inv\u00e1lidos?\n\nComo manter os produtos depois que o servidor for reiniciado?\n\nComo organizar uma aplica\u00e7\u00e3o maior?\n\nComo melhorar a experi\u00eancia do usu\u00e1rio?\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essas perguntas representam poss\u00edveis <strong>evolu\u00e7\u00f5es do projeto<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\uddea Evoluir faz parte do desenvolvimento<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Em desenvolvimento de sistemas, raramente constru\u00edmos tudo de uma \u00fanica vez.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma aplica\u00e7\u00e3o normalmente come\u00e7a com uma vers\u00e3o menor e recebe novas funcionalidades gradativamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos imaginar a evolu\u00e7\u00e3o deste projeto assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>VERS\u00c3O 1\nReact b\u00e1sico\n      \u2193\nVERS\u00c3O 2\nGET + POST\n      \u2193\nVERS\u00c3O 3\nCRUD completo\n      \u2193\nVERS\u00c3O 4\nPersist\u00eancia\n      \u2193\nVERS\u00c3O 5\nNovas p\u00e1ginas e organiza\u00e7\u00e3o\n      \u2193\nVERS\u00c3O 6\nAutentica\u00e7\u00e3o e novas funcionalidades\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada nova vers\u00e3o exige compreender o que j\u00e1 existe antes de modificar o sistema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 um dos objetivos do nosso Projeto Integrador.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udf93 O que voc\u00ea deve compreender<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de estudar o projeto e assistir \u00e0s duas aulas, voc\u00ea deve conseguir explicar com suas pr\u00f3prias palavras:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual \u00e9 a responsabilidade do Front-end?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual \u00e9 a responsabilidade do Back-end?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para que serve uma API?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Como o React envia informa\u00e7\u00f5es para o Express?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O que acontece quando executamos um GET?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O que acontece quando executamos um POST?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual \u00e9 a fun\u00e7\u00e3o das rotas?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual \u00e9 a fun\u00e7\u00e3o do Controller?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Por que dividimos uma aplica\u00e7\u00e3o em componentes e arquivos diferentes?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Como um produto sai do formul\u00e1rio e aparece na lista?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea consegue acompanhar o caminho percorrido pelos dados, j\u00e1 est\u00e1 come\u00e7ando a compreender a arquitetura de uma aplica\u00e7\u00e3o Full Stack.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udca1 Antes de modificar o c\u00f3digo, entenda o fluxo<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o tente decorar cada linha.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Observe o processo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>INTERFACE\n   \u2193\nEVENTO\n   \u2193\nFUN\u00c7\u00c3O\n   \u2193\nREQUISI\u00c7\u00c3O\n   \u2193\nROTA\n   \u2193\nCONTROLLER\n   \u2193\nRESPOSTA\n   \u2193\nESTADO\n   \u2193\nINTERFACE\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea entende esse fluxo, o c\u00f3digo deixa de ser apenas um conjunto de comandos e come\u00e7a a representar <strong>partes de um sistema<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente esse racioc\u00ednio que vamos utilizar para continuar evoluindo o Projeto Integrador durante as pr\u00f3ximas aulas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste Projeto Integrador com React, Node.js e Express, vamos desenvolver, na pr\u00e1tica, um Cat\u00e1logo de Produtos, entendendo como Front-end e Back-end trabalham juntos em uma aplica\u00e7\u00e3o web por meio de uma API REST. O projeto foi desenvolvido de forma integrada entre as disciplinas de Programa\u00e7\u00e3o Web II (PW II) e Desenvolvimento de Sistemas I (DS I), permitindo aplicar os conte\u00fados das duas disciplinas em um \u00fanico sistema. A aplica\u00e7\u00e3o est\u00e1 dividida em duas partes principais: Durante o projeto, vamos acompanhar o caminho completo percorrido pelos dados: desde o preenchimento do formul\u00e1rio no React, passando pela requisi\u00e7\u00e3o para a API, pelo processamento realizado no Back-end e, finalmente, pelo retorno da resposta para a interface. O objetivo, portanto, n\u00e3o \u00e9 apenas fazer o sistema funcionar. O mais importante \u00e9 compreender a responsabilidade de cada parte da aplica\u00e7\u00e3o, como Front-end e Back-end se comunicam e como os dados percorrem um sistema Full Stack. A partir dessa primeira vers\u00e3o, o projeto poder\u00e1 ser evolu\u00eddo gradativamente em sala de aula, incorporando novos conceitos e funcionalidades conforme avan\u00e7amos nos conte\u00fados. \ud83c\udfaf Objetivo do Projeto Integrador Em aplica\u00e7\u00f5es modernas, \u00e9 muito comum termos o Front-end e o Back-end separados. O Front-end \u00e9 respons\u00e1vel pela interface com o usu\u00e1rio. \u00c9 nele que o usu\u00e1rio: O Back-end \u00e9 respons\u00e1vel por receber as requisi\u00e7\u00f5es do Front-end, processar os dados e devolver uma resposta. Neste projeto, portanto, teremos o seguinte fluxo: Usu\u00e1rio \u2192 React \u2192 API \u2192 Node.js\/Express e, na resposta: Node.js\/Express \u2192 API \u2192 React \u2192 Usu\u00e1rio Entender esse fluxo \u00e9 um dos principais objetivos do projeto. \ud83e\udde9 Arquitetura do Projeto A aplica\u00e7\u00e3o foi dividida em dois projetos: Essa separa\u00e7\u00e3o \u00e9 importante porque cada aplica\u00e7\u00e3o possui uma responsabilidade diferente. O React n\u00e3o precisa saber como o servidor processa internamente os dados. Da mesma forma, o Back-end n\u00e3o precisa saber como os produtos ser\u00e3o exibidos visualmente. A comunica\u00e7\u00e3o acontece atrav\u00e9s de uma API. \ud83d\udcbb Parte 1 \u2014 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\u00e3o: Cada componente possui uma responsabilidade. Essa divis\u00e3o ajuda a manter o projeto organizado e facilita sua evolu\u00e7\u00e3o. Header O componente Header representa o cabe\u00e7alho da aplica\u00e7\u00e3o. Ele possui uma responsabilidade simples: apresentar o projeto ao usu\u00e1rio. Embora seja um componente pequeno, ele ajuda a demonstrar uma caracter\u00edstica importante do React: Uma interface pode ser dividida em componentes menores e reutiliz\u00e1veis. FormProduto O componente FormProduto \u00e9 respons\u00e1vel pelo cadastro dos produtos. O formul\u00e1rio trabalha com tr\u00eas informa\u00e7\u00f5es: Para controlar esses valores utilizamos o Hook: Cada campo possui seu pr\u00f3prio estado. Conceitualmente temos: Quando o formul\u00e1rio \u00e9 enviado, os dados s\u00e3o organizados em um objeto representando o novo produto. Exemplo: O componente n\u00e3o precisa ser respons\u00e1vel por todo o funcionamento da aplica\u00e7\u00e3o. Ele recebe uma fun\u00e7\u00e3o atrav\u00e9s de props e envia o produto para o componente respons\u00e1vel pelo restante do processo. Aqui j\u00e1 conseguimos observar v\u00e1rios conceitos importantes do React trabalhando juntos: \ud83d\udce6 Exibindo os produtos Depois de cadastrar um produto precisamos apresent\u00e1-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: Para cada registro encontrado \u00e9 criado um componente Produto. Conceitualmente: Caso n\u00e3o existam produtos cadastrados, a aplica\u00e7\u00e3o tamb\u00e9m pode apresentar uma mensagem informando que nenhum produto foi encontrado. Produto O componente Produto representa individualmente um item do cat\u00e1logo. Ele recebe um produto atrav\u00e9s de props e apresenta informa\u00e7\u00f5es como: Dessa forma temos uma divis\u00e3o de responsabilidades: Essa separa\u00e7\u00e3o ser\u00e1 importante conforme o projeto crescer. \ud83e\udde0 O papel do App.jsx O App.jsx funciona como um dos principais pontos de integra\u00e7\u00e3o do Front-end. Nele mantemos o estado da lista de produtos: Tamb\u00e9m \u00e9 nele que encontramos a comunica\u00e7\u00e3o com o Back-end. O projeto utiliza: para realizar requisi\u00e7\u00f5es HTTP. Temos duas opera\u00e7\u00f5es importantes nesta primeira vers\u00e3o: O GET busca os produtos existentes. O POST envia um novo produto para o servidor. \ud83d\udd04 useEffect e o carregamento inicial Quando a aplica\u00e7\u00e3o \u00e9 aberta precisamos buscar os produtos existentes no Back-end. Para isso utilizamos: O useEffect executa a fun\u00e7\u00e3o respons\u00e1vel por carregar os produtos quando o componente \u00e9 iniciado. O fluxo fica semelhante a: Esse \u00e9 um ponto importante do projeto. O Front-end n\u00e3o possui mais apenas informa\u00e7\u00f5es criadas dentro da pr\u00f3pria interface. Agora ele consegue consultar dados fornecidos por outro sistema. \ud83c\udfa5 Aula completa \u2014 Desenvolvimento do Front-end Nesta aula foi desenvolvido o Front-end do projeto utilizando React. Durante o v\u00eddeo observe principalmente: \u2699\ufe0f Parte 2 \u2014 Construindo o Back-end Depois do Front-end, precisamos criar a aplica\u00e7\u00e3o respons\u00e1vel por fornecer e receber os dados. Para isso utilizamos: Nesta primeira vers\u00e3o do Projeto Integrador, os dados s\u00e3o mantidos em mem\u00f3ria. O objetivo neste momento \u00e9 compreender a comunica\u00e7\u00e3o e a arquitetura da aplica\u00e7\u00e3o. Persist\u00eancia de dados pode ser incorporada posteriormente conforme o projeto evoluir. \ud83c\udfd7\ufe0f Organiza\u00e7\u00e3o do Back-end O Back-end foi dividido em responsabilidades. Uma estrutura simplificada \u00e9: Essa organiza\u00e7\u00e3o evita colocar toda a aplica\u00e7\u00e3o dentro de um \u00fanico arquivo. Cada parte possui uma responsabilidade. \ud83c\udf10 app.js O app.js \u00e9 respons\u00e1vel pela configura\u00e7\u00e3o principal do servidor Express. Primeiro criamos a aplica\u00e7\u00e3o: Tamb\u00e9m precisamos permitir que o servidor interprete informa\u00e7\u00f5es enviadas em JSON: Depois registramos as rotas dos produtos: Isso significa que as opera\u00e7\u00f5es relacionadas aos produtos ser\u00e3o acessadas atrav\u00e9s de: \ud83d\udee3\ufe0f Rotas da API As rotas determinam quais opera\u00e7\u00f5es a API disponibiliza. Nesta etapa temos: A rota GET \u00e9 respons\u00e1vel por solicitar a listagem. A rota POST \u00e9 respons\u00e1vel por solicitar o cadastro. As rotas n\u00e3o precisam realizar todo o processamento. Elas direcionam a requisi\u00e7\u00e3o para o Controller correspondente. Podemos visualizar assim: \ud83e\udde0 Controller O Controller concentra a l\u00f3gica necess\u00e1ria para processar as requisi\u00e7\u00f5es. Temos inicialmente duas opera\u00e7\u00f5es: listarProdutos Quando o Front-end realiza: a fun\u00e7\u00e3o respons\u00e1vel pela listagem devolve os produtos existentes em formato JSON. O React recebe essa resposta e atualiza a interface. cadastrarProduto Quando o React envia: o Back-end recebe as informa\u00e7\u00f5es atrav\u00e9s de: Os dados s\u00e3o analisados e utilizados para criar um novo produto. Tamb\u00e9m existe uma valida\u00e7\u00e3o para verificar informa\u00e7\u00f5es obrigat\u00f3rias, como nome e pre\u00e7o. Depois disso, o novo produto \u00e9 adicionado \u00e0 cole\u00e7\u00e3o e enviado novamente para o Front-end. \ud83d\udd17 Agora Front-end e Back-end trabalham juntos Esta \u00e9 a parte mais importante do Projeto Integrador. Imagine que o usu\u00e1rio preencha: Ao clicar em Cadastrar produto, come\u00e7a uma sequ\u00eancia de opera\u00e7\u00f5es. Observe que v\u00e1rias partes diferentes da aplica\u00e7\u00e3o participaram de uma \u00fanica opera\u00e7\u00e3o. \u00c9 justamente essa integra\u00e7\u00e3o que queremos compreender. \ud83d\udd0d Entendendo a API como um contrato Uma maneira importante de compreender Front-end e Back-end \u00e9 pensar na API como um contrato entre as duas aplica\u00e7\u00f5es. O Front-end precisa saber: O Back-end precisa definir exatamente essas regras. Neste projeto temos, por exemplo: para consultar produtos. E: para cadastrar produtos. O React n\u00e3o precisa conhecer toda a implementa\u00e7\u00e3o interna do Controller. Ele precisa conhecer o contrato da API. Esse conceito ser\u00e1 cada vez mais importante conforme nossos projetos ficarem maiores. \ud83c\udfa5 Aula completa \u2014 Desenvolvimento do Back-end Nesta aula foi desenvolvido o Back-end do Projeto Integrador utilizando Node.js e Express. Durante o v\u00eddeo observe principalmente: \ud83d\udcc2 C\u00f3digo-fonte do projeto O projeto completo utilizado como refer\u00eancia est\u00e1 dispon\u00edvel no GitHub: https:\/\/github.com\/marcoscaldas\/Projeto_Catalogo_Produtos_PW2_DSI.git Utilize o reposit\u00f3rio para estudar a organiza\u00e7\u00e3o e consultar a implementa\u00e7\u00e3o. O objetivo do projeto em sala n\u00e3o \u00e9 simplesmente reproduzir os arquivos. Procure entender: \ud83d\ude80 O projeto n\u00e3o termina aqui O Cat\u00e1logo de Produtos apresentado neste artigo representa uma primeira vers\u00e3o do sistema. Atualmente j\u00e1 conseguimos: Mas um sistema pode continuar evoluindo. Podemos pensar, por exemplo: Essas perguntas representam poss\u00edveis evolu\u00e7\u00f5es do projeto. \ud83e\uddea Evoluir faz parte do desenvolvimento Em desenvolvimento de sistemas, raramente constru\u00edmos tudo de uma \u00fanica vez. Uma aplica\u00e7\u00e3o normalmente come\u00e7a com uma vers\u00e3o menor e recebe novas funcionalidades gradativamente. Podemos imaginar a evolu\u00e7\u00e3o deste projeto assim: Cada nova vers\u00e3o exige compreender o que j\u00e1 existe antes de modificar o sistema. Esse \u00e9 um dos objetivos do nosso Projeto Integrador. \ud83c\udf93 O que voc\u00ea deve compreender Depois de estudar o projeto e assistir \u00e0s duas aulas, voc\u00ea deve conseguir explicar com suas pr\u00f3prias palavras: Qual \u00e9 a responsabilidade do Front-end? Qual \u00e9 a responsabilidade do Back-end? Para que serve uma API? Como o React envia informa\u00e7\u00f5es para o Express? O que acontece quando executamos um GET? O que acontece quando executamos um POST? Qual \u00e9 a fun\u00e7\u00e3o das rotas? Qual \u00e9 a fun\u00e7\u00e3o do Controller? Por que dividimos uma aplica\u00e7\u00e3o em componentes e arquivos diferentes? Como um produto sai do formul\u00e1rio e aparece na lista? Se voc\u00ea consegue acompanhar o caminho percorrido pelos dados, j\u00e1 est\u00e1 come\u00e7ando a compreender a arquitetura de uma aplica\u00e7\u00e3o Full Stack. \ud83d\udca1 Antes de modificar o c\u00f3digo, entenda o fluxo N\u00e3o tente decorar cada linha. Observe o processo: Quando voc\u00ea entende esse fluxo, o c\u00f3digo deixa de ser apenas um conjunto de comandos e come\u00e7a a representar partes de um sistema. \u00c9 exatamente esse racioc\u00ednio que vamos utilizar para continuar evoluindo o Projeto Integrador durante as pr\u00f3ximas aulas.<\/p>\n","protected":false},"author":1,"featured_media":2316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[21,22],"tags":[],"class_list":["post-2315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2315"}],"version-history":[{"count":4,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2315\/revisions"}],"predecessor-version":[{"id":2321,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2315\/revisions\/2321"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2316"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}