Articles in this section

Http Block

Avatar
Eliza
  • Updated

The Hypertext Transfer Protocol or HTTP is a request-response protocol that allows communication between clients and servers. The HTTP Block allows you to access HTTP Methods, to send and receive information within the Logic Maker. 

To request information you will need to use the HTTP Block's actions from the ACTION Gate. You will see that the HTTP Block has a GET action and a POST action in its ACTION Gate. By triggering the GET action your HTTP Block will send a request to the server for information. When the server receives the request, the requested content will be sent back and received by the Logic Maker. 

Similarly if you want to send information to you can use the POST action. See our article on Using IO.adafruit.com to learn about the POST action.

  • GET: Request information
  • POST: Send Information

mceclip0.png

Example - Receive information from online

Web APIs

There are many public web APIs that allow you to fetch data from a website. The purposes of these web APIs are varied, some return cat facts, while others return weather data. Depending on your project there will most likely be a web API out there for you. Here's a link below of a list of some free public API's. 

https://github.com/public-apis/public-apis

From the list, we have chosen to use a database of live exchange rates. 

https://api.exchangerate-api.com/v4/latest/USD

If you click on the link you should see that the web page will load with lines of text. This is the web page performing a GET request and displaying the information received. 

mceclip4.png

These lines of text are a JSON object. The structure of a JSON object is shown below, with the key name coming first in quotation marks, a colon to separate the name from the data, the data, and then a comma to separate each item in the object. 

{"keyName1": data, "keyName2": data, "keyName3" : data}

You can also have an object as data within the object. For example, the third item below has an object as it's data. 

{"keyName1": data, "keyName2": data, "keyName3" : {"keyName1": data, "keyName2": data}}

If we look back at the data received from the exchange rate database you can see that the "rates" item has an object containing all the conversion rates. 

mceclip0.png

Configuring Properties

Open the properties by clicking the Properties gear icon under the block in the Workspace. 

27.PNG

In the Host input, paste in the link to your web API and click save in the properties panel. 

26.PNG

Creating Logic

Next open the Logic maker

12.PNG

Connect up a PLAY Gate to an ACTION Gate. 

mceclip0.png

From the ACTION Gate select the GET action.

mceclip1.png

Click the Apply button and click the PLAY gate to trigger the GET action. 

If you go back to the properties panel you will see that there is now text in the Request Log. If it says Request Successful, it means that the data was successfully received by the Logic Maker. 

25.png

In order to access this data you will require the following Gates:

INPUT > JSON PARSER > DISPLAY

Connect them up in the same Logic Maker as where you previously made your GET action logic. 

mceclip2.png

In the INPUT Gate select Response.
mceclip4.png

Type in the key name that you want to receive in your Logic Maker. in this case we will use the "time_last_updated". You can type this into your JSON PARSER Gate without the quotation marks.

NOTE: What you type into the JSON PARSER Gate must match exactly.

mceclip5.pngmceclip9.png

If you now click the Apply Button and click the PLAY Gate you should see the received information displayed in the DISPLAY Gate. 

mceclip2.png

However you are most likely more interested in the exchange rates rather than the time. So what you can do is add another JSON PARSER Gate to parse the JSON object that contains all the rates. 

Do this by first typing in "rates" to the first JSON PARSER Gate. Next connect up a new JSON PARSER Gate to the "rates" port of the first JSON PARSER Gate. 

mceclip3.png

Type in the exchange rates you want to access. like before, make sure you type the key name exactly as it is shown. 

mceclip11.pngmceclip10.png

Connect up a DISPLAY Gate to each of the ports of the second JSON PARSER Gate. 

Click apply and play to receive the exchange rate data. You should now see all the exchange rates displayed in the DISPLAY Gates. You could further expand on this logic and create an email notification when the exchange rate changes. 

mceclip3.png

Try this out with different APIs and come up with your own project that uses online data.