Ao se desenvolver uma API, é ideal que os dados resultantes no lado do servidor dela sejam consumidos em algum lugar de forma dinâmica e intuitiva, diferentemente de um software de teste manual, como o Postman, por exemplo. Para isso, o desenvolvimento do frontend se faz necessário, permitindo a interação e visualização direta do usuário com o sistema. Nesse artigo, iremos utilizar a biblioteca React.js como exemplo de tecnologia no frontend.
Para realizar a comunicação Front-API, é necessário a utilização de ferramentas que façam as requisições http, como o Axios, FetchAPI, Ajax, etc. Iremos optar aqui pelo Axios, instale ele com o comando "npm install axios" no seu terminal.
Obs: é importante que na sua API, esteja com o Cors configurado corretamente para não existir o bloqueio entre aplicações.
Com sua API rodando, iremos relembrar as rotas implementadas e seus métodos para serem chamados pelo Axios.
No diretório do frontend, vamos criar uma pasta utils, e criar um arquivo api.js para armazenamos uma variável com a URL da nossa API. Por padrão do Axios, o instanciamos passando uma URL base.
Agora iremos criar a pasta service, com o nosso user-service para separar a lógica de serviço dos componentes.
Aqui, no nosso método para retornar todos os usuários, passamos a URL (já armazenada na variável) junto do método GET, que irá retornar a seguinte response (resposta):
Repare que ao fazer nossa requisição, a API nos retorna todos os dados que lá foi configurado: status code, headers, e o principal que é o data, que é o conteúdo que estamos buscando.
Agora para apresentarmos isso ao nosso front, iremos no nosso componente e realizar esse resgate de dados.
Precisamos definir o useState users e setUsers como um array vazio, para manipularmos os seus devidos estados e criamos uma função para recuperar os valores lá do nosso service e popular o array users, dessa forma:
E por fim o hook nativo do React useEffect para executar essa função apenas quando a página for renderizada.
Agora estamos com a faca e o queijo na mão, já temos os valores dos usuários armazenados no useState e só precisamos imprimi-los.
Definimos uma condicional, para que só imprima a tabela caso exista usuários, e para isso, implementamos a função map no state users para percorrer todos os usuários e apresentar cada atributo seu. O resultado ficou assim:
Agora que vimos como ler dados no front, nada mais justo que vermos como criar novos dados. Vamos precisar de um componente com um formulário para manipularmos os campos lá.
Nos inputs, precisamos mapear os valores, e para isso setamos o atributo name igual aos campos definidos na nossa API, o handler onChange para alterarmos o state dos campos.
Com a estrutura pré-definida, vamos ao service:
Seguimos a mesma lógica do método anterior, só que em um método post (e patch também), precisamos passar os dados que serão enviados como parâmetro, ou seja, agora junto do verbo HTTP passamos a URL, os dados que serão enviados e as configurações de headers, que aqui simulei um token de autenticação para demonstrar como seria caso a rota da sua API fosse protegida por esse tipo de serviço.
Vamos acessar essa função no nosso formulário!
Vamos definir os states com os campos do usuário e uma função para acessar nosso service.
A função handleSubmit serve para definir o que será executado quando o formulário for enviado, ali criamos um novo objeto de usuário com os estados atualizados do formulário e passamos esse objeto como parâmetro da função.
Vamos ver como ficou:
Com isso, vimos exemplos de métodos comuns em API's integrado com seu frontend. Em casos de CRUD, a lógica é a mesma, apenas adaptando o verbo HTTP passado no método.
Top comments (0)