Forem: tuliov1

Integrando sua API com front React e Axios

tuliov1 — Sun, 09 Jun 2024 14:42:51 +0000

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.

Integração de Sistemas - API Rest

tuliov1 — Mon, 11 Mar 2024 18:54:42 +0000

Ao se analisar questões de processos e comunicação dentro de uma empresa, é possível comprovar que soluções de Engenharia de Software são muito importantes para otimizá-las. Por exemplo, a necessidade de realizar conexões entre sistemas de setores diversos, desenvolvidos de forma independente e com diferentes tecnologias e estruturas, a fim de estabelecer uma melhor troca de informações de forma que traga uma clareza maior aos processos referentes. Nesse contexto, como os sistemas já estão desenvolvidos e consistentes, a junção deles em um só torna o sistema integrado mais produtivo, seguro, facilita o fluxo de informações, dentre outros benefícios.

Segundo Aline Zenker et al. (2019, p. 82) “a utilização de componentes que já foram aplicados, testados e validados traz
aumento de produtividade, qualidade e segurança ao software”.
Assim, vimos as vantagens que uma empresa tem em integrar sistemas e a importância da reutilização de software: economizar tempo e trazer segurança e consistência ao sistema. Uma das técnicas de integração que iremos explorar nesse artigo é a API.

API, significa Application Programming Interface (Interface de Programação de Aplicação); e Rest Representational State Transfer (Transferência Representacional de Estado). A API funciona como uma camada de abstração de comandos, que pode ser acessado pelo cliente no modelo Request-Response (requisição-resposta). A comunicação entre cliente e servidor é efetuada sob o protocolo HTTP (Hypertext Transfer Protocol), utilizado para a troca de dados.

O Rest é um padrão de arquitetura que define a forma como uma API deve ser desenvolvida, permitindo a comunicação eficaz com o servidor através de métodos que tornam possíveis a manipulação dos dados, métodos esses que são o GET, POST, PUT/PATCH e DELETE que serão explicados a seguir.
Os endpoints são onde iremos acessar a API, previstos em seu desenvolvimento. Em outras palavras, é uma URL que específica o recurso que será consultado.

Ao realizar a requisição a uma API, o servidor traz como resposta o estado atual do dado requisitado. Os dados que se deseja enviar pela requisição, são enviados pelo o seu corpo (mais popularmente em formato JSON), e o servidor retorna junto da resposta o status code, que funciona como um feedback da sua requisição acompanhada de 3 dígitos e uma mensagem de texto curta.
Respostas Informativas (100 – 199);
Respostas bem-sucedidas (200 – 299);
Mensagens de redirecionamento (300 – 399);
Respostas de erro do cliente (400 – 499);
Respostas de erro do servidor (500 – 599);
Mais detalhes sobre os status code: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status

O método GET é utilizado quando se deseja buscar informações de uma API, por exemplo, você deseja consultar uma lista de funcionários com suas informações detalhadas de uma empresa, a requisição com o método GET funciona perfeitamente.

[url_base/funcionario/getFuncionarios] --> /getFuncionarios é um endpoint que acessará o método GET para retornar as informações para o cliente
Corpo da resposta:

*status_code: 200

O método POST, é útil quando é necessário enviar dados para a API, como criar um novo registro no sistema, seguindo o exemplo dos funcionários, caso você deseje registrar um novo funcionário na empresa.
[url_base/funcionario/registrar]

Corpo da requisição:

Corpo da resposta:

O status code 201 significa que o dado foi criado com sucesso.

Os métodos PUT e PATCH, funcionam como um recurso para editar os dados de um registro já existente, entretanto, suas atuações se diferem de forma que o PUT atualiza todos os dados desse registro, enquanto o PATCH pode atualizar apenas um dado. Por exemplo, você deseja alterar os dados de um funcionário previamente registrado, caso queira alterar por completo, utilize o PUT, caso queira apenas um campo, o PATCH.

[url_base/funcionario/edit/:{id}] --> /edit/:{id} representa que o endpoint edit irá atualizar o funcionário que possuir o ID correspondente ao passado na URL, que possui basicamente como um filtro. Nesse caso iremos usar o ID: 1, logo /edit/1
Corpo da requisição:

Atualizamos o campo salary desse funcionário

Corpo da resposta:

O método DELETE, como o nome sugere, é utilizado para excluir um registro do servidor. Por exemplo, você deseja excluir os dados de um funcionário da empresa.
[url_base/funcionario/delete/2
Normalmente, um dado excluído não retornada nada, então vamos realizar um GET dos funcionários para verificar se o que possui o ID 2 ainda está na lista:

A requisição foi realizada com sucesso, logo seu status code será 200

Para se desenvolver uma API, é necessário estabelecer alguns passos:

Planejamento --> entender os objetivos do seu desenvolvimento com casos de uso e estabelecimento de requisitos.
Projetar --> Modelagem de dados, definição de endpoints e seus métodos, criação de fluxogramas.
Tecnologia --> a partir do planejamento, é possível escolher quais as melhores tecnologias para resolver os problemas (qual banco de dados, linguagens de programação, framework, etc.)
Desenvolvimento --> momento de codificação da API, implementar sua lógica e critérios de segurança, manipulação dos dados.
Teste --> verificar o funcionamento das funções e seus endpoints. Realizar testes com antecedência e de maneira isolada são boas práticas para evitar efeitos bola de neve.
Documentar --> uma documentação completa da API é necessária para ajudar outros desenvolvedores a utiliza-la; informações como a descrição dos endpoints, os seus objetivos são imprescindíveis.