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, onde ao acessarmos esse endereço teremos o seguinte retorno:
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/alunos (onde iremos recuperar uma lista de alunos)
POST minhaapi.com.br/api/v1/alunos — data {nome: Aluno5, idade: 16}
DELETE minhaapi.com.br/api/v1/alunos/1 (aqui passamos o id 1 do aluno cadastrado e então ele será excluído)
PUT minhaapi.com.br/api/v1/alunos/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.
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 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:
iniciando projeto com npm init
Agora que temos nosso package.json configurado, podemos instalar algumas dependências, a primeira delas é o express, para instalar, basta ir no terminal na pasta do projeto e digitar
npm install express
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, 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). 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"
}
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.
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
Agora ao acessarmos a URL da nossa API vamos obter o seguinte retorno:
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, de uma aplicação web, de um aplicativo.
Vamos só melhorar a URL da nossa aplicação, para ficar mais semântico.
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.
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 .
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:
Os dois projetos rodando juntos
http-server
Terminal rodando a aplicação alunos-front
Vamos acessar o nosso endereço para visualizar nosso html no endereço http://localhost:8080ou http://127.0.0.1:8080.
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, para tornar as coisas dinâmicas.
Vamos utilizar uma biblioteca famosa no mundo front-end para realizar essas requisições, essa lib é o 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
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:
Checando o que acontece com as alterações realizados no front-end, ao darmos refresh na aplicação temos o seguinte.
Página utilizando axios
Como podemos perceber, ocorreu um erro, esse erro é bem conhecido pela galera de front-end, o famigerado erro de 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
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.
Com essas alterações realizadas e a nossa API rodando novamente, basta irmos na nossa aplicação e atualizar ela e veremos o resultado.
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:
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.
Top comments (0)