HTTP Requests, AJAX and APIs

Getting Started

Now you know the basics of how webpages are made. How do many websites really work?

Many will use a thing called an API : this is where data is stored someplace else (probably a server) and the website asks for the data it wants. E.g. your twitter feed - the data (all the tweets) is stored on their servers - the twitter website will ask the server for the top 20 new tweets in your feed.

This can be useful if you're going to have multiple clients (a website, an Android app, an iPhone app etc) that all need to display the same data.

Task 1 go through with your coach some other websites examples that will use an API and what data they might be getting.

Looking at an API

Let's start by having a look at how an API might work. We're going to use Giphy's api that brings us back funny cat gifs (because everyone loves funny cat gifs!)

Navigate to Apigee (https://apigee.com/console/others) - which is a website for viewing what data would be returned from an API request

In the box to enter in the URL enter http://api.giphy.com/v1/gifs/search?q=cat+funny&api_key=dc6zaTOxFJmzC&rating=pg and search. Take some time to look through the response tab to see what data got returned.

Task 2 Using Apigee with the giphy api go through with your coach how the JSON looks. What would you need to type in to get the array of images? What would I need to type in to get the first gif url?

Using an API

You can either create a new html webpage with a javascript file - or use a tool like JSFiddle or JSBin to get started. I'm going to be using JSBin to demonstrate. You also want to use the jQuery library.

$.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);
  }
});

Run this with the developer console open should allow you to see the data that's returned - or tell you what's gone wrong!

You should be able to use JavaScript a for loop to console log each gif url returned. Hint: results.data is the array of gifs - each gif object has an array of different type of images - you probably want images.original.url

Task 3 Use the data returned to display the gifs inside img src attributes - ask your coach if you get stuck

Changing up the parameters

So currently we've been using a specific url to search for funny cat gifs - what if we don't like cats?

Looking at the url : http://api.giphy.com/v1/gifs/search?`q=cat+funny&api_key=dc6zaTOxFJmzC&rating=pg` we can see all the parameters after the question mark (?). Further more, each parameter is seperated with the ampersand character (&):

q - the query we want to search for - we need to be careful what "special" characters we put in here (space characters will break!)
api-key - most api's require people to use a key, so they know who is sending a which requests (or if they're sending too many!). Giphy kindly has a public api key for everyone to use to get started - we'd need to apply for a private one if we wanted to put our website into production and potentially have millions of people using it!
rating - picture rating e.g. "pg" so we don't get any accidentally rude pictures.

There are some others listed in the Giphy documentation - https://github.com/Giphy/GiphyAPI#search-endpoint - what other parameters might be useful for you?

Task 4 Ammend your website to allow users to search for the gifs they want to return - ask your coach about tactics for dealing with special characters such as spaces

Hard Mode (no jQuery)

:todo not using jquery (why would you want to?!)

Finishing

Can you explain the following with your coach:

explain what an API is
give an example of api and where it might be used

daniellevass/api_1.md