Discord bot tutorial

devloping
, ,

如何製作Discord機器人

:mega: 如何開始？

步驟一：

先到這裡下載範本喔！(github下載應該會ㄅ？
大致講一下，範例裡包括各個所需要用到的資料。當然也包括今天主角，最重要的資料夾—==node_modules==:rocket:

步驟二：

下載完資料夾解壓縮後應該是沒辦法啟動喇~所以呢、我們需要東西來運行我們的JS檔。
這時…NodeJS就被用上了！
NodeJS是啥呢？根據萌娘…維基百科可以得知以下資訊

Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台 JavaScript 執行環境。Node.js 由 Node.js Foundation（已與 JS Foundation 合併為 OpenJS Foundation）持有和維護，亦為 Linux 基金會的專案。Node.js採用Google開發的V8執行程式碼，使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高效能，可最佳化應用程式的傳輸量和規模。這些技術通常用於資料密集的即時應用程式。
Node.js大部分基本模組都用JavaScript語言編寫。在Node.js出現之前，JavaScript通常作為用戶端程式設計語言使用，以JavaScript寫出的程式常在用戶的瀏覽器上執行。Node.js的出現使JavaScript也能用於伺服器端編程。Node.js含有一系列內置模組，使得程式可以脫離Apache HTTP Server或IIS，作為獨立伺服器執行。[color=#497399]

目前，Node.js已被IBM、Microsoft、Yahoo!、Walmart、Groupon、SAP、LinkedIn、Rakuten、PayPal、Voxer、GoDaddy…等企業採用。

我們今天所使用的資料夾即為其中的discord.js資料(包)夾第11.6.3版本。
附錄：

  1. windows安裝Node.js—[載點]
  2. git bash—載點
  3. ubuntu安裝discord.js指令
    $sudo npm install discord.js@11.6.3 --save
    :::info

**==注意==**：ubuntu安裝node及npm。
$curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$sudo apt install nodejs
$node --version
$npm --version
:::

步驟三：

開始動手吧！
資料夾內應該有4個檔案和1個資料夾ㄅ，而node_modules應該不必再說明。
接下來分別是bot.js package.json package-lock.json和settings.json
說明：

名稱 功能
bot.js 主程式(主角)
package.json 向後相容用
package-lock.json 紀錄版本用
settings.json 機器人的各種設定，等於config
下面會分別講bot.js及settings.json

更多關於package.json及package-lock.json的資訊可參考這裡[color=#497399]

:pencil: 實作囉！

接下來會很神奇喔，要開始寫js囉！要認真聽喔！

準備：

用你有的文字編輯器打開bot.js內建應該長這樣ㄅ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const {Client, RichEmbed, Discord} = require('discord.js') ;
const client = new Client ;
const settings = require('./settings.json') ;

client.on('ready',()=>{
    console.log(`${client.user.tag} 準備好上戰場惹！`) ;
}) ;

client.on('message',msg=>{
    if(msg.content.startsWith(settings.prefix+'test')){
        msg.channel.send('test committed') ;
    }
}) ;

client.login(settings.token) ;
  • settings.json預設：
    1
    2
    3
    4
    {
        "token":"",
        "prefix":""
    }
    開始囉！

說明一 ｢函式庫｣：

1
2
3
const {Client, RichEmbed, Discord} = require('discord.js') ;
const client = new Client ;
const settings = require('./settings.json') ;

上面這三行在說啥呢？
const是js宣告時在用的，類似於c++中的int、char…etc，但他的宣告更多元。從只是宣告一個小小的變數到引入資料都會用到它。
而上面這幾行便是其中的引入(函式庫)的功能。

細說：

第一行：
1
const {Client, RichEmbed, Discord} = require('discord.js') ;

這行是在說接下來會使用到的函示功能，且這些函式可以在discord.js中被找到。而其中的discord.js則是我們的node_modules。
其實這邊很像c++中的：

1
#include<iostream>

這種概念。

第二行：
1
const client = new Client ;

這行則是在宣告之後主程式會用到的client這個詞，而它即是上一行引入的Client。

第三行：
1
const settings = require('./settings.json') ;

這行的功用很重要！主要是配合下面的：

1
client.login(settings.token) ;

引入其指令前綴和機器人代碼，並說明其來源為當前資料夾內(和bot.js同一層)的settings.json檔案。順便說明一下，client.login() 這行是整個機器人運行的核心，也就是連線到Discord上需要的那一行指令。

說明二 ｢開機｣：

1
2
3
client.on('ready',()=>{
    console.log(`${client.user.tag} 準備好上戰場惹！`) ;
}) ;

欸欸欸？這三行又是啥鬼？
其實它很單純，它只是一個在機器人上線(開機)時會被啟用的程式罷了。
剛剛宣告的client在這裡被用上了，後面加的 on() 參數即為｢開機｣(啟動)時會做的動作。
裡面的 ‘ready’,()=>{} 即是表示discord內，機器人啟動(準備)完成時要做的。
而 ‘ready’ 後的 () 放空白則是因為不須宣告任何變數來表示｢啟動｣這個事件。
最後，console.log() 則是輸出到terminal。括弧內放字串。

說明三 ｢主程式｣：

1
2
3
4
5
client.on('message',msg=>{
    if(msg.content.startsWith(settings.prefix+'test')){
        msg.channel.send('test committed') ;
    }
}) ;

欸~~ 你484出現過啊 client.on()。
是的！它又出現了，為何呢？
前面講過這個 client.on() 是指機器人在線上時會執行的程式。因此，它作為主程式的母體也是應該的。
但是，今天裡面換成了 ‘message’ ，是啥意思呢？
意思是現在這個程式塊執行的的是｢訊息｣這塊，而現在我們將 message 這個功能簡化宣告為 msg ，因此才會在逗號後有 msg 這個字。

說明四 ｢回答我啊｣：

1
2
3
if(msg.content.startsWith(settings.prefix+'test')){
    msg.channel.send('test committed') ;
}

喵喵喵~它是做啥的R？好像是…判斷？
是滴！它就是一個判斷式，但為何需要它呢？
剛剛說過，client.on() 是一直執行的，因此，我們需要一個判斷式來判斷用戶是否有｢發言｣。才不會機器人一直自言自語到把聊天室灌爆。也實現了我們所需要、追求的｢一個指令，一個動作｣。

先來說說msg.content.startsWith()
這行的意思很簡單，js語法顯現時間，他的意思是：
msg(剛剛宣告過了)中的content(直翻意思為內容，講簡單一點就是你msg那條訊息中的所有資料)中的startsWith函式(指的是以後方括弧內字串開始的字串)

等等！有沒有發現多了一個settings.prefix在字串前面。
這邊的意思是引入前面這邊

1
const settings = require('./settings.json') ;

宣告的settings.json內的prefix。這邊下面會詳細講。

再來說說msg.channel.send() ;
他的意思更簡單惹，指的就是msg所在的那個頻道(channel)發送一條訊息(字串)
簡單對不對！JS就是這麼簡單\(OuO)/

說明五 ｢settings.json｣：

打開settings.json，你看到了什麼？

1
2
3
4
{
    "token":"",
    "prefix":""
}

喵嗚~~他阿，其實是一個｢資料檔｣的概念。資料都被存在裡面，方便修改，才不至於每次改某個東西都得去主程式檔案一個一個改。
首先，“token”他是將原先bot,js的

1
client.login(settings.token) ;

這行字串拉出來並模組化。不然其實也可以寫成：

1
client.login({YourToken}) ;

前面有說道token就是你讓機器人連線到Discord所需的東西。
其實他就是一個辨識碼，類斯身分種的概念。下面會講到如何取得這串號碼。他很重要，如果別人有這串號碼，他可以輕易控制你的機器人。

再來是“prefix”。
剛剛上面有說到，他的意思其實也很簡單，就是你寫在“prefix”後的字串可以在其他檔案中被當作字串引用。引用時需寫成 {JSON檔案名}.prefix。

:dog: 初探Discord Devloper Portal

上面那個網站去看了嗎？
登錄後應該是長這樣ㄅ

是滴~歡迎來到Discord開發者園地(聽起來像幼稚園?!)
這裡有一切可把Didcord自訂義所需的東西！！
很好懂對不對!!
既然懂了！初めましよ～

步驟一 ｢開使建立你的機器人吧｣：

再來，請點擊右上角的這裡：

按下去後應該畫面會變成這樣：

選擇一個你自己喜歡的名字吧！

填完後按下 Create 來建立，然後畫面應該會變成這樣：

先到這裡，主要建立這個機器人｢實體｣就差不多完工了！

步驟二 ｢加入你的Discord伺服器｣：

甚麼？！你還沒有伺服器？？？
好吧…聽好…我來說一下
首先，先進到你的Discord：
在最左邊

下面有個加號，按下去，照著步驟做，完成。

好了，建立完後我們回到DDP，讓我們把機器人加入你的伺服器ㄅ。
點擊左欄中的：

然後你看到的頁面應該是這樣

然後把 bot 選項勾起來

藍藍那個

再來下面會出現一個大表格

這邊就是看你想給你的機器人什麼權限啦
一般我為了可以｢暢行無阻｣，我都會勾Admin
但是注意！權限越大，就更危險，你越管不動她(像是現在長島ちゃん就會自己生產機器人??!)

最後一步了，在你填完權限後，在SCOPES下方應該有一行網址

cp到你的網址列後
應該會有這個東西飄出來

然後再選擇伺服器區選擇你要將其加入的伺服器，かんりお！

加入伺服器後，由於還沒啟動，因此為離線狀態。

她好可黏

步驟三 ｢合體！！｣：

好啦~我承認這個標題聽起來很エロ ww
但是接下來真滴就是這樣，先插入再儲存起來，讓她啟動。
首先，回到你的DDP，並來到左欄Bot這邊

然後在這裡

看到TOKEN下面那行 ++Click to Reveal Token++ 嗎？
按下去並且複製起來！

接下來，我們回到我們的settings.json並把剛剛複製的TOKEN插貼到這裡後面字串的地方：

1
"token":"",

接下來請確認prefix欄有填寫了並儲存。>wOb

步驟四 ｢スタート！！｣：

全部儲存完後，使用你的Terminal在剛剛有包含bot.js,settings.json,node_modules,package.json,及package-lock.json的資料夾內打入node bot.js或node .如果Terminal沒有跳奇怪的東西，應該會顯示一行#某某某準備好上戰場啦，然後你就會看到你的機器人上線囉！！！
ez pz對不對！！

:gear: 測試看看ㄅ

上線後，預設指令是 {指令前綴}test，如果機器人有回你test commit，おめでとう，你成功寫出自己的第一隻Giftia了！
如果想要更詳細的介紹及實地操演可以看下方的影片喔！
或是想學有關於機器人可運行的其他指令，可以參閱影片下方的Discord Bot全教學喔！

copyrights by ニオ, do not disturb.