🟪Webservices

The JSONPlaceholder API is a simple & free API for testing & prototyping. In this section, we are going to connect to the API from inside the Dittofi Design Studio.

In this tutorial we will cover:

1. Understanding JSONPlaceholder API

2. Dittofi Webservices

Understanding JSONPlaceholder API

You can read about the JSONPlacerholder API @ https://jsonplaceholder.typicode.com/. The information provided tells us that API is filled with fake data that we can use for testing.

The API comes with eight API endpoints which it calls "Routes". These are shown below.

Users can click on each of the options to see examples of the data that lives at the end of each of the GET endpoints. For example, clicking on GET /posts returns.

This should look familiar to the JSON data that we saw in Intro to APIs.

In order to get this data, we had to go to the URL https://jsonplaceholder.typicode.com/posts. Notice that this URL breaks down into two parts.

The Host will always remain the same. This is the address where the system we are connecting to is being hosted. But the Path will change, depending on which part of the system we are looking to access via the API Endpoints. For example, if we want to get the comments, we need to use the endpoint "GET /posts/1/comments".

Breaking down the URL here, we see again that we have:

Dittofi Webservices

Dittofi gives you the tools to connect to a third party API. To access these tools, go to the Web Services tab, under the tools icon.

Clicking on Web Services will bring up the following page.

To create a new web service (A) click "+ New Webservice" & (B) click "New Webservice".

This brings up a screen where you can configure your new webservice.

The screen is split into two parts. On the left hand side, you can specify the protocol that you will use to connect to the third party API. The options are HTTP & HTTPS. You can also enter the Host part of the URL that you're interested to connect to.

In our case we want to connect to the JSONPlaceholder API. Reading their website, we can see that their API supports either HTTP or HTTPS & we already know that the Host is jsonplaceholder.typicode.com. So we configure our webservice in the following way & press save.

Next, we can turn our attention to the right hand side of the screen.

This is where we are going to add the different API endpoints that we are going to connect to. For example "GET /posts", "GET /posts/1/comments", "GET /comments?postsid=1" etc.

To begin with, let's add the "GET /posts" endpoint. To do this, we must begin by configuring the "Basic" settings of our webservice as below.

The grid below explains what each of the options are.

Option	Description	Example
Name	The name that we give to this endpoint. It doesn't matter what name you set, but it should be something meaningful.	Get JSONPlacholder API Posts
HTTP Method	This is the method that is set on the API Endpoint. You can read this in the API documentation.	Get
Path	The path of your URL.	/posts
Resp. Variable	The data that is returned from the Get request must be inserted into a variable that conforms to the shape of the data in the API.	Collection (custom model)

In the example above, we have not yet created a our Resp. Variable (response variable). To do this, head on over to the Custom Models tab. This can be found below the tools icon in the toolbar.

Clicking on Custom Models brings us to the Custom Models tab, as below.

Inside the Custom Models tab, you're able to build or generate custom data structures that can be used to store data temporarily. In our case we want to take the data that will be returned from the JSONPlaceholder API & stick it into a variable.

To generate a custom model to map your data into, you can use the following 5 steps, starting from Generating the model through to inspecting the new Custom Model.

Next, we step back to the Webservice tab & set the response variable for our API Endpoint to equal our new custom model.

Ditto Tip: Notice, we set the Kind to Collection (custom model). This is because we are expecting a list of JSON objects back from the API when we request the data. Collections inside Dittofi are like lists.

Press save & the API Endpoint has been setup.

Testing the API Endpoint

To test the API Endpoint, we can create our own endpoint, action & event to run an HTTP request. The video below shows this happening.

Notice, that the response in our endpoint is equal to the data at the JSONPlaceholder API Endpoint GET /v1/posts.