Making with Code

HTTP: How Computers Communicate #

The Internet may be humanity’s most profound invention. A global network of computers talking to one another, making it possible for people all over the world to interact. In this lab, we will start learning about how computers talk with one another.

👾 💬 FYI

All actions on the Internet are composed of HTTP Requests.

  • Every time you access a website, it triggers a series of HTTP Requests depending on its complexity.
  • Every time a client requests information from a server, the request is recorded along with the status code.

New Vocabulary #

  • HTTP stands for “Hypertext Transfer Protocol.” It’s a set of rules for how computers ask each other for content, and how they reply.
  • JSON stands for JavaScript Object Notation. It is the standard file format for exchanging data over the internet. The syntax mimics dictionaries by using key and value pairs.
  • API stands for Application Programming Interface. It is software that allows computers to communicate with each other. An API often provides JSON.

[0] HTTP GET #

Every time you visit a URL, your computer opens a connection with the server at that address and uses HTTP to send and recieve the content.

GET Request #

Communication starts when one computer (the client) sends a request to another computer (the server). For example, by visiting “cs.fablearn.org” you initiate a GET request to recieve the Making with Code homepage from the server.

A GET request contains following:

GET Response #

Once the request has been recieved by the server, it responds by sending the client a HTTP response. If a successful connection has been made, the server sends the content to the client.

Here’s an example of a HTTP response to a successful GET request to the course website:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

HTTP/1.1 200 OK                                 // This is the response
Content-Length: 2081                            // I am sending a lot
Content-Type: text/html                         // I am sending HTML
Date: Tue, 18 Aug 2020 19:23:28 GMT             // This is when I sent it
Last-Modified: Tue, 18 Aug 2020 15:46:28 GMT    // There is new content

<!DOCTYPE html>                                 // Here it comes!
<html lang="en">                                // Here is your webpage
    . . . 
<p><em>Making with Code</em> is a new, old 
approach to teaching computer science 
based in Constructionism.</p>
    . . .
  • 200 (line 1) is the response status code.
  • Content-Length (line 2), Content-Type(line 3), Date(line 4), and Last-Modified(line 5) are response headers. They provide more detail about what is being requested and what is being sent back. For example, the Content-Type tells your computer what type of data is being recieved. For “cs.fablearn.org”, your computer recieves the HTML, Javacsript, CSS, and image files that make up the homepage of the site.
  • <!DOCTYPE html> (line 7) is the beginning of the content sent with the response. This is the HTML of the course website which your browser then renders as a webpage.

Status Codes #

Status codes are used to signal how the communication between the client and the server is going.

Common HTTP Status Codes

  • 200 means success.
  • 300 means you’re looking in the wrong place
  • 304 means there’s no new content since you last came to this page
  • 400 means you did something wrong.
  • 404 means the resource requested could not be found
  • 500 means, “Sorry, the server broke!”

Using HTTPIE #

✅ CHECKPOINT:

Complete the section, the-isf-academy.github.io/making-with-code, of the worksheet. You will need to:

  • Right click and click “Inspect”
  • Select “Network” from the top toolbar in the developer tools
  • Hard refresh the page with “Command + Shift + R”

[2] API: DATA.GOV.HK #

DATA.GOV.HK hosts open data provided by the Hong Kong government. It provides an open APIs that allows anyone to access their databases. We are going to use HTTP Requests to access this database.

API stands for Application Programming Interface. It is software that allows computers to communicate with each other. An API often provides JSON.

✈️ In this lab, we will look at the data for the HK International Airport

JSON #

JSON stands for JavaScript Object Notation. It is the standard file format for exchanging data over the internet. The syntax mimics dictionaries by using key and value pairs.

For example, this is JSON for the HK International Airport. What is the JSON describing?

[
  {
    "date": "2025-08-01",
    "arrival": true,
    "cargo": true,
    "list": [
      {
        "time": "00:00",
        "flight": [
          {
            "no": "ET 3684",
            "airline": "ETH"
          }
        ],
        "status": "Cancelled",
        "statusCode": null,
        "origin": [
          "LGG",
          "KGF"
        ]
      },
      ...
  }
]

Notice how it looks exactly like a dictionary with key and value pairs.

Making HTTP Requests #

This lab will require you to make a series of http requests to the HKO API.

💻 Go to httpie.io/app. You will use this web app to send HTTP requests.

💻 Make a simple http get request to recieve JSON from DATA.GOV.HK.

  • GET - tells the app you are making a get request
  • https://www.hongkongairport.com/flightinfo-rest/rest/flights/past - tells the app which address you’d like to make the request to
  • date: 2025-08-01 - tells the date you want is August 1st, 2025
✅ CHECKPOINT:

💻 Open the flight API documentation from DATA.GOV.HK: API Documentation. You will need to utilize this resource complete the worksheet.

✏️ Complete the section, 1. DATA.GOV.HK API, of the worksheet to further explore http requests, JSON, and APIs.

[3] Deliverables #

⚡✨

Once you’ve successfully completed the worksheet be sure to fill out this Google form.

[4] Extension #

Now that you’ve had succifient practice accessing APIs, it’s time to explore what type of APIs exist.

💻 Explore an API of your choosing. You may want to use the httpie Terminal commands. Here are some suggestions of APIs to explore: