{"id":2365,"date":"2026-08-25T14:54:16","date_gmt":"2026-08-25T17:54:16","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2365"},"modified":"2026-08-25T15:36:58","modified_gmt":"2026-08-25T18:36:58","slug":"front-end-back-end-api-rest","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2365","title":{"rendered":"Contrato de API entre Front-end e Back-end: O Que \u00c9 e Como Funciona na Pr\u00e1tica"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   CONTRATO DE API ENTRE FRONT-END E BACK-END\n   CSS COMPLETO E LIMPO \u2014 LIGHT + DARK\n   ========================================================= *\/\n\n.api-contract-article {\n  --text:#334155;\n  --heading:#0f172a;\n  --muted:#64748b;\n  --border:#dbe4ee;\n  --surface:#ffffff;\n  --surface2:#f8fafc;\n  --surface3:#eef2f7;\n  --primary:#0f766e;\n  --primary2:#14b8a6;\n  --blue:#2563eb;\n  --green:#16a34a;\n  --orange:#d97706;\n  --red:#dc2626;\n  --code:#0f172a;\n  --code-border:#334155;\n  --shadow:0 10px 30px rgba(15,23,42,.08);\n\n  max-width:1050px;\n  margin:0 auto;\n  padding:20px;\n  color:var(--text)!important;\n  font-family:Arial,Helvetica,sans-serif;\n  font-size:17px;\n  line-height:1.75;\n}\n\n.api-contract-article *{box-sizing:border-box}\n.api-contract-article p{margin:0 0 20px}\n.api-contract-article strong{color:inherit!important}\n\n\/* TEXTOS FORA DOS CARDS *\/\n.api-contract-article .api-theme-text{color:var(--text)!important}\n.api-contract-article .api-theme-heading{\n  color:var(--heading)!important;\n  margin-top:56px;\n  margin-bottom:20px;\n  padding-bottom:11px;\n  border-bottom:1px solid var(--border);\n  font-size:30px;\n  line-height:1.25;\n}\n\n\/* HERO *\/\n.api-contract-article .api-hero{\n  margin-bottom:42px;\n  padding:56px 46px;\n  overflow:hidden;\n  border:1px solid rgba(255,255,255,.08);\n  border-radius:24px;\n  background:\n    radial-gradient(circle at 90% 15%,rgba(45,212,191,.23),transparent 34%),\n    radial-gradient(circle at 5% 90%,rgba(37,99,235,.13),transparent 30%),\n    linear-gradient(135deg,#07111f 0%,#0b2b3b 48%,#0f766e 100%)!important;\n  box-shadow:0 22px 55px rgba(2,6,23,.20);\n}\n.api-contract-article .api-hero h1{\n  max-width:880px;\n  margin:0 0 18px;\n  color:#fff!important;\n  font-size:clamp(36px,5.8vw,58px);\n  line-height:1.08;\n  letter-spacing:-1.5px;\n}\n.api-contract-article .api-hero p{\n  max-width:820px;\n  margin:0;\n  color:#dbeafe!important;\n  font-size:20px;\n}\n.api-contract-article .api-hero-label{\n  display:inline-block;\n  margin-bottom:18px;\n  padding:7px 13px;\n  border:1px solid rgba(255,255,255,.18);\n  border-radius:999px;\n  background:rgba(255,255,255,.08);\n  color:#99f6e4!important;\n  font-size:12px;\n  font-weight:800;\n  letter-spacing:.08em;\n  text-transform:uppercase;\n}\n\n\/* BOXES *\/\n.api-contract-article .highlight-box,\n.api-contract-article .warning-box{\n  margin:30px 0;\n  padding:24px 26px;\n  border-radius:14px;\n}\n.api-contract-article .highlight-box{\n  border:1px solid #a7f3d0;\n  border-left:5px solid #0f766e;\n  background:#ecfdf5!important;\n}\n.api-contract-article .highlight-box,\n.api-contract-article .highlight-box p,\n.api-contract-article .highlight-box strong{color:#134e4a!important}\n\n.api-contract-article .warning-box{\n  border:1px solid #fde68a;\n  border-left:5px solid #f59e0b;\n  background:#fffbeb!important;\n}\n.api-contract-article .warning-box,\n.api-contract-article .warning-box p,\n.api-contract-article .warning-box strong{color:#78350f!important}\n\n\/* CARDS *\/\n.api-contract-article .analogy-grid{\n  display:grid;\n  grid-template-columns:1fr auto 1fr;\n  gap:18px;\n  align-items:center;\n  margin:34px 0;\n}\n.api-contract-article .analogy-card,\n.api-contract-article .anatomy-item,\n.api-contract-article .responsibility-card,\n.api-contract-article .flow-box{\n  border:1px solid var(--border);\n  border-radius:17px;\n  background:var(--surface)!important;\n  box-shadow:var(--shadow);\n  color:var(--text)!important;\n}\n.api-contract-article .analogy-card{min-height:190px;padding:26px}\n.api-contract-article .analogy-card p,\n.api-contract-article .responsibility-card p{color:var(--text)!important}\n.api-contract-article .analogy-card h3,\n.api-contract-article .responsibility-card h3{\n  margin:0 0 12px;\n  color:var(--heading)!important;\n  font-size:21px;\n}\n.api-contract-article .analogy-icon{display:block;margin-bottom:10px;font-size:38px}\n.api-contract-article .analogy-arrow,\n.api-contract-article .flow-arrow{\n  color:var(--primary2)!important;\n  font-size:31px;\n  font-weight:800;\n}\n\n\/* CONTRATO CENTRAL *\/\n.api-contract-article .contract-center{\n  margin:32px 0;\n  padding:28px;\n  border:1px solid #99f6e4;\n  border-radius:18px;\n  background:linear-gradient(135deg,#f0fdfa,#ecfeff)!important;\n  color:#134e4a!important;\n  text-align:center;\n}\n.api-contract-article .contract-center strong{color:#134e4a!important}\n.api-contract-article .contract-center .big{\n  display:block;\n  margin-bottom:8px;\n  color:#0f4c5c!important;\n  font-size:26px;\n  font-weight:800;\n}\n\n\/* LISTA *\/\n.api-contract-article .clean-list{margin:22px 0 28px;padding:0;list-style:none}\n.api-contract-article .clean-list li{\n  position:relative;\n  margin-bottom:10px;\n  padding:12px 15px 12px 43px;\n  border:1px solid var(--border);\n  border-radius:11px;\n  background:var(--surface2)!important;\n  color:var(--text)!important;\n}\n.api-contract-article .clean-list li:before{\n  content:\"\u2713\";\n  position:absolute;\n  left:16px;\n  color:var(--green);\n  font-weight:800;\n}\n\n\/* ANATOMIA *\/\n.api-contract-article .anatomy-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:18px;\n  margin:28px 0;\n}\n.api-contract-article .anatomy-item{padding:22px}\n.api-contract-article .anatomy-item strong{\n  display:block;\n  margin-bottom:6px;\n  color:var(--primary)!important;\n  font-size:18px;\n}\n\n\/* ENDPOINTS *\/\n.api-contract-article .endpoint-card{\n  margin:30px 0;\n  overflow:hidden;\n  border:1px solid var(--border);\n  border-radius:18px;\n  background:var(--surface)!important;\n  box-shadow:var(--shadow);\n}\n.api-contract-article .endpoint-header{\n  display:flex;\n  gap:12px;\n  align-items:center;\n  padding:19px 23px;\n  border-bottom:1px solid var(--border);\n  background:var(--surface2)!important;\n}\n.api-contract-article .endpoint-header h3{\n  margin:0;\n  color:var(--heading)!important;\n  font-size:21px;\n}\n.api-contract-article .endpoint-body{padding:24px;color:var(--text)!important}\n.api-contract-article .endpoint-body p{color:var(--text)!important}\n\n.api-contract-article .method{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  min-width:76px;\n  padding:7px 11px;\n  border-radius:7px;\n  color:#fff!important;\n  font-size:12px;\n  font-weight:800;\n}\n.api-contract-article .post{background:var(--blue)!important}\n.api-contract-article .get{background:var(--green)!important}\n.api-contract-article .put{background:var(--orange)!important}\n.api-contract-article .delete{background:var(--red)!important}\n\n.api-contract-article .route{\n  display:inline-block;\n  margin:4px 0 18px;\n  padding:9px 13px;\n  border:1px solid var(--border);\n  border-radius:8px;\n  background:var(--surface3)!important;\n  color:var(--heading)!important;\n  font-family:Consolas,Monaco,monospace;\n  font-size:15px;\n  font-weight:700;\n}\n.api-contract-article .code-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:18px;\n  margin-top:20px;\n}\n.api-contract-article .code-title{\n  display:block;\n  margin-bottom:7px;\n  color:var(--muted)!important;\n  font-size:12px;\n  font-weight:800;\n  text-transform:uppercase;\n}\n.api-contract-article pre{\n  overflow-x:auto;\n  margin:0 0 18px;\n  padding:20px;\n  border:1px solid var(--code-border)!important;\n  border-radius:12px;\n  background:var(--code)!important;\n  color:#f8fafc!important;\n  font:14px\/1.6 Consolas,Monaco,\"Courier New\",monospace;\n  white-space:pre;\n}\n.api-contract-article pre code{background:transparent!important;color:#f8fafc!important}\n\n\/* FLUXO *\/\n.api-contract-article .flow{\n  display:grid;\n  grid-template-columns:1fr auto 1fr auto 1fr;\n  gap:12px;\n  align-items:center;\n  margin:32px 0;\n}\n.api-contract-article .flow-box{padding:22px 15px;text-align:center;font-weight:700}\n\n\/* RESPONSABILIDADES *\/\n.api-contract-article .responsibility-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:18px;\n  margin:28px 0;\n}\n.api-contract-article .responsibility-card{padding:24px}\n.api-contract-article .responsibility-card h3{color:var(--primary)!important}\n\n\/* TABELA *\/\n.api-contract-article .table-wrap{\n  overflow-x:auto;\n  margin:26px 0;\n  border:1px solid var(--border);\n  border-radius:14px;\n}\n.api-contract-article table{\n  width:100%;\n  min-width:700px;\n  border-collapse:collapse;\n  background:var(--surface)!important;\n}\n.api-contract-article th{\n  padding:14px;\n  background:#0f172a!important;\n  color:#fff!important;\n  text-align:left;\n}\n.api-contract-article td{\n  padding:14px;\n  border-bottom:1px solid var(--border);\n  background:var(--surface)!important;\n  color:var(--text)!important;\n}\n.api-contract-article tr:nth-child(even) td{background:var(--surface2)!important}\n\n\/* CHECKLIST *\/\n.api-contract-article .checklist{\n  margin:25px 0;\n  padding:25px;\n  border:1px solid var(--border);\n  border-radius:18px;\n  background:var(--surface2)!important;\n}\n.api-contract-article .checklist-item{\n  display:flex;\n  gap:12px;\n  align-items:flex-start;\n  margin:13px 0;\n  color:var(--text)!important;\n}\n.api-contract-article .checklist-item div{color:var(--text)!important}\n.api-contract-article .check{\n  flex:0 0 26px;\n  height:26px;\n  border-radius:50%;\n  background:#dcfce7!important;\n  color:#166534!important;\n  text-align:center;\n  line-height:26px;\n  font-weight:800;\n}\n\n\/* FINAL *\/\n.api-contract-article .final-box{\n  margin-top:48px;\n  padding:36px;\n  border-radius:20px;\n  background:\n    radial-gradient(circle at 90% 20%,rgba(20,184,166,.18),transparent 35%),\n    linear-gradient(135deg,#07111f,#0b2b3b)!important;\n}\n.api-contract-article .final-box h2,\n.api-contract-article .final-box p,\n.api-contract-article .final-box strong{color:#f8fafc!important}\n.api-contract-article .final-box h2{\n  margin-top:0;\n  padding-bottom:11px;\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n\n\n\/* =========================================================\n   TEXTOS EXTERNOS AUTOADAPT\u00c1VEIS\n   Funciona no Light e Dark sem depender do tema WordPress.\n   Branco + difference:\n   - sobre fundo claro => texto escuro\n   - sobre fundo escuro => texto claro\n   ========================================================= *\/\n\n.api-contract-article .api-theme-text,\n.api-contract-article .api-theme-heading {\n    color: #ffffff !important;\n    mix-blend-mode: difference !important;\n}\n\n.api-contract-article .api-theme-text strong,\n.api-contract-article .api-theme-text em,\n.api-contract-article .api-theme-heading strong {\n    color: #ffffff !important;\n}\n\n.api-contract-article .api-theme-heading {\n    border-bottom-color: #808080 !important;\n}\n\n\/* Componentes com fundo pr\u00f3prio nunca usam blend *\/\n.api-contract-article .api-hero,\n.api-contract-article .highlight-box,\n.api-contract-article .warning-box,\n.api-contract-article .contract-center,\n.api-contract-article .analogy-card,\n.api-contract-article .anatomy-item,\n.api-contract-article .endpoint-card,\n.api-contract-article .responsibility-card,\n.api-contract-article .flow-box,\n.api-contract-article .checklist,\n.api-contract-article .final-box,\n.api-contract-article pre,\n.api-contract-article table,\n.api-contract-article .table-wrap {\n    mix-blend-mode: normal !important;\n}\n\n\/* MOBILE *\/\n@media (max-width:780px){\n  .api-contract-article{padding:12px;font-size:16px}\n  .api-contract-article .api-hero{padding:36px 24px;border-radius:17px}\n  .api-contract-article .analogy-grid,\n  .api-contract-article .anatomy-grid,\n  .api-contract-article .code-grid,\n  .api-contract-article .responsibility-grid,\n  .api-contract-article .flow{grid-template-columns:1fr}\n  .api-contract-article .analogy-arrow,\n  .api-contract-article .flow-arrow{transform:rotate(90deg);text-align:center}\n  .api-contract-article .api-theme-heading{font-size:26px}\n}\n\n<\/style>\n\n<article class=\"api-contract-article\">\n\n<header class=\"api-hero\">\n    <span class=\"api-hero-label\">Front-end + Back-end + API REST<\/span>\n    <h1>Contrato entre Front-end e Back-end: o que \u00e9 e por que ele \u00e9 t\u00e3o importante?<\/h1>\n    <p>Entenda como definir um contrato de API permite que Front-end e Back-end sejam desenvolvidos separadamente e se integrem sem surpresas no final do projeto.<\/p>\n<\/header>\n\n<p class=\"api-theme-text\">Em um projeto moderno, \u00e9 comum termos uma aplica\u00e7\u00e3o dividida em <strong>Front-end<\/strong>, <strong>Back-end<\/strong> e <strong>Banco de Dados<\/strong>.<\/p>\n\n<p class=\"api-theme-text\">O Front-end apresenta as informa\u00e7\u00f5es ao usu\u00e1rio. O Back-end processa regras de neg\u00f3cio, valida dados e conversa com o banco. Para essas partes funcionarem juntas, elas precisam falar exatamente a mesma l\u00edngua.<\/p>\n\n<div class=\"highlight-box\">\n    <p><strong>\u00c9 justamente a\u00ed que entra o contrato de API.<\/strong><\/p>\n    <p>Ele define antecipadamente como o Front-end far\u00e1 uma solicita\u00e7\u00e3o e qual resposta dever\u00e1 ser fornecida pelo Back-end.<\/p>\n<\/div>\n\n<h2 class=\"api-theme-heading\">Uma analogia simples: o gar\u00e7om e o cozinheiro<\/h2>\n\n<p class=\"api-theme-text\">Imagine uma lanchonete. O cliente faz o pedido para o gar\u00e7om e o gar\u00e7om precisa transmitir esse pedido para a cozinha.<\/p>\n\n<div class=\"analogy-grid\">\n    <div class=\"analogy-card\">\n        <span class=\"analogy-icon\">\ud83e\uddd1\u200d\ud83d\udcbb<\/span>\n        <h3>Front-end<\/h3>\n        <p>\u00c9 como o <strong>gar\u00e7om<\/strong>. Recebe aquilo que o usu\u00e1rio deseja e envia o pedido para quem ir\u00e1 process\u00e1-lo.<\/p>\n    <\/div>\n    <div class=\"analogy-arrow\">\u2192<\/div>\n    <div class=\"analogy-card\">\n        <span class=\"analogy-icon\">\u2699\ufe0f<\/span>\n        <h3>Back-end<\/h3>\n        <p>\u00c9 como o <strong>cozinheiro<\/strong>. Recebe o pedido, processa as informa\u00e7\u00f5es e devolve um resultado.<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"contract-center\">\n    <span class=\"big\">\ud83d\udccb O contrato da API \u00e9 o bloco de pedidos.<\/span>\n    Front-end e Back-end precisam concordar antecipadamente sobre <strong>o formato exato da comunica\u00e7\u00e3o<\/strong>.\n<\/div>\n\n<p class=\"api-theme-text\">Imagine que o Front-end envie:<\/p>\n<p class=\"api-theme-text\"re><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\"\n}<\/code><\/pre>\n\n<p class=\"api-theme-text\">mas o Back-end tenha sido desenvolvido esperando:<\/p>\n<p class=\"api-theme-text\"re><code>{\n  \"descricaoProduto\": \"Teclado Mec\u00e2nico\"\n}<\/code><\/pre>\n\n<div class=\"warning-box\">\n    <strong>Sem contrato, cada lado pode desenvolver uma solu\u00e7\u00e3o correta isoladamente e, mesmo assim, a integra\u00e7\u00e3o falhar.<\/strong>\n<\/div>\n\n<h2 class=\"api-theme-heading\">O que \u00e9 um contrato de API?<\/h2>\n\n<p class=\"api-theme-text\">Um <strong>contrato de API<\/strong> \u00e9 uma especifica\u00e7\u00e3o que determina como diferentes partes de um sistema ir\u00e3o se comunicar.<\/p>\n\n<p class=\"api-theme-text\">Ele funciona como um acordo t\u00e9cnico entre quem desenvolve o Front-end e quem desenvolve o Back-end.<\/p>\n\n<ul class=\"clean-list\">\n    <li>qual endpoint dever\u00e1 ser chamado;<\/li>\n    <li>qual m\u00e9todo HTTP dever\u00e1 ser utilizado;<\/li>\n    <li>quais dados o Front-end precisa enviar;<\/li>\n    <li>qual ser\u00e1 o formato desses dados;<\/li>\n    <li>qual resposta o Back-end dever\u00e1 retornar;<\/li>\n    <li>qual c\u00f3digo HTTP indicar\u00e1 sucesso;<\/li>\n    <li>quais situa\u00e7\u00f5es de erro podem ocorrer;<\/li>\n    <li>quais regras precisam ser respeitadas.<\/li>\n<\/ul>\n\n<div class=\"highlight-box\">\n    <p><strong>Contrato n\u00e3o \u00e9 implementa\u00e7\u00e3o.<\/strong><\/p>\n    <p>O contrato define <em>como a comunica\u00e7\u00e3o dever\u00e1 acontecer<\/em>. Cada equipe continua livre para implementar internamente sua parte, desde que respeite aquilo que foi combinado.<\/p>\n<\/div>\n\n<h2 class=\"api-theme-heading\">O que deve existir em um bom contrato?<\/h2>\n\n<div class=\"anatomy-grid\">\n    <div class=\"anatomy-item\"><strong>1. M\u00e9todo HTTP<\/strong>Define a opera\u00e7\u00e3o: GET, POST, PUT, PATCH ou DELETE.<\/div>\n    <div class=\"anatomy-item\"><strong>2. Endpoint<\/strong>Determina a URL utilizada para acessar determinado recurso.<\/div>\n    <div class=\"anatomy-item\"><strong>3. Dados de entrada<\/strong>Define par\u00e2metros, corpo da requisi\u00e7\u00e3o e estrutura esperada.<\/div>\n    <div class=\"anatomy-item\"><strong>4. Dados de sa\u00edda<\/strong>Define exatamente o JSON que ser\u00e1 devolvido.<\/div>\n    <div class=\"anatomy-item\"><strong>5. Status HTTP<\/strong>Informa como sucesso e erros ser\u00e3o representados.<\/div>\n    <div class=\"anatomy-item\"><strong>6. Regras<\/strong>Define comportamentos que precisam ser conhecidos pelos dois lados.<\/div>\n<\/div>\n\n<h2 class=\"api-theme-heading\">Exemplo pr\u00e1tico: contrato de um CRUD de produtos<\/h2>\n\n<p class=\"api-theme-text\">Vamos considerar uma loja de eletr\u00f4nicos. Antes do desenvolvimento, Front-end e Back-end concordam que o recurso ser\u00e1 chamado de <strong>produtos<\/strong> e utilizar\u00e1 a rota <code>\/api\/produtos<\/code>.<\/p>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method post\">POST<\/span><h3>1. Cadastrar produto \u2014 CREATE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">POST \/api\/produtos<\/span>\n        <p>O usu\u00e1rio preenche o formul\u00e1rio no Front-end. O Front envia os dados e o Back-end realiza o cadastro.<\/p>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 150.00,\n  \"estoque\": 10\n}<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 201 Created<\/span><pre><code>{\n  \"id\": 1,\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 150.00,\n  \"estoque\": 10,\n  \"status\": \"Cadastrado com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method get\">GET<\/span><h3>2. Listar produtos \u2014 READ<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">GET \/api\/produtos<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>GET \/api\/produtos\n\nNenhum corpo \u00e9 necess\u00e1rio.<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>[\n  {\n    \"id\": 1,\n    \"nome\": \"Teclado Mec\u00e2nico\",\n    \"preco\": 150.00\n  },\n  {\n    \"id\": 2,\n    \"nome\": \"Mouse Gamer\",\n    \"preco\": 80.00\n  }\n]<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method put\">PUT<\/span><h3>3. Atualizar produto \u2014 UPDATE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">PUT \/api\/produtos\/1<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 130.00,\n  \"estoque\": 8\n}<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>{\n  \"id\": 1,\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 130.00,\n  \"estoque\": 8,\n  \"mensagem\": \"Atualizado com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method delete\">DELETE<\/span><h3>4. Excluir produto \u2014 DELETE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">DELETE \/api\/produtos\/1<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>DELETE \/api\/produtos\/1\n\nNenhum corpo \u00e9 necess\u00e1rio.<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>{\n  \"sucesso\": true,\n  \"mensagem\": \"Produto 1 removido com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<h2 class=\"api-theme-heading\">Front-end e Back-end n\u00e3o precisam ser desenvolvidos juntos<\/h2>\n\n<p class=\"api-theme-text\">Depois que a estrutura da comunica\u00e7\u00e3o foi acordada, as duas equipes podem trabalhar independentemente.<\/p>\n\n<div class=\"flow\">\n    <div class=\"flow-box\">\ud83d\udcc4<br>Contrato da API<\/div>\n    <div class=\"flow-arrow\">\u2192<\/div>\n    <div class=\"flow-box\">\ud83d\udda5\ufe0f<br>Front-end<\/div>\n    <div class=\"flow-arrow\">+<\/div>\n    <div class=\"flow-box\">\u2699\ufe0f<br>Back-end<\/div>\n<\/div>\n\n<p class=\"api-theme-text\">O Front-end pode trabalhar com um mock ou JSON Server que reproduza exatamente o contrato, enquanto o Back-end implementa a API real.<\/p>\n\n<div class=\"highlight-box\">\n    <p><strong>Se ambos respeitaram o mesmo contrato, a integra\u00e7\u00e3o tende a ser simples.<\/strong><\/p>\n<\/div>\n\n<h2 class=\"api-theme-heading\">O contrato tamb\u00e9m separa responsabilidades<\/h2>\n\n<div class=\"responsibility-grid\">\n    <div class=\"responsibility-card\"><h3>Front-end<\/h3><p>Cria a interface, captura a\u00e7\u00f5es do usu\u00e1rio, envia requisi\u00e7\u00f5es e apresenta os dados recebidos.<\/p><\/div>\n    <div class=\"responsibility-card\"><h3>Back-end<\/h3><p>Recebe requisi\u00e7\u00f5es, aplica regras de neg\u00f3cio, valida informa\u00e7\u00f5es, acessa a persist\u00eancia e devolve respostas.<\/p><\/div>\n    <div class=\"responsibility-card\"><h3>Contrato<\/h3><p>Define a fronteira: m\u00e9todo, rota, dados, respostas e regras da comunica\u00e7\u00e3o.<\/p><\/div>\n<\/div>\n\n<h2 class=\"api-theme-heading\">O contrato n\u00e3o obriga Front-end e Back-end a usarem a mesma tecnologia<\/h2>\n\n<p class=\"api-theme-text\">O Front-end pode utilizar React, Vue, Angular ou JavaScript, enquanto a API pode ser constru\u00edda com Node.js\/Express, Java\/Spring, C#\/ASP.NET, Python\/FastAPI ou PHP\/Laravel.<\/p>\n\n<div class=\"contract-center\">\n    <span class=\"big\">O Front-end n\u00e3o precisa conhecer a implementa\u00e7\u00e3o do Back-end.<\/span>\n    Ele precisa conhecer o <strong>contrato<\/strong>.\n<\/div>\n\n<h2 class=\"api-theme-heading\">O contrato tamb\u00e9m deve prever as respostas HTTP<\/h2>\n\n<div class=\"table-wrap\">\n<table>\n<thead><tr><th>Status<\/th><th>Significado<\/th><th>Exemplo<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><strong>200 OK<\/strong><\/td><td>Opera\u00e7\u00e3o realizada com sucesso.<\/td><td>Listagem ou atualiza\u00e7\u00e3o.<\/td><\/tr>\n<tr><td><strong>201 Created<\/strong><\/td><td>Novo recurso criado.<\/td><td>Cadastro de produto.<\/td><\/tr>\n<tr><td><strong>400 Bad Request<\/strong><\/td><td>Dados inv\u00e1lidos.<\/td><td>Pre\u00e7o ausente ou inv\u00e1lido.<\/td><\/tr>\n<tr><td><strong>404 Not Found<\/strong><\/td><td>Recurso n\u00e3o encontrado.<\/td><td>Produto inexistente.<\/td><\/tr>\n<tr><td><strong>500 Internal Server Error<\/strong><\/td><td>Erro inesperado no servidor.<\/td><td>Falha durante o processamento.<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h2 class=\"api-theme-heading\">Como documentar um endpoint de forma simples?<\/h2>\n\n<p class=\"api-theme-text\"re><code>FUNCIONALIDADE\nCadastrar produto\n\nM\u00c9TODO\nPOST\n\nENDPOINT\n\/api\/produtos\n\nENTRADA\n{\n  \"nome\": \"string\",\n  \"preco\": \"number\",\n  \"estoque\": \"number\"\n}\n\nSUCESSO\n201 Created\n\nERROS POSS\u00cdVEIS\n400 - Dados inv\u00e1lidos\n500 - Erro interno\n\nREGRAS\nO nome \u00e9 obrigat\u00f3rio.\nO pre\u00e7o deve ser maior que zero.<\/code><\/pre>\n\n<h2 class=\"api-theme-heading\">Checklist: o contrato est\u00e1 realmente pronto?<\/h2>\n\n<div class=\"checklist\">\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O m\u00e9todo HTTP est\u00e1 definido?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>A URL do endpoint est\u00e1 definida?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Est\u00e1 claro o que o Front-end envia?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Est\u00e1 claro o que o Back-end responde?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Os nomes e tipos dos campos est\u00e3o definidos?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Os c\u00f3digos HTTP foram especificados?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>As principais regras de neg\u00f3cio est\u00e3o claras?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O Front-end consegue desenvolver sem perguntar ao Back-end qual ser\u00e1 a resposta?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O Back-end consegue implementar sem perguntar ao Front-end quais campos dever\u00e1 devolver?<\/div><\/div>\n<\/div>\n\n<div class=\"final-box\">\n    <h2 class=\"api-theme-heading\">Contrato de API \u00e9 planejamento antes da programa\u00e7\u00e3o<\/h2>\n    <p>Definir um contrato antes da implementa\u00e7\u00e3o evita que Front-end e Back-end tomem decis\u00f5es incompat\u00edveis durante o desenvolvimento.<\/p>\n    <p>O objetivo n\u00e3o \u00e9 criar burocracia. \u00c9 <strong>diminuir retrabalho, reduzir depend\u00eancias e permitir que diferentes partes do sistema sejam constru\u00eddas em paralelo.<\/strong><\/p>\n    <p>Quando m\u00e9todo, endpoint, entrada, sa\u00edda, c\u00f3digos HTTP e regras est\u00e3o previamente definidos, cada equipe sabe exatamente o que precisa entregar.<\/p>\n<\/div>\n\n<\/article>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   ARTIGO - CONTRATO ENTRE FRONT-END E BACK-END\n   CSS LIMPO E DEFINITIVO\n   Light\/Dark controlado pela classe .api-dark adicionada via JS\n   ========================================================= *\/\n\n.api-contract-article {\n    --primary: #0f766e;\n    --primary-strong: #14b8a6;\n    --heading: #0f172a;\n    --text: #334155;\n    --muted: #64748b;\n    --surface: #ffffff;\n    --surface-2: #f8fafc;\n    --surface-3: #eef2f7;\n    --border: #dbe4ee;\n    --shadow: 0 10px 30px rgba(15,23,42,.08);\n    --blue: #2563eb;\n    --green: #16a34a;\n    --orange: #d97706;\n    --red: #dc2626;\n    --code-bg: #0f172a;\n    --code-border: #263449;\n    --code-text: #f8fafc;\n\n    max-width: 1050px;\n    margin: 0 auto;\n    padding: 20px;\n    background: transparent;\n    color: var(--text) !important;\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 17px;\n    line-height: 1.75;\n}\n\n.api-contract-article.api-dark {\n    --primary: #5eead4;\n    --primary-strong: #2dd4bf;\n    --heading: #f8fafc;\n    --text: #dbe4ef;\n    --muted: #a8b4c5;\n    --surface: #17202e;\n    --surface-2: #111827;\n    --surface-3: #263244;\n    --border: #334155;\n    --shadow: 0 12px 32px rgba(0,0,0,.20);\n    --code-bg: #070d18;\n    --code-border: #34445d;\n    --code-text: #f8fafc;\n}\n\n.api-contract-article * {\n    box-sizing: border-box;\n}\n\n.api-contract-article > p,\n.api-contract-article > p strong,\n.api-contract-article > p em,\n.api-contract-article > h1,\n.api-contract-article > h2,\n.api-contract-article > h3,\n.api-contract-article > h4,\n.api-contract-article p,\n.api-contract-article li,\n.api-contract-article td,\n.api-contract-article em {\n    color: var(--text) !important;\n}\n\n.api-contract-article h1,\n.api-contract-article h2,\n.api-contract-article h3,\n.api-contract-article h4,\n.api-contract-article h5,\n.api-contract-article h6 {\n    color: var(--heading) !important;\n}\n\n.api-contract-article strong {\n    color: inherit !important;\n}\n\n.api-contract-article p {\n    margin: 0 0 20px;\n}\n\n.api-contract-article h2 {\n    margin-top: 56px;\n    margin-bottom: 20px;\n    padding-bottom: 11px;\n    border-bottom: 1px solid var(--border);\n    font-size: 30px;\n    line-height: 1.25;\n}\n\n.api-contract-article h3 {\n    margin: 0 0 12px;\n    font-size: 21px;\n    line-height: 1.3;\n}\n\n\/* HERO *\/\n.api-contract-article .api-hero {\n    position: relative;\n    overflow: hidden;\n    margin-bottom: 42px;\n    padding: 56px 46px;\n    border: 1px solid rgba(255,255,255,.08);\n    border-radius: 24px;\n    background:\n        radial-gradient(circle at 90% 15%, rgba(45,212,191,.23), transparent 34%),\n        radial-gradient(circle at 5% 90%, rgba(37,99,235,.13), transparent 30%),\n        linear-gradient(135deg,#07111f 0%,#0b2b3b 48%,#0f766e 100%) !important;\n    box-shadow: 0 22px 55px rgba(2,6,23,.20);\n}\n\n.api-contract-article .api-hero h1 {\n    max-width: 880px;\n    margin: 0 0 18px;\n    color: #fff !important;\n    font-size: clamp(36px,5.8vw,58px);\n    line-height: 1.08;\n    letter-spacing: -1.5px;\n}\n\n.api-contract-article .api-hero p {\n    max-width: 820px;\n    margin: 0;\n    color: #dbeafe !important;\n    font-size: 20px;\n}\n\n.api-contract-article .api-hero-label {\n    display: inline-block;\n    margin-bottom: 18px;\n    padding: 7px 13px;\n    border: 1px solid rgba(255,255,255,.18);\n    border-radius: 999px;\n    background: rgba(255,255,255,.08);\n    color: #99f6e4 !important;\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: .08em;\n    text-transform: uppercase;\n}\n\n\/* BOXES *\/\n.api-contract-article .highlight-box,\n.api-contract-article .warning-box {\n    margin: 30px 0;\n    padding: 24px 26px;\n    border-radius: 14px;\n}\n\n.api-contract-article .highlight-box {\n    border: 1px solid #a7f3d0;\n    border-left: 5px solid #0f766e;\n    background: #ecfdf5 !important;\n}\n.api-contract-article .highlight-box,\n.api-contract-article .highlight-box p,\n.api-contract-article .highlight-box strong,\n.api-contract-article .highlight-box em {\n    color: #134e4a !important;\n}\n\n.api-contract-article.api-dark .highlight-box {\n    background: #0c302d !important;\n    border-color: #176c62;\n    border-left-color: #2dd4bf;\n}\n.api-contract-article.api-dark .highlight-box,\n.api-contract-article.api-dark .highlight-box p,\n.api-contract-article.api-dark .highlight-box strong,\n.api-contract-article.api-dark .highlight-box em {\n    color: #ccfbf1 !important;\n}\n\n.api-contract-article .warning-box {\n    border: 1px solid #fde68a;\n    border-left: 5px solid #f59e0b;\n    background: #fffbeb !important;\n}\n.api-contract-article .warning-box,\n.api-contract-article .warning-box p,\n.api-contract-article .warning-box strong {\n    color: #78350f !important;\n}\n\n.api-contract-article.api-dark .warning-box {\n    background: #35260d !important;\n    border-color: #7c5512;\n    border-left-color: #f59e0b;\n}\n.api-contract-article.api-dark .warning-box,\n.api-contract-article.api-dark .warning-box p,\n.api-contract-article.api-dark .warning-box strong {\n    color: #fdecc8 !important;\n}\n\n\/* ANALOGIA *\/\n.api-contract-article .analogy-grid {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    gap: 18px;\n    align-items: center;\n    margin: 34px 0;\n}\n\n.api-contract-article .analogy-card,\n.api-contract-article .anatomy-item,\n.api-contract-article .responsibility-card,\n.api-contract-article .flow-box {\n    border: 1px solid var(--border);\n    border-radius: 17px;\n    background: var(--surface) !important;\n    box-shadow: var(--shadow);\n}\n\n.api-contract-article .analogy-card {\n    min-height: 190px;\n    padding: 26px;\n}\n\n.api-contract-article .analogy-card p,\n.api-contract-article .responsibility-card p,\n.api-contract-article .flow-box {\n    color: var(--text) !important;\n}\n\n.api-contract-article .analogy-card h3,\n.api-contract-article .responsibility-card h3 {\n    color: var(--heading) !important;\n}\n\n.api-contract-article.api-dark .analogy-card h3,\n.api-contract-article.api-dark .responsibility-card h3,\n.api-contract-article.api-dark .anatomy-item strong {\n    color: #5eead4 !important;\n}\n\n.api-contract-article .analogy-icon {\n    display: block;\n    margin-bottom: 10px;\n    font-size: 38px;\n}\n\n.api-contract-article .analogy-arrow,\n.api-contract-article .flow-arrow {\n    color: var(--primary-strong) !important;\n    font-size: 31px;\n    font-weight: 800;\n}\n\n\/* CONTRATO CENTRAL *\/\n.api-contract-article .contract-center {\n    margin: 32px 0;\n    padding: 28px;\n    border: 1px solid #99f6e4;\n    border-radius: 18px;\n    background: linear-gradient(135deg,#f0fdfa,#ecfeff) !important;\n    color: #134e4a !important;\n    text-align: center;\n}\n\n.api-contract-article .contract-center,\n.api-contract-article .contract-center p,\n.api-contract-article .contract-center strong {\n    color: #134e4a !important;\n}\n\n.api-contract-article .contract-center .big {\n    display: block;\n    margin-bottom: 8px;\n    color: #0f4c5c !important;\n    font-size: 26px;\n    font-weight: 800;\n}\n\n.api-contract-article.api-dark .contract-center {\n    background: linear-gradient(135deg,#102c2a,#112733) !important;\n    border-color: #1f6f68;\n}\n.api-contract-article.api-dark .contract-center,\n.api-contract-article.api-dark .contract-center p,\n.api-contract-article.api-dark .contract-center strong {\n    color: #dbe4ef !important;\n}\n.api-contract-article.api-dark .contract-center .big {\n    color: #5eead4 !important;\n}\n\n\/* LISTAS *\/\n.api-contract-article .clean-list {\n    margin: 22px 0 28px;\n    padding: 0;\n    list-style: none;\n}\n.api-contract-article .clean-list li {\n    position: relative;\n    margin-bottom: 10px;\n    padding: 12px 15px 12px 43px;\n    border: 1px solid var(--border);\n    border-radius: 11px;\n    background: var(--surface-2) !important;\n    color: var(--text) !important;\n}\n.api-contract-article .clean-list li::before {\n    content: \"\u2713\";\n    position: absolute;\n    left: 16px;\n    color: var(--green);\n    font-weight: 800;\n}\n\n\/* ANATOMIA *\/\n.api-contract-article .anatomy-grid {\n    display: grid;\n    grid-template-columns: repeat(2,minmax(0,1fr));\n    gap: 18px;\n    margin: 28px 0;\n}\n.api-contract-article .anatomy-item {\n    padding: 22px;\n    color: var(--text) !important;\n}\n.api-contract-article .anatomy-item strong {\n    display: block;\n    margin-bottom: 6px;\n    color: var(--primary) !important;\n    font-size: 18px;\n}\n\n\/* ENDPOINTS *\/\n.api-contract-article .endpoint-card {\n    margin: 30px 0;\n    overflow: hidden;\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    background: var(--surface) !important;\n    box-shadow: var(--shadow);\n}\n\n.api-contract-article .endpoint-header {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    padding: 19px 23px;\n    border-bottom: 1px solid var(--border);\n    background: var(--surface-2) !important;\n}\n\n.api-contract-article .endpoint-header h3 {\n    margin: 0;\n    color: var(--heading) !important;\n}\n\n.api-contract-article .endpoint-body { padding: 24px; }\n\n.api-contract-article .method {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 76px;\n    padding: 7px 11px;\n    border-radius: 7px;\n    color: #fff !important;\n    font-size: 12px;\n    font-weight: 800;\n}\n.api-contract-article .post { background: var(--blue) !important; }\n.api-contract-article .get { background: var(--green) !important; }\n.api-contract-article .put { background: var(--orange) !important; }\n.api-contract-article .delete { background: var(--red) !important; }\n\n.api-contract-article .route {\n    display: inline-block;\n    margin: 4px 0 18px;\n    padding: 9px 13px;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    background: var(--surface-3) !important;\n    color: var(--heading) !important;\n    font-family: Consolas,Monaco,monospace;\n    font-size: 15px;\n    font-weight: 700;\n}\n\n.api-contract-article .code-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 18px;\n    margin-top: 20px;\n}\n\n.api-contract-article .code-title {\n    display: block;\n    margin-bottom: 7px;\n    color: var(--muted) !important;\n    font-size: 12px;\n    font-weight: 800;\n    text-transform: uppercase;\n}\n\n\/* C\u00d3DIGO *\/\n.api-contract-article pre {\n    overflow-x: auto;\n    margin: 0 0 18px;\n    padding: 20px;\n    border: 1px solid var(--code-border) !important;\n    border-radius: 12px;\n    background: var(--code-bg) !important;\n    color: var(--code-text) !important;\n    font: 14px\/1.6 Consolas,Monaco,\"Courier New\",monospace;\n    white-space: pre;\n}\n.api-contract-article pre code {\n    background: transparent !important;\n    color: var(--code-text) !important;\n}\n\n\/* FLUXO *\/\n.api-contract-article .flow {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr auto 1fr;\n    gap: 12px;\n    align-items: center;\n    margin: 32px 0;\n}\n.api-contract-article .flow-box {\n    padding: 22px 15px;\n    color: var(--text) !important;\n    text-align: center;\n    font-weight: 700;\n}\n\n\/* RESPONSABILIDADES *\/\n.api-contract-article .responsibility-grid {\n    display: grid;\n    grid-template-columns: repeat(3,minmax(0,1fr));\n    gap: 18px;\n    margin: 28px 0;\n}\n.api-contract-article .responsibility-card { padding: 24px; }\n.api-contract-article .responsibility-card h3 { color: var(--primary) !important; }\n\n\/* TABELA *\/\n.api-contract-article .table-wrap {\n    overflow-x: auto;\n    margin: 26px 0;\n    border: 1px solid var(--border);\n    border-radius: 14px;\n}\n.api-contract-article table {\n    width: 100%;\n    min-width: 700px;\n    border-collapse: collapse;\n    background: var(--surface) !important;\n}\n.api-contract-article th {\n    padding: 14px;\n    background: #0f172a !important;\n    color: #fff !important;\n    text-align: left;\n}\n.api-contract-article td {\n    padding: 14px;\n    border-bottom: 1px solid var(--border);\n    background: var(--surface) !important;\n    color: var(--text) !important;\n}\n.api-contract-article tr:nth-child(even) td {\n    background: var(--surface-2) !important;\n}\n\n\/* CHECKLIST *\/\n.api-contract-article .checklist {\n    margin: 25px 0;\n    padding: 25px;\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    background: var(--surface-2) !important;\n}\n.api-contract-article .checklist-item {\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n    margin: 13px 0;\n    color: var(--text) !important;\n}\n.api-contract-article .checklist-item div {\n    color: var(--text) !important;\n}\n.api-contract-article .check {\n    flex: 0 0 26px;\n    height: 26px;\n    border-radius: 50%;\n    background: #dcfce7 !important;\n    color: #166534 !important;\n    text-align: center;\n    line-height: 26px;\n    font-weight: 800;\n}\n.api-contract-article.api-dark .check {\n    background: #123d2a !important;\n    color: #bbf7d0 !important;\n}\n\n\/* FINAL *\/\n.api-contract-article .final-box {\n    margin-top: 48px;\n    padding: 36px;\n    border-radius: 20px;\n    background:\n        radial-gradient(circle at 90% 20%,rgba(20,184,166,.18),transparent 35%),\n        linear-gradient(135deg,#07111f,#0b2b3b) !important;\n}\n.api-contract-article .final-box h2,\n.api-contract-article .final-box p,\n.api-contract-article .final-box strong {\n    color: #f8fafc !important;\n}\n\n\/* MOBILE *\/\n@media (max-width:780px) {\n    .api-contract-article { padding: 12px; font-size: 16px; }\n    .api-contract-article .api-hero { padding: 36px 24px; border-radius: 17px; }\n    .api-contract-article .analogy-grid,\n    .api-contract-article .anatomy-grid,\n    .api-contract-article .code-grid,\n    .api-contract-article .responsibility-grid,\n    .api-contract-article .flow { grid-template-columns: 1fr; }\n    .api-contract-article .analogy-arrow,\n    .api-contract-article .flow-arrow {\n        transform: rotate(90deg);\n        text-align: center;\n    }\n    .api-contract-article h2 { font-size: 26px; }\n}\n<\/style>\n\n<article class=\"api-contract-article\">\n\n<header class=\"api-hero\">\n    <span class=\"api-hero-label\">Front-end + Back-end + API REST<\/span>\n    <h1>Contrato entre Front-end e Back-end: o que \u00e9 e por que ele \u00e9 t\u00e3o importante?<\/h1>\n    <p>Entenda como definir um contrato de API permite que Front-end e Back-end sejam desenvolvidos separadamente e se integrem sem surpresas no final do projeto.<\/p>\n<\/header>\n\n<p>Em um projeto moderno, \u00e9 comum termos uma aplica\u00e7\u00e3o dividida em <strong>Front-end<\/strong>, <strong>Back-end<\/strong> e <strong>Banco de Dados<\/strong>.<\/p>\n\n<p>O Front-end apresenta as informa\u00e7\u00f5es ao usu\u00e1rio. O Back-end processa regras de neg\u00f3cio, valida dados e conversa com o banco. Para essas partes funcionarem juntas, elas precisam falar exatamente a mesma l\u00edngua.<\/p>\n\n<div class=\"highlight-box\">\n    <p><strong>\u00c9 justamente a\u00ed que entra o contrato de API.<\/strong><\/p>\n    <p>Ele define antecipadamente como o Front-end far\u00e1 uma solicita\u00e7\u00e3o e qual resposta dever\u00e1 ser fornecida pelo Back-end.<\/p>\n<\/div>\n\n<h2>Uma analogia simples: o gar\u00e7om e o cozinheiro<\/h2>\n\n<p>Imagine uma lanchonete. O cliente faz o pedido para o gar\u00e7om e o gar\u00e7om precisa transmitir esse pedido para a cozinha.<\/p>\n\n<div class=\"analogy-grid\">\n    <div class=\"analogy-card\">\n        <span class=\"analogy-icon\">\ud83e\uddd1\u200d\ud83d\udcbb<\/span>\n        <h3>Front-end<\/h3>\n        <p>\u00c9 como o <strong>gar\u00e7om<\/strong>. Recebe aquilo que o usu\u00e1rio deseja e envia o pedido para quem ir\u00e1 process\u00e1-lo.<\/p>\n    <\/div>\n    <div class=\"analogy-arrow\">\u2192<\/div>\n    <div class=\"analogy-card\">\n        <span class=\"analogy-icon\">\u2699\ufe0f<\/span>\n        <h3>Back-end<\/h3>\n        <p>\u00c9 como o <strong>cozinheiro<\/strong>. Recebe o pedido, processa as informa\u00e7\u00f5es e devolve um resultado.<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"contract-center\">\n    <span class=\"big\">\ud83d\udccb O contrato da API \u00e9 o bloco de pedidos.<\/span>\n    Front-end e Back-end precisam concordar antecipadamente sobre <strong>o formato exato da comunica\u00e7\u00e3o<\/strong>.\n<\/div>\n\n<p>Imagine que o Front-end envie:<\/p>\n<pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\"\n}<\/code><\/pre>\n\n<p>mas o Back-end tenha sido desenvolvido esperando:<\/p>\n<pre><code>{\n  \"descricaoProduto\": \"Teclado Mec\u00e2nico\"\n}<\/code><\/pre>\n\n<div class=\"warning-box\">\n    <strong>Sem contrato, cada lado pode desenvolver uma solu\u00e7\u00e3o correta isoladamente e, mesmo assim, a integra\u00e7\u00e3o falhar.<\/strong>\n<\/div>\n\n<h2>O que \u00e9 um contrato de API?<\/h2>\n\n<p>Um <strong>contrato de API<\/strong> \u00e9 uma especifica\u00e7\u00e3o que determina como diferentes partes de um sistema ir\u00e3o se comunicar.<\/p>\n\n<p>Ele funciona como um acordo t\u00e9cnico entre quem desenvolve o Front-end e quem desenvolve o Back-end.<\/p>\n\n<ul class=\"clean-list\">\n    <li>qual endpoint dever\u00e1 ser chamado;<\/li>\n    <li>qual m\u00e9todo HTTP dever\u00e1 ser utilizado;<\/li>\n    <li>quais dados o Front-end precisa enviar;<\/li>\n    <li>qual ser\u00e1 o formato desses dados;<\/li>\n    <li>qual resposta o Back-end dever\u00e1 retornar;<\/li>\n    <li>qual c\u00f3digo HTTP indicar\u00e1 sucesso;<\/li>\n    <li>quais situa\u00e7\u00f5es de erro podem ocorrer;<\/li>\n    <li>quais regras precisam ser respeitadas.<\/li>\n<\/ul>\n\n<div class=\"highlight-box\">\n    <p><strong>Contrato n\u00e3o \u00e9 implementa\u00e7\u00e3o.<\/strong><\/p>\n    <p>O contrato define <em>como a comunica\u00e7\u00e3o dever\u00e1 acontecer<\/em>. Cada equipe continua livre para implementar internamente sua parte, desde que respeite aquilo que foi combinado.<\/p>\n<\/div>\n\n<h2>O que deve existir em um bom contrato?<\/h2>\n\n<div class=\"anatomy-grid\">\n    <div class=\"anatomy-item\"><strong>1. M\u00e9todo HTTP<\/strong>Define a opera\u00e7\u00e3o: GET, POST, PUT, PATCH ou DELETE.<\/div>\n    <div class=\"anatomy-item\"><strong>2. Endpoint<\/strong>Determina a URL utilizada para acessar determinado recurso.<\/div>\n    <div class=\"anatomy-item\"><strong>3. Dados de entrada<\/strong>Define par\u00e2metros, corpo da requisi\u00e7\u00e3o e estrutura esperada.<\/div>\n    <div class=\"anatomy-item\"><strong>4. Dados de sa\u00edda<\/strong>Define exatamente o JSON que ser\u00e1 devolvido.<\/div>\n    <div class=\"anatomy-item\"><strong>5. Status HTTP<\/strong>Informa como sucesso e erros ser\u00e3o representados.<\/div>\n    <div class=\"anatomy-item\"><strong>6. Regras<\/strong>Define comportamentos que precisam ser conhecidos pelos dois lados.<\/div>\n<\/div>\n\n<h2>Exemplo pr\u00e1tico: contrato de um CRUD de produtos<\/h2>\n\n<p>Vamos considerar uma loja de eletr\u00f4nicos. Antes do desenvolvimento, Front-end e Back-end concordam que o recurso ser\u00e1 chamado de <strong>produtos<\/strong> e utilizar\u00e1 a rota <code>\/api\/produtos<\/code>.<\/p>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method post\">POST<\/span><h3>1. Cadastrar produto \u2014 CREATE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">POST \/api\/produtos<\/span>\n        <p>O usu\u00e1rio preenche o formul\u00e1rio no Front-end. O Front envia os dados e o Back-end realiza o cadastro.<\/p>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 150.00,\n  \"estoque\": 10\n}<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 201 Created<\/span><pre><code>{\n  \"id\": 1,\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 150.00,\n  \"estoque\": 10,\n  \"status\": \"Cadastrado com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method get\">GET<\/span><h3>2. Listar produtos \u2014 READ<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">GET \/api\/produtos<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>GET \/api\/produtos\n\nNenhum corpo \u00e9 necess\u00e1rio.<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>[\n  {\n    \"id\": 1,\n    \"nome\": \"Teclado Mec\u00e2nico\",\n    \"preco\": 150.00\n  },\n  {\n    \"id\": 2,\n    \"nome\": \"Mouse Gamer\",\n    \"preco\": 80.00\n  }\n]<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method put\">PUT<\/span><h3>3. Atualizar produto \u2014 UPDATE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">PUT \/api\/produtos\/1<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 130.00,\n  \"estoque\": 8\n}<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>{\n  \"id\": 1,\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 130.00,\n  \"estoque\": 8,\n  \"mensagem\": \"Atualizado com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method delete\">DELETE<\/span><h3>4. Excluir produto \u2014 DELETE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">DELETE \/api\/produtos\/1<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>DELETE \/api\/produtos\/1\n\nNenhum corpo \u00e9 necess\u00e1rio.<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>{\n  \"sucesso\": true,\n  \"mensagem\": \"Produto 1 removido com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<h2>Front-end e Back-end n\u00e3o precisam ser desenvolvidos juntos<\/h2>\n\n<p>Depois que a estrutura da comunica\u00e7\u00e3o foi acordada, as duas equipes podem trabalhar independentemente.<\/p>\n\n<div class=\"flow\">\n    <div class=\"flow-box\">\ud83d\udcc4<br>Contrato da API<\/div>\n    <div class=\"flow-arrow\">\u2192<\/div>\n    <div class=\"flow-box\">\ud83d\udda5\ufe0f<br>Front-end<\/div>\n    <div class=\"flow-arrow\">+<\/div>\n    <div class=\"flow-box\">\u2699\ufe0f<br>Back-end<\/div>\n<\/div>\n\n<p>O Front-end pode trabalhar com um mock ou JSON Server que reproduza exatamente o contrato, enquanto o Back-end implementa a API real.<\/p>\n\n<div class=\"highlight-box\">\n    <p><strong>Se ambos respeitaram o mesmo contrato, a integra\u00e7\u00e3o tende a ser simples.<\/strong><\/p>\n<\/div>\n\n<h2>O contrato tamb\u00e9m separa responsabilidades<\/h2>\n\n<div class=\"responsibility-grid\">\n    <div class=\"responsibility-card\"><h3>Front-end<\/h3><p>Cria a interface, captura a\u00e7\u00f5es do usu\u00e1rio, envia requisi\u00e7\u00f5es e apresenta os dados recebidos.<\/p><\/div>\n    <div class=\"responsibility-card\"><h3>Back-end<\/h3><p>Recebe requisi\u00e7\u00f5es, aplica regras de neg\u00f3cio, valida informa\u00e7\u00f5es, acessa a persist\u00eancia e devolve respostas.<\/p><\/div>\n    <div class=\"responsibility-card\"><h3>Contrato<\/h3><p>Define a fronteira: m\u00e9todo, rota, dados, respostas e regras da comunica\u00e7\u00e3o.<\/p><\/div>\n<\/div>\n\n<h2>O contrato n\u00e3o obriga Front-end e Back-end a usarem a mesma tecnologia<\/h2>\n\n<p>O Front-end pode utilizar React, Vue, Angular ou JavaScript, enquanto a API pode ser constru\u00edda com Node.js\/Express, Java\/Spring, C#\/ASP.NET, Python\/FastAPI ou PHP\/Laravel.<\/p>\n\n<div class=\"contract-center\">\n    <span class=\"big\">O Front-end n\u00e3o precisa conhecer a implementa\u00e7\u00e3o do Back-end.<\/span>\n    Ele precisa conhecer o <strong>contrato<\/strong>.\n<\/div>\n\n<h2>O contrato tamb\u00e9m deve prever as respostas HTTP<\/h2>\n\n<div class=\"table-wrap\">\n<table>\n<thead><tr><th>Status<\/th><th>Significado<\/th><th>Exemplo<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><strong>200 OK<\/strong><\/td><td>Opera\u00e7\u00e3o realizada com sucesso.<\/td><td>Listagem ou atualiza\u00e7\u00e3o.<\/td><\/tr>\n<tr><td><strong>201 Created<\/strong><\/td><td>Novo recurso criado.<\/td><td>Cadastro de produto.<\/td><\/tr>\n<tr><td><strong>400 Bad Request<\/strong><\/td><td>Dados inv\u00e1lidos.<\/td><td>Pre\u00e7o ausente ou inv\u00e1lido.<\/td><\/tr>\n<tr><td><strong>404 Not Found<\/strong><\/td><td>Recurso n\u00e3o encontrado.<\/td><td>Produto inexistente.<\/td><\/tr>\n<tr><td><strong>500 Internal Server Error<\/strong><\/td><td>Erro inesperado no servidor.<\/td><td>Falha durante o processamento.<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h2>Como documentar um endpoint de forma simples?<\/h2>\n\n<pre><code>FUNCIONALIDADE\nCadastrar produto\n\nM\u00c9TODO\nPOST\n\nENDPOINT\n\/api\/produtos\n\nENTRADA\n{\n  \"nome\": \"string\",\n  \"preco\": \"number\",\n  \"estoque\": \"number\"\n}\n\nSUCESSO\n201 Created\n\nERROS POSS\u00cdVEIS\n400 - Dados inv\u00e1lidos\n500 - Erro interno\n\nREGRAS\nO nome \u00e9 obrigat\u00f3rio.\nO pre\u00e7o deve ser maior que zero.<\/code><\/pre>\n\n<h2>Checklist: o contrato est\u00e1 realmente pronto?<\/h2>\n\n<div class=\"checklist\">\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O m\u00e9todo HTTP est\u00e1 definido?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>A URL do endpoint est\u00e1 definida?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Est\u00e1 claro o que o Front-end envia?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Est\u00e1 claro o que o Back-end responde?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Os nomes e tipos dos campos est\u00e3o definidos?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Os c\u00f3digos HTTP foram especificados?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>As principais regras de neg\u00f3cio est\u00e3o claras?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O Front-end consegue desenvolver sem perguntar ao Back-end qual ser\u00e1 a resposta?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O Back-end consegue implementar sem perguntar ao Front-end quais campos dever\u00e1 devolver?<\/div><\/div>\n<\/div>\n\n<div class=\"final-box\">\n    <h2>Contrato de API \u00e9 planejamento antes da programa\u00e7\u00e3o<\/h2>\n    <p>Definir um contrato antes da implementa\u00e7\u00e3o evita que Front-end e Back-end tomem decis\u00f5es incompat\u00edveis durante o desenvolvimento.<\/p>\n    <p>O objetivo n\u00e3o \u00e9 criar burocracia. \u00c9 <strong>diminuir retrabalho, reduzir depend\u00eancias e permitir que diferentes partes do sistema sejam constru\u00eddas em paralelo.<\/strong><\/p>\n    <p>Quando m\u00e9todo, endpoint, entrada, sa\u00edda, c\u00f3digos HTTP e regras est\u00e3o previamente definidos, cada equipe sabe exatamente o que precisa entregar.<\/p>\n<\/div>\n\n<\/article>\n<script>\n(function () {\n    function parseRGB(value) {\n        var m = value && value.match(\/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)\/i);\n        return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;\n    }\n\n    function visibleBackground(el) {\n        var node = el;\n        while (node && node !== document.documentElement) {\n            var style = window.getComputedStyle(node);\n            var bg = style.backgroundColor;\n            var rgb = parseRGB(bg);\n\n            if (rgb && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n                return rgb;\n            }\n            node = node.parentElement;\n        }\n\n        var bodyBg = parseRGB(window.getComputedStyle(document.body).backgroundColor);\n        return bodyBg || [255,255,255];\n    }\n\n    function luminance(rgb) {\n        function channel(c) {\n            c = c \/ 255;\n            return c <= 0.03928 ? c \/ 12.92 : Math.pow((c + 0.055) \/ 1.055, 2.4);\n        }\n        return 0.2126 * channel(rgb[0]) +\n               0.7152 * channel(rgb[1]) +\n               0.0722 * channel(rgb[2]);\n    }\n\n    function applyTheme() {\n        document.querySelectorAll('.api-contract-article').forEach(function(article) {\n            var rgb = visibleBackground(article.parentElement || article);\n            article.classList.toggle('api-dark', luminance(rgb) < 0.30);\n        });\n    }\n\n    applyTheme();\n\n    \/* Reavalia quando o usu\u00e1rio muda o tema do site *\/\n    new MutationObserver(function () {\n        window.requestAnimationFrame(applyTheme);\n    }).observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['class', 'style', 'data-theme', 'data-mode']\n    });\n\n    if (document.body) {\n        new MutationObserver(function () {\n            window.requestAnimationFrame(applyTheme);\n        }).observe(document.body, {\n            attributes: true,\n            attributeFilter: ['class', 'style', 'data-theme', 'data-mode']\n        });\n    }\n})();\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   ARTIGO - CONTRATO ENTRE FRONT-END E BACK-END\n   CSS LIMPO E DEFINITIVO\n   Light\/Dark controlado pela classe .api-dark adicionada via JS\n   ========================================================= *\/\n\n.api-contract-article {\n    --primary: #0f766e;\n    --primary-strong: #14b8a6;\n    --heading: #0f172a;\n    --text: #334155;\n    --muted: #64748b;\n    --surface: #ffffff;\n    --surface-2: #f8fafc;\n    --surface-3: #eef2f7;\n    --border: #dbe4ee;\n    --shadow: 0 10px 30px rgba(15,23,42,.08);\n    --blue: #2563eb;\n    --green: #16a34a;\n    --orange: #d97706;\n    --red: #dc2626;\n    --code-bg: #0f172a;\n    --code-border: #263449;\n    --code-text: #f8fafc;\n\n    max-width: 1050px;\n    margin: 0 auto;\n    padding: 20px;\n    background: transparent;\n    color: var(--text) !important;\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 17px;\n    line-height: 1.75;\n}\n\n.api-contract-article.api-dark {\n    --primary: #5eead4;\n    --primary-strong: #2dd4bf;\n    --heading: #f8fafc;\n    --text: #dbe4ef;\n    --muted: #a8b4c5;\n    --surface: #17202e;\n    --surface-2: #111827;\n    --surface-3: #263244;\n    --border: #334155;\n    --shadow: 0 12px 32px rgba(0,0,0,.20);\n    --code-bg: #070d18;\n    --code-border: #34445d;\n    --code-text: #f8fafc;\n}\n\n.api-contract-article * {\n    box-sizing: border-box;\n}\n\n.api-contract-article > p,\n.api-contract-article > p strong,\n.api-contract-article > p em,\n.api-contract-article > h1,\n.api-contract-article > h2,\n.api-contract-article > h3,\n.api-contract-article > h4,\n.api-contract-article p,\n.api-contract-article li,\n.api-contract-article td,\n.api-contract-article em {\n    color: var(--text) !important;\n}\n\n.api-contract-article h1,\n.api-contract-article h2,\n.api-contract-article h3,\n.api-contract-article h4,\n.api-contract-article h5,\n.api-contract-article h6 {\n    color: var(--heading) !important;\n}\n\n.api-contract-article strong {\n    color: inherit !important;\n}\n\n.api-contract-article p {\n    margin: 0 0 20px;\n}\n\n.api-contract-article h2 {\n    margin-top: 56px;\n    margin-bottom: 20px;\n    padding-bottom: 11px;\n    border-bottom: 1px solid var(--border);\n    font-size: 30px;\n    line-height: 1.25;\n}\n\n.api-contract-article h3 {\n    margin: 0 0 12px;\n    font-size: 21px;\n    line-height: 1.3;\n}\n\n\/* HERO *\/\n.api-contract-article .api-hero {\n    position: relative;\n    overflow: hidden;\n    margin-bottom: 42px;\n    padding: 56px 46px;\n    border: 1px solid rgba(255,255,255,.08);\n    border-radius: 24px;\n    background:\n        radial-gradient(circle at 90% 15%, rgba(45,212,191,.23), transparent 34%),\n        radial-gradient(circle at 5% 90%, rgba(37,99,235,.13), transparent 30%),\n        linear-gradient(135deg,#07111f 0%,#0b2b3b 48%,#0f766e 100%) !important;\n    box-shadow: 0 22px 55px rgba(2,6,23,.20);\n}\n\n.api-contract-article .api-hero h1 {\n    max-width: 880px;\n    margin: 0 0 18px;\n    color: #fff !important;\n    font-size: clamp(36px,5.8vw,58px);\n    line-height: 1.08;\n    letter-spacing: -1.5px;\n}\n\n.api-contract-article .api-hero p {\n    max-width: 820px;\n    margin: 0;\n    color: #dbeafe !important;\n    font-size: 20px;\n}\n\n.api-contract-article .api-hero-label {\n    display: inline-block;\n    margin-bottom: 18px;\n    padding: 7px 13px;\n    border: 1px solid rgba(255,255,255,.18);\n    border-radius: 999px;\n    background: rgba(255,255,255,.08);\n    color: #99f6e4 !important;\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: .08em;\n    text-transform: uppercase;\n}\n\n\/* BOXES *\/\n.api-contract-article .highlight-box,\n.api-contract-article .warning-box {\n    margin: 30px 0;\n    padding: 24px 26px;\n    border-radius: 14px;\n}\n\n.api-contract-article .highlight-box {\n    border: 1px solid #a7f3d0;\n    border-left: 5px solid #0f766e;\n    background: #ecfdf5 !important;\n}\n.api-contract-article .highlight-box,\n.api-contract-article .highlight-box p,\n.api-contract-article .highlight-box strong,\n.api-contract-article .highlight-box em {\n    color: #134e4a !important;\n}\n\n.api-contract-article.api-dark .highlight-box {\n    background: #0c302d !important;\n    border-color: #176c62;\n    border-left-color: #2dd4bf;\n}\n.api-contract-article.api-dark .highlight-box,\n.api-contract-article.api-dark .highlight-box p,\n.api-contract-article.api-dark .highlight-box strong,\n.api-contract-article.api-dark .highlight-box em {\n    color: #ccfbf1 !important;\n}\n\n.api-contract-article .warning-box {\n    border: 1px solid #fde68a;\n    border-left: 5px solid #f59e0b;\n    background: #fffbeb !important;\n}\n.api-contract-article .warning-box,\n.api-contract-article .warning-box p,\n.api-contract-article .warning-box strong {\n    color: #78350f !important;\n}\n\n.api-contract-article.api-dark .warning-box {\n    background: #35260d !important;\n    border-color: #7c5512;\n    border-left-color: #f59e0b;\n}\n.api-contract-article.api-dark .warning-box,\n.api-contract-article.api-dark .warning-box p,\n.api-contract-article.api-dark .warning-box strong {\n    color: #fdecc8 !important;\n}\n\n\/* ANALOGIA *\/\n.api-contract-article .analogy-grid {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    gap: 18px;\n    align-items: center;\n    margin: 34px 0;\n}\n\n.api-contract-article .analogy-card,\n.api-contract-article .anatomy-item,\n.api-contract-article .responsibility-card,\n.api-contract-article .flow-box {\n    border: 1px solid var(--border);\n    border-radius: 17px;\n    background: var(--surface) !important;\n    box-shadow: var(--shadow);\n}\n\n.api-contract-article .analogy-card {\n    min-height: 190px;\n    padding: 26px;\n}\n\n.api-contract-article .analogy-card p,\n.api-contract-article .responsibility-card p,\n.api-contract-article .flow-box {\n    color: var(--text) !important;\n}\n\n.api-contract-article .analogy-card h3,\n.api-contract-article .responsibility-card h3 {\n    color: var(--heading) !important;\n}\n\n.api-contract-article.api-dark .analogy-card h3,\n.api-contract-article.api-dark .responsibility-card h3,\n.api-contract-article.api-dark .anatomy-item strong {\n    color: #5eead4 !important;\n}\n\n.api-contract-article .analogy-icon {\n    display: block;\n    margin-bottom: 10px;\n    font-size: 38px;\n}\n\n.api-contract-article .analogy-arrow,\n.api-contract-article .flow-arrow {\n    color: var(--primary-strong) !important;\n    font-size: 31px;\n    font-weight: 800;\n}\n\n\/* CONTRATO CENTRAL *\/\n.api-contract-article .contract-center {\n    margin: 32px 0;\n    padding: 28px;\n    border: 1px solid #99f6e4;\n    border-radius: 18px;\n    background: linear-gradient(135deg,#f0fdfa,#ecfeff) !important;\n    color: #134e4a !important;\n    text-align: center;\n}\n\n.api-contract-article .contract-center,\n.api-contract-article .contract-center p,\n.api-contract-article .contract-center strong {\n    color: #134e4a !important;\n}\n\n.api-contract-article .contract-center .big {\n    display: block;\n    margin-bottom: 8px;\n    color: #0f4c5c !important;\n    font-size: 26px;\n    font-weight: 800;\n}\n\n.api-contract-article.api-dark .contract-center {\n    background: linear-gradient(135deg,#102c2a,#112733) !important;\n    border-color: #1f6f68;\n}\n.api-contract-article.api-dark .contract-center,\n.api-contract-article.api-dark .contract-center p,\n.api-contract-article.api-dark .contract-center strong {\n    color: #dbe4ef !important;\n}\n.api-contract-article.api-dark .contract-center .big {\n    color: #5eead4 !important;\n}\n\n\/* LISTAS *\/\n.api-contract-article .clean-list {\n    margin: 22px 0 28px;\n    padding: 0;\n    list-style: none;\n}\n.api-contract-article .clean-list li {\n    position: relative;\n    margin-bottom: 10px;\n    padding: 12px 15px 12px 43px;\n    border: 1px solid var(--border);\n    border-radius: 11px;\n    background: var(--surface-2) !important;\n    color: var(--text) !important;\n}\n.api-contract-article .clean-list li::before {\n    content: \"\u2713\";\n    position: absolute;\n    left: 16px;\n    color: var(--green);\n    font-weight: 800;\n}\n\n\/* ANATOMIA *\/\n.api-contract-article .anatomy-grid {\n    display: grid;\n    grid-template-columns: repeat(2,minmax(0,1fr));\n    gap: 18px;\n    margin: 28px 0;\n}\n.api-contract-article .anatomy-item {\n    padding: 22px;\n    color: var(--text) !important;\n}\n.api-contract-article .anatomy-item strong {\n    display: block;\n    margin-bottom: 6px;\n    color: var(--primary) !important;\n    font-size: 18px;\n}\n\n\/* ENDPOINTS *\/\n.api-contract-article .endpoint-card {\n    margin: 30px 0;\n    overflow: hidden;\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    background: var(--surface) !important;\n    box-shadow: var(--shadow);\n}\n\n.api-contract-article .endpoint-header {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    padding: 19px 23px;\n    border-bottom: 1px solid var(--border);\n    background: var(--surface-2) !important;\n}\n\n.api-contract-article .endpoint-header h3 {\n    margin: 0;\n    color: var(--heading) !important;\n}\n\n.api-contract-article .endpoint-body { padding: 24px; }\n\n.api-contract-article .method {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 76px;\n    padding: 7px 11px;\n    border-radius: 7px;\n    color: #fff !important;\n    font-size: 12px;\n    font-weight: 800;\n}\n.api-contract-article .post { background: var(--blue) !important; }\n.api-contract-article .get { background: var(--green) !important; }\n.api-contract-article .put { background: var(--orange) !important; }\n.api-contract-article .delete { background: var(--red) !important; }\n\n.api-contract-article .route {\n    display: inline-block;\n    margin: 4px 0 18px;\n    padding: 9px 13px;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    background: var(--surface-3) !important;\n    color: var(--heading) !important;\n    font-family: Consolas,Monaco,monospace;\n    font-size: 15px;\n    font-weight: 700;\n}\n\n.api-contract-article .code-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 18px;\n    margin-top: 20px;\n}\n\n.api-contract-article .code-title {\n    display: block;\n    margin-bottom: 7px;\n    color: var(--muted) !important;\n    font-size: 12px;\n    font-weight: 800;\n    text-transform: uppercase;\n}\n\n\/* C\u00d3DIGO *\/\n.api-contract-article pre {\n    overflow-x: auto;\n    margin: 0 0 18px;\n    padding: 20px;\n    border: 1px solid var(--code-border) !important;\n    border-radius: 12px;\n    background: var(--code-bg) !important;\n    color: var(--code-text) !important;\n    font: 14px\/1.6 Consolas,Monaco,\"Courier New\",monospace;\n    white-space: pre;\n}\n.api-contract-article pre code {\n    background: transparent !important;\n    color: var(--code-text) !important;\n}\n\n\/* FLUXO *\/\n.api-contract-article .flow {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr auto 1fr;\n    gap: 12px;\n    align-items: center;\n    margin: 32px 0;\n}\n.api-contract-article .flow-box {\n    padding: 22px 15px;\n    color: var(--text) !important;\n    text-align: center;\n    font-weight: 700;\n}\n\n\/* RESPONSABILIDADES *\/\n.api-contract-article .responsibility-grid {\n    display: grid;\n    grid-template-columns: repeat(3,minmax(0,1fr));\n    gap: 18px;\n    margin: 28px 0;\n}\n.api-contract-article .responsibility-card { padding: 24px; }\n.api-contract-article .responsibility-card h3 { color: var(--primary) !important; }\n\n\/* TABELA *\/\n.api-contract-article .table-wrap {\n    overflow-x: auto;\n    margin: 26px 0;\n    border: 1px solid var(--border);\n    border-radius: 14px;\n}\n.api-contract-article table {\n    width: 100%;\n    min-width: 700px;\n    border-collapse: collapse;\n    background: var(--surface) !important;\n}\n.api-contract-article th {\n    padding: 14px;\n    background: #0f172a !important;\n    color: #fff !important;\n    text-align: left;\n}\n.api-contract-article td {\n    padding: 14px;\n    border-bottom: 1px solid var(--border);\n    background: var(--surface) !important;\n    color: var(--text) !important;\n}\n.api-contract-article tr:nth-child(even) td {\n    background: var(--surface-2) !important;\n}\n\n\/* CHECKLIST *\/\n.api-contract-article .checklist {\n    margin: 25px 0;\n    padding: 25px;\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    background: var(--surface-2) !important;\n}\n.api-contract-article .checklist-item {\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n    margin: 13px 0;\n    color: var(--text) !important;\n}\n.api-contract-article .checklist-item div {\n    color: var(--text) !important;\n}\n.api-contract-article .check {\n    flex: 0 0 26px;\n    height: 26px;\n    border-radius: 50%;\n    background: #dcfce7 !important;\n    color: #166534 !important;\n    text-align: center;\n    line-height: 26px;\n    font-weight: 800;\n}\n.api-contract-article.api-dark .check {\n    background: #123d2a !important;\n    color: #bbf7d0 !important;\n}\n\n\/* FINAL *\/\n.api-contract-article .final-box {\n    margin-top: 48px;\n    padding: 36px;\n    border-radius: 20px;\n    background:\n        radial-gradient(circle at 90% 20%,rgba(20,184,166,.18),transparent 35%),\n        linear-gradient(135deg,#07111f,#0b2b3b) !important;\n}\n.api-contract-article .final-box h2,\n.api-contract-article .final-box p,\n.api-contract-article .final-box strong {\n    color: #f8fafc !important;\n}\n\n\/* MOBILE *\/\n@media (max-width:780px) {\n    .api-contract-article { padding: 12px; font-size: 16px; }\n    .api-contract-article .api-hero { padding: 36px 24px; border-radius: 17px; }\n    .api-contract-article .analogy-grid,\n    .api-contract-article .anatomy-grid,\n    .api-contract-article .code-grid,\n    .api-contract-article .responsibility-grid,\n    .api-contract-article .flow { grid-template-columns: 1fr; }\n    .api-contract-article .analogy-arrow,\n    .api-contract-article .flow-arrow {\n        transform: rotate(90deg);\n        text-align: center;\n    }\n    .api-contract-article h2 { font-size: 26px; }\n}\n\/* =========================================================\n   TEXTO AUTOM\u00c1TICO SOBRE FUNDO LIGHT OU DARK\n   N\u00c3O DEPENDE DO TEMA, CLASSE OU JAVASCRIPT\n   ========================================================= *\/\n\n\/* Textos que ficam diretamente sobre o fundo do site *\/\n.api-contract-article > p,\n.api-contract-article > h2,\n.api-contract-article > h3 {\n    color: #ffffff !important;\n    mix-blend-mode: difference !important;\n}\n\n\/* Negritos e it\u00e1licos desses par\u00e1grafos *\/\n.api-contract-article > p strong,\n.api-contract-article > p em {\n    color: #ffffff !important;\n}\n\n\/* Linha abaixo dos t\u00edtulos *\/\n.api-contract-article > h2 {\n    border-bottom-color: rgba(128, 128, 128, 0.7) !important;\n}\n\n\/* N\u00c3O aplicar blend nos componentes com fundo pr\u00f3prio *\/\n.api-contract-article .api-hero,\n.api-contract-article .highlight-box,\n.api-contract-article .warning-box,\n.api-contract-article .contract-center,\n.api-contract-article .analogy-card,\n.api-contract-article .anatomy-item,\n.api-contract-article .endpoint-card,\n.api-contract-article .responsibility-card,\n.api-contract-article .flow-box,\n.api-contract-article .checklist,\n.api-contract-article .final-box,\n.api-contract-article pre,\n.api-contract-article table {\n    mix-blend-mode: normal !important;\n}\n<\/style>\n\n<article class=\"api-contract-article\">\n\n<header class=\"api-hero\">\n    <span class=\"api-hero-label\">Front-end + Back-end + API REST<\/span>\n    <h1>Contrato entre Front-end e Back-end: o que \u00e9 e por que ele \u00e9 t\u00e3o importante?<\/h1>\n    <p>Entenda como definir um contrato de API permite que Front-end e Back-end sejam desenvolvidos separadamente e se integrem sem surpresas no final do projeto.<\/p>\n<\/header>\n\n<p>Em um projeto moderno, \u00e9 comum termos uma aplica\u00e7\u00e3o dividida em <strong>Front-end<\/strong>, <strong>Back-end<\/strong> e <strong>Banco de Dados<\/strong>.<\/p>\n\n<p>O Front-end apresenta as informa\u00e7\u00f5es ao usu\u00e1rio. O Back-end processa regras de neg\u00f3cio, valida dados e conversa com o banco. Para essas partes funcionarem juntas, elas precisam falar exatamente a mesma l\u00edngua.<\/p>\n\n<div class=\"highlight-box\">\n    <p><strong>\u00c9 justamente a\u00ed que entra o contrato de API.<\/strong><\/p>\n    <p>Ele define antecipadamente como o Front-end far\u00e1 uma solicita\u00e7\u00e3o e qual resposta dever\u00e1 ser fornecida pelo Back-end.<\/p>\n<\/div>\n\n<h2>Uma analogia simples: o gar\u00e7om e o cozinheiro<\/h2>\n\n<p>Imagine uma lanchonete. O cliente faz o pedido para o gar\u00e7om e o gar\u00e7om precisa transmitir esse pedido para a cozinha.<\/p>\n\n<div class=\"analogy-grid\">\n    <div class=\"analogy-card\">\n        <span class=\"analogy-icon\">\ud83e\uddd1\u200d\ud83d\udcbb<\/span>\n        <h3>Front-end<\/h3>\n        <p>\u00c9 como o <strong>gar\u00e7om<\/strong>. Recebe aquilo que o usu\u00e1rio deseja e envia o pedido para quem ir\u00e1 process\u00e1-lo.<\/p>\n    <\/div>\n    <div class=\"analogy-arrow\">\u2192<\/div>\n    <div class=\"analogy-card\">\n        <span class=\"analogy-icon\">\u2699\ufe0f<\/span>\n        <h3>Back-end<\/h3>\n        <p>\u00c9 como o <strong>cozinheiro<\/strong>. Recebe o pedido, processa as informa\u00e7\u00f5es e devolve um resultado.<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"contract-center\">\n    <span class=\"big\">\ud83d\udccb O contrato da API \u00e9 o bloco de pedidos.<\/span>\n    Front-end e Back-end precisam concordar antecipadamente sobre <strong>o formato exato da comunica\u00e7\u00e3o<\/strong>.\n<\/div>\n\n<p>Imagine que o Front-end envie:<\/p>\n<pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\"\n}<\/code><\/pre>\n\n<p>mas o Back-end tenha sido desenvolvido esperando:<\/p>\n<pre><code>{\n  \"descricaoProduto\": \"Teclado Mec\u00e2nico\"\n}<\/code><\/pre>\n\n<div class=\"warning-box\">\n    <strong>Sem contrato, cada lado pode desenvolver uma solu\u00e7\u00e3o correta isoladamente e, mesmo assim, a integra\u00e7\u00e3o falhar.<\/strong>\n<\/div>\n\n<h2>O que \u00e9 um contrato de API?<\/h2>\n\n<p>Um <strong>contrato de API<\/strong> \u00e9 uma especifica\u00e7\u00e3o que determina como diferentes partes de um sistema ir\u00e3o se comunicar.<\/p>\n\n<p>Ele funciona como um acordo t\u00e9cnico entre quem desenvolve o Front-end e quem desenvolve o Back-end.<\/p>\n\n<ul class=\"clean-list\">\n    <li>qual endpoint dever\u00e1 ser chamado;<\/li>\n    <li>qual m\u00e9todo HTTP dever\u00e1 ser utilizado;<\/li>\n    <li>quais dados o Front-end precisa enviar;<\/li>\n    <li>qual ser\u00e1 o formato desses dados;<\/li>\n    <li>qual resposta o Back-end dever\u00e1 retornar;<\/li>\n    <li>qual c\u00f3digo HTTP indicar\u00e1 sucesso;<\/li>\n    <li>quais situa\u00e7\u00f5es de erro podem ocorrer;<\/li>\n    <li>quais regras precisam ser respeitadas.<\/li>\n<\/ul>\n\n<div class=\"highlight-box\">\n    <p><strong>Contrato n\u00e3o \u00e9 implementa\u00e7\u00e3o.<\/strong><\/p>\n    <p>O contrato define <em>como a comunica\u00e7\u00e3o dever\u00e1 acontecer<\/em>. Cada equipe continua livre para implementar internamente sua parte, desde que respeite aquilo que foi combinado.<\/p>\n<\/div>\n\n<h2>O que deve existir em um bom contrato?<\/h2>\n\n<div class=\"anatomy-grid\">\n    <div class=\"anatomy-item\"><strong>1. M\u00e9todo HTTP<\/strong>Define a opera\u00e7\u00e3o: GET, POST, PUT, PATCH ou DELETE.<\/div>\n    <div class=\"anatomy-item\"><strong>2. Endpoint<\/strong>Determina a URL utilizada para acessar determinado recurso.<\/div>\n    <div class=\"anatomy-item\"><strong>3. Dados de entrada<\/strong>Define par\u00e2metros, corpo da requisi\u00e7\u00e3o e estrutura esperada.<\/div>\n    <div class=\"anatomy-item\"><strong>4. Dados de sa\u00edda<\/strong>Define exatamente o JSON que ser\u00e1 devolvido.<\/div>\n    <div class=\"anatomy-item\"><strong>5. Status HTTP<\/strong>Informa como sucesso e erros ser\u00e3o representados.<\/div>\n    <div class=\"anatomy-item\"><strong>6. Regras<\/strong>Define comportamentos que precisam ser conhecidos pelos dois lados.<\/div>\n<\/div>\n\n<h2>Exemplo pr\u00e1tico: contrato de um CRUD de produtos<\/h2>\n\n<p>Vamos considerar uma loja de eletr\u00f4nicos. Antes do desenvolvimento, Front-end e Back-end concordam que o recurso ser\u00e1 chamado de <strong>produtos<\/strong> e utilizar\u00e1 a rota <code>\/api\/produtos<\/code>.<\/p>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method post\">POST<\/span><h3>1. Cadastrar produto \u2014 CREATE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">POST \/api\/produtos<\/span>\n        <p>O usu\u00e1rio preenche o formul\u00e1rio no Front-end. O Front envia os dados e o Back-end realiza o cadastro.<\/p>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 150.00,\n  \"estoque\": 10\n}<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 201 Created<\/span><pre><code>{\n  \"id\": 1,\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 150.00,\n  \"estoque\": 10,\n  \"status\": \"Cadastrado com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method get\">GET<\/span><h3>2. Listar produtos \u2014 READ<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">GET \/api\/produtos<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>GET \/api\/produtos\n\nNenhum corpo \u00e9 necess\u00e1rio.<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>[\n  {\n    \"id\": 1,\n    \"nome\": \"Teclado Mec\u00e2nico\",\n    \"preco\": 150.00\n  },\n  {\n    \"id\": 2,\n    \"nome\": \"Mouse Gamer\",\n    \"preco\": 80.00\n  }\n]<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method put\">PUT<\/span><h3>3. Atualizar produto \u2014 UPDATE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">PUT \/api\/produtos\/1<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>{\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 130.00,\n  \"estoque\": 8\n}<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>{\n  \"id\": 1,\n  \"nome\": \"Teclado Mec\u00e2nico\",\n  \"preco\": 130.00,\n  \"estoque\": 8,\n  \"mensagem\": \"Atualizado com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"endpoint-card\">\n    <div class=\"endpoint-header\"><span class=\"method delete\">DELETE<\/span><h3>4. Excluir produto \u2014 DELETE<\/h3><\/div>\n    <div class=\"endpoint-body\">\n        <span class=\"route\">DELETE \/api\/produtos\/1<\/span>\n        <div class=\"code-grid\">\n            <div class=\"code-column\"><span class=\"code-title\">Front-end envia<\/span><pre><code>DELETE \/api\/produtos\/1\n\nNenhum corpo \u00e9 necess\u00e1rio.<\/code><\/pre><\/div>\n            <div class=\"code-column\"><span class=\"code-title\">Back-end responde \u2014 200 OK<\/span><pre><code>{\n  \"sucesso\": true,\n  \"mensagem\": \"Produto 1 removido com sucesso\"\n}<\/code><\/pre><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<h2>Front-end e Back-end n\u00e3o precisam ser desenvolvidos juntos<\/h2>\n\n<p>Depois que a estrutura da comunica\u00e7\u00e3o foi acordada, as duas equipes podem trabalhar independentemente.<\/p>\n\n<div class=\"flow\">\n    <div class=\"flow-box\">\ud83d\udcc4<br>Contrato da API<\/div>\n    <div class=\"flow-arrow\">\u2192<\/div>\n    <div class=\"flow-box\">\ud83d\udda5\ufe0f<br>Front-end<\/div>\n    <div class=\"flow-arrow\">+<\/div>\n    <div class=\"flow-box\">\u2699\ufe0f<br>Back-end<\/div>\n<\/div>\n\n<p>O Front-end pode trabalhar com um mock ou JSON Server que reproduza exatamente o contrato, enquanto o Back-end implementa a API real.<\/p>\n\n<div class=\"highlight-box\">\n    <p><strong>Se ambos respeitaram o mesmo contrato, a integra\u00e7\u00e3o tende a ser simples.<\/strong><\/p>\n<\/div>\n\n<h2>O contrato tamb\u00e9m separa responsabilidades<\/h2>\n\n<div class=\"responsibility-grid\">\n    <div class=\"responsibility-card\"><h3>Front-end<\/h3><p>Cria a interface, captura a\u00e7\u00f5es do usu\u00e1rio, envia requisi\u00e7\u00f5es e apresenta os dados recebidos.<\/p><\/div>\n    <div class=\"responsibility-card\"><h3>Back-end<\/h3><p>Recebe requisi\u00e7\u00f5es, aplica regras de neg\u00f3cio, valida informa\u00e7\u00f5es, acessa a persist\u00eancia e devolve respostas.<\/p><\/div>\n    <div class=\"responsibility-card\"><h3>Contrato<\/h3><p>Define a fronteira: m\u00e9todo, rota, dados, respostas e regras da comunica\u00e7\u00e3o.<\/p><\/div>\n<\/div>\n\n<h2>O contrato n\u00e3o obriga Front-end e Back-end a usarem a mesma tecnologia<\/h2>\n\n<p>O Front-end pode utilizar React, Vue, Angular ou JavaScript, enquanto a API pode ser constru\u00edda com Node.js\/Express, Java\/Spring, C#\/ASP.NET, Python\/FastAPI ou PHP\/Laravel.<\/p>\n\n<div class=\"contract-center\">\n    <span class=\"big\">O Front-end n\u00e3o precisa conhecer a implementa\u00e7\u00e3o do Back-end.<\/span>\n    Ele precisa conhecer o <strong>contrato<\/strong>.\n<\/div>\n\n<h2>O contrato tamb\u00e9m deve prever as respostas HTTP<\/h2>\n\n<div class=\"table-wrap\">\n<table>\n<thead><tr><th>Status<\/th><th>Significado<\/th><th>Exemplo<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><strong>200 OK<\/strong><\/td><td>Opera\u00e7\u00e3o realizada com sucesso.<\/td><td>Listagem ou atualiza\u00e7\u00e3o.<\/td><\/tr>\n<tr><td><strong>201 Created<\/strong><\/td><td>Novo recurso criado.<\/td><td>Cadastro de produto.<\/td><\/tr>\n<tr><td><strong>400 Bad Request<\/strong><\/td><td>Dados inv\u00e1lidos.<\/td><td>Pre\u00e7o ausente ou inv\u00e1lido.<\/td><\/tr>\n<tr><td><strong>404 Not Found<\/strong><\/td><td>Recurso n\u00e3o encontrado.<\/td><td>Produto inexistente.<\/td><\/tr>\n<tr><td><strong>500 Internal Server Error<\/strong><\/td><td>Erro inesperado no servidor.<\/td><td>Falha durante o processamento.<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h2>Como documentar um endpoint de forma simples?<\/h2>\n\n<pre><code>FUNCIONALIDADE\nCadastrar produto\n\nM\u00c9TODO\nPOST\n\nENDPOINT\n\/api\/produtos\n\nENTRADA\n{\n  \"nome\": \"string\",\n  \"preco\": \"number\",\n  \"estoque\": \"number\"\n}\n\nSUCESSO\n201 Created\n\nERROS POSS\u00cdVEIS\n400 - Dados inv\u00e1lidos\n500 - Erro interno\n\nREGRAS\nO nome \u00e9 obrigat\u00f3rio.\nO pre\u00e7o deve ser maior que zero.<\/code><\/pre>\n\n<h2>Checklist: o contrato est\u00e1 realmente pronto?<\/h2>\n\n<div class=\"checklist\">\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O m\u00e9todo HTTP est\u00e1 definido?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>A URL do endpoint est\u00e1 definida?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Est\u00e1 claro o que o Front-end envia?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Est\u00e1 claro o que o Back-end responde?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Os nomes e tipos dos campos est\u00e3o definidos?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>Os c\u00f3digos HTTP foram especificados?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>As principais regras de neg\u00f3cio est\u00e3o claras?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O Front-end consegue desenvolver sem perguntar ao Back-end qual ser\u00e1 a resposta?<\/div><\/div>\n    <div class=\"checklist-item\"><span class=\"check\">\u2713<\/span><div>O Back-end consegue implementar sem perguntar ao Front-end quais campos dever\u00e1 devolver?<\/div><\/div>\n<\/div>\n\n<div class=\"final-box\">\n    <h2>Contrato de API \u00e9 planejamento antes da programa\u00e7\u00e3o<\/h2>\n    <p>Definir um contrato antes da implementa\u00e7\u00e3o evita que Front-end e Back-end tomem decis\u00f5es incompat\u00edveis durante o desenvolvimento.<\/p>\n    <p>O objetivo n\u00e3o \u00e9 criar burocracia. \u00c9 <strong>diminuir retrabalho, reduzir depend\u00eancias e permitir que diferentes partes do sistema sejam constru\u00eddas em paralelo.<\/strong><\/p>\n    <p>Quando m\u00e9todo, endpoint, entrada, sa\u00edda, c\u00f3digos HTTP e regras est\u00e3o previamente definidos, cada equipe sabe exatamente o que precisa entregar.<\/p>\n<\/div>\n\n<\/article>\n<script>\n(function () {\n    function parseRGB(value) {\n        var m = value && value.match(\/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)\/i);\n        return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;\n    }\n\n    function visibleBackground(el) {\n        var node = el;\n        while (node && node !== document.documentElement) {\n            var style = window.getComputedStyle(node);\n            var bg = style.backgroundColor;\n            var rgb = parseRGB(bg);\n\n            if (rgb && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n                return rgb;\n            }\n            node = node.parentElement;\n        }\n\n        var bodyBg = parseRGB(window.getComputedStyle(document.body).backgroundColor);\n        return bodyBg || [255,255,255];\n    }\n\n    function luminance(rgb) {\n        function channel(c) {\n            c = c \/ 255;\n            return c <= 0.03928 ? c \/ 12.92 : Math.pow((c + 0.055) \/ 1.055, 2.4);\n        }\n        return 0.2126 * channel(rgb[0]) +\n               0.7152 * channel(rgb[1]) +\n               0.0722 * channel(rgb[2]);\n    }\n\n    function applyTheme() {\n        document.querySelectorAll('.api-contract-article').forEach(function(article) {\n            var rgb = visibleBackground(article.parentElement || article);\n            article.classList.toggle('api-dark', luminance(rgb) < 0.30);\n        });\n    }\n\n    applyTheme();\n\n    \/* Reavalia quando o usu\u00e1rio muda o tema do site *\/\n    new MutationObserver(function () {\n        window.requestAnimationFrame(applyTheme);\n    }).observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['class', 'style', 'data-theme', 'data-mode']\n    });\n\n    if (document.body) {\n        new MutationObserver(function () {\n            window.requestAnimationFrame(applyTheme);\n        }).observe(document.body, {\n            attributes: true,\n            attributeFilter: ['class', 'style', 'data-theme', 'data-mode']\n        });\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Front-end + Back-end + API REST Contrato entre Front-end e Back-end: o que \u00e9 e por que ele \u00e9 t\u00e3o importante? Entenda como definir um contrato de API permite que Front-end e Back-end sejam desenvolvidos separadamente e se integrem sem surpresas no final do projeto. Em um projeto moderno, \u00e9 comum termos uma aplica\u00e7\u00e3o dividida em Front-end, Back-end e Banco de Dados. O Front-end apresenta as informa\u00e7\u00f5es ao usu\u00e1rio. O Back-end processa regras de neg\u00f3cio, valida dados e conversa com o banco. Para essas partes funcionarem juntas, elas precisam falar exatamente a mesma l\u00edngua. \u00c9 justamente a\u00ed que entra o contrato de API. Ele define antecipadamente como o Front-end far\u00e1 uma solicita\u00e7\u00e3o e qual resposta dever\u00e1 ser fornecida pelo Back-end. Uma analogia simples: o gar\u00e7om e o cozinheiro Imagine uma lanchonete. O cliente faz o pedido para o gar\u00e7om e o gar\u00e7om precisa transmitir esse pedido para a cozinha. \ud83e\uddd1\u200d\ud83d\udcbb Front-end \u00c9 como o gar\u00e7om. Recebe aquilo que o usu\u00e1rio deseja e envia o pedido para quem ir\u00e1 process\u00e1-lo. \u2192 \u2699\ufe0f Back-end \u00c9 como o cozinheiro. Recebe o pedido, processa as informa\u00e7\u00f5es e devolve um resultado. \ud83d\udccb O contrato da API \u00e9 o bloco de pedidos. Front-end e Back-end precisam concordar antecipadamente sobre o formato exato da comunica\u00e7\u00e3o. Imagine que o Front-end envie: { &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221; } mas o Back-end tenha sido desenvolvido esperando: { &#8220;descricaoProduto&#8221;: &#8220;Teclado Mec\u00e2nico&#8221; } Sem contrato, cada lado pode desenvolver uma solu\u00e7\u00e3o correta isoladamente e, mesmo assim, a integra\u00e7\u00e3o falhar. O que \u00e9 um contrato de API? Um contrato de API \u00e9 uma especifica\u00e7\u00e3o que determina como diferentes partes de um sistema ir\u00e3o se comunicar. Ele funciona como um acordo t\u00e9cnico entre quem desenvolve o Front-end e quem desenvolve o Back-end. qual endpoint dever\u00e1 ser chamado; qual m\u00e9todo HTTP dever\u00e1 ser utilizado; quais dados o Front-end precisa enviar; qual ser\u00e1 o formato desses dados; qual resposta o Back-end dever\u00e1 retornar; qual c\u00f3digo HTTP indicar\u00e1 sucesso; quais situa\u00e7\u00f5es de erro podem ocorrer; quais regras precisam ser respeitadas. Contrato n\u00e3o \u00e9 implementa\u00e7\u00e3o. O contrato define como a comunica\u00e7\u00e3o dever\u00e1 acontecer. Cada equipe continua livre para implementar internamente sua parte, desde que respeite aquilo que foi combinado. O que deve existir em um bom contrato? 1. M\u00e9todo HTTPDefine a opera\u00e7\u00e3o: GET, POST, PUT, PATCH ou DELETE. 2. EndpointDetermina a URL utilizada para acessar determinado recurso. 3. Dados de entradaDefine par\u00e2metros, corpo da requisi\u00e7\u00e3o e estrutura esperada. 4. Dados de sa\u00eddaDefine exatamente o JSON que ser\u00e1 devolvido. 5. Status HTTPInforma como sucesso e erros ser\u00e3o representados. 6. RegrasDefine comportamentos que precisam ser conhecidos pelos dois lados. Exemplo pr\u00e1tico: contrato de um CRUD de produtos Vamos considerar uma loja de eletr\u00f4nicos. Antes do desenvolvimento, Front-end e Back-end concordam que o recurso ser\u00e1 chamado de produtos e utilizar\u00e1 a rota \/api\/produtos. POST 1. Cadastrar produto \u2014 CREATE POST \/api\/produtos O usu\u00e1rio preenche o formul\u00e1rio no Front-end. O Front envia os dados e o Back-end realiza o cadastro. Front-end envia { &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 150.00, &#8220;estoque&#8221;: 10 } Back-end responde \u2014 201 Created { &#8220;id&#8221;: 1, &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 150.00, &#8220;estoque&#8221;: 10, &#8220;status&#8221;: &#8220;Cadastrado com sucesso&#8221; } GET 2. Listar produtos \u2014 READ GET \/api\/produtos Front-end envia GET \/api\/produtos Nenhum corpo \u00e9 necess\u00e1rio. Back-end responde \u2014 200 OK [ { &#8220;id&#8221;: 1, &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 150.00 }, { &#8220;id&#8221;: 2, &#8220;nome&#8221;: &#8220;Mouse Gamer&#8221;, &#8220;preco&#8221;: 80.00 } ] PUT 3. Atualizar produto \u2014 UPDATE PUT \/api\/produtos\/1 Front-end envia { &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 130.00, &#8220;estoque&#8221;: 8 } Back-end responde \u2014 200 OK { &#8220;id&#8221;: 1, &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 130.00, &#8220;estoque&#8221;: 8, &#8220;mensagem&#8221;: &#8220;Atualizado com sucesso&#8221; } DELETE 4. Excluir produto \u2014 DELETE DELETE \/api\/produtos\/1 Front-end envia DELETE \/api\/produtos\/1 Nenhum corpo \u00e9 necess\u00e1rio. Back-end responde \u2014 200 OK { &#8220;sucesso&#8221;: true, &#8220;mensagem&#8221;: &#8220;Produto 1 removido com sucesso&#8221; } Front-end e Back-end n\u00e3o precisam ser desenvolvidos juntos Depois que a estrutura da comunica\u00e7\u00e3o foi acordada, as duas equipes podem trabalhar independentemente. \ud83d\udcc4Contrato da API \u2192 \ud83d\udda5\ufe0fFront-end + \u2699\ufe0fBack-end O Front-end pode trabalhar com um mock ou JSON Server que reproduza exatamente o contrato, enquanto o Back-end implementa a API real. Se ambos respeitaram o mesmo contrato, a integra\u00e7\u00e3o tende a ser simples. O contrato tamb\u00e9m separa responsabilidades Front-end Cria a interface, captura a\u00e7\u00f5es do usu\u00e1rio, envia requisi\u00e7\u00f5es e apresenta os dados recebidos. Back-end Recebe requisi\u00e7\u00f5es, aplica regras de neg\u00f3cio, valida informa\u00e7\u00f5es, acessa a persist\u00eancia e devolve respostas. Contrato Define a fronteira: m\u00e9todo, rota, dados, respostas e regras da comunica\u00e7\u00e3o. O contrato n\u00e3o obriga Front-end e Back-end a usarem a mesma tecnologia O Front-end pode utilizar React, Vue, Angular ou JavaScript, enquanto a API pode ser constru\u00edda com Node.js\/Express, Java\/Spring, C#\/ASP.NET, Python\/FastAPI ou PHP\/Laravel. O Front-end n\u00e3o precisa conhecer a implementa\u00e7\u00e3o do Back-end. Ele precisa conhecer o contrato. O contrato tamb\u00e9m deve prever as respostas HTTP Status Significado Exemplo 200 OK Opera\u00e7\u00e3o realizada com sucesso. Listagem ou atualiza\u00e7\u00e3o. 201 Created Novo recurso criado. Cadastro de produto. 400 Bad Request Dados inv\u00e1lidos. Pre\u00e7o ausente ou inv\u00e1lido. 404 Not Found Recurso n\u00e3o encontrado. Produto inexistente. 500 Internal Server Error Erro inesperado no servidor. Falha durante o processamento. Como documentar um endpoint de forma simples? FUNCIONALIDADE Cadastrar produto M\u00c9TODO POST ENDPOINT \/api\/produtos ENTRADA { &#8220;nome&#8221;: &#8220;string&#8221;, &#8220;preco&#8221;: &#8220;number&#8221;, &#8220;estoque&#8221;: &#8220;number&#8221; } SUCESSO 201 Created ERROS POSS\u00cdVEIS 400 &#8211; Dados inv\u00e1lidos 500 &#8211; Erro interno REGRAS O nome \u00e9 obrigat\u00f3rio. O pre\u00e7o deve ser maior que zero. Checklist: o contrato est\u00e1 realmente pronto? \u2713 O m\u00e9todo HTTP est\u00e1 definido? \u2713 A URL do endpoint est\u00e1 definida? \u2713 Est\u00e1 claro o que o Front-end envia? \u2713 Est\u00e1 claro o que o Back-end responde? \u2713 Os nomes e tipos dos campos est\u00e3o definidos? \u2713 Os c\u00f3digos HTTP foram especificados? \u2713 As principais regras de neg\u00f3cio est\u00e3o claras? \u2713 O Front-end consegue desenvolver sem perguntar ao Back-end qual ser\u00e1 a resposta? \u2713 O Back-end consegue implementar sem perguntar ao Front-end quais campos dever\u00e1 devolver? Contrato de API \u00e9 planejamento antes da programa\u00e7\u00e3o Definir um contrato antes da implementa\u00e7\u00e3o evita que Front-end e Back-end tomem decis\u00f5es incompat\u00edveis durante o desenvolvimento. O objetivo n\u00e3o \u00e9 criar burocracia. \u00c9 diminuir retrabalho, reduzir depend\u00eancias e permitir que diferentes partes do sistema sejam constru\u00eddas em paralelo. Quando m\u00e9todo, endpoint, entrada, sa\u00edda, c\u00f3digos HTTP e regras est\u00e3o previamente definidos, cada equipe sabe exatamente o que precisa entregar. Front-end + Back-end + API REST Contrato entre Front-end e Back-end: o que \u00e9 e por que ele \u00e9 t\u00e3o importante? Entenda como definir um contrato de API permite que Front-end e Back-end sejam desenvolvidos separadamente e se integrem sem surpresas no final do projeto. Em um projeto moderno, \u00e9 comum termos uma aplica\u00e7\u00e3o dividida em Front-end, Back-end e Banco de Dados. O Front-end apresenta as informa\u00e7\u00f5es ao usu\u00e1rio. O Back-end processa regras de neg\u00f3cio, valida dados e conversa com o banco. Para essas partes funcionarem juntas, elas precisam falar exatamente a mesma l\u00edngua. \u00c9 justamente a\u00ed que entra o contrato de API. Ele define antecipadamente como o Front-end far\u00e1 uma solicita\u00e7\u00e3o e qual resposta dever\u00e1 ser fornecida pelo Back-end. Uma analogia simples: o gar\u00e7om e o cozinheiro Imagine uma lanchonete. O cliente faz o pedido para o gar\u00e7om e o gar\u00e7om precisa transmitir esse pedido para a cozinha. \ud83e\uddd1\u200d\ud83d\udcbb Front-end \u00c9 como o gar\u00e7om. Recebe aquilo que o usu\u00e1rio deseja e envia o pedido para quem ir\u00e1 process\u00e1-lo. \u2192 \u2699\ufe0f Back-end \u00c9 como o cozinheiro. Recebe o pedido, processa as informa\u00e7\u00f5es e devolve um resultado. \ud83d\udccb O contrato da API \u00e9 o bloco de pedidos. Front-end e Back-end precisam concordar antecipadamente sobre o formato exato da comunica\u00e7\u00e3o. Imagine que o Front-end envie: { &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221; } mas o Back-end tenha sido desenvolvido esperando: { &#8220;descricaoProduto&#8221;: &#8220;Teclado Mec\u00e2nico&#8221; } Sem contrato, cada lado pode desenvolver uma solu\u00e7\u00e3o correta isoladamente e, mesmo assim, a integra\u00e7\u00e3o falhar. O que \u00e9 um contrato de API? Um contrato de API \u00e9 uma especifica\u00e7\u00e3o que determina como diferentes partes de um sistema ir\u00e3o se comunicar. Ele funciona como um acordo t\u00e9cnico entre quem desenvolve o Front-end e quem desenvolve o Back-end. qual endpoint dever\u00e1 ser chamado; qual m\u00e9todo HTTP dever\u00e1 ser utilizado; quais dados o Front-end precisa enviar; qual ser\u00e1 o formato desses dados; qual resposta o Back-end dever\u00e1 retornar; qual c\u00f3digo HTTP indicar\u00e1 sucesso; quais situa\u00e7\u00f5es de erro podem ocorrer; quais regras precisam ser respeitadas. Contrato n\u00e3o \u00e9 implementa\u00e7\u00e3o. O contrato define como a comunica\u00e7\u00e3o dever\u00e1 acontecer. Cada equipe continua livre para implementar internamente sua parte, desde que respeite aquilo que foi combinado. O que deve existir em um bom contrato? 1. M\u00e9todo HTTPDefine a opera\u00e7\u00e3o: GET, POST, PUT, PATCH ou DELETE. 2. EndpointDetermina a URL utilizada para acessar determinado recurso. 3. Dados de entradaDefine par\u00e2metros, corpo da requisi\u00e7\u00e3o e estrutura esperada. 4. Dados de sa\u00eddaDefine exatamente o JSON que ser\u00e1 devolvido. 5. Status HTTPInforma como sucesso e erros ser\u00e3o representados. 6. RegrasDefine comportamentos que precisam ser conhecidos pelos dois lados. Exemplo pr\u00e1tico: contrato de um CRUD de produtos Vamos considerar uma loja de eletr\u00f4nicos. Antes do desenvolvimento, Front-end e Back-end concordam que o recurso ser\u00e1 chamado de produtos e utilizar\u00e1 a rota \/api\/produtos. POST 1. Cadastrar produto \u2014 CREATE POST \/api\/produtos O usu\u00e1rio preenche o formul\u00e1rio no Front-end. O Front envia os dados e o Back-end realiza o cadastro. Front-end envia { &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 150.00, &#8220;estoque&#8221;: 10 } Back-end responde \u2014 201 Created { &#8220;id&#8221;: 1, &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 150.00, &#8220;estoque&#8221;: 10, &#8220;status&#8221;: &#8220;Cadastrado com sucesso&#8221; } GET 2. Listar produtos \u2014 READ GET \/api\/produtos Front-end envia GET \/api\/produtos Nenhum corpo \u00e9 necess\u00e1rio. Back-end responde \u2014 200 OK [ { &#8220;id&#8221;: 1, &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 150.00 }, { &#8220;id&#8221;: 2, &#8220;nome&#8221;: &#8220;Mouse Gamer&#8221;, &#8220;preco&#8221;: 80.00 } ] PUT 3. Atualizar produto \u2014 UPDATE PUT \/api\/produtos\/1 Front-end envia { &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 130.00, &#8220;estoque&#8221;: 8 } Back-end responde \u2014 200 OK { &#8220;id&#8221;: 1, &#8220;nome&#8221;: &#8220;Teclado Mec\u00e2nico&#8221;, &#8220;preco&#8221;: 130.00, &#8220;estoque&#8221;: 8, &#8220;mensagem&#8221;: &#8220;Atualizado com sucesso&#8221; } DELETE 4. Excluir produto \u2014 DELETE DELETE \/api\/produtos\/1 Front-end envia DELETE \/api\/produtos\/1 Nenhum corpo \u00e9 necess\u00e1rio. Back-end responde \u2014 200 OK { &#8220;sucesso&#8221;: true, &#8220;mensagem&#8221;: &#8220;Produto 1 removido com sucesso&#8221; } Front-end e Back-end n\u00e3o precisam ser desenvolvidos juntos Depois que a estrutura da comunica\u00e7\u00e3o foi acordada, as duas equipes podem trabalhar independentemente. \ud83d\udcc4Contrato da API \u2192 \ud83d\udda5\ufe0fFront-end + \u2699\ufe0fBack-end O Front-end pode trabalhar com um mock ou JSON Server que reproduza exatamente o contrato, enquanto o Back-end implementa a API real. Se ambos respeitaram o mesmo contrato, a integra\u00e7\u00e3o tende a ser simples. O contrato tamb\u00e9m separa responsabilidades Front-end Cria a interface, captura a\u00e7\u00f5es do usu\u00e1rio, envia requisi\u00e7\u00f5es e apresenta os dados recebidos. Back-end Recebe requisi\u00e7\u00f5es, aplica regras de neg\u00f3cio, valida informa\u00e7\u00f5es, acessa a persist\u00eancia e devolve respostas. Contrato Define a fronteira: m\u00e9todo, rota, dados, respostas e regras da comunica\u00e7\u00e3o. O contrato n\u00e3o obriga Front-end e Back-end a usarem a mesma tecnologia O Front-end pode utilizar React, Vue, Angular ou JavaScript, enquanto a API pode ser constru\u00edda com Node.js\/Express, Java\/Spring, C#\/ASP.NET, Python\/FastAPI ou PHP\/Laravel. O Front-end n\u00e3o precisa conhecer a implementa\u00e7\u00e3o do Back-end. Ele precisa conhecer o contrato. O contrato tamb\u00e9m deve prever as respostas HTTP Status Significado Exemplo 200 OK Opera\u00e7\u00e3o realizada com sucesso. Listagem ou atualiza\u00e7\u00e3o. 201 Created Novo recurso criado. Cadastro de produto. 400 Bad Request Dados inv\u00e1lidos. Pre\u00e7o ausente ou inv\u00e1lido. 404 Not Found Recurso n\u00e3o encontrado. Produto inexistente. 500 Internal Server Error Erro inesperado no servidor. Falha durante o processamento. Como documentar um endpoint de forma simples? FUNCIONALIDADE Cadastrar produto M\u00c9TODO POST ENDPOINT \/api\/produtos ENTRADA { &#8220;nome&#8221;: &#8220;string&#8221;, &#8220;preco&#8221;: &#8220;number&#8221;, &#8220;estoque&#8221;: &#8220;number&#8221; } SUCESSO 201 Created ERROS POSS\u00cdVEIS 400 &#8211; Dados inv\u00e1lidos 500 &#8211; Erro interno REGRAS O nome \u00e9 obrigat\u00f3rio. O pre\u00e7o deve ser maior que zero. Checklist: o contrato est\u00e1 realmente pronto? \u2713 O m\u00e9todo HTTP est\u00e1 definido? \u2713 A URL do endpoint est\u00e1 definida? \u2713 Est\u00e1 claro o que o Front-end envia? \u2713 Est\u00e1 claro o que o Back-end responde? \u2713 Os nomes e tipos dos campos est\u00e3o definidos? \u2713 Os c\u00f3digos HTTP foram especificados? \u2713 As principais regras de neg\u00f3cio est\u00e3o claras? \u2713 O Front-end consegue desenvolver sem perguntar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2385,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1,21,22],"tags":[],"class_list":["post-2365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-javascript","category-react"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2365","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=2365"}],"version-history":[{"count":17,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2365\/revisions"}],"predecessor-version":[{"id":2388,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2365\/revisions\/2388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2385"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}