API's and Web Development: The Ying to the Yang

One of the popular abbreviations across Web Development is API, since its introduction to the Web; the concept has grown popular and changed how developers and software engineers interact and build applications. APIs have allowed applications to share data and changed how we build complex applications, making them simpler than usual.

In this guide, I will provide a comprehensive introduction to web APIs that will cover the basics of what APIs are, how they work, and why they are important. I will also discuss some of the most popular web APIs and how you can use them in your applications.

Whether you are a beginner or an expert, I hope you will find this guide helpful. I encourage you to experiment with the APIs I will be discussing in this guide to build your applications using them and likely discover some on your own.

Prerequisite

To fully benefit from this article, I recommend you understand how the web works and HTML, CSS, and Javascript. Although this guide is beginner-friendly, having fair knowledge of the above-mentioned concepts and language will ensure a better understanding.

Hopefully, you find this guide helpful and informative. Let’s jump right into it.

What are APIs?

API; Application Programming Interface is a contract that enables data transmission between applications.

Let’s break down the API starting from Application Programming: the application is a set of tools that offers a particular service or performs a particular task; an example would be Spotify’s API providing musical data or Weather.org providing Weather data.

The Interface is the point where two programs interact, defining ways to interact with each other and providing the developer means to control the data while abstracting how it works, an example would be your request for Beyonce’s musical data, and Spotify API responds with the appropriate data.

Given that you have followed all the rules in the contracts, you can now decide to do whatever you want with this data. It abstracts how the data was gotten with simple integration.

API Documentation is provided to guide developers on integrating the interface into their applications.

How do APIs work?

As I mentioned earlier, APIs are contracts; in contracts, both parties have to agree on a particular set of rules.

The programmer sends a request via a protocol (e.g. HTTPS) to retrieve a specific set of data from the API (e.g. retrieving data from a database or generating calculations), and the API receives the request and maps it to a particular endpoint.

An endpoint is a URL that aligns with a specific resource or action or simply a place where the resources live.

The API processes this request and generates a response. The response includes data, status codes, and headers, and the API sends this response to the programmer. The response usually consists of the request's result and the data the programmer requested.

What can APIs do?

After being introduced to this new concept, I am pretty sure you would ask? What can I build with it?

The only right answer would be anything as long as you can access its API. APIs enable programmers to integrate several features, functionalities, and resources to create interconnected applications.

An example would be my recent pet project, Activity Forecast, where I used the data generated from Weather API to suggest activities people can do depending on the day’s weather.

Types of APIs

Before we move on to the next section, we need to explore the different types of APIs and what they do. I will only cover a few as they're important to note.

Web APIs(HTTP APIs):
These APIs enable access to web services and resources and are used in web development, and they communicate over the internet using HTTP/HTTPS protocols. More on Web APIs later.

Operating System APIs:
These APIs enable access to various features, functionalities and resources provided by the device's operating system. For example, Windows API (WinAPI) for Windows operating systems and POSIX API for Unix-based systems.

Library APIs:
Libraries are a series of prewritten codes that programmers can use to simplify tasks. Library APIs define the methods and data structures developers can use to interact with the library's functions.

Database APIs:
These APIs provide access to databases and allow your applications to create, read, update, and delete data. An example would be an SQL-based database; MySQL, MongoDB, etc.

Introduction to Web APIs

Now that you understand what APIs mean, what they can do and how they work we can now focus on Web APIs, which enable the application to communicate and exchange data via a protocol and delivers a response that is usually in the form of an object.

It’s important to note that Web APIs are exclusive to web applications.

Importance and Features of Web APIs

Although one can argue that the importance and Features of Web APIs are basically the same as every other api, it’s important to note that they’re a few differences, that’s why I have taken my time to present them:

Web APIs facilitate the integration of third-party APIs and other data sources in a web application.
It reduces the time and cost of production by eliminating the need to create new integration structures.
It allows advanced functionalities and features to be integrated with ease.
Web APIs support convention-based CRUD actions, which means that they can be used to create, read, update, and delete data. It also supports multiple text formats, such as XML, JSON etc. Responses include an Accept header and HTTP status code.

Javascript Browser APIs

Javascript APIs provides extra functionalities that exceed the javascript language, like the Fetch API for making HTTP request which can be used to load data from a server, the Geolocation API for getting a client’s location and many more.

In this section, we will look at a couple of Javascript Browser APIs and how they can make work easier while building. Note: In Javascript, your code interacts with APIs using JavaScript objects, which serve as containers for the data the API uses (object properties), and the functionality the API makes available (object methods).

Now let’s look at a few of the Javascript Browser APIs

Fetch API:

Fetch API allows you to make HTTP requests to servers from web browsers. Basically, you are requesting data from a server to be used on the browser. How does fetch know where to get the data from?

fetch(url)

You can use any web API if it is publicly free and accessible. After requesting, fetch will respond with a Promise so you can use the then() and catch() methods to expatiate. Once the request is complete, the promise will resolve to a response object.

The response object contains the fetched data with many useful properties and methods to inspect it. Let me explain with the code below:

fetch('/someAPI.com')
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.log(error))

Often we use async/await with Fetch API

Geolocation API:

The Geolocation API allows your application to access your application if you agree to it. It's avail through the navigator.geolocation object.

Let me show you how to display your latitude and longitude on the console using the Geolocation API:

function getCurrentLocation(position){
 const lat = position.coords.latitude;
 const lon = position.coords.longitude;
console.log(`I'm at Lattitude: ${lat} and Longitude: ${lon}`)
} 

function error(e){
console.log(`Location error: ${e.message}`)
}

navigator.geolocation.getCurrentPosition(getCurrentLocation, error)

To dig deeper and learn more about the other Browser APIs in Javascript like the ones we just covered, I recommend you look at this link, it goes deeper into more explanation and provides more examples.

Conclusion

APIs are crucial in building and integrating communication between software applications, and understanding it can scale the applications you build into a world-class level. With the use of all the various APIs available, programmers can access resources and effectively scale and expand the functionalities of their applications.

If you find this article thrilling, discover extra thrilling posts like this on Learnhub Blog; we write a lot of tech-related topics from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain. Take a look at How to Build Offline Web Applications.

Culled from Emmanuel Edem,