Slack App Setup

[00:00:00]
>> With this setup, we are able to stop here for a second and we're going to spend a little time in the browser because the next thing that we need to do is set up our Slack app. So I'm going to go to api.slack.com and we're going to set up an app.

[00:00:18]
So I'm actually going to delete my current app, and we're gonna start from scratch here. So, let's create a new one. We're gonna go from scratch, and we want this app to be called Foodfight, and we're gonna deploy it to my Learn with Jason Slack instance, and we're gonna create this app.

[00:00:40]
Okay so, what we've just done is we have created a brand new app that will be available only currently to our instance of Slack. So there are ways that you can publish these as apps that any Slack instance can install. That's really not the point of this particular workshop.

[00:01:01]
What we're trying to do is build internal tools. So the idea is that this is a private app that will only be used by your Slack instance. And that allows us to make it a little more personalized to our team as opposed to something that would need to be more generically applicable to any team that uses it.

[00:01:19]
So the next thing that we want to do is let's scroll down and add some details about the the app. So I wanna make this just a little more personable. So I'm gonna add like this little smiling emoji, and then I'm gonna add some details here. So, we'll say, argue with your coworkers about food opinions that definitely don't matter.

[00:01:46]
We've got an asset for the app icon that is in the GitHub repo. So, if we go to that chat ops frontend masters into assets, we can grab this and use this as a logo for the app. So I'm going to open that. I set a background color.

[00:02:03]
You're welcome to, you know, you can skip all this stuff if you don't want to do it. But so this is 691487 as a background color. And then as a long description, I'm going to copy paste this out. And what we've got here is just a little fun copy to explain to people why this exists, right?

[00:02:26]
So, the app that we're building for this one is not like task management specifically because I figured that would be too idiosyncratic between teams. So instead I'm using the same flow of, we want to capture user input out of Slack and then put it somewhere for later triage and you can adopt this to your specific workflow, you don't need to use mine.

[00:02:53]
I think it should be it should be something that you talk to your team about. What information do you need, why are you capturing it? How does it get managed? What are the intervals for it? So we're intentionally going a little bit silly with this app, to get away from the idea that I'm telling you this is exactly how you should build the app.

[00:03:10]
And more, these are the mechanics of building the app and you should adapt it to your team. So once we have set that up, let's save it. And then we can go over to this "Slash commands" section. So the place we're going to spend the most time in this app is in this "Slash commands" and interactivity and shortcuts here.

[00:03:30]
So you'll see me go back to these quite a bit. So inside the "Slash commands", we're going to create a new one and we're going to call this one Foodfight and the request URL is going to be our Netlify live URL. So I'm going to copy this, and head back in.

[00:03:50]
And now there's a caveat to be made here. And it's important because it can get annoying, but to me, it's less annoying than having to deploy every time. Anytime you stop and restart your dev server, it is going to change this URL. This little hash here is going to change every time we stop and start the dev server.

[00:04:09]
So because right now I've stopped the server, I actually should start it again so that we can try this out. Oops, I forgot to do the live flag. Oops. There's the live flag. And so here we can see we've got a new hash, and so I'm gonna change this out.

[00:04:40]
And now we've got a new live URL that we can run. And so anytime you make the change, you will need to edit this in the Slack API dashboard, so that is important. Next we can add just some details, these will show up in Slack, so it's nice to have.

[00:04:56]
So I'm gonna add a short description of start an argument about food as a treat. And then as a usage hint, this is kind of saying like what the parameters are of the command. So I'm going to I'm going to set it to say your most controversial food opinion.

[00:05:12]
And the intention here is that when somebody writes a slash command, they don't even have to open the slash command before they can start typing. They can just say, slash, FoodFight and then type a sentence. And that sentence will be what gets passed in to the user input, so this is really really similar to what somebody would do if they were just gonna say, hey can you help me build XYZ?

[00:05:33]
Now they can just do slash request, can you help me build XYZ right? So again, compliance via convenience. If somebody's gonna type in your Slack channel anyways, letting them know that prefixing it with your slash command means that it actually gets tracked and triaged and managed with a CLA from your team like yes, we are actually going to earn, SLA from your team, we're going to manage these tasks within x time.

[00:05:59]
Those are really powerful ways to help your team know how to work with you and feel confident that the way they're working with you is going to actually work. So once we've done that, we can save. And then I'm going to minimize this and I'm going to open up Slack.

[00:06:19]
So this is a Slack workspace and what I'm gonna do is just, let's just clear this out a little bit. So this is a cleared, [LAUGH] very high-tech clearing of the Slack channel here. But what we can do now is we can actually run our FoodFight command after we've added the app.

[00:06:47]
So we need to make the app available, right now it's not here. So you can see if I start typing just FoodFight, it's not there and I need to add the app to a channel in order to make it work, so the first thing is going into the OAuth and permissions here.

[00:07:05]
Why don't we make sure that it's got all the right scopes? So, this first scope here, commands, is the one that's going to allow those slash commands to be registered. So we're saying your bot can manage commands, but the part that we don't have yet is right now our bot wouldn't be able to send any messages back.

[00:07:20]
And we do want it to be able to do that, so before we install it, because every time you change permissions, you have to install it. Let's add chat, right? And that is gonna be everything that this one needs. So we can, we can save that. And then now let's install it to the workspace.

[00:07:40]
Doesn't have a bot user to install. I know what it is. Nevermind. Let's, so here on the add display name. So it's on App Home. Scroll down to your app's presence in Slack, and here we have to add actual bot information. So we're going to name this bot Food Fight, and we're going to give it a default username of foodfight and add.

[00:08:12]
And then we can show it as always online. That's a nice easy thing to do if people want to see whether or not the bot is working. And so up here now it says bot user added. So now that we've added that bot user, we can go back to this OAuth and permissions and we can install to workspace.

[00:08:33]
And now it's saying that it can do things. It can send messages as foodfight, and it can add shortcuts or slash commands that people can use. And that's what we wanted to be able to do, so we're gonna hit allow. Good, good. And next we're going to minimize this window here, start typing Foodfight.

[00:09:01]
And now we've got Food Fight here. And you can see that whatever we give it as the body of our command is what will show up in the output here. But note that it's only visible to you, and that's because we can give feedback to the user who ran the command using the body of what we returned from the slash command.

[00:09:24]
But if we want to send a message to everybody, we're going to have to use Slack's API to send a message as the bot.