Como as APIs funcionam e como integrá-las ao seu aplicativo
As interfaces de programação de aplicativos (APIs) são um dos atalhos definitivos para a construção de aplicativos inteligentes. É um canal de comunicação entre dois aplicativos. Deliberadamente ou não, você já usou APIs em alguns pontos ao navegar na Internet ou usar programas em sua vida diária.
Embora uma API normalmente envie dados complexos como uma resposta, como você pode entender e usar essas informações para atender seus usuários? APIs tornam a vida mais fácil para desenvolvedores experientes e novos. Portanto, você precisa saber como usá-los com seu aplicativo.
Aqui, com alguns casos de uso e exemplos, damos uma olhada em como você pode usar uma API para servir seus programas como desenvolvedor.
Como funcionam as APIs?
Os desenvolvedores criam APIs como produtos que podem servir a outros desenvolvedores. O objetivo é tornar os processos complexos de desenvolvimento da Web fáceis, mais eficientes e mais rápidos para desenvolvedores ou empresas.
A maioria das empresas agora depende de APIs de terceiros para resolver problemas e atender melhor seus clientes. No entanto, usar APIs não é tão complicado como muitas pessoas pensam. Você pode pensar nisso como uma solução de terceiros que fornece uma resposta específica na forma de dados quando você faz uma solicitação HTTP específica.
Usar uma API é como fazer um pedido em uma pizzaria. Você não pode entrar na cozinha para dizer a eles o que deseja. Você precisa de um garçom para anotar o pedido e comunicá-lo à cozinha antes de retornar com a pizza.
Você pode ver uma API como o elo entre você e a cozinha. Neste caso, você é um cliente patrocinando o restaurante fornecendo um garçom (API). O garçom então responde com sua escolha de pizza (dados). Em uma API real, seu aplicativo da web é o cliente solicitando consumir o conteúdo do provedor por meio de sua API, fazendo solicitações HTTP de endpoint.
O que é um endpoint de API?
Conectar-se a uma API requer que você conecte seu programa a um terminal de API. Você pode ver isso como uma conexão bidirecional. O ponto de extremidade conectado ao seu programa envia uma solicitação, enquanto o que está conectado à API o envia de volta com uma resposta específica.
O endpoint é uma URL que solicita e dá ao cliente acesso direto aos recursos de uma API.
Além de obter dados com uma API, você também pode enviar solicitações POST de um provedor para um cliente, usar o método PUT para obter mais informações de um provedor, bem como usar o método DELETE para remover dados existentes de seu programa. Cada um desses métodos geralmente está disponível na documentação de uma API.
Critérios para se conectar a uma API
Integrar uma API com seu programa não é apenas uma decisão espontânea – é pré-meditada. Você deve saber quais informações deseja e quanto deseja. Isso reduz a complexidade, especialmente se você estiver lidando com dados JSON que vêm como uma matriz multidimensional. Essa prática também permite que você obtenha as informações específicas de que precisa para o seu programa.
Existem centenas de APIs por aí com diferentes regras para se conectar a elas. Enquanto algumas APIs são gratuitas e de código aberto, outras são acessíveis apenas por assinatura.
Embora alguns sejam simples e diretos e não exijam nenhum pré-requisito, outras APIs podem exigir que você atenda a condições como a geração de uma chave de API ou a inscrição em uma conta de desenvolvedor antes de se conectar a seus terminais.
No entanto, um dos aspectos mais importantes de qualquer API é sua documentação. A prática recomendada é ler e seguir a documentação de qualquer API com a qual você pretende se conectar para obter guias sobre como codificar e usar seus recursos. Isso porque cada API tem seus próprios métodos e instruções de conexão.
Para se conectar a qualquer API, você também precisa conhecer as linguagens de programação que ela suporta.
Como se conectar a uma API: exemplos práticos
Não há maneiras específicas de se conectar a uma API, mas alguns exemplos irão expor você aos conceitos básicos de como você pode consumir dados da API com seu aplicativo. Mas antes de prosseguirmos, escrevemos alguns artigos sobre APIs e como você pode acessá-los.
Por exemplo, temos um artigo detalhado sobre como você pode se conectar com a API Weatherstack , que dá acesso a dados meteorológicos em tempo real. Também escrevemos sobre como você pode usar a API Mediastack , que é uma API paga que pode ser usada para adicionar manchetes ao seu site.
Vamos dar uma olhada em alguns breves exemplos de código de como você pode se conectar a uma API.
Como usar a API Color Picker Iro.js
Iro.js é uma API simples que permite adicionar um seletor de cores gratuito ao seu site. Quando você seleciona um ponto de cor na roda de cores, a API retorna o código hexadecimal ou RGB dessa cor. Para se conectar à API iro.js, tudo o que você precisa fazer é colar o endpoint da rede de entrega de conteúdo (CDN) na seção principal do seu DOM.
A documentação completa desta API está disponível em iro.js.org . Vamos ver como você pode se conectar a esta API com o exemplo de snippet de código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Practice Slider</title>
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
<button id="color-button" onclick="sample()">Display color picker</button>
<div id="color-circle"> </div>
<div id="color-code"> </div>
</body>
<script>
let colors= document.getElementById('color-code');
const sample= ()=>{
var colorPicker = new iro.ColorPicker('#color-circle', {
// Set the size of the color picker
width: 320,
// Set the initial color to pure red
color:"#ff0000"
});
colorPicker.on(['color:change', 'color:init'], function(color) {
// log the current color as a HEX string
colors.innerHTML=color.hexString;
});
};
</script>
</html>No caso da API de exemplo acima, você não precisa de uma chave de API para se conectar a ela. No entanto, para entendê-lo melhor, dê uma olhada mais de perto no JavaScript. Para conectar com esta API, precisamos apenas chamar a função ColorPicker da classe iro e , em seguida, passamos o id do contêiner da roda de cores para a classe.
O endpoint da API iro.js é fácil de conectar porque seus desenvolvedores fizeram o trabalho extra de codificação da classe para seus usuários. A imagem abaixo é o resultado do código de exemplo acima.
Para ver como o evento de mudança de cor acontece, você pode abrir outro arquivo HTML e colar o seguinte código em sua seção de scripts :
var colorPicker = new iro.ColorPicker('#color-pick', {
// Set the size of the color picker
width: 400,
// Set the initial color to pure red
color:"#ff0000"
});
const myColor =(color)=>{
console.log(color.hexString);
};
colorPicker.on("color:change", myColor);O código acima registra valores hexadecimais de cores cada vez que você altera a posição do seletor de cores na roda.
NB: Todo código de exemplo é o resultado de seguir as instruções na documentação da API.
Como usar a API NoCodeAPI Currency Exchange
NoCodeAPI oferece muitas APIs, incluindo a API do conversor de moeda. Para se conectar ao seu terminal de câmbio de moeda, vá para o mercado NoCodeAPI e crie uma conta.
Depois de fazer login, há uma barra de pesquisa na parte superior da página. Nessa barra de pesquisa, digite câmbio de moeda , assim que sua consulta aparecer, clique em Ativar .
Na próxima página, clique em Make Currency Exchange API . Em seguida, digite um nome de sua preferência para a API e clique em Criar .
Depois de criar a API, clique em Exibir documentação . Em seguida, selecione um idioma preferido para visualizar o código para se conectar ao ponto de extremidade da API. Você pode então copiar esse código de amostra e colá-lo em seu aplicativo para personalização adicional.
Dê uma olhada em nosso código de exemplo abaixo para conversão de moeda:
<!DOCTYPE html>
<html>
<head>
<title>Currency converter</title>
</head>
<div id="currency"> </div>
</body>
<script>
let currency= document.getElementById('currency');
async function callingFn() {
try {
const response = await fetch("https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", {
method: "get",
headers: {
"Content-Type": "application/json"
}
});
const json = await response.json();
currency.innerHTML="Success:" + JSON.stringify(json);
} catch (error) {
console.error("Error:", error);
}
}
callingFn();
<script>
</html>O código acima é apenas uma versão modificada daquele na documentação. No entanto, preste muita atenção aos parâmetros de conversão na variável de resposta do JavaScript.
Esta é a aparência da saída JSON bruta:
Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}Aproveite as vantagens das APIs
Usar APIs para seu aplicativo permite concluir projetos mais rapidamente. Embora algumas documentações da API possam ser técnicas, existem muitas delas que são úteis para iniciantes.
No entanto, como afirmamos anteriormente, para obter o máximo de qualquer API da qual você deseja extrair dados, você deve estudar sua documentação de perto e obedecer às regras para se conectar a ela.
Embora tenhamos usado JavaScript para nossos exemplos aqui, dependendo do tipo de API, a maioria deles ainda suporta outras linguagens de programação também. Você pode obter informações sobre o suporte ao idioma na documentação de qualquer API. Além disso, observe que os exemplos que usamos aqui são apenas alguns dos muitos casos de uso de APIs.
