# Create First Slash Command

ไปที่ `server.js` เพิ่มโค้ดเหล่านี้กัน

```javascript
// server.js
// Import dependency
const { ..., SlashCommandBuilder } = require('@discordjs/builders');
const { REST } = require('@discordjs/rest');

// Create new slash command
const commands = [
   new SlashCommandBuilder()
       .setName('ping')
       .setDescription('Replies with Pong!')
 ].map(command => command.toJSON());
 
// Register command
const rest = new REST({ version: '10' }).setToken(process.env.token);
rest.put(Routes.applicationGuildCommands(
    process.env.clientId, 
    process.env.guildId
), { body: commands })
    .then(() => console.log('Successfully registered application commands.'))
    .catch(console.error);

// Reply command
client.on('interactionCreate', async interaction => {
   if (!interaction.isChatInputCommand()) return;
   const { commandName } = interaction;

   if (commandName === 'ping') {
       const timeTaken = Date.now() - interaction.createdTimestamp;
       await interaction.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
   }
});

```

* `SlashCommandBuilder` ใช้เพิ่ม command
* `Routes` กับ `REST` ใช้ register command ของเรา
* สร้าง slash command โดยสร้าง `SlashCommandBuilder()` ขึ้นมา ใส่ชื่อ และ description ของคำสั่งนี้ว่าใช้ทำอะไร แล้วเอาทุกคำสั่งไป map เป็น json ในที่นี้ชื่อคำสั่งว่า ping
* register command โดยการสร้าง `REST` ขึ้นมา แล้วใส่ token เข้าไป จากนั้นให้ put คำสั่งทั้งหมดไปยัง server ของ Discord (ทำให้ตอนที่บอทไม่ online เรายังเห็น command นั้นอยู่นั่นเอง!)
* จัดการ reply command โดยดึงชื่อ command จาก interaction แล้วมา compare ถ้าเป็นคำสั่ง ping ให้เอาเวลาตอนนี้หักกับตอนพิมพ์คำสั่ง แล้ว return เป็น text กลับไป

จากนั้นพิมพ์คำสั่งนี้ เพื่อ deploy ขึ้นไป

```
npm run dev
```

<figure><img src="https://lh7-rt.googleusercontent.com/slidesz/AGV_vUdsOEGibBojIfQBBj3DVTSOWJwkBQZUnMhe2MYEuqsM01_T8l2rll3F-_IvFrqD5x52SIsEqIN4ZPdVUyPXxfSWdkVmJD3GcyitY5uOWO_JoTHv45lEwCpSFF4amhUaUNXNH7j7=s2048?key=zouhIV8Fq_fCPxgqccmT5w" alt=""><figcaption></figcaption></figure>

เมื่อ deploy เรียบร้อยแล้วกลับไปดูที่ server พบว่าคำสั่งนี้มีให้เราใช้งานแล้ว

<figure><img src="https://3795885741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnrRjTHjqSPyP5ScepCIU%2Fuploads%2FsWH4XVmzRkvXoGP2BILr%2FScreenshot%202567-12-12%20at%2021.56.19.png?alt=media&#x26;token=9ac635de-238c-45c4-8df8-7c2141c145e1" alt=""><figcaption></figcaption></figure>

ผลที่ได้

<figure><img src="https://3795885741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnrRjTHjqSPyP5ScepCIU%2Fuploads%2FKNfDNgqPf2j7Z6bKGRxf%2FScreenshot%202567-12-12%20at%2021.58.58.png?alt=media&#x26;token=7bf5ff48-b4f6-437c-b185-7b3b261d57e5" alt=""><figcaption></figcaption></figure>

เพิ่มเติม ถ้าบางครั้งเราต้องรอผลลัพธ์มากกว่า 3 วินาที ใช้คำสั่งนี้ได้นะ user จะได้ไม่รอนานเกินไป

```javascript
// waiting response long time
await interaction.deferReply();
await interaction.editReply(`Pong! This message had a latency of ${timeTaken}ms.`;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mikkicoding.mikkipastel.com/discord-bot-hands-on/workshop/create-first-slash-command.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.