A Bot that send GIF replies and is deployed on Heroku for free

Shelcia David

Follow

Dec 30, 2020 · 7 min read

Pre-requisites :

• Some knowledge of Javascript
• Node installed on your PC or laptop
• Discord Account (plus you should have servers created by you)
• VS Code or your favourite code Editor
• GIT installed
• Heroku Account

Step 1: Setting up in Discord Developer Portal

Go to discord developer portal (link here )

Navigate to Applications in Side Menu( you may have prompted to log in). You will see the screen something like this. Now all you got to do is create an application by clicking the button near your profile pic.

Enter any name you want it for your application I am going to name in GIF Bot App and then click CREATE.

You will see something like this just below.

Now navigate to Bot in the side menu and click ADD BOT and we will be prompted if we want to do create this then we say YESS WE DO IT and click it.

Once that is done you scroll down to see BOT permissions. We will be adding text permissions (Send messages and Embed links).

Now in general information on side menu where you can your client id and paste it in the URL below. After which open the following link(don’t forget to paste your client ID).

https://discord.com/oauth2/authorize?client_id={client_id}&scope=bot

You will see something just like this below.

In the dropdown select the server you want to add. If you don’t see anything there then probably you haven’t created server so do that and refresh the webpage.

You will be prompted if you are a robot XD. You will check that and continue.

You can also open your discord and check your server if Bot has been added.

COOL.

Step 2: Setting up Tenor GIF Developer account

Create a tenor developer account (Tenor link).

After which Go here. You will see something like this (see below)

Enter the required fields and GET API KEY. Now you will have your API key required for fetching APIs.

COOL COOL.

Step 3: Pre-requisites for Code

First of all, we need to create a node app. Create a folder and open your terminal to write this.

npm init

Now press enter till the end(license part) and type yes when you prompted with the message IS THIS OK?

Dependency 1: discord.js

discord.js is a node module which gives us abstraction over Discord API.

npm install discord.js

Dependency 2: node-fetch

node-fetch is a node module used to use fetch API directly.

npm install node-fetch

Dependency 3: dotenv

dotenv is a node module which allows us to use environment variables.

npm install dotenv

We need to TENOR API Key and BOT TOKEN.(so copy that)

create .env file and add these tokens.

DISCORD_BOT_TOKEN = {USE YOUR DISCORD BOT TOKEN}TENOR_KEY = {USE YOUR TENOR KEY}

Awesome !!

Dependency 3: nodemon (optional)

We need one more dependency which is optional. I used nodemon so that I don’t have to restart my node server every time I make a change.

For that it’s going to be (installing it globally)

npm install -g nodemon

Now create Bot.js file within the folder.

If you are pushing your code to GITHUB which we have to do because we are planning on to deploy our bot.

We will create .gitignore and add

node_modules.env

So we push all other files except these.

Your folder structure should look like this (see below).

COOL COOL COOL.

Step 4: Let’s Code

In your Bot.js, if you just want to see how this works real quick I am going to grab the example snippet from discord.js.

const Discord = require('discord.js'); 
const client = new Discord.Client();  
client.on('ready', () => {   
console.log(`Logged in as ${client.user.tag}!`); 
});  
client.on('message', msg => {   
if (msg.content === 'ping') {     
msg.reply('Pong!');   } 
});  
client.login({REPLACE WITH YOUR OWN BOT TOKEN AS A STRING});

On your terminal run

nodemon bot.js

The basic idea is to create a client instance and capture the message on server and reply based on certain logic(which could be anything).

You will see your Bot responding pong when you ping.

Now let’s create our GIF BOT.

So what we did here is split the words from the message we get and if it starts with !gif then we execute the if loop where combine the other words except the one.

For example,

if my msg.content is !gif i am happy, then my tokens array will be

tokens =[ !gif, i, am, happy]

and after slicing out the first word and joining the rest we get

keywords = i am happy

After which we plug in the values in the URL,

https://api.tenor.com/v1/search?q=${keywords}&key=${process.env.TENOR_KEY}&limit=10

NOTE: We are using process.env.variablename to access the variables stored in .env file. You can also alter the limits

Also, check out the tenor API Documentation(optional), you could do more with this.

Check out my github repo where you can copy paste the code.

Now it’s time for us to try this out.

Hope fully it worked in your case too.

COOL COOL COOL COOL.

Step 5: Deployment

We can’t run the development server every day so we got to run our Bot somewhere else. Heroku provides this service absolutely free.

We will have to implement few changes before we push the code to Github

We missed start script in package.json.

Make changes in package.json just like this. Just add the start script and change the “main”.

{"name": "discord-gif-bot","version": "1.0.0","description": "","main": "Bot.js","scripts": {"start": "node Bot.js"},"author": "Shelcia","license": "MIT","dependencies": {"discord.js": "^12.5.1","dotenv": "^8.2.0","node-fetch": "^2.6.1"}}

And add Procfile.(P is in caps)

worker: node Bot.js

We are DONE ! (with the coding part)

Then log in to your Heroku account.

In your dashboard under NEW Dropdown create new app.

After which give it a name(it has to be unique).

You got only UK and US on the dropdown so other country folk can pick either, no troubles.

Within that navigate to Deploy from the menu.

Under Deployment method choose GITHUB (connect to github).

Enter your credentials and within that you can actually select the repo you want it to be connected with.

Now press CONNECT to establish the connection.

We can have this two way if you want your Bot to update every time when you make changes and pushing it to Github, you can chose automatic deployment.

OR

The other way is manual deployment where you have to go to Heroku dashboard whenever you want changes to be deployed.

I am going with Manual Deployment.

But wait. We didn’t push the .env file which has got the Tokens so how we gonna add them to Heroku. That’s again simple you got to navigate to SETTINGS.

Within that we have Config Variables section. Click REVEAL CONFIG VARS to add the key name and values just like this (see below)

Now sliding back to DEPLOY on menu, we can now click on DEPLOY BRANCH to witness Heroku doing all magic placing our BOT on their server.

Oh wait !! one more additional step. Since it’s not a web server, we have to tell heroku that this app is a “worker” app. (That’s why we have added Procfile).

Now navigate to overview tab.

We need to configure the dynos. We will have to TURN ON the “worker”.

Make sure you TURN OFF the “web” and TURN ON the “worker”.

Just in case if you are caught with other issues, you can solve by viewing the MORE dropdown (under the DEPLOY tab), under which click VIEW LOGS. You will see the issues don’t worry. GOOGLE THEM!

COOL COOL COOL COOL COOL.

Conclusion

Bye !

Reference: