Using APIs Part 1

Welcome! In this worksheet we're going to learn:

examples of an APIs in the real world
representing data in JSON
getting data from the giphy API using jQuery's ajax method

If you want to recap before or after codebar most of this content is written up at:

https://medium.com/the-codelog/using-apis-part-1-f0d78ee1c9b8#.18mo1lmax - Introduction to APIs
todo - Learning APIs using Giphy's Lolcats

What is an API

API's are a way of storing and retrieiving data indipendently from a webpage. For example : Twitter's homepage is a basic webpage, it uses an API to get back all the tweets in your news feed. The tweet data is stored in a server someplace else.

Social media sites like Twitter might use an API — for example to get back a list of most recent tweets from people you follow — data for each tweet is stored someplace else

Go through with your coach several other examples of an API

Go through with your coach benefits of having and using an API

JSON and you

Pronounced Jason, JSON is a way of expressing information and is used a lot by good APIs. For example, here is how you might express information about me:

{
  "name" : "Danielle Emma Vass",
  "twitter_handle" : "@de_velopment",
  "programming_languages" : [ "Android", "iOS", "JavaScript"],
  "address" : {
                "city" : "London",
                "country" : "United Kingdom"
              }
}

We can really view JSON using any web browser - we'll be going through Giphy's API in a moment, but take a look at the url in a new window:

api.giphy.com/v1/gifs/search?q=cat+funny&api_key=dc6zaTOxFJmzC&rating=pg

We can install a JSON formatter to make this actually readable

Google Chrome - https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
Safari - https://github.com/rfletcher/safari-json-formatter

Formatted JSON from the Giphy API

Go through with your coach what some of the data means

Go through with your coach why might Giphy have many different sizes of images - which might we want to use in our web app?

Giphy's API

Giphy have a really nice API that provides us with all the lolcats we might need! We used their search endpoint a moment ago to look at some JSON, but they have other endpoints available here https://github.com/Giphy/GiphyAPI

Going back to our search URL:

api.giphy.com/v1/gifs/search?q=cat+funny&api_key=dc6zaTOxFJmzC&rating=pg

We also have three parameters:

q = query - we're searching for cat and funny. Note no special characters like spaces allowed in a URL!
api_key = most APIs will ask for you to use a key (some make you pay for this bit!) - Giphy are super awesome providing a free key!
rating = safety rating like movies in The USA - making sure we don't get any pictures we wouldn't want our mum to see!

Go through with your coach how would you page the data (e.g. provide the next 25 lolcats) - which parameter would we need to use?

JSBin

Logging

jQuery ajax

$.ajax(
	{url: "http://api.giphy.com/v1/gifs/search?q=cat+funny&api_key=dc6zaTOxFJmzC&rating=pg", 
  success: function(result){
         console.log(result)
    },
  error: function(error){
  		console.log(error);
  }
});

Go through with your coach and make sure you can successfully log out ALL the cat gif data!

Go through with your coach how would you log to the console how many cat gifs we got back ( hint: length )

daniellevass/apis_part_1.md