{"id":2221,"date":"2026-07-23T14:51:19","date_gmt":"2026-07-23T17:51:19","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2221"},"modified":"2026-07-23T14:51:25","modified_gmt":"2026-07-23T17:51:25","slug":"metodo-post-no-express-js-como-enviar-json-para-uma-api-com-node-js","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2221","title":{"rendered":"M\u00e9todo POST no Express.js | Como Enviar JSON para uma API com Node.js"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 come\u00e7ando a estudar <strong>Back-end com JavaScript<\/strong>, provavelmente j\u00e1 entendeu como uma rota <strong>GET<\/strong> funciona. Mas existe uma d\u00favida que surge logo em seguida:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Como um formul\u00e1rio HTML envia informa\u00e7\u00f5es para o servidor?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea cria uma tela de cadastro, faz login em um sistema ou registra um novo produto, o navegador precisa enviar esses dados para uma API. Esse processo acontece utilizando o <strong>m\u00e9todo POST<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula vamos construir esse processo passo a passo utilizando <strong>Node.js<\/strong>, <strong>Express.js<\/strong> e <strong>JSON<\/strong>, entendendo n\u00e3o apenas como escrever o c\u00f3digo, mas principalmente <strong>por que cada etapa \u00e9 necess\u00e1ria<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao final do projeto voc\u00ea compreender\u00e1 como o Front-end e o Back-end se comunicam e estar\u00e1 preparado para evoluir para opera\u00e7\u00f5es como <strong>PUT<\/strong>, <strong>DELETE<\/strong> e, posteriormente, para um CRUD completo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Assista \u00e0 aula<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfac Live completa<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"M\u00e9todo POST no Express.js | Como Enviar JSON para uma API com Node.js\" width=\"960\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/Ck6jeo-aKPU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfac Vers\u00e3o editada<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"M\u00e9todo POST no Node.js e Express | Como Enviar JSON para uma API\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/lE4LKaN2evk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 o m\u00e9todo POST?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O protocolo HTTP possui v\u00e1rios m\u00e9todos, chamados tamb\u00e9m de <strong>verbos HTTP<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada um possui uma responsabilidade diferente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os principais s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GET \u2192 Buscar informa\u00e7\u00f5es<\/li>\n\n\n\n<li>POST \u2192 Enviar informa\u00e7\u00f5es<\/li>\n\n\n\n<li>PUT \u2192 Atualizar informa\u00e7\u00f5es<\/li>\n\n\n\n<li>DELETE \u2192 Remover informa\u00e7\u00f5es<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula nosso foco \u00e9 o <strong>POST<\/strong>, respons\u00e1vel por enviar dados do cliente para o servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que um usu\u00e1rio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cria uma conta;<\/li>\n\n\n\n<li>realiza um cadastro;<\/li>\n\n\n\n<li>faz login;<\/li>\n\n\n\n<li>envia um formul\u00e1rio;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">o navegador normalmente utiliza uma requisi\u00e7\u00e3o <strong>POST<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Relembrando o m\u00e9todo GET<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de iniciar o POST, fazemos uma r\u00e1pida revis\u00e3o do <strong>GET<\/strong>, respons\u00e1vel por buscar informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Durante essa revis\u00e3o mostramos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cria\u00e7\u00e3o de rotas;<\/li>\n\n\n\n<li>retorno de JSON;<\/li>\n\n\n\n<li>c\u00f3digos HTTP 200;<\/li>\n\n\n\n<li>utiliza\u00e7\u00e3o de Query Parameters.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Essa revis\u00e3o \u00e9 importante porque permite compreender claramente a diferen\u00e7a entre buscar informa\u00e7\u00f5es e envi\u00e1-las.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Query Parameters<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m mostramos como funciona o envio de informa\u00e7\u00f5es diretamente pela URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/login?email=aluno@email.com&amp;senha=123456<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse recurso \u00e9 chamado de <strong>Query String<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Embora seja bastante utilizado para filtros, pesquisas e pagina\u00e7\u00e3o, <strong>n\u00e3o \u00e9 recomendado para informa\u00e7\u00f5es sens\u00edveis<\/strong>, pois os dados ficam vis\u00edveis na pr\u00f3pria URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa compara\u00e7\u00e3o ajuda a entender por que formul\u00e1rios normalmente utilizam o m\u00e9todo POST.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando a primeira rota POST<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois da revis\u00e3o iniciamos a constru\u00e7\u00e3o da primeira rota POST utilizando Express.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estrutura b\u00e1sica:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.post(\"\/alunos\", (req, res) =&gt; {\n\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Perceba que a estrutura \u00e9 praticamente igual ao m\u00e9todo GET.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A grande diferen\u00e7a est\u00e1 no verbo utilizado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora a API passa a receber informa\u00e7\u00f5es enviadas pelo cliente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Enviando JSON para a API<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Para testar nossa aplica\u00e7\u00e3o utilizamos o <strong>Thunder Client<\/strong>, uma extens\u00e3o do Visual Studio Code muito utilizada para testar APIs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Criamos uma requisi\u00e7\u00e3o contendo um objeto JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"nome\": \"Marcos\",\n    \"curso\": \"Desenvolvimento de Sistemas\"\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse objeto ser\u00e1 enviado para o servidor exatamente como aconteceria em um formul\u00e1rio HTML.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Por que utilizar express.json()?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Este \u00e9 um dos pontos mais importantes da aula.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Muitos iniciantes simplesmente copiam:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.use(express.json());<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">sem saber o motivo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na pr\u00e1tica, esse Middleware informa ao Express que ele dever\u00e1 interpretar requisi\u00e7\u00f5es enviadas em formato JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sem essa configura\u00e7\u00e3o, o servidor recebe a requisi\u00e7\u00e3o, por\u00e9m <strong>n\u00e3o consegue interpretar corretamente o corpo da mensagem<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente por isso que esse Middleware aparece praticamente em todas as APIs desenvolvidas com Express.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Entendendo o req.body<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de configurar o Middleware, passamos a acessar os dados enviados pelo cliente utilizando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>req.body<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 nesse objeto que ficam armazenadas todas as informa\u00e7\u00f5es enviadas pelo Front-end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const dados = req.body;\n\nconsole.log(dados);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora a aplica\u00e7\u00e3o consegue acessar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nome;<\/li>\n\n\n\n<li>curso;<\/li>\n\n\n\n<li>e-mail;<\/li>\n\n\n\n<li>senha;<\/li>\n\n\n\n<li>qualquer outro dado enviado pelo cliente.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Diferen\u00e7a entre req.params, req.query, req.headers e req.body<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Durante a aula mostramos uma das maiores d\u00favidas de quem est\u00e1 aprendendo Express.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada propriedade possui uma finalidade diferente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">req.params<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Captura par\u00e2metros presentes na rota.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/alunos\/15<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">req.query<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Captura informa\u00e7\u00f5es enviadas pela URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>?pagina=2<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">req.headers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cont\u00e9m informa\u00e7\u00f5es sobre a requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entre elas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>navegador;<\/li>\n\n\n\n<li>host;<\/li>\n\n\n\n<li>Content-Type;<\/li>\n\n\n\n<li>autoriza\u00e7\u00e3o;<\/li>\n\n\n\n<li>cookies.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">req.body<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Recebe os dados enviados no corpo da requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 onde normalmente chegam os dados enviados por formul\u00e1rios HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entender essa diferen\u00e7a evita uma enorme quantidade de erros durante o desenvolvimento de APIs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O papel do Content-Type<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Outro conceito muito importante apresentado nesta aula \u00e9 o cabe\u00e7alho:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Type: application\/json<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse cabe\u00e7alho informa ao servidor qual \u00e9 o formato dos dados enviados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que algu\u00e9m lhe entregue uma caixa fechada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea sabe que existe alguma coisa dentro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas n\u00e3o sabe se \u00e9:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>um documento;<\/li>\n\n\n\n<li>uma imagem;<\/li>\n\n\n\n<li>um v\u00eddeo;<\/li>\n\n\n\n<li>um arquivo JSON.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>Content-Type<\/strong> resolve exatamente esse problema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele informa ao servidor qual formato dever\u00e1 ser interpretado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No Front-end, esse cabe\u00e7alho normalmente \u00e9 enviado utilizando a <strong>Fetch API<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando um objeto com os dados recebidos<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Ap\u00f3s recebermos o JSON, criamos um novo objeto JavaScript utilizando as informa\u00e7\u00f5es enviadas pelo cliente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m mostramos uma forma mais moderna de escrever objetos utilizando a sintaxe reduzida do JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse recurso deixa o c\u00f3digo mais limpo e mais utilizado em aplica\u00e7\u00f5es profissionais.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Status HTTP 201 Created<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Ao finalizar a requisi\u00e7\u00e3o, retornamos o c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>201 Created<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse c\u00f3digo possui um significado espec\u00edfico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele informa que um novo recurso foi criado com sucesso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na pr\u00e1tica:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cadastro de usu\u00e1rio.<\/li>\n\n\n\n<li>Cadastro de produto.<\/li>\n\n\n\n<li>Cadastro de aluno.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Todos podem retornar <strong>201 Created<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizar corretamente os c\u00f3digos HTTP torna sua API muito mais organizada e profissional.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tecnologias utilizadas<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o desenvolvimento utilizamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript<\/li>\n\n\n\n<li>Node.js<\/li>\n\n\n\n<li>Express.js<\/li>\n\n\n\n<li>Thunder Client<\/li>\n\n\n\n<li>JSON<\/li>\n\n\n\n<li>HTTP<\/li>\n\n\n\n<li>API REST<\/li>\n\n\n\n<li>Middleware<\/li>\n\n\n\n<li>req.body<\/li>\n\n\n\n<li>req.headers<\/li>\n\n\n\n<li>req.params<\/li>\n\n\n\n<li>req.query<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea aprendeu<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Ao concluir esta aula voc\u00ea ser\u00e1 capaz de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>compreender quando utilizar GET e POST;<\/li>\n\n\n\n<li>criar rotas POST no Express;<\/li>\n\n\n\n<li>enviar dados utilizando JSON;<\/li>\n\n\n\n<li>configurar o express.json();<\/li>\n\n\n\n<li>acessar informa\u00e7\u00f5es com req.body;<\/li>\n\n\n\n<li>entender a fun\u00e7\u00e3o dos Headers HTTP;<\/li>\n\n\n\n<li>utilizar corretamente o Content-Type;<\/li>\n\n\n\n<li>diferenciar req.params, req.query, req.headers e req.body;<\/li>\n\n\n\n<li>criar objetos a partir dos dados recebidos;<\/li>\n\n\n\n<li>retornar corretamente o status HTTP 201.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Pr\u00f3ximos passos<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Esta aula representa apenas o come\u00e7o do desenvolvimento de APIs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nas pr\u00f3ximas aulas da s\u00e9rie voc\u00ea aprender\u00e1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>m\u00e9todo PUT;<\/li>\n\n\n\n<li>m\u00e9todo DELETE;<\/li>\n\n\n\n<li>CRUD completo;<\/li>\n\n\n\n<li>persist\u00eancia de dados em arquivos JSON;<\/li>\n\n\n\n<li>integra\u00e7\u00e3o entre Front-end e Back-end;<\/li>\n\n\n\n<li>banco de dados;<\/li>\n\n\n\n<li>APIs completas utilizando Node.js e Express.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Cada nova aula adicionar\u00e1 uma nova pe\u00e7a ao funcionamento de uma API real, permitindo que voc\u00ea compreenda todo o processo utilizado em aplica\u00e7\u00f5es profissionais.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conclus\u00e3o<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Aprender o m\u00e9todo <strong>POST<\/strong> vai muito al\u00e9m de decorar um trecho de c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O verdadeiro objetivo \u00e9 compreender como as informa\u00e7\u00f5es saem do Front-end, atravessam uma requisi\u00e7\u00e3o HTTP e chegam ao Back-end para serem processadas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea entende esse fluxo completo, conceitos como <strong>Middleware<\/strong>, <strong>Headers<\/strong>, <strong>JSON<\/strong>, <strong>req.body<\/strong> e <strong>Status HTTP<\/strong> deixam de ser apenas comandos e passam a fazer parte de um processo l\u00f3gico que ser\u00e1 utilizado em praticamente qualquer aplica\u00e7\u00e3o moderna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa \u00e9 justamente a proposta desta s\u00e9rie: ensinar o funcionamento do desenvolvimento Back-end de forma pr\u00e1tica, conectando teoria e implementa\u00e7\u00e3o para que voc\u00ea construa uma base s\u00f3lida antes de avan\u00e7ar para projetos maiores.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea est\u00e1 come\u00e7ando a estudar Back-end com JavaScript, provavelmente j\u00e1 entendeu como uma rota GET funciona. Mas existe uma d\u00favida que surge logo em seguida: Como um formul\u00e1rio HTML envia informa\u00e7\u00f5es para o servidor? Quando voc\u00ea cria uma tela de cadastro, faz login em um sistema ou registra um novo produto, o navegador precisa enviar esses dados para uma API. Esse processo acontece utilizando o m\u00e9todo POST. Nesta aula vamos construir esse processo passo a passo utilizando Node.js, Express.js e JSON, entendendo n\u00e3o apenas como escrever o c\u00f3digo, mas principalmente por que cada etapa \u00e9 necess\u00e1ria. Ao final do projeto voc\u00ea compreender\u00e1 como o Front-end e o Back-end se comunicam e estar\u00e1 preparado para evoluir para opera\u00e7\u00f5es como PUT, DELETE e, posteriormente, para um CRUD completo. Assista \u00e0 aula \ud83c\udfac Live completa \ud83c\udfac Vers\u00e3o editada O que \u00e9 o m\u00e9todo POST? O protocolo HTTP possui v\u00e1rios m\u00e9todos, chamados tamb\u00e9m de verbos HTTP. Cada um possui uma responsabilidade diferente. Os principais s\u00e3o: Nesta aula nosso foco \u00e9 o POST, respons\u00e1vel por enviar dados do cliente para o servidor. Sempre que um usu\u00e1rio: o navegador normalmente utiliza uma requisi\u00e7\u00e3o POST. Relembrando o m\u00e9todo GET Antes de iniciar o POST, fazemos uma r\u00e1pida revis\u00e3o do GET, respons\u00e1vel por buscar informa\u00e7\u00f5es. Durante essa revis\u00e3o mostramos: Essa revis\u00e3o \u00e9 importante porque permite compreender claramente a diferen\u00e7a entre buscar informa\u00e7\u00f5es e envi\u00e1-las. Query Parameters Tamb\u00e9m mostramos como funciona o envio de informa\u00e7\u00f5es diretamente pela URL. Exemplo: Esse recurso \u00e9 chamado de Query String. Embora seja bastante utilizado para filtros, pesquisas e pagina\u00e7\u00e3o, n\u00e3o \u00e9 recomendado para informa\u00e7\u00f5es sens\u00edveis, pois os dados ficam vis\u00edveis na pr\u00f3pria URL. Essa compara\u00e7\u00e3o ajuda a entender por que formul\u00e1rios normalmente utilizam o m\u00e9todo POST. Criando a primeira rota POST Depois da revis\u00e3o iniciamos a constru\u00e7\u00e3o da primeira rota POST utilizando Express. Estrutura b\u00e1sica: Perceba que a estrutura \u00e9 praticamente igual ao m\u00e9todo GET. A grande diferen\u00e7a est\u00e1 no verbo utilizado. Agora a API passa a receber informa\u00e7\u00f5es enviadas pelo cliente. Enviando JSON para a API Para testar nossa aplica\u00e7\u00e3o utilizamos o Thunder Client, uma extens\u00e3o do Visual Studio Code muito utilizada para testar APIs. Criamos uma requisi\u00e7\u00e3o contendo um objeto JSON. Exemplo: Esse objeto ser\u00e1 enviado para o servidor exatamente como aconteceria em um formul\u00e1rio HTML. Por que utilizar express.json()? Este \u00e9 um dos pontos mais importantes da aula. Muitos iniciantes simplesmente copiam: sem saber o motivo. Na pr\u00e1tica, esse Middleware informa ao Express que ele dever\u00e1 interpretar requisi\u00e7\u00f5es enviadas em formato JSON. Sem essa configura\u00e7\u00e3o, o servidor recebe a requisi\u00e7\u00e3o, por\u00e9m n\u00e3o consegue interpretar corretamente o corpo da mensagem. \u00c9 exatamente por isso que esse Middleware aparece praticamente em todas as APIs desenvolvidas com Express. Entendendo o req.body Depois de configurar o Middleware, passamos a acessar os dados enviados pelo cliente utilizando: \u00c9 nesse objeto que ficam armazenadas todas as informa\u00e7\u00f5es enviadas pelo Front-end. Por exemplo: Agora a aplica\u00e7\u00e3o consegue acessar: Diferen\u00e7a entre req.params, req.query, req.headers e req.body Durante a aula mostramos uma das maiores d\u00favidas de quem est\u00e1 aprendendo Express. Cada propriedade possui uma finalidade diferente. req.params Captura par\u00e2metros presentes na rota. Exemplo: req.query Captura informa\u00e7\u00f5es enviadas pela URL. Exemplo: req.headers Cont\u00e9m informa\u00e7\u00f5es sobre a requisi\u00e7\u00e3o. Entre elas: req.body Recebe os dados enviados no corpo da requisi\u00e7\u00e3o. \u00c9 onde normalmente chegam os dados enviados por formul\u00e1rios HTML. Entender essa diferen\u00e7a evita uma enorme quantidade de erros durante o desenvolvimento de APIs. O papel do Content-Type Outro conceito muito importante apresentado nesta aula \u00e9 o cabe\u00e7alho: Esse cabe\u00e7alho informa ao servidor qual \u00e9 o formato dos dados enviados. Imagine que algu\u00e9m lhe entregue uma caixa fechada. Voc\u00ea sabe que existe alguma coisa dentro. Mas n\u00e3o sabe se \u00e9: O Content-Type resolve exatamente esse problema. Ele informa ao servidor qual formato dever\u00e1 ser interpretado. No Front-end, esse cabe\u00e7alho normalmente \u00e9 enviado utilizando a Fetch API. Criando um objeto com os dados recebidos Ap\u00f3s recebermos o JSON, criamos um novo objeto JavaScript utilizando as informa\u00e7\u00f5es enviadas pelo cliente. Tamb\u00e9m mostramos uma forma mais moderna de escrever objetos utilizando a sintaxe reduzida do JavaScript. Esse recurso deixa o c\u00f3digo mais limpo e mais utilizado em aplica\u00e7\u00f5es profissionais. Status HTTP 201 Created Ao finalizar a requisi\u00e7\u00e3o, retornamos o c\u00f3digo: Esse c\u00f3digo possui um significado espec\u00edfico. Ele informa que um novo recurso foi criado com sucesso. Na pr\u00e1tica: Todos podem retornar 201 Created. Utilizar corretamente os c\u00f3digos HTTP torna sua API muito mais organizada e profissional. Tecnologias utilizadas Durante o desenvolvimento utilizamos: O que voc\u00ea aprendeu Ao concluir esta aula voc\u00ea ser\u00e1 capaz de: Pr\u00f3ximos passos Esta aula representa apenas o come\u00e7o do desenvolvimento de APIs. Nas pr\u00f3ximas aulas da s\u00e9rie voc\u00ea aprender\u00e1: Cada nova aula adicionar\u00e1 uma nova pe\u00e7a ao funcionamento de uma API real, permitindo que voc\u00ea compreenda todo o processo utilizado em aplica\u00e7\u00f5es profissionais. Conclus\u00e3o Aprender o m\u00e9todo POST vai muito al\u00e9m de decorar um trecho de c\u00f3digo. O verdadeiro objetivo \u00e9 compreender como as informa\u00e7\u00f5es saem do Front-end, atravessam uma requisi\u00e7\u00e3o HTTP e chegam ao Back-end para serem processadas. Quando voc\u00ea entende esse fluxo completo, conceitos como Middleware, Headers, JSON, req.body e Status HTTP deixam de ser apenas comandos e passam a fazer parte de um processo l\u00f3gico que ser\u00e1 utilizado em praticamente qualquer aplica\u00e7\u00e3o moderna. Essa \u00e9 justamente a proposta desta s\u00e9rie: ensinar o funcionamento do desenvolvimento Back-end de forma pr\u00e1tica, conectando teoria e implementa\u00e7\u00e3o para que voc\u00ea construa uma base s\u00f3lida antes de avan\u00e7ar para projetos maiores.<\/p>\n","protected":false},"author":1,"featured_media":2222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2221","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=2221"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2221\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2221\/revisions\/2224"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2222"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}