How to Build a Basic Custom Slack App in Minutes (Full Transcript)

[00:00:00] Speaker 1: You want to build a custom app? Check this out. Hello, and welcome back to Slack School. My name is Mike Reynolds. I'm your host. And today, we're going to look at building custom applications right in the Slack platform. Of course, this is a big topic. And we're going to cover it over several episodes. And safe warning for everybody at home, I'm going to show you some code. It's OK, though. It's human-readable code. We're going to get into the water really, really easily. You're going to meet my friend Jason. It's going to be a lot of fun. That was a joke, by the way. If you're a developer, you're allowed to laugh. If you're not a developer, that was a joke. Giggle anyway. My jokes are funny. Let's get after it. All righty, the best way to get started with a new app, and this is the way that you should do it, too, is right in the UI. We're just going to use clicks today. So what I'm going to do, we're all going to navigate to this website, api.slack.com forward slash apps. Now, if you've never created an app before, you're going to see a screen just like mine. Before we really dive into it, let's just level set. What is an app? We all know in Salesforce, of course, an app is just a collection of objects and tabs. It's mostly user interface stuff. You can do some tricks to add some functionality that is only accessible in an app, but the functionality actually lives somewhere else. That's how Salesforce does it. In Slack, it's different. The functionality is part of the app itself. There's a lot of UI elements as well, and we're going to take a look at some of them. But I want you to think about this idea of an app being a container that I put some different pieces in, things like what's the name of the app, the basic contact card for it, maybe some functions. I can put those functions inside the app as my container. I can also add permissions. And these are all very important details. We're going to take a look at those now. So when I go to api.slack.com forward slash apps, I get this screen. Now, this is an org that I've done nothing with, and so it's going to be blank. You might see a list of apps if you've already fiddled around a bit. I don't have any of those, so I'm going to click this big green button, create an app. And when you're building an app, you've got two choices on how to do it. You can do it all by hand using clicks. That's this From Scratch option at the bottom. Or if you've already got an app, we can move that app from place to place using what's called a manifest. We'll take a look at a manifest after we've built our app. So let's start with the From Scratch option. We've got a couple of things to pick here. We've got to give this a name. How about we call it Super Cool App? And I've got to pick an environment to put this in. I've only got one in this incognito window, so I'm just going to choose my sandbox and then hit Create App. Right out of the gate, it drops me on this basic information page, and it's showing me my app's credentials. An app has credentials, and these credentials allow the app to work with the Slack API. We don't really care about that at all right now, so we're going to entirely skip it, and I'm going to go down to the display information. So I've called this the Super Cool App. Maybe I want to edit that. I can do that right now, and maybe I want to proper case this. I can add a short description here. We can give it a color. I'm going to just use this picker. How about that color? Seems great. We can add an icon. I'll pick that one. And we can do a long description. Once we've populated these fields, I can click Save, and I've saved my changes. All I did here was I provided some real basic things to describe the contents of your app. I could also add text if you want. So in this case, it's going to be Medium. I can add two hop bass widths. But remember, this is because we want these fields was I provided some real basic things to kind of describe the app itself, right? Remember, an app is just a container for some things, and all I've done is describe that container. Now, again, I said I was going to show you some code. I'm going to show you code that is human readable. Some code, you really got to understand the syntax to be able to get what's happening. The code I'm going to show you is really very approachable, so don't flip off just yet. What I'm going to do is scroll up just a bit, and over on the left, I've got this option for an app manifest. When I open the app manifest, I'm going to see all of the information about my app that I've entered. So again, I said this was human readable. It's a type of code called JSON, the letter J and then son. I kind of joke that it sounds like Jason, and so I'm going to call this code My Friend Jason. So here in My Friend Jason, I can see that there's some display information. I have the name, which is super cool app. I have the description. It's a really cool app. I've got a background color, as well as my longer description. I also have this set of settings, and I know that there's four of them there and that they're all set to false. It doesn't even really matter what they are. The thing is, I can see that they're all set to false because of the structure of the code, and it kind of makes sense when you look at it. It tells you what's going on here. I've got display information, and then it opens a set of curly brackets. Everything inside these curly brackets is really part of the display information. This structure is what we call this human-readable code. And again, the name of this language is JSON. You can also use a different language called YAML, which is Y-A-M-L. For our purposes today, we're just going to stick with My Friend Jason. I think he's a little bit easier to work with. Of course, when you're building an app using the UI, using this website, I don't have to do any edits here. I could make edits here if I wanted to, but I'm not going to today. We're all going to use these standard guides. So once I've filled in this basic information, well, what's the next part of our app that we want to build? The next part should be auth and permissions. When we think about what an application can do, I want you to think about scope. Scope is essentially the specific functions that your app is allowed to do. So let's take a look at some of the scopes that we can add. And right now, I'm going to focus on a bot token. So I'm going to click on this Add an OAuth Scope because all scopes live within the framework of being authorized. So we can pick all sorts of different functions that live within Slack. And I can control all of those functions individually. So what I'm going to focus on today are two really simple ones, chat write, which I scroll down to, and then I'm going to select. I can also type chat and see what the other options are. Each of these is going to give a specific permission that I can assign and allow my app to perform. If I don't add the scope or I take it away, then the app won't have the ability to do that thing. Also here, since I don't have any user token scopes, this app can only perform functions as an app. It'll never pretend to be me performing a function. Now, all I've done here is add chat write. That is, as it says here, the ability to send a message as my app, which is super cool app. Since I've only made this one change, that's actually enough. I can go back to my manifest, and I can see that it's changed. So my JSON is different now. I had this display information section before. And this bit down at the bottom, the settings, that was there before as well. But this bit here in the middle, this feature section, it is new. So let's take a look at it and see what it says. I see here that there's features. I see bot user, which makes sense because we talked about the bot, not users specifically. So this is for the bot user. And it has a display name as the super cool app. And is it always online? No, it is not. That is set to false. Then I have within this OAuth configuration, I have a specific scope. And it is of the type bot. And it has the ability to do chat write. Let's say we wanted to add a custom function, one that isn't based on something that's part of Slack, like the ability to read a channel or post a message. Well, we can do that with a slash command. Slash commands give an app the ability to allow users to do certain functions in a really simple way. Now, the thing you got to know about slash commands is that when I add the slash command into the app, it doesn't do anything just because it exists. I need to connect it to something, which we're going to do later. But I'll show you what it looks like now. I can create a new slash command. And it's a pretty simple UI. I have to pick some type of actual slash command. So I have to type the name for the command. We're going to call this complement. I have to give a URL, which is where we're going to go. For now, because I have to enter a valid URL, we're going to use this one. I have to give it a short description. And if I would like to give it a tip, I could. Now, when you're building a slash command, typically, we're going to be sending this outside of Slack. And because of that, we do have control over this idea called escaping. I don't need to get too much into it. But when you're writing code, sometimes certain characters that you can type cause problems for the code. So what we can do is this process called escaping. And that is as simple as checking this box. And if you look at the little preview of what it shows you, you'll see the difference between something that has been escaped versus something that has not. If I don't escape it, you'll see things in the code that travels between Slack and whatever other system I'm connecting to. I'll send something that is a little bit more complex because it might be the actual app mention or the name of the channel. Whereas if I escape it, we separate these pieces apart, and then I put them inside of some tags, which makes them a bit easier to manage. Escaping things is kind of always a good idea, but if you don't check this box, by the time you get to building an actual app that's using something outside of your Slack instance, you'll be able to decide if escaping is the right decision for you. You can see a preview of what this looks like right here. If I were to type slash compliment, I would get a pop-up that is able to show, hey, this app has this function, and here's a little bit of a guide for you. If I want to keep this, I can hit save. Now that I have that, let's go check out what my friend Jason says. I can open up my app manifest again, and this display information looks the same. Nothing's changed. I still have my features and my bot user, which has the super cool app name, but now I have a slash commands section, and I can see the actual command itself. I can see the URL where we're going to send that command, a description, and that I had that should escape checkbox set to true. Well, there you have it. Building a custom app inside of Slack is really pretty easy. You might wonder, why would I really want to build a custom application? There are so many great apps that I can just install, and that's true. There are literally thousands of applications that you can install into Slack to extend it and really make the best out of Slack as your work operating platform. That's all very true, but what if there isn't an app that does what you need? Maybe you've got a homegrown software that your company's truly dependent on, and you need to be able to work with it inside of Slack. Well, build a custom app that connects to that platform, and then take some of those functionality and bring them inside of Slack so that you can use that tool from inside of Slack where you're already working. It's going to be easier on your users, and you're going to get better results. A Slack app can do more than just send messages. It can automatically listen and respond. It can add additional functionality into Slack, and it can include custom automations that are inter-system. So maybe something like an approval process starts in Slack, but goes into a backend ERP, performs several functions, and then comes back with additional information for the user, allowing them to have more access rather than just say, hey, can you go check that other system? Let us know what you want me to cover next by jumping into the Slack community at slackcommunity.com and get into the Slack School channel and let me know what you thought of the episode, or just say hi. Don't forget to like and subscribe. We'll see you next time. And hey, for a person who didn't think that they could code at the beginning of this, they did a really good job. It's hard to learn new things. See you next time. ♪♪♪ Well, I buggered that all up, didn't I? No, it's her.