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 meaning of 'asynchronous' in the context of API requests

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. Asynchronous code

5. 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 git@github.com: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