Guides

Introduction To APIs: How APIs Work (With Examples)

In this intro to APIs, we’ll cover what an API does, the basics you need to know to work with APIs, how to create your own software using APIs, and more.

Jack, Director of Education / August 2022
Introduction To APIs: How APIs Work (With Examples)

You've probably heard of APIs, but could you explain to someone else what they are?

APIs are primarily used by developers, so they can get quite technical. But you don't need to be a developer to understand and work with them. By the end of this guide, not only will you be able to talk about APIs coherently, but you'll also be able to make your own software with them.

Caveat: If you don't have time to build your own work software right now, sign up (for free!) and hire a Glide Expert to create your app or website in one-tenth the time at one-tenth the cost of traditional development.

Introduction to APIs

Think of APIs as interfaces through which different devices talk to each other to send and receive information.

A weather API allows your smartphone to get weather information from a computer at the weather station to find out if you'll need an umbrella tomorrow.

A stock API allows your laptop to ask a computer at the stock exchange about the latest price of a share of $NFLX (Netflix).

Beyond retrieving information, many APIs actually do things, like increase the temperature in your house or summon your self-driving car.

But why do we need these interfaces? Why can't computers just talk to each other directly?

It’s because apps have different rules and structures and can be written in entirely different languages. So if you want to program one app to speak to another, you need an interface that speaks both languages.

APIs are the gateways between apps. They are the interface through which you program an app to receive, send, replace, edit, or delete information from another app. API stands for “Application Programming Interface,” and each API lays out a set of rules for communicating with that particular app.

An Example of an API in Action

An example of an API is the Free Dictionary API at https://dictionaryapi.dev. This API takes a word (e.g., “hello”) and returns information about that word.

For example, if you visit: https://api.dictionaryapi.dev/api/v2/entries/en/hello you'll get something like this:

So, the three basic things you need to know about APIs are:

  1. Applications speak different languages
  1. APIs are the gateways between applications
  1. APIs have URLs, but they return data, not websites

Those are the basics. However, in order to start using that data, we need to go a little deeper — starting with a base-level understanding of JSON.

JSON + APIs: The Basics

The data you see when you visit the dictionary API page for “hello” is called JSON. JSON (pronounced like the name “Jason”) is short for “JavaScript Object Notation.” It's a smaller, simpler part of the JavaScript programming language that is all about storing values (data).

Although APIs are different, a lot of them use JSON to send data. JSON is a language-independent data format, which makes it great for transmitting data between different software.

A basic understanding of JSON goes a long way when working with APIs, so let's get to know the essentials. We'll look at:

  1. Storing values in JSON
  1. Value types
  1. JSON objects
  1. Accessing values in JSON

1. Storing Values in JSON

When people communicate, their language can be rambly, ambiguous, and disorganized, but other humans are very good at picking out useful information. For example, someone might say:

Hi! Oooh, what a nice day! Nice to meet you. Umm.. so I'm Jack and apples are awesome... probably my fave food. Also 42!... oh man, my fave number. Love that number. Anyways.... see you later! 🤪

But computers have a hard time with information that is not well structured. Here's the same information (more or less 😉) in a structured format that's very easy for computers to digest:

 
{
	"name": "Jack",
	"favorite food": "Apples",
	"favorite number": "42"
}
 

This is a JSON document with three properties:

  • name is a property with the value of "Jack"
  • favorite food is a property with the value of "Apples"
  • and favorite number is a property with the value of "42"
 

Each property has a value that is stored within it. We can then retrieve that value later by asking a program what the value of favorite food is.

 

💡 The syntax for storing these values is important.

  • { and } open and close a collection of property-value pairs. This is also called an object.
  • The property and value are both wrapped in quotation marks
  • A colon comes after the property
  • Property-value pairs are separated using commas

2. Value Types

You can store different value types in JSON:

  • Text "Hello World!"
  • Numbers "123"
  • Booleans true false
  • null (Meaning 'no value' or empty)
  • Arrays (multiple values assigned to one property using square brackets — see 'favorite foods' below)
 
{
	"firstName": "Tom",
	"secondName": "Jones",
	"number": 07777888999,
  "isOnPlanetEarth": true
  "deepestSecret": null
	"favoriteFoods": [
		"Pizza",
		"Sushi",
		"Chocolate"
	]
}
 

3. JSON Objects

When you store a group of property-value pairs with curly brackets { }, it's called an 'object.' JSON is all about storing objects, hence the name 'JavaScript Object Notation.'

Now that you can recognize an object, it's useful to know that you can also have nested objects. For example, if we were to describe the properties of a book, we'd need to use sub-objects:

 
{
	"name": "Harry Potter and the Philosopher's Stone",
	"author": {
		"firstName": "Joanne",
		"lastName": "Rowling"
	},
	"editor": {
		"firstName": "Arthur" 
		"lastName": "Levine"
	},
	"publisher": "Bloomsbury Publishing Plc",
	"ISBN 10": "0747532745",
	"ISBN 13": "9780747532743"	
}
 

4. Accessing Values in JSON

Let's go back to the Dictionary API example.

We've requested information on the word “Hello” and we've been given back a lot of information. It looks like a jumbled mess. We know the value we want is in there, but how do we tell our program to navigate to it?

 
 

The first thing to realize is that this jumbled mess of text is not a jumbled mess; it just looks like it. With some simple formatting using JSON Formatter & Validator, we can see that it is well-organized JSON.

 
 

Using the + and - buttons, this tool also allows us to fold and unfold the different parts of the JSON to see the higher and lower structures of objects & arrays.

 
 

To find a property-value pair in a JSON file, we need to specify the address. We do this with a useful thing called JQ. JQ lets you give the address of a value inside of JSON, and it will navigate to it. There are really only two essential things to remember when using JQ:

 

. = allows you to navigate to a property

[] = allows you to navigate an array

 

Let's look at the first part of our JSON. It starts with an array, then inside that array is an object, and inside that object is a property called meanings.

 
 

To get there we would write .[0].meanings

  • The . starts off our JQ
  • The [0] specifies it's the first element in the array
  • .meanings is how we access the meanings property
 
💡
You might think that it would be accessed by writing .[1].meanings as it's the first item in an array. But arrays are slightly different. Read more here.
 

However, the information we need (the definition of the word) is deeper within the JSON. The full JQ we would write to get there would be .[0].meanings[0].definitions[0].definition.

You can see how this query builds up in the image below.

 
 

You can try this out right now and see the live output: https://www.glideapps.com/plugins/fetch

 
 

Ready to dive into JSON and APIs? Sign up for Glide to build a workplace app or website, add our pre-built Fetch JSON column, and start fetching APIs and data!

API Structure

The dictionary example we gave at the start is an example of a public API. In other words, anyone can use it. There are lots of public APIs on the web. However, even if they are free and open to use, some require authentication.

There are different approaches to authentication, which are specific to each API. If you're not working directly with APIs, you don't need to worry about this too much. But if you're interested, Zapier has a great guide on it.

Path Parameters

When you visit an API's URL, it doesn't return a website. Instead, it returns data or “resources.”

For example, if you visit https://pokeapi.co/api/v2 you get high-level data about the Pokemon API.

But we can add parameters to that URL to change the path and, therefore, what data we access. If you add the parameter /pokemon/ and then the name of a Pokemon to the end, you can access that specific resource (i.e., data about that Pokemon).

 
  • https://pokeapi.co/api/v2/pokemon/pikachu
  • https://pokeapi.co/api/v2/pokemon/bulbasaur
  • https://pokeapi.co/api/v2/pokemon/charizard
 

Query Parameters

APIs also often have Query Parameters.

For example, if we visit https://api.icndb.com/jokes/ you'll get a wall of data back. This is the entire database of jokes. But you can change the URL to retrieve different resources.

For example, you can specify the category:  http://api.icndb.com/jokes/random?limitTo=[nerdy]/1

Each API is different when it comes to the parameters it allows. You can read more on this topic here.

📖
Some APIs prefer Path Parameters and some prefer Query Parameters. For example, you could have an API that gets the Pokémon Pikachu by /pokemon/pikachu
📖
Another API might prefer /pokemon?name=pikachu
 

There is a lot more to APIs, but these basics are enough to give you greater context when working with developers or talking about APIs.

Create Your Own Software Using an API

Glide is a software-building platform that lets you create business apps and websites using just the spreadsheets you already work with and our robust templates. No need to learn complex code or hire out an expensive custom agency (Have you seen app building costs lately?!).

 
 

It’s easy to apply all the knowledge you just learned to create powerful work software with Glide. Sign up for free and import any spreadsheet. Once you’re inside your Glide Data Editor (pictured above), you’ll be able to edit your project's data and add new, powerful computed columns on top of your data.

One of the computed columns you can add is Fetch JSON. It makes fetching data from APIs incredibly simple. Just add the column, add your API’s URL, then add a JQ query to select the data you want.

For more help putting what you’ve learned here into practice, try following along with Darren Alderman's video, where he builds a Glide Page from scratch to make his own dictionary in just over 10 minutes!

Psst: Get to know Darren and more of Glide’s no-code agencies and individual experts here.

 

Further Resources

Ready to keep learning about the world of APIs? Here are some further resources to check out:

 

Software isn’t just for developers anymore. Try Glide.

Sign Up

Your data's glamorous
new life begins today.

Pick a spreadsheet or Airtable base, and Glide generates a basic app or website to get you started.

Get Started
Glide products UI composition

We use cookies to improve our service. Learn more.

Glide's mission is to put the power, beauty, and magic of software development into the hands of a billion new creators. Join us →