Miracle's blog

The basic concepts of APIs

The basic concepts of APIs

Ugorji Miracle's photo
Ugorji Miracle
·

6 min read

Getting familiar with JavaScript may get you wondering how certain web apps are coded with many functionalities such playing videos or songs, fetching user data from another website, interacting with your local system from the web and so on. Further dive into JavaScript will let you discover APIs.

Prerequisites

This article assumes that the reader already has basic knowledge of objects and its methods, DOM manipulation.

Overview

  • What are APIs

  • Categories of JavaScript APIs

  • Common features of JavaScript API

  • API request methods

  • API endpoints

  • How to consume (work with) an API

  • Conclusion

What are APIs

Application Programming Interfaces (APIs) are constructs that enable for easy use of complex functionalities on an application. An APIs are sets of programming code that enables data transmission between one software product and another. They make the interactivity (communication) between one application and another easy and feasible.

Examples of APIs include:

  • Buttons on your mobile application like the play/pause buttons, and other function buttons.

  • Displaying twitter tweets on the web browser.

  • Making payments on the website through payment platforms.

  • Displaying location information on the web page etc.

Categories of JavaScript APIs

There are basically two categories of JavaScript APIs on the client-side.

Browser API

These are APIs that are inbuilt on the browser. All browsers have a set of built-in Web APIs to support complex operations, and to help accessing data.

According to the MDN docs , common browser APIs includes:

  • APIs for manipulating documents (Document Object Model API) : This API is for manipulating the HTML and CSS e.g. creating, removing and changing HTML, dynamically applying new styles to your page, etc. Examples of the Document Object Model APIs (DOM APIs) are: document.querySelector(selector), document.querySelectorAll(name), element.getAttribute(), element.addEventListener(), window.content, GlobalEventHandlers/onload, window.scrollTo() and so on.

  • APIs that fetch data from the server: APIs that make this possible include XMLHttpRequest and the Fetch API. You may also come across the term Ajax, which describes this technique.

  • APIs for drawing and manipulating graphics: The graphics APIs are now widely supported in browsers — the most popular ones are Canvas and WebGL, which allow you to programmatically update the pixel data contained in an HTML element to create 2D and 3D scenes.

  • Audio and Video APIs: Audio and Video APIs like the HTMLMediaElement, the Web Audio API, and WebRTC allow you to do really interesting things with multimedia such as creating custom UI controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas.
  • Device APIs: Devices APIs are basically APIs for manipulating and retrieving data from modern device hardware in a way that is useful for web apps. Example is the Notifications API/Vibration API.

  • Client-side storage APIs: The client-side storage APIs gives the ability to store data on the client-side if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. eg Web Storage API, IndexedDB API etc.

    Third party API

The third party APIs are not inbuilt on the browser like its counterpart(browser APIs). Rather they are APIs made available by some of the big websites to enable developers incorporate some of their core functionalities to the developers' website.

  • Twitter API

  • Facebook API

  • Google API

  • Twilio API

  • Pinterest API

  • YouTube API

  • Telegram API etc.

The above listed and more are all examples of third- party API.

Common features of JavaScript API

Different JavaScript APIs work in slightly different ways, but generally, they have common features and similar themes to how they work.

  • They are based on objects.

  • They have recognizable entry points.

  • They use events to handle changes in state.

  • They have additional security mechanisms where appropriate.

API request methods

API request is the act of making a call to the server using an API key from your local host to the server. Since API act as communication channel between to the server, there are ways to make this communication possible. These are formally known as API request methods and they include:

  • GET: requests data from a server. This is the most common type of request. Using it we can get the data we are interested in from those that the API is ready to share.
  • POST: adds new data to the server. Using this type of request, you can, for example, add a new contact to CRM.
  • PUT: changes existing information. For example, using this type of request, it would be possible to change the color or value of an existing product.
  • DELETE: deletes existing information

API Endpoints

An API endpoint refers to the URL (link) of interaction between an API and another system. An endpoint provides the location where an API accesses the resources they need. An API works by requesting information from a server and then receiving a response after that. The communication channel that APIs use to send a request and specify where a given resource resides is what is known as an endpoint. It plays an integral role in defining exactly where resources can be accessed and guarantee the proper functioning of any software that interacts with it.

How to consume (work with) an API

To consume an API, you need an API endpoint as defined above. Working with this endpoint may differ from one programming language to another. This article will be based on JavaScript programming language.

Bearing in mind that an API is a set of data that you need to display on your html file, you need to create your HTML, CSS, and JavaScript files on your code editor. Set the head tags of your HTML file as proper and reference the CSS and JavaScript files to it. Move to your JavaScript file and fetch the API as follows:

Following the code example above, the fetch method is used to grab the data from an URL (endpoint). Usually, the fetch method returns a promise that's where the await method comes in to hold the browser from passing the data to the variable until it is done fetching the data.

The data returned from the API endpoint comes in looking like objects in an array but they are really just strings. JavaScript APIs work with objects, thus, the need to convert the strings returned to objects using the .json() method. Using the forEach method or any method you prefer, depending on what result you want from the API objects, you can now iterate through the objects, access the values of the objects using the keys and append to the DOM.

NOTE: Before appending the API objects to the DOM, you need to check whether the fetch was resolved using the .then methodor if it didn't resolve, using the .catch methodto catch any error(s). Once you have the API fetched correctly, and appended to the DOM, you can now go ahead and style your page using CSS or any CSS frameworks of your choice.

Conclusion

Working with APIs can really be exciting as it gives you access to dynamic data on your webpage. I hope this article helps you get started on APIs in JavaScript programming language, though this is just a basic touch of APIs. You can dig deeper and you would be surprised at the amazing things you can find about APIs.

If you liked this article please give your reaction, comment, and share. Also, follow on Twitter. Thanks for reading.

APIs