Recently I've been involved in backend development writing an REST API to expose some data to other apps from our client's ecosystem.

After messing with curl, I felt the need to have some friendlier way to test the API, besides writing some shell scripts or Python code, so non-technical people could also test with ease. Hoppscotch came to the rescue.

Hoppscotch

Hoppscotch is a free open source API development suite which runs in your browser. A commercial equivalent is Postman. Hoppscotch provides a workspace environment, where you can organize your work in request collections and environment variables.

This post shows the basic usage of Hoppscotch services for testing requests to an API. For more details on how to setup testing and scripts, refer to the official documentation at https://docs.hoppscotch.io/.

Sample code for the server

For this article, I'm using the following GitHub repository for the server code (Go with Gin). It provides an API to retrieve and create drivers for an not nearly secure or even close to hitchhiking-like app (you know which one).

The server (as of the time of writing this post) provides the following API:

We'll start by creating a collection to hold our requests.

Creating a collection

Collections are a way to organize your work. So, for your workspace, you could create a collection for all driver-related requests, other collection for hitchhiker requests, and another for the rides requests.

Let's start by clicking on the Collections icon and then clicking on + New.

Give your collection a name (if following the example API, I would recommend GoRestDrivers).

Next, we'll create our first request. On the three dots icon on the right hand side of your collection, you can see other operations, such as exporting and renaming your collection.

Creating a request

After creating a collection, we can use the New button to create a new request. Let's do that.

Let's name our request Create Driver. The main area is now representing this request. Let's customize the request. According to the documentation, to create a driver we must send a request usiung the method POST to the /driver endpoint. The body of our request is a json object.

There's a combo for choosing the method. On the left, click on GET and change it to POST. The URL should be http://localhost:8080/driver, as I am running my server on the localhost using port 8080.

To set the body of our request, click the Body tab. Set content-type to application/json, and on the raw request body, we can insert the data to create our driver.

Running the request and troubleshooting

To test our request, we must first run the server. Then, we'll need to click on the button Send.

If this is your first time running, you may receive an error that the API endpoint couldn't be reached. This could mean the server isn't running, you need a proxy or you haven't installed the Hoppscotch browser extension. A message similar (because I already have installed the browser extension, but haven't started the server yet) to the following should appear.

After installing the browser extension and making sure the server is running on the correct port, click Send again. You should see the result.

Try modifying the body json to create new drivers. A following exercise should be creating the other request, like the GET request to get the list of drivers to verify everything is working as it should.

Creating environment variables

Until now, our requests used a hardcoded port (8080) to access our server. But if we are to modify the port, we would have to change every request created.

We can use environment variables to avoid this issue. Let's change our GET /driver request to use a variable named port instead of a hardcoded port. The URL will be written as follow:

Variables are referenced by <<variable>> and can be used everywhere. For example, you can define a token variable and use it as the authorization token value. When a variable isn't defined yet, it will have a red shading. After defining the variable, it will assume a blue shading.

Click the Environment icon, and the Global environment.

A popup will open to Edit Environment. Click the + icon to create a new variable, name it port and assign the port value.

The port variable shading in the request will be changed, signifying it is defined.

Anytime you need to change the value of the port, you just need to change the variable value in the Environment.

Conclusion

This was a quick introduction to Hoppscotch. I hope this has driven your curiosity to experiment with Hoppscotch. It has made testing our APIs easier.

For more information, check the current documentation on https://docs.hoppscotch.io/.