Before using APIs in any microapp in Studio, you need to first register the API in Studio. When you register you need to give some test data in order to successfully register the API. Once the API is registered, you can use the API in microapp.

To register an API in Studio, you need to follow the below mentioned steps. DronaHQ Studio supports REST API to be registered and used in any microapp. To better understand how to add and use an API, let's take an example of registering an API for Google Custom Search. The details of the API that needs to be registered in this example is shown below -
 

REST API Endpoint: https://www.googleapis.com/customsearch/v1?key=INSERT_YOUR_API_KEY&cx=YOUR_SEARCH_ENGINE_ID&q=YOUR_SEARCH_TEXT

where, key, cx & q are the query parameters accepting the following values:
INSERT_YOUR_API_KEY - is the API Key value to the key query parameter to identify your application,
YOUR_SEARCH_ENGINE_ID - your custom search engine id provided by Google to be assigned to cx,
YOUR_SEARCH_TEXT - your text to search for.

API Method: GET

To register the above mentioned API Endpoint, 

  • Go to Home screen of DronaHQ Studio and click on API tab
  • Click on Add Category, to add a Category Name, Category Description & Category Icon. These details will be used to select the desired API when adding them in microapp. Let's say, we create a category by name - "General"
  • The API tab will display the newly created category with options - OAuth Token & Add API. Click on Add API to add an API in DronaHQ Studio. When you click on Add API, an APIs wizard will open up as shown in the below image  - 
  • On this wizard, enter the details of the APIs in the following way - 
  1. Service Name: This will be used as Sub Category and will be display along with the Category when you add the API in a microapp. So for our Google Custom Search example, let us give Service Name as - "GCSE".
  2. Method: Provide appropriate HTTP Method name for the API being registered. Studio supports the following methods - GET, POST, PUT, HEAD, PATCH, DELETE. As mentioned in the above endpoint details, we will use the method - "GET" in our example.
  3. URL: This is the main component of the API. The url is the API endpoint and the API method depends on the API endpoint (i.e. the URL). Thus, for our example, the URL will be - "https://www.googleapis.com/customsearch/v1"
  4. REQUEST - Query String: This is the query string parameters that will be appended in the request url. This option is applicable for GET method. Click on Add More Key option to add details of the Key-Value parameters of the url query string. In our example, key, cx & q are the query parameters which will be sent in the url. Therefore, click on Add More Key option for the number of parameters to be passed in request url. 
  5. REQUEST - Query String - Key Name: Provide the corresponding key name of the query parameters. So, for our example, we will have 3 keys - key, cx & q.
  6. REQUEST - Query String - Type: This information is used to provide the type of data that will be passed to the key, i.e. whether it is text/string, number, decimal, boolean, date, etc. In our example, all the three parameters will pass String type data and hence select String in the Type dropdown.
  7. REQUEST - Query String - Test Value: This value is used as dummy value to send a test request to the API end point. Provide the values INSERT_YOUR_API_KEY, YOUR_SEARCH_ENGINE_ID, YOUR_SEARCH_TEXT in the field for individual key in our example.
  8. REQUEST - Query String - Default Value: This value will be passed by default if the Dynamic Property button is not enabled. In case the Dynamic Property is enabled this value will only be suggested to the user and the user will have an option to change/edit it.
  9. REQUEST - Query String - Mandatory: When mandatory flag is enabled, the corresponding key will become mandatory to be filled when adding/using the API in app
  10. REQUEST - Query String - Preselect Values: Enter values which will be presented as options during usage of this API. Please note, this is only a help and user will have an option of entering his own custom values. Use the following format: ["value 1","value 2","value n"]. Hence the configuration for our example adding Google Custom Search will look as shown in the below image -  

    11. REQUEST - Headers: This option is used to add Header properties to the request url. Headers are used to provide information to both the client and server. It can be used for many purposes, such as authentication and providing information about the body content. Headers are property-value pairs that are separated by a colon. For example, below shows a header that tells the server to expect JSON content.

"Content-Type":"application/json"

Below shows an example of "Basic" authentication scheme properties passed in headers

"Authorization":"Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=="

Then in both the cases, KEY NAME would be "Content-Type" & "Authorization" respectively, where as, "application/json" & "Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==" will be assigned as Test Values.

   12. REQUEST - BODY: The data (sometimes called “body” or “message”) contains information you want to be sent to the server. This option is only used with POST, PUT, PATCH or DELETE requests. You can send data via the API Endpoint in any one of the following ways - Regular form (i.e. using the Key-Value properties), JSON (i.e. sending data in a Json format), or Plain text form.

  13. REQUEST - Authentication: This is used to send authentication details via API endpoint. These authentication details are either send via HTTP Headers or via HTTP Body. Currently, Studio supports two forms of Authentications, viz., Basic Auth & OAuth 2.0.
 
  14. REQUEST - Path Params: A path param is used against certain entity of the URL that is required to change dynamically. A path param can be set by enclosing an entity in the URL in a curly bracket "{}". e.g. For URL "https://plugin.api.dronahq.com/user/{useremail}/?token=key", "useremail" is the path param.

  15. RESPONSE: Once all the API configurations are filled correctly, click on the TEST & SAVE button to validate the API and test the response of the API. If the request if successful, API will respond with Status Code = 200 Ok which will be displayed under the RESPONSE tab. Along with the status code, you will also find additional information stating Can Bind Response. A "YES" to this status indicates that the API response can be bind in the microapp. The response of the API for our example will look as shown in the image below - 

 

Did this answer your question?