{"id":2200,"date":"2026-07-21T17:51:58","date_gmt":"2026-07-21T20:51:58","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2200"},"modified":"2026-07-21T17:58:05","modified_gmt":"2026-07-21T20:58:05","slug":"express-js-para-iniciantes-crie-seu-primeiro-backend-com-javascript-e-node-js","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2200","title":{"rendered":"Express.js para Iniciantes: Crie seu Primeiro Backend com JavaScript e Node.js"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Aprender JavaScript no navegador \u00e9 apenas o primeiro passo da jornada de um desenvolvedor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de dominar vari\u00e1veis, fun\u00e7\u00f5es, objetos, arrays e manipula\u00e7\u00e3o do DOM, surge uma nova pergunta:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Como os sites realmente funcionam por tr\u00e1s das telas?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea faz login em uma aplica\u00e7\u00e3o, pesquisa um produto em uma loja virtual ou consulta seus dados em um sistema, existe um servidor processando essas informa\u00e7\u00f5es e respondendo \u00e0s solicita\u00e7\u00f5es do navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente esse mundo que voc\u00ea come\u00e7ar\u00e1 a conhecer neste projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula construiremos <strong>o primeiro Backend com JavaScript<\/strong>, utilizando <strong>Node.js<\/strong> e <strong>Express.js<\/strong>, entendendo como funciona a comunica\u00e7\u00e3o entre cliente e servidor atrav\u00e9s de rotas, requisi\u00e7\u00f5es e respostas HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao final, voc\u00ea ter\u00e1 criado uma pequena API funcionando e compreender\u00e1 os conceitos fundamentais que servir\u00e3o de base para projetos muito maiores.<\/p>\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 Backend?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O Backend \u00e9 a parte da aplica\u00e7\u00e3o respons\u00e1vel por processar informa\u00e7\u00f5es, executar regras de neg\u00f3cio, acessar bancos de dados e responder \u00e0s requisi\u00e7\u00f5es feitas pelos usu\u00e1rios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que uma pessoa acessa um site acontece algo parecido com isto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Cliente\n    \u2502\n    \u25bc\nRequisi\u00e7\u00e3o HTTP\n    \u2502\n    \u25bc\nServidor (Backend)\n    \u2502\n    \u25bc\nProcessamento\n    \u2502\n    \u25bc\nResposta HTTP\n    \u2502\n    \u25bc\nCliente<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Enquanto o Front-end cuida da interface que o usu\u00e1rio v\u00ea, o Backend \u00e9 respons\u00e1vel por tudo o que acontece &#8220;nos bastidores&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 ele quem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>valida logins;<\/li>\n\n\n\n<li>consulta bancos de dados;<\/li>\n\n\n\n<li>salva informa\u00e7\u00f5es;<\/li>\n\n\n\n<li>calcula resultados;<\/li>\n\n\n\n<li>cria APIs;<\/li>\n\n\n\n<li>envia respostas ao navegador.<\/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\">JavaScript tamb\u00e9m pode ser utilizado no servidor<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Durante muitos anos, JavaScript era utilizado apenas dentro do navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com o surgimento do <strong>Node.js<\/strong>, passou a ser poss\u00edvel executar JavaScript diretamente no servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso trouxe uma enorme vantagem para quem deseja trabalhar como desenvolvedor Full Stack.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoje \u00e9 poss\u00edvel utilizar JavaScript em praticamente toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Front-end\nHTML\nCSS\nJavaScript\nReact\n\n\u2193\n\nBackend\nNode.js\nExpress.js\n\n\u2193\n\nBanco de Dados\nMySQL\nPostgreSQL\nMongoDB<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Aprender Backend com JavaScript significa ampliar bastante as possibilidades de desenvolvimento.<\/p>\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 Node.js?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O Node.js \u00e9 um ambiente de execu\u00e7\u00e3o que permite rodar JavaScript fora do navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com ele podemos criar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>APIs REST;<\/li>\n\n\n\n<li>Servidores Web;<\/li>\n\n\n\n<li>Sistemas completos;<\/li>\n\n\n\n<li>Aplica\u00e7\u00f5es em tempo real;<\/li>\n\n\n\n<li>Ferramentas de automa\u00e7\u00e3o;<\/li>\n\n\n\n<li>Scripts;<\/li>\n\n\n\n<li>Integra\u00e7\u00f5es entre sistemas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 gra\u00e7as ao Node.js que podemos utilizar JavaScript para desenvolver o lado servidor de uma aplica\u00e7\u00e3o.<\/p>\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 npm?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O npm (Node Package Manager) \u00e9 o gerenciador de pacotes do Node.js.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele permite instalar bibliotecas prontas desenvolvidas pela comunidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em vez de criar tudo do zero, podemos simplesmente instalar um pacote utilizando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O npm \u00e9 um dos maiores ecossistemas de software do mundo, contendo milh\u00f5es de bibliotecas dispon\u00edveis gratuitamente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando o primeiro projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de instalar qualquer biblioteca, criamos o projeto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm init -y<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse comando gera automaticamente o arquivo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package.json<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse arquivo funciona como a identidade do projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele informa:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nome;<\/li>\n\n\n\n<li>vers\u00e3o;<\/li>\n\n\n\n<li>depend\u00eancias;<\/li>\n\n\n\n<li>scripts;<\/li>\n\n\n\n<li>arquivo principal;<\/li>\n\n\n\n<li>diversas configura\u00e7\u00f5es.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que outra pessoa baixar seu projeto, bastar\u00e1 executar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e todas as depend\u00eancias ser\u00e3o instaladas automaticamente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Instalando o Express.js<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois do projeto criado, instalamos o Express.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install express<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou simplesmente<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i express<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Automaticamente ser\u00e3o criados:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>package-lock.json<\/li>\n\n\n\n<li>node_modules<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">e o Express ser\u00e1 registrado dentro do package.json.<\/p>\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 a pasta node_modules?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Essa pasta armazena todas as bibliotecas utilizadas pelo projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ela pode conter milhares de arquivos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, normalmente ela <strong>n\u00e3o \u00e9 enviada para o GitHub<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando algu\u00e9m clona o projeto basta executar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">que toda a pasta ser\u00e1 recriada automaticamente.<\/p>\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 Express.js?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Express.js \u00e9 um framework para Node.js criado para facilitar a constru\u00e7\u00e3o de aplica\u00e7\u00f5es Backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sem Express seria necess\u00e1rio escrever muito mais c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com ele podemos criar rapidamente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rotas;<\/li>\n\n\n\n<li>APIs;<\/li>\n\n\n\n<li>Middlewares;<\/li>\n\n\n\n<li>autentica\u00e7\u00e3o;<\/li>\n\n\n\n<li>servidores;<\/li>\n\n\n\n<li>aplica\u00e7\u00f5es REST.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso ele \u00e9 considerado um dos frameworks mais importantes do ecossistema Node.js.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando o primeiro servidor<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de instalar o Express, criamos nossa aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primeiro importamos o framework.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois criamos uma inst\u00e2ncia da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por fim utilizamos o m\u00e9todo <strong>listen()<\/strong> para deixar o servidor aguardando conex\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse momento o servidor j\u00e1 est\u00e1 preparado para receber requisi\u00e7\u00f5es atrav\u00e9s da porta <strong>3000<\/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 a primeira rota<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Uma rota representa um endere\u00e7o da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/sobre<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada rota executa uma fun\u00e7\u00e3o diferente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na aula criamos diversas rotas utilizando:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>app.get()<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esse m\u00e9todo \u00e9 respons\u00e1vel por responder \u00e0s requisi\u00e7\u00f5es HTTP do tipo GET.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Entendendo req e res<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que uma rota \u00e9 executada recebemos dois objetos muito importantes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>req<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Representa a requisi\u00e7\u00e3o enviada pelo cliente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>res<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Representa a resposta que ser\u00e1 enviada pelo servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esses dois objetos aparecem praticamente em todas as aplica\u00e7\u00f5es Express.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Enviando respostas<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Existem diversas maneiras de responder uma requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula utilizamos duas das principais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">res.send()<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizado para enviar textos simples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">res.json()<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizado para retornar objetos em formato JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse formato \u00e9 extremamente utilizado por APIs modernas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplica\u00e7\u00f5es React, Angular, Vue, Flutter e at\u00e9 aplicativos Android normalmente recebem informa\u00e7\u00f5es utilizando JSON.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando m\u00faltiplas rotas<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Durante a aula foram criadas diversas rotas para demonstrar diferentes situa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entre elas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rota principal;<\/li>\n\n\n\n<li>p\u00e1gina Sobre;<\/li>\n\n\n\n<li>retorno de JSON;<\/li>\n\n\n\n<li>rota com par\u00e2metros;<\/li>\n\n\n\n<li>consulta utilizando Query String;<\/li>\n\n\n\n<li>pequena API de filmes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Essa evolu\u00e7\u00e3o permite compreender como uma API come\u00e7a simples e vai crescendo conforme novas funcionalidades s\u00e3o adicionadas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Recebendo par\u00e2metros com req.params<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Nem todas as rotas possuem sempre o mesmo endere\u00e7o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em muitos casos precisamos receber uma informa\u00e7\u00e3o diretamente na URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/aluno\/Marcos<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse caso o valor &#8220;Marcos&#8221; \u00e9 recebido atrav\u00e9s de:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>req.params<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse recurso \u00e9 muito utilizado em APIs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplos reais:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/produtos\/25\n\n\/clientes\/8\n\n\/usuarios\/50\n\n\/pedidos\/300<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que precisamos identificar um recurso espec\u00edfico normalmente utilizamos par\u00e2metros de rota.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Trabalhando com Query String<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Outra forma bastante comum de enviar informa\u00e7\u00f5es para o servidor \u00e9 utilizando Query String.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/produtos?nome=notebook<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse caso estamos pesquisando um produto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A informa\u00e7\u00e3o \u00e9 capturada atrav\u00e9s de:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>req.query<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Query Strings s\u00e3o muito utilizadas para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>filtros;<\/li>\n\n\n\n<li>pesquisas;<\/li>\n\n\n\n<li>pagina\u00e7\u00e3o;<\/li>\n\n\n\n<li>ordena\u00e7\u00e3o;<\/li>\n\n\n\n<li>relat\u00f3rios;<\/li>\n\n\n\n<li>buscas por datas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o recursos presentes praticamente em qualquer sistema profissional.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando uma pequena API de filmes<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de entender os conceitos b\u00e1sicos, desenvolvemos uma pequena API para consolidar o aprendizado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A aplica\u00e7\u00e3o permite:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>listar todos os filmes;<\/li>\n\n\n\n<li>consultar um filme espec\u00edfico pelo ID;<\/li>\n\n\n\n<li>retornar informa\u00e7\u00f5es em formato JSON.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Embora seja um projeto simples, ele demonstra exatamente como APIs profissionais funcionam.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A \u00fanica diferen\u00e7a \u00e9 que, em sistemas reais, essas informa\u00e7\u00f5es normalmente v\u00eam de um banco de dados.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">C\u00f3digo completo dispon\u00edvel no GitHub<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Todo o projeto desenvolvido durante a aula est\u00e1 dispon\u00edvel gratuitamente no GitHub.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u00e1 voc\u00ea encontrar\u00e1 exatamente o c\u00f3digo constru\u00eddo durante a live, incluindo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>configura\u00e7\u00e3o do Node.js;<\/li>\n\n\n\n<li>instala\u00e7\u00e3o do Express.js;<\/li>\n\n\n\n<li>cria\u00e7\u00e3o do servidor;<\/li>\n\n\n\n<li>rotas utilizando <code>app.get()<\/code>;<\/li>\n\n\n\n<li>respostas com <code>res.send()<\/code>;<\/li>\n\n\n\n<li>retorno de objetos com <code>res.json()<\/code>;<\/li>\n\n\n\n<li>exemplos utilizando <code>req.params<\/code>;<\/li>\n\n\n\n<li>exemplos utilizando <code>req.query<\/code>;<\/li>\n\n\n\n<li>mini API de filmes apresentada na aula.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Reposit\u00f3rio do projeto:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 <strong><a href=\"https:\/\/github.com\/marcoscaldas\/backEndComJavaScriptExpressGet.git\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/marcoscaldas\/backEndComJavaScriptExpressGet.git<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma excelente forma de estudar \u00e9 clonar o reposit\u00f3rio, executar o projeto no seu computador e modificar as rotas por conta pr\u00f3pria. Experimente criar novas p\u00e1ginas, adicionar filmes e fazer altera\u00e7\u00f5es para entender como cada parte da aplica\u00e7\u00e3o funciona.<\/p>\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 nesta aula?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Ao concluir este projeto voc\u00ea ter\u00e1 dado um dos passos mais importantes no desenvolvimento Backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea aprendeu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>o que \u00e9 Node.js;<\/li>\n\n\n\n<li>o que \u00e9 npm;<\/li>\n\n\n\n<li>como instalar bibliotecas;<\/li>\n\n\n\n<li>para que serve o package.json;<\/li>\n\n\n\n<li>para que serve a pasta node_modules;<\/li>\n\n\n\n<li>como criar um servidor web;<\/li>\n\n\n\n<li>como utilizar o Express.js;<\/li>\n\n\n\n<li>como criar rotas;<\/li>\n\n\n\n<li>como utilizar app.get();<\/li>\n\n\n\n<li>como enviar respostas;<\/li>\n\n\n\n<li>como retornar JSON;<\/li>\n\n\n\n<li>como trabalhar com req.params;<\/li>\n\n\n\n<li>como utilizar req.query;<\/li>\n\n\n\n<li>como criar uma API simples.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esses conceitos ser\u00e3o utilizados constantemente em qualquer projeto desenvolvido com Node.js.<\/p>\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 foi apenas a primeira aula da s\u00e9rie de Backend com JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nos pr\u00f3ximos projetos avan\u00e7aremos para recursos ainda mais importantes, como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>m\u00e9todo POST;<\/li>\n\n\n\n<li>express.json();<\/li>\n\n\n\n<li>req.body;<\/li>\n\n\n\n<li>cadastro de dados;<\/li>\n\n\n\n<li>atualiza\u00e7\u00e3o de registros;<\/li>\n\n\n\n<li>exclus\u00e3o de informa\u00e7\u00f5es;<\/li>\n\n\n\n<li>conex\u00e3o com banco de dados;<\/li>\n\n\n\n<li>autentica\u00e7\u00e3o;<\/li>\n\n\n\n<li>JWT;<\/li>\n\n\n\n<li>Sessions;<\/li>\n\n\n\n<li>Cookies;<\/li>\n\n\n\n<li>APIs completas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Cada nova aula adicionar\u00e1 um novo bloco de conhecimento at\u00e9 chegarmos \u00e0 constru\u00e7\u00e3o de sistemas profissionais.<\/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 completa<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea deseja acompanhar todo o desenvolvimento passo a passo, assista \u00e0 aula completa no YouTube.<\/p>\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=\"Express.js para Iniciantes | Seu Primeiro Backend com JavaScript e Node.js\" width=\"960\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/vixQmAaAOA0?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<p class=\"wp-block-paragraph\">Durante a aula mostramos desde a instala\u00e7\u00e3o do Node.js e do Express at\u00e9 a constru\u00e7\u00e3o da API de filmes, explicando cada conceito de forma pr\u00e1tica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, toda esta aula faz parte da s\u00e9rie:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Backend com JavaScript | Node.js e Express.js do Zero<\/strong><\/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\">Entrar no mundo do Backend pode parecer desafiador no in\u00edcio, mas compreender os conceitos fundamentais faz toda a diferen\u00e7a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta primeira aula voc\u00ea viu que uma API nada mais \u00e9 do que um programa capaz de receber requisi\u00e7\u00f5es, processar informa\u00e7\u00f5es e devolver respostas para quem as solicitou.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mais importante do que decorar comandos \u00e9 entender esse fluxo de comunica\u00e7\u00e3o entre cliente e servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois que essa base estiver s\u00f3lida, aprender recursos como autentica\u00e7\u00e3o, banco de dados, upload de arquivos e integra\u00e7\u00e3o com outras aplica\u00e7\u00f5es se tornar\u00e1 muito mais natural.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este projeto representa o primeiro passo de uma jornada que permitir\u00e1 desenvolver APIs completas, sistemas Full Stack e aplica\u00e7\u00f5es modernas utilizando JavaScript do Front-end ao Backend.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprender JavaScript no navegador \u00e9 apenas o primeiro passo da jornada de um desenvolvedor. Depois de dominar vari\u00e1veis, fun\u00e7\u00f5es, objetos, arrays e manipula\u00e7\u00e3o do DOM, surge uma nova pergunta: Como os sites realmente funcionam por tr\u00e1s das telas? Quando voc\u00ea faz login em uma aplica\u00e7\u00e3o, pesquisa um produto em uma loja virtual ou consulta seus dados em um sistema, existe um servidor processando essas informa\u00e7\u00f5es e respondendo \u00e0s solicita\u00e7\u00f5es do navegador. \u00c9 exatamente esse mundo que voc\u00ea come\u00e7ar\u00e1 a conhecer neste projeto. Nesta aula construiremos o primeiro Backend com JavaScript, utilizando Node.js e Express.js, entendendo como funciona a comunica\u00e7\u00e3o entre cliente e servidor atrav\u00e9s de rotas, requisi\u00e7\u00f5es e respostas HTTP. Ao final, voc\u00ea ter\u00e1 criado uma pequena API funcionando e compreender\u00e1 os conceitos fundamentais que servir\u00e3o de base para projetos muito maiores. O que \u00e9 Backend? O Backend \u00e9 a parte da aplica\u00e7\u00e3o respons\u00e1vel por processar informa\u00e7\u00f5es, executar regras de neg\u00f3cio, acessar bancos de dados e responder \u00e0s requisi\u00e7\u00f5es feitas pelos usu\u00e1rios. Sempre que uma pessoa acessa um site acontece algo parecido com isto: Enquanto o Front-end cuida da interface que o usu\u00e1rio v\u00ea, o Backend \u00e9 respons\u00e1vel por tudo o que acontece &#8220;nos bastidores&#8221;. \u00c9 ele quem: JavaScript tamb\u00e9m pode ser utilizado no servidor Durante muitos anos, JavaScript era utilizado apenas dentro do navegador. Com o surgimento do Node.js, passou a ser poss\u00edvel executar JavaScript diretamente no servidor. Isso trouxe uma enorme vantagem para quem deseja trabalhar como desenvolvedor Full Stack. Hoje \u00e9 poss\u00edvel utilizar JavaScript em praticamente toda a aplica\u00e7\u00e3o. Exemplo: Aprender Backend com JavaScript significa ampliar bastante as possibilidades de desenvolvimento. O que \u00e9 Node.js? O Node.js \u00e9 um ambiente de execu\u00e7\u00e3o que permite rodar JavaScript fora do navegador. Com ele podemos criar: \u00c9 gra\u00e7as ao Node.js que podemos utilizar JavaScript para desenvolver o lado servidor de uma aplica\u00e7\u00e3o. O que \u00e9 npm? O npm (Node Package Manager) \u00e9 o gerenciador de pacotes do Node.js. Ele permite instalar bibliotecas prontas desenvolvidas pela comunidade. Em vez de criar tudo do zero, podemos simplesmente instalar um pacote utilizando: ou O npm \u00e9 um dos maiores ecossistemas de software do mundo, contendo milh\u00f5es de bibliotecas dispon\u00edveis gratuitamente. Criando o primeiro projeto Antes de instalar qualquer biblioteca, criamos o projeto: Esse comando gera automaticamente o arquivo: Esse arquivo funciona como a identidade do projeto. Ele informa: Sempre que outra pessoa baixar seu projeto, bastar\u00e1 executar: e todas as depend\u00eancias ser\u00e3o instaladas automaticamente. Instalando o Express.js Depois do projeto criado, instalamos o Express. ou simplesmente Automaticamente ser\u00e3o criados: e o Express ser\u00e1 registrado dentro do package.json. O que \u00e9 a pasta node_modules? Essa pasta armazena todas as bibliotecas utilizadas pelo projeto. Ela pode conter milhares de arquivos. Por isso, normalmente ela n\u00e3o \u00e9 enviada para o GitHub. Quando algu\u00e9m clona o projeto basta executar: que toda a pasta ser\u00e1 recriada automaticamente. O que \u00e9 Express.js? Express.js \u00e9 um framework para Node.js criado para facilitar a constru\u00e7\u00e3o de aplica\u00e7\u00f5es Backend. Sem Express seria necess\u00e1rio escrever muito mais c\u00f3digo. Com ele podemos criar rapidamente: Por isso ele \u00e9 considerado um dos frameworks mais importantes do ecossistema Node.js. Criando o primeiro servidor Depois de instalar o Express, criamos nossa aplica\u00e7\u00e3o. Primeiro importamos o framework. Depois criamos uma inst\u00e2ncia da aplica\u00e7\u00e3o. Por fim utilizamos o m\u00e9todo listen() para deixar o servidor aguardando conex\u00f5es. Nesse momento o servidor j\u00e1 est\u00e1 preparado para receber requisi\u00e7\u00f5es atrav\u00e9s da porta 3000. Criando a primeira rota Uma rota representa um endere\u00e7o da aplica\u00e7\u00e3o. Por exemplo: ou Cada rota executa uma fun\u00e7\u00e3o diferente. Na aula criamos diversas rotas utilizando: Esse m\u00e9todo \u00e9 respons\u00e1vel por responder \u00e0s requisi\u00e7\u00f5es HTTP do tipo GET. Entendendo req e res Sempre que uma rota \u00e9 executada recebemos dois objetos muito importantes. req Representa a requisi\u00e7\u00e3o enviada pelo cliente. res Representa a resposta que ser\u00e1 enviada pelo servidor. Esses dois objetos aparecem praticamente em todas as aplica\u00e7\u00f5es Express. Enviando respostas Existem diversas maneiras de responder uma requisi\u00e7\u00e3o. Nesta aula utilizamos duas das principais. res.send() Utilizado para enviar textos simples. res.json() Utilizado para retornar objetos em formato JSON. Esse formato \u00e9 extremamente utilizado por APIs modernas. Aplica\u00e7\u00f5es React, Angular, Vue, Flutter e at\u00e9 aplicativos Android normalmente recebem informa\u00e7\u00f5es utilizando JSON. Criando m\u00faltiplas rotas Durante a aula foram criadas diversas rotas para demonstrar diferentes situa\u00e7\u00f5es. Entre elas: Essa evolu\u00e7\u00e3o permite compreender como uma API come\u00e7a simples e vai crescendo conforme novas funcionalidades s\u00e3o adicionadas. Recebendo par\u00e2metros com req.params Nem todas as rotas possuem sempre o mesmo endere\u00e7o. Em muitos casos precisamos receber uma informa\u00e7\u00e3o diretamente na URL. Exemplo: Nesse caso o valor &#8220;Marcos&#8221; \u00e9 recebido atrav\u00e9s de: Esse recurso \u00e9 muito utilizado em APIs. Exemplos reais: Sempre que precisamos identificar um recurso espec\u00edfico normalmente utilizamos par\u00e2metros de rota. Trabalhando com Query String Outra forma bastante comum de enviar informa\u00e7\u00f5es para o servidor \u00e9 utilizando Query String. Exemplo: Nesse caso estamos pesquisando um produto. A informa\u00e7\u00e3o \u00e9 capturada atrav\u00e9s de: Query Strings s\u00e3o muito utilizadas para: S\u00e3o recursos presentes praticamente em qualquer sistema profissional. Criando uma pequena API de filmes Depois de entender os conceitos b\u00e1sicos, desenvolvemos uma pequena API para consolidar o aprendizado. A aplica\u00e7\u00e3o permite: Embora seja um projeto simples, ele demonstra exatamente como APIs profissionais funcionam. A \u00fanica diferen\u00e7a \u00e9 que, em sistemas reais, essas informa\u00e7\u00f5es normalmente v\u00eam de um banco de dados. C\u00f3digo completo dispon\u00edvel no GitHub Todo o projeto desenvolvido durante a aula est\u00e1 dispon\u00edvel gratuitamente no GitHub. L\u00e1 voc\u00ea encontrar\u00e1 exatamente o c\u00f3digo constru\u00eddo durante a live, incluindo: Reposit\u00f3rio do projeto: \ud83d\udc49 https:\/\/github.com\/marcoscaldas\/backEndComJavaScriptExpressGet.git Uma excelente forma de estudar \u00e9 clonar o reposit\u00f3rio, executar o projeto no seu computador e modificar as rotas por conta pr\u00f3pria. Experimente criar novas p\u00e1ginas, adicionar filmes e fazer altera\u00e7\u00f5es para entender como cada parte da aplica\u00e7\u00e3o funciona. O que voc\u00ea aprendeu nesta aula? Ao concluir este projeto voc\u00ea ter\u00e1 dado um dos passos mais importantes no desenvolvimento Backend. Voc\u00ea aprendeu: Esses conceitos ser\u00e3o utilizados constantemente em qualquer projeto desenvolvido com Node.js. Pr\u00f3ximos passos Esta foi apenas a primeira aula da s\u00e9rie de Backend com JavaScript. Nos pr\u00f3ximos projetos avan\u00e7aremos para recursos ainda mais importantes, como: Cada nova aula adicionar\u00e1 um novo bloco de conhecimento at\u00e9 chegarmos \u00e0 constru\u00e7\u00e3o de sistemas profissionais. Assista \u00e0 aula completa Se voc\u00ea deseja acompanhar todo o desenvolvimento passo a passo, assista \u00e0 aula completa no YouTube. Durante a aula mostramos desde a instala\u00e7\u00e3o do Node.js e do Express at\u00e9 a constru\u00e7\u00e3o da API de filmes, explicando cada conceito de forma pr\u00e1tica. Al\u00e9m disso, toda esta aula faz parte da s\u00e9rie: Backend com JavaScript | Node.js e Express.js do Zero Conclus\u00e3o Entrar no mundo do Backend pode parecer desafiador no in\u00edcio, mas compreender os conceitos fundamentais faz toda a diferen\u00e7a. Nesta primeira aula voc\u00ea viu que uma API nada mais \u00e9 do que um programa capaz de receber requisi\u00e7\u00f5es, processar informa\u00e7\u00f5es e devolver respostas para quem as solicitou. Mais importante do que decorar comandos \u00e9 entender esse fluxo de comunica\u00e7\u00e3o entre cliente e servidor. Depois que essa base estiver s\u00f3lida, aprender recursos como autentica\u00e7\u00e3o, banco de dados, upload de arquivos e integra\u00e7\u00e3o com outras aplica\u00e7\u00f5es se tornar\u00e1 muito mais natural. Este projeto representa o primeiro passo de uma jornada que permitir\u00e1 desenvolver APIs completas, sistemas Full Stack e aplica\u00e7\u00f5es modernas utilizando JavaScript do Front-end ao Backend.<\/p>\n","protected":false},"author":1,"featured_media":2202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-2200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2200","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=2200"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2200\/revisions"}],"predecessor-version":[{"id":2204,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2200\/revisions\/2204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2202"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}