API Builder Standalone: Extend Flow Editor with Template Plugin

0 Flares 0 Flares ×

A template engine enhances a developer’s ability to transform a given data into a different format with minimal coding. By default, the API Builder Flow Editor’s compose flow-node, which is generally used for data transformation, implements the dot.js template engine. Here’s the blog post that shows an example of how to use a compose flow-node to optimize a given payload by reducing the number of fields.

But what if you want to use a different template engine like Mustache?

This can easily be done by creating a Mustache plugin for API Builder’s Flow Editor using Axway’s Flow Node SDK. Since there’s already a Mustache flow-node plugin available in github, we can easily implement it in the API Builder Flow Editor.

In this blog post, we’ll breakdown the following:

  • Create an API to return formatted response based on the request query parameters
  • Use compose flow-node to transform the data
  • Replace the compose flow-node with mustache flow-node to transform the data
  • Run the API as a docker container

API Design

I’ve created an API called fullname that returns a formatted full name based on the request query parameters: fn, mn, and ln. The Swagger file that describes the API is shown below:

{
   "swagger" : "2.0",
   "info" : {
     "description" : "This is a simple api that that returns formatted full name from the request query parameters.",
     "version" : "1.0.0",
     "title" : "Full Name API",
     "contact" : {
       "email" : "jco@axway.com"
    zz},
    "license" : {
      "name" : "Apache 2.0",
      "url" : "http://www.apache.org/licenses/LICENSE-2.0.html"
    }
  },
  "host" : "virtserver.swaggerhub.com",
  "schemes" : [ "http" ],																							
  "paths" : {
    "/fullname" : {
      "get" : {
        "summary" : "Returns a formatted full name from the request query parameters.",
        "description" : "Simple GET REST API\n",
        "operationId" : "fullName",
        "produces" : [ "application/json" ],
        "parameters" : [
		{
          "description" : "First Name",
          "required" : true,
          "in" : "query",
          "name" : "fn",
          "type" : "string"
        },
		{
          "description" : "Middle Name",
          "required" : true,
          "in" : "query",
          "name" : "mn",
          "type" : "string"
        },
		{
          "description" : "Last Name",
          "required" : true,
          "in" : "query",
          "name" : "ln",
          "type" : "string"
        }

		],
        "responses" : {
          "200" : {
            "description" : "response",
            "schema" : {
              "$ref" : "#/definitions/response"
            }
          },
          "400" : {
            "description" : "bad input parameter"
          }
        }
      }
    }
  },
  "definitions" : {
    "response" : {
      "type" : "object",
      "required" : [ "message" ],
      "properties" : {
        "message" : {
          "type" : "string",
          "example" : "sample"
        }
      },
      "example" : {
        "message" : "sample"
      }
    }
  }
}

Copy and save the Swagger file which we’ll use later to create the API.

Install API Builder Standalone

npm install -g @axway/api-builder

Create a new app

api-builder init my project
cd my project
npm install --no-optional

Start API Builder

npm start

Open the Console

In your favorite browser, open http://localhost:8080/console


Import the API Definition

Navigate to the API Endpoints page: http://localhost:8080/console/project/apidocs


Click on the “+ API” button to add an API.


Select the swagger file that was saved earlier.


Note: There are two save options, the Save and mock will create a sample flow for the methods in the API. This may be useful when you need to have working APIs for testing but the logic is not important. In this case, we’ll just select Save as we’ll be creating our flow.

Implementing the API

Note that the initial state of the method is “disabled” until a flow is created.


To create the flow, click on the Create Flow link.


Drag the compose flow-node onto the canvas.

  • Rename the title to “Format string”
  • Set Method to “Format string”
  • In the Parameters tab, set data to $.params and
    set template to “{{=it.fn}} {{=it.mn}} {{=it.ln}}”

  • In the Outputs tab, use the default values: $.value and $.error

Add two HTTP flow-nodes to handle the success and fail path. Rename one with “Success” while “Fail” for the other.


In the Success node, set the status to “200” then set the body to “$.value” which holds the transformed data.


In the Fail node, set the status to “400”.


Click Apply, Proceed then Close.


Scroll down and test the API.

We have completed an API that formats a message using compose flow-node. Next is to implement the Mustache flow-node plugin.

Install the Mustache flow-node plugin

Stop the API Builder process in the command line. In the project directory, run this command:

npm install --save api-builder-plugin-gm-mustache

Sample output below:


Start API Builder

npm start

In your browser, open http://localhost:8080/console. Navigate to the fullname api’s flow editor.


Notice that the “Mustache” flow-node is now available in the tools panel. Replace the Compose flow-node with mustache flow-node. This can easily be done by deleting the Compose flow-node, drag and drop the Mustache flow-node then re-connect the rest of the flow-nodes.


Rename the Mustache node to “Format string”.
In the Parameters tab, set the template to “Full name using Mustache: {{fn}} {{mn}} {{ln}}”
Click Apply, Proceed then Close.

Scroll down and test the API.


We have completed an API that formats a message using mustache flow-node.

Deploying the API as Docker container

Now that we have successfully tested the API, we can now deploy and make it available for consumption (e.g. for Integration Testing). For this exercise, we’ll just deploy it on the same development environment.

Run the API as Docker container

First, stop the API Builder process in the command line. In the project directory, build the Docker image:

docker build -t my project

Run the container:

docker run -d --name mycontainer --network=host my project

Test the API

Get the API Key:

cat conf/default.js | grep apikey:

Result:

apikey: '8goF0F1wtUsEcSxfkGCn4rKS/00gHA3F',

Call the API:

curl -X GET -u "8goF0F1wtUsEcSxfkGCn4rKS/00gHA3F:"  "http://localhost:8080/api/fullname?ln=smith&fn=john&mn=roberts"

Result:

Full name using Mustache: john roberts smith

Also, check this blog post where it shows how to use API Builder Standalone to go from zero to a Dockerized service.

Summary

In this post, we saw how easy it is to extend the API Builder Flow Editor by installing the Mustache flow-node plugin. API developers have the option to use their favorite templates, can quickly test the API thru API Builder Console and deploy the API as a Docker container, to make it available for consumption by other applications.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up for our blog!

computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×