Create Mini-Apps (1.0)

6 min read

Example – An email verification API, TheChecker (opens new window)will be used as an example for how to create and edit a Mini-App.

To create an app, follow steps 1 to 6 in the above screenshot.

On the editing page (left), list a title, description, logo, cover page, YouTube video id and it will appear like this in the mini-app store (right):

On the right side of the editing page:

You can always use sample data at the bottom for guidance. And system fields are what you can use in your JSON code if needed.

Auth

This block is for setting authentications of your App.

Parameters

Name	Data Type	Description
type	enum	Supported value: APIKEY
params	array	Values required from users when installing e.g. API key
request	object	Send requests with parameters (e.g. email, api_key) and map the response to params (e.g. token)
connection	object	List of request headers or parameters

Email Verification Example

This is an authentication example with an API key in the query. As follow is how it will look like after users install the App:

The “api key” set by users will then be stored in the variable “token”.

Basic Auth Example

TIP – The basic access authentication requires the username and password joined by a single colon to be a credential and the credential encoded by using Base64. Given that the functions are not supported in the JSON code, the system will help you do the encoding. So you just need to put “Basic [[sid]]:[[token]]” as the authorization value.

{ "type": "APIKEY", "params": [ { "name": "sid", "title": "Twilio Account SID:" }， { "name": "token", "title": "Twilio Auth Token:" } ], "connection": { "headers": { "Authorization": "Basic [[sid]]:[[token]]" } } }

Other Examples

Example 1: APIKEY Auth, headers

{ "type": "APIKEY", "params": [ { "name": "token", "title": "Enter your api key:" } ], "connection": { "headers": { "Authorization": "Bearer [[token]]" } } }

The “headers” in the “connection” will be added to each request, so you don’t need to repeat it everywhere later.

Example 2: APIKEY Auth, query parameters

{ "type": "APIKEY", "params": [ { "name": "api_key", "title": "Enter your api key:" } ], "connection": { "qs": { "key": "[[api_key]]" } } }

Same as above, the query string will be added to each request.

Example 3: APIKEY Auth, JWT token

{ "type": "APIKEY", "params": [ { "name": "email", "title": "Enter your email:" }, { "name": "api_key", "title": "Enter your api key:" } ], "request": { "url": "https://example.com/get-token", "method": "POST", "body_format": "form", "cache": 3600, //cache this request for 3600 seconds "payload": { "email": "[[email]]", "api_key": "[[api_key]]" }, "mapping": [ { "name": "token", "path": "$.data.token" } ] }, "connection": { "headers": { "Authorization": "Bearer [[token]]" } } }

The email and api_key provided by users will be sent as a request. Then the responses will be mapped to variable token by JSON path $.data.token. After that, it’s used as a variable [[token]] in an authorization header. Again, the header will be added to each request later.

Actions

Actions are what functions/features users can do with your App. For example, this “Google Translate” App has 2 actions, “Detect Language” and “Translating text”:

In the coding area, you need to set the default information of the action, including name, title, description, forms and requests to make the action work in the flow with configuration.

At the bottom, click “Get product” for a GET request example, and “Update product” for a POST request example. The type of forms and requests are objects, therefore it needs to set several attributes.