GoStack Módulo 02 – Ambiente e Conceitos

Nesse módulo continuaremos a instalação do ambiente de desenvolvimento e teremos explicações de alguns conceitos de NodeJS e API REST.

Node e npm

Como meu sistema operacional é windows a instalação do Node e do NPM feita usando o Chocolatey, que é um gerenciador de pacotes para o Windows.

A instalação com Chocolatey é recomendada pois facilita as instalações de ferramentas e frameworks de desenvolvimento no ambiente Windows.

Com o Chocolatey já instalado basta executar o comando abaixo para realizar a instalação

cinst nodejs
# ou para instalação completa já com o npm
cinst nodejs.install

Para verificar a versão do Node e npm instalados use os comandos abaixo

#para mostrar a versão do Node
node -v
#para mostrar a versão do npm
npm -v

Instalação do Yarn

O Yarn é um gerenciador de dependências, com ele é possível instalar bibliotecas de terceiros em seus projetos. O Yarn tem um tratamento de cache que deixa suas instalações bem mais ágeis que o npm. Abaixo o código de instalação do Yarn

#para instalar o yarn com Chocolatey
choco install yarn
#para verificar a versão atual
yarn --version

Conceitos do NodeJS, NPM e Yarn

• Node é uma plataforma para criar backends
• O Node utiliza JavaScript como linguagem para programar as regras de negócio do seu projeto
• O Node não interfere em ações de frontend como botões mudando de cores e outras funções definidas somente na interface
• Ele foi construído baseado na V8, que é a engine do Google Chrome
• Como foi falado anteriormente o NPM e o Yarn são gerenciadores de dependências
• São comparáveis ao Composer do PHP ou Gems do Ruby

Conceitos de API REST

Uma API funciona com Fluxo de requisição e resposta, onde um cliente faz uma requisição e a API retorna uma estrutura de dados, estrutura essa que geralmente vem em formato JSON (JavaScript Object Notation). O Cliente recebe a resposta e processa o resultado. Quando se fala em processar o resultado é por que o frontend recebe somente o JSON e não o HTML como acontece no paradigma MVC puro.

As requisições são feitas a partir de rotas (URLs), que utilizam os métodos HTTP para realizar as requisições.

• GET http://api.com.br/users –> Listar todos
• GET http://api.com.br/users/1 –> Lista o usuário 1
• POST http://api.com.br/users –> Criar um usuário
• PUT http://api.com.br/users/1 –> Atualizar o usuário 1
• DELETE http://api.com.br/users/1 –> Deletar usuário 1

Esse conceito de API REST traz vários benefícios como múltiplos clientes (frontends) conectados ao mesmo backend e uma comunicação padronizada devido a utilização do JSON, pois qualquer cliente entende ele. Sendo assim a mesma API serve para um cliente Web ou Mobile.

Exemplo de JSON

{
 "user": {
   "name": "Abner Oliviera",
   "email": "abner.oliveira.ce@gmail.com",
   "tech": ["PHP","ReactJS","NodeJS","React Native"],
   "company": {
     "name": "CBMCE",
     "url": "https://bombeiros.ce.gov.br"
    }
  }
}

Conteúdo da requisição

A URL da requisição é composta pela Route, os Routes Params e Query Params

A lista abaixo ilustra os parâmetros desta rota http://api.com/company/1/users?page=2

• Route: http://api.com/company/1/users?page=2
• Route Params: http://api.com/company/1/users?page=2
• Query Params: http://api.com/company/1/users?page=2

Códigos de retornos HTTP

Os códigos HTTP indicam se a requisição foi concluída com sucesso. As respostas estão divididos em faixas de 100 a 500

• Faixa 1XX: tem caráter informativo
• Faixa 2XX: Sucesso (200-OK; 201-Created …)
• Faixa 3XX: Indicam redirecionamento (302-Found …)
• Faixa 4XX: Erro do cliente (Bad request; Unauthorized, Forbidden …)
• Faixa 5XX: Erro de servidor (Internal error server; Bad gateway; Gateway timeout)

Criando a primeira aplicação

Para iniciar o projeto entre na pasta pelo Terminal ou Power Shell se estiver no Windows e use o código abaixo

#para criar o package.json
yarn init -y 

yarn add express

#para abrir VSCode
code .

O package.json é o arquivo criado toda vez que se inicia um projeto NodeJS. Nele é registrado scripts, dependências de desenvolvimento e produção e metadados do projeto. Já o Express é um framework para criar backends no NodeJS.

Quando é adicionado o express também é criada a pasta node_modules que guarda todas as dependências do projeto. Agora é necessário criar um arquivo index.js para iniciar a codificação. O index.js deve ficar como o código abaixo

const express = require('express');

const server = express();

server.get('/teste', (req, res) => {
  return res.json({ message: 'Hello World' });
})

server.listen(3000);

A primeira linha importa todo o express para dentro da variável express, na segunda monta o servidor a partir da função express() setando a variável server.

A rota HTTP sempre solicita um req e um res e uma função com o retorno que pode ser um objeto JSON.

A linha server.listen(3000) define a porta que o cliente deve chamar.

Para inicializar o servidor deve-se usar node index.js no terminal.

Utilizando os Route Params

Os Route params são parâmetros que vem direto na rota como mostrado anteriormente. Vamos alterar o index.js para capturar como capturar esse parâmetros.

const express = require('express');

const server = express();

server.get('/teste/:name', (req, res) => {

  //buscando o name direto da URL
  const name = req.params.name;
  return res.json({ message: `Hello ${name} ` });
})

server.listen(3000);

Para facilitar é possível utilizar a desestruturação alterando o código para o debaixo.

const { name } = req.params;

Utilizando o Insomnia

O Insomnia é um cliente REST open source, através dele é possível fazer todos os tipo de testes de requisições, o que auxilia bastante no desenvolvimento da API.

Colocando a URL gerada no index.js temos os mesmo json como resultado e ainda temos mais informações sobre a requisição como o tempo, código HTTP, Header dentre outras.

Utilizando o Nodemon

O nodemon é um aplicativo que detecta toda vez que um arquivo é alterado no seu projeto e automaticamente reinicia o servidor Node, o que agiliza bastante o desenvolvimento.

Com o nodemon é possível definir quais extensões e pastas serão monitoradas.

#adicionar o nodemon ao projeto como dependência de desevolvimento
yarn add nodemon -D

Agora é necessário definir o script no package.json para facilitar a chamada do nodemon. Sendo assim deve ser inserido o código abaixo no seu package.json

"scripts": {
  "dev": "nodemon index.js"
},

Com essa alteração para iniciar o servidor basta utitlizar yarn dev uma única vez e o nodemon reiniciará o servidor toda vez que for detectada alguma alteração nos arquivos do projeto.

O primeiro CRUD

Nessa parte é possível criar um cadastro de usuários utilizando os recursos do ExpressJS. Como ainda não há conexão com o banco será utilizado um array (users) para guardar as informações.

Levando-se em conta que toda vez que os servidor for reiniciado, pelo nodemon ou manualmente o array será reiniciado.

No total serão criadas 5 rotas com os métodos index, show, create, update e destroy.

Inicialmente é necessário definir o array.

const users = ['Abner', 'Pedrita', 'Leônidas'];

Também é necessário inserir o módulo de json dentro do servidor para trabalhar corretamente com o array.

server.use(express.json())

Então iniciando pelo método index, que deve listar usuários cadastrados no array em formato de json. O código deve ficar assim

//index --> listar todos
server.get('/users', (req, res) => {
  return res.json(users)
})

Para testar é necessário criar uma requisição do tipo GET no Insomnia com o nome Listar todos usuários e direcionar parar a rota http://localhost:3000/users. O resultado deve o array abaixo:

[
  "Abner",
  "Pedrita",
  "Leônidas"
]

A segunda rota é a Show e deve listar um usuário do array de acordo com o índice passado na requisição.

//show -->  listar por index do array
server.get('/users/:index', (req, res) => {

  //buscando o nome utilizando route params
  const { index } = req.params;

  return res.json(users[index]);
});

Ainda é necessário criar outra requisição GET passando o índice do array que deve ser mostrado. A rota fica http://localhost:3000/users/2 o Insomina deve mostrar o valor do array no índice 2 no caso Leônidas.

Para inserir um novo usuário no array é necessário pegar os direto do body.

server.post('/users', (req, res) => {
  const { name } = req.body;

  users.push(name);

  return res.json(users);
});

Para o teste é necessário criar a requisição do tipo POST http://localhost:3000/users e definir o o BODY como JSON.

No caso vamos inserir o Hugo no array o body da requisição de ficar assim

{
  "name": "Hugo"
}

O resultado deve ficar assim

[
  "Abner",
  "Pedrita",
  "Leônidas",
  "Hugo"
]

Para atualizar o array é necessário passar tanto um body quanto um req.params na url. A requisição deve ser do tipo PUT com o body do formato JSON. Sendo assim o formato da url da requisição fica: http://localhost:3000/users/2

//update
server.put('/users/:index', (req, res) => {
  const { index } = req.params;
  const { name } = req.body;

  users[index] = name;

  return res.json(users);
});

O body deve ficar assim

{
  "name": "Leônidas Augusto"
}

E o resulta assim

[
  "Abner",
  "Pedrita",
  "Leônidas Augusto"
]

A última rota a ser criada é a de DELETE, onde basta passar o index do array a ser deletado pelo req.params. Então deve ser criada uma requisição do tipo DELETE sem body. O formato da requisição fica http://localhost:3000/users/1

server.delete('/users/:index', (req, res) => {
  const { index } = req.params;

  users.splice(index, 1);

});

As boas práticas dizem que não é necessário retornar um json após um DELETE, para ver a alista atualizada basta acessar a requisição listar todos que deve aparecer desta forma

[
  "Abner",
  "Leônidas Augusto",
  "Hugo"
]

O código final do arquivo index.js é esse abaixo

const express = require('express');

const server = express();
server.use(express.json())

const users = ['Abner', 'Pedrita', 'Leônidas'];

//index --> listar todos
server.get('/users', (req, res) => {
  return res.json(users)
})

//show -->  listar por index do array
server.get('/users/:index', (req, res) => {

  //buscando o nome utilizando route params
  const { index } = req.params;

  return res.json(users[index]);
});

//create
server.post('/users', (req, res) => {
  const { name } = req.body;

  users.push(name);

  return res.json(users);
});

//update
server.put('/users/:index', (req, res) => {
  const { index } = req.params;
  const { name } = req.body;

  users[index] = name;

  return res.json(users);

});

//destroy
server.delete('/users/:index', (req, res) => {
  const { index } = req.params;

  users.splice(index, 1);
    
});

server.listen(3000);

O próximo módulo inicia o desenvolvimento do projeto GoBarber. Antes disse é preciso fazer o Desafio 1: Conceitos de Nodejs.

Tags: GoStack | node | yarn