{"id":2066,"date":"2026-06-23T15:38:14","date_gmt":"2026-06-23T18:38:14","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2066"},"modified":"2026-06-23T15:39:46","modified_gmt":"2026-06-23T18:39:46","slug":"2066","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2066","title":{"rendered":"Como Salvar Dados Sem Banco de Dados? Projeto Completo com Node.js e JSON"},"content":{"rendered":"\n<p>Muita gente acredita que \u00e9 obrigat\u00f3rio aprender MySQL logo no in\u00edcio para conseguir salvar informa\u00e7\u00f5es em uma aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Mas a verdade \u00e9 que, antes mesmo de trabalhar com bancos de dados relacionais, voc\u00ea pode aprender os conceitos de persist\u00eancia utilizando apenas <strong>Node.js, Express e arquivos JSON<\/strong>.<\/p>\n\n\n\n<p>Neste projeto pr\u00e1tico, vamos construir uma aplica\u00e7\u00e3o de uma cafeteria e entender como os dados saem do Frontend, passam pelo Backend e s\u00e3o armazenados em um arquivo JSON.<\/p>\n\n\n\n<p>Al\u00e9m de ser um excelente projeto para portf\u00f3lio, ele ajuda a compreender como aplica\u00e7\u00f5es reais funcionam.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Como Funciona a Persist\u00eancia de Dados?<\/h2>\n\n\n\n<p>Quando o usu\u00e1rio realiza um pedido na aplica\u00e7\u00e3o, o JavaScript captura as informa\u00e7\u00f5es do formul\u00e1rio e envia os dados para o servidor utilizando a Fetch API.<\/p>\n\n\n\n<p>No Backend, o Express recebe essas informa\u00e7\u00f5es atrav\u00e9s de uma rota POST e, utilizando o m\u00f3dulo File System (FS) do Node.js, salva tudo em um arquivo JSON.<\/p>\n\n\n\n<p>O fluxo \u00e9 simples:<\/p>\n\n\n\n<p><strong>Frontend \u2192 Fetch API \u2192 Express \u2192 Arquivo JSON<\/strong><\/p>\n\n\n\n<p>Embora n\u00e3o seja um banco de dados tradicional, o conceito de persist\u00eancia \u00e9 exatamente o mesmo utilizado em aplica\u00e7\u00f5es maiores.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Criando o Servidor com Node.js e Express<\/h2>\n\n\n\n<p>Primeiro criamos o servidor utilizando o 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>Porta 3000<\/li>\n\n\n\n<li>Pasta public<\/li>\n\n\n\n<li>Middleware para trabalhar com JSON<\/li>\n<\/ul>\n\n\n\n<p>Com isso, conseguimos servir os arquivos HTML, CSS e JavaScript e preparar o Backend para receber informa\u00e7\u00f5es.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Lendo os Dados do Arquivo JSON<\/h2>\n\n\n\n<p>Para acessar os pedidos j\u00e1 armazenados, utilizamos o m\u00f3dulo File System do Node.js.<\/p>\n\n\n\n<p>Primeiro fazemos a leitura:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fs.readFileSync()\n<\/code><\/pre>\n\n\n\n<p>Em seguida, transformamos o conte\u00fado do arquivo em objetos JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.parse()\n<\/code><\/pre>\n\n\n\n<p>Assim podemos manipular os dados normalmente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Salvando Informa\u00e7\u00f5es em JSON<\/h2>\n\n\n\n<p>Depois de ler os dados existentes, adicionamos um novo pedido utilizando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>push()\n<\/code><\/pre>\n\n\n\n<p>E ent\u00e3o fazemos a grava\u00e7\u00e3o utilizando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fs.writeFileSync()\n<\/code><\/pre>\n\n\n\n<p>Para salvar corretamente, convertemos os objetos em JSON:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JSON.stringify()\n<\/code><\/pre>\n\n\n\n<p>Dessa forma os dados permanecem armazenados mesmo ap\u00f3s reiniciar a aplica\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Criando uma Rota POST<\/h2>\n\n\n\n<p>A rota POST \u00e9 respons\u00e1vel por receber os dados enviados pelo Frontend.<\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.post('\/salvar', (req, res) =&gt; {\n\n})\n<\/code><\/pre>\n\n\n\n<p>As informa\u00e7\u00f5es chegam atrav\u00e9s do:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>req.body\n<\/code><\/pre>\n\n\n\n<p>Ap\u00f3s validar os dados, chamamos a fun\u00e7\u00e3o respons\u00e1vel por gravar tudo no arquivo JSON.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Criando uma Rota GET<\/h2>\n\n\n\n<p>Tamb\u00e9m criamos uma rota para listar os pedidos armazenados:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.get('\/ler', (req, res) =&gt; {\n\n})\n<\/code><\/pre>\n\n\n\n<p>Essa rota devolve os dados salvos para o Frontend.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Construindo o Frontend<\/h2>\n\n\n\n<p>No Frontend utilizamos:<\/p>\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>DOM<\/li>\n\n\n\n<li>Eventos<\/li>\n\n\n\n<li>addEventListener<\/li>\n\n\n\n<li>Arrays<\/li>\n\n\n\n<li>Objetos<\/li>\n<\/ul>\n\n\n\n<p>Os produtos s\u00e3o adicionados em um carrinho e o valor total \u00e9 calculado automaticamente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Enviando Dados com Fetch API<\/h2>\n\n\n\n<p>Ao clicar em &#8220;Salvar Pedido&#8221;, utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch()\n<\/code><\/pre>\n\n\n\n<p>Enviando:<\/p>\n\n\n\n<ul>\n<li>m\u00e9todo POST;<\/li>\n\n\n\n<li>headers;<\/li>\n\n\n\n<li>application\/json;<\/li>\n\n\n\n<li>JSON.stringify().<\/li>\n<\/ul>\n\n\n\n<p>O servidor recebe as informa\u00e7\u00f5es e faz a persist\u00eancia dos dados.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Por Que Aprender Assim?<\/h2>\n\n\n\n<p>Aprender persist\u00eancia utilizando arquivos JSON \u00e9 uma excelente forma de entender os conceitos antes de partir para bancos de dados como:<\/p>\n\n\n\n<ul>\n<li>MySQL<\/li>\n\n\n\n<li>PostgreSQL<\/li>\n\n\n\n<li>SQL Server<\/li>\n\n\n\n<li>MongoDB<\/li>\n<\/ul>\n\n\n\n<p>Quando voc\u00ea compreende como os dados trafegam entre Frontend e Backend, trocar o arquivo JSON por um banco de dados \u00e9 apenas uma mudan\u00e7a de ferramenta.<\/p>\n\n\n\n<p>O conceito continua sendo o mesmo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Voc\u00ea n\u00e3o precisa come\u00e7ar pelo MySQL para aprender persist\u00eancia de dados.<\/p>\n\n\n\n<p>Utilizando apenas <strong>Node.js, Express e JSON<\/strong>, \u00e9 poss\u00edvel construir aplica\u00e7\u00f5es completas e entender como os dados s\u00e3o enviados, processados e armazenados.<\/p>\n\n\n\n<p>Mais importante do que decorar comandos \u00e9 compreender como a comunica\u00e7\u00e3o entre cliente e servidor acontece.<\/p>\n\n\n\n<p>\u00c9 esse entendimento que vai facilitar o aprendizado de qualquer tecnologia no futuro.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Assista ao Projeto Completo<\/h1>\n\n\n\n<p>\ud83c\udfa5 <strong>V\u00eddeo completo no YouTube:<\/strong><\/p>\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=\"Como Salvar Dados Sem Banco de Dados? Projeto Completo Node.js + JSON\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/YuPRuhrjOG8?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<h2 class=\"wp-block-heading\">Tecnologias Utilizadas<\/h2>\n\n\n\n<ul>\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>HTML<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>DOM<\/li>\n\n\n\n<li>Eventos<\/li>\n\n\n\n<li>addEventListener<\/li>\n\n\n\n<li>Arrays<\/li>\n\n\n\n<li>Objetos<\/li>\n\n\n\n<li>Frontend<\/li>\n\n\n\n<li>Backend<\/li>\n\n\n\n<li>API REST<\/li>\n\n\n\n<li>File System (FS)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Muita gente acredita que \u00e9 obrigat\u00f3rio aprender MySQL logo no in\u00edcio para conseguir salvar informa\u00e7\u00f5es em uma aplica\u00e7\u00e3o. Mas a verdade \u00e9 que, antes mesmo de trabalhar com bancos de dados relacionais, voc\u00ea pode aprender os conceitos de persist\u00eancia utilizando apenas Node.js, Express e arquivos JSON. Neste projeto pr\u00e1tico, vamos construir uma aplica\u00e7\u00e3o de uma cafeteria e entender como os dados saem do Frontend, passam pelo Backend e s\u00e3o armazenados em um arquivo JSON. Al\u00e9m de ser um excelente projeto para portf\u00f3lio, ele ajuda a compreender como aplica\u00e7\u00f5es reais funcionam. Como Funciona a Persist\u00eancia de Dados? Quando o usu\u00e1rio realiza um pedido na aplica\u00e7\u00e3o, o JavaScript captura as informa\u00e7\u00f5es do formul\u00e1rio e envia os dados para o servidor utilizando a Fetch API. No Backend, o Express recebe essas informa\u00e7\u00f5es atrav\u00e9s de uma rota POST e, utilizando o m\u00f3dulo File System (FS) do Node.js, salva tudo em um arquivo JSON. O fluxo \u00e9 simples: Frontend \u2192 Fetch API \u2192 Express \u2192 Arquivo JSON Embora n\u00e3o seja um banco de dados tradicional, o conceito de persist\u00eancia \u00e9 exatamente o mesmo utilizado em aplica\u00e7\u00f5es maiores. Criando o Servidor com Node.js e Express Primeiro criamos o servidor utilizando o Express. Tamb\u00e9m configuramos: Com isso, conseguimos servir os arquivos HTML, CSS e JavaScript e preparar o Backend para receber informa\u00e7\u00f5es. Lendo os Dados do Arquivo JSON Para acessar os pedidos j\u00e1 armazenados, utilizamos o m\u00f3dulo File System do Node.js. Primeiro fazemos a leitura: Em seguida, transformamos o conte\u00fado do arquivo em objetos JavaScript: Assim podemos manipular os dados normalmente. Salvando Informa\u00e7\u00f5es em JSON Depois de ler os dados existentes, adicionamos um novo pedido utilizando: E ent\u00e3o fazemos a grava\u00e7\u00e3o utilizando: Para salvar corretamente, convertemos os objetos em JSON: Dessa forma os dados permanecem armazenados mesmo ap\u00f3s reiniciar a aplica\u00e7\u00e3o. Criando uma Rota POST A rota POST \u00e9 respons\u00e1vel por receber os dados enviados pelo Frontend. Exemplo: As informa\u00e7\u00f5es chegam atrav\u00e9s do: Ap\u00f3s validar os dados, chamamos a fun\u00e7\u00e3o respons\u00e1vel por gravar tudo no arquivo JSON. Criando uma Rota GET Tamb\u00e9m criamos uma rota para listar os pedidos armazenados: Essa rota devolve os dados salvos para o Frontend. Construindo o Frontend No Frontend utilizamos: Os produtos s\u00e3o adicionados em um carrinho e o valor total \u00e9 calculado automaticamente. Enviando Dados com Fetch API Ao clicar em &#8220;Salvar Pedido&#8221;, utilizamos: Enviando: O servidor recebe as informa\u00e7\u00f5es e faz a persist\u00eancia dos dados. Por Que Aprender Assim? Aprender persist\u00eancia utilizando arquivos JSON \u00e9 uma excelente forma de entender os conceitos antes de partir para bancos de dados como: Quando voc\u00ea compreende como os dados trafegam entre Frontend e Backend, trocar o arquivo JSON por um banco de dados \u00e9 apenas uma mudan\u00e7a de ferramenta. O conceito continua sendo o mesmo. Conclus\u00e3o Voc\u00ea n\u00e3o precisa come\u00e7ar pelo MySQL para aprender persist\u00eancia de dados. Utilizando apenas Node.js, Express e JSON, \u00e9 poss\u00edvel construir aplica\u00e7\u00f5es completas e entender como os dados s\u00e3o enviados, processados e armazenados. Mais importante do que decorar comandos \u00e9 compreender como a comunica\u00e7\u00e3o entre cliente e servidor acontece. \u00c9 esse entendimento que vai facilitar o aprendizado de qualquer tecnologia no futuro. Assista ao Projeto Completo \ud83c\udfa5 V\u00eddeo completo no YouTube: Tecnologias Utilizadas<\/p>\n","protected":false},"author":1,"featured_media":2067,"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\/2066"}],"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=2066"}],"version-history":[{"count":3,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2066\/revisions"}],"predecessor-version":[{"id":2071,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2066\/revisions\/2071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2067"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}