Application Programming Interfaces (APIs) are a medium that allow developers to fetch and send data between software components. APIs are not limited to a certain programming language and they thus come in handy for programmers. Web developers are always able to utilize the power of APIS to build web apps faster. This is what makes APIs revolutionary.
In this article we will look at the overall concept of APIs, the security dilemma and quickly fetch weather data from an API and display it in our application using JavaScript.
How do APIs Work?
APIs deliver their mandate by acting as a communication interface between an app and a server. They fetch and send data as prompted by your code. They are your go to for send requests and receiving responses. This allows the categorization of APIs as browser APIs, third party APIs, web workers among other. You probably might not know it but the Document Object Model (DOM) is a browser API. The DOM allows developers to manipulate pre-existing HTML and CSS. When a device notifies a user of an existing update, that is a device API at work, another case of the browser APIs.
Third party APIs are always used to build, tweak and manipulate features into your application such include the Facebook, Twitter and Youtube API. With the Twitter API you can easily build an app or add a feature that displays your recent tweets as they come. It works by fetching data from the server into your web app. A web user, will simply input a search function into your UI which then returns the preferred output and it might not really occur to them that its aided by an API. Remember the weather data we will fetch at the end of this article? We will use the Openweathermap.org, a third party API that can access a user's location and return a weather update.
The APIs Dilemma
APIs lighten and quicken the development process for developers by allowing access to data through a few lines of code. The security dilemma when working with APIs arises due to hacking and infiltration via endpoints. However, there are a variety of developer tools for penetration testing aimed at securing endpoints. Good thing is there are many tools whether commercial, open source or free and you can always choose what works best for you or your client.
Fetching weather Data from Using an API
In this short overview aimed at getting you started, we will fetch weather data from the Openweathermap.org and display it in our console.
Head over to Openweathermap.org, create and account and once you have verified your email, you will receive your API key.
There are many use cases to choose from but for this tutorial we'll use the city name geocoding: api.openweathermap.org/data/2.5/weather?q={cityname}&appid={API key} Once you initialize the fetch() method to access the city, your console.log returns the city's data as shown below.
let weather = {
"apikey": "Your API key goes here",
fetchWeather: function (city) {
fetch(
"https://api.openweathermap.org/data/2.5/weather?q="
+ city
+ "&appid=${apikey}")
.then((response) => response.json())
.then((data) => console.log(data));
},
}
Output
If we input Nairobi- a city in Kenya in the console as shown below
weather.fetchWeather("Nairobi")
Our output will be as follows
{coord: {…}, weather: Array(1), base: 'stations', main: {…}, visibility: 10000, …}
base
:
"stations"
clouds
:
{all: 40}
cod
:
200
coord
:
{lon: 36.8167, lat: -1.2833}
dt
:
1670563174
id
:
184745
main
:
{temp: 289.77, feels_like: 289.79, temp_min: 289.77, temp_max: 289.77, pressure: 1022, …}
name
:
"Nairobi"
sys
:
{type: 1, id: 2543, country: 'KE', sunrise: 1670555961, sunset: 1670599852}
timezone
:
10800
visibility
:
10000
weather
:
[{…}]
wind
:
{speed: 3.09, deg: 30}
[[Prototype]]
:
Object
A simple API call swiftly returns an array of info from the visibility, wind speed, temperature, latitudes and longitudes among others. There are many APIs to choose from and work with from recipe APIs, joke generators, e-commerce, travel, fintech, and many others.
Conclusion
APIs are a common interface to work with as a developer that equips you with power to simplify your work while at the same time enhancing the user experience by being able to harness the power of data into your application.
Happy Reading