shiryz/api-workshop

Author: @lucymonie

Maintainer: @lucymonie

Introducing APIs

There are a few core concepts you need to understand in making API requests. By the end of this morning's workshop you should have a mental model of

• The request-response pattern
• HTTP methods and status codes
• The fetch API

The workshop

We will be working in pairs this morning, so figure out who you will be working with. The plan is that each pair should actively read and discuss each topic and try to make sure they both understand the material. How you do this is up to you - you may like to take some time to read separately and then discuss the material between you. Remember: Google is your friend.

For each topic we will give you 10-15 minutes of reading and discussion time in your pairs, and then we will spend 10-15 minutes asking you questions about the material, and we will pick on pairs at random to answer the questions or explain aspects of the material. We will also attempt to answer any questions you may have for us.

After that we will work on some examples in which we will make API requests.

What to do

Start by adding JSONView a Chrome extension that makes JSON data much more readable in Chrome

Read each section and be ready to answer questions

1. Request and response pattern

2. HTTP

3. Fetch API

4. Fix a broken API request

   • You will need to clone the repository and work on the code locally
   • If you have ssh keys for github: git clone [email protected]:shiryz/api-workshop.git
   • Otherwise, use:git clone https://github.com/shiryz/api-workshop.git
   • Open index.html in the browser and you will see that the API request is not working
   • Open main.js and look for what's broken or missing in the code. If you're confused, check it line-by-line against the description of fetch in this file

Follow up and further learning

• If you're at all hazy about how the Internet works, watch this excellent explanation
• If you're interested in how domains are translated into ip addresses, watch this amusing discussion of DNS
• REST (Representational State Transfer) is a best practice standard for web interactions. This video gives some background about REST.
• If you need a more comprehensive tutorial on fetch, follow this post

api-workshop's Issues

Update step 3 to introduce fetch

Update step 3 to introduce fetch instead of xhr following this tutorial

some.json file for example requests does not exist

You it be possible to create this file so that students can open the dev console while doing the workshop and see the result of both the xhr and fetch request?

Example fails to fetch

In the 03-fetch.md, the example using the fails in to fetch in the dev console. Any way we could fix this?

API example not working

In 01-request-response.md
The example API
http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

This link uses an API key that has exceeded its requests limit and no longer works.

Tamar gave us this example instead. https://api.exchangeratesapi.io/latest
(could do with an example that has search specifics in the url as the lesson tells us to look at this but it doesn't make sense with this example)

Change step 5 in tutorial from xhr to fetch

Fix broken api example is using xhr atm and should be changed to use fetch instead