Guia Prático: Construindo e Consumindo APIs REST com Node.js

Este tutorial tem como objetivo apresentar os passos fundamentais para construir e consumir APIs REST em JavaScript. Ao final, você deverá compreender como estruturar endpoints, realizar chamadas HTTP e trocar dados no formato JSONTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas.. O foco é a criação de uma API simples usando Node.jsIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web. com ExpressCriando Aplicações Web com Express.jsAprenda a dominar Express.js com este tutorial prático que ensina configuração, criação de rotas, middlewares e muito mais para suas aplicações Node. e o consumo dessa APIConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos. em aplicações front-end.

O que é uma API REST?🔗

Uma APIConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos. REST (Representational State Transfer) é um estiloRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho. de arquitetura para a troca de dados entre sistemas, geralmente usando o protocolo HTTP. É amplamente utilizada para implementar serviços que podem ser consumidos por diversas aplicações - web, mobile ou até mesmo de desktop. Entre suas principais características estão:

Uso de Verbos HTTP: GET, POST, PUT, DELETE, etc., para indicar a ação desejada.
Formatos de Resposta: JSON é o mais comum no ecossistema JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente..
Stateless: Cada requisição deve conter todas as informações necessárias para ser compreendida pela APIConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos..

Princípios Fundamentais de uma API REST🔗

Para que sua API seja considerada RESTful, é importante!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. seguir alguns conceitos básicos:

1. Recursos e Endpoints

Cada “recurso” da aplicação deve ter um endpoint único.
Exemplo: /usuarios, /produtos, /pedidos.

2. Verbos HTTP

GET: Busca (ou lê) informações.
POST: Cria novo recurso.
PUT ou PATCH: Atualiza atributos de um recurso.
DELETE: Remove recurso.

3. Status Codes

200 para sucesso em requisições GET, PUT, DELETE.
201 para sucesso em criação de recurso (POST).
400 para erros de cliente (requisições inválidas).
404 para recurso não encontrado.
500 para erros de servidor.

4. Uso de JSONTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas.

O JSON (JavaScript Object NotationTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas.) é o formato mais comum de dados transferidos em APIs REST no ecossistema JavaScript.

Criando uma API REST com Node.js e Express🔗

A seguir, veremos como criar uma APIConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos. REST simples em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., usando [Node.js](https://nodejs.org) e o ExpressCriando Aplicações Web com Express.jsAprenda a dominar Express.js com este tutorial prático que ensina configuração, criação de rotas, middlewares e muito mais para suas aplicações Node..

Configurando o Projeto

1. Crie uma pasta para o seu projeto e acesse-a via terminal.

2. Inicialize o npmIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web.:

npm init -y

3. Instale o ExpressCriando Aplicações Web com Express.jsAprenda a dominar Express.js com este tutorial prático que ensina configuração, criação de rotas, middlewares e muito mais para suas aplicações Node.:

npm install express

Estrutura Mínima

Crie um arquivo chamado app.js (ou outro nome de sua preferência) com o conteúdo abaixo:

const express = require('express');
const app = express();
const PORT = 3000;
// Middleware para interpretar JSON no corpo das requisições
app.use(express.json());
// Rota GET para retornar uma lista de usuários (exemplo)
app.get('/api/usuarios', (req, res) => {
  const usuarios = [
    { id: 1, nome: 'Alice' },
    { id: 2, nome: 'Bob' }
  ];
  res.status(200).json(usuarios);
});
// Rota POST para criar um novo usuário
app.post('/api/usuarios', (req, res) => {
  const novoUsuario = req.body; // corpo da requisição
  // Lógica de inserção no banco de dados ou array etc.
  res.status(201).json({
    mensagem: 'Usuário criado com sucesso!',
    usuario: novoUsuario
  });
});
// Rota PUT para atualizar um usuário existente
app.put('/api/usuarios/:id', (req, res) => {
  const id = req.params.id;
  const dadosAtualizados = req.body;
  // Lógica para atualizar o usuário no banco de dados
  res.status(200).json({
    mensagem: `Usuário ${id} atualizado com sucesso`,
    novosDados: dadosAtualizados
  });
});
// Rota DELETE para remover um usuário
app.delete('/api/usuarios/:id', (req, res) => {
  const id = req.params.id;
  // Lógica para remover o usuário do banco de dados
  res.status(200).json({
    mensagem: `Usuário ${id} removido com sucesso`
  });
});
// Iniciando o servidor na porta especificada
app.listen(PORT, () => {
  console.log(`Servidor rodando em http://localhost:${PORT}`);
});

Chamamos app.get('/apiConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos./usuarios', ...) para retornar dados referentes a usuários.
Chamamos app.post('/apiConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos./usuarios', ...) para criar dados.
Chamamos app.put('/apiConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos./usuarios/:id', ...) para atualizar dados.
Chamamos app.delete('/apiConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos./usuarios/:id', ...) para remover dados.

Executando o Servidor

No terminal, execute:

node app.js

Se tudo funcionar corretamente, o servidor estará rodando em http://localhost:3000.

Consumindo a API REST🔗

Uma vez que temos uma APIConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos. rodando, podemos consumir seus endpoints a partir de qualquer aplicação que faça requisições HTTP. Aqui, vamos mostrar um consumo simples no front-end usando a funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. nativa fetchConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos..

Exemplo de Chamada GET

Suponha que você possua uma página HTMLO que é HTML? Fundamentos, História e Evolução da LinguagemDescubra a origem e evolução do HTML, entendendo sua importância na estrutura da web e como influenciou o desenvolvimento digital moderno. com um botão para listar usuários. Ao clicar, será feita uma requisição GET para nossa rota /apiConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos./usuarios:

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Consumindo API</title>
</head>
<body>
  <button id="listar-usuarios">Listar Usuários</button>
  <ul id="lista-usuarios"></ul>
  <script>
    const btnListar = document.getElementById('listar-usuarios');
    const ulUsuarios = document.getElementById('lista-usuarios');
    btnListar.addEventListener('click', () => {
      fetch('http://localhost:3000/api/usuarios')
        .then(response => response.json())
        .then(data => {
          ulUsuarios.innerHTML = '';
          data.forEach(usuario => {
            const li = document.createElement('li');
            li.textContent = `ID: ${usuario.id}, Nome: ${usuario.nome}`;
            ulUsuarios.appendChild(li);
          });
        })
        .catch(error => {
          console.error('Erro ao listar usuários:', error);
        });
    });
  </script>
</body>
</html>

Quando o botão Listar Usuários é clicado, o fetchConsumindo APIs com Fetch e AxiosDescubra como integrar APIs com Fetch e Axios em JavaScript. Aprenda a fazer requisições HTTP, tratar erros e usar métodos GET e POST com exemplos práticos. envia uma requisição GET para nossa API. Em seguida, convertemos a resposta para JSONTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas. e exibimos as informações na tela.

Exemplo de Chamada POST

Para criar um novo usuário, fazemos uma requisição POST, normalmente com um formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. ou algo semelhante:

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Criar Usuário</title>
</head>
<body>
  <form id="form-usuario">
    <input type="text" id="nome" placeholder="Nome do usuário" required />
    <button type="submit">Criar Usuário</button>
  </form>
  <div id="resposta"></div>
  <script>
    const form = document.getElementById('form-usuario');
    const respostaDiv = document.getElementById('resposta');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const nome = document.getElementById('nome').value;
      fetch('http://localhost:3000/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ nome })
      })
        .then(response => response.json())
        .then(data => {
          respostaDiv.textContent = data.mensagem;
        })
        .catch(error => {
          console.error('Erro ao criar usuário:', error);
        });
    });
  </script>
</body>
</html>

Assim, enviamos o nome do novo usuário pelo corpo da requisição, no formato JSONTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas., e nossa API irá lidar com o processamento desses dados.