Gestionar la interactividad

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Configurar la aplicación para manejar la interactividad.
Manejar cargas de mensajes enviados desde mensajes de Block Kit y responder a ellas.

Crear una experiencia de usuario sin problemas

De momento, aprendió qué es Block Kit, cómo crear varios tipos de mensajes y dónde pueden residir esos mensajes dentro de Slack. Hagamos una revisión de cómo hacer realidad los mensajes de Block Kit y manejar la interacción del usuario. La interacción del usuario puede ser pulsar un botón, seleccionar una opción desplegable o enviar un modal. Es necesario que la aplicación maneje todas estas acciones para brindar una experiencia de usuario sin problemas.

Ciclo de vida de la interactividad

Con los botones, los menús desplegables, los modales y más, puede configurar diversos puntos de entrada de interacción para que los usuarios invoquen una respuesta desde la aplicación. Desencadenar uno de esos puntos de entrada crea una carga de interacciones. Esta carga es un paquete de información que explica el contexto de la acción del usuario, lo cual brinda información suficiente para que la aplicación cree una respuesta coherente.

Usted termina con un flujo de interacciones que tiene el siguiente aspecto.

Un usuario desencadena una interacción mediante el uso de uno de los puntos de entrada de la aplicación.
La aplicación recibe y procesa la carga de interacciones.
Mediante este contexto, la aplicación genera una respuesta para la interacción.

La aplicación debe estar preparada para estos dos últimos pasos.

Configurar la interactividad

Para que la aplicación reciba cargas de interacciones, Slack debe saber adónde enviarlas. Se puede configurar cada aplicación con las URL de solicitud que indican un extremo web que pertenece a la aplicación hospedada.

Para configurar una URL de solicitud para la aplicación:

Abra el tablero de gestión de la aplicación en el sitio de la API de Slack.
En la barra lateral, haga clic en Interactivity & Shortcuts (Interactividad y accesos directos).
Active la opción Interactivity (Interactividad).

Verá que aparecerán algunas opciones nuevas. Las opciones que son relevantes para el mensaje interactivo de Block Kit son:

URL de solicitud: La URL a la que envía la carga de solicitudes cuando se utilizan componentes interactivos o accesos directos (1). Necesita agregar la URL de la aplicación hospedada para manejar estas cargas.

URL de carga de opciones: Esta es una configuración que utilizan los componentes de Block Kit: menús de selección y menús de multiselección (2). Estos componentes pueden cargar opciones de menú desde una fuente externa y la URL de carga de opciones determina qué URL se consultó para devolver esas opciones de menú.

Sección Interactividad y accesos directos para la aplicación de muestra, con la URL de solicitud y URL de carga de opciones destacadas con números según se mencionó anteriormente

El cuerpo de la carga que la aplicación recibe tendrá un campo de tipo que indica la fuente de la interacción. Las interacciones del usuario vienen bajo la carga block_actions. La carga proporciona un contexto completo de la interacción que ocurrió en el mensaje de Block Kit. Incluye el usuario que interactuó, los campos de estado predefinidos de cualquier componente interactivo que se utilizó, dónde ocurre la interacción y mucho más.

Manejar las cargas

Una vez que se recibió la carga, la aplicación debe responder al usuario. Si bien existen muchas respuestas, centrémonos en la respuesta de confirmación y la respuesta de mensaje.

La respuesta de confirmación es obligatoria para todas las aplicaciones y confirma la recepción de una carga de interacciones válida. Y la respuesta de mensaje abre una infinidad de posibilidades para la respuesta de la aplicación. Puede responder con un mensaje “Gracias” estándar, publicar una respuesta efímera o incluso actualizar el mensaje de origen. Sea cual sea la ruta elegida, implicará utilizar response_url para devolver el siguiente paso en el mensaje interactivo de Block Kit. response_url es exclusivo de cada carga y se puede utilizar para publicar mensajes en el lugar donde ocurrió la interacción.

Echemos un vistazo detallado a la carga block_actions y algunos de los campos clave.

Veamos el siguiente ejemplo de una carga que se enviaría de vuelta después de que un usuario elija una opción en un menú de multiselección.

El usuario selecciona Save it (Guárdela) en el menú.

Catálogo de casos de uso devolvió resultados de búsqueda de una aplicación de Slack, con la opción Guárdela seleccionada por el usuario

La siguiente carga se envía de vuelta a la aplicación.

{
    "type": "block_actions",
    "user": {
        "id": "U018AF3MLPQ",
        "username": "hshavers",
        "name": "hshavers",
        "team_id": "TG4KUE8JV"
    },
    "api_app_id": "A02",
    "token": "Shh_its_a_seekrit",
    "container": {
        "type": "message",
        "text": "The contents of the original message where the action originated"
    },
    "trigger_id": "12466734323.1395872398",
    "team": {
        "id": "TG4KUE8JV",
        "domain": "community"
    },
    "enterprise": null,
    "is_enterprise_install": false,
    "state": {
        "values": {
            "enhWA": {
                "NfSha": {
                    "type": "static_select",
                    "selected_option": {
                        "text": {
                            "type": "plain_text",
                            "text": "Save it",
                            "emoji": true
                        },
                        "value": "value-2"
                    }
                }
            }
        }
    },
    "response_url": "https://www.postresponsestome.com/T123567/1509734234",
    "actions": [
        {
            "type": "static_select",
            "block_id": "enhWA",
            "action_id": "NfSha",
            "selected_option": {
                "text": {
                    "type": "plain_text",
                    "text": "Save it",
                    "emoji": true
                },
                "value": "value-2"
            },
            "placeholder": {
                "type": "plain_text",
                "text": "Manage",
                "emoji": true
            },
            "action_ts": "1623954664.372376"
        }
    ]
}

Esta carga almacena el valor guardado del menú de multiselección, el usuario responsable de la selección (en usuario), junto con el block_id vinculado a ese menú de multiselección y botón.

Desde aquí puede pasar estos valores para enviar una confirmación de vuelta al usuario, con la información en usuario para iniciar un mensaje directo, así como la información en block_id para confirmar su selección. La aplicación puede utilizar otra información de la carga para continuar con los flujos de trabajo importantes y la automatización; el único límite es su imaginación (y las API de Slack).

Resumen

En este módulo, aprendió sobre Block Kit, cómo utilizarlo para crear mensajes visualmente atractivos en la aplicación de Slack y cómo llevar la aplicación al siguiente nivel. Aprendió sobre los diferentes tipos de bloques de diseño disponibles, dónde pueden residir estos mensajes sólidos en Slack y cómo empaquetar los mensajes y las acciones interactivas. Desde aquí, Block Kit le permite encontrar muchas más formas creativas de hacer que la vida laboral sea más agradable, sencilla y productiva.

¿Cuál es el siguiente paso?

Con los aspectos básicos, puede empezar a explorar más funciones de la plataforma y de Block Kit. A continuación, le mostraremos algunos caminos que podría seguir.

Lea la documentación de Block Kit para obtener información más detallada sobre los componentes de Block Kit.
Pruebe Block Kit Builder y consulte las plantillas que debe utilizar para su aplicación.