Using Postman

Postman is an application that is used to test web applications by sending HTTP requests to web URLs and displaying the responses that are sent back from the web servers.  We’re going to use Postman to test our  API server before we build out the client side of the the app.

Install Postman

To begin, navigate to postman.com/downloads, download the appropriate app, and install it.  Once installed, start up Postman, create a free account, and sign in.

On the Home page, you should see Workspaces in the left-hand side pane. Click Workspaces and then choose My Workspace.

Set Up the Environments

As we are developing our API server we will be testing the endpoints on localhost, and once we’re confident that they are working properly we’ll deploy and test the server on Azure.  To avoid having to retype the URL for localhost and the URL for our Azure API server every time we create a test in Postman, we’ll create 2 Postman environments. Within each environment we can define a set of variables.  And so, in each environment we’ll define a url variable to hold the URL of the server we’re testing.

To create an environment in Postman, click the eye over document icon in the upper right hand corner (next to the box that reads No Environment) to open a modal box. In the Environment section, click add to create your first environment. Name the environment Localhost.  Now in the Variable column type url, and set the Initial value to 127.0.0.1:3000.  Then press Save.

Create a second environment named Azure and in it, create a variable named url, set its Initial value to your Azure API server’s URL, and press Save.  Be sure that the URL begins with https://.

Now whenever we are testing the API service on localhost we’ll choose the Localhost environment from the drop-down menu, and when we are testing our API server on Azure we’ll choose the Azure environment.

For the remainder of this lesson, be sure the Localhost environment is selected.

Organize Your Test Requests

Using Postman, we can fire off requests to our API server, or any web server for that matter.  Postman also allows us to save the configurations of our requests so that we can reuse them.

In the left pane, press + to create a collection.  Now, click on the ellipsis symbol (…) next to New Collection to view the drop down menu, and select Rename.  Enter Study Buddy as the name of your collection.

Next to your collection name, click on the ellipsis symbol (…) again and choose Add folder.  Then, click the ellipsis next to New Folder and rename it /user.

Ok – so far you should have a collection named Study Buddy and a folder named /user within the collection.

Create Your First Request

In the left pane, click on the ellipsis symbol next to your /users folder and choose Add request. Then, click the ellipsis next to New Request and rename it Create user.

Now let’s configure the request by editing the fields in the right pane of the Postman application.

Below the name of the request is a long gray box that hold a HTTP method drop down menu and a field for the request URL.  Change the HTTP method to POST and set the request URL to {{url}}/user.

The curly braces denotes an environment variable substitution.  The value of url will depending on which environment we are using.  If you hover your pointer over {{url}} in the request URL field you will see the current value of the variable.

Recall that in our API server specs, the POST /user endpoint requires in the body of the request an object containing user information.  Let’s configure the Postman request to send a JavaScript object in the body of the request.

Below the gray box is a horizontal menu that reads “Params  Auth  Headers …”   Click on the Body option.  Now in the area below, select the radio button labelled raw and select JSON in the drop down menu that appears.  In the Edit box below the raw and JSON drop downs, define a JSON object that contains an email, password, and name field like the one below.

Note that in a future tutorial our API server will automatically send a welcome email to new users’ email addresses.  To avoid creating spam to unsuspecting people, please only use email addresses that belong to you.

{
    "name": "Joe",
    "email": "joe@example.com",
    "password": "test1234"
}

Click Save to save the request configuration.

Test the Request on Localhost

If your API server is not running on localhost, start it up now.

Now, press the Send button on the configuration screen for the POST /users request to send the HTTP request to your web app.

In the Response pane, below the request configuration, you should see the status of the response is 201 Created and you should see the object that was returned in the body of the response.

If the response status is not 201, it’s time to debug.  Double check the Postman configuration and if satisfied with the configuration, use console.log statements on the server to see what is being executed and what is not.

When you’re satisfied that your API server is working properly on localhost, commit all of your changes and push your changes to GitHub.

Test the Request on Azure

Testing your Azure API server is easy.  In Postman, select the Azure environment in the upper right corner of the application.

Now, press the Send button to send a request to Azure.

If successful, you should see status 201 in the response pane along with the object that returned in the response.  If you do not see a 201 status, you have a problem that is a bit harder to debug since we cannot use console.log on the Azure server.  Check the GitHub Action page to see if that gives you any hint of what went wrong.

© 2024, Eric McGregor. All rights reserved. Unauthorized use, distribution and/or duplication of this material without express and written permission from the author is strictly prohibited.