Jose Zamudio


Full Stack Developer | Coding, Thoughts, stories and ideas.


APIs made easy

For the past week or two we have been working a lot with APIs. We have used the Twitter API, the Facebook API, the Weather Underground API and many others. From what I've learned APIs are one of the most important concepts in the web development industry. But first let me tell you what an API is (well...let Webopedia define it...)

API, an abbreviation of Application Program Interface, is a set of routines, protocols, and tools for building software applications. The API specifies how software components should interact and are used when programming graphical user interface (GUI) components.

An easy way of describing an API is a URL that can take requests, either GET, POST, PUT, or DELETE, which are pretty self explanatory:

  • GET - You use it to request data from a server.
  • POST - You send data to the server.
  • PUT - You update a data object in the server.
  • DELETE - Do I need to explain this one? You delete data from the server...

Lets make a call to an API, we are going to use Github's API:

On your Terminal type to get a response:

curl https://api.github.com/users/soyzamudio

Response:

  {
    "login": "soyzamudio",
    "id": 3433118,
    "avatar_url": "https://avatars.githubusercontent.com/u/3433118?v=3",
    "gravatar_id": "",
    "url": "https://api.github.com/users/soyzamudio",
    "html_url": "https://github.com/soyzamudio",
    ...
  }

The response comes formatted in JSON which means Javascript Object Notation and it is based on keys and values. For example, in the response we got, login is the key and soyzamudio is the value assign to that key.

If you wanted to get that information using Javascript you would use the following function:

function getData() {  
    $.getJSON('https://api.github.com/users/soyzamudio')
    .done(function(response) { // if call is successfull
        console.log('response'); // output: JSON of the user's information
    })
    .fail(function(err) {
        console.error('err'); // output: Error message
    });
}

Line 1: We create a function to be called.
Line 2: We create a getJSON call to the URL (a shortcut for $.ajax calls of getJSON type).
Lines 3-5: We create a function to check if the call to the server was successful.
Lines 6-8: We create a function to check if the call to the server failed.

If you check your console in Chrome Developer Tools you will see the same response you saw on terminal.
If you want to access any of the keys in the response you can simply use the key like this:

console.log(response.login) // output: "soyzamudio"
console.log(response.url) // output: "https://api.github.com/users/soyzamudio"
...

Congratulations! you made your first API call using Terminal first and Javascript!

APIs are the way servers communicate with each other, there is a lot information on the internet that can be accessed and used with APIs. You can check my Weather App and the Source Code which are using Weather Underground's API.

If you have any questions please leave a message below, I'm no expert but I will try my best to help out.