Discord.JS v13 - Slash Commands [Ep. 4]

hey everyone this is alex from warnoffkeys.com and welcome to my fourth discord js version 13 tutorial in this video we're going to be taking a basic look at slash commands and while we won't be making our own slash command handler in this video i'm just going to be showing you all the basic concepts behind slash commands so you have a better idea of how to incorporate them into your own command handler or into your bot in general so before we get started i just want to quickly mention that knowing javascript is a prerequisite to following this video and this entire series but if you don't know javascript don't worry i have a complete javascript course and the first hour is on youtube free so you can check that out in the link down below and i want to first make sure that my bot is compiling everything and running correctly now i added a script called dev that runs nodemon index.ts and nodemon will actually use ts node which is the software we looked at in the first video so if you're using typescript you can go ahead and add this in here and if you're using javascript you can simply change ts to js and everything should work as expected so i'm now going to run this with npm run dev we now see it starting ts node index.ts so this is going to automatically check to see if any of our ts files changed and if so it's then going to automatically restart upon i can use ctrl tilde which is the key below your escape key at the top left or command tilde if you're on mac to go ahead and toggle the console on or off this will still keep the process running but this way we have more of our screen to look at when we're actually programming so let's go ahead and actually make our first slash command and there are two types of slash commands you should be aware of one is a guild based slash command which are registered instantly and this is highly encouraged to use when developing or testing your slash commands that's because you can specify them to only one specific test guild and they are registered instantly we also have a global slash commands which are registered to every guild or every server that your bot is in and this might take up to an hour to be visible to all servers so with that said it's highly encouraged when developing you only use guild commands until you know everything was 100 working then you can switch over to global commands so i'm going to go over to my discord and i'm going to copy my testing server by right clicking and clicking copy id if you don't see this option you will have to enable developer mode on your discord account i can then go back and i'm going to create a constant here called guild id and set it equal to this string right here i could then say const guild equals client dot guilds dot cash dot get we could then pass in the guild id and then i'm going to create a variable which we will modify so i'll use lut here and we'll call those commands so commands is going to hold the application command manager for either our guild or our entire application so the guild command manager will handle all the commands for a specific guild in this case this test guild right here and the global command manager will handle all global commands so we need to fetch the specific one depending on if this guild actually exists so i can say if guild then i can say commands equals guild dot commands we can then have an else statement here and i can then say commands equals client dot application dot command so either way we now have a command manager where we can actually register and use our slash commands let's go ahead and register a ping command i can say commands dot create this will pass in an object and there's a couple pieces of information we need to pass in for example the name which is ping we also have a description which can be basically replies with pong and then if i save this our bot should automatically restart as we see right here once we see the bot is ready we can go into discord and if i do forward slash ping we now see it right here it says reply so if i run this it's actually going to fail because we're not listening for whenever this actually happens so we see this interaction failed we can dismiss this message and going back we now have to listen for whenever people actually run this command to do that we have to listen for the interaction create event on our client so outside of our ready callback here i can say client dot on interaction create this is going to have a callback here and i'm going to make this an asynchronous function we then have one parameter which is our interaction and then within here we first need to make sure that this interaction is going to actually be a command there are multiple types of interactions and we'll dive into different types in future videos but for now we just need to make sure we're handling a command so i can say if not interaction dot is command i can then return so now we need to access a few different pieces of information from this interaction so i can say const empty brackets equals interaction we're going to be destructuring some properties if i use control space we now see all the options we have the most important one for now will be command's name and we will also need options which we will access later on but for the ping command we just need access to command name that's because the interaction create event is fired every single time any interaction is interacted with and so this means any command or any other type of interaction and so we need to specify based off the command name how we want to handle each individual command so i can say if command name is exactly equal to ping i can then say interaction dot reply we can pass in an object here where we have a few different options the first one will be content which will just simply say pong and then we can also pass in ephemeral which is basically going to be if only the user who ran the command can see the reply now if i save this and i go back to discord i can do forward slash ping and it says pong and it says only you can see this message dismissed message so if i go back and i comment this out and i save it i can then go back to discord and if i do forward slash ping again i think our bot's still restarting so let me try that one more time here we see pong and now anyone in this channel will be able to see this going back i prefer to have this enabled it's up to you though and now we have a very basic ping pong command now let's look at a very simple add command which is going to allow us to use different options or arguments on our command so going up here i could say commands dot create we can pass in the name which is add the description which would be adds to numbers and then we can pass in options which would be an array of objects and each one is going to be various arguments that we can add in device control space we're going to see all the options the description name and type are required choices options and required are optional so let's start off with the name the first one will be num1 the description is going to be the first number and then required will be true we also need to specify a type so i can say type and there are different types and different numbers that correspond to each type however adding in different numbers like this makes it harder to understand what each one is doing so we can actually access each individual type that we want based off of its name to do this keep note of what you named your discord import mine is discord.js so if i go down here i can say discord js dot constants dot application command option types dot and now we have all these options here boolean channel integer mentionable number we have a bunch of other options we're looking for number because obviously this is an add command and we're looking to add in two numbers so then i can add in another object here where the name will be num2 we have a description which would be the second number and i just realized i said numbers before okay let's fix that and we also have required is true and type it'll be the same thing discord.js dot constants dot application command option types dot number now we're not listening for anything on the interaction yet but let's go ahead and see if this was actually registered if i save this i could go back into discord i could do forward slash add and here we see it adds two numbers with num1 and num2 now we see two of them here this one says the actual word number or this one says num1 so this is the one we just created and this is one that i created when i was writing the article for this video which can be found in the description down below so i'm going to click on this and now if i add in any type of non-number for example the word test and we now see num1 becomes red and this isn't going to work even if number two is a number i press this discord shakes a lot and it says input a valid number so now i can enter 20 and if i run this it's not going to work because we're not listening for it but now the command is actually working so i can dismiss this and now we can actually listen for whenever this is ran so i can say else if command's name is exactly equal to add we can first gain access to the num1 and num2 options and that's why we imported options right here earlier so i can say const num1 equals options dot git number we can pass in the name in this case num1 and then i can say const num2 equals options dot get number and we can pass in num2 i can now say interaction dot reply we can pass in our content which i'll use a template literal here and i'll say the sum is and then we'll say num1 plus num2 now we're getting some errors here if i hover over this it's going to say object is possibly null if i hover over git number we see that it's returning either number or null so in the case where null is returned we want to have a fallback or default value so we can simply just say or zero now technically these are required as we say right here if you're using typescript you could add in explanation points at the end and this will tell typescript that you know for sure something is going to actually be here so because i'm using typescript i will use this instead and i'm only doing this because required is true therefore these have to be there if the commands actually running and so we know for sure that these are not going to be null now i'm going to make sure that only we can see this reply and if i save this and i go back here i can now say add 50 and 50 and it now says the sum is 100. so this is one example of how you can use options or arguments within your slash commands the next thing i want to show you is how you can defer replies because by default you only have three seconds to reply but in some use cases you may need more time than that to gather the necessary information to provide a meaningful reply so we can use deferring replies to solve this problem i can say await interaction dot defer reply and if we do want ephemeral to be true we have to pass it in here so now i'm going to simulate a five second delay which is obviously more than the three seconds we get by default to do this i can say await new promise resolve and then in the callback i'm going to immediately call set timeout for resolve and then i'm going to make this last five seconds so we can say 5000. and so this is not going to correctly work because we need three seconds to reply now because we are using defer reply just a normal reply here will not work we need to say edit reply instead and so now this becomes a problem because we typically pass a sin right here which will make more sense here in a few seconds so if i get rid of this and i save our code i can then go back into discord and i can do forward slash add 50 and 50. it now says one of key's tutorial is thinking and then after five seconds it says the sum is 100 and this is why we had to tell it to only show it to the user here because there is an initial reply saying that our bot is thinking and then we edit that later on now keep in mind that this does return a promise as we see right here so if you do have code after it you might want to add in a weight here so these are all the basics of slash commands if i scroll up and if i were to delete this guild id right here this would then register using our application so therefore these will be global commands with that said it'll take up to an hour for these to register so make sure everything is working using your testing guild before you actually make this a global command in the next video i'm going to show you a much easier way to create and manage all your slash commands using a pre-built command handler that way we don't have to have a bunch of excess code in here and makes everything more streamlined thanks for watching the video if you want access to video source code as well as early access to future tutorials consider clicking on the join button down below the video to support the channel

Channel: Worn Off Keys

Views: 35,955

Keywords: discord bot tutorial, discord.js tutorial, discord.js, how to make a discord bot, how to code a discord bot, code your own discord bot, how to program a discord bot, creating a discord bot, discord.js v13, discord bot tutorial 2021, discord bot tutorial for beginners, discord bot tutorial javascript, discord bot tutorial node js, worn off keys

Id: pXehoXnFxPM

Length: 13min 27sec (807 seconds)

Published: Fri Sep 03 2021