This will be part 1 of my Slack Journey where I will be covering the following:
What is Slack?
If you’ve made it to this post then that means you know what Slack is! Well, I hope at least. However if you don’t, then here is a refresher straight from the source: Slack is a proprietary business communications platform owned by Salesforce.
If you’re like me, you would ask well then what is a business communications platform and how is this different from a regular communications platform like Discord or Facebook Messenger?
Well, Slack is more focused on organizations than communities. For example, there exists pricing tiers where organizations have access to more tooling that allows administrators to provision users and handle security aspects of your organization’s configuration.
If all that did not make sense and you do not know what Slack is yet, here is more information that will help you understand: click me!
Background
Now that you are back (if you left to read about the joys of Slack), I want to give a little background about my experience with Slack app development.
This past summer, I was a full-stack software engineer intern at Salesforce and became a Slack certified developer. My main intern project was to create a Slack app that would be able to integrate a natural language processing (NLP) chat bot, and have all the functionalities that the bot would provide the user.
So now that you know my background let’s jump straight into getting up and running with building a Slack App!
What do we want
For this part of the journey, we will follow this guide a bit but will diverge from it as we get deeper and deeper into the subject. Some things are bound to be the same regardless of how you want to get started and this is one of them! However, I hope that my explanations and descriptions help you better understand how to do these steps. I know I needed something like this when following the guide!
Our goal is an app that has a Home page, About page, Messages page, and an App Directory page. We want an enabled home page. In the about page, we want a long description of what the app is and also slash commands enabled (shortcuts for functions). In the messages page, we want to be able to send messages to users (need scope). In the app directory, we want images for our app and a long description of our app.
Create an App
The next step is to click on “create an app” and fill out your app name and pick the workspace you want your app on.
Your next step is to give your app the necessary scopes for it to do what you want it to do. In this case, we simply want to give it the ability to post to channels in your workspace so we go to OAuth & Permissions -> Bot Token Scopes -> Add an OAuth Scope -> Select chat:write.
Other scopes are also available depending on the situation. You can read more about them here.
Install Your App
Go to OAuth & Permissions -> Select Install App -> Click Allow
After this, you get redirected back to the OAuth & Permissions page. However, now you have a Bot User OAuth Access Token. This token is basically the installing user’s “okay” to all the requested scopes that your app asks during the OAuth flow (installation process). More on the OAuth flow here.
Enable App Home
Since your app will use the home tab, you will need to enable App home in the App Management page.
After this we can also enable slash commands by going to App Home -> Messages Tab -> check on “Allow users to send Slash commands and messages from the messages tab”. Slash commands are basically a shortcut to getting a response from your app in the messages tab. The slash commands are located in the about page and will look like the below:
When you click on the button, it will redirect you to the messages tab where you will have the option to add parameters to the command. These parameters help your backend understand what response to issue. Once you click on the arrow to send the message, your app will respond with the appropriate response indicated by your app’s backend.
Distribute App
To be able to add long descriptions to the app’s about page and app directory page listing, we need to do a couple of things. The first is to check that there is no hard coded information like OAuth tokens in your app. We confirm this by going to Manage Distribution -> Share Your App with Other Workspaces -> Remove Hard Coded Information.
Second, we have to add an OAuth redirect URL. This allows other workspaces to authorize use of your app. Manage Distribution -> Share Your App with Other Workspaces -> Add OAuth Redirect URL. This URL will be where Slack sends the events your app subscribes to. Think of these events like the events in a web app such as “on click” or “on submit”. This URL will almost always come from your app’s backend. This will be the url that your app is hosted on. We add “/slack/events” to the URL because Bolt for Javascript listens to all incoming requests are this route.
Once we have that done, we can subscribe to events. We will be walking through this in the next part!
Finally, we can go to Manage Distribution -> click on Activate Public Distribution.
Now we can add long descriptions to the App directory page and About page.
Add Long Descriptions
After the tsunami of steps in the previous section, I can safely assure you that this last section is probably the easiest and most satisfying. Looking back, I actually wish I had the previous section when creating my intern project. You’d be surprised how long it really takes to figure all these steps out (about 4 hours 🙂 ).
Onto the last step we go! Maneuver over to “Basic Information”->Display Information-> Long Description. Here we can add our app’s description. Below this, we can also add images to our app and other fun things.
Wrapping it up (aka TLDR)
I know what you’re probably thinking: “Anthony, this is way too much information all at once” aaaaand yes it is. At this point I have thrown terms like Access Token, OAuth flow, Bot Tokens, Scopes, and Slash commands at you and you might be wondering if you can even make an app in addition to all of these configuration steps. Well this is probably the most confusing part of creating an app. After this, you will mostly be trying to try different Slack APIs together to make sense of what you want your app to do.
Here is how all the concepts are tied together:
We create an app by naming it and deciding where the app will live. Then, we need to give permission (scopes) to our app to be able to do things like post in a channel or send a user a DM. After, we install the app so that we can get an access token that indicates the user is okay with you taking the actions that you are allowed to do (scopes) in the app. We then move to adding more content to our app by enabling the home app and slash commands. We also want to subscribe to our app to any events that happen inside the app with a redirect URL. This URL is where your app is hosted. We also want to avoid security concerns so we remove any hard coded info. Moving on, we want our app to have a long nice description so we have to publicly distribute it. After enabling distribution, we can then add long descriptions to our about page and app directory page.
And, that’s it! You made it! Part 2 will be out next week. We will discuss setting up a Bolt JS backend and subscribing/responding to events.
