Build A Slackbot

[Music] what's going on guys so in this video we're gonna do something a little interesting we're gonna build a slack bot and we're gonna do this using javascript in nodejs if you don't know what slack is I'm sure most of you do but if you don't it's it's a collaborative workspace where you can share information and resources basically kind of like a high tech text chat you can assign permissions to certain users and so on it's it's kind of like discord if you've ever used discord and we're gonna build a bot which is like a robot user that you can that can send messages to the chat it can you can request things from it we're gonna build something called joke bot where we'll be able to say at joke bot Chuck Norris and have it do a random Chuck Norris joke or @ joke bot yomomma and have it give us a random yo mama joke and we're gonna use a couple different api's to be able to do that now I tried to look for an API that gave you just random jokes maybe you could add a category but I couldn't find anything like that if you guys know of any let me know so we're gonna use this here this is very popular this is a just the Chuck Norris joke it's at ICN DB comm slash API and basically we just send a request to this URL here and we'll get a random Chuck Norris joke and actually use this in my modern JavaScript course on udemy if any of you guys took that and then we have this yomomma dot info where if we make a request to this URL we'll just get a random yo mama joke so we're gonna implement these two api's within our bot now to interact with slack we're gonna use a library called slack bot API this is the URL on on github and it's actually called slack BOTS but the URL is slack bot API and the reason I chose this library is because it's very easy to use it's very practical and you can do a lot of stuff with it the documentation isn't that great it just shows you basically how to just get started but it's it's really easy to use as you'll see basically we bring it in we initialize our bot and then we can do like bot dot on start run a function and we can assign up an emoji to our message if we want to send a message and then we can post a message to the channel to a user to a group and so on alright so that's what we're going to use to to create our bot alright now we're gonna start from absolute scratch meaning we're gonna just create a workspace if you've never used slack before that's no problem we just go to slack comm and we're gonna say create workspace you want to put your email address in here and then click Next alright now you're gonna get a confirmation code let me just you're gonna get this sent to your email so I'm just gonna grab mine real quick and just copy that code and paste it in and then we'll put full name and display name I don't want emails and continue now we got to put a password in and then tell us about your team so you can choose like is this for work school shared interest group the number of people I'm just gonna say 11 to 50 I'm gonna delete this after anyway so it doesn't matter what's your group called will just say Acme web dev and continue to the URL looks like acne web dev dot slack is actually taken so we'll use Acme web dev workspace dot slack that's fine alright so you can also send invitations to people but we're gonna skip that you can download the Mac or Windows app I'm going to just go to the browser one and this will be our slack workspace so if you see this on the side here this is just like an intro like a welcome I'm gonna say skip completely and now we're inside of our workspace so I can just type stuff in here I can say hello and I can invite people to join and stuff like that but this isn't a slack tutorial it's just it's on building a bot so basically we have two channels general and random and we're gonna create our bot to work in the general channel and down here you can see it's apps this is where we want our bot to show up okay so it will show up here you can also install apps that are basically in like the marketplace and you can do you can build the bots and and other types of apps and you can distribute them too as well so you can have other people install them on on their slacks alright so what we need to do now is basically register our application before we can do before we do any type of coding so you want to go to API dot slack comm slash apps and you want to click on create an app we're gonna call this joke bot and you want to choose your workspace I'm going to choose Acme web dev and create app now there's different types of features and types of apps you can create we want to choose BOTS okay so we'll click BOTS and then click add a bot user we're going to choose joke bot for the name now here you can set it to look like it's always online if you want but I'm not going to do that because if it's not running and someone tries to use it it's not going to work so we're gonna say add bot user and Save Changes alright once we do that we can go to basic information and you can see add features and functionality is checked off now we want to add it to our workspace so we'll say install app to workspace it's basically going to just ask if we want to authorize this app or this this bot user joke bot so we'll say authorize and that's all set if we wanted to actually just distribute this thing or distribute this thing I should say distribute we could do that here but I'm not going to get into that here's our credentials and then we have some display information so here with the name is joke bot we can add a description and I'll just say random joke teller and then we can add an icon here if we want what I did is I just searched for smiley face PNG and I grabbed this this one right here so I have that on my hard drive so I'm going to use that as an icon - smiley face here and I think it has to be between 512 by 512 and 2,000 by 2,000 pixels for the image and this is a pretty big image so it's gonna take a couple seconds alright so there's our image success so everything is saved let me just close this thing down here and we can save again just in case you can also change the background color here but whatever everything is fine here now we can start to create our nodejs application so let's go to vs code and I just have an empty directory called slack joke bot and from here we want to create our package.json file so I'm going to do NPM Annette and let's go through this description will say slack bot that tells random jokes I spelt random wrong that's fine index J s is fine let's see author feel free to put your own name MIT license is good and there we go I'll just fix the random misspelling alright now we have two dependencies that we want obviously we want slack bots which is the library I just showed you we also we're going to install Axios because we're dealing with third-party api's and we want to be able to make requests and I prefer to use Axios over anything when when in node so let's do NPM install slack bots as well as Axios all right so those are now installed and I'm going to just add a start script so we don't have to do node index J s we're gonna go to scripts and just do start and let's delete all this stuff and let's make it node index dot JSP alright so now let's create our index dot j s file and just gonna make this a little smaller and clear it up so in this file what we want to do first is bring in slack bot so I'm gonna say slack bot camelcase equals require slack BOTS like that and then we want to bring in Axios so that'll be required Axios and then we want to initialize slack bots so what we'll do is create a variable called bot and set it to a new slack bot this takes in this takes in an object literal and it takes to two properties here so we want the token which will be a string and then the name which will also be a string and this is going to be called joke bot okay that's what we called it now for the token let's save this first of all and then let's go back to Chrome and this really caught me up when I was when I was studying this I thought that they meant the verification token right here and it took me about an hour to figure out that that wasn't it I kept getting this authorization error what you want to do is go 200 and permissions I can say leave no OAuth and permissions and you want the bot user ooofff access token so it should start with XO X B so we're going to copy that and that's what we're gonna use as our token okay or else you're gonna get some weird messages then what we'll do is create our start handler so basically what's gonna happen when we start the bot I just basically wanted to say like a welcome message you'll say like get ready to laugh or something like that so let's do bot dot on and we want to say on start' so when it starts up we want a function to run I'm gonna use an arrow here and we want to want to have an icon show so if I just show you the documentation real quick let's see right here and you can see we've we've done this stuff now we're doing on start to show an icon we just want a an object in a variable and we want to use icon emoji and slack has a bunch of basically codes for different emojis and if you want to check out all the codes you just search for slack emoji codes or something like that then we can post to the channel that's what we're going to do but you could also post to a single user to a group and so on and the point of this tutorial is to really show you how this works and you can come up with your own ideas I mean there's there's endless possibilities that you could do with you know building BOTS so let's do Const params and we're gonna say in here icon underscore emoji and we want to set that to a string which is gonna have two colons and inside will be basically the ID which I'm gonna use smiley like that okay and then we want to say bot dot post message to channel which takes three things it takes the channel which we're gonna use general and then it takes the message which I'm gonna just say get ready to let's say get radio so get ready to laugh with at joke bot and then the third will be that params object that has the emoji okay so that that actually should it should actually run now so let's save this I'm using prettier and the prettier extension so it just kind of format it a little bit and I think I think we'll be able to run it now but before I try running it if I go to our slack workspace you'll see joke bot is down here because we already authorized it for this this workspace it's not online if it was this little circle would be green you can see it says away so what we want to do is run the application so let's do NPM start because we put our start script and now it's running so you can see there's just basically a a cursor here and we can't type anything so it is running now you could run it on your local machine but you're probably not gonna want to you'll probably want to host it somewhere as far as hosting you know you could upload it to Heroku or something like that basically anything that runs no taps but I think there's specific services for slack BOTS if you want to look into that I don't really know enough about deploying slack BOTS to really you know go in-depth on that if someone else does please you know let us you know any recommendations but look right here so now joke bot has the green circle so it is running and down here it says get ready to laugh with joke bot and has a little smiley icon okay so our bot is now working I mean all it does is it does an intro message but it is in fact a working bot okay so it's as easy as that to actually create now what we want to do is we want to we want to be able to talk to it basically to send messages to it but before we do that I just want to add a quick error handler in case we get any errors so it has an error event will just say bot dot on and let's say on error then let's pass an arrow function with error and we'll just console.log just don't want that error okay now we'll put our message handler so basically when it when a message is sent to it we want to do bot dot on message and the callback that this gives us is going to give us some data so in here we're gonna say data now this data object that we get has some properties on it and type is one of them and we want to make sure the data type is actually a message so what we can do is we can just do a quick if statement here and we can say if data dot type is not equal to message okay so if it's something else then we just want to return we don't want we don't want to do anything else okay if it is a message then let's let's do a console dot log of that data so you can see what what comes in now we're gonna every time we make a change we do have to restart the server so I'm gonna ctrl C here or in my case command C the way I have my my things set up and I'm gonna do NPM start again okay and we'll get the message we'll get the little notification now if you get this right here enable desktop notifications I would suggest using it I'm going to although you guys won't see it because it's off my screen it's like way over here in the corner if you're on Windows it'll be on the bottom right hand corner and it will just give you the messages from the bot which is kind of cool but now let's just do from general let's do at joke bot you'll see it'll pop up right here and we'll say hello now the first time we do it it's going to say you mentioned joke bot but they're not in this channel would you like to invite them to join so we're going to just click on this link here and now we'll be able to use joke bought in general so let's say joke bought hello again and if we look at via our terminal and BS code you'll see that we actually got this this stuff here so this was the first one I think and then the second one was was this object and you can see it has a type of message so it wouldn't have it would have just returned if it wasn't the type of message the channel so these are like I the user ID text is what we want to focus on and in here is where you can see hello that's actually what we typed we did joke bought hello but it also has this stuff in it which is like I guess the ID so when we respond to whatever is typed we need to make sure that we kind of filter this out and we only want to we only want to check to see if this was included and we do like for instance Chuck Norris all right but this is basically the payload that is sent so I just wanted to show you that so let's go back up here and let's actually pass the data to a function a separate function called handle message and we're going to not just pass data but that data text value all right and then we'll create that function of handle message so let's put a comment here we'll just say I don't know respond to data whatever it doesn't matter and it's gonna take in a message okay this message is gonna be the data text which is going to look like this something like this so what we want to do is we want to check for a Chuck Norris because that's going to be a valid thing to actually do now we can't do like if if message is equal to Chuck Norris or whatever because it's gonna look at this whole string so there's I mean there's a lot of different ways you could do this you could use regular expressions I'm gonna do something very simple and just say if message dot includes and then space Chuck Norris okay and I'll show you why we use this why I'm using the space and a little bit but we want to check basically to see if that is included in this text if it is we're gonna run a separate function called Chuck joke okay so now let's go down here and let's say tell Chuck let's do caps Chuck Norris joke so function Chuck joke okay so how are we gonna get this joke we're gonna use our API which is this right here so we can make a get request to this URL let's random URL so I'm going to just grab that and just to show you how this is formatted if we make a get request in the browser to it it's gonna look like this now it's not going to give us an object right away with the data with the joke we want it gives us an object with a type and a value and then in that value we have the joke okay so we got to kind of dig through a little bit to get this this is what we want the actual joke so let's let's use Axios here to do a get request and we want to paste in that URL and an Axios of course gives us a promise so we'll say dot then it's going to give us a response I'll use an arrow function here and then we're gonna take response and with Axio so it's going to be res dot data tips to get whatever that that what that object is now remember that object had a value property so we want that and then that value object had a joke property so we want that so what I'll do here is just put this into a variable called joke make it simple oops okay so now that we actually have that joke what we want to do is send that to to slack okay because they're requesting it they're saying you know joke bought Chuck Norris runs this makes the request gets the joke now let's send it back so we can basically copy this cuz I want an icon and then I want to post to the channel so we'll grab this from the start and paste that in I'm not going to be smiley though I'm gonna use laughter or I'm sorry laughing not laughter I spelled that wrong didn't I okay so we have laughing and for the message we're gonna post message to channel we're gonna use the general channel for the message though I'm gonna use backticks instead of quotes because I want to say what type of joke this is we'll say Chuck Norris : space and then we'll use this template literal syntax to put the joke variable which is this right here and we also have the params going in okay so that should actually work let's save it and let's go back actually the first of all let's restart the server don't forget that and you see I go well you guys can't see it but I got a little notification that says joke bot get ready to laugh on my desktop which is kind of cool and we'll go back to our bot and you'll see that it's going to do this every time we start and restart the server but let's go ahead and try to do at joke bot and let's say Chuck Norris and there we go we get Chuck Norris once went skydiving but promised never to do it again one Grand Canyon is enough haha hilarious these are really stupid jokes but that's not really the point the point is to see how this works and you could there's like I said there's endless possibilities to do I mean you could use a weather API and you could say weather bought and then put a city in and have return the the temperature or the the wind or whatever you want so you know think of think of things after you do this think of things that you could do to create other types of BOTS so let's go back to vs code and let's let's work on the yo mama jokes so we're gonna go to our handle message we're gonna do an else if and inside here let's do message dot includes so includes just looks for something inside of a inside of string or whatever inside this object and we're gonna say yo mama that's the the keyword that we're gonna look for and if that's there then we're gonna say yo mama joke okay and I'll just kind of copy I'll just copy this and we'll say tell a yo mama joke change name of the function the API the URL for this is going to be API dot yo mama dots info I believe let me just check that until check that see oh it's as two M's in it there I'm get rid of that slash okay so the format of this the response to this API there's no value it's just gonna be res dot data dot joke okay so we're gonna put that in there we're gonna still use the Laughing the only difference with posting to the channel is that the title here will say yo mama alright so let's try that let's restart the server and let's go back I just wanna go to Chrome and close that up let's go to our slack channel here and let's do at joke bot yo mama so yo mama's so fat when she walked across the street someone said hey and the woolly mammoths are back oh my god these jokes are horrible but it works now I also want them to be able to do random and it'll just pick from Chuck Norris or yo mama and if you find another joke API you could of course implement that so let's do elsif inside the handle messages we could use a switch here as well which might be a little cleaner let's do else if message dots includes and let's do random and then we'll do random joke okay so we'll go down here and we'll say tell a random joke and create a function called random joke oops and there's a lot of ways you could do this as well I'm gonna make it really simple and just generate either a 1 or a 2 and if it's a 1 will run the Chuck joke if it's a 2 will run the yo mama joke so let's do Const Rand and I'm sure I'm sure there's more clever ways to do it but I don't really care I'm what I like to call a practical programmer I don't care about like doing the nerdiest thing or whatever it's I like to do the most the easiest most practical thing so we're gonna round this down I'm gonna pass in random math.random and then let's let's times that by 2 we want it to be just up to 2 so times 2 and then I don't this will be either 0 or 1 I want it to be there a 1 or a 2 so I'm going to add 1 to it and then we're just going to do a simple if statement if fouls will say if Rand is equal to 1 then let's run Chuck joke else if random is equal to 2 then let's run yo mama joke okay so we'll save that and let's go ahead and restart this and let's go back and let's try it so we'll say at joke bot random okay so that gave us a Chuck Norris let's try it again so at joke bot random now it gave us a yo mama so it's it's gonna just you know be completely random awesome so let's see what else do we want to do I also want just a help I want to be able to say joke bought help and have it tell us what commands we can do so let's go back up to handle messages and we'll do an else if let's say else if messages dots concludes yeah let's do a space help and in here let's do run help we'll have a function called run help and let's say show help text so function run help and here I guess we'll just copy we don't need to make any like API requests or anything let's just grab the params for the icon and the message and we're not going to do laughing it's it's help so I'm gonna do a question emoji and then it's going to be in general and then the message itself will use back ticks and we're gonna say tell them what to do so type at joke bot with either and then in single quotes I'm gonna say whoops not whoops but I'm gonna say Chuck Norris what else Co mama or random to get a joke okay so the reason that I put a space in these is because when this is fired off right when this post message the channel is fired off this is gonna run this where is it this here bought on message and the words Chuck Norris yo mama random they're all in this string so if I don't put the space that's gonna show even if we do just like at Chuck Norris because it's that what that string is in there however this string doesn't have a space you know so hopefully that makes sense if this was a more in-depth technical bot you'd be probably want to do more you know probably want to add some regular expressions and do more checking and so on but I want to keep this really simple so this I mean this will work so let's save this and let's let's restart the server here so NPM start and let's go try it so I'm just gonna do at joke bought help and that didn't work why didn't that work oh wait a minute wait else if messages includes help run help function run health post a message hmm wait I get an error here what's this messages is not defined messages messages where is this 42 42 messages is not defined else if oh I said messages should be message so you read your errors so let's restart this and now it should work so let's do joke bot help and there we go so we get this question mark emoji and it says type joke bot with either Chuck Norris yo mama or random to get a joke okay so that's it we have created a nice little joke bot with that is absolutely not funny at all but it does work and you know the point of this of this tutorial is to show you guys how to how to implement this and you can come up with your own ideas but like I said as for hosting you probably don't want to just keep this running on your local machine even though I mean it does work it just goes by the the token but you probably want to host this somewhere else you know on some other server and if you if anyone has a lot of experience with this stuff and you and you know a good place to host a slack bot you know let us know or any other information on that matter for that matter but that's gonna be it guys I hope you enjoyed this I will put this code on github I am going to delete this workspace this Acme web dev so you'll need to get your own you know create your own token API key whatever you want to call it and yeah so that's it thanks for watching if you like this video please leave it a like if you're not subscribed you like this content please consider subscribing consider supporting me on patreon and that's it thanks

Channel: Traversy Media

Views: 112,079

Keywords: slackbot, slack bot, node.js slackbot, node.js, javascript slackbot, javascript bot, bot tutorial, slackbot tutorial

Id: nyyXTIL3Hkw

Length: 34min 1sec (2041 seconds)

Published: Mon Jun 04 2018

Reddit Comments

[u/Hydrotechnics]

Brad T is the man!

[u/thetinygoat]

Kinda don't like his monotone voice

[u/remy_porter]

Step 1: build an IRC bot instead