Mejora tu productividad creando aplicaciones de Slack

All contents © MuleSoft, LLC
Mejora tu productividad
creando aplicaciones de Slack
Alexandra Martinez, Developer Advocate
alexandra.martinez@mulesoft.com

Max Manager app
Creando el back-end
Preguntas
Agenda
Sobre mí
¿Qué es Slack?
Demo

● Ingeniera en Software con 10+ años en tech
● De Monterrey 󰐏 viviendo en Toronto 󰎟
● Developer Advocate en MuleSoft
● Fundé ProstDev
● Lead en Women Who Code Monterrey
● Mentora en Olascoaga MX
● Creadora de contenido | Escritora | Gamer
Sobre mí
@DevAlexMartinez
Alexandra
Martinez
(a veces)

¿Qué es Slack?

App de mensajería para negocios o comunidades
Slack
● Reacciones
● Canales
● Mensajes multimedia
● Aplicaciones
● Integraciones
● ¡Y más!

Demo
Veamos la aplicación en acción

Max Manager app
Max the Mule

Administrador de tareas en Slack
Max Manager app
Lista tus tareas desde la
página inicio de la
aplicación

Administrador de tareas
3 formas de crear una
nueva tarea:
● Crear tarea desde
un mensaje
Max Manager app

Max Manager app
nueva tarea:
un mensaje

nueva tarea:
un mensaje
un Slash Command
(comando diagonal)
Max Manager app
1
2
3

Max Manager app
nueva tarea:
un mensaje
un Slash Command
(comando diagonal)
● Crear tarea desde el
inicio de la app
1
2

Max Manager app
Chequea tus tareas
desde la página de
inicio de la aplicación

Max Manager app
1
2
El link al mensaje se
guarda cuando se crea
una tarea desde un
mensaje
(Slack no tiene una
forma para darle click al
link directamente aún,
se tiene que copiar el
link para buscar el
mensaje)
3

¡Lo puedes personalizar a tus
necesidades!

Creando el back-end
Usando herramientas low-code (MuleSoft)

¿Cómo funcionan los triggers? (Slack)
Funcionalidad Acción/Comando Se envía un Request a: Resultado esperado
Abrir página de inicio app_home_opened /events
Muestra las tareas existentes con su estado
correspondiente (checked/unchecked) y link (si aplica)
Crear una nueva tarea desde
un mensaje
message_action /interactive Abre un modal
un slash command
/createtask /slash
Crea una tarea con el texto que se envió en el
comando
la página de inicio
block_actions /interactive Abre un modal
Modificar el estado de las
tareas desde inicio
block_actions /interactive Actualiza el estado de las tareas
Enviar tarea desde el modal view_submission /interactive Crea una tarea con el texto que se ingresó en el modal

Usando herramientas low-code
Preparando el back-end con MuleSoft
Funcionalidad Acción/Comando Se envía un Request a:
un mensaje
message_action /interactive
un slash command
/createtask /slash
block_actions /interactive
tareas desde inicio
Enviar tarea desde el modal view_submission /interactive
app_home_opened

un mensaje
un slash command
/createtask /slash
tareas desde inicio
message_action
view_submission
block_actions

un mensaje
un slash command
/createtask /slash
tareas desde inicio
/createtask

● No todos los datos vienen en JSON.
● La acción/comando puede venir desde el campo type, event.type, o command.
● Puedes usar app.slack.com/block-kit-builder si quieres modiﬁcar el modal o la página de
inicio.
● Familiarízate con la API de Slack para poder hacer las llamadas adecuadas. En este caso,
usamos views.open y views.publish para manejar el modal.
● Puedes conectarte a la API de Slack usando OAuth o un token. En el demo usamos token.
● Necesitas enviar Responses especíﬁcas (dependiendo de la llamada que hagas a la API de
Slack o para responderle a un slash command) para avisarle a Slack que el procesamiento
funcionó correctamente.
● Necesitas conectar una base de datos para guardar las tareas y sus estados. En mi caso
usé algo llamado Object Store en MuleSoft.
● Necesitas preparar tu código con las notas anteriores y escoger una plataforma donde
puedas enviar tu aplicación de back-end a la nube (por ejemplo, NodeJS para la
aplicación y Heroku para la plataforma en la nube).
Si quieres crear tu propio código en otra tecnología aparte de MuleSoft
Notas importantes para tener en cuenta
La app de MuleSoft ya está preparada con todo esto. Es
solo para que tú lo puedas replicar en otras tecnologías

Preguntas
Encuentra el repositorio aquí:
github.com/alexandramartinez/slack-maxmanager-app

Mándame un correo 👇
alexandra.martinez@mulesoft.com
¿Tienes más preguntas?
¡No te preocupes!
Sígueme en ✨redes sociales✨
@DevAlexMartinez
¡Contáctame!
Alexandra
Martinez

Thank you!

Instrucciones completas

1. Crea un nuevo workspace en slack.com o slack.com/intl/es-es (en español)
2. Click Pruébalo gratis
3. Introduce tu correo electrónico
4. Click Crear un espacio de trabajo
5. Introduce un nombre para tu workspace, ¡puede ser lo que quieras! Por ejemplo,
demo-tunombre
6. Continúa introduciendo la información requerida (no tiene que ser real)
7. Si tienes Slack instalado, puedes abrir tu workspace desde la aplicación, o puedes usarlo
desde el navegador (dale Cancelar para que no se abra la aplicación)
Crea tu workspace
Si eres nuevo a Slack

1. Ve a api.slack.com/apps
2. Click Create an App y después From scratch
3. Nombra tu app Max Manager y selecciona tu workspace
4. Click Create App
5. Una vez que tengas tu app, vamos a ir conﬁgurando cada permiso por separado
Conﬁgura la app desde Slack
Max Manager app (Slack)

1. Desde api.slack.com/apps, asegúrate que estás dentro de tu aplicación
2. En el menú de la izquierda, selecciona OAuth & Permissions
3. Da scroll hacia abajo hasta la sección de Scopes y selecciona Add an OAuth Scope bajo la
sección de Bot Token Scopes (la primera opción)
4. Selecciona commands
5. Si regresas al menú de Basic Information de la izquierda y abres la opción de Add
features and functionality, ahora vas a tener Bots y Permissions con un check verde
6. Selecciona Install your app y dale click a Install to Workspace
7. Dale click a Permitir
8. Desde OAuth & Permissions, copia el token que aparece en Bot User OAuth Token. Lo
usaremos más adelante
OAuth & Permissions e instalación

1. Descarga e instala Anypoint Studio (mulesoft.com/platform/studio)
a. Es totalmente gratis y se queda siempre en tu computadora
2. Clona el repositorio: github.com/alexandramartinez/slack-maxmanager-app
3. Desde Anypoint Studio, selecciona File > Import > Anypoint Studio > Anypoint Studio
project from File System y dale click a Next.
4. Selecciona el repositorio que clonaste en el campo de Project Root y asegúrate de quitar
el check en Copy project into workspace para que no haga una copia del folder.
5. Dale click a Finish.
Anypoint Studio - el código
Si quieres usar otra tecnología aparte de MuleSoft, puedes
preparar tu código en otros lenguajes o tecnologías como
NodeJS.
¡Te puedes basar en el código demostrado para crear el tuyo!
Prepara el back-end

1. Crea una cuenta de Anypoint Platform (anypoint.mulesoft.com)
a. Gratis 30 días pero puedes seguir creando cuentas usando el mismo correo, solo cambiando tu
usuario
b. Puedes transferir tu información de una cuenta a otra, sigue las instrucciones de este link en la
pregunta de “How do I prevent my Anypoint Platform trial account from expiring in 30 days?”
2. Desde Anypoint Studio (IDE), da click derecho al root folder (maxmanager)
3. Selecciona Anypoint Platform > Deploy to CloudHub
4. Agrega las credenciales de tu cuenta de Anypoint Platform
a. Si te pregunta sobre Multi-Factor Authentication, selecciona Not Now
b. Si te pide escoger un ambiente, selecciona Sandbox
Anypoint Platform - la nube
Prepara el back-end Si quieres usar otra tecnología aparte de MuleSoft, puedes
preparar tu código en otros lenguajes o tecnologías como NodeJS
y subirlo a una nube como Heroku.
En vez de usar el URL de CloudHub, usarías el de Heroku.

Anypoint Platform - la nube (contd.)
Prepara el back-end
1. En la nueva ventana:
a. Cambia el nombre de tu aplicación hasta que aparezca una palomita verde al lado del nombre (por ejemplo,
maxmanager-tunombre)
b. Ve a Properties y crea una nueva propiedad con el nombre (campo de key) slack.token.bot
c. El valor de la propiedad es la que copiaste previamente de Bot User OAuth Token
d. dale click a Deploy Application
2. Una vez que esté en proceso, puedes cerrar la ventana
3. Desde Anypoint Platform (navegador), selecciona el menú de la izquierda y da click a Runtime Manager
a. Si te pide el ambiente, selecciona Sandbox
4. Tu nueva aplicación de maxmanager estará en proceso (Deploying) o Activa. Una vez que el status
aparezca verde, signiﬁca que tu aplicación se subió correctamente
5. Da click a tu aplicación para abrir los detalles y copia el URL que aparece en azul (por ejemplo,
maxmanager.us-e2.cloudhub.io). Este es el URL de tu aplicación en el back-end
Si quieres usar otra tecnología aparte de MuleSoft, puedes
preparar tu código en otros lenguajes o tecnologías como NodeJS
y subirlo a una nube como Heroku.
En vez de usar el URL de CloudHub, usarías el de Heroku.

1. Desde api.slack.com/apps, asegúrate
que estás dentro de tu aplicación
2. En el menú de la izquierda, selecciona
Basic Information
3. Selecciona Add features and
functionality y después Bots
4. Activa las opciones de Home Tab y
Messages Tab
5. Selecciona el check de Allow users to
send Slash commands and messages
from the messages tab
Bots

1. Regresa a Basic Information
functionality y después Interactive
Components
3. Selecciona Oﬀ para cambiar a On
4. Pega la URL que copiamos
previamente desde Anypoint
Platform y agrega /interactive al
ﬁnal
5. Dale click a Create New Shortcut >
On messages > Next
6. Nombre: Crear tarea, descripción:
Crea una nueva tarea, Callback ID:
create_task
7. Da click a Create y selecciona Save
Changes en la parte de abajo
Interactivity

functionality y después Slash
Commands
3. Dale click a Create New Command
4. Command: /createtask
5. Request URL: tu URL + /slash al ﬁnal
6. Agrega una descripción y dale click a
Save
Slash Commands

functionality y después Event
Subscriptions
3. Selecciona Oﬀ para cambiar a On
4. Pega la URL que copiamos
previamente desde Anypoint
Platform y agrega /events al ﬁnal
5. Selecciona Subscribe to bot events y
da click a Add Bot User Event
6. Agrega app_home_opened
7. Da click a Save Changes en la parte
de abajo
Event Subscriptions

● Si tu aplicación de Anypoint Platform no aparece en verde, asegúrate de haber
agregado la propiedad slack.token.bot desde Runtime Manager
● Si hiciste algún cambio a la aplicación de Slack desde api.slack.com y no se ve
reﬂejado desde tu workspace de Slack, puedes reinstalar la aplicación desde Basic
Information > Install your app > Reinstall to Workspace > Permitir
¿Tuviste problemas?
Troubleshooting

Mejora tu productividad creando aplicaciones de Slack

Recomendados

Recomendados

Más contenido relacionado

Similar a Mejora tu productividad creando aplicaciones de Slack

Similar a Mejora tu productividad creando aplicaciones de Slack (20)

Más de Alexandra N. Martinez

Más de Alexandra N. Martinez (20)

Último

Último (20)

Mejora tu productividad creando aplicaciones de Slack