Module

Modules are the key component of your app. They are basically wrappers around specific app/service functionality, which is exposed via an API endpoint.

There are three basic types of modules: Action, Search, and Trigger (polling).

Use if the API endpoint returns a single response. Examples are Create a book, Delete a book or Get a Book.

Use if the API endpoint returns multiple items. An example is List Books that will find specific books according to search criteria.

Use if you wish to watch for any changes in your app/service. Examples are Watch a New Book, which will be triggered whenever a new book has been added to the library.

Make works with 6 types of modules, read more about them here.

Setting up a new module for our demo API

Creation of a new module

To create a new Module, click on the tab MODULES. The list of all modules your app consists of, will be shown (empty for now). Click the large button with the plus sign and choose Create a new Module.

A dialog will pop up, where you can name your module, choose its type, and provide some description. Fill the dialog as shown and click Save.

Make sure the tab Communication is active and replace the content of the text area with the following JSON and save the changes (Ctrl+S):

{
    "url": "/helloworld"
}

The url key specifies the API endpoint path. The URL will be joined with baseUrl specified earlier to produce the full URL of the API endpoint: http://demo-api.integrokit.com/api/v1/helloworld.

In order to use baseUrl specified in the base, the URL should start with /. If the URL doesn't start with /, the baseUrl doesn't come into use, and only the content of url is used instead.

Click the tab Mappable parameters. The JSON on this tab enables you to specify the parameters of your module that will appear in the module settings panel. Our module does not require any parameters, so erase the content between the square brackets, leaving just empty square brackets and save the changes (Ctrl+S):

[]

Congratulations! You have just created your first module.

Testing the new module

Now, we will test our new module. Open a new browser tab, login to Make, in the left main menu choose Scenarios and create a new scenario. Click the yet undefined “questionnaire” module to bring up a list of all the apps. Search for your new app by typing its name in the Search field: My App. Click your app and a list of all its modules will be shown, currently just the newly created Hello World module. Click the module to select it. An empty module settings panel will pop up saying “There are no configurable options for this module.”.

Close the panel and run the scenario. Click the bubbles above the module to pop up the panel with information about processed bundles. In case you have successfully followed this tutorial, you should see the following output of your new module.

Perfect! You just learned how to create a new module and make it work. But we can make it better! We can make it more user friendly. Continue reading below.

Setting up interface of the module

Since we now know the structure of the output, we can specify the Interface. So we can set up our scenario right away, with no need to first execute the module to learn the output's structure.

Below, you can see an example of a list of available parameters to map from Shopify > Watch Orders module. Notice that the Shopify module wasn't executed yet (the bubble is not displayed).

In the panel with the output, click on the button circled below and choose Download output bundles option.

Then, a new panel will appear, with the original response from the endpoint. Copy the text to your clipboard.

Go back to the tab with your app and make sure you are in the settings of the Hello World module. Select tab INTERFACE. You can see a JSON snippet:

[
    {
        "name": "id",
        "type": "uinteger",
        "label": "User ID"
    }
]

In the right upper corner, click on Options button and choose Generator.

A new panel will appear. There, paste the previously copied JSON from your clipboard and click Generate.

A new data structure will be generated. Copy it to your clipboard and close the panel.

In the INTERFACE, replace the JSON structure with the new structure.

[
    {
        "name": "id",
        "type": "uinteger",
        "label": "User ID"
    }
]

Whenever you change INTERFACE in a module, you need to refresh your scenario in order to see the changes.

Perfect! You just learned, how to work with interface and automatically prepare a list of expected parameters from the module's output. Now, let's make it harder!

Adding mappable parameters

In Make modules, you can define, what data should be passed to the API. So we can create a new record or define, what should be returned.

The Demo API endpoint /helloworld takes two parameters greeting and name. Click the following link to open the API response in your browser:

http://demo-api.integrokit.com/api/v1/helloworld?greeting=Hi&name=Johny

The API should return the following JSON response:

{"result":"Hi, Johny!"}

So let’s make our Hello World module configurable by adding the parameter greeting. Switch back to the Mappable parameters tab, replace the empty square brackets with the following JSON and save the changes(Ctrl+S):

[
    {
        "name": "greeting",
        "type": "text",
        "label": "Greeting"
    }
]

This JSON specifies that the module will have one parameter called Greeting of type text. More about parameters can be found in the Parameters documentation.

Switch to your scenario and refresh the browser window (F5). Click the Module to pop up its settings panel. The panel now contains one text field labeled Greeting. Fill Hi:

Whenever you change MAPPABLE PARAMETERS in a module, you need to refresh your scenario in order to see the changes.

Press OK and run the scenario. Though, if you click the bubbles above the module to pop up the panel with information about processed bundles, the module’s output will be identical as in the previous run.

You can also use Integromat DevTool to check the original REQUEST and RESPONSE, for further debugging. Learn more about debugging your app here.

This is how the log from the run looks like, focus on the Request Headers tab:

Notice, that there is no parameter called greetings sent.

It is because we need to specify the structure of the request in the module. Specifically, we have to pass the content of the greeting parameter to the API.

Switch back to the MAPPABLE PARAMETERS tab and click the COMMUNICATION tab. To pass the parameter greetings to the API, you have two options:

You can either add the parameter to the url key:

{
    "url": "/helloworld?greeting={{parameters.greeting}}"
}

Or you can add a new key qs (query string) and add the parameter there:

{
    "url": "/helloworld",
    "qs" : {
        "greeting": "{{parameters.greeting}}"
    }
}

Save the changes (Ctrl+S), switch to your scenario, and run the scenario. Click the bubbles above the module to pop up the panel with information about processed bundles, where you should see the modified module’s output:

Also, you can check how clear the run in DevTool looks. Finally, the parameter greeting is passed in QS (query string):

You can now practice your skills and try to add a parameter name to your Hello World module.

Congratulations! You have just learned how to pass data from a module to an API. Also, you have learned how you can debug possible issues using our Integromat DevTool. If you are ready to learn about setting up connection in your app, continue below.

Last updated