Como criar uma API REST com NodeJS parte 02 – Construindo rotas, requisições e verbos

E ai, tudo bem? Vamos prosseguir com as aulas sobre como criar uma API REST, e hoje nós vamos para uma das partes mais interessantes, na minha opinião: Criação das ROTAS e trabalhar nas requisições e verbos!

Se você não viu a primeira aula, clique aqui para poder entender como fazer toda a instalação e preparar o ambiente de desenvolvimento. E também, vou deixar aqui o índice de postagens dessa sequencia para que você possa se organizar:

• Parte 01: Instalações, estrutura de projeto e ambiente de desenvolvimento
• Parte 03: Conexão com o Banco de dados (Em construção)
• Parte 04: Middlewares e validações (Em construção)
• Parte 05: Deploy em produção (Em construção)

** Como você pode perceber, os artigos ainda estão sendo construídos, então nos siga no Instagram para que você saiba assim que o artigo ficar disponível.

Mas sem delongas, vamos começar de fato o artigo porque aqui a gente gosta é de codar! Bora

Construindo Rotas

Bem, o primeiro passo para começar a construir as rotas é instalar o Express. O Express é uma biblioteca toda preparada para receber requisições HTTP.

Você pode fazer isso na mão e não querer utilizar o Express, mas quando já existe uma biblioteca que te ajuda com alguma coisa, é melhor você utiliza-la do que reinventar a roda.

Só pra recapitular, o nosso projeto está da seguinte forma:

Então vamos ao código, abra o arquivo index.js e coloque o seguinte código

require("dotenv-flow").config();
const express = require("express");
const app = express();

app.get("/", function (req, res, next) {
  res.status(200).send("Olá ORANGO.dev!");
});

app.listen(3000);

E claro, aqui não tem só ctrl+c,ctrl+v… Vamos pra explicação:

• Na primeira linha nós estamos utilizando a extensão dotenv-flow, que serve para aplicar no nosso programa as variáveis de ambiente que nós configuramos na aula anterior.
• Em seguida, nas linhas dois e três, nós importamos a biblioteca express e instanciamos ela na variavel app
• Das linhas 5 a 7, nós estamos criando de fato uma rota do tipo GET (quando acessar a raiz da aplicação, por isso a “/”)que é a que usamos geralmente para uma requisição simples para obter alguma informação do servidor, e estamos imprimindo na tela um Olá ORANGO.dev! quando acessamos essa rota
• E por fim, na linha 9, estamos dizendo que a nossa API ficará disponível na porta 3000. Ou seja, quando a gente acessar no browser, ela sempre será acessada com :3000 no final. PS: Isso pode ser configurado, e você pode colocar a porta que preferir

Bem, ok, agora você pode rodar a sua aplicação indo no terminal e digitando

npm run dev

E quando você acessar no seu browser http://localhost:3000 você deve ver uma tela mais ou menos assim:

Legal, mas isso está muito exposto, tem uma solução um pouco mais elegante então vamos começar DE FATO as regras de negócios com a nossa API e separar alguns arquivos. Vamos aos Handlers

Requisições e Handlers

Bem, vamos fazer um CRUD(Create, Read, Update and Delete) de usuários nessas aulas ok? Então o primeiro passo é ir na pasta handlers e criar um arquivo users.js

Este é o arquivo que vamos fazer todo o controle dos usuários. EU utilizo dessa forma pra ficar mais organizado do que todas as todas no mesmo arquivo como algumas pessoas costumam fazer.

Este arquivo deve ficar assim:

exports.fetch = (req, res, next) => {
  return res.status(200).json([
    {
      name: "Bruno Braga",
      age: 29,
    },
    {
      name: "Mathias Vilas Boas",
      age: 22,
    },
    {
      name: "Mateus Barros",
      age: 26,
    },
  ]);
};

E como de costume, vamos para a explicação de cada uma das partes

• Na primeira linha, nós estamos exportando a função FETCH, que vai ser a responsável por buscar os usuários(futuramente no nosso banco de dados). Os parâmetros que passamos na arrow function REQ, RES e NEXT, são parâmetros de todas as rotas definidas no Express.
  • REQ(REQUEST): Todos os dados da requisição que o usuário fez, virá neste objeto
  • RES(RESPONSE): É o objeto que vai responder a requisição
  • NEXT: Deixa essa função um pouquinho por enquanto, na hora que chegarmos na etapa de Middlewares você vai entender.
• Na segunda linha a gente responde a requisição do usuário respondendo o Status Code 200 e um JSON com uma lista de todos os usuários

Bem, agora precisamos mudar novamente o nosso index.js certo? Bora lá, ele deve ficar assim:

require("dotenv-flow").config();
const express = require("express");
const app = express();

const { fetch } = require("./handlers/user");

app.get("/", function (req, res, next) {
  res.status(200).send("Olá ORANGO.dev!");
});

app.get("/users", fetch);

app.listen(3000);

E explicando o que mudou:

• Quando adicionamos o const { fetch } = require(“./handlers/user”); estamos incluindo a função que exportamos no handler de user
• E também adicionamos app.get(“/users”, fetch); que faz com que na rota “/users” ele responda a função que acabamos de criar no handler

Legal, agora já temos uma estrutura mais organizada. E se você acessar o seu browser com http://localhost:3000/users você vai conseguir ver a lista de usuários que a gente colocou na função fetch

Verbos

Bem, aqui nós vamos passar rapidamente porque vai fazer mais sentido quando estivermos trabalhando com banco de dados, que é na próxima aula, mas vamos lá.

Adicione as linhas abaixo no seu arquivo users.js dentro dos handlers

exports.create = (req, res, next) => {};
exports.update = (req, res, next) => {};
exports.deleteUser = (req, res, next) => {};

Isso nada mais é para definir as funções que vão fazer a criação, a atualização e a exclusão dos seus usuários(por isso eu disse que vai fazer mais sentido na hora que tivermos banco de dados)

Voltemos no arquivo index.js e vamos adicionar essas funções na hora de importar esse handler

const { fetch, create, update, deleteUser } = require("./handlers/user");

E agora vamos criar as rotas para cada uma das funções que acabamos de criar

app.get("/users", fetch);
app.post("/users", create);
app.put("/users/:id", update);
app.delete("/users/:id", deleteUser);

Perceba que agora cada rota utiliza um verbo específico, para obter a lista usamos o GET, para criar um novo usuário, utilizamos o POST, para atualizar um usuário já existente, utilizamos o PUT e por fim, para deletar algum usuário utilizamos o verbo DELETE.

Se você não entende muito bem como funcionam os verbos recomendo vocês lerem o texto que publiquei explicando exatamente como funciona uma API REST

Legal, agora nosso arquivo de index.js estará dessa forma:

Para podermos testar cada uma das requisições sugiro vocês instalarem o Insomnia, que é um software que você consegue testar qualquer verbo de uma forma muito simples. Mas por hoje vamos apenas testar o GET que, como vimos acima.

Os arquivos da forma com que deixamos esse artigo hoje Orango – Artigo 02. Pra poder comparar se funciona no seu ou não ok?

Perfeito, tudo configurado, programamos as rotas e agora vamos partir para a parte de banco de dados na próxima aula.

• Parte 03: MongoDB – Conexão com Banco de dados e Models

Espero que este post tenha te proporcionado algum conhecimento a mais, se tiver dúvidas deixe nos comentários… Até a próxima, e tchau! 😉