What is Proxytool?

Proxytool is a developer tool that allows creating a proxy between your application's frontend and backend. Proxytool has introduced a new version of mocking with many features that can transform the request and response data without any codebase change and achieve your application's desired functionality without waiting for the changes in the server code.

This article will guide you through the basic features of Proxytool and how to use them. For complete understanding, we have built a simple weather application.

Test Application to demonstrate the functionality

Our weather application takes the city name as input and passes it to the weather API. Then it shows the current temperature and windspeed in the specified city.

The application is configured as if the temperature is above 30°C (86°F) its background changes to red. Otherwise, it is set to sky-blue, as shown above.

We will work around the weather API integrated with this application and the front end displaying the information. However, let’s see the standard response of the weather API before we will start working with Proxytool.

API Response without Proxytool

We get the following response from the weather API given below.

https://api.open-meteo.com/v1/forecast?latitude=51.5002&longitude=-0.1262&current_weather=true

{
  "latitude": 51.5,
  "longitude": -0.120000124,
  "generationtime_ms": 0.23102760314941406,
  "utc_offset_seconds": 0,
  "timezone": "GMT",
  "timezone_abbreviation": "GMT",
  "elevation": 6,
  "current_weather": {
    "temperature": 18,
    "windspeed": 8.2,
    "winddirection": 142,
    "weathercode": 80,
    "time": "2022-10-23T13:00"
  }
}

Now, we are good to move towards implementing Proxytool to mock the request and response.

Set up Proxytool - Create New Project

After completing the signup process, you are redirected to the dashboard where you have already demo project created. However, we create a new project for our weather application.

• Click on the button "ADD NEW PROJECT"
• Enter the name of the project
• Enter the source API, which is our weather API in this case
  
  

Proxytool URL

After creating the new project, the Proxytool gives us a URL that corresponds to the source API we provided while creating our project.

The critical point here is that the mocking of requests and responses is reflected on this URL. So, we have to integrate this URL generated by Proxytool in our weather application.

API response with Proxytool

Before moving forward to mock the request and response, let’s verify that the URL generated by Proxytool sends back the same response as the original API.

https://weather-7rl.proxytool.app/?latitude=51.5002&longitude=-0.1262&current_weather=true

{
  "latitude": 51.5,
  "longitude": -0.120000124,
  "generationtime_ms": 0.23102760314941406,
  "utc_offset_seconds": 0,
  "timezone": "GMT",
  "timezone_abbreviation": "GMT",
  "elevation": 6,
  "current_weather": {
    "temperature": 18,
    "windspeed": 8.2,
    "winddirection": 142,
    "weathercode": 80,
    "time": "2022-10-23T13:00"
  }
}

So, Proxytool returns the same response. We have integrated this URL into our weather App to show the current temperature (°C)  and wind speed. We will go through request and response modifications, but we must create a rule first.

Creating Rule

For mocking requests and responses, we need to specify rules for it.

• We need to alter the request and response, so select the rule type Altering
• Our weather API is a GET call, so select the same for the rule.
• Define the path URL where this rule will be applied. In our case, it is /
• Name sunrise_sunset to the rule to identify it later.

A new rule has been created, and we are ready for request and response modifications.

Request Mocking

We want to fetch the sunrise and sunset time along with the temperature of the specified city. For this, the weather API needs the following parameters in the query params of the request URL.

daily=sunrise,sunset&timezone=auto

As we have integrated the Proxytool URL in our weather application, we don’t need to modify the code to send these parameters to the URL. Here comes the real power of Proxytool, which allows the development of the features quickly and without change in the codebase.

Tap into the current request

As we need to add the above parameters to the request, set the changing item to Query, name of the query param, its type, and value. After filling in the information, click set to apply changes to the request.

That’s it. Every request to the Proxytool-generated URL on / path will execute this rule and add these query parameters to the request. Let’s check the response and test it in our weather app.

API response after modifying the request

The same call to the following URL now includes the sunrise and sunset information, and our application successfully displayed it accordingly.

https://weather-7rl.proxytool.app/?latitude=51.5002&longitude=-0.1262&current_weather=true

Note: We have displayed only the current day’s sunrise and sunset.

{
  "latitude": 51.5,
  "longitude": -0.120000124,
  "generationtime_ms": 0.8749961853027344,
  "utc_offset_seconds": 3600,
  "timezone": "Europe/London",
  "timezone_abbreviation": "BST",
  "elevation": 6,
  "current_weather": {
    "temperature": 18,
    "windspeed": 8.2,
    "winddirection": 142,
    "weathercode": 80,
    "time": "2022-10-23T14:00"
  },
  "daily_units": {
    "time": "iso8601",
    "sunrise": "iso8601",
    "sunset": "iso8601"
  },
  "daily": {
    "time": [
      "2022-10-23",
    ],
    "sunrise": [
      "2022-10-23T07:36",
    ],
    "sunset": [
      "2022-10-23T17:53",
    ]
  }
}

And it looks like this on the app:

Response Mocking

We will change the temperature in the response and set it to 80°C (unrealistic for any place on the earth, but we achieve it using Proxytool).

Keep in mind our app sets the background color of the temperature field to red if the temperature is above 30°C (86°F). So, you can determine the change immediately.

Tap into the current response

As we need to change the temperature from the response. So, set the changing item to Query, the property's name to change, and its value. After filling in the information, click set to apply changes to the request.

API response after modifying the response

The current temperature in London was 15.7°C

Now, the same call to the following URL sets the temperature to 80°C in the response, and our weather app shows it exactly and sets the background color to red accordingly.

https://weather-7rl.proxytool.app/?latitude=51.5002&longitude=-0.1262&current_weather=true

{
  "latitude": 51.5,
  "longitude": -0.120000124,
  "generationtime_ms": 0.24402141571044922,
  "utc_offset_seconds": 0,
  "timezone": "GMT",
  "timezone_abbreviation": "GMT",
  "elevation": 6,
  "current_weather": {
    "temperature": 80,
    "windspeed": 8.2,
    "winddirection": 142,
    "weathercode": 80,
    "time": "2022-10-23T13:00"
  }
}

With this response, our app is in red:

We have modified the request and response using an interactive user interface. It makes the Proxytool a straightforward approach for those who are not regular in coding but needs to mock their requests and responses.

Custom Code

Proxytool also allows complete control of the request and response customization through code.

For instance, if we want to convert the temperature in the response from Celsius to Fahrenheit and assign it to a new key in response, we can achieve it through a custom code feature.

Click on the Customs Code and write the required logic.

Upon hitting the same Proxytool URL, we get the response with the key containing temperature in Fahrenheit.

https://weather-7rl.proxytool.app/?latitude=51.5002&longitude=-0.1262&current_weather=true

{
  "latitude": 51.5,
  "longitude": -0.120000124,
  "generationtime_ms": 0.22304058074951172,
  "utc_offset_seconds": 0,
  "timezone": "GMT",
  "timezone_abbreviation": "GMT",
  "elevation": 6,
  "current_weather": {
    "temperature": 18,
    "windspeed": 8.2,
    "winddirection": 142,
    "weathercode": 80,
    "time": "2022-10-23T13:00"
  },
  "temperature_in_fahrenheit": 64.4,
}

Our weather app is configured to display the temperature in Fahrenheit if the key is present in the response.

Proxytool Logs

You can access the details of your requests in the Logs section. You can access the following information about each request made to the project URL.

• Timestamp - when the request was made
• Request method
• Response code

Moreover, you can compare and differentiate between your original and modified request/response. For this, you can click on any request to expand the information and see the original and altered details like;

• Rules applied on request/response
• Query Parameters
• Headers
• Body
• Status & Response Time

This is how you can make full use of Proxytool. It allows the developers to test their applications without waiting for the changes in the server-side code and saves the projects from failure.

Proxytool is intended to use for development purposes as it speeds up the process by overcoming any server-side blockers. You should not use it in a production environment, as modifications in the request/response or rules applied can lead to unexpected results.

Hopefully, this article has motivated you to go ahead and explore it for your current or next project.