How to use Thunder Client in VS Code to visualize API response
Visualizing API responses can help us troubleshoot issues, debug code, and gain insights into the data we’re working with. A powerful tool for achieving this is Thunder Client, which is a lightweight Rest API Client Extension for Visual Studio Code that provides a user-friendly interface for making API requests and visualizing their responses. It offers a range of features that make working with APIs more convenient and efficient.
Thunder Client allows us to:
-
Easily create, organize, and save API requests within the project.
-
Manage environment variables to store and reuse values across multiple requests.
-
Visualize API responses in a structured and readable format, including JSON, XML, HTML, and more.
-
Set up authentication for requests using various methods such as API keys, OAuth 2.0, and basic authentication.
-
Share our Thunder Client configurations and requests with our team by exporting and importing them.
Setting up Thunder Client
We’ll start by setting up the Thunder Client extension in VS Code. Select the “Extensions” menu in the left sidebar and use the search bar at the top to search for the extension. Click the “Thunder Client” extension that appears in the result, and a new page will open. On this new page, click the “Install” button. After the installation is complete, a thunderbolt icon will appear on the left sidebar. If you find it difficult to navigate the extension menu, refer to the slides below:
Getting familiar with the interface
When we click the “Thunder Client” extension in the sidebar, the client interface will open in the VS Code window. The interface is simple and intuitive to use; here is what each component in the interface accomplishes:
-
At the top, we’ll find the URL bar where we can enter the API link from which we wish to receive a response and hit the “Send” button to send the query.
-
The “Query Parameters” section will automatically detect parameters from the link and display them where we can alter their values.
-
The bar on the left shows the history of API call activity. We can also click the “New Request” button to open a fresh Thunder Client window to make a new API request.
-
The bar on the right shows the response of the API if received. It has several subsections to find the headers, cookies, results, and docs in the API response.
How to visualize API response
Now that we are familiar with the interface, we will use the OpenWeatherMap API to fetch weather data for a city. First, we need to sign up on the OpenWeatherMap website. After signing up, you can access your personal API key.
Note: If you struggle to obtain your API key from OpenWeatherMap, refer to the How to get the OpenWeather API key Answer.
After obtaining the API key, head over to Thunder Client in VS code to make the request.
- Click the “New Request” button to create a new API request.
- Specify the request type as “GET”.
- Enter the API URL.
- Click the “Send” button to execute the API request.
- Thunder Client will display the API response in a structured format on the right bar after completing the request.
- We can collapse and expand sections of the response, making it simple to navigate through the data.
Use the following URL when making your request; replace the <city name> and <your API key> fields with the city you wish to obtain the weather information of and the API key you received from the OpenWeather website.
https://api.openweathermap.org/data/2.5/weather?q=<city name>&units=metric&appid=<your API key>
As seen below, the bar on the right shows the complete response received by the API and shows an error in case of a failed request. It also displays the memory size of the response and the time it took for the response to arrive.
Thunder Client is a valuable tool that can help you understand, test, and work with APIs more effectively. Give it a try in your next project, and you’ll quickly see the benefits of visualizing API responses.
Implementation
Below, you can find a working version of VS Code, in which you can setup Thunder Client and make API requests.
Note: As VS Code is running on a virtual environment here, you will get a OS keyring error when starting thunder client. Select the “Use weaker encryption” option and everything will work normally.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Main extends JFrame implements ActionListener {
private JLabel labelQuestion;
private JLabel labelWeight;
private JTextField fieldWeight;
private JButton buttonTellMe;
public Main() {
super("Water Calculator");
initComponents();
setSize(Toolkit.getDefaultToolkit().getScreenSize());
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
private void initComponents() {
labelQuestion = new JLabel("How much water should a person drink?");
labelWeight = new JLabel("My weight (kg):");
fieldWeight = new JTextField(5);
buttonTellMe = new JButton("Tell Me");
setLayout(new FlowLayout());
add(labelQuestion);
add(labelWeight);
add(fieldWeight);
add(buttonTellMe);
buttonTellMe.addActionListener(this);
}
public void actionPerformed(ActionEvent event) {
String message = "Buddy, you should drink %.1f L of water a day!";
float weight = Float.parseFloat(fieldWeight.getText());
float waterAmount = calculateWaterAmount(weight);
message = String.format(message, waterAmount);
JOptionPane.showMessageDialog(this, message);
}
private float calculateWaterAmount(float weight) {
return (weight / 10f) * 0.4f;
}
public static void main(String[] args) {
new Main().setVisible(true);
}
}Free Resources