Crear una aplicación de Bolt

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Activar la aplicación Bolt para acceder a Slack.
Explicar las funciones de escucha.
Agregar agentes de escucha de eventos a su aplicación.
Agregar interactividad a su aplicación.

Remezclar la plantilla de aplicación de Bolt para JavaScript en Glitch

Una vez que se configuró e instaló la aplicación, es momento de configurar una nueva aplicación de Bolt con las credenciales de su aplicación.

Para simplificar el desarrollo, este módulo utiliza Glitch, una herramienta que simplifica la creación y el hospedaje de aplicaciones. Si bien una cuenta de Glitch gratuita es excelente para el desarrollo, su servidor no permanecerá en ejecución mientras la aplicación esté inactiva. Esto significa que debe mantener Glitch abierto en el navegador mientras desarrolla y prueba la aplicación.

Cuando la aplicación esté lista para la producción, puede que desee hospedarla en otro sitio o actualizar su cuenta de Glitch. Hay una lista completa de proveedores de hospedaje recomendados en el sitio de la API.

Si prefiere ejecutar la aplicación de forma local, puede utilizar una herramienta como ngrok. Hay un ejemplo de cómo utilizar ngrok en la Guía de primeros pasos de la documentación.

Abra un entorno de Glitch.
Haga clic en este vínculo para remezclar (o duplicar) el proyecto básico de Bolt.
Una vez que se completa la remezcla, el proyecto aparece en la lista de proyectos. En el ejemplo, se denomina actually-triangular-pigeon.
Haga clic en el proyecto para cargarlo.
Luego, haga clic en app.js.

En el archivo app.js, puede ver el paquete @slack/bolt importado y con una instancia creada. Debajo, el servidor de la aplicación está configurado y se ejecuta para poder recibir eventos entrantes de Slack.

Agregará más posteriormente. Primero, agregue las credenciales de la configuración de la aplicación de Slack. Recuerde mantener Glitch abierto durante todo este proceso.

Vuelva a la página de la aplicación en el sitio de la API de Slack.

Agregar credenciales de aplicación

Recupere el token de acceso de OAuth del usuario de bot y el secreto de firma.

Vuelva a la página de configuración de la aplicación de Slack en el sitio de la API de Slack.
Haga clic en Basic Information (Información básica) en la barra lateral.
Desplácese hasta la sección Credenciales de la aplicación.
Copie el secreto de firma y guárdelo para el siguiente paso en el editor de texto.
Haga clic en OAuth & Permissions (OAuth y permisos) en la barra lateral.
Haga clic en Copy (Copiar) para copiar el token de acceso de OAuth del usuario de bot y guárdelo para el siguiente paso.

Una vez que haya guardado el secreto y el token, vuelva a Glitch.

En el proyecto de Glitch, vaya al archivo .env ubicado en la barra lateral izquierda.
Pegue el token de acceso de OAuth del usuario de bot en el campo Valor de variable directamente después de SLACK_BOT_TOKEN (1).
Pegue el secreto de firma en el campo Valor de variable directamente después de SLACK_SIGNING_SECRET (2). La aplicación utiliza el secreto de firma para verificar que las solicitudes entrantes provengan de Slack. Bolt se encarga de la verificación de forma automática cuando el secreto de firma se pasa al constructor de aplicaciones.

Al hacer clic en Logs (Registros) en la parte inferior del navegador de archivos de Glitch, verá la aplicación Bolt en ejecución.

Los registros se abren con el mensaje que dice que la aplicación Bolt está en ejecución

Conocer las funciones de escucha

Las aplicaciones de Slack, por lo general, reciben varias solicitudes de Slack y responden a ellas. Por cada tipo de solicitud entrante de Slack, existe una función de escucha correspondiente para manejar y responder.

A continuación, se proporciona un subconjunto de agentes de escucha a los que las aplicaciones de Bolt pueden pasar una función.

Agente de escucha	Descripción
`app.event(eventType, fn)`	Escucha eventos de la API de eventos. eventType es una cadena que se utiliza para identificar el evento específico.
`app.message([pattern ,], fn)`	Un agente de escucha conveniente para manejar eventos de mensaje de tipo. El patrón puede ser cualquier subcadena o expresión de RegExp.
`app.action(actionId, fn)`	Escucha eventos interactivos de un elemento de bloque, como la interacción de un usuario con un botón. El identificador actionId es una cadena que coincide con el action_id de un elemento de bloque.
`app.shortcut(callbackId, fn)`	Escucha invocaciones globales y de accesos directos de mensaje. callbackId es una cadena o un patrón de RegExp que coincide con un callback_id de acceso directo, que está especificado en la configuración de la aplicación.

La lista completa se encuentra en la documentación de referencia de Bolt. Llegó la hora de configurar la aplicación para escuchar y responder a eventos, interacciones e interactividades.

Para escuchar eventos de la API de eventos, es necesario activar las suscripciones a eventos en la aplicación.

Vaya a la página de la aplicación de Slack en el sitio de la API de Slack si aún no está allí.
Haga clic en Event Subscriptions (Suscripciones a eventos) en la barra lateral.
Las suscripciones a eventos deberían activarse de forma automática. También puede activarlas manualmente si es necesario.
Se muestra un cuadro de entrada para introducir una URL de solicitud. Una URL de solicitud es donde se envían las solicitudes HTTP para los eventos en los cuales se suscribió la aplicación. Si creó la aplicación desde la plantilla, la URL de solicitud en este momento es https://project-name.glitch.me/slack/events.
En vez de project-name, agregue su propio nombre de proyecto de Glitch.
1. Haga clic en Settings (Configuración) y, a continuación, en Ir a página del proyecto. La URL del sitio en vivo contiene el nombre del proyecto, todo después de https:// y antes de .glitch.me.
Vuelva a la página Suscripciones a eventos en el sitio de la API de Slack e introduzca la URL de solicitud. Debería tener un aspecto similar a este: https://actually-triangular-pigeon.glitch.me/slack/events
Bolt para JavaScript escucha todas las solicitudes entrantes en la ruta /slack/events de forma predeterminada, motivo por el cual está anexado a la URL de solicitud.
Haga clic en Save Changes (Guardar cambios) para guardar su trabajo.
Luego, haga clic en Subscribe to bot events (Suscribirse a eventos de bot) para abrir la sección. Aquí puede ver message.channels en Nombre del evento. Este evento escucha todos los mensajes publicados en los canales públicos en los que se encuentra la aplicación. Con la URL de solicitud activada, la aplicación debería empezar a recibir estos eventos.

Agregar un agente de escucha de eventos

Las suscripciones a eventos utilizan el agente de escucha event(), sobre el que puede encontrar ejemplos en la documentación de Bolt. Por el momento, utiliza el agente de escucha message() para escuchar y responder mensajes.

Vaya al proyecto de Glitch.
Agregue lo siguiente al archivo app.js debajo de // Space for your code (Espacio para el código).

app.message('hello', async ({ message, say }) => {
    await say(`Hey there <@${message.user}>`);
});

Glitch guarda el trabajo de forma automática.

Archivo app.js con el código ingresado debajo de // Espacio para el código, resaltado con un cuadro rojo

En segundo plano, el agente de escucha message() es lo mismo que utilizar app.event(“message”, fn) además del parámetro say() adicional que se pasa a la función de escucha. El parámetro say() expone la URL de respuesta del evento que, a diferencia de llamar a chat.postMessage(), no requiere ámbitos adicionales para responder a los eventos de mensaje.

Siempre y cuando Glitch funcione en una ficha aparte, la aplicación debe reiniciarse de forma automática. Ahora puede enviar un mensaje que contenga un saludo dentro del canal donde se agregó la aplicación. La aplicación debería responder.

Canal de Slack con la publicación de saludo de FS3 y la respuesta de sample_app “Hola, @FS3”

Este ejemplo básico le brinda un lugar para empezar a personalizar la aplicación en función de su caso de uso. Probemos algo un poco más interactivo: enviemos un elemento de botón en lugar de texto sin formato.

Configurar la interactividad

Para utilizar las funciones, como botones, menús de selección, selectores de fecha, modales y accesos directos, debe activar la interactividad. Similar a las suscripciones a eventos, necesita especificar una URL de solicitud para que Slack envíe la solicitud de acción (como un usuario hizo clic en el botón).

En la página de configuración de la aplicación de Slack, haga clic en Interactivity & Shortcuts (Interactividad y accesos directos) en la barra lateral.
Cambie la interactividad a On (Activado). Observará que hay otro cuadro de URL de solicitud.
De manera predeterminada, Bolt está configurado para utilizar el mismo extremo para componentes interactivos que utiliza para eventos, así que utilice la misma URL de solicitud que antes.
Haga clic en Save Changes (Guardar cambios) en la esquina inferior derecha de la página, ¡y eso es todo! La aplicación ya está configurada para manejar la interactividad.

Agregar agente de escucha de acciones para responder mensajes

Al escuchar la interactividad, utiliza el agente de escucha action(). Antes de configurar el agente de escucha action(), modifique message() para que envíe un elemento de botón.

Vaya al proyecto de Glitch.
En app.js, reemplace el fragmento de código anterior para incluir una nueva sección.

// Message listener function called for messages containing "hello"
app.message('hello', async ({ message, say }) => {
    await say({
        "blocks": [
            {
                "type": "section",
                "text": {
                    "type": "mrkdwn",
                    "text": `👋 Hey there <@${message.user}>`
                },
                "accessory": {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "Click Me",
                        "emoji": true
                    },
                    "action_id": "click_me_button"
                }
            }
        ]
    });
});

Código anterior reemplazado por el código de arriba, resaltado con un cuadro rojo

Ahora, el valor de say() es un objeto que contiene una matriz de bloques. Los bloques son componentes de un mensaje Slack y pueden cambiar de textos a imágenes y selectores de fechas. En este caso, contiene un bloque de sección que incluye un botón como un accesorio.

Para diseñar mensajes y otras superficies de Block Kit, puede utilizar Block Kit Builder. Tiene un conjunto de plantillas integradas para casos de uso comunes y una práctica interfaz de arrastrar y soltar con la carga JSON correspondiente a la derecha.

Block Kit no puede rellenar notificaciones ni buscar de manera predeterminada, así que el campo de texto debería utilizarse para hacer que los mensajes sean más accesibles. Para obtener más información sobre el campo de texto, consulte la página de referencia chat.postMessage.

En el objeto accesorio del botón, hay un action_id. Esto funciona como un identificador exclusivo que puede pasar a la función de escucha para escuchar solamente eventos interactivos correspondientes a ese elemento de bloque.

La aplicación debe reiniciarse. Luego, puede enviar otro mensaje que contenga un saludo al cual la aplicación responderá con un mensaje que incluye el elemento de botón. Pero, si hace clic en el botón, no sucede nada (todavía).

En el canal, FS3 publica un saludo y se muestra la respuesta de sample_app con un emoji de saludo y el mensaje “Hola, @FS3”

Agregar agente de escucha de acciones para responder a una interacción de botones

Agreguemos una función de escucha action() para responder al clic del botón con un mensaje de seguimiento.

Vuelva al proyecto de Glitch.
Agregue el siguiente agente de escucha de acción en app.js.

// Action listener function called when an interactive component with action_id of “click_me_button” is triggered
app.action('click_me_button', async ({ ack, body, client, say }) => {
    // Acknowledge action request before anything else
    await ack();
    let channelID = body.channel.id
    let userID = body.user.id
    // Respond to action with an ephemeral message
    await client.chat.postEphemeral({
    channel: channelID,
    user: userID,
    text: `<@${userID}> clicked the button! 🎉 `
  });
});

Tenga en cuenta que ack() se llama dentro de la función de escucha. Ack() se utiliza para reconocer que la aplicación recibió el evento de Slack. Una vez reiniciada la aplicación, puede hacer clic en el botón de nuevo, y la aplicación responderá con un mensaje nuevo.

En el canal, FS3 publica un saludo y se muestra la respuesta de sample_app con un emoji de saludo y el mensaje “Hola, @FS3”; luego, se muestra una respuesta después de hacer clic en el botón: “@FS3 hizo clic en el botón”, con emoji de cañón de confeti

Si tiene problemas para ejecutar la aplicación, eche un vistazo al código terminado en actions.js dentro de la carpeta de ejemplos del proyecto.

¿Cuál es el siguiente paso?

Ahora tiene la primera aplicación de Bolt para JavaScript que utiliza los conceptos principales de Bolt para escuchar y responder a diferentes eventos que provienen de Slack.

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

Pase por la carpeta de ejemplos dentro de su proyecto de Glitch. Hay algunos archivos con diferentes muestras de código que puede copiar y pegar en el proyecto.
Lea la documentación de Bolt para JavaScript para aprender sobre funcionalidad avanzada y encontrar fragmentos de código que muestren las opciones posibles.
Mejore el diseño de su aplicación con Block Kit Builder.

Explore otras superficies a las cuales tiene acceso su aplicación, como la ficha Inicio y los modales emergentes.