0. HTTP

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] Set Up

πŸ’» Install httpie. We will be using this command-line software throughout the unit to interact with websites in a new way.

brew install httpie

πŸ’» Check it install correctly. You see a verison number appear.

httpie --version

[1] 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
  • 400 means you did something wrong.
  • 404 means the resource requested could not be found
  • 500 means, “Sorry, the server broke!”

[Using HTTPIE]

With the new tool we installed on your computer, httpie, we can send HTTP GET requests from our terminal.

πŸ’» Make a request to the cs.fablearn.org site:

http get https://cs.fablearn.org

You should be seeing something very similar to what you see in Chrome.

If you see an error, try: cs.fablearn.org or http://cs.fablearn.org

βœ… CHECKPOINT:

✏️ Complete the section, 0. csfablearn, 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] HKO

You may have noticed that our site is pretty simple. That’s because the data being sent is primarily text. Our site is not hooked up to a database.

We’re now going to look at a website that utilizes a database, the Hong Kong Observatory.


[API]

The HKO provides an open API that allows anyone to access their weather database. 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.

πŸ‘€Open the documentation from the HKO: API Documentation. We will use this throughout today’s lab.


[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.

πŸ’» Let’s start by making a simple http get request to recieve JSON from the HKO.

http get https://data.weather.gov.hk/weatherAPI/opendata/weather.php\? dataType==flw

πŸ‘€ Should recieve JSON that looks like this. However, the information will differ depending which day and time you make the request.

{
    "fireDangerWarning": "",
    "forecastDesc": "Mainly fine. Very hot with isolated showers in the afternoon. Moderate easterly winds, occasionally fresh offshore.",
    "forecastPeriod": "Weather forecast for this afternoon and tonight",
    "generalSituation": "A ridge of high pressure is bringing generally fine weather to the coast of southeastern China. Besides, showers triggered by high temperatures are affecting the coast of Guangdong.",
    "outlook": "Mainly fine tomorrow. Sunny periods and a few showers on the Mid-Autumn Festival and the following couple of days.",
    "tcInfo": "At noon, Tropical Storm Muifa was centred about 1100 kilometres south-southeast of Okinawa. It is forecast to move northwest at about 12 kilometres per hour across the seas east of the Philippines.",
    "updateTime": "2022-09-08T15:45:00+08:00"
}

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. Note the format:

http get https://data.weather.gov.hk/weatherAPI/opendata/weather.php\? dataType==flw
  • http get - tells the Terminal you are making a get request
  • https://data.weather.gov.hk/weatherAPI/opendata/weather.php - tells the Terminal which address you’d like to make the request to
  • dataType==flw - this tells the API what type of data you’d like to recieve. In this instance, flw provies the Local Weather Forecast.
βœ… CHECKPOINT:

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

You will need to use the HKO API Documentation to make specific http requests.


[3] Deliverables

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

[4] Extension

[ISF Energy Database]

The ISF Energy Database keep historical and current data about the school’s energy usage. This includes tracking how many kilowatt hours were used over a period of time and the amount of money spent. This data is tracked by sensors placed all around the school.

This API requires an authroization access token. As such, we will use an online service to make API requests easier than using the Terminal.

πŸ’» To start, you will need to join our cs10 team on Postman via this LINK. Simply sign in with your ISF Google account to get join.

πŸ’» Once you’ve joined, click on isf energy database to see the details of the API.

πŸ’» You will first need to generate an access_token from the POST Get Access Token route and copy it. We will learn more about http POST requests and routes in the next lab.

πŸ’» You can then explore the 3 GET requests available. For each one, you will need to paste in the access_token. To paste in the token:

  1. Select a GET request
  2. Select Headers
  3. Paste in the access_token, replacing the old access token

πŸ’» You can then Send the request to recieve the JSON.

  1. Select Params
  2. Change any of the paramters under Value to your desired request. You may want to open the Description to learn more.

πŸ’» The JSON will appear below in the Body. Feel free to experiment with the different display settings such as Raw.


[Other APIs]

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, or experiment using Postman. Here are some suggestions of APIs to explore: