A visual showing how an API works across two websites using globes to visualize websites, with the text underneath "An Introduction to APIs"

APIs For Beginners (2023)

—

by

Lucky
in

Table of Contents

Skip to Guide

What is an API?

An API is one of many ways websites send information to one another. It stands for Application Programming Interface. Whenever you use an online weather service, dictionary, or home assistant, you use an API to give up-to-date information. Some APIs act like databases to store, update and add user information (like email addresses, passwords, etc.)

Although you may think that APIs are constantly updated to give live information like traffic and weather conditions, some APIs work the same as a database. They are not updated often and exist to make applications easier to build for programmers. Some examples include ACNH API and Agify. These APIs are databases that allow you to make more reliable and faster software. Instead of spending ages developing a database, you can use APIs for quick data transfer.

How does an API Work?

APIs use HTTP requests to ask for information from a website. In this article, I will break down REST APIs which usually give responses using plain text, HTML, XML, or JSON. I will discuss how to use a JSON API, which is most commonly used on web-based APIs. If you are unfamiliar with JSON, it is an easy-to-understand language for storing information. It works with multiple coding languages to display information given. An example is shown below.

{
    "data": {
        "id": 2,
        "name": "fuchsia rose",
        "year": 2001,
        "color": "#C74375",
        "pantone_value": "17-2031"
    }
}

// Sample JSON Credit: https://reqres.in/ - SINGLE <RESOURCE> Example

As you can see, the response above shows details of a color called fuchsia rose. It gives information like its id, name, and HEX value to be used in programming.

What are HTTP Methods?

There are two main ways to request an API. GET and POST HTTP requests. Even though there are various other requests like PUT, DELETE, and TRACE, APIs mostly use GET and POST requests.

GET Request

GET requests are mainly used to receive information from APIs. Whenever you request things like weather or databases using an API, you are using a GET request.

POST Request

POST requests are another way to use an API. Instead of receiving information from APIs, you give information to APIs for them to store or use. Some APIs like Twitter and Facebook API use POST requests to update social media profiles or send posts. Hence the name POST. Responses are usually confirming that the request was received or the material can be accessed. The most common response, 200 means that the request was successful.

HTML + JS Step-by-Step tutorial to use APIs

For a tutorial on API, check out this GitHub repository, or follow the instructions below.

  1. Create a new folder and open it in a text editor of your choice. Create a new HTML file inside the folder.
  2. Create the basic outline of your HTML file. It should look like this.
  3. Add this code in between the script tags. The GitHub file explains what the code does, and the options for changing it.
  4. After you are finished copying and pasting this code, test the file using your text editor or search engine (you may need to use localhost) and you should see the API’s JSON response in your browser’s dev console. If you get a CORS error, follow the instructions here.
  5. For a final example, you can see this example on GitHub. It will show you how you can implement the API to display text in the body of the HTML.

Here’s what the final example looks like: