Setting Up Postman with the API Server | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)

Setting Up Postman with the API Server | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)

In this lesson, we will setup Postman and integrate it with our API server. We will ping the / and /health routes with Postman and learn a little about how to work Postman. As we advance in this tutorial, you will learn more about Postman practically. If you have not installed Postman yet, download it from their website and install.

Why Postman? Postman is an API platform used for testing, documenting, and mocking API requests. If you are building a backend for an application, you do not need to use the frontend (or wait for the frontend to be ready) to test your endpoints. Postman provides all the tools needed to test and mock your API endpoints (routes) and create detailed documentations (including examples) for each endpoint. This allows you to create the API endpoints of your application independent of the development process of the frontend.

Now, let's setup Postman. Launch Postman. If you are asked to create an account, follow through and have your account ready.

Create a new Workspace

  1. On the top menu, click Workspaces > New Workspace.
  2. In the Create New Workspace form:
    1. For Name field, enter: Google Contacts Clone.
    2. For Visibility, select Personal
  3. Click Create Workspace at the bottom
  4. The new workspace will be created and opened.

Create a Collection

A collection is used to group related API endpoints. We need one to hold our two routes: / and /health. We will call it API Entry collection.

Creating a Postman Collection

  1. On the left side of the window, click Create Collection.
  2. Enter the name: API Entry. This creates the API Entry collection. You can see it now on the left side within the Collections tab.

API Entry Collection Created

Create a New Environment

Before we continue any further, we need to create an environment which will hold important variables for our workspace. Variables are used to hold values which will be reused throughout our workspace.

  1. On the left hand side of the Google Contacts Clone overview window, click Create an environment.

    image.png

  2. Enter Default in the Environment name field.

  3. Within the environment table,
    1. Enter baseURL under VARIABLE column,
    2. Enter http://127.0.0.1:3333 under INITIAL VALUE column. No need to fill the CURRENT VALUE column. It will be populated with the initial value, if not set.
  4. Click the more (...) button at the top right of the environment table (see image below). Then click Set an active environment.

    image.png

Create a New Request for the / endpoint

Make sure that your API server is running.

# In the route of your project
cd api
yarn serve # <-- Run the server
  1. Within the Collections tab, under API Entry collection, click Add a request to create a new request.

    image.png

  2. In the Request name field, enter: Home

  3. We will use the GET method.
  4. In the request URL field, enter: {{baseURL}}/. Here we are interpolating (inserting/consuming) the baseURL variable we created in our Default environment.
  5. Click the Save button at the top right.
  6. Click the Send button to send the API request.
  7. You should get a response at the bottom of the bottom. As shown below:

image.png

If everything went well, congratulations. You've made your first API request with Postman.

Creating a New Request for the /health endpoint

  1. Within the Collections tab, right click the API Entry collection name, click Add Request to create a new request.
  2. In the Request name enter: Health Check
  3. We will use the GET method.
  4. In the request URL field, enter: {{baseURL}}/health.
  5. Click the Save button at the top right.
  6. Click the Send button to send the API request.
  7. You should get a response at the bottom of the bottom. As shown below:

image.png

If everything went well, congratulations!!! You are on your way to being an awesome backend developer.

In the next lesson, we will look at start creating the models and controllers for our contacts.