Postman Tutorial for a Front-end developer!

To get started with this Postman tutorial, you are expected to have a basic understanding of JSON.

Introduction

So you’ve been tasked with creating an app that makes use of RestAPI’s. The only problem is; you don’t know what URLs to call, what properties you need to send and what properties you expect to return.

You could pester your backend developer for the above information. If it’s not working pester them again and again and again until you’ve got it working! Yipee job is done! Well not quite. The front and backend devs will soon lose patience and frictions will arise.

Ok, get the backend developer to write all the endpoints down. This will work. You have a point of reference and you can pretty much get on with the task. But then you find the endpoint (URL) is not working. What are you doing wrong? You’ve sent the right parameters, the URL is exactly as documented. Let’s pester the backend developer! Again not an ideal situation to get yourself in.

 

 

So you need a solution that documents and tests the endpoints. This is the very essence of Postman (although it can do much more).

In this tutorial, I’m going to cover how to setup Postman to speed up your productivity and keep your relationship with the backend devs in good form 😀 (You can thank me later)

Install Postman

The first thing we need to do is install Postman.

https://www.getpostman.com/apps

Once complete and you’ve launched the app you’ll be presented with the below image. Thus go Sign up, its free!

Once signed in you should see this screen. Just Dismiss it for now. I’ll show you how to create requests in another tutorial.

Presented before you is the Postman dashboard.

Click on the import button located at the top left of the postman dashboard.

 

Next click “Import From Link” then paste the following URL in the text field

https://www.getpostman.com/collections/19a43cbcad39b4a13750

Then click on import.

If you have successfully imported then you should see what the backend developers have documented and you can now test and play with the endpoints prior to development.

We will cover a couple of endpoints in this tutorial, afterward feel free to change and play with this collection.

(If you’ve changed some of the properties and don’t know how to fix it then simply import the URL again and overwrite the collection.)

Let get all articles!

1. On the left-hand side under the “Collections” tab, expand the “Postman tutorial” collection.

2. Then expand the “Posts” folder

3. You should see three endpoint methods.
The method type is highlighted in a traffic light color system:-
Get (Green)
Put(Amber)
Delete(Red)
The name of the endpoint follows the method type:-
“Get all articles”
“Post an article”
“Delete an article”

GET
Let’s explore get all article. click on the first endpoint “Get all articles”.
Ill quickly explain the key sections of this screen.

1. The URL address for which the endpoint sends to

2. “Headers” do get yourself familiar with this tab. It will detail important headers such as response type, authorization keys, and custom backend objects.

3. “Response” placeholder. As the name suggests this will detail the response from the server.

Ok now you have the key sections lets try out our first request. Click “Send”

 

The response should now show where previously the “Response” placeholder was.

4. The format in which the response is displayed.

5. The response type.

Ensure that the format is “Pretty” (4) and the type “JSON” (5)

Congratulations you’ve just completed your first GET and you have all the knowledge to go and create your models and web calls within your development environment.

POST

So this will be slightly different to the GET command. Previously we didn’t need to send parameters so there’s a slightly different path to take.

Firstly tap on the POST “Post an article” endpoint in the Collections tab.  Then tap on the “Body” tab.

You will now see what parameters this particular endpoint requires and have a rough idea what variable types these parameters are.

“userId” = Int
“title” = String

Do bear in mind that if a number is visible it could be of type Int, Float, Double or Bool.

Tap send to ensure it works as expect and if the response replicates the body or a custom response message is shown, then you have just sent your first POST request.

You have all you need to go and create the web call in your chosen development environment.

DELETE

This is as easy as the GET method. Thus is will be a pretty short step. Check the URL. You can replace {{postID}} with a “postID” found in the “Get all articles endpoint”.

Tap send and voila. The post has been deleted. MAGIC

In the next tutorial ill explain what RAML is, how it makes the frontend/backend life easier and finish off the tutorial by showing you how to create requests in Postman!

 

Thanks for reading and your comments are welcome!