在上一篇中，介紹了Components的作用與使用方法。接下來，我決定將剩下的Modal（表單）、Context Menus（右鍵選單）與Embed（嵌入式訊息）在本篇一次介紹完，這個從零開始的Discord機器人系列就算告一個段落了。

  由於要擴充Modal與Context Menus的功能其實和上一篇Components的思路基本上是一致的，所以這邊就不再重複介紹一遍如何接收事件的部分，只專注於建立這些物件。如果想知道如何擴充，可以返回上一篇跟著做。

1. Modal

  第一個要介紹的是Modal（表單）。Modal和Component不同，它們並不需要依附於回應中，而是使用interaction.showModal ()來顯示建立好的表單。

  正如上一篇所說，Discord.js為建立這些物件提供了方便的Builder，因此我們也有ModalBuilder ()可以使用。以下是一個Modal的範例：

const modal = new ModalBuilder()
    .setCustomId('myModal')
    .setTitle('My Modal');

  如此一來就能建立一個Modal，並幫它設定一個CustomId與Title了。

  但目前這個Modal裡面還沒有欄位，要幫Modal加入欄位其實和上一篇送出Components是一模一樣的。我們需要使用TextInputBuilder ()建立一個文字輸入的欄位，並一樣裝進Action Row內，最後再使用addComponents ()加進去即可。

  需要注意的是，一個Modal裡最多可以放入5個Action Rows，每個Action Row都只能放入一個Text Input，並且目前無法放入Buttons與Select Menus。以下是加入Text Inputs並塞入Modal內的範例：

const favoriteColorInput = new TextInputBuilder ()
    .setCustomId ('favoriteColorInput')
    .setLabel ("What's your favorite color?")
    .setStyle (TextInputStyle.Short);

const hobbiesInput = new TextInputBuilder ()
    .setCustomId ('hobbiesInput')
    .setLabel ("What's some of your favorite hobbies?")
    .setStyle (TextInputStyle.Paragraph);

const firstActionRow = new ActionRowBuilder ()
    .addComponents (favoriteColorInput);
const secondActionRow = new ActionRowBuilder ()
    .addComponents (hobbiesInput);
    
modal.addComponents (firstActionRow, secondActionRow);

  你可以使用setStyle ()設定Text Input的類型，TextInputStyle.Short為單行欄位，而TextInputStyle.Paragraph為多行欄位。如果希望欄位為必填，可以使用setRequired ()將其設為必填。

  最後，當Modal送出之後，可以使用interaction.isModalSubmit ()確認接收到的interaction是否為表單送出，並使用CustomId作為判斷。

2. Context Menus

  接下來要介紹的是Context Menus（右鍵選單）。右鍵選單應該是全部裡面最單純的的功能了，只需要為選項設定一個名稱與類型即可。以下是一個ContextMenuCommandBuilder ()的範例：

const data = new ContextMenuCommandBuilder ()
    .setName ('User Information')
    .setType (ApplicationCommandType.User);

  你可以使用setType ()設定這個右鍵選單要顯示在何處，ApplicationCommandType.User為對成員右鍵時顯示，而ApplicationCommandType.Message為對訊息右鍵時顯示。

  最後，當使用右鍵選單之後，可以使用interaction.isContextMenuCommand ()確認接收到右鍵選單，或者想要比較細一點可以使用isMessageContextMenuCommand()和isUserContextMenuCommand()判斷是對成員右鍵或是對訊息右鍵。

  你可以注意到只有右鍵選單沒有使用到CustomId，取而代之的是使用interaction.targetUser與interaction.targetMember取得目標成員，以及使用interaction.targetMessage取得目標訊息。

3. Embed

  最後一個要介紹的是Embed（嵌入式訊息）。Embed是一種可以透過自訂排版、顯示圖片、加上超連結等一系列功能，方便我們美化並清楚展示資訊的特殊排版。

  以上面的Embed為範例，下面就直接展示程式碼，並一一解釋每個function對應的位置：

const exampleEmbed = new EmbedBuilder()
    .setColor(0x0099FF)
    .setTitle('Some title')
    .setURL('https://discord.js.org/')
    .setAuthor({ name: 'Some name', iconURL: 'https://i.imgur.com/AfFp7pu.png', url: 'https://discord.js.org' })
    .setDescription('Some description here')
    .setThumbnail('https://i.imgur.com/AfFp7pu.png')
    .addFields(
        { name: 'Regular field title', value: 'Some value here' },
        { name: '\u200B', value: '\u200B' },
        { name: 'Inline field title', value: 'Some value here', inline: true },
        { name: 'Inline field title', value: 'Some value here', inline: true },
    )
    .addFields({ name: 'Inline field title', value: 'Some value here', inline: true })
    .setImage('https://i.imgur.com/AfFp7pu.png')
    .setTimestamp()
    .setFooter({ text: 'Some footer text here', iconURL: 'https://i.imgur.com/AfFp7pu.png' });

• setColor ()：顯示於Embed左側邊緣的顏色。
• setTitle ()：Embed的標題。
• setURL ()：點擊標題時會導向的網址。
• setAuthor ()：Embed顯示的作者，可以設定名稱、icon，也能設定點擊作者時導向的網址。
• setDescription ()：顯示關於Embed的描述。
• setThumbnail ()：Embed的縮略圖，會在右上角顯示。
• addFields ()：需要新增欄位時使用，每一個欄位都必須包含name、value這兩個值，如果想要讓一些欄位並排在同一行，可以加上inline這個值。你可能有注意到其中一個name與value為\u200b的欄位，\u200b是一種特殊字元，意思是寬度為0的空格，可以用來作為建立空格欄位使用。
• setImage ()：Embed包含的圖片。
• setTimestamp ()：顯示建立Embed的時間。
• setFooter ()：顯示Embed的Footer。

  實際上使用Embed時，你不需要像上面那樣設定所有的部分，可以根據自己的需要增減設定即可。由於Discord API的限制，Embed的各個欄位都有不同的字數限制，而自訂的欄位也有數量限制，你可以看這裡得到更詳盡的限制。完成建立Embed之後，送出Embed的方式也和送出Component一樣，我們只需要這麼做：

interaction.reply({
    embeds: [embed],
})

  如此一來，機器人的回應底下就會顯示Embed囉！

4. 結語

  到這裡，從零開始的Discord機器人系列就告一個段落了。不過，這裡所介紹的內容還遠遠不是Discord.js的全部。想要知道Discord.js還有什麼功能，或是在製作機器人時有遇到困難，都可以閱讀官方文件，我相信都能找到你需要的資訊的。

  如果你是從第一篇一路看到最後一篇，在這裡說一聲謝謝你！（當然就算不是我也很感謝你）這是我第一次寫這種系列文，如果有遇到問題或想要提供建議，都歡迎聯繫我，謝謝。

  感謝你看到這邊，我們下個系列見。

  到上一篇為止，我們已經弄好了機器人的架構。所以這次的主題不是關於機器人的本體，而是著重於可以讓使用者互動的功能。

  本篇將會介紹Button、Select Menu這兩種Component、如何使用Action Row將Component加入機器人的回應中，並且在使用者互動時機器人能夠接收並回應。

1. 在這之前，什麼是Component？

  MessageComponent，或簡稱為Component，是一系列可以在機器人傳送的訊息中加入的可互動物件，例如在訊息下方顯示可以按的按鈕，或是可以選擇的選單，甚至是表單的輸入框（這部分會在以後的章節提到）。

  在使用按鈕、選單等Components時，會需要使用到一種特別的Component：Action Row。所有其他的Components都需要被裝進Action Row這種作為容器的Component內，最後將它們塞進訊息的components內送出。這部分會在後面提到。

2. Button

  就像SlashCommandBuilder ()一樣，Discord.js為建立Components提供了各自的Builder可以使用。要建立一個Button，當然就有ButtonBuilder ()可以使用囉。以下是一個ButtonBuilder ()的範例：

const button = new ButtonBuilder()
    .setCustomId('submit')
    .setLabel('Click')
    .setStyle(ButtonStyle.Primary);

  每一個Component都需要一個CustomId，當與Component互動觸發InteractionCreate事件時，可以使用CustomId作為判斷。此外，可以為Button設定五種樣式，分別是：

• Primary：最常見的藍色按鈕。
• Secondary：灰色按鈕。
• Success：綠色按鈕。
• Danger：紅色按鈕。
• Link：一樣是灰色按鈕，不過Link的用法較為特殊。

  Link顧名思義是作為超連結使用，當使用Link時，會需要加上一個url，並且不能擁有CustomId，因為點擊Link的按鈕不會觸發InteractionCreate的事件。以下是Link按鈕的範例：

const button = new ButtonBuilder()
    .setLabel('discord.js docs')
    .setURL('https://discord.js.org')
    .setStyle(ButtonStyle.Link);

3. Select Menu

  接下來要介紹的是Select Menu，就像Button一樣，Select Menu也有類似的SelectMenuBuilder ()可以使用。以下是一個Select Menu的範例，我們以範例來解釋用法：

const select = new StringSelectMenuBuilder()
    .setCustomId('starter')
    .setPlaceholder('Make a selection!')
    .addOptions(
        new StringSelectMenuOptionBuilder()
            .setLabel('Bulbasaur')
            .setDescription('The dual-type Grass/Poison Seed Pokémon.')
            .setValue('bulbasaur'),
        new StringSelectMenuOptionBuilder()
            .setLabel('Charmander')
            .setDescription('The Fire-type Lizard Pokémon.')
            .setValue('charmander'),
        new StringSelectMenuOptionBuilder()
            .setLabel('Squirtle')
            .setDescription('The Water-type Tiny Turtle Pokémon.')
            .setValue('squirtle'),
);

  這是一個StringSelectMenuBuilder ()，也就是每一個選項都是一個單純的字串。和Button以及其他Component一樣，我們需要為Select Menu設定一個CustomId，並且我們還可以使用setPlaceholder ()來設定使用者未選擇選項時顯示的文字。

  既然是Select Menu，最重要的當然是選項，在這裡可以使用addOptions ()來將選項加進來，而Discord.js也有提供StringSelectMenuOptionBuilder ()方便我們建立選項。

  在每個選項中，都必須要用setLabel ()設定選項顯示的文字；同時也必須要用setValue ()幫選項設定一個值，這樣機器人才能根據值做出相應的動作。最後，你可以使用setDefault ()將選項設為預設選項。

  除了可自訂選項的StringSelectMenuBuilder ()之外，還有以下幾種Select Menus：

• UserSelectMenuBuilder：選擇使用者
• RoleSelectMenuBuilder：選擇身分組
• MentionableSelectMenuBuilder：選擇使用者或身分組
• ChannelSelectMenuBuilder：選擇頻道

  這幾種Select Menus由於不需要自己設定選項，所以少了addOptions ()可以使用。另外，ChannelSelectMenuBuilder ()可以使用setChannelTypes ()自訂想要顯示在選項的頻道類型。想了解更多關於ChannelType的類型可以點擊這裡。

4. 如何送出Component

  我們已經順利建立Components了，但還只差一步就能送出這些Components。前面有提到，所有其他的Components都需要被裝進Action Row這種作為容器的Component內，最後將它們塞進訊息的components內送出。所以首先要新增一個Action Row，既然Action Row也是一種Component，很理所當然的也有對應的ActionRowBuilder ()可以使用：

const row = new ActionRowBuilder ()
    .addComponents (button);

  這應該是全部裡面最簡單的Component了，只需要建立新的Action Row並使用addComponents ()將其他Components加進來就行。值得注意的是，一個Action Row內可以放入多個Buttons，但只能放入一個Select Menu，並且當放入Select Menu之後就不能再放入Button了。

  而最後要將Action Row加進回應也很簡單，我們只需要這麼做：

interaction.reply({
    content: "你想要機器人回應的內容",
    components: [row],
})

  請注意components放的是一個array，也就是說可以放入多個Action Rows，當機器人送出回應時就會得到多行的Components了。

5. 接收互動並回應

  到目前為止，我們已經順利送出Component了，接下來就要接收這些Component的觸發事件了。首先讓我們回顧一下interactionCreate.js：

module.exports = {
    name: 'interactionCreate',
    async execute (interaction) {
        let reaction;
        if (interaction.isChatInputCommand()) {
            reaction = interaction.client.commands.get(interaction.commandName);
        }

        try {
            if (interaction.replied) return
            reaction.execute(interaction);
        }
        catch (error) {
            console.error(error);
        }
    }
}

  在這裡，我們根據接收到的interaction類型，如果收到的是斜線指令，從client.commands內找到指令並執行相應的動作。而Component其實跟指令的邏輯差不多，同樣是確認類型，找到對應的檔案，並執行相應的動作。首先，我們先將確認類型補上去：

module.exports = {
    name: 'interactionCreate',
    async execute (interaction) {
        let reaction;
        if (interaction.isChatInputCommand()) {
            reaction = interaction.client.commands.get(interaction.commandName);
        }
// ---------------START---------------
        else if (interaction.isButton()) {
            reaction = interaction.client.buttons.get(interaction.customId);
        }
        else if (interaction.isStringSelectMenu()) {
            reaction = interaction.client.selectMenus.get(interaction.customId);
        }
// ----------------END----------------
        try {
            if (interaction.replied) return
            reaction.execute(interaction);
        }
        catch (error) {
            console.error(error);
        }
    }
}

  跟指令不同的是，指令是從interaction.commandName取得名稱，而Component是從interaction.customId取得，這和我們前面所做的設定是一致的。

  接下來，指令的部分是從client.commands內取得的，還記得我們前面有這個東西嗎：

client.commands = getCommands ('./commands');

  我們在這裡可以稍微改寫一下getCommands ()，寫成一個功能差不多的getComponents ()來幫我們取得需要的檔案（當然你也可以用自己的方法取得，這裡為參考）：

function getComponents (dir) {
    let components = new Collection();
    const componentFiles = getFiles(dir);

    for (const componentFile of componentFiles) {
        const component = require("." + componentFile);
        components.set(component.name, component);
    }
    return components;
}

  有了getComponents ()之後，我們就能根據自己的需要擴充類似的Collection，並建立存放這些檔案的資料夾：

client.buttons = getComponents ('./buttons');
client.selectMenus = getComponents ('./selectMenus');

  最後，只要新增每個Component對應的檔案即可。格式與新增指令非常類似，只不過我們只需要execute ()的部分就好。我們以上面的Button為範例：

module.exports = {
    name: "submit",
    async execute (interaction) {
        // 在這裡實作你想要機器人做的事情
    }
}

6. 接下來要做的事情

  到目前為止，我們介紹了Components並實際建立了按鈕與下拉式選單，之後我們可能會把表單（Modal）的部分補完，或是介紹Embeds的使用方法（吧）。

  感謝你看到這邊，我們下次見。

  在上一篇中，我們改善了關於指令部分的架構。而這次我們要接著改善監聽事件的寫法，讓機器人更容易維護與擴充。

1. 一樣從事件本體開始

  首先，我們一樣要先來處理事件本體的部分。

  跟上一篇一樣，到目前為止我們的監聽事件也全都寫在index.js裡。所以接下來我們要做的事情是把事件都拆分成各自的檔案。

  新增一個events資料夾，這個資料夾會用來存放所有事件的檔案。目前我們有ClientReady與InteractionCreate兩種事件，因此我們在events內新增ready.js與interactionCreate.js兩個檔案。

  接下來以ready.js為例，我們一樣使用module.exports來匯出所有需要的東西，只不過內容會和指令有一點點不一樣，完整的檔案會長這樣：

module.exports = {
    name: 'ready',
    once: true,
    async execute (client) {
        console.log (`歡迎登入 ${client.user.username}`);
    }
}

  監聽事件和指令一樣，都是在execute內執行相應的動作。你可能注意到這邊有多一個once，你可以使用client.on ()來註冊事件，或是使用client.once ()來註冊最多只會觸發一次的事件，ClientReady就是屬於這種事件，所以這裡使用once。

  根據這個格式，接下來我們來完成interactionCreate.js：

module.exports = {
    name: 'interactionCreate',
    async execute (interaction) {
        let reaction;
        if (interaction.isChatInputCommand()) {
            reaction = interaction.client.commands.get(interaction.commandName);
        }

        try {
            if (interaction.replied) return
            reaction.execute(interaction);
        }
        catch (error) {
            console.error(error);
        }
    }
}

2. 只剩註冊事件了

  前面我們已經把事件都拆開來了，接下來也和指令一樣，要取得events資料夾內的所有事件並一一註冊。事件相比指令單純許多，所以這邊就不另外使用function處理了。註冊事件的部分會長這樣：

const eventsPath = path.join (__dirname, 'events');
const eventFiles = fs.readdirSync (eventsPath).filter (file => file.endsWith ('.js'));

for (const file of eventFiles) {
    const filePath = path.join (eventsPath, file);
    const event = require (filePath);
    if (event.once) {
        client.once (event.name, (...args) => event.execute (...args));
    }
    else {
        client.on (event.name, (...args) => event.execute (...args));
    }
}

  到這裡，我們的改善工作已經完成，之後如果想要增加監聽的事件，只要在events資料夾內按照上面的格式新增檔案即可。你可以開始運行你的機器人了。

3. 接下來要做的事情

  本系列有關機器人的基礎架構已經完成，到現在已經可以寫出一隻完整的機器人了。所以後續的內容會偏向介紹其他可以玩的功能，例如按鈕、表單、下拉式選單等Components，或是能夠讓機器人的回應更加美觀的Embeds等。

  感謝你看到這邊，我們下次見。

  在上一篇中，我們幫機器人加上斜線指令，目前機器人已經具有接收指令與回覆的能力了。但我相信你一定不滿足於現狀，打算幫機器人加上更多指令。

  然而很快地你發現了問題：一開始加上一兩個指令，好像沒遇到什麼問題，但隨著指令越加越多，漸漸地整個機器人的程式碼變得又臭又長，不僅不利於維護，同時也難以擴充。因此在本文中，我們將會改善機器人的指令架構，讓機器人本體與指令分開，以利於擴充指令。

1. 從指令本體開始

  首先，我們先來處理指令本體的部分。

  到目前為止，我們新增指令的方式都是全部寫在index.js裡。如果只有少少幾個指令的話還行，當指令越來越多時便會難以閱讀與維護。所以接下來我們要把指令都拆分成各自的檔案。

  新增一個commands資料夾，這個資料夾會用來存放所有斜線指令的檔案。目前我們有ping與hello兩個指令，因此我們在commands內新增ping.js與hello.js兩個檔案。

  接下來以ping.js為例，我們要使用module.exports來匯出所有需要的東西，包含SlashCommandBuilder以及接收interactionCreate的事件要執行的動作，完整的檔案會長這樣：

const { SlashCommandBuilder } = require ('discord.js')

module.exports = {
    data: new SlashCommandBuilder()
    .setName ('ping')
    .setDescription('Replies with "Pong!"')
    .setDefaultMemberPermissions('0'),

    async execute (interaction) {
        interaction.reply('pong!')
    }
}

  之後要新增指令時，只要依照和上面SlashCommandBuilder與execute的結構就可以輕易擴充了。讓我們也完成hello.js的部分吧：

const { SlashCommandBuilder } = require ('discord.js')

module.exports = {
    data: new SlashCommandBuilder()
    .setName ('hello')
    .setDescription('Say hello to someone"')
    .setDefaultMemberPermissions('0')
    .addUserOption(option =>
        option
            .setName('user')
            .setDescription('The user to say hi to')
            .setRequired(false)
    ),

    async execute (interaction) {
        let user = interaction.options.getUser('user')
        interaction.reply(`Hello <@${user.id}>!`)
    }
}

2. 註冊指令也要聰明一點

  除了指令之外，我們每新增一個指令時，都會使用client.application.commands.create來註冊指令，但隨著後續指令的增加，每次新增指令都要加上一條註冊指令顯然不是一個好做法。

  我們先來做一點事前準備。由於這次的目標是使用在單一伺服器的機器人，因此我們直接把伺服器的頻道ID寫在config.js內。另外，我們還需要到Discord Developer Portal複製機器人的General Information內的Application ID，這兩個值都是我們之後會用到的。現在的config.js應該會長這樣：

{
    "token": "填入機器人的Token",
    "guildId": "填入伺服器的ID",
    "applicationId": "填入剛剛取得的Application ID",
}

  接下來，讓我們新增一個檔案deploy-commands.js，首先是require：

const fs = require('node:fs')
const path = require('node:path')
const { REST } = require("@discordjs/rest")
const { Routes } = require("discord.js")
const {token, applicationId, guildId} = require('./config.json')

  再來，我們要新增一個function來幫助我們取得檔案：

function getFiles (dir) {
    const files = fs.readdirSync (dir, {
        withFileTypes: true
    })
    let commandFiles = [];

    for (const file of files) {
        if (file.isDirectory()) {
            commandFiles = [
                ...commandFiles,
                ...getFiles(`${dir}/${file.name}`)
            ]
        }
        else if (file.name.endsWith(".js")) {
            commandFiles.push (`${dir}/${file.name}`)
        }
    }
    return commandFiles
}

  這個getFiles的功能是，指定一個資料夾路徑，function會幫我們把指定路徑內所有的JS檔都找出來（包含所有子目錄）。我們接下來要做的事情是，用getFiles來取得commands資料夾內的所有指令並一一註冊。首先是取得指令的資料：

let commands = [];
const commandFiles = getFiles ('./commands');

for (const file of commandFiles) {
    const command = require (file);
    commands.push (command.data.toJSON ());
}

  有了指令的資料，我們就可以開始註冊指令了：

const rest = new REST ({version: '10'}).setToken (token)

rest.put (Routes.applicationGuildCommands (applicationId, guildId), { body: commands })
    .then (() => console.log ('Successfully registered application commands!'))
    .catch (console.error)

  如果你想要讓所有伺服器都能使用指令，只要將Routes.applicationGuildCommands改成Routes.applicationCommands，如此一來就不需要用到guildId。之後當我們新增指令之後，只要執行一次node deploy-commands.js，就能一次註冊所有指令了。

3. 執行的部分也要改寫

  接下來，我們也來改寫一下InteractionCreate的部分，目前應該是長這樣：

client.on(Events.InteractionCreate, interaction => {
    if (!interaction.isChatInputCommand ()) return;
    if (interaction.commandName === "ping") {
        interaction.reply ("Pong!");
    }
    if (interaction.commandName === "hello") {
        const user = interaction.options.getUser ('user');
        interaction.reply (`Hello <@${user.id}>`);
    }
});

  在這裡，我們會根據interaction的commandName來做相對應的動作，但因為我們在上面已經把每個指令要執行的動作都放在各自的execute裡面了，所以我們可以改寫成根據commandName找到相對應的指令並呼叫execute。在這裡我們要使用Discord.js內的Collection實現這一功能。

  Collection其實就是JavaScript內建的Map物件的擴充。簡短說明一下，Map是一種鍵值對（key-value pairs）的物件，也就是Map內每一個key都有其對應的value。所以我們可以利用Collection（或者說Map）這種特性，當我們以commandName為key時，就能得到相對應的指令了。

  首先我們先來建立一個可以生成我們需要的Collection的function吧：

function getCommands (dir) {
    let commands = new Collection ();
    const commandFiles = getFiles (dir);
    
    for (const commandFile of commandFiles) {
        const command = require (commandFile);
        commands.set (command.data.toJSON ().name, command);
    }
    return commands;
}

  在這裡也有使用到getFiles，你可以將getFiles與getCommands都整理到一個額外的JS檔內，之後在其他JS檔內只要require就能重複使用，但礙於篇幅關係這裡就不特別整理了。

  有了getCommands之後就能生成Collection了，我們將它放在client.commands內：

client.commands = getCommands ('./commands');

  接下來是改寫InteractionCreate的部分，首先我們根據interaction.commandName從client.commands內得到相應的command並呼叫其execute就完成了。改寫之後會長這樣：

client.on(Events.InteractionCreate, interaction => {
    let reaction;
    if (interaction.isChatInputCommand()) {
        reaction = client.commands.get(interaction.commandName);
    }

    try {
        if (interaction.replied) return
        reaction.execute(interaction);
    }
    catch (error) {
        console.error(error);
    }
});

  這裡有順便做一些小調整，之前的寫法中，如果取得的interaction不是斜線指令就會直接結束。調整後，如果是斜線指令就會取得相應的reaction。這是為了後續能夠方便擴充，之後也能根據interaction的類型不同（Button、Modal等），到不同的Collection內取得相應的資料並執行。

  最後，你可以開始運作你的機器人了。

4. 接下來要做的事情

  到目前為止，我們改善了機器人的架構，後續如果需要新增或管理斜線指令，都只會在commands資料夾的範圍內操作，不會影響到機器人本體。但接下來還有可以改善的地方，也許你有發現，機器人可以監聽的事件其實有很多，並不只有ClientReady與InteractionCreate，只要是使用者的操作基本上機器人都能監聽。

  因此，接下來我們也會像拆分指令那樣，將監聽事件從機器人本體分離。如此一來，整理機器人架構就算完成了。

  感謝你看到這邊，我們下次見。

  在上一篇中，我們已經順利建立好環境、新增一個機器人帳號，並成功讓它登入了。接下來我們要幫機器人加上重點的功能──斜線指令（Slash Commands）。

  早期的機器人通常是接收成員傳送的訊息，分解訊息的內容，確認成員要執行什麼指令並做出相應的行為。你需要直接送出例如/hello @成員或是!join之類的訊息，但如果沒有看過機器人的文件說明，你根本無從得知機器人有什麼指令可以使用。

  於是Discord在2022年9月推出了全新的斜線指令作為互動的新標準，只要輸入「/」就可以直接瀏覽能夠使用的指令，使用者可以直接點擊命令並輸入參數來使用，相比傳統的文字指令更加一目了然。

  在本文中，我們將一步步幫機器人加上斜線指令，等到熟悉之後，你也可以幫機器人加上各式各樣的指令囉！

1. 新增一個斜線指令

  在discord.js v14中，要新增一個斜線指令，我們可以使用SlashCommandBuilder來幫助我們完成。首先先在最上面的require中加入SlashCommandBuilder：

// ---------------START---------------
const { Client, Events, GatewayIntentBits } = require ('discord.js');
// ----------------END----------------

  接下來，我們在ClientReady這邊新增一個SlashCommandBuilder來建立新的斜線指令。

client.once (Events.ClientReady, c => {
    console.log (`歡迎登入 ${c.user.username}`);
// ---------------START---------------
    new SlashCommandBuilder ()
        .setName ('ping')
        .setDescription ('Replies with "Pong!"');
// ----------------END----------------
});

  接著，我們要讓機器人監聽InteractionCreate的事件。不管是觸發斜線指令、送出互動視窗、點擊按鈕、或是使用下拉選單，全部都是屬於InteractionCreate的事件。我們來新增以下內容：

// ---------------START---------------
client.on(Events.InteractionCreate, interaction => {
    if (!interaction.isChatInputCommand ()) return;
    if (interaction.commandName === "ping") {
        interaction.reply ("Pong!");
    }
});
// ----------------END----------------

  有人使用了斜線指令等一系列動作觸發InteractionCreate的事件後，會得到一個interaction，當我們根據指令完成工作後，可以使用interaction的reply ()來回應使用者。

  特別需要提到的是，interaction的reply ()只有3秒，超過時間就會被當作沒有回應。如果確定回應時間會超過3秒的話，有幾種方法可以解決：

1. 先送出一個reply ()，等動作完成後再使用editReply ()編輯該回應。
2. 使用deferReply ()，Discord會幫你傳送一個「機器人正在思考」的訊息，並且延長到15分鐘內都可以再編輯回應。
3. 先送出一個reply ()，等動作完成後再使用followUp ()傳送第二則回應。當你使用deferReply ()再使用followUp ()，此時並不會傳送第二則回應，而是直接編輯「機器人正在思考」的訊息。

  我們新增了斜線指令，並且機器人登入之後會開始監聽InteractionCreate事件並做出回應，也許這時候你會想試著使用看看斜線指令了。但你實際上到伺服器輸入「/」之後，並沒有我們剛剛新增的斜線指令可以使用，這是為什麼呢？

  除了在這裡新增斜線指令之外，我們還必須另外向Discord註冊斜線指令，這樣Discord才知道我們的機器人身上有什麼指令可以使用。想要註冊斜線指令的話，我們可以這麼做：

client.once (Events.ClientReady, c => {
    console.log (`歡迎登入 ${c.user.username}`);

    const ping = new SlashCommandBuilder ()
        .setName ('ping')
        .setDescription ('Replies with "Pong!"');
// ---------------START---------------
    client.application.commands.create (ping, "填入伺服器的ID");
// ----------------END----------------
});

  如此一來，我們就成功註冊了一個在伺服器內可以使用的斜線指令，你可以在伺服器內使用剛剛新增的指令了！

  （請注意這裡將指令註冊給指定伺服器，在其他伺服器內是無法使用這個指令的，後續會說明如何註冊指令讓所有伺服器都能使用。）

2. 再新增一個斜線指令

  現在機器人有了第一個指令，就讓我們再新增一個新的指令吧。這次我們來新增一個帶有參數的指令，讓機器人可以獲得成員輸入的參數並加以利用：

client.once (Events.ClientReady, c => {
    console.log (`歡迎登入 ${c.user.username}`);

    const ping = new SlashCommandBuilder ()
        .setName ('ping')
        .setDescription ('Replies with "Pong!"');
// ---------------START---------------
    const hello = new SlashCommandBuilder ()
        .setName ('hello')
        .setDescription ('Say hello to someone!')
        .addUserOption (option =>
            option
                .setName ('user')
                .setDescription ('The user you want to say hi to')
                .setRequired (true)
        );
// ----------------END----------------

    client.application.commands.create (ping, "填入伺服器的ID");
// ---------------START---------------
    client.application.commands.create (hello, "填入伺服器的ID");
// ----------------END----------------
});

  在新的指令中加入了新的部分addUserOption，它的作用是可以新增一個讓使用者輸入成員進去的參數。除了成員之外，Discord共提供了以下類型的參數：

• addSubcommand 子命令
• addSubcommandGroup 子命令群組
• addStringOption 字串
• addIntegerOption 整數
• addBooleanOption 布林值
• addUserOption @成員 或 成員的ID
• addChannelOption #頻道 或 頻道的ID
• addRoleOption @身分組 或 身分組的ID
• addMentionableOption @成員/@身分組 或 成員/身分組的ID
• addNumberOption 浮點數
• addAttachmentOption 附加檔案

  如果需要擴充參數，我們只要根據需要填入的參數，在最後面插入相對應的方法即可。你可以看到參數本身也可以設定名稱與說明，在我們剛剛新增的指令中，填入成員的參數使用了setRequired 將參數設為必填，如果使用者沒有填入內容將無法送出指令。由於指令與每一種參數所包含的方法太多，這邊就不一一列舉，如果有需要可以閱讀官方文件確認。

  子命令與子命令群組可以讓你將同一類的命令包成一個群組。例如Ban人與踢人指令，可以包成/manage指令底下的user子命令群組的Ban子命令與kick子命令，之後當你想尋找管理使用者相關的指令時，只要輸入/manage user便會列出底下所有的子命令，是不是很方便呢！

  不好意思，扯得有點遠了。讓我們繼續把機器人接收斜線指令後回應的部分完成吧：

client.on(Events.InteractionCreate, interaction => {
    if (!interaction.isChatInputCommand ()) return;
    if (interaction.commandName === "ping") {
        interaction.reply ("Pong!");
    }
// ---------------START---------------
    if (interaction.commandName === "hello") {
        const user = interaction.options.getUser ('user');
        interaction.reply (`Hello <@${user.id}>`);
    }
// ----------------END----------------
});

  當使用了帶有參數的指令，我們可以使用interaction.options內的一系列get方法去取得那些參數的值。例如我們的指令所包含的參數是填入成員，因此我們使用getUser來接收，你可以看到getUser的引數是填入我們剛剛幫option設定的名稱，這樣我們就能抓到想要的參數了。

3. 接下來要做的事情

  到目前為止，我們幫機器人新增了斜線指令，並且使用者可以傳遞參數給機器人使用，基本的機器人功能已經算是完成了。但你可能會發現，如果繼續擴充機器人的指令，現在的寫法將會變得很難維護。接下來我們會改善機器人的架構，讓你可以方便擴充與維護機器人的功能。

  感謝你看到這邊，我們下次見。

  最近剛好有建立Discord機器人的需求，由於Discord.js目前已經更新到了v14，並且Discord後續推出斜線指令（Slash Commands）來取代以前較常出現的Prefix指令，加上以前寫的Discord機器人不僅不好擴充，也沒有好的架構，因此決定從零開始學習Discord.js v14並建立一支機器人。

1. 環境建立

  首先我們需要下載Node.js並安裝到電腦上。新建一個資料夾作為Discord機器人程式碼存放的位置，開啟Terminal在此資料夾內使用指令npm init並按照提示完成操作。

  完成後我們就可以來下載discord.js了，在Terminal內輸入npm install discord.js並等他跑完。完成之後資料夾內應該會出現三個新東西，分別是：

• node_modules：所有下載的package存放的位置。
• package.json：用來描述目前項目的基本資訊、所依賴的package。
• package-lock.json：用來記錄所有package的具體來源與版本號。

  如果你覺得很複雜也沒關係，我們目前只要關注package.json就好了。當你打開package.json時，除了基本資訊之外，應該會看到這一項：

"main": "index.js"

  這是我們Discord機器人的進入點，所以我們要新建一個index.js。新建完成之後，目前你可以先輸入永遠的經典做為測試：

// ---------------START---------------
console.log("Hello World!");
// ----------------END----------------

  完成之後，你可以嘗試在Terminal執行node .或node index.js，如果你能順利看到Hello World，代表我們的環境已經建立完成了。

2. 新增機器人帳號

  環境建立好了之後，最重要的當然是跟Discord新增一個機器人帳號。當然我們並不需要為了機器人額外辦一個帳號，只需要在Discord Developer Portal建立一個新的Application即可。

  在Application內點擊右上角的New Application，隨意輸入Application的名稱並按下確定。建立完成之後，進入左邊的Bot並點擊Add Bot，如此一來我們就建立好了機器人。

  你可以幫機器人取名、更換頭貼，更重要的是將Previleged Gateway Intents底下的三個選項都打開，這樣機器人的設定就告一段落了。# 3. 讓機器人可以登入接下來，我們需要把我們會用到的一些關於機器人的參數都存起來。在機器人的資料夾內新增一個config.json，並輸入以下內容：

{
    "token": "在上面Application的Bot內生成一個Token，並在這裡貼上機器人的Token",
}

  接下來我們就能替index.js寫一些東西了。輸入以下內容：

// ---------------START---------------
const { token } = require ('./config.json');
const { Client, Events, GatewayIntentBits } = require ('discord.js');

const client = new Client ({intents: [GatewayIntentBits.Guilds]});
client.once (Events.ClientReady, c => {
    console.log (`歡迎登入 ${c.user.username}`);
});
client.login (token);
// ----------------END----------------

  這邊做的事情很簡單，新增一個client，監聽ClientReady的事件（當我們的機器人成功登入之後，Discord會觸發ClientReady的事件給機器人，機器人接收到便可以做相應的行動。目前我們只讓他印一個log作為通知），然後登入client。

  最後將機器人邀請到伺服器內，並在Terminal執行node .，只要看到機器人上線並在Terminal中看到log，代表我們的機器人已經成功登入囉！

4. 接下來要做的事情

  到目前為止，我們已經成功建立一隻機器人，並且能夠讓它上線了。接下來我們要做的事情就是新增斜線指令，但由於這部分篇幅會比較長，因此留到之後再詳細說明。

  除了斜線指令之外，後續也會說明如何新增互動視窗（Modal）與按鈕（Button）以增加更多互動性，也會將機器人整理成可以方便擴充的狀態。感謝你看到這邊，我們下次見。