DEV Community

loading...
Cover image for Postman In 3 Minutes

Postman In 3 Minutes

dhintz89 profile image Daniel Hintz ・3 min read

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:

Postman Welcome Page

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>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

Postman

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

Body:
Request Body
Authorization:
Request Auth Headers

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

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>
Enter fullscreen mode Exit fullscreen mode

New Animal Form

// 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))
}
Enter fullscreen mode Exit fullscreen mode

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:
Post Response in Console

Postman

Configure Postman Body and add Authorization if applicable:

Body:
Postman Post Body
Authorization:
Postman Post Auth

Then click Send and view the Response at the bottom:
Alt Text

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.

Discussion

pic
Editor guide
Collapse
chadalen profile image
Chad Alen

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.

Collapse
devhammed profile image
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...

Collapse
chadalen profile image
Chad Alen

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

Thread Thread
devhammed profile image
Hammed Oyedele

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

Thread Thread
dhintz89 profile image
Daniel Hintz Author

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!

Collapse
vbjelak profile image
Vladi Beeblebrox

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

Collapse
l3lackheart profile image
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 😁😁

Collapse
dabjazz profile image
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.

Collapse
dhintz89 profile image
Daniel Hintz Author

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

Collapse
kmumahesh profile image
kmumahesh

May I know where you attended the backend challenge?

Thread Thread
dhintz89 profile image
Daniel Hintz Author

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.

Collapse
dabjazz profile image
Yash_Jaiswal

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

Thread Thread
dhintz89 profile image
Daniel Hintz Author

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?