Postman In 3 Minutes
Tags: webdev, beginners, tooling
Published: 2020-11-14 00:03:07

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]("https://www.postman.com/downloads/") or [access via your web browser]("https://go.postman.co/build"). 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](https://dev-to-uploads.s3.amazonaws.com/i/j0ux3hf6h9uiwwenec09.png)

## 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>
```

![Get Animals Button](https://dev-to-uploads.s3.amazonaws.com/i/7ohu3k4t506rkmi8ivkq.png)

```
// 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:
![Get Response in Console](https://dev-to-uploads.s3.amazonaws.com/i/e3qnx2nm7eniyxe6kyni.png)

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

Body:
![Request Body](https://dev-to-uploads.s3.amazonaws.com/i/6w2ua9pag294g44uaacl.png)
Authorization:
![Request Auth Headers](https://dev-to-uploads.s3.amazonaws.com/i/ycy34euk2tohmi2zi20n.png)

Then click Send and view the Response at the bottom of the screen:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qj83gs6w7i34122qj0au.png)

## 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>
```

![New Animal Form](https://dev-to-uploads.s3.amazonaws.com/i/vp443h6i8vpi9frhdz7y.png)

```
// 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:
![Post Response in Console](https://dev-to-uploads.s3.amazonaws.com/i/5fto62m5mzjy4poxcw7w.png)

#### Postman
Configure Postman Body and add Authorization if applicable:

Body:
![Postman Post Body](https://dev-to-uploads.s3.amazonaws.com/i/xkxewn0thbrm6gozmuy2.png)
Authorization:
![Postman Post Auth](https://dev-to-uploads.s3.amazonaws.com/i/bcr8syniyho37cvrc7gk.png)

Then click Send and view the Response at the bottom:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xxzaiz2cexngnahmrzxh.png)

## 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.