Prerequisites

Intro

In this course we'll cover what an API is, why they exist, and learn a bit of code to experiment with one.

Opening a web browser

Let's start by viewing the tweets of Josue. 

What would you do on your computer to open Twitter and see Josue's profile?

That's right! 

Opening Twitter

A web browser is one type of application that lets you interact with an API.

What would you do once you open a web browser like Safari, Chrome, or Firefox?

Easy, right?

Request

Believe it or not, every time you open a website like Twitter, you interact with an API.

By visiting https://twitter.com, you request data using Twitter's API.

Get request

When visiting Twitter's website, you are making a GET request to https://twitter.com.

Let's start a GET request to see how the server responds.

Web browser: GET https://twitter.com

//Output Below

<!DOCTYPE html>
<html lang="en" data-scribe-reduced-action-queue="true">
  <head>
   <title>Twitter. It&#39;s what&#39;s happening. 
   </title>
...

Sweet! But what could this response mean?

HTML response

When you made a GET request to https://twitter.com, Twitter sent an HTML file as a response. 

HTML is used to structure content on a website. If we dig into the HTML file Twitter sent us, we can find things like a login button. 

...
<a class="js-nav EdgeButton" href="/login">Log in</a>
...

To learn more about HTML, make sure to add it to your favorite tracks.

Twitter's developer API

While an HTML file will display a website, it's not so great when we don't need webpage structuring data.

For that, we can use Twitter's developer API. Let's try making a GET request for Josue's Twitter profile with https://api.twitter.com

GET https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado;

//Output Below

[{
    "created_at": "Wed Sep 11 12:52:32 +0000 2019",
    "text": "No more stress. Pharst Care is here to save you the stress of going from pharmacy to pharmacy. ",
    "favorite_count": 1,
    ...
}]

Woah! That doesn't look like HTML.

JSON Response

Twitter's developer API sent back a JSON file

Let's point out data sent back in the JSON file.

[{
    "created_at": "Wed Sep 11 12:52:32 +0000 2019",
    "text": "No more stress. Pharst Care is here to save you the stress of going from pharmacy to pharmacy. ",
    "favorite_count": 1,
    ...
}]

Great job!

Why JSON?

What response do you think developers prefer?

Awesome!

JSON Object

Each Tweet is formatted as a JSON object.

Let's try putting together a JSON object the Twitter API might include in its response.

{
    "created_at": "Thu Apr 06 20:28:43 +0000 2018",
    "text": "I love to tweet!",
    "favorite_count": 20
}

Awesome work!

How is it used?

API stands for Application Programming Interface because different apps need responses in different formats.

If your web browser uses an HTML response to show and structure data on a web page, what might JSON data be useful for?

Awesome!

Intro

Let's dive into coding a request to an API.

JSON object

When we talked about JSON objects, we were talking about JavaScript Object Notation.

Let's fill out this JSON object so that it makes sense for developers.

{
  "Name": "Josue",
  "Nationality": "Ghanaian"
}

Awesome!

JavaScript

JavaScript is a type of programming language. To keep things simple, we'll learn how to make an API request using JavaScript.

To get started, say you're ready by printing something to the console using JavaScript.

console.log("Are you ready?");
console.log("I'm ready.");

//Output Below

Are you ready?
I'm ready.

Nice!

A new request

The first step is to create a new request using the new keyword.

new

Make sure to spell new.

Creating a request

Although it seems strange, the way to create a new request is using a tool from JavaScript called XMLHttpRequest(). Let's give it a try.

new XMLHttpRequest()

Awesome!

Ending with a semicolon

Finally, each line of JavaScript code ends with a semicolon. Let's add one.

new XMLHttpRequest();

Nice job!

Creating a variable

To make sure we can do different things with the request, let's store it in a variable called request.

var request = new XMLHttpRequest();
console.log(request);

//Output Below

XMLHttpRequest { … }

Awesome work!

URL

Next, we'll need to specify the URL for the request.

Create a variable named URL and set it to Josue's profile on Twitter's developer API.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";

console.log(url);

Nice!

Open

By using request.open(), we can specify the request.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open();

Awesome!

Specify request

Now we need to specify what kind of request we want to make.

Place "GET" between the parentheses to specify the type of request.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET");

Nice work!

Specify URL

Next, specify the URL in the request by adding a comma and using the url variable we created.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url);

Neat job!

Waiting for a response

The final part we need to specify is if we want more advanced code that will work better while it waits for a response from the API.

We'll set it to false so we can focus on the basics.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url, false);

Nice!

Sending request

Now that the request is open, we can send it using request.send().

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url, false);
request.send();

Awesome!

Response

The last part is to display the response in a variable on the console. Let's try it with request.responseText.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url, false);
console.log(request.response);

//Output Below

[{
    "created_at": "Wed Sep 11 12:52:32 +0000 2019",
    "text": "No more stress. Pharst Care is here to save you the stress of going from pharmacy to pharmacy. ",
    "favorite_count": 1,
    ...
}]

Great work, we just printed the JSON response from an API!

Practice

Let's use a APIs to build a website about cats!

What we'll do

We'll make calls to an API that generates random cat facts.

We'll then format the response, so it's easier to read.

Create a title

Let's get started by creating a nice title.

console.log("Cat Fact");

//Output Below

Cat Fact

Neat!

Create a request variable

Let's create a variable named request to store the value of our request.

console.log("Cat Fact");
 
var request;

//Output Below

Cat Fact

Awesome!

Create the request

Now let's create the actual request.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();

//Output Below

Cat Fact

Nice job!

URL

The URL of the random cat fact generator API is https://cat-fact.herokuapp.com/facts/random.

Let's create a variable called url to store it.

console.log("Cat Fact");

var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";

Sweet!

Open request

Open the request to get it started.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open();

//Output Below

Cat Fact

Sweet!

Specifying open request

Set the type of request, url, and tell the request if we don't want the advanced functionality it has to offer.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);

//Output Below

Cat Fact

Neat job!

Send the request

Now we can send the request to the API.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();

//Output Below

Cat Fact

Awesome job!

Handling the response

Let's create a response variable for the responseText of the request.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.responseText;

//Output Below

Cat Fact

Nice work!

Parse data

Let's create a data variable to format the response as a JSON object.

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);

Awesome work!

Log the data

Now log the data, so we can find out what's inside!

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);
  
console.log(data);

//Output Below

{
 "text":"The average cat sleeps between 12-14 hours a day.",
 "createdAt":"2018-01-04T01:10:54.673Z",
 "source":"api"
 ...
}

Sweet!

Logging the cat fact

Knowing what the response looks like, extract the piece of data most important: the text.

{
 "text":"The average cat sleeps between 12-14 hours a day.",
 "createdAt":"2018-01-04T01:10:54.673Z",
 "source":"api"
 ...
}
console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);
  
console.log(data["text"]);

//Output Below

Cat Facts
The average cat sleeps between 12-14 hours a day.

Great job!

Results

Great job! We made a request to an API and displayed data in a very readable way. Just like an app or website.

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);
  
console.log(data["text"]);

//Output Below

Cat Facts
The average cat sleeps between 12-14 hours a day.