Intro.
Im incredibly new to programming, in fact I have just over almost two months (any New Girl fans?). I only just recently completed by first project building a fully interactive website with several requirements such as needing a certain number of eventListeners, manipulating the DOM to alter pages rather than multiple HTML docs and one requirement which we had only briefly been introduced to and only made up a few lines of code and that was using an API. Now at first glance, at least to me, the idea of APIs seemed like a useful tool to add some more features to a website till I realized that the entire functionality of my website relied on the API, without it it would have been, well, nothing really. It was because I had only introductory knowledge of them and only got a taste of what they could do, that I decided to dig a little deeper into the world of APIs.
What exactly is an API?
So let's start with, what is an API? Simply put APIs provide the means for one program to access information and capabilities of another. Lets use a real world example that will hopefully make things even more clear. Years back when I bought my first house I had heard you can save a lot of money if you did it yourself. I made it about a week into that and realized a.) I had no idea what I was doing or where to start and b.) I don’t think the money I would have saved would have been more valuable than the ease, efficiency and security provided by a real estate agent. They had the knowledge and resources to take all of my requests(where I want to live, budget, square footage etc.) and translate it into a list of houses that matched my needs. They handled all the paperwork and hiring of inspectors and evaluations. I hardly knew any of the details of what went on behind the purchase of my house, all I had to do was sign some papers and write a check. In this analogy I am the program making a request(a home matching specific requirements) the real estate agent is the API(he translates my requests and passes them along to the necessary providers(mortgage lender, seller, inspector) these act as the program I am making a request to (I need a loan of this much, I want to buy this house) and at the end of it all the agent produces what i asked for namely a house in this case.
Now let's use a programming example. Let's say you develop an app that provides your users with information about coupons at your local stores. Now you as the app developer don't have all the information on the coupons and, i'm sure you don’t want to visit every site of every store and gather that information yourself so what’s a better option? APIs! Your app can use an API to request the data on the coupons from the different stores and give your users access to it all in one place. The beautiful thing about all of this for the user and developer as well is something called abstraction, or the hiding of all the complex stuff going on in the background.
How do you access an API?
After finding the API you wish to use, there are both free and paid APIs, you will need to make a request to said API. You do so by making a fetch request, in this case specifically a GET request (there are other types of requests such as POST but I'll be focusing on the GET fetch request). A fetch request looks like this
fetch("Path to API")
.then((resp) => resp.json())
.then(function (Obj) {
// code that will do something with the requested data
}
The information you'll put inside the parentheses after fetch will be the path to the data source you are making a request to. The server will then return a Promise object that represents what the data source sent back but is not the actual content. The first .then is called on the Promise object returned by the fetch request and takes one argument which is a callback function. Inside this call back function we make whatever changes we need to the object, the most common being json() and text(), but lets focus on json(). The json() method will convert the response from JSON data and returns a Promise which gets returned from our callback function. It's important to remember that the data we got out of the response and converted from JSON must be returned in order for it to be used in the next .then(). Speaking of, the second .then() will take the data that has now been put into a data type that we can make use of and use it to manipulate the DOM.
If you're curious what json data looks like before it is translated by “.json()” here’s an example.
[
{
"id": 42,
"title": "Voluptatem iure ut qui aut et consequatur quaerat.",
"file_name": "mclaughlin.rb",
"description": null,
"visibility": "internal",
"author": {
"id": 22,
"name": "User 0",
"username": "user0",
"state": "active",
},
"updated_at": "2018-09-18T01:12:26.383Z",
"created_at": "2018-09-18T01:12:26.383Z",
"project_id": null,
},
{
"id": 41,
"title": "Ut praesentium non et atque.",
"file_name": "ondrickaemard.rb",
"description": null,
"visibility": "internal",
"author": {
"id": 22,
"name": "User 0",
"username": "user0",
"state": "active",
},
"updated_at": "2018-09-18T01:12:26.360Z",
"created_at": "2018-09-18T01:12:26.360Z",
"project_id": 1,
}
]
Looks a lot like something familiar right? Say a javascript object?
Now this was by no means a comprehensive guide on API requests and there is enough information to warrant several blogs worth of information but hopeful its a enough to at least get you started.
What it means to you.
At this point hopefully you’re beginning to realize the power of APIs and the crucial role they play in the modern tech world. So what does all of this mean to you, the developer? It means a lot, especially those looking to create a startup. Thanks to APIs developers can now write less code and use data and services provided by outside sources. This means more time spent on your applications features and improving user friendliness. It means increased options for services you can provide, you are no longer limited by just you and your team's capabilities but are now empowered by 1000s of others. A single synapse can’t do much, but start connecting more and more, allowing information to be accessed and passed to and from all parts of the now fully developed “brain” and you’ve got true and powerful potential.
But be warned.
If you're the one exposing your data to be used by others, know that not all who make a request do so with good intentions. Opening the door, even just a crack, invites attackers to shove it open and take more than you were offering. So if you are looking to provide data via an API be sure to know the risks and how to mitigate them.
Author,
Michael Meoak,
Student of Flatiron School
Top comments (0)