Connecting SPA With the API Widget

Allow backend server tests API calls using the API widget.

We'll cover the following

Consider a scenario where a single-page application calls a web API. To build API on the platform, we use the curl command. Consider an example below.

Problem

We will start with creating a product by using the exposed API / on port 3000. We will create a POST request and pass the product model in a JSON object. Review the product object below.

{
    "name": "required",
    "description": "required",
    "price": "required",
    "sku": "required"
}

The following curl request can make the POST request:

curl -d '{"name": "agua", "descriptipn": "some random drink", "price": 122, "sku": "abc-efg-hij"}' -H 'Content-Type: application/json' -X POST localhost:3000/

It works fine in simple cases, but it is impossible to save these commands, and a minor typo can result in request failure. Another method is to test the APIs with Postman through the GUI App widget. But it can be challenging to communicate steps to the learner. The API widget is similar to Postman but is integrated into our platform. API widget and SPA widget together provide flexibility in this regard.

You need to have a docker setup related to your SPA application.

Connecting a SPA widget

Edit mode

You can link the SPA widget and the API widget together. To do that, add a new SPA widget and click the "Link API Widget" button, which automatically adds the API widget below.

Link SPA with API widget
Link SPA with API widget

Below is a simple web app in a SPA widget.

module github.com/Faizan-Zia/microservices

go 1.13

require (
	github.com/go-playground/validator/v10 v10.8.0
	github.com/gorilla/mux v1.8.0
)

Imagine testing API calls using the HTTP requests without any front end. Here, we can utilize the linked API widget, which was automatically added after the SPA widget.

Let's create two types of requests: GET and POST.

  • Add a GET request to the collection.

  • Add a POST request to the collection along with a parameter: id.

Notice that a URL is automatically generated for every request. You can not change it, as this ensures that the server from the SPA listens to the HTTP request(s) sent by the connected API widget.

Follow the illustration below for reference (if needed).

GET Request
GET Request
1 of 2

Published mode

Below is a running example of how to send different HTTP requests on the fly to a server listening in a SPA widget.

module github.com/Faizan-Zia/microservices

go 1.13

require (
	github.com/go-playground/validator/v10 v10.8.0
	github.com/gorilla/mux v1.8.0
)
Collection
GET Request
POST Request
KeyValueDescription
RESPONSE
Status: ---Size: ---Time: ---

Enter the URL and click Send to get a response

Run the code in SPA. Once the server starts listening, send all requests individually and notice the response in both the SPA and API widgets. For the POST request, pass the data in the following JSON format under the "Body" section, and then send the request.

{
    "name": "noodles",
    "description": "chowmein",
    "price": 1000,
    "sku": "abd-jki-bnm"
}