Muita gente acredita que é obrigatório aprender MySQL logo no início para conseguir salvar informações em uma aplicação.

Mas a verdade é que, antes mesmo de trabalhar com bancos de dados relacionais, você pode aprender os conceitos de persistência utilizando apenas Node.js, Express e arquivos JSON.

Neste projeto prático, vamos construir uma aplicação de uma cafeteria e entender como os dados saem do Frontend, passam pelo Backend e são armazenados em um arquivo JSON.

Além de ser um excelente projeto para portfólio, ele ajuda a compreender como aplicações reais funcionam.

---

Como Funciona a Persistência de Dados?

Quando o usuário realiza um pedido na aplicação, o JavaScript captura as informações do formulário e envia os dados para o servidor utilizando a Fetch API.

No Backend, o Express recebe essas informações através de uma rota POST e, utilizando o módulo File System (FS) do Node.js, salva tudo em um arquivo JSON.

O fluxo é simples:

Frontend → Fetch API → Express → Arquivo JSON

Embora não seja um banco de dados tradicional, o conceito de persistência é exatamente o mesmo utilizado em aplicações maiores.

---

Criando o Servidor com Node.js e Express

Primeiro criamos o servidor utilizando o Express.

Também configuramos:

• express.json()
• express.static()
• Porta 3000
• Pasta public
• Middleware para trabalhar com JSON

Com isso, conseguimos servir os arquivos HTML, CSS e JavaScript e preparar o Backend para receber informações.

---

Lendo os Dados do Arquivo JSON

Para acessar os pedidos já armazenados, utilizamos o módulo File System do Node.js.

Primeiro fazemos a leitura:

fs.readFileSync()

Em seguida, transformamos o conteúdo do arquivo em objetos JavaScript:

JSON.parse()

Assim podemos manipular os dados normalmente.

---

Salvando Informações em JSON

Depois de ler os dados existentes, adicionamos um novo pedido utilizando:

push()

E então fazemos a gravação utilizando:

fs.writeFileSync()

Para salvar corretamente, convertemos os objetos em JSON:

JSON.stringify()

Dessa forma os dados permanecem armazenados mesmo após reiniciar a aplicação.

---

Criando uma Rota POST

A rota POST é responsável por receber os dados enviados pelo Frontend.

Exemplo:

app.post('/salvar', (req, res) => {

})

As informações chegam através do:

req.body

Após validar os dados, chamamos a função responsável por gravar tudo no arquivo JSON.

---

Criando uma Rota GET

Também criamos uma rota para listar os pedidos armazenados:

app.get('/ler', (req, res) => {

})

Essa rota devolve os dados salvos para o Frontend.

---

Construindo o Frontend

No Frontend utilizamos:

• HTML
• CSS
• JavaScript
• DOM
• Eventos
• addEventListener
• Arrays
• Objetos

Os produtos são adicionados em um carrinho e o valor total é calculado automaticamente.

---

Enviando Dados com Fetch API

Ao clicar em “Salvar Pedido”, utilizamos:

fetch()

Enviando:

• método POST;
• headers;
• application/json;
• JSON.stringify().

O servidor recebe as informações e faz a persistência dos dados.

---

Por Que Aprender Assim?

Aprender persistência utilizando arquivos JSON é uma excelente forma de entender os conceitos antes de partir para bancos de dados como:

• MySQL
• PostgreSQL
• SQL Server
• MongoDB

Quando você compreende como os dados trafegam entre Frontend e Backend, trocar o arquivo JSON por um banco de dados é apenas uma mudança de ferramenta.

O conceito continua sendo o mesmo.

---

Conclusão

Você não precisa começar pelo MySQL para aprender persistência de dados.

Utilizando apenas Node.js, Express e JSON, é possível construir aplicações completas e entender como os dados são enviados, processados e armazenados.

Mais importante do que decorar comandos é compreender como a comunicação entre cliente e servidor acontece.

É esse entendimento que vai facilitar o aprendizado de qualquer tecnologia no futuro.

---

Assista ao Projeto Completo

🎥 Vídeo completo no YouTube:

---

Tecnologias Utilizadas

• JavaScript
• Node.js
• Express
• JSON
• Fetch API
• HTML
• CSS
• DOM
• Eventos
• addEventListener
• Arrays
• Objetos
• Frontend
• Backend
• API REST
• File System (FS)