Templates/Meus Templates/Apps/Meus NicoApps (Mini-Apps)/Creando NicoApp (1.0)

Creando NicoApp (1.0)

Para crear una aplicación, sigue los pasos 1 a 6 en la imagen de arriba.

2026-08-12
Nota
Ejemplo - Usaremos una API de verificación de correo electrónico, TheChecker (abre una nueva ventana), como ejemplo de cómo crear y editar un NicoApp.

Para crear una aplicación, sigue los pasos 1 a 6 en la imagen de arriba.

En la página de edición (izquierda), indica el título, la descripción, el logo, la portada y el Id de Video de YouTube; aparecerá así en la Tienda de NicoApps (derecha):

En el lado derecho de la página de edición:

Siempre puedes consultar los Datos de Ejemplo en la parte inferior para orientarte. Y los Campos del sistema son los que puedes usar en tu código JSON, si es necesario.

Autenticación

Este bloque sirve para configurar las autenticaciones de tu NicoApp.

Parámetros

Nombre
Tipo de dato
Descripción
type
enum
Valor admitido: APIKEY
params
array
Valores solicitados a los usuarios en la instalación, por ejemplo, la Clave API
request
objeto
Envía solicitudes con parámetros (por ejemplo, email, api_key) y mapea la respuesta a los params (por ejemplo, token)
connection
objeto
Lista de encabezados o parámetros de la solicitud

Ejemplo de verificación de correo electrónico

Este es un ejemplo de autenticación con una Clave API en la consulta. A continuación, cómo queda después de que los usuarios instalan la aplicación:

La "Clave API" definida por los usuarios se almacena en la variable "token".

Ejemplo de autenticación básica

Nota
CONSEJO - La autenticación de acceso básica exige que el nombre de usuario y la contraseña, unidos por dos puntos, formen una credencial, y que esa credencial esté codificada en Base64. Como el código JSON no admite funciones, el sistema hace la codificación por ti. Así, basta con poner "Basic [[sid]]:[[token]]" como valor de autorización.
texto
{
    "type": "APIKEY",
    "params": [
        {
            "name": "sid",
            "title": "Twilio Account SID:"
        }，
        {
            "name": "token",
            "title": "Twilio Auth Token:"
        }
    ],
    "connection": {
        "headers": {
            "Authorization": "Basic [[sid]]:[[token]]"
        }
    }
}

Otros ejemplos

Ejemplo 1: autenticación APIKEY, headers

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

Los "headers" de la "connection" se agregan a cada solicitud, de modo que no necesitas repetirlos en todos lados después.

Ejemplo 2: autenticación APIKEY, parámetros de consulta

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

Como en el ejemplo anterior, la cadena de consulta se agrega a cada solicitud.

Ejemplo 3: autenticación APIKEY, token JWT

texto
{
    "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]]"
        }
    }
}

El email y la api_key proporcionados por los usuarios se envían en una solicitud. Las respuestas se mapean entonces a la variable token por la ruta JSON $.data.token. Después de eso, se usa como variable [[token]] en un encabezado de autorización. Nuevamente, el encabezado se agrega a cada solicitud posterior.

Acciones

Las acciones son las funciones/recursos que los usuarios pueden ejecutar con tu aplicación. Por ejemplo, esta aplicación "Google Translate" tiene 2 acciones: "Detectar idioma" y "Traducir texto":

En el área de código, tienes que definir la información predeterminada de la acción, incluyendo name, title, description, forms y requests, para que la acción funcione en el flujo con configuración.

En la parte inferior, haz clic en “Obtener Producto” para ver un ejemplo de solicitud GET y en “Actualizar Producto” para un ejemplo de solicitud POST. Los campos forms y requests son de tipo objeto, por lo que hay que definir varios atributos.

Parámetros

Nombre
Tipo de dato
Descripción
name
string
Identifica la acción; debe ser único
title
string
Título de la acción mostrado al usar la aplicación
description
string
Descripción de la acción mostrada al usar la aplicación
forms
array
Lista de objetos de formulario para la configuración de la acción
requests
array
Lista de objetos de solicitud que se ejecutarán en secuencia

Objeto de formulario

Nombre
Tipo de dato
Descripción
name
string
Nombre del campo, usado como identificador y variable dentro de la solicitud
type
enum
Tipo de valor, usado para validación; valores admitidos: string, text, number y select
title
string
Título del campo, mostrado en la interfaz
default
string
Valor predeterminado para este campo. Si se especifica, el campo pasa a ser opcional
source
string
Nombre de la fuente en el bloque Sources, solo para type=select
placeholder
string
Texto gris de orientación mostrado dentro del campo
description
string
Texto de orientación mostrado debajo del campo

Líneas en la variable de texto

Nota
CONSEJO - La diferencia entre los tipos de formulario string y text es que string elimina los saltos de línea de la variable, mientras que text los mantiene.

Objeto de solicitud

Nombre
Tipo de dato
Descripción
url
string
URL de la solicitud
method
enum
Método de solicitud HTTP, valores admitidos: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
headers
array
Lista de encabezados de la solicitud en pares clave-valor, por ejemplo: {"Content-Type": "application/json"}
payload
JSON
Cuerpo de la solicitud
body_format
enum
Formato del cuerpo de la solicitud, valores admitidos: json, query, form, multipart, raw
mapping
array
Conjunto de campos para mapear los resultados de la solicitud en campos personalizados

Objeto de mapeo

Nombre
Tipo de dato
Descripción
name
string
Nombre del campo, usado como identificador
type
enum
Tipo de campo, valores admitidos: text, number, boolean, date, datetime, array
title
array
Nombre del campo, mostrado en la interfaz
path
string
Cadena en formato de ruta JSON

Ejemplo de verificación de correo electrónico

A continuación, el código del ejemplo de verificación de correo electrónico y los pasos de la interfaz en acción.

Código:

Nota
CONSEJO - Puedes quitar la "api_key" de la URL porque ya la agregamos en el bloque Auth.

Interfaz de la aplicación:

Otros ejemplos

Ejemplo 1:

texto
{
    "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"
        }
    ]
}

Ejemplo 2:

texto
{
    "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"
        }
    ]
}

Fuentes

El bloque Sources se usa para ofrecer a los usuarios una lista de opciones para el valor del formulario. Usa el nombre de la fuente en el parámetro form del bloque Actions para crear la conexión.

Existen 2 formatos de fuentes, static y dynamic. Las opciones de una fuente estática son fijas, mientras que una fuente dinámica trae opciones que varían según las entradas.

Atención
Nota - el bloque Sources es opcional, dependiendo del tipo de los objetos form en el bloque Actions.

Parámetros

Nombre
Tipo de dato
Descripción
name
string
Identifica la fuente
type
enum
Tipo de fuente, valores admitidos: enum:rpc, enum:static
list
array
Lista de opciones fijas mostradas al usar la aplicación. Solo para type=enum:static
request
objeto
Objeto de solicitud cuando la fuente es dinámica. Solo para type=enum:rpc

Objeto de mapeo dentro del objeto de solicitud

Nombre
Tipo de dato
Descripción
type
enum
Tipo de campo, valor admitido: select
path
string
Cadena en formato de ruta JSON, para el array de datos de la respuesta
value
string
Cadena en formato de ruta JSON, con base en los resultados de path. Es el valor real devuelto cuando se selecciona una etiqueta
label
string
Cadena en formato de ruta JSON, con base en los resultados de path. Se muestra en la lista desplegable como etiqueta

Ejemplos

Forms en el bloque Actions:

texto
"forms": [
            {
                "name": "static_options",
                "type": "select",
                "title": "Static Options",
                "source": "product_type_list"
            },
            {
                "name": "dynamic_options",
                "type": "select",
                "title": "Dynamic Options",
                "source": "users_list"
            }
        ]

Bloque Sources:

texto
[
    {
        "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"
                }
            ]
        }
    }
]
Nota
CONSEJO - el objeto request de las fuentes dinámicas se explicó en el bloque Action; consulta allí los detalles de los parámetros de ese objeto.

Interfaz de la aplicación:

Disparadores

Al definir disparadores, los usuarios pueden usarlos en la sección de automatización como cualquier otro disparador nativo, según la captura de pantalla anterior.

Ten en cuenta que el nombre del disparador debe ser:

  • en minúsculas
  • único en la lista de disparadores
  • sin espacios; puedes separar las palabras con guiones bajos

Contexto es donde listas todas las variables predefinidas para cuando lleguen los datos.

Después de definir el disparador, tendrás que configurar las "Solicitudes de Token de API" y seleccionar la API en "Ámbitos de la API"; consulta la orientación a continuación.

Para llamar a ese disparador, consulta la API para disparador de NicoApp.

Ámbitos de la API

En "Ámbitos de la API", selecciona todas las APIs a las que tu NicoApp necesita acceder. Consulta la "Documentación de API" mediante el enlace en la parte superior.

Por ejemplo, si tu aplicación necesita ver la lista de tags de los usuarios en el flujo, selecciona "Visualizar tags de fluxo". Y, si necesitas usar disparadores en la aplicación, selecciona “App Trigger”, como en la imagen de arriba.

Solicitudes de Token de API

En "Solicitudes de Token de API", haz clic en los datos de ejemplo "Solicitudes" en la parte inferior y edita la URL de tu punto final de suscripción y de cancelación de suscripción. Consulta también, en la parte inferior, los Campos del sistema disponibles y coloca en el payload la información que necesitas. Por ejemplo, incluye "app_token" en el payload si necesitas acceder al flujo de los usuarios vía API (si seleccionas alguna API en el bloque Ámbitos de la API).

Guardar y probar

Por último, haz clic en “Guardar” para finalizar la creación. ¡Felicidades!! Acabas de crear un NicoApp con éxito.💯💯

Si vas a usar la aplicación solo en tu propio workspace, no necesitas publicarla. Puedes probarla y usarla en cualquier bot de cualquier canal de tu workspace.

Para compartir la aplicación con otros espacios de trabajo, tendrás que publicarla en la Tienda de NicoApps de NicoChat.