Langkah-langkah Untuk Membangun dan Menerapkan Bot Discord

Dalam artikel ini, Anda akan membangun dan menggunakan bot Discord menggunakan Node.js, pustaka resmi discord.js, dan kontainer Back4app.

Bot Discord adalah program yang melakukan tugas otomatis di Discord. Bot ini dapat berinteraksi dengan pengguna, mengelola perilaku komunitas, dan menyediakan fungsionalitas tambahan yang tidak tersedia di Discord secara default, seperti memainkan musik, memoderasi konten, mengatur jajak pendapat, dan berintegrasi dengan layanan eksternal atau API.

Menyiapkan Lingkungan Pengembangan Anda

Artikel ini akan menampilkan bot Discord yang memberikan pertanyaan trivia kepada pengguna untuk dijawab berdasarkan tingkat kesulitan dan jenis pertanyaan yang mereka sukai di server Discord.

Untuk mengikuti tutorial ini, Anda harus memiliki hal-hal berikut ini:

• Sebuah akun Discord: Anda bisa mendaftar secara gratis jika belum memilikinya.
• Node.js v20 atau yang lebih tinggi: Anda dapat mengunduh dan menginstalnya di sistem Anda jika Anda belum memilikinya.

Siapkan direktori proyek Anda dengan menjalankan perintah di bawah ini:

mkdir discord-bot && cd discord-bot && npm init -y

Perintah di atas membuat direktori discord-bot dan menginisialisasi npm di dalamnya.

Selanjutnya, buka berkas package.json Anda dan tambahkan skrip awal di bawah ini:

"start": "node server.js"

Kemudian, instal dependensi yang diperlukan untuk proyek Anda dengan menjalankan perintah di bawah ini:

npm install discord.js axios dotenv 

Ketergantungan yang Anda instal di atas meliputi yang berikut ini:

• discord.js: Pustaka ini akan memungkinkan Anda untuk berinteraksi dengan API Discord dari aplikasi Node.js Anda.
• dotenv: Paket ini akan membantu Anda mengelola data sensitif seperti token bot Anda.
• axios: Paket ini memungkinkan Anda untuk meminta API Trivia.

Sekarang, Anda telah menyiapkan lingkungan pengembangan dan menginstal dependensi yang diperlukan. Selanjutnya, Anda akan membuat akun bot Discord.

Membuat Akun Bot Discord

Akun Bot Discord adalah akun Discord yang dibuat untuk menjalankan bot. Tidak seperti akun pengguna biasa yang dikontrol oleh pengguna manusia, perangkat lunak mengontrol akun bot.

Akun ini akan bertindak sebagai pintu gerbang, memberikan bot Anda izin yang diperlukan untuk mengakses sumber daya server, merespons peristiwa, dan menjalankan tindakan dalam komunitas Discord Anda.

Anda harus membuat aplikasi Discord terlebih dahulu untuk membuat akun bot Discord. Untuk membuatnya, buka portal pengembang Discord dan klik tombol “Buat Aplikasi”, seperti yang ditunjukkan pada gambar di bawah ini.

Mengklik tombol tersebut akan meminta Anda untuk masuk ke akun Discord Anda. Setelah masuk, beri nama aplikasi Anda dan klik tombol “Buat”, seperti yang ditunjukkan pada gambar di bawah ini.

Selanjutnya, alihkan sakelar bot publik untuk memastikan hanya Anda yang dapat menambahkan bot Anda ke server.

Kemudian, konfigurasikan izin bot dengan mengalihkan semua “Privileged Gateway Intents” untuk memastikan bot memiliki akses ke pembaruan waktu nyata pada aktivitas server seperti kehadiran anggota.

Selanjutnya, buka tab “OAuth2” pada bilah sisi kiri Anda. Di bawah bagian “LINGKUP”, centang kotak centang bot dan application.commands, seperti yang ditunjukkan pada gambar di bawah ini.

Memilih lingkup bot memungkinkan Discord mengenali aplikasi Anda sebagai bot, sementara lingkup application.commands memungkinkan Anda membuat perintah garis miring yang akan didengarkan oleh bot Anda.

Bagian “IZIN BOT” akan terbuka ketika Anda mencentang kotak centang bot. Pada bagian “IZIN BOT”, centang kotak centang Administrator, seperti yang ditunjukkan pada gambar di bawah ini.

Mencentang kotak centang ini akan memberikan bot semua izin yang memungkinkan di dalam server. Izin ini termasuk kemampuan untuk mengelola pesan dan saluran.

Di bawah bagian “IZIN BOT”, Discord akan menghasilkan URL untuk Anda menambahkan bot ini ke server. Rekatkan URL tersebut di browser web Anda dan pilih server mana yang akan digunakan untuk menambahkan bot Anda.

Selanjutnya, dapatkan token bot Anda di tab “bot” dengan mengeklik tombol“Reset Token“, seperti yang ditunjukkan pada gambar di bawah ini.

Mengklik tombol untuk pertama kalinya akan mengatur ulang token default bot Anda dan memberi Anda token baru. Salin dan simpan token dengan aman. Jika Anda kehilangan token, Anda harus mengatur ulang lagi, karena token hanya ditampilkan satu kali.

Buat file .env untuk menambahkan variabel lingkungan Anda, seperti token bot Anda, bersama dengan data lain, seperti ID guild tempat Anda menambahkan bot dan ID klien bot Anda:

TOKEN = "<BOT TOKEN>"
GUILD_ID = "<GUILD ID>"
CLIENT_ID = "<BOT'S CLIENT ID>"

Sekarang Anda telah menyiapkan akun Bot Discord Anda. Selanjutnya, Anda akan membangun bot Discord Anda.

Membangun Proyek Bot Discord Anda dengan Node.js

Bagian ini akan memandu Anda dalam membuat bot kuis Discord dan mengintegrasikan paket yang Anda instal untuk mendaftarkan perintah garis miring bot dengan Discord dan menangani interaksi bot Anda dengan anggota serikat.

Susun direktori proyek Anda dengan cara yang sama seperti di bawah ini untuk mengikuti tutorial ini.

quiz-bot/
│
├── src/
│   ├── register-commands.js   # Script to register slash commands with Discord
│   └── quiz-bot.js                # Script for message handling and fetching questions
│
├── server.js                  # Entry point for your bot and script for running a server
├── node_modules/              # Node.js modules
│
├── .env                       
├── .gitignore                   
├── package.json                         
└── package-lock.json

Mendaftarkan Perintah Bot

Bot mengharuskan pengguna untuk memasukkan perintah. Dengan bot Discord, Anda mendefinisikan perintah yang Anda ingin bot Anda dengarkan dengan awalan garis miring (/).

Untuk mendaftarkan perintah /quiz bot Anda di server Discord Anda, pertama, tambahkan impor berikut ini dari discord.js ke file register-commands.js Anda:

// register-commands.js
const { REST, Routes, ApplicationCommandOptionType } = require('discord.js');

Kelas yang Anda impor di atas termasuk yang berikut ini:

• REST: Kelas ini memungkinkan Anda untuk melakukan panggilan API REST ke API Discord.
• Rute: Kelas ini menyediakan fungsi utilitas yang menghasilkan titik akhir API Discord.
• ApplicationCommandOptionType: Kelas ini memungkinkan Anda menentukan tipe data untuk opsi yang akan diterima perintah.

Selanjutnya, Anda perlu mendefinisikan larik objek perintah yang berisi semua perintah bot Anda. Objek perintah berisi nama, deskripsi, dan larik opsi.

Opsi ini memungkinkan pengguna untuk menyesuaikan perintah bot. Dalam hal ini, larik opsi akan memungkinkan pengguna untuk menentukan tingkat kesulitan dan jenis pertanyaan yang harus diajukan bot kuis.

Tambahkan blok kode di bawah ini ke berkas register-commands.js Anda untuk membuat larik perintah:

// register-commands.js
const commands = [
  {
    name: 'quiz',
    description:
      'Select difficulty and question type to tailor the quiz experience.',
    options: [
      {
        type: ApplicationCommandOptionType.String,
        name: 'difficulty',
        description: "Options include 'easy', 'medium', or 'hard'.",
        required: true,
      },
      {
        type: ApplicationCommandOptionType.String,
        name: 'type',
        description:
          " Choose 'multiple' for multiple choice or 'boolean' for true/false",
        required: true,
      },
    ],
  },
];

Blok kode di atas mendefinisikan perintah kuis di dalam larik perintah. Objek kuis berisi dua opsi yang perlu dimasukkan pengguna bersama dengan perintah /quiz, seperti tingkat kesulitan dan jenis pertanyaan untuk pertanyaan yang akan diajukan bot.

Selanjutnya, Anda perlu mendaftarkan perintah /quiz agar dapat diakses melalui bot Anda. Untuk mendaftarkan perintah tersebut, pertama-tama, Anda harus membuat sebuah instance dari kelas REST dengan token bot discord Anda dan versi REST yang Anda inginkan.

Untuk mendaftarkan perintah /quiz dan membuatnya dapat diakses melalui bot Anda; mulailah dengan membuat sebuah instance dari kelas REST menggunakan token bot Discord Anda dan tentukan versi REST yang Anda inginkan.

Sepertinya begitu:

// register-commands.js
const rest = new REST({ version: '10' }).setToken(process.env.TOKEN);

Discord secara teratur memperbarui API-nya, yang mengarah pada perubahan pada titik akhir, struktur respons, dan perilaku.

Dengan menentukan versi REST tertentu untuk proyek Discord Anda, Anda dapat mengelola fitur-fitur yang tersedia untuk proyek Anda secara efektif. Blok kode di atas menggunakan API Discord v10.

Selanjutnya, Anda perlu mendefinisikan fungsi asinkron untuk mendaftarkan perintah bot dengan server guild menggunakan metode applicationGuildCommands dari kelas Routes.

Sepertinya begitu:

// register-commands.js
(async () => {
  try {
    console.log('Started refreshing SLASH (/) commands.');
    await rest.put(
      Routes.applicationGuildCommands(
        process.env.CLIENT_ID,
        process.env.GUILD_ID
      ),
      { body: commands }
    );
    console.log('Successfully reloaded SLASH (/) commands.');
  } catch (error) {
    console.error(error);
  }
})();

Blok kode di atas melakukan permintaan PUT ke titik akhir API Discord dengan larik perintah sebagai badan permintaan.

Ini membangun titik akhir API menggunakan metode applicationGuildCommands, mengambil ID klien bot dan ID guild target.

Setelah mendaftarkan perintah, Anda perlu mengatur alur interaksi antara bot Anda dan anggota guild.

Menangani Interaksi Pengguna Dengan Bot Discord

Untuk menangani alur interaksi antara bot Anda dan anggota guild, pertama-tama, tambahkan impor berikut ke file quiz-bot.js Anda:

// quiz-bot.js
const { Client, IntentsBitField } = require('discord.js');
const axios = require('axios');

Anda perlu menggunakan kelas Klien untuk membuat instance bot Discord baru, sementara Anda akan menggunakan kelas IntentsBitField untuk menentukan maksud (peristiwa) yang akan diterima bot Anda dari API Discord.

Selanjutnya, tambahkan blok kode di bawah ini di file quiz-bot.js Anda untuk membuat instance klien baru untuk bot Anda dan tentukan maksud tertentu untuk aplikasi bot Anda:

// quiz-bot.js
const client = new Client({
  intents: [
    IntentsBitField.Flags.Guilds,
    IntentsBitField.Flags.GuildMembers,
    IntentsBitField.Flags.GuildMessages,
    IntentsBitField.Flags.MessageContent,
  ],
});

Blok kode di atas mendefinisikan maksud tertentu yang dibutuhkan bot agar dapat berfungsi, yang meliputi:

• IntentsBitField.Flags.Guilds: Maksud ini memungkinkan bot menerima informasi tentang guild (server) yang menjadi anggotanya, termasuk nama, ikon, dan perannya.

• IntentsBitField.Flags.GuildMembers: Maksud ini memungkinkan bot menerima informasi tentang anggota guild, seperti nama pengguna, status, dan peran mereka.

• IntentsBitField.Flags.GuildMessages: Maksud ini memberi bot akses ke pesan yang dikirim di guild tempat ia berada, memungkinkannya merespons perintah atau peristiwa yang dipicu oleh pesan.

• IntentsBitField.Flags.MessageContent: Maksud ini memungkinkan bot Anda untuk mengakses konten sebenarnya dari pesan yang dikirim di guild. Tanpa maksud ini, konten pesan akan kosong.

Anda akan membuat pendengar peristiwa untuk peristiwa siap. Peristiwa ini dipicu ketika bot Discord Anda telah berhasil terhubung ke server Discord dan siap berfungsi.

Tambahkan blok kode di bawah ini ke file quiz-bot.js Anda untuk membuat pendengar acara yang siap:

// quiz-bot.js
client.on('ready', () => {
  console.log(`✅ Bot is online and ready`);
});

Selanjutnya, Anda perlu membuat pendengar peristiwa untuk peristiwa interactionCreate. Peristiwa ini terjadi ketika pengguna melakukan interaksi yang dapat ditangani bot Anda, seperti menggunakan perintah garis miring.

Ketika dipancarkan, pendengar peristiwa Anda akan menerima peristiwa interactionCreate bersama dengan objek interaksi.

Objek ini mencakup semua rincian tentang interaksi, seperti jenis interaksi dan data yang diberikan oleh pengguna.

Tambahkan blok kode di bawah ini ke file quiz-bot.js Anda untuk membuat pendengar acara interaksiBuat:

// quiz-bot.js
client.on('interactionCreate', async (interaction) => {
 if (!interaction.isChatInputCommand()) return;
 
 if (interaction.commandName === 'quiz') {
  // Rest of the code goes here...
 }
});

Blok kode di atas menyiapkan pendengar event interactionCreate.

Pendengar peristiwa memeriksa apakah interaksi antara pengguna dan bot adalah perintah input obrolan (perintah garis miring) dan menyaring jenis interaksi lainnya.

Kemudian memeriksa apakah commandName adalah kuis dan melanjutkan untuk menangani sesi kuis antara bot dan pengguna.

Jika commandName adalah kuis, buat permintaan GET dengan Axios ke URL API Trivia untuk mendapatkan pertanyaan dan jawabannya (benar dan salah).

Kocok jawaban untuk mengacak pilihan, lalu tampilkan kepada pengguna.

Sepertinya begitu:

// quiz-bot.js

await interaction.deferReply();

const difficulty = interaction.options.getString("difficulty");
const type = interaction.options.getString("type");

try {
  const url = `https://opentdb.com/api.php?amount=1&difficulty=${difficulty}&type=${type}`;
  const response = await axios.get(url);
  const data = response.data.results[0];
  const question = data.question;
  const correctAnswer = data.correct_answer;
  const options = [...data.incorrect_answers, correctAnswer];

  // Shuffle the options
  for (let i = options.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [options[i], options[j]] = [options[j], options[i]];
  }

  await interaction.editReply({
    content: `Question: ${question}\\nOptions: ${options.join(", ")}`,
  });
} catch (error) {
  console.error(error);
  // Notify the user in case of an error after deferring
  await interaction.followUp("Failed to fetch the question. Please try again.");
}

Blok kode di atas pertama-tama menunda balasan bot dengan metode deferReply untuk memberi waktu bagi bot untuk menangani permintaan GET.

Blok kode kemudian mengambil tingkat kesulitan dan jenis pertanyaan yang dipilih pengguna dari objek interaksi menggunakan interaction.options.getString().

Selanjutnya, bot mengekstrak pertanyaan, jawaban yang benar, dan jawaban yang salah dari data yang diambil.

Setelah mengacak jawaban yang benar dan salah untuk mengacak urutan pilihan, ia mengedit jawaban awal yang ditangguhkan dengan pertanyaan dan opsi kuis.

Selanjutnya, Anda perlu menangani respons pengguna terhadap pertanyaan dengan memeriksanya dengan jawaban yang benar dan memberi tahu pengguna apakah jawaban mereka benar atau salah.

Mengumpulkan Tanggapan Pengguna

Untuk mengumpulkan respons pengguna terhadap pertanyaan, Anda akan menggunakan metode createMessageCollector pada saluran interaksi(interaction.channel).

Metode ini memungkinkan Anda untuk menyaring pesan yang tidak dikirim oleh pengguna yang memulai perintah /quiz, menetapkan batas waktu untuk respons pengguna, dan menentukan jumlah maksimum pesan yang akan dikumpulkan.

Ketika pengguna mengirimkan respons, metode createMessageCollector akan memicu peristiwa pengumpulan.

Anda perlu menambahkan pendengar ke peristiwa ini; pendengar akan memeriksa respons pengguna terhadap jawaban yang benar atas pertanyaan dan mengirim pesan yang sesuai.

Di sisi lain, jika pengguna tidak mengirimkan respons yang sesuai dalam batas waktu yang ditentukan, metode createMessageCollector akan memicu peristiwa akhir.

Anda perlu menambahkan pendengar yang merespons pengguna untuk memberi tahu mereka bahwa waktu mereka telah habis untuk acara ini.

Sepertinya begitu:

// quiz-bot.js
const filter = (m) => m.author.id === interaction.user.id;

const collector = interaction.channel.createMessageCollector({
  filter,
  time: 15000,
  max: 1,
});

collector.on("collect", async (m) => {
  if (m.content.toLowerCase() === correctAnswer.toLowerCase()) {
    await m.reply("Correct answer! 🎉");
  } else {
    await m.reply(`Wrong answer! The correct answer was: ${correctAnswer}`);
  }
});

collector.on("end", (collected) => {
  if (collected.size === 0) {
    interaction.followUp("Time is up! No answer was provided.");
  }
});

Blok kode di atas membuat pengumpul pesan untuk saluran tempat interaksi berlangsung(pengumpul). pengumpul akan menyaring pesan berdasarkan ID penulis, memastikan hanya pengguna yang memulai kuis yang dapat memberikan jawaban dalam batas waktu 15 detik.

Blok kode kemudian membuat dua pendengar peristiwa untuk collector. Pendengar peristiwa pertama, collect, akan memicu panggilan balik untuk memeriksa jawaban pengguna dan membalas pengguna dengan tepat.

Pendengar peristiwa kedua, end, akan memicu panggilan balik untuk memberi tahu pengguna bahwa mereka tidak memberikan jawaban dalam batas waktu.

Selanjutnya, buat koneksi antara bot Anda dan Discord dengan menambahkan baris kode di akhir file quiz-bot.js Anda:

// quiz-bot.js
client.login(process.env.TOKEN);

Membuat File Entri

Anda akan membuat file entri, yang merupakan file tunggal yang akan menginisialisasi seluruh aplikasi bot Anda. File ini akan melayani dua fungsi:

• Mengimpor Logika Bot: File entri akan menjalankan logika bot dengan membutuhkan file JavaScript, yang menangani pendaftaran perintah bot Anda dengan server Discord dan merespons pesan pengguna.

• Memulai Server: File entri akan menyiapkan server yang memungkinkan bot Anda berjalan di kontainer Back4app. Kontainer Back4app memerlukan port yang terbuka agar penerapan aplikasi Anda berhasil.

Tambahkan blok kode di bawah ini ke berkas server.js untuk membuat server:

// server.js
require('dotenv').config();
const http = require('http');
require('./src/register-commands.js');
require('./src/quiz-bot.js');

http
  .createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Bot is running!');
  })
  .listen(3000, () => {
    console.log('Server is ready.');
  });

Blok kode di atas mengatur bot Discord Anda untuk berjalan dengan membuat server HTTP sederhana. Server ini bertindak sebagai titik masuk, yang memungkinkan bot berfungsi di dalam lingkungan kontainer.

Blok kode di atas mengimpor logika inti bot Anda dan menentukan port Back4app agar bot Anda dapat digunakan pada kontainer Back4app.

Setelah membuat file entri, Anda dapat menguji bot Discord Anda secara lokal sebelum menerapkannya ke kontainer Back4app.

Menguji Bot Discord Anda

Mulai bot Discord Anda dengan menjalankan blok kode di bawah ini di terminal aplikasi Anda:

node server.js

Perintah ini akan mencatat pesan yang menunjukkan bahwa Anda telah berhasil mendaftarkan bot Anda dan bot Anda telah siap dan online.

Buka server tempat Anda menambahkan bot. Anda akan melihat bahwa server tersebut sudah online sekarang.

Untuk berinteraksi dengan bot Anda, kirimkan perintah /quiz. Bot akan merespons dengan opsi yang merinci bagaimana Anda ingin tampilan pertanyaan kuis Anda.

Pilih opsi yang Anda inginkan (misalnya, memilih kategori kuis atau tingkat kesulitan) dan tekan Enter. Bot akan membalas dengan sebuah pertanyaan dan menetapkan batas waktu 15 detik untuk jawaban Anda.

Jika Anda mengirimkan jawaban Anda dalam batas waktu yang ditentukan, bot akan membandingkan jawaban Anda dengan jawaban yang benar dan merespons untuk memberi tahu Anda apakah jawaban Anda benar atau salah.

Anda telah menentukan bahwa bot Anda dapat menangani semua fitur yang Anda rancang untuk ditangani; selanjutnya, gunakan bot Discord Anda ke kontainer Back4app.

Menerapkan Bot Discord di Wadah Back4app Dengan Agen AI

Di bagian ini, Anda akan menggunakan bot Discord Anda di kontainer Back4app dengan agen AI Back4app.

Untuk menerapkan aplikasi di kontainer Back4app, Anda memerlukan yang berikut ini:

• Dockerfile di proyek Anda
• Repositori GitHub: Proyek Anda harus diunggah ke repositori GitHub.
• Aplikasi Back4app GitHub: Instal dan berikan izin yang diperlukan ke aplikasi Back4app GitHub untuk repositori Anda

Pertama, buatlah sebuah Dockerfile di direktori root proyek Anda dan tambahkan blok kode di bawah ini ke dalamnya:

# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Selanjutnya, Anda perlu mengunggah kode Anda ke repositori GitHub agar dapat diakses untuk penerapan.

Sebelum mengikuti langkah selanjutnya, pastikan Anda telah menginstal Aplikasi GitHub Back4App Containers di akun GitHub Anda dan pastikan aplikasi tersebut memiliki izin yang diperlukan untuk mengakses aplikasi yang ingin Anda gunakan.

Navigasikan ke beranda Back4app dan klik tombol “Aplikasi Baru” di sudut kanan atas layar Anda.

Ini akan membawa Anda ke layar inisialisasi, di mana Anda harus memilih jenis aplikasi yang ingin Anda buat.

Pilih opsi Agen Back4app, seperti yang ditunjukkan pada gambar di bawah ini.

Ketika Anda memilih opsi Agen Back4app, Anda akan diarahkan ke halaman agen AI Back4app.

Berikan agen AI perintah di bawah ini untuk menerapkan aplikasi Anda:

Deploy my "YOUR_REPOSITORY_URL" repository on GitHub to a Back4App Container.
Here are the required environmental variables:
TOKEN = "YOUR_DISCORD_BOT_TOKEN"
GUILD_ID = "YOUR_GUILD_ID"
CLIENT_ID = "YOUR_CLIENT_ID"

Ganti placeholder pada prompt di atas dengan nilai aktualnya.

Anda akan mendapatkan respons yang serupa dengan yang di bawah ini:

Tanggapan di atas menunjukkan bahwa proses deployment sedang berlangsung dan aplikasi Anda akan online dan tersedia di URL yang disediakan.

Anda dapat memantau proses penyebaran di dasbor kontainer Back4app Anda, atau Anda dapat memberikan prompt di bawah ini kepada agen AI setelah beberapa saat untuk mengonfirmasi status penyebaran saat ini.

What is the current deployment status of my web app?

Anda akan mendapatkan respons yang serupa dengan yang di bawah ini:

Atau, Anda bisa memilih untuk menyebarkan aplikasi Anda di Back4App secara manual.

Kesimpulan

Pada artikel ini, Anda telah mempelajari cara membuat bot Discord dengan Node.js. Anda telah menjelajahi cara membuat akun bot Discord, mendaftarkan perintah bot, dan menangani respons pengguna.

Selain itu, Anda telah menguji bot Discord Anda dan menerapkannya pada kontainer Back4app dengan bantuan agen AI.

Bot Discord bisa sangat berguna dalam mengotomatiskan tugas, menyediakan hiburan, dll., dan berdasarkan kasus penggunaan Anda, Anda dapat mengubah bot untuk menjalankan fungsi tertentu yang memenuhi kebutuhan Anda.

Kode lengkap yang digunakan dalam tutorial ini tersedia di repositori GitHub.