Creating a NicoApp (1.0)
To create an app, follow steps 1 to 6 in the screenshot above.
To create an app, follow steps 1 to 6 in the screenshot above.
On the editing page (left), enter the title, description, logo, cover and YouTube Video Id; it will appear like this in the NicoApps Store (right):
On the right side of the editing page:
You can always check the Sample Data at the bottom for guidance. And the System Fields are the ones you can use in your JSON code, if needed.
Authentication
This block is for setting up the authentications of your NicoApp.
Parameters
Email Verification Example
This is an authentication example with an Api Key in query. Here is how it looks after users install the app:
The "API Key" set by users is stored in the "token" variable.
Basic Auth Example
{
"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 authentication, headers
{
"type": "APIKEY",
"params": [
{
"name": "token",
"title": "Enter your api key:"
}
],
"connection": {
"headers": {
"Authorization": "Bearer [[token]]"
}
}
}
The "headers" of the "connection" are added to every request, so you do not need to repeat them everywhere later.
Example 2: APIKEY authentication, query parameters
{
"type": "APIKEY",
"params": [
{
"name": "api_key",
"title": "Enter your api key:"
}
],
"connection": {
"qs": {
"key": "[[api_key]]"
}
}
}
As in the example above, the query string is added to every request.
Example 3: APIKEY authentication, 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 are sent in a request. The responses are then mapped to the token variable by the JSON path $.data.token. After that, it is used as the [[token]] variable in an authorization header. Again, the header is added to every subsequent request.
Actions
Actions are the functions/features that users can perform with your app. For example, this "Google Translate" app has 2 actions: "Detect Language" and "Translate text":
In the coding area, you need to define the default information of the action, including name, title, description, forms and requests, so that the action works 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 forms and requests fields are of object type, so several attributes need to be defined.
Parameters
Form Object
Lines in the Text Variable
Request Object
{"Content-Type": "application/json"}Mapping Object
Email Verification Example
Below is the code for the email verification example and the interface steps in action.
Code:
App UI:
Other Examples
Example 1:
{
"url": "https://translation.googleapis.com/language/translate/v2/detect",
"method": "POST",
"headers": {
"Content-Type": "application/json"
},
"payload": {
"q": "[[q]]"
},
"mapping": [
{
"name": "language",
"type": "text",
"title": "Detected Language",
"path": "$.data.detections.0.0.language"
}
]
}
Example 2:
{
"url": "https://example/api/auth",
"method": "POST",
"body_format": "form",
"cache": 3600,
"payload": {
"email": "[[email]]",
"api_key": "[[api_key]]"
},
"mapping": [
{
"name": "token",
"type": "text",
"title": "Token",
"path": "$.data.token"
}
]
}
Sources
The Sources block is used to give users a list of options for the form value. Use the name of the source in the form parameter of the Actions block to build the connection.
There are 2 source formats, static and dynamic. The options of a static source are fixed, while a dynamic source brings options that vary according to the inputs.
Parameters
Mapping Object inside the Request Object
path. It is the real value returned when a label is selectedpath. Displayed in the dropdown as the labelExamples
Forms in the Actions block:
"forms": [
{
"name": "static_options",
"type": "select",
"title": "Static Options",
"source": "product_type_list"
},
{
"name": "dynamic_options",
"type": "select",
"title": "Dynamic Options",
"source": "users_list"
}
]
Sources block:
[
{
"name": "product_type_list",
"type": "enum:static",
"list": [
{
"value": "food",
"label": "Food & Drink"
},
{
"value": "toy",
"label": "Toys"
},
{
"value": "phone",
"label": "Mobile Phone"
}
]
},
{
"name": "users_list",
"type": "enum:rpc",
"request": {
"url": "https://jsonplaceholder.typicode.com/users",
"method": "GET",
"headers": {
"Content-Type": "application/json"
},
"mapping": [
{
"type": "select",
"path": "$",
"value": "$.id",
"label": "$.username"
}
]
}
}
]
App UI:
Triggers
By setting triggers, users can use them in the automation section like any other built-in trigger, as in the screenshot above.
Please note that the trigger name must be:
- in lower case
- unique in the trigger list
- without spaces; you can separate words with underscores
Context is where you list all the pre-set variables for when the data comes in.
After setting the trigger, you will need to configure the "Api Token Requests" and select the API in "Api Scopes"; see the guidance below.
To call this trigger, see the API for NicoApp trigger.
Api Scopes
In "Api Scopes", select all the APIs that your NicoApp needs to access. Check the "API Doc" via the link at the top.
For example, if your app needs to see the users’ tag list in their flow, select "View flow tags". And if you need to use triggers in the app, select “App Trigger”, as in the screenshot above.
Api Token Requests
In "Api Token Requests", click the "Requests" sample data at the bottom and edit the URL of your endpoint for subscription and unsubscription. Also check, at the bottom, the available System Fields and put in the payload the information you need. For example, include "app_token" in the payload if you need to access the users’ flow via API (if you select any API in the Api Scopes block).
Save & Test
Finally, click “Save” to finish the creation. Congratulations!! You have just successfully created a NicoApp.💯💯
If you are only going to use the app in your own workspace, you do not need to publish it. You can test it and use it in any bot of any channel in your workspace.
To share the app with other workspaces, you will need to publish it in NicoChat's NicoApps Store.