REST API com Node.js: Back-end e Front-end
Tags: javascript, node, webdev, api
Published: 2023-09-08 15:11:15

---
title: REST API com Node.js: Back-end e Front-end
published: true
date: 2018-11-14 12:56:38 UTC
tags: javascript,nodejs,webdev,api
canonical_url: 
---

Para começar esse tutorial vamos primeiro entender o que seriam **API’s** e qual a vantagem de usar essa abordagem em cima de um sistema único onde temos tudo integrado.

Podemos pensar em **API’s** como uma ponte que liga duas ilhas, mas no caso de software, uma **API** pode ser usada por diversas áreas de negócio não sendo necessário ao consumidor conhecer detalhes de sua implementação. Elas são **interfaces de integração** que facilitam na troca de informações entre **_n_** aplicações, podendo assim termos até mesmo várias caras para uma única aplicação, tendo uma versão móvel, outra desktop e um web.

Uma **API** pode ser acessada através de um endereço [minhaapi.com.br/api/v1/alunos](http://minha.com.br/api/alunos), onde ao acessarmos esse endereço teremos o seguinte retorno:

{% gist https://gist.github.com/iagocavalcante/2b6be652b48460795f8fa7cc9c92e8c7.js %}

Com isso temos uma representação de fácil entendimento de como seria uma **API** que retornaria uma lista de alunos e poderia ser usado em qualquer sistema que queira essa informação.

Dito isso podemos avançar ao próximo conceito, que seria o **REST**. Podemos entender **REST** ( **_Representational State Transfer_** ) como a padronização da arquitetura web, uma abstração do **protocolo HTTP** , **URL** e os **verbos HTTP**. Para ter uma **API REST** com um significado semântico onde olhamos certa **URL** e o verbo que é usado para a consumir, podemos entender quase de imediato qual comportamento esperar.

Temos 4 verbos principais e mais utilizados para realização de requisições, sendo eles: **GET** , **POST** , **PUT** ,  **DELETE**.

vamos ver como ficaria nossa **API** utlizando o  **REST** :

**GET** [minhaapi.com.br/api/v1/aluno](http://minha.com.br/api/alunos)s (onde iremos recuperar uma lista de alunos)

**POST** [minhaapi.com.br/api/v1/aluno](http://minha.com.br/api/alunos)s — data {nome: Aluno5, idade: 16}

**DELETE** [minhaapi.com.br/api/v1/aluno](http://minha.com.br/api/alunos)s/1 (aqui passamos o id 1 do aluno cadastrado e então ele será excluído)

**PUT** [minhaapi.com.br/api/v1/aluno](http://minha.com.br/api/alunos)s/1 — data {nome: Nome Novo, idade: 20} (já aqui passamos o id do aluno e mais as informações a serem atualizadas)

Agora que entendemos um pouco do padrão **REST** e como nos ajuda semanticamente a construir uma **API** melhor usando os verbos **HTTP** corretos para cada requisição, para refinar melhor as coisas, precisamos conhecer o status code, e o que é isso ?!

Toda requisição realizada para um servidor, sempre é retornado o status code na resposta, ele é o indicador do que foi que ocorreu com aquela requisição, se deu certo, se **API** falhou, se o servidor falhou ou se um determinado endereço existe. Recomendo o artigo da **caelum** para melhor entendimento sobre os [**padrões e principios REST**](http://blog.caelum.com.br/rest-principios-e-boas-praticas/).

Entendemos por alto o que é uma **API REST** com os parágrafos anteriores.

Agora vamos colocar isso em prática, vamos construir uma **API** em node, usando express e para tornar o artigo mais didático, estarei seguindo uma arquitetura simples. Vamos supor que sua máquina já está configurada com [**node**](https://nodejs.org/en/download/) e npm.

Nosso primeiro passo é criar um diretório para o projeto de **API** , vou chamar esse diretório de **alunos-api** , feito isso vamos abrir o terminal (qualquer um) e navegar até nossa pasta recém criada.

Estando na pasta vamos digitar:

```
npm init -y
```

Com esse comando estaremos criando um **package.json** que vai ser a base de configuração da nossa aplicação e teremos o seguinte resultado:

![](https://cdn-images-1.medium.com/max/576/1*1VFzzDd06FSGFy4iwOvQoA.png)
_iniciando projeto com npm init_

Agora que temos nosso **package.json** configurado, podemos instalar algumas dependências, a primeira delas é o [**express**](https://www.npmjs.com/package/express), para instalar, basta ir no terminal na pasta do projeto e digitar

```
npm install express
```

![](https://cdn-images-1.medium.com/max/670/1*lw9LGKNG-zYbWxi5UZ40hQ.png)
_express install_

Para evitar dores de cabeça enquanto desenvolvemos e ter as alterações rodando ao modificarmos e salvarmos algum arquivo do projeto, podemos usar um pacote chamado [**nodemon**](https://www.npmjs.com/package/nodemon), para instalar vamos usar o _npm install_, só que como esse pacote só será usado para o desenvolvimento, vamos usar a flag

— _save-dev_

```
npm install — save-dev nodemon
```

Agora que já temos esse dois pacotes essenciais, podemos configurar o script para rodar nossa aplicação em desenvolvimento, antes vamos abrir o projeto em um editor de texto preferido, no meu caso ([**visual studio code**](https://code.visualstudio.com/)). Agora vamos editar nosso **package.json** na propriedade de _scripts_ vamos inserir uma outra propriedade chamada _dev_, ficando asssim:

```
“scripts”: {

    “dev”: “nodemon src/app.js”,

    “test”: “echo \”Error: no test specified\” && exit 1"

}
```

![](https://cdn-images-1.medium.com/max/712/1*DhWGA_c3zyJb7WfizDLtIg.png)
_package.json com scripts modificado_

Esse script é chamado toda vez que executarmos o comando no terminal dentro da pasta do projeto.

```
npm run dev
```

Assim acionando o **nodemon** que chama o _app.js_ que ficará dentro da pasta  **src**.

Como boa prática, vamos manter nossa base de código em uma pasta chamada **src** que fica na raiz do nosso projeto e dentro dela vamos criar nosso arquivo _app.js._

Agora que temos a estrutura inicial da aplicação, vamos começar a escrever algumas coisas no nosso _app.js_ e entender melhor como express funciona.

Para utilizar qualquer pacote em nossa aplicação node, temos que importar o pacote desejado, podemos observar isso na primeira linha.

Na segunda linha estamos instanciando o express para podermos utilizar suas funções.

{% gist https://gist.github.com/iagocavalcante/e3e8602159fb02ea181bda338514ceb5.js %}

Na terceira linha temos a instancia do express utilizando um metodo get que aponta para determinada rota, onde ele recebe dois parametros, sendo o primeiro a rota que nesse caso a é / e o segundo parametro um callback onde esse callback possui dois parametros (req, res), sendo o req utilizado para obter informacoes e sao mandadas para esse url e res, utilizado para enviar uma resposta para quem está requisitando, o comportamento seria o seguinte:

1 — Cliente solicitou alguma coisa no endereço _http://localhost:3000/_

2 — O servidor retorna no caso do nosso exemplo um _html_ com texto “Hello World”

E a nossa última linha de código é onde iremo iniciar de fato o servidor onde passamos como parâmetro a porta que será executada, quando rodarmos o npm run dev e após iniciar, podemos ir até o nosso navegador e acessar a url _localhost:3000/_ e obteremos a resposta _hello worl_.

Agora temos uma noção de como devolver uma página _html_ com alguma informação, usando a mesma função anterior, podemos devolver, um arquivo _html_ ou um _json_ no caso de uma **API**. Vamos criar um _array de objetos_ javascript contendo as informações que queremos devolver para quem está solicitando.

Nosso _app.js_ ficará dessa forma

{% gist https://gist.github.com/iagocavalcante/25ddff45b0709786503f970817fb1bf0.js %}

Agora ao acessarmos a **URL** da nossa **API** vamos obter o seguinte retorno:

![](https://cdn-images-1.medium.com/max/1024/1*B3XvFr-MxoLOS98QxGTDCg.png)
_resposta da requisição. um array de objetos_

Temos uma **API** funcionando simulando uma consulta ao banco de dados onde é retornada uma lista de alunos, agora é possível consumirmos isso de um navegador, do [**postman**](https://www.getpostman.com/apps), de uma aplicação web, de um aplicativo.

Vamos só melhorar a URL da nossa aplicação, para ficar mais semântico.

{% gist https://gist.github.com/iagocavalcante/328afadeec2082f50d1e28ff480a920a.js %}

Prontinho, nossa **API** está finalizada, agora podemos consumir diretamente da nossa aplicação web.

Para começar a construção de nossa aplicação consumidora, vamos criar uma pasta chamada _alunos-front_ dentro da pasta _alunos-api_ logo em seguida abriremos a pasta criada no editor de texto preferido, já com editor aberto vamos criar um arquivo _index.html_ com uma estrutura **HTML5.**

![](https://cdn-images-1.medium.com/max/1024/1*YB6mHo1kEsTwVUQ3iZp_8g.png)
_esqueleto de página html5_

Vamos marcar nosso _html_ com um título para lista e a lista em si para visualizarmos como ficará o _html_. E para rodarmos a aplicação front vamos instalar um pacote maneiro para servir página estáticas, chamado [**http-server**](https://www.npmjs.com/package/http-server) **.**

{% gist https://gist.github.com/iagocavalcante/8133cade5248b52216102684c3f2decc.js %}

```
npm install http-server -g
```

Agora após instalado, vamos no terminal de vossas preferências, navegamos até a nossa pasta _alunos-front_ e rodaremos, lembre-se que precisamos ter outra janela do terminal rodando nosso projeto de API simultaneamente ao projeto front:

![](https://cdn-images-1.medium.com/max/1024/1*erhakypyA_0sHQRh1RcYBg.png)
_Os dois projetos rodando juntos_

```
http-server
```

![](https://cdn-images-1.medium.com/max/727/1*PL3Ep0PTM7oW0HTpy3ES5w.png)
_Terminal rodando a aplicação alunos-front_

Vamos acessar o nosso endereço para visualizar nosso _html_ no endereço [_http://localhost:8080_](http://localhost:8080.)_ou_ [_http://127.0.0.1:8080._](http://localhost:8080.)

![](https://cdn-images-1.medium.com/max/965/1*0i7uK4tYhSuLV42S_Qa7VA.png)
_Lista de alunos estática_

O que falta para integrarmos com a nossa **API**  ?! Falta fazermos a requisição, certo ? E para isso, vamos usar [**AJAX**](https://www.devmedia.com.br/o-que-e-o-ajax/6702), para tornar as coisas dinâmicas.

Vamos utilizar uma biblioteca famosa no mundo front-end para realizar essas requisições, essa **lib** é o [_axios_](https://cdnjs.com/libraries/axios) _0.18.0_, ela tem a finalidade de realizar requisições e ser baseada em _promises_, vamos importar ela no nosso _html_ através da cdn [https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js](https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js)

Ela tem uso simples com a seguinte estrutura:

```
axios.get('enderecodaapi')
    .then(response => console.log(response)) //caso retorne um sucesso
    .catch(error => console.log(error)) //caso ocorra algum erro
```

após o _axios._ temos os verbos _HTTP_ podendo ser _axios.get_, _axios.post_, _axios.delete_, onde cada método precisa receber como primeiro _parâmetro_ a **URL**. O segundo é um parâmetro opcional que são os dados que serão enviados para a  **API**.

Vamos agora consumir nossa **API** utilizando o _axios_ e visualizar o retorno dela no console do Chrome.

Nosso código alterado do front-end ficará assim:

{% gist https://gist.github.com/iagocavalcante/1682426a88b65733bd883a43ad72a159.js %}

Checando o que acontece com as alterações realizados no front-end, ao darmos refresh na aplicação temos o seguinte.

![](https://cdn-images-1.medium.com/max/1024/1*bz2lPMabBLHMoX9PP84IPQ.png)
_Página utilizando axios_

Como podemos perceber, ocorreu um erro, esse erro é bem conhecido pela galera de front-end, o famigerado erro de [CORS](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS), para resolver isso, vamos fazer uma pequena mudança em nossa  **API**.

Voltando para o terminal e navegando até a pasta onde está localizado nosso projeto de **API** , vamos instalar a biblioteca [cors](https://github.com/expressjs/cors)

```
npm install cors
```

Quando finalizar a instalação, vamos adicionar essa lib como um middleware da nossa **API** , ou seja, todas as requisições irão passar antes, por essa biblioteca.

{% gist https://gist.github.com/iagocavalcante/6ca735250166188947cbcb7bceb49596.js %}

Com essas alterações realizadas e a nossa **API** rodando novamente, basta irmos na nossa aplicação e atualizar ela e veremos o resultado.

![](https://cdn-images-1.medium.com/max/1024/1*G48yZ6DRYh6WXEE_Luotmg.png)
_Front-end requerendo da API_

Agora obtivemos a resposta esperada, recebemos os dados dos alunos e com isso podemos criar nossa lista dinâmica.

Vamos criar uma função dentro da tag script onde ela receberá uma lista de alunos e irá criar a lista com os nomes. Com essa função criada, agora basta substituir dentro do _axios.get.then_ o console.log, pela nossa função.

Nosso _html_ final será assim:

{% gist https://gist.github.com/iagocavalcante/2db4ca2710d68db5ecca8e422f6dcf29.js %}

Agora temos uma noção geral de como construir um backend e frontend separadamente e entendemos alguns conceitos por trás da construção de uma  **API**.

[**Github do projeto**](https://github.com/iagocavalcante/node-tutorial) **.**