Application programming interfaces (APIs) are one of the ultimate shortcuts for building smart apps. It's a communication channel between two applications. Whether deliberately or not, you've used APIs at some points while browsing the internet or using programs in your daily life.
Although an API typically sends complex data as a response, how can you understand and use this information to serve your users? APIs make life easy for both experienced and new developers. So you need to know how to use them with your app.
Here, with a few use cases and examples, we take a look at how you can use an API to serve your programs as a developer.
How Do APIs Work?
Developers create APIs as products that can serve other developers. The aim is to make complex web development processes easy, more efficient, and faster for consumer developers or businesses.
Most businesses now depend on third-party APIs to solve problems and serve their clients better. However, using APIs isn't as complicated as many people think. You can think of it as a third-party solution that gives you a specific response in the form of data when you make a particular HTTP request.
Using an API is like placing an order at a pizza restaurant. You can't go into the kitchen to tell them what you want. You need a waiter to take your order and communicate it to the kitchen before returning with your pizza.
You can view an API as that link between you and the kitchen. In this case, you're a client patronizing the restaurant providing a waiter (API). The waiter then responds with your choice of pizza (data). In a real API, your web app is the client requesting to consume the content of the provider through its API by making endpoint HTTP requests.
What's an API Endpoint?
Connecting to an API requires that you plug your program into an API endpoint. You can view this as a two-way connection. The endpoint connected to your program sends a request, while the one connected to the API feeds you back with a specific response.
The endpoint is a URL that requests and gives the client direct access to the resources of an API.
In addition to getting data with an API, you can also POST requests from a provider to a client, use the PUT method to get more information from a provider, as well as use the DELETE method to remove existing data from your program. Each of these methods is usually available in an API's documentation.
Criteria for Connecting to an API
Integrating an API with your program isn't just a spontaneous decision—it's pre-meditated. You must know what information you want and how much of it you want. This cuts down on complexity, especially if you're dealing with JSON data that comes as a multidimensional array. That practice also lets you get the specific information that you need for your program.
There are hundreds of APIs out there with different rules for connecting to them. While some APIs are free and open-source, others are only accessible on a subscription basis.
Although some are seamless and straightforward and don't require any pre-requisite, other APIs may require that you satisfy conditions like generating an API key or signing-up for a developer's account before you can connect to their endpoints.
However, one of the most important aspects of any API is its documentation. The best practice is to read and follow the documentation of any API you intend to connect with for guides on how to code and use its resources. That's because each API has its own connection methods and instructions.
To connect with any API, you also need to know the programming languages it supports.
How to Connect to an API: Practical Examples
There are no specific ways of connecting to an API, but a few examples will expose you to the basic concepts of how you can consume API data with your app. But before we go further, we've written a couple of articles about APIs and how you can tap into them.
For example, we have a detailed article on how you can connect with Weatherstack API, which gives you access to real-time weather data. We've also written about how you can use Mediastack API, which is a paid API you can use to add news headlines to your website.
Let's take a look at a few brief code examples of how you can connect to an API.
How to Use Iro.js Color Picker API
Iro.js is a simple API that allows you to add a free color-picker to your website. When you select a color point on the color wheel, the API returns the hexadecimal or RGB code of that color. To connect to the iro.js API, all you need do is to paste its content delivery network (CDN) endpoint in the head section of your DOM.
The full documentation of this API is available at iro.js.org. Let's see how you can connect to this API with the example code snippet below:
<!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>
In the case of the example API above, you don't need an API key to connect to it. However, to understand it better, take a closer look at the JavaScript. To connect with this API, we only need to call the ColorPicker function from the iro class, then we pass the id of the color wheel container into the class.
The endpoint of iro.js API is easy to connect with because its developers have done the extra work of coding the class for its users. The image below is the result of the example code above.
To see how the color change event happens, you can open another HTML file and paste the following code into its scripts section:
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);
The above code logs hexadecimal color values each time you change the position of the color selector on the wheel.
NB: All example code is the result of following the instructions in the API's documentation.
How to Use NoCodeAPI Currency Exchange API
NoCodeAPI offers many APIs including the currency converter API. To connect to its currency exchange endpoint, go to the NoCodeAPI marketplace and create an account.
Once you log in, there is a search bar at the upper part of the page. In that search bar, type currency exchange, once your query appears, click on Activate.
On the next page, click on Make Currency Exchange API. Next, type in a preferred name for the API and click Create.
Once you've created the API, click on View Documentation. Next, select a preferred language to view the code for connecting to the API's endpoint. You can then copy that sample code and paste it into your application for further customization.
Take a look at our example code below for currency conversion:
<!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>
The code above is only a modified version of the one in the documentation. However, pay close attention to the conversion parameters in the response variable of the JavaScript.
Here is what the raw JSON output looks like:
Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}
Take Advantage of APIs
Using APIs for your app lets you complete projects faster. Although some API documentation can be technical, there are many of them out there that come in handy for newcomers.
However, as we stated earlier, to get the most out of any API you want to tap data from, you must study its documentation closely and abide by the rules for connecting to it.
Although we've used JavaScript for our examples here, depending on the type of API, most of them still support other programming languages as well. You can get information about language support from the documentation of any API. Also, note that the examples we used here are only a few out of many use-cases of APIs.