If you're learning about Slack apps, modals or slash commands for the first time, you've come to the right place! This tutorial will go through setting up your very own server using Glitch and have that server be the backend to your very own Slack app. Let's take a look through the technologies that we'll use in this tutorial.
Glitch is a online IDE (Integrated Development Environment) where you can collaboratively work on code and host your very own server. The second point is really important as it is a quick way to get up and running, without having to deal with figuring out which hosting solution you want for your app. Just as a note, Glitch should only be used for development purposes and should not be used in production.
Python is a programming language known for being straightforward to read and popular among beginner coders. We'll use this in conjunction with Bolt for Python, an in-house SDK that makes it easier to build Slack apps.
Block Kit is a UI framework for Slack apps that allows you to have beautiful, interactive messages within Slack. If you've ever seen a message in Slack with buttons or a select menu, that's Block Kit.
Modals are similar to a pop up that happen right in Slack. They grab the attention of the user and usually ask them to provide some kind of information or input.
If you follow through with the extra credit tasks, your final app will look like this.
Also, here's a copy of what the modal payload looks like -- this is what powers the modal.
{
"type": "modal",
"callback_id": "gratitude-modal",
"title": {
"type": "plain_text",
"text": "Gratitude Box",
"emoji": true
},
"submit": {
"type": "plain_text",
"text": "Submit",
"emoji": true
},
"close": {
"type": "plain_text",
"text": "Cancel",
"emoji": true
},
"blocks": [
{
"type": "input",
"block_id": "my_block",
"element": {
"type": "plain_text_input",
"action_id": "my_action"
},
"label": {
"type": "plain_text",
"text": "Say something nice!",
"emoji": true
}
}
]
}
Find the base path to your server by clicking the "Share", then copying the Live site link.
Head back to your app page and navigate to Interactivity & Shortcuts. Append "/slack/events" to your base path URL with and enter it into the Request URL. e.g. https://festive-harmonious-march.glitch.me/slack/events. This allows for your server to retrieve information from the modal. You can see the code for this within the Glitch project under Step 4.
Next, we're going to create the Slash Command so you can access it within Slack. Head over to the Slash Commands section in the left sidebar and create a new command. Note the Request URL is the same link as above, e.g. https://festive-harmonious-march.glitch.me/slack/events . The code that powers the slash command and opens up a modal can be found within the Glitch project under Step 5.
Navigate to Install App and install.
After you've done this, you'll see a Bot User OAuth Access Token, copy this.
Head back to your Glitch project and click on the .env file where the credentials are stored, and paste your bot token where the SLACK_BOT_TOKEN variable is shown. This allows your server to send authenticated requests to the Slack API. You'll also need to head to your app's settings page under Basic Information and copy the Signing Secret and put that into the SLACK_SIGNING_SECRET variable.
Now that everything is set up, let's test by heading to Slack and typing /thankyou.
All done! 🎉 You've created your first Slash Command using Block Kit and Modals! The world is your oyster, you can create more and more complex modals by playing around first with the Block Kit Builder and if you have any questions please feel free to reach out to developer support at feedback@slack.com.
Now to getting the lovely feedback in channel somewhere. This part isn't required but it's nice to have so that you can actually see the feedback people are giving each other somewhere.
Add the chat:write bot scope, this allows for your bot to post messages within Slack. You can do this in the OAuth & Permissions section on your Slack app.
Reinstall your app to make sure the scopes are applied.
Create a channel and name it #thanks. Next, get its ID by right clicking on the channel name, copying the link and taking the last section that starts with the letter C. As an example, if your channel link looks like this, https://my.slack.com/archives/C123FCN2MLM, then the ID is C123FCN2MLM.
Add your bot to the channel by typing the command /invite @your_bots_name.
Uncomment the Extra Credit code within your glitch and make sure to replace your_channel_id with the ID in step 2.
Test it out by typing /thankyou and watch all the feedback come into your channel!
If you want to learn more about Bolt for Python, you can do that here.