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.