Slash Commands & Command Handler | Discord JS v13 #2

what is going on fellow web developers my name is tyler potts and in today's tutorial we're going to be continuing our discord js application or bots and in this episode we're going to basically create slash commands we're going to register a slash command and then we're gonna also create a slash command handler that'll actually handle every single command so we don't have to keep registering individual commands so without further ado let's get on with the rest of the video so i wanted to show you guys the actual features we want to actually include in this bot and here they all are here so you can see we have auto roll ranked level voice commands new video graphical user interface which will be a web that'll be a separate build user stats mini games introducing new members members only command so members only commands means that i currently have memberships available on my channel if you go below you'll see a little join button click to see all the membership options i have now members have a special discord role on my server which gives them a special room to get direct access to me now if now what i want to do is i want to create some commands that are helpful to members and also give them some extra benefits so they get some extra perks and extra some extra fun to have in my surfer for being a member and supporting the channel so that's what members only are we don't have showcase commands which actually enough for specific to my uh community and then we have the music play which is quite a highly requested one a lot of people want to know how you create a music player which will join your vc and actually play music for you i'm going to show you that and i'm going to try to also do voice commands back to it so what i did is just a guess we may not be able to pull this off but why do i want a music player and i want to be able to just say next song or ghost next song ghost stop ghost pause ghost do this ghost xy and said so i want to be able to just say to it to do a bunch of different features now there's some other features here but he's going to be for a different video for not just the discord bot so we won't look at those right now so let's minimize this and let's go back to discord so in the previous video um we set up the bot to be able to go ping um he's currently offline so i need to go start him so in here we're just gonna say npm run death again if you haven't seen the previous video i recommend go checking out so you understand what's going on here um but otherwise you don't necessarily need it if you know how to set up a bot and set up a basic command so what we're gonna do now is ping and we should get pong and there you go that's our bot set up and ready to go so in this one i want to set up a ping slash command instead of a message command so what we're going to do is i'm going to go down to hit and i'm just going to remove this client on message.create yes so we don't need that command anymore i just want to get rid of that now before we can use slash commands we actually need to kick our bot from the discord server that's because i actually made a mistake so if we kick ghost just kick him see you later ghost we now need to go back to our developer portal so on our developer portal we go to our application go into oauth2 and if you scroll down you can see we have bots and also commands here so we last time we only invited the bot scope we now need to add applications.commands because that gives us access to slash commands in our server we also want to give them administrator like last time and now we just want to basically copy paste and let him join our surfer so this will allow the developer of ghost ct to create slash commands in the surfer micro brew some local com com butcher com com computer so that's yeah yeah won't let me do that anyway continue administrator cool authorized i am a human and there you go so that is now installed and ready to go he should be back in our server he is i'm just going to add a little bot boys thing to him just so he looks cooler and there we go he's now in and ready to go so now we need to basically install some new variables so let's just stop our bot from running right now and we just need to say npm i and we need to install three different things we need to install discord js forward slash rest we then need to install discord hyphen api hyphen types and then we need to also install our at discord js forward slash builders and i'll explain each one of these what we're adding to the surfer once we actually come around to actually using it so let's just add these and this will now hopefully up today i'm done oh apparently i already had them installed i probably did this earlier so they're already installed for me but once yours are done they should take a couple of minutes and then that should be ready so let's just clear this now and what we're going to do is we're actually going to require these the new things at the top here so we're going to say const rest so we actually need to pull out the rest equal to require and we're just going to say at discord js forward slash rest we then need to get root which is equal to require and we're going to get this from discord api types forward slash fee nine and that's going to give us version nine and that's a route we also need collections from our discord so make sure you have these all imported and once they're all imported it should now start looking like this um oh and there's one more we need we need to get fs which you don't need to install a module because it's built into node but fs is actually the file system it allows us to access files on our computer so once we've done that we now need to actually get underneath client we need to basically get all the commands and we're going to have every single command in its own file so we're going to create a folder called commands and inside here we can say ping.js now this isn't going to work yet we're going to need to add stuff to this but just leave it like that for now just so you can see that's how the structure is going to be so now we need to get every single command we put in here that ends with dot js so we can actually register them across the discords registry rest api to use commands so we need to say const command files is equal to and there you go fs.read sync command so we're getting in the commands folder and then we're going to filter through each file and we're going to get the file which ends every single file that ends with dot js so if it doesn't end with js we won't be getting it because that means it's not the right file if you're using typescript obviously you'll probably want to swap this to ts and surf js but just so you're aware that's what we're doing here so we're going to say const commands is actually going to be equal to an empty array so we're going to need a separate array and then we're going to need to also get our client dot commands and we're going to set that equal to a new collection of commands let's also close little not full screen it please close it and then we're going to loop through our command file so we're going to say for const file also that should be a lowercase in or off command files we're going to say require the files we're going to say command is equal to require the actual command so we're going to get what we export from ping and then we're going to say commands dot push and it's going to be a command dot data dot to json so this will make more sense once we actually fill out this file but we're basically going to be having data in there which we need to convert to json to actually use it but then you say dot client.command.com commands dot data dot name and command so this will allow us to actually call this slash command uh once we actually register it so there we go so this is gonna be the name and the data we need so there we go we've got basically our file our commands and also our array and a bunch of other stuff here which is basically just getting all our files and it's basically this is basically our command handler so here's how it's gonna do we're going to create a file in here which is going to have all the functionality we need and now we need to register it so how do you register it we need to go into client.once and because we only want this to be called once so once it's ready once your bot is live we want it to only call it once um and then what we're going to do is we're going to say const client underscore id is equal to and we could store the client id in our emv file but we actually have it to hand because we actually got the client ready so we're going to say client.user.id and that's going to get our current bots client id which is what we need to actually set up some slash commands for this bot we then want to say const rest which is going to be equal to a new rest and it's going to take in our an object which has version 9 because that's what we're currently using um because up here you see we import version nine so we need to make sure the version nine is set and then when you say dot set token to our discord token which is going to be process dot e and fee dot token like the one below so it's actually going to be our bots token which we got in the last video and we stored in dot e and f now after the rest i'm just gonna say async and i'm going to set it equal to an arrow function and we're basically just going to have to try and catch in here so we're going to first try to basically set the commands and if that fails we'll basically just throw an error so we'll just say if process dot e and fee dot outside process dot m is equal to production so if we set a variable called production that means we're going to set these rest commands or the slash commands globally but you don't want to do that unless it is ready to go because you can get yourself banned from using the slash commands if you keep keep re-registering them so we're just gonna say await rest dot put and then we're gonna say roots dot so we got roots from up here or root that should be roots um and then so we're gonna say roots dot application command and we're gonna pass through the client id and this is how you say it globally so if you want to set this locally to a guild you would also pass through a guild id however we're going to set this globally because this is going to be our live environment i'm going to do a comma and we're just going to say body is equal to commands so what we're doing here is we're getting our our list of commands and we're actually going to set it to our body we'll then just go to console.log sexually regis rep successfully registered commands and i'm just going to put globally here just so we know that one's globally and then we're just gonna say else awaits rest we're gonna do the exact same thing essentially so let's copy this paste this here and instead of global we're gonna say commands locally just or per guild but you locally will do and then instead of just client we're then going to say process dot e and fee dot guild id now i'm going to show you where you get your guild id from and we're going to store it in our env file so underneath that console.log and that should be good i think that's looking right we don't just want to catch this so we want to say catch and if we get an error come through console.error error and that should be well we'll say if error if the error is valid then console.error the error there we go and that is how we actually register our command so that should be set so the ping command is now here so we now need to fill this out so if we we're going to basically get our builder so we're going to say slash command builder i'm going to set this equal to require and it's one of the it's the at discord forward slash builders which we set before we get the slash command builder basically this just makes it easier for us we're then going to get module.exports and this is what we're actually going to export to our um to our bot basically so here is what we're going to send and we're going to set data which will be equal to a new slash command builder which we don't actually need that we we then say dot set name which is going to be ping and then set description which would be pong that's fair and that's all we need to do for our actual data so all we're saying here is basically let's just bring this up a little i know it looks better i don't know we're just going to say data and basically just sets up a new command for us so it says hey there's a new command make sure you actually use it um asynchronous and then we're gonna have an execute which won't be message it will be uh interaction because we're gonna be using slash commands we also need to set a comma here because it's actually inside of a object and then in execute we're just going to say interaction dot reply point um and that's it that's all we need to do for the execution now we can also say content here and we can actually use a lot more here so this is how we set stuff up so you can set the name for it the description you can also set like options aliases and all that sort of thing um but for now we're just gonna set the name and that's that's all we need so let's close that and let's actually run this i believe so if we go here and we say not slash we just bring open our console we could say npm run def and it should now start the bot hopefully ghost is online it did not say successfully registered commands locally let's try save oh i'll tell you what we need to actually call this by putting through the comma here and that and there we go we're actually getting an error here so method not allowed 405 run uh handler requests where is it 405 meters not allowed put of undefined hph oh something's coming through undefined which is fine let's figure this out so this is correct so command start file let's have a look it might be my ping here so we got our new new slash command builder we then have required disk or js builders which is correct module.xbox data set name which is ping set description which is pong async execute which is going to say interaction party interaction reply and pong okay guys so i think i know what is it's inside of the um ready function here inside of rest.put for the actual guild one we actually need to make sure this specifically says application guild commands like that and this should also be commands here it's ready with multiple commands so that should now work let's give this a try and oh i think that's a different error now invalid form body guild undefined it's not a snowflake where is this uh 43.5 so let's go 43 build commands let's just save and see if that fixed the six i don't know if actually refreshed nope cool so client id process i tell you what we're missing our dot ian fee killed so if we go to our dot emv file i will be resetting the token do not worry and guild id we're gonna set that equal to and to get the guild id we need to go into our server right click on your name up here copy id go to our file and hit paste and that should be our actual id close that save this so hopefully now they should run they go registered commands locally and now if we go back to our area you can see ghosts online if we do slash we could say as you can see ping hit enter but nothing's actually going to happen because we need to actually yeah see the interaction failed now let me show you why so if we go back we've set up we've registered the command but we're not actually calling it anyway we're not checking for any sort of interaction so underneath our ready we want to say client dot on and then we're going to say interaction create we're going to make an asynchronous function which will pass through the interaction actually added a side hip i do not need it and that's not one too many and then what we need to do is basically just say if the interaction dot is command is not a command we'll just say return so we'll basically just check in if it's not a command return we're then going to say const command is equal to client dot commands dot get interaction dot command name just like this so what we're saying is we're basically gonna check our we're gonna see if it's a command if it's a slash command then we're gonna check if we actually have this command so we're gonna say if not command return and then finally we'll just say try and catch again and we'll just say await and we're gonna say command dot execute and we will pass through our interaction just like that so just like all yeah just like how we did how we sell it here so we pass through this execute command or this whole thing into our commands and now we're going to get that command and we're going to execute the method we have stored now if that errors or something goes wrong we'll get an error we'll say if error console.error error but then we also need to basically just say await interaction reply an error occurred we actually need to make sure this is so we need to go like this we need to say content let's break this down and then we're going to use something that makes it only visible to you which is called m for there you go m pharrell and ferret i don't know how you pronounce that but basically this option saying it to true means this reply will only be visible to the person who executed the command originally so you won't have to show everyone that there was an error you just showed the user there was an error you can also when you call a command so inside a pin we can also do that here so if we wanted this to only be available to let's say uh you uh so only you can see you could say content is equal to pong um let's break this down as well [Applause] we can then say m m thorough how to i can never remember how you spell it m for all mfm um this one is true and obviously don't forget our select there now if we save here hopefully it should all reload good and now our interaction is done he's online but he did not register the commands obviously you don't need to already we already registered commands maybe that's why it hasn't done it let's see let's go back here dismiss this and then let's go pin pong and now that has been ponged so we now get a ping and a pong now hopefully if we go back here it didn't show us um an error if we just go if we comment this and just say throw a new error command is not implemented there we go there you go and that registered that time now if we go back in we do slash ping an error code while xq in that command although it does not look like it is only oh yeah through the area that's fine that's what we actually asked it to do um but it does not look like this is actually working how it should empha i spelled that wrong should it i don't know how you spell it i added an m early on there we go so you don't need to i spell it wrong um and that was my bad let's also change it from here there's no m there save now hopefully if we go back and we do slash ping or not yep slash ping pong but you can see only you can see this obviously it's errored because we hid the error so let's unhide let's now allow it to happen and just remove that line hit save okay the bot finally restarted that took a minute but now we can go back to here and if we just say slash ping this is only visible to me so no one else can see this command being run but you can see it has been running and it has gave us the pong reply so that's all cool but what if we want to actually say um what if we want a new command so let's say we want another command so let's create a new file let's call it echo.js so what we're going to do with echo.js is let's go into ping and copy everything here and paste it in so we don't have to rewrite it we can then say set name to echo and this will say echoes your input but then we need to say so let's break this down so we can have dot set name dot set description but we can also say dot add string option and this will be whatever we want it to be so we can say well this should just be that and then we can actually say dot set name which will be your message so we'll just say message we can then set description which will be the message to echo and finally we'll just set required required to true because we want we've got to make sure they are putting an input if they do not then we're going to have an issue so that should hopefully be good add string option i actually done this wrong slightly so add string option and this should actually go in here as a command so we're going to say option hyphen and then we can bring it down and say option paste there we go that should now work and there you go that's formatted correctly so we actually get an option we create a arrow function which we then use this option so this will loop through all the string options and you can then basically set name set message description and set the required to true and now this should hopefully be available so what we're going to do is we're going to say content and we're going to say echo or we won't actually say echo instead what we're going to say is interaction oh i spelt interaction wrong i wondered why it looked good interaction dot options dot get string option message and that should or get string sorry not get string option just get string that's what the options for be weird if you kept repeating it and then we get the message so hopefully if we open up our thing and we go back to bot and our reg our command's been registered locally so let's go back and let's go slash echo and you can see here it's asking us for our message so let's say hello world hit enter you can see it's replied with hello world and we can only see this again so there you go guys that is how we build a slash command handler also with our first slash commands implemented and that is that for this tutorial but in the next one guys we're actually going to look at doing an event handler so currently in our bot you can see it's kind of looking a bit ugly now we have a bunch of different functions we have we're getting our commands here we then got this um ready event and we got this interaction create now there's gonna be a lot more um events we need to handle so we're going to basically create an actual handler that will handle all the events we actually need and hopefully then we can actually have a neater looking bot file basically so it just looks near and it's easier to handle so everything will be split off into its own files so guys thank you for watching this video if you enjoyed it don't forget to leave a thumbs up smash that subscribe button and leave a comment if you have any questions if i skip though for saying or i forgot to explain so just ask me in the comments i'm happy to give you an explanation or tell you what you want to know hopefully if i can but guys thank you for watching this video and peace out you

Channel: Tyler Potts

Views: 4,423

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer, discord, v13, slash commands, command handler, commands

Id: JdpJiPlVeaU

Length: 27min 22sec (1642 seconds)

Published: Wed Oct 20 2021