🛠️ Criando uma API Node.js com Express + CORS e consumindo com HTML + Bootstrap

Neste artigo, vamos aprender a criar uma API básica em Node.js utilizando o framework Express e o middleware CORS. Em seguida, vamos consumir essa API em uma página HTML que permite realizar operações CRUD (Criar, Ler, Atualizar e Deletar) usando a Fetch API e o Bootstrap para estilização.

🤖 O que é uma API?

API significa Application Programming Interface (em português, Interface de Programação de Aplicações).

Em resumo, uma API é um conjunto de regras que permite que dois sistemas diferentes "conversem" entre si.

🧠 Uma explicação simples

Pense na API como um garçom em um restaurante:

• Você (cliente) olha o cardápio (interface).
• Faz um pedido (requisição).
• O garçom (API) leva seu pedido para a cozinha (o sistema).
• Depois, ele traz a comida pronta (resposta).

Você não precisa saber como a cozinha funciona, apenas como fazer o pedido certo. A API cuida do resto.

🛠 Em termos técnicos

Uma API define rotas/endpoints e métodos (como GET, POST, PUT, DELETE) para:

• Buscar dados
• Criar dados
• Atualizar dados
• Deletar dados

Exemplo de chamadas:

📱 Exemplo do dia a dia

Um site de clima pode usar uma API para buscar:

• Temperatura atual
• Previsão dos próximos dias

Já um app de delivery pode usar várias APIs:

• Para mostrar restaurantes
• Para processar pagamentos
• Para rastrear entregas

🧑‍💻 Em Node.js, como veremos, criamos APIs com Express para:

• Criar servidores rápidos e leves
• Definir rotas e respostas
• Trabalhar com dados no formato JSON

Agora que já entendemos o que é uma API, vamos parar de teoria e colocar a mão na massa.

🧰 Configurando o Ambiente

Primeiro, você precisa ter o Node.js instalado em sua máquina. Você pode baixá-lo aqui:

• Node.js Downloader

Depois de instalar o Node.js, criremos a estrutura da API.

📁 Estrutura da API

crud-api/
├── server.js
├── package.json

Server.js

O arquivo server.js é o arquivo principal da aplicação. Nele fica o código do servidor Node.js, que geralmente usa o Express para criar rotas e endpoints da API.

Ele é o ponto de entrada do projeto, ou seja, quando você roda node server.js, é esse arquivo que será executado.

Package.json

Este arquivo é o coração do projeto Node.js. Ele contém:

As informações do projeto (nome, versão, descrição, autor).

A lista de dependências (como express, cors etc.).

Scripts que você pode executar com npm run.

Outras configurações para o projeto.

Exemplo básico de package.json:

{
  "name": "crud-api",
  "author": "Rodrigo Zandonadi",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2"
  }
}

Veremos um exemplo de criação do arquivo server.js abaixo.

1️⃣ Iniciando o projeto

Vamos criar um novo diretório para o seu projeto e inicializar um novo projeto Node.js:

mkdir crud-api
cd crud-api
npm init -y

O comando npm init -y cria um arquivo package.json, que é o start de um projeto node.js.

2️⃣ Instalando Dependências

📦 O que são dependências em um projeto Node.js?

As dependências são bibliotecas externas (ou pacotes) que seu projeto precisa para funcionar corretamente.

Por exemplo:

Se você quer criar um servidor web mais facilmente (que é o nosso caso), você usa o pacote express.

Se você precisa permitir que sua API seja acessada de outros domínios, você usa cors.

Se for conectar a um banco MongoDB, pode usar mongoose.

Essas bibliotecas são instaladas via npm (Node Package Manager), com o comando:

npm install <nome-do-pacote>

Instale as dependências necessárias: Express e CORS.

npm install express cors

Caso prefira, você pode utilizar o yarn para manipular as dependências. Para isso você precisa instalar o globalmente na sua máquina, com o comando npm install --global yarn, e, em seguida, rodar no diretório da sua API:

yarn add express cors

📁 Onde as dependências ficam?

Elas são baixadas e salvas na pasta node_modules (automaticamente).

Também são listadas no arquivo package.json, dentro da chave "dependencies":

"dependencies": {
  "express": "^4.18.2",
  "cors": "^2.8.5"
}

🛠 Exemplo prático

Quando você instala algo assim:

npm install express cors

O package.json fica assim:

"dependencies": {
  "express": "^4.18.2",
  "cors": "^2.8.5"
}

E no seu código (server.js), você pode usar assim:

const express = require('express');
const cors = require('cors');

⚠️ Dica Importante

A pasta node_modules não deve ser enviada para o Git. Por isso, você geralmente inclui ela no arquivo .gitignore.

É só criar um arquivo .gitignore e adicionar node_modules nele.

node_modules

3️⃣ Criando a Estrutura da API

Crie um arquivo chamado server.js e adicione o seguinte código:

const express = require('express'); // insere o módulo do express na variável express


const app = express(); // Cria uma instância do servidor Express.
const PORT = 3000; // Define a porta do seu computador onde o servidor vai rodar. No caso, a porta 3000 é usada por __default__ (padrão) ao trabalhar com Node.js

app.use(express.json()); // Permite que o Express entenda requisições com body em formato JSON (como em POST e PUT).

// O código abaixo inicia o servidor na porta 3000.
app.listen(PORT, () => {
    console.log(`Servidor rodando em http://localhost:${PORT}`);
});

Abaixo temos o código completo do server.js:

const express = require('express');
const cors = require('cors'); 

const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

let items = [];

// Criar um item
app.post('/api/items', (req, res) => {
    const item = req.body;
    items.push(item);
    res.status(201).json(item);
});

// Ler todos os itens
app.get('/api/items', (req, res) => {
    res.json(items);
});

// Atualizar um item
app.put('/api/items/:id', (req, res) => {
    const { id } = req.params;
    const updatedItem = req.body;
    items[id] = updatedItem;
    res.json(updatedItem);
});

// Deletar um item
app.delete('/api/items/:id', (req, res) => {
    const { id } = req.params;
    items.splice(id, 1);
    res.status(204).send();
});

app.listen(PORT, () => {
    console.log(`Servidor rodando em http://localhost:${PORT}`);
});

Agora vou explicar passo a passo esse arquivo.

Explicação

🔌 1. Importando bibliotecas

const express = require('express');
const cors = require('cors');

express: Framework que simplifica a criação de servidores HTTP com Node.js.
cors: Middleware que habilita o CORS (Cross-Origin Resource Sharing), permitindo que seu servidor aceite requisições de diferentes origens (por exemplo, de um frontend rodando em outro domínio).

🚀 2. Inicializando o app

const app = express();
const PORT = 3000;

app: Cria uma instância do servidor Express.
PORT: Define a porta onde o servidor vai rodar.

⚙️ 3. Middlewares globais

app.use(cors());
app.use(express.json());

app.use(cors()): Permite que qualquer domínio acesse a API (útil para consumir com o frontend).
app.use(express.json()): Permite que o Express entenda requisições com body em formato JSON (como em POST e PUT).

📦 4. Base de dados simulada

let items = [];

Simula um "banco de dados em memória" com um array de objetos.

Os dados serão perdidos ao reiniciar o servidor (útil para testes simples).

📩 5. Criar um item (POST)

app.post('/api/items', (req, res) => {
    const item = req.body;
    items.push(item);
    res.status(201).json(item);
});

Rota POST /api/items

Lê os dados do corpo da requisição (req.body), adiciona ao array items, e retorna o item criado com status 201 (Created).

📥 6. Ler todos os itens (GET)

app.get('/api/items', (req, res) => {
    res.json(items);
});

Rota GET /api/items

Retorna todos os itens do array items como JSON.

✏️ 7. Atualizar um item (PUT)

app.put('/api/items/:id', (req, res) => {
    const { id } = req.params;
    const updatedItem = req.body;
    items[id] = updatedItem;
    res.json(updatedItem);
});

Rota PUT /api/items/:id

Atualiza um item com o índice (id) informado na URL, substituindo pelo novo conteúdo do req.body.

⚠️ Aqui o id é o índice do array (não um ID único real). Cuidado com isso em projetos reais!

🗑️ 8. Deletar um item (DELETE)

app.delete('/api/items/:id', (req, res) => {
    const { id } = req.params;
    items.splice(id, 1);
    res.status(204).send();
});

Rota DELETE /api/items/:id

Remove o item com índice id do array.

Retorna status 204 (No Content) para indicar que foi deletado com sucesso.

🔊 9. Iniciando o servidor

app.listen(PORT, () => {
    console.log(`Servidor rodando em http://localhost:${PORT}`);
});

Inicia o servidor na porta 3000.

Exibe uma mensagem no console para indicar que o servidor está ativo.

4️⃣ Testando a API

Inicie o servidor com o comando:

node server.js

Ou crie um script no package.json na seção scripts, acima de dependencies:

"scripts": {
  "start": "node server.js"
},
"dependencies": {
  "express": "^4.18.2",
  "cors": "^2.8.5"
}

Então, rode o script no terminal:

npm start

Se quiser testar os endpoints separadamente, use ferramentas como Insomnia ou Postman.

Agora, você pode fazer requisições para http://localhost:3000/api/items.

Se você não souber como fazer esse passo, fique tranquilo. Faremos os testes após criar a página HTML direto no navegador.

5️⃣ Criando a Página HTML

Crie uma página HTML dentro de um projeto frontend para consumir os dados de sua API:

📁 Estrutura da API

crud-frontend/
├── index.html
├── assets/css/styles.css (opicional)
├── assets/js/scripts.css (opicional)

Crie um arquivo chamado index.html e adicione o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD com API</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="mt-5">CRUD com API</h1>
        <form id="itemForm" class="mt-3">
            <input type="text" id="itemInput" class="form-control" placeholder="Digite um item" required>
            <button type="submit" class="btn btn-primary mt-2">Adicionar Item</button>
        </form>
        <ul id="itemList" class="list-group mt-3"></ul>
    </div>

    <script>
        const form = document.getElementById('itemForm');
        const itemInput = document.getElementById('itemInput');
        const itemList = document.getElementById('itemList');

        const fetchItems = async () => {
            const response = await fetch('http://localhost:3000/api/items');
            const items = await response.json();
            itemList.innerHTML = '';
            items.forEach((item, index) => {
                const li = document.createElement('li');
                li.className = 'list-group-item d-flex justify-content-between align-items-center';
                li.textContent = item;
                li.appendChild(createDeleteButton(index));
                itemList.appendChild(li);
            });
        };

        const createDeleteButton = (id) => {
            const button = document.createElement('button');
            button.className = 'btn btn-danger btn-sm';
            button.textContent = 'Deletar';
            button.onclick = async () => {
                await fetch(`http://localhost:3000/api/items/${id}`, { method: 'DELETE' });
                fetchItems();
            };
            return button;
        };

        form.onsubmit = async (e) => {
            e.preventDefault();
            const item = itemInput.value;
            await fetch('http://localhost:3000/api/items', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(item),
            });
            itemInput.value = '';
            fetchItems();
        };

        fetchItems();
    </script>
</body>
</html>

6️⃣ Testando a Aplicação

Abra o arquivo index.html em um navegador. Você deve ver um formulário onde pode adicionar itens. Os itens adicionados aparecerão em uma lista abaixo, e você poderá deletá-los.

Recaptilando

• Baixe o Node.js
• Crie um diretório para a api
• Baixe as dependências
• Crie o arquivo da API
• Teste a API
• Crie o projeto HTML
• Crie a página HTML
• Abra a página html em um navegador
• Teste a API através da página HTML

Conclusão

Neste artigo, você aprendeu a criar uma API básica em Node.js usando Express e CORS, além de consumir essa API em uma página HTML com operações CRUD. Essa é uma base sólida para desenvolver aplicações mais complexas.

Sinta-se à vontade para expandir essa aplicação, adicionando funcionalidades como edição de itens ou persistência em um banco de dados.

Se quiser se aprofundar na criação de APIs com Node.js utilizando um banoc de dados não-relacional bem poderoso, recomendo a leitura do artigo:

• Como criar uma API com Node.js e MongoDB usando ES6

E se tiver alguma dúvida, é só comentar que ajudo no que conseguir.