{"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-26T13:06:26","modified_gmt":"2026-06-26T16:06:26","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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">O fluxo \u00e9 simples:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Frontend \u2192 Fetch API \u2192 Express \u2192 Arquivo JSON<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Primeiro criamos o servidor utilizando o Express.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m configuramos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Para acessar os pedidos j\u00e1 armazenados, utilizamos o m\u00f3dulo File System do Node.js.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">A rota POST \u00e9 respons\u00e1vel por receber os dados enviados pelo Frontend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">No Frontend utilizamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Enviando:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-list\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Voc\u00ea n\u00e3o precisa come\u00e7ar pelo MySQL para aprender persist\u00eancia de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Mais importante do que decorar comandos \u00e9 compreender como a comunica\u00e7\u00e3o entre cliente e servidor acontece.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">\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 class=\"wp-block-list\">\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 class=\"wp-block-paragraph\"><\/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,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-2066","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\/2066","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=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}]}}