Crear Mini-Apps (1.0)
Para crear una app, sigue los pasos 1 al 6 en la captura de pantalla anterior.
En la página de edición (izquierda), agrega un título, descripción, logo, portada e id de video de YouTube, y se mostrará así en la tienda de mini-apps (derecha):
En el lado derecho de la página de edición:
Siempre puedes usar los datos de ejemplo en la parte inferior como guía. Y los campos del sistema son los que puedes usar en tu código JSON si es necesario.
Auth
Este bloque sirve para configurar las autenticaciones de tu App.
Parámetros
| Nombre | Tipo de dato | Descripción |
| --- | --- | --- |
| type | enum | Valor admitido: APIKEY |
| params | array | Valores requeridos de los usuarios al instalar, por ejemplo API key |
| request | object | Envía solicitudes con parámetros (p. ej. email, api_key) y asigna la respuesta a params (p. ej. token) |
| connection | object | Lista de encabezados o parámetros de la solicitud |
Ejemplo de verificación de email
Este es un ejemplo de autenticación con una API key en la consulta. A continuación se muestra cómo se verá después de que los usuarios instalen la App:
La "api key" configurada por los usuarios se almacenará luego en la variable "token".
Ejemplo de Basic Auth
TIP - La autenticación de acceso básico requiere que el nombre de usuario y la contraseña se unan con un solo signo de dos puntos para formar una credencial, y que la credencial se codifique usando Base64. Dado que las funciones no son compatibles en el código JSON, el sistema te ayudará a hacer la codificación. Así que solo necesitas poner "Basic [[sid]]:[[token]]" como valor de autorización.
Otros ejemplos
Ejemplo 1: Auth APIKEY, headers
Los "headers" en "connection" se agregarán a cada solicitud, por lo que no necesitas repetirlos en todas partes más adelante.
Ejemplo 2: Auth APIKEY, parámetros de consulta
Igual que arriba, la cadena de consulta se agregará a cada solicitud.
Ejemplo 3: Auth APIKEY, token JWT
El email y api_key proporcionados por los usuarios se enviarán como una solicitud. Luego, las respuestas se asignarán a la variable token mediante la ruta JSON $.data.token. Después de eso, se usa como variable [[token]] en un encabezado de autorización. Nuevamente, el encabezado se agregará a cada solicitud más adelante.
Actions
Las Actions son las funciones/características que los usuarios pueden ejecutar con tu App. Por ejemplo, esta App "Google Translate" tiene 2 actions, "Detect Language" y "Translating text":
En el área de código, necesitas configurar la información predeterminada de la action, incluyendo name, title, description, forms y requests para que la action funcione en el flujo con configuración.
En la parte inferior, haz clic en "Get product" para un ejemplo de solicitud GET, y en "Update product" para un ejemplo de solicitud POST. El tipo de forms y requests es object, por lo tanto, es necesario configurar varios atributos.
Parámetros
| Nombre | Tipo de dato | Descripción |
| --- | --- | --- |
| name | string | Identifica la action, debe ser único |
| title | string | Título de la action que se muestra al usar la app |
| description | string | Descripción de la action que se muestra al usar la app |
| forms | array | Lista de objetos de formulario para la configuración de la action |
| requests | array | Lista de objetos de solicitud que se ejecutarán en sucesión |
Objeto Form
| 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 UI |
| default | string | Valor predeterminado para este campo. Si se especifica, el campo se vuelve opcional |
| source | string | Nombre de la fuente en el bloque Sources, solo para type=select |
| placeholder | string | Texto guía en gris que se muestra en el campo |
| description | string | Texto guía que aparece debajo del campo |
#### Líneas en variable Text
TIP - La diferencia entre el tipo de formulario string y text es que string eliminará los saltos de línea en la variable, mientras que text los conservará.
Objeto Request
| 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, p. ej. {"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 | Configura campos para asignar los resultados de la solicitud a campos personalizados |
Objeto Mapping
| 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 UI |
| path | string | Cadena en formato de ruta JSON |
Ejemplo de verificación de email
A continuación se muestra el código del ejemplo de verificación de email y la UI en los pasos de Action.
#### Código:
TIP - Puedes eliminar "api_key" de la URL porque ya la agregamos en el bloque Auth.
#### UI de la App:
Otros ejemplos
Ejemplo 1:
Ejemplo 2:
Sources
El bloque Sources se utiliza para proporcionar a los usuarios una lista de opciones para el valor del formulario. Usa el name de la fuente en el parámetro form del bloque Actions para construir la conexión.
Hay 2 formatos de sources: static y dynamic. Las opciones de una fuente static son fijas, mientras que una fuente dynamic ofrece opciones cambiantes según las entradas.
Nota - el bloque sources es opcional, según el tipo de 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 que se muestran al usar la App. Solo para type=enum:static |
| request | object | Objeto de solicitud cuando la fuente es dinámica. Solo para type=enum:rpc |
Objeto Mapping dentro del objeto Request
| Nombre | Tipo de dato | Descripción |
| --- | --- | --- |
| type | enum | Tipo de campo, valor admitido: select |
| path | string | Cadena en formato de ruta JSON, para el arreglo de datos de respuesta |
| value | string | Cadena en formato de ruta JSON basada en los resultados de path. Este es el valor real que se devuelve cuando se selecciona una etiqueta |
| label | string | Cadena en formato de ruta JSON basada en los resultados de path. Se muestra en la lista desplegable como etiqueta |
Ejemplos
#### Forms en el bloque Actions:
#### Bloque Sources:
TIP - El objeto request en sources dinámicas ya se explicó en el bloque Action; revisa los detalles de parámetros del objeto request.
#### UI de la App:
Triggers
Al configurar triggers, los usuarios pueden usar los triggers desde la sección de automatización como cualquier otro trigger integrado que se muestra en la captura de pantalla anterior.
Ten en cuenta que el nombre del trigger debe ser:
1. en minúsculas
2. único en la lista de triggers
3. sin espacios; puedes separar palabras con guiones bajos
Context es donde enumeras todas las variables preconfiguradas cuando llegan datos.
Después de configurar el trigger, necesitarás configurar "API Token Requests" y seleccionar la API en "API Scopes"; consulta la guía a continuación.
Para llamar a este trigger, consulta la API para trigger de mini-app.
Api Scopes
En "Api Scopes", selecciona todas las APIs a las que tu mini-app necesita acceder. Revisa "Api Documentation" mediante el enlace en la parte superior.
Por ejemplo, si tu app necesita ver la lista de etiquetas de los usuarios en su flujo, selecciona "View flow tags". Además, si necesitas usar triggers en tu app, asegúrate de seleccionar "App Trigger" en la captura de pantalla anterior.
Api Token Requests
En "Api Token Requests", haz clic en los datos de ejemplo de "Requests" en la parte inferior, y edita la dirección URL a tu endpoint para suscripción y cancelación de suscripción. También revisa en la parte inferior los campos del sistema disponibles y coloca en el payload la información que necesites. 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 Api Scopes).
Save & Test
Finalmente, haz clic en "Save" para terminar la creación. ¡Felicidades! Acabas de crear una Mini-App con éxito.💯💯
Si solo vas a usar la app en tu propio workspace, entonces no necesitas publicarla. Puedes probarla y usarla en cualquier bot de cualquier canal en tu workspace.
Para compartir la app con otros workspaces, necesitarás publicar tu app en la tienda de mini-apps de OneChat.