---
# System prepended metadata

title: 網頁組第二次BOT討論
tags: [' BOT', 網頁組]

---

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

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

## 今日討論內容

button、select menu、embed

### 張恩齊

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

---

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


---

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



---

### 黃俊翔

#### 按鈕

- 建立
```javascript=
const row_button = new ActionRowBuilder().addComponents(
    new ButtonBuilder()
        .setCustomId("ok")
        .setLabel("ok")
        .setStyle(ButtonStyle.Primary)
        .setEmoji("😀")
);
```
- 接收
```javascript=
client.on("interactionCreate", (interaction) => {
    if (!interaction.isButton()) return;
    if (interaction.component.customId === "ok") {
        interaction.update({
            content: interaction.message.content + "(clicked)",
            components: [],
        });
    }
});
```

- 效果
點擊前
![](https://i.imgur.com/1MqyYNl.png)
點擊後
![](https://i.imgur.com/goUlC8E.png)



#### 選單
- 建立
```javascript=
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",
            }
        )
);
```

- 接收

```javascript=
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;
    }
  }
});
```

- 效果
選擇前
![](https://i.imgur.com/SiaLCxQ.png)
選擇後
![](https://i.imgur.com/UnPsrrH.png)

---
## 下週主題

---

## 其他