{"id":2088,"date":"2026-06-25T13:03:27","date_gmt":"2026-06-25T16:03:27","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2088"},"modified":"2026-06-25T13:04:11","modified_gmt":"2026-06-25T16:04:11","slug":"projeto-completo-node-js-simulador-de-veiculos-com-express-e-json","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2088","title":{"rendered":"Projeto Completo Node.js: Simulador de Ve\u00edculos com Express e JSON"},"content":{"rendered":"\n<p>Voc\u00ea n\u00e3o precisa come\u00e7ar utilizando MySQL ou PostgreSQL para aprender como uma aplica\u00e7\u00e3o salva informa\u00e7\u00f5es.<\/p>\n\n\n\n<p>Antes de trabalhar com bancos de dados, \u00e9 importante entender como acontece a comunica\u00e7\u00e3o entre o Front-End e o Back-End e como os dados podem ser persistidos utilizando um arquivo JSON.<\/p>\n\n\n\n<p>Neste projeto vamos desenvolver um simulador de financiamento de ve\u00edculos utilizando <strong>JavaScript, Node.js, Express e JSON<\/strong>, criando uma aplica\u00e7\u00e3o completa capaz de calcular parcelas e salvar informa\u00e7\u00f5es no servidor.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\ud83c\udfa5 <strong>Assista \u00e0 aula completa no YouTube:<\/strong><br><a href=\"https:\/\/youtube.com\/live\/woPjvLXYsQw\">https:\/\/youtube.com\/live\/woPjvLXYsQw<\/a><\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que vamos construir<\/h1>\n\n\n\n<p>Durante o projeto desenvolvemos um sistema capaz de:<\/p>\n\n\n\n<ul>\n<li>cadastrar um ve\u00edculo;<\/li>\n\n\n\n<li>informar ano de fabrica\u00e7\u00e3o;<\/li>\n\n\n\n<li>calcular entrada;<\/li>\n\n\n\n<li>calcular parcelas;<\/li>\n\n\n\n<li>classificar o ve\u00edculo como novo, seminovo ou usado;<\/li>\n\n\n\n<li>enviar os dados para o servidor;<\/li>\n\n\n\n<li>salvar tudo em um arquivo JSON.<\/li>\n<\/ul>\n\n\n\n<p>Embora pare\u00e7a simples, esse projeto re\u00fane diversos conceitos utilizados diariamente por desenvolvedores Full Stack.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tecnologias utilizadas<\/h1>\n\n\n\n<ul>\n<li>HTML<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Node.js<\/li>\n\n\n\n<li>Express<\/li>\n\n\n\n<li>JSON<\/li>\n\n\n\n<li>Fetch API<\/li>\n\n\n\n<li>File System (fs)<\/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\">Como funciona o fluxo da aplica\u00e7\u00e3o<\/h1>\n\n\n\n<p>O usu\u00e1rio preenche o formul\u00e1rio no navegador.<\/p>\n\n\n\n<p>O JavaScript captura essas informa\u00e7\u00f5es, cria um objeto e envia os dados utilizando a Fetch API para o servidor Node.js.<\/p>\n\n\n\n<p>O Express recebe a requisi\u00e7\u00e3o, processa as informa\u00e7\u00f5es e utiliza o m\u00f3dulo <strong>fs<\/strong> para gravar os dados em um arquivo JSON.<\/p>\n\n\n\n<p>O fluxo fica assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Front-End\n      \u2193\nFetch API\n      \u2193\nExpress\n      \u2193\nNode.js\n      \u2193\nArquivo JSON\n<\/code><\/pre>\n\n\n\n<p>Entender esse fluxo \u00e9 muito mais importante do que simplesmente decorar c\u00f3digo.<\/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 servidor com Express<\/h1>\n\n\n\n<p>O primeiro passo foi configurar um servidor utilizando Express.<\/p>\n\n\n\n<p>Tamb\u00e9m configuramos:<\/p>\n\n\n\n<ul>\n<li>express.json()<\/li>\n\n\n\n<li>express.static()<\/li>\n\n\n\n<li>rota POST<\/li>\n\n\n\n<li>porta do servidor<\/li>\n<\/ul>\n\n\n\n<p>Esses recursos permitem que o Front-End consiga enviar dados para o Back-End.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Recebendo os dados<\/h1>\n\n\n\n<p>Quando o usu\u00e1rio envia o formul\u00e1rio, o servidor recebe um objeto contendo informa\u00e7\u00f5es como:<\/p>\n\n\n\n<ul>\n<li>modelo<\/li>\n\n\n\n<li>ano<\/li>\n\n\n\n<li>pre\u00e7o<\/li>\n\n\n\n<li>classifica\u00e7\u00e3o<\/li>\n\n\n\n<li>entrada<\/li>\n\n\n\n<li>parcela<\/li>\n<\/ul>\n\n\n\n<p>Esses dados chegam atrav\u00e9s do corpo da requisi\u00e7\u00e3o 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\">Salvando informa\u00e7\u00f5es em JSON<\/h1>\n\n\n\n<p>Ao inv\u00e9s de utilizar um banco de dados, utilizamos um arquivo <strong>dados.json<\/strong>.<\/p>\n\n\n\n<p>Para isso usamos o m\u00f3dulo <strong>fs<\/strong> do Node.js.<\/p>\n\n\n\n<p>Primeiro lemos o arquivo existente.<\/p>\n\n\n\n<p>Depois adicionamos o novo objeto.<\/p>\n\n\n\n<p>Por fim gravamos novamente o arquivo atualizado.<\/p>\n\n\n\n<p>Esse processo ajuda muito quem est\u00e1 come\u00e7ando a entender persist\u00eancia de dados antes de aprender bancos relacionais.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Calculando parcelas<\/h1>\n\n\n\n<p>Al\u00e9m da comunica\u00e7\u00e3o entre Front-End e Back-End, o projeto tamb\u00e9m implementa regras de neg\u00f3cio.<\/p>\n\n\n\n<p>Dependendo do ano do ve\u00edculo, o sistema identifica se ele \u00e9:<\/p>\n\n\n\n<ul>\n<li>Novo<\/li>\n\n\n\n<li>Seminovo<\/li>\n\n\n\n<li>Usado<\/li>\n<\/ul>\n\n\n\n<p>Com base nessa classifica\u00e7\u00e3o s\u00e3o calculados:<\/p>\n\n\n\n<ul>\n<li>valor da entrada;<\/li>\n\n\n\n<li>valor financiado;<\/li>\n\n\n\n<li>parcelas.<\/li>\n<\/ul>\n\n\n\n<p>Isso demonstra como o JavaScript pode ser utilizado para implementar regras reais 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\">Comunica\u00e7\u00e3o entre Front-End e Back-End<\/h1>\n\n\n\n<p>Depois de calcular os valores, utilizamos a <strong>Fetch API<\/strong> para enviar os dados para o servidor.<\/p>\n\n\n\n<p>A requisi\u00e7\u00e3o utiliza o m\u00e9todo <strong>POST<\/strong>, enviando o objeto no formato JSON.<\/p>\n\n\n\n<p>Esse \u00e9 exatamente o mesmo conceito utilizado em APIs REST modernas.<\/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 aprender dessa forma?<\/h1>\n\n\n\n<p>Muitos iniciantes come\u00e7am diretamente aprendendo MySQL ou PostgreSQL.<\/p>\n\n\n\n<p>Mas antes disso \u00e9 importante compreender:<\/p>\n\n\n\n<ul>\n<li>como os dados saem do navegador;<\/li>\n\n\n\n<li>como chegam ao servidor;<\/li>\n\n\n\n<li>como s\u00e3o processados;<\/li>\n\n\n\n<li>como s\u00e3o armazenados.<\/li>\n<\/ul>\n\n\n\n<p>Quando esse processo fica claro, aprender bancos de dados torna-se muito mais simples.<\/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<\/h1>\n\n\n\n<p>Ao finalizar este projeto voc\u00ea ter\u00e1 praticado:<\/p>\n\n\n\n<ul>\n<li>Node.js<\/li>\n\n\n\n<li>Express<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Objetos<\/li>\n\n\n\n<li>Arrays<\/li>\n\n\n\n<li>JSON<\/li>\n\n\n\n<li>Fetch API<\/li>\n\n\n\n<li>Rotas POST<\/li>\n\n\n\n<li>File System (fs)<\/li>\n\n\n\n<li>Manipula\u00e7\u00e3o do DOM<\/li>\n\n\n\n<li>Front-End<\/li>\n\n\n\n<li>Back-End<\/li>\n\n\n\n<li>Projeto Full Stack<\/li>\n<\/ul>\n\n\n\n<p>Todos esses conceitos aparecem diariamente no desenvolvimento de aplica\u00e7\u00f5es web.<\/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>Projetos pr\u00e1ticos s\u00e3o uma das melhores formas de evoluir na programa\u00e7\u00e3o.<\/p>\n\n\n\n<p>Mais importante do que decorar comandos \u00e9 entender como as diferentes partes da aplica\u00e7\u00e3o trabalham juntas.<\/p>\n\n\n\n<p>Neste projeto voc\u00ea viu desde a cria\u00e7\u00e3o do servidor at\u00e9 o salvamento dos dados, entendendo todo o caminho percorrido pelas informa\u00e7\u00f5es dentro de uma aplica\u00e7\u00e3o Node.js.<\/p>\n\n\n\n<p>Esse conhecimento ser\u00e1 a base para projetos maiores utilizando bancos de dados como MySQL, PostgreSQL ou MongoDB.<\/p>\n\n\n\n<p>Continue praticando, fa\u00e7a melhorias no projeto e publique o resultado no GitHub para fortalecer seu portf\u00f3lio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea n\u00e3o precisa come\u00e7ar utilizando MySQL ou PostgreSQL para aprender como uma aplica\u00e7\u00e3o salva informa\u00e7\u00f5es. Antes de trabalhar com bancos de dados, \u00e9 importante entender como acontece a comunica\u00e7\u00e3o entre o Front-End e o Back-End e como os dados podem ser persistidos utilizando um arquivo JSON. Neste projeto vamos desenvolver um simulador de financiamento de ve\u00edculos utilizando JavaScript, Node.js, Express e JSON, criando uma aplica\u00e7\u00e3o completa capaz de calcular parcelas e salvar informa\u00e7\u00f5es no servidor. \ud83c\udfa5 Assista \u00e0 aula completa no YouTube:https:\/\/youtube.com\/live\/woPjvLXYsQw O que vamos construir Durante o projeto desenvolvemos um sistema capaz de: Embora pare\u00e7a simples, esse projeto re\u00fane diversos conceitos utilizados diariamente por desenvolvedores Full Stack. Tecnologias utilizadas Como funciona o fluxo da aplica\u00e7\u00e3o O usu\u00e1rio preenche o formul\u00e1rio no navegador. O JavaScript captura essas informa\u00e7\u00f5es, cria um objeto e envia os dados utilizando a Fetch API para o servidor Node.js. O Express recebe a requisi\u00e7\u00e3o, processa as informa\u00e7\u00f5es e utiliza o m\u00f3dulo fs para gravar os dados em um arquivo JSON. O fluxo fica assim: Entender esse fluxo \u00e9 muito mais importante do que simplesmente decorar c\u00f3digo. Criando o servidor com Express O primeiro passo foi configurar um servidor utilizando Express. Tamb\u00e9m configuramos: Esses recursos permitem que o Front-End consiga enviar dados para o Back-End. Recebendo os dados Quando o usu\u00e1rio envia o formul\u00e1rio, o servidor recebe um objeto contendo informa\u00e7\u00f5es como: Esses dados chegam atrav\u00e9s do corpo da requisi\u00e7\u00e3o utilizando JSON. Salvando informa\u00e7\u00f5es em JSON Ao inv\u00e9s de utilizar um banco de dados, utilizamos um arquivo dados.json. Para isso usamos o m\u00f3dulo fs do Node.js. Primeiro lemos o arquivo existente. Depois adicionamos o novo objeto. Por fim gravamos novamente o arquivo atualizado. Esse processo ajuda muito quem est\u00e1 come\u00e7ando a entender persist\u00eancia de dados antes de aprender bancos relacionais. Calculando parcelas Al\u00e9m da comunica\u00e7\u00e3o entre Front-End e Back-End, o projeto tamb\u00e9m implementa regras de neg\u00f3cio. Dependendo do ano do ve\u00edculo, o sistema identifica se ele \u00e9: Com base nessa classifica\u00e7\u00e3o s\u00e3o calculados: Isso demonstra como o JavaScript pode ser utilizado para implementar regras reais de uma aplica\u00e7\u00e3o. Comunica\u00e7\u00e3o entre Front-End e Back-End Depois de calcular os valores, utilizamos a Fetch API para enviar os dados para o servidor. A requisi\u00e7\u00e3o utiliza o m\u00e9todo POST, enviando o objeto no formato JSON. Esse \u00e9 exatamente o mesmo conceito utilizado em APIs REST modernas. Por que aprender dessa forma? Muitos iniciantes come\u00e7am diretamente aprendendo MySQL ou PostgreSQL. Mas antes disso \u00e9 importante compreender: Quando esse processo fica claro, aprender bancos de dados torna-se muito mais simples. O que voc\u00ea aprendeu Ao finalizar este projeto voc\u00ea ter\u00e1 praticado: Todos esses conceitos aparecem diariamente no desenvolvimento de aplica\u00e7\u00f5es web. Conclus\u00e3o Projetos pr\u00e1ticos s\u00e3o uma das melhores formas de evoluir na programa\u00e7\u00e3o. Mais importante do que decorar comandos \u00e9 entender como as diferentes partes da aplica\u00e7\u00e3o trabalham juntas. Neste projeto voc\u00ea viu desde a cria\u00e7\u00e3o do servidor at\u00e9 o salvamento dos dados, entendendo todo o caminho percorrido pelas informa\u00e7\u00f5es dentro de uma aplica\u00e7\u00e3o Node.js. Esse conhecimento ser\u00e1 a base para projetos maiores utilizando bancos de dados como MySQL, PostgreSQL ou MongoDB. Continue praticando, fa\u00e7a melhorias no projeto e publique o resultado no GitHub para fortalecer seu portf\u00f3lio.<\/p>\n","protected":false},"author":1,"featured_media":2089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2088"}],"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=2088"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2088\/revisions"}],"predecessor-version":[{"id":2092,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2088\/revisions\/2092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2089"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}