Postman In 3 Minutes

I've heard a lot about Postman, people talk about it so matter-of-factly that I was concerned I was way behind the curve having never used it. Recently I completed a back-end coding challenge and I decided that it was a great opportunity to look into Postman since I've heard of it being used to simulate HTTP calls.

After looking into it for a few minutes, I realized that the reason I hadn't used it was because, as a full-stack developer, I've always built a front-end to go along with any back-end that I built. But after running one or two calls, I was hooked. It was so much faster and more controllable than building a set of forms or browser fields for testing my functionality. I was also surprised at how simple it was to learn and use, so this post is simply to demonstrate how simple it is by comparing it to the alternative of building a simple front-end stub for the same purpose.

Setting up Postman

To use Postman, you can either download the app or access via your web browser. If you use the web version, you'll want to download the desktop agent upon signing up, otherwise there are limitations to what you can do.
Once you access Postman, you can sign up for a free account, then you'll be all set. It will look like this at first, you'll click on the '+' tab to get started with your first request:

Simple HTTP Get

This endpoint is used to get information. For this demonstration, we'll be calling on the animals index endpoint. The idea is simply to see the raw response to make sure the backend is working.

Mock Front-End

Create a Get Animals button and the corresponding getAnimals() function:

// HTML

<button id="getAnimals" onclick="getAnimals()">Get Animals</button>

// JavaScript:

function getAnimals() {
  const url = // set to whatever your base-url is ('http://localhost:3000/' for example)
  const fetchOptions = {
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": `Bearer ${TOKEN}`
    },
    mode: 'cors', 
    credentials: 'include', 
    method: 'GET'
  }
  fetch(url + '/animals', fetchOptions)
  .then(resp => resp.json())
  .then(animals => console.log(animals))  // this logs the response to the console as JSON
}

Response:
Now when you click the 'Get Animals' button, the Response will be logged to the console:

Postman

To do the same thing in Postman, first configure the request body and add Authorization if applicable:

Body:

Authorization:

Then click Send and view the Response at the bottom of the screen:

Simple HTTP Post

This endpoint is used to create a new Animal. We'll be calling on the animals create endpoint and will pass in the new animal parameters. We want to see the details of the new animal passed back to us.

Mock Front-End

Create a newAnimal() function and a form to call it:

// HTML

<h4>New Animal:</h4>
<label for="name">Name: </label>
<input id="name" type=text name="name">
<label for="says">Says: </label>
<input id="says" type=text name="says">
<button class="submit" onclick="newAnimal()">Submit Animal</button>

// JavaScript

const name = document.getElementByID("name");
const says = document.getElementByID("says");

function newAnimal(name, says) {
  const fetchOptions = {
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": `Bearer ${TOKEN}`
    },
    mode: 'cors', 
    credentials: 'include', 
    method: 'POST',
    body: JSON.stringify({name: name, says: says})
  }
  fetch(url + '/animals', fetchOptions)
  .then(resp => resp.json())
  .then(animal => console.log(animal))
}

Response:
Now fill in the form fields with the new animal's attributes and click the 'Submit Animal' button. The new animal's details will be logged to the console:

Postman

Configure Postman Body and add Authorization if applicable:

Body:

Authorization:

Then click Send and view the Response at the bottom:

Lesson

Postman saved me a TON of time testing and tweaking different HTTP requests. It can also conveniently save your requests allowing you to share them for others to use. This is definitely worth adding to your tool bag.

Comments

[Chad Adams]

Postman is overrated. Insomnia REST API is way better. It’s free and open source. Postman’s free tier is limited and their team plans are expensive. You can do everything in Insomnia that you can do in Postman. Even if you needed to pay for Insomnia (If you need data sync or in a team) it's significantly cheaper than Postman.

[Hammed Oyedele]

For the sync part, there is also a free plugin that syncs to GitHub Gist 🎊🎊🎊

I have been using Insomnia for years now and I have wrote a couple of plugins for it.

insomnia.rest/plugins/insomnia-plu...

insomnia.rest/plugins/insomnia-plu...

[Chad Adams]

Oh sweet, that's pretty useful! Didn't know that. Now I really have no idea why people still use Postman haha

[Hammed Oyedele]

I guess because it came before Insomnia and people enjoying sticking with old technologies.

[Daniel Hintz]

Nice. I'll have to check out Insomnia! In full transparency, I used Postman simply because it's what I've heard others talking about - didn't really evaluate other options 🤦

Thanks for commenting with that suggestion!

[Beeblebrox]

How insomnia (and postman) handle credentials in collections uploaded to the cloud for sync?

[l3lackheart]

I started with postman. But since using wsl2, postman cannot connect to virtual domain on wsl2, this problem also occurs even when using cURL on CLI windows platform. But insomnia can do it. Not only that, insomnia is also fast and smooth at a perceived level, compared to postman. You should give it a look, too 😁😁

[Yash_Jaiswal]

Another great article 👍🙌. I would like to know more about the backend coding challenge and about your journey as a full stack web developer.

[Daniel Hintz]

Thanks!
Sure, I'm happy to share. Anything specific that you're curious about?

[kmumahesh]

May I know where you attended the backend challenge?

[Daniel Hintz]

Sure, the backend challenge was part of the interview process at a company called Fetch Rewards. They sent me some specs and asked me to build a web service.

Keep in mind that the code and HTTP Requests written out in this post are simplified examples and not the actual code used in the challenge.

[Yash_Jaiswal]

How did you got started with web development? Your tech stack?

[Daniel Hintz]

I've been working in tech for ~6 years in non-development roles, but I recently graduated a full-stack coding bootcamp to learn the coding side of things and am working on changing career paths now.

My stack is currently Ruby-on-Rails (with SQL/ActiveRecord) and React.js, but this is mostly because that's what the bootcamp taught. If I were to start over again, I would probably learn PHP to start instead of Ruby. There's just a lot more demand for entry-level PHP developers in today's market.

As luck would have it, my first post was about my journey, so feel free to take a look there and let me know if you want further details about anything.

How about yourself? Where are you in your journey?