DEV Community

DET171
DET171

Posted on

Part II: Making more commands with Eris and Yuuko - Embeds

#eris #javascript #node #discord

Part 2

If you want to skip the next part, click here.

Code from Previous Post

As promised, I will be putting the code here for those who just want to grab and go:
Your project directory:

│   .env
│   index.js
│   package-lock.json
│   package.json
│
├───commands
│       owo.js
│
├───events
│       ready.js
│
└───node_modules
    │   ...
Enter fullscreen mode Exit fullscreen mode

./.env

TOKEN=<your-token-here>
PREFIX=<your-bot-prefix>
Enter fullscreen mode Exit fullscreen mode

./index.js

const { Client } = require('yuuko');
const path = require('path');
const dotenv = require('dotenv');
var env = dotenv.config();
env = process.env;

const bot = new Client({
    token: env.TOKEN,
    prefix: env.PREFIX,
    ignoreBots: true,
});

bot.extendContext({
    variableOne: 'Variable number 1!',
});
bot.editStatus('dnd'); // edits bot status

bot.on('error', (err) => {
    console.error(err);
});

bot.globalCommandRequirements = {
    guildOnly: true,
};

bot
    .addDir(path.join(__dirname, 'commands'))
    .addDir(path.join(__dirname, 'events'))
    .connect();
Enter fullscreen mode Exit fullscreen mode

./package.json + ./package-lock.json
I will not be showing this, but you should have yuuko, eris, and dotenv installed.
./commands/owo.js

const { Command } = require('yuuko');
module.exports = new Command('owo', (message, args, context) => {
  message.channel.createMessage('OwO');
});
Enter fullscreen mode Exit fullscreen mode

./events/ready.js

const { EventListener } = require('yuuko');
module.exports = new EventListener('ready', ({client}) => {
  console.log(`Logged in as ${client.user.usename}`);
});
Enter fullscreen mode Exit fullscreen mode

That should be all the code for now.

The Meme Command

Now, for the Meme command! For this, we will need to get the memes from reddit. For that, we will be using got to get the JSON from https://www.reddit.com/r/memes/random/.json.
Install got first:

npm i got --save
Enter fullscreen mode Exit fullscreen mode

Create a file in ./commands and name it meme.js.
Put the following code inside (I will be explaining it later):

const { Command } = require('yuuko');
const got = require('got');
module.exports = new Command('meme', (message) => {
    got('https://www.reddit.com/r/memes/random/.json')
        .then((response) => {
            const [list] = JSON.parse(response.body);
            const [post] = list.data.children;

            const permalink = post.data.permalink;
            const memeUrl = `https://reddit.com${permalink}`;
            const memeImage = post.data.url;
            const memeTitle = post.data.title;
            const memeUpvotes = post.data.ups;
            const memeNumComments = post.data.num_comments;
            message.channel.createMessage({
                embed: {
                    title: memeTitle,
                    url: memeUrl,
                    image: {
                        url: memeImage,
                    },
                    color: 15267908,
                    footer: {
                        text: `👍 ${memeUpvotes} 💬 ${memeNumComments}`,
                    },
                },
            });
        })
        .catch(err => {
            console.error(err);
        });
});
Enter fullscreen mode Exit fullscreen mode

Now start the project by navigating to the root folder of the project and running

node index.js
Enter fullscreen mode Exit fullscreen mode

or if you have nodemon installed

nodemon index.js
Enter fullscreen mode Exit fullscreen mode

Let me break the code up into smaller pieces to explain it.

const { Command } = require('yuuko');
const got = require('got');
module.exports = new Command('meme', (message) => {
  // code here
})
Enter fullscreen mode Exit fullscreen mode

So, we first import the modules as usual, and create a command as we did before. Easy.

got('https://www.reddit.com/r/memes/random/.json').then((response) => {
  // code here
}).catch(err => {
            console.error(err);
});
Enter fullscreen mode Exit fullscreen mode

Now, we use got to get the JSON from reddit (the subreddit r/memes actually), and save the response as the response variable. Note that we are using Promises here, thus the .then().catch() in the code. You can, however, use the async/await in ES6.

Good?

const [list] = JSON.parse(response.body);
const [post] = list.data.children;
Enter fullscreen mode Exit fullscreen mode

Now, we parse the response body by using JSON.parse (Note: You will get an error if you just use JSON.parse(response)), and get the information about the reddit post which we saved inside the post variable. Understand? Excellent.

const permalink = post.data.permalink;
const memeUrl = `https://reddit.com${permalink}`;
const memeImage = post.data.url;
const memeTitle = post.data.title;
const memeUpvotes = post.data.ups;
const memeNumComments = post.data.num_comments;
Enter fullscreen mode Exit fullscreen mode

Now we save the post url as memeUrl, the meme image url as memeImage, the meme title as memeTitle, the number of meme upvotes as memeUpvotes, and the number of comments as memeNumComments.

message.channel.createMessage({
                embed: {
                    title: memeTitle,
                    url: memeUrl,
                    image: {
                        url: memeImage,
                    },
                    color: 15267908,
                    footer: {
                        text: `👍 ${memeUpvotes} 💬 ${memeNumComments}`,
                    },
                },
});
Enter fullscreen mode Exit fullscreen mode

We then send the embed object. That's the end of it. Easy, right?

Conclusion

In this post, we used a REST API, and learnt how to send an embed in Eris. For my next post, I will be writing a whois command. See you until next time!

Top comments (1)

Collapse
 
canaris profile image
DET171 •

Apparently got was updated to v12 and is ESM only, y'all will have to install specifically got version 11.

npm i got@11
Enter fullscreen mode Exit fullscreen mode

Read next

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -

mrzaizai2k profile image

TIL: Block tabs and Get IP in Javascript

Mai Chi Bao -

fahimfba profile image

How to Unsave All Saved Posts on Facebook in a Few Simple Steps

Md. Fahim Bin Amin -

nnamdi_nwaocha_6d2abd27d1 profile image

Guide to Building a REST API with Deno and Oak Framework

nnamdi nwaocha -