Creating a mock API

At times, you are assigned a task which requires API for your feature. So, frontend and backend people work together to make the feature live. But but but, before getting into the good part, let’s understand what is an API….

API is a software intermediary that allows two applications to talk to each other.

Confused?
Check out this article to understand basic concept of API.

What is an API?

Most common data format for API is JSON and XML
We’ll be talking about JSON data format in this article.

First let’s understand why we need to create a mock API?

The primary reason for this would be that the task assigned to you is of low priority or maybe some other reason, which is why backend hasn’t made the required API live. Let’s say you’ve done your part and the only thing you are stuck on is to integrate and test the API with your code. You can’t stop your work there…right?
Mocking an API comes to the rescue! :)

If you know the JSON Structure of the API, you can make one mock for that and integrate it with your code. Later, when backend is ready with the API…you just have to change the base url and endpoint of the API.

Another reason to create a mock would be to gain a better understanding of the structure of API or even for just practicing.
(Also, quick tip: you can work with public APIs…but that requires key
Let’s save it for another medium story)

Basic JSON structure

Before moving to creating a mock API, let’s understand what is JSON and more about it.

JSON stands for Java Script Object Notation and it is a text format for storing and transporting data.

Let’s start with an example:
{ “name”: “Honey”, “age”: 21, “school”: “SSDPS” }
Here’s the visual representation for this:

This is a JSON object with 3 properties : name, age and school.
The values for these properties are: Honey, 21 and SSDPS.
As you can see, the data inside is represented as key-value pair just like a hash map.
a. The curly braces “{}” contain the object.
b. The square brackets “[]” contain array.
c. Data is separated by comma “ , “.

Another example would be:
{“students”: [{ “name” : “Honey”, “age” : 21, “school”: “SSDPS” }, { “name” : “Tony”, “age” : 23, “school”: “SWG” }, { “name” : “Robin”, “age” : 22, “school”: “SSDPS” }]}

We have a JSON object that has an array inside which further contains three objects.
Here’s the visual representation for this:

“students” contain an array with three objects within it.

Now, we have a basic understanding of how a JSON structure looks like, let’s hop into the creation part.

Steps to create a mock API

I’ll be using mockable.io for this purpose.
Do it side by side for better understanding.
Click here.

Step 1: Open mockable.io

You’ll see this interface.
If you click on Try Now, a dummy account will be created or you can Login using a google account or any other social account.
You can figure out that part.

Step 2:

I’m assuming we are logged in now.

You’ll see a screen like this. At the leftmost position is the BASE_URL for the API. My profile says I have 2 mocks and 2 of the mock API are running.
The red circular region is where we want to get our hands dirty.

Click on the MANAGE button.

Step-3: Start with the process of creating an API

Click on the circular regions in the above figure and let’s get started with the process.

This will take us to the following scene:

The first part of Path is the base url(this will be used while creating a retrofit instance). In the second part of it, let’s add student-details.
Select the Verb according to your need…for more info about it have a look at the retrofit documentation.
We can also change the response status to 404 not found or any other too.
Let’s keep it 200-OK only.

Now, we need to add JSON object in the Response body: I’m adding the same that we used in our example earlier…

{
  "students": [
    {
      "name": "Honey",
      "age": 21,
      "school": "SSDPS"
    },
    {
      "name": "Tony",
      "age": 23,
      "school": "SWG"
    },
    {
      "name": "Robin",
      "age": 22,
      "school": "SSDPS"
    }
  ]
}

Scroll down to the bottom…
There’s a toggle switch Set response delay, you can turn it on and enter the time after which the response will be emitted.

This is how my it looks after I add the required info.
Do have a good look at Path that I set.

After this click on Save option. Scroll to the top, it says “The mock is stopped”.

To handle this, scroll to the bottom again and click on STOPPED button. The button turns to green color and it displays STARTED.

Now, scroll back to top.

Now, we have the URL. Click on the link and check if it’s working or not.
Here’s the result ->

Boom! Your Mock API is created and now you can integrate this mock with your code.

I hope you learnt how to create a mock API.
Stay tuned for more Medium Stories…
Until then, Happy Coding! :)