DEV Community

Sankalp Swami
Sankalp Swami

Posted on • Originally published at aviyel.com

Comprehensive guidelines on using Hoppscotch in 2022

Full article is available on Aviyel
Hoppscotch

Introduction

If you are in the web development world, you might have come across REST APIs. In 1999, most developers worked with the SOAP protocol, the acronym for Simple Object Access Protocol, which was not a simple task to handle and maintain. SOAP works only with XML formats which makes it very limited. This was when Roy Fielding invented REST in 2000, and his team completely changed the way of approaching APIs.

What is API?

APIs are the most relatable element for us. You can take APIs as Prayers, where you can ask for something through them. You can take APIs as a waiter in a restaurant, where User requests are customers, and the server is the chef in the Kitchen. When a customer has a specific request, it is taken to the chef by the waiter. In the same way, when a user makes a particular request, it is requested to the server through an API.

API or Application Programming Interface is a set of guidelines for communication between two applications, devices, or servers. REST which stands for Representational State Transfer, is an architectural style for this API communication between the applications or devices. As discussed earlier, how limited SOAP is with just XML formats, REST APIS can be delivered through HTTP in many formats like JSON, HTML, plain text, etc. REST APIs are an essential element in Microservice Architecture for building a Robust, Reliable, and scalable web application.

What is Hoppscotch?

When you have only four gigs of RAM, It becomes tough to have large apps running on your machine. This was when I came across Hoppscotch, which helped me open a tab on my browser instead of using a completely different electron app on my machine. Hoppscotch is an HTTP Client where you can build and test your APIs. It is a tool that helps us to build HTTP requests that we can send to the Servers. It is an API Development Suite to validate the API responses that we retrieve using those API requests. Hoppscotch comes with various rich features where you can build GraphQl queries, real-time testing, and you can document & share your APIs too.

Let's Work Practically!

No matter how many video tutorials, blogs or books you use for learning, you won't get to intermediatory level unless and until you have any hands-on experience on that particular topic. We will test some APIs and will write tests for them. Go to Hoppscotch.io. Let's start creating HTTP requests. Let's make our first HTTP GET Request on Hoppscotch using the URL -
https://api-client-1122.herokuapp.com/
Please copy the above URL and paste it into the URL box in Hoppscotch. And start with a simple GET request by pressing the Send Button.
Hoppscotch
Hurray!, Here we made our first API request and retrieved a response for the same.
{ "Message": "HI THERE" }
Okay now, that's super cool! Let's save the response for later use by clicking on the Save button. A new dialogue box appears.
Hoppscotch
Add a name to your request as 1st Request.

Collections

So, what are Collections in Hoppscotch? With the help of Collections, we can group together all the HTTP Requests of the single API Endpoint to organize it in a well-mannered way. Click on the Add new button to create a new Collection and name it Users API and click on the save button.
Hoppscotch
Select User API from My Collections and save the request to the User API Collection.
Hoppscotch
We have created our first Collection successfully and saved our 1st request to the User API Collection. Now we will try to fetch the Users list from the API. Paste the below URL for fetching the Users list from the server.
https://api-client-1122.herokuapp.com/users
Using GET Method send the request.
Hoppscotch
Uh oh! We received an Authentication error. The reason for this error is that We are not Authenticated and for that, we need to create our credentials. Let's get into creating a new user.
Change the method to POST.
And change Content Type to application/json because we are providing our data in json format.
Hoppscotch

{
  "username": "sankee",
  "password": "IplayGTA5"
}
Enter fullscreen mode Exit fullscreen mode

Add your data to the request body which you want to send with the request.
Hoppscotch
Click on the Send button to make the request. Wooo! We just made our first POST request here.
Hoppscotch
We have successfully created our credentials and have received a response.

{
 "status": 201, 
   "result": {
      "_id": "6151b7499602b70004d674f2",
      "username": "sankee",
      "password": "$2b$10$kcNFDQnfkewy.tT6TQtgVOICyeHFbT4B0rzMXVfPVuzdlGFK4htJW",
      "__v": 0
             }
 }
Enter fullscreen mode Exit fullscreen mode

Let's move forward and generate an auth token by sending our credentials to the login route. Add the same JSON data to the request body to generate auth token.
Hoppscotch
Yep! We successfully generated our auth token. Copy the auth token for using it in the user route. Save the login route to the User API collection by clicking on the dropdown arrow next to the Save Button and click on the Save as button. Name it and select User API from My Collections, and Save it!
Hoppscotch
Now again we will try to fetch the users list on the users route by adding the auth token along with the request. Click on the Authorization button below the URL box and set Authorization Type to Bearer Token. Paste the copied auth token in the Token box.
Hoppscotch
Now make the GET Method Request to fetch the users list.
Hoppscotch
We have successfully fetched the Users list. Let's try it by manipulating the token to verify its security.
Hoppscotch
Yeah, it's highly secured, cannot access the API with the wrong Auth Token. Make it correct and save the /users route to the User API collection in the same way as we did for the /login route.
HOppscotch
Moving on! Copy id of one of the users for further use.
Hoppscotch
Add the id in the URL box to update the data of a user using the PUT request. Now your URL Box will look like something of this kind.
https://api-client-1122.herokuapp.com/users/6151a8649602b70004d674f1
Change the method to PUT and add this data to the request body.

{
  "username": "sankalp123"
}

Enter fullscreen mode Exit fullscreen mode

Send the request.
Hoppscotch
As we have received a status code of 200, we have successfully updated our document. Verify it by sending a GET request on the same route.
Hoppscotch
Woohoo! Successfully updated our document. Now save the route as Update a User to the User API Collection.

As you can see we have been working with Hoppscotch which is so fast and so light weight and there's lot more features to cover which you can find on Aviyel.
Thanks for reading, Keep learning, Peace & Bubbeye!

Discussion (0)