---
title: 網頁組第二次BOT討論
tags : 網頁組, BOT
image:
---

# 網頁組第二次BOT討論(20220806)

## 今日討論內容

button、select menu、embed

### 張恩齊

嵌入式訊息
可以使用EmbedBuilder()建造
之後可以當做send()的參數送出

---

可以使用 [discord_embed-builder](https://autocode.com/tools/discord/embed-builder/)
製作

---

:::warning
!注意
BUTTOM Select menus 都屬於ActionRow
一則訊息最多只能包含5個ActionRow
都可以用ActionRowBuilder()製作
- SelectMenus 要再用SelectMenuBuilder()
- BUTTOM 則是要再用 ButtonBuilder()製作
:::

---

### 黃俊翔

#### 按鈕

- 建立

const row_button = new ActionRowBuilder().addComponents(
    new ButtonBuilder()
        .setCustomId("ok")
        .setLabel("ok")
        .setStyle(ButtonStyle.Primary)
        .setEmoji("😀")
);

- 接收

client.on("interactionCreate", (interaction) => {
    if (!interaction.isButton()) return;
    if (interaction.component.customId === "ok") {
        interaction.update({
            content: interaction.message.content + "(clicked)",
            components: [],
        });
    }
});

- 效果
點擊前
點擊後

#### 選單
- 建立

const row_select_menu = new ActionRowBuilder().addComponents(
    new SelectMenuBuilder()
        .setCustomId("information")
        .setPlaceholder("nothing selected")
        .addOptions(
            {
                label: "discord.js",
                description: "show the hyperlink of discord.js",
                value: "dscordjs",
            },
            {
                label: "discord developer",
                description: "show the hyperlink of discord developer",
                value: "developer",
            }
        )
);

- 接收

client.on("interactionCreate", (interaction) => {
  if (!interaction.isSelectMenu()) return;
  if (interaction.component.customId === "information") {
    switch (interaction.values[0]) {
      case "dscordjs":
        const embed_js = new EmbedBuilder()
          .setColor(0x29eaff)
          .setTitle("discord.js")
          .setURL("https://discord.js.org/")
          .setDescription("Discord.js is good")
          .setImage("https://i.imgur.com/AfFp7pu.png");
        interaction.update({
          components: [],
          embeds: [embed_js],
        });
        break;
      case "developer":
        const embed_de = new EmbedBuilder()
          .setColor(0x29eaff)
          .setTitle("discord developer")
          .setURL("https://discord.com/developers/applications")
          .setDescription("Discord developer is good")
          .setImage("https://i.imgur.com/UoDcjZP.png");
        interaction.update({
          components: [],
          embeds: [embed_de],
        });
        break;
    }
  }
});

- 效果
選擇前
選擇後

---
## 下週主題

---

## 其他