[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server by anonym0us

View this thread on steempeak.com
· @anonym0us ·
$0.67
[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server
![image.png](https://ipfs.busy.org/ipfs/QmVHJFNQcuvzb12oYAT5enkvjeUd2AvousSwpBbQzpv5JE)

[Repository](https://github.com/Carlososuna11/discord-example)

What's up friends, with my most recent publication about [Navi](), many people have asked me, "Anonym0us, How can I make my own bot for my discord community?", So I decided to upload this simple, but essential tutorial about our own Discord bot, which will be adding more functions to these weeks, but for now we will do something simple: How to upload it to a server, and how to make it run simple function.

#### What Is a Discord Bot?
If you do not know what a Discord bot is, friend let me tell you that you do not live in the 21st century or have never used Discord. The definition of a bot is simple
> A Discord bot is like a phones Siri.
It’s not necessary to do what you need to do, but it provides functionality and various tools that enable your server to be more lightweight, and streamlined. For example, in order to ban someone from your server, you’d need to go to their profile, scroll down and find the ban @name option. Whereas a discord bot could allow you to do that by inputting a short command in to the chat line, e.g. *.Ban name β€” this reduces the hassle required to find and scroll. It's quicker, not necessarily better.

#### What Will I Learn?
You will learn the essential basis of the construction of our first bot, which is like starting (it always turns out to be the most difficult thing because you are creating something), added to this we will have a small script that will have a simple function and, we will learn how to keep active that bot every day at any time.

The programming language we will use is JS, which does not need to be a professional to program this bot, and you will see that if you take the pleasure of the thing, you will add more functions to your discord server and everything will be more simplified thanks to our bot.

#### Requirements
- A [Discord](https://discordapp.com/) Account.
- A [GitHub](https://github.com/) Account.
- A [Heroku](https://www.heroku.com/) Account.
- Basic knowledge of JavaScript.
- Some patience.

#### Difficulty
- Basic

#### Creating your Bot on Discord

Open the following link and login using your discord account: https://discordapp.com/developers/applications/me

We will create a new application, in this application we will have all the data of our bot once created, in if we can change the name to make the bot public or not.

Create a New Application.

![image.png](https://ipfs.busy.org/ipfs/QmNZ6jCCzszrJPPGdrusu1r416P4EBeGN4eQY5RToQQspQ)

Follow this instruction and Create a new application - Name Your App, Select an Avatar/Icon, and click "Create App."

![image (1).png](https://ipfs.busy.org/ipfs/QmXQDWQRRfRZxMtK3UVHNTH5vhoPqCA6jYsS7cQzA29h9J)

Once the App is created, select it and Click on "Create a Bot User." Confirm and Choose "Yes. Do It!" on the box that pops up.

![image (2).png](https://ipfs.busy.org/ipfs/QmTWTPUqJHVbdrhd6jXt3AxWrPwoWpBKfPBdrgWxh73jot)

Make sure to take Note of the Client ID and Token. You will need these later when you begin programming your bot. Do not share this information!

Next you need to invite the Bot to your Discord Server using the following link:
https://discordapp.com/oauth2/authorize?&client_id=YOUR_CLIENT_ID_HERE&scope=bot&permissions=0

Replace YOUR_CLIENT_ID_HERE with the Client ID from your created Bot.

For a detailed walkthrough of this section, you can follow the following link:
https://github.com/reactiflux/discord-irc/wiki/Creating-a-discord-bot-&-getting-a-token

Once the first part is ready, we start with what some call the most difficult or strong part, the script. The script will allow you as a programmer or owner of the bot to decide what to do and what not to do, in a few words, the script will allow you to program all the operation of your bot.

#### Creating the Script
Once created our GitHub account, go with the following link to GitHub to create the repository: https://github.com/new

For this tutorial, it is necessary to use 3 scripts, the main one, so to speak, which will contain both the bot's information and everything that can be programmed to it.

![image (1).png](https://ipfs.busy.org/ipfs/QmZeg6Um9d9x6UPCCpbToYfqTEAcs9Ye5Pr6eAUEEQpe5P)

This is our main script, whose name is `bot.js.`

`bot.js`
```
const Discord = require('discord.js');

const client = new Discord.Client();

 

client.on('ready', () => { // know if our bot is online

    console.log('I am ready!');

});

 

client.on('message', message => { // When the message a message is executed

    if (message.content === 'ping') { // if that message matches ping

       message.reply('pong'); // 

       }

});

 

// THIS  MUST  BE  THIS  WAY

client.login(process.env.BOT_TOKEN);//where BOT_TOKEN is the token of our bot
```

You will ask, what does that script mean? the script contains two functions, the first is to know when the bot is connected, in our console it will tell us that it is online within the server, and the other is just a small one of many functions that a bot can have, when any user send a message through the discord server where our bot is hosted and that message or command matches the script, execute the function. In this tutorial and in that script, when the user executes the command (or saying it colloquially, "when the user sends a message") whose information is "ping", our bot will process it and will respond to us, as simple as it expresses it in the script.

The package.json, which contains a list of packages with which to compile it in heroku, or the pc, or any other compiler, will export all the packages that our bot needs for its optimal compilation, if you want to expand your knowledge about the .json files, you can google here

`package.json`

```{

  "name": "Test",

  "description": "Test",

  "version": "0.0.0",

  "main": "bot.js",

  "scripts": {

    "start": "node bot.js"

  },

  "dependencies": {

    "discord.js": "11.1.0",

    "request": "2.81.0"

  }

}
```
And last but not least the Procfile, you'll wonder what the hell is that, well, Heroku apps (Application that we'll work with too) include a Procfile that specifies the commands that are executed by the app's dynos. You can use Procfile to declare a variety of process types, including:

-Your app's web server
-Multiple types of worker processes
-A singleton process, such as a clock
-Tasks to run before a new release is deployed
-Each dyno in your app belongs to one of the declared process types, and it executes the command associated with that process type.

`Procfile`

```
worker: node bot.js
```

![image (8).png](https://ipfs.busy.org/ipfs/QmVLZUX2ZdYtviU26MQmR3r7xfUa9pBtL6YLQ4LqkwfNNa)

Our git structure, should appear like this, do not worry if you notice different or feel that this something bad, it can always happen, err is human and is part of our learning, if you want, go directly to the repository link and take as reference that.

#### Uploading the Script to a Server

Heroku is a platform as a cloud computing service that supports different programming languages.

![image (2).png](https://ipfs.busy.org/ipfs/QmQp4bm3TzjqDnaRiSFP9uK7kjeE889qPXDx47jv4YWS8T)

We will take advantage of that Heroku service to keep our bot activated

We will create a new board where the script will be uploaded here the link:
https://dashboard.heroku.com/apps

![image (3).png](https://ipfs.busy.org/ipfs/QmWTKXaJZxherxpU5gYaRzxM5JcyTetr4K94fiNTNudjZf)

Let's go to the resources section and select github.

![image (4).png](https://ipfs.busy.org/ipfs/QmVG2RJ4hk7wzNZJhkNNyZcwvQB7eCKvTrh3naoNeGSCUv)

Here we select our GitHub repository.
We will select enable automatic desploy.

![image (5).png](https://ipfs.busy.org/ipfs/QmaPyPKthUKcjPDgTSR5kvYFatVHGtfoqpizZBvgUKtpH6)

Now we have to select what script we are going to work on, for that we go to resources and in free dynos we deselect the web and activate the worker

![image (6).png](https://ipfs.busy.org/ipfs/QmSFSb9ti7jR3CSbFuULiDyeufoEW3PDw8W6HxevMPqZTg)

And our script would be online and working, but now we need to tell the script which bot is the one that is going to be linked to the script, that's why we go for settings

Then we will find an option called config variables,
add a new variable whose key will be `BOT_TOKEN` and the value of that variable will be the token of our bot.

![image (9).png](https://ipfs.busy.org/ipfs/QmaSJUpdS9qzpbqPqqf49tnVuVCAFY4zPCEapse4HesQHf)

Then that would be everything, and the script knows what the bot is going to look for, here is a picture with the result of the tutorial we just made.

![image (7).png](https://ipfs.busy.org/ipfs/QmeCH8uT5dMxB7kScd4HXpY4wbUpTT48cSkgmkFA32SQL3)

I do not add proof of work, because the same repository is our proof of work, which is associated with my heroku account. This was our first part of the tutorial, there are still many more functions to add to our bot so that one day it resembles Navi, but all to its calm.

#### Curriculum
This is my first Tutorial, but you can go through my [profile](https://steemit.com/@anonym0us) to see other publications of other categories approved by @utopian.
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 2 others
properties (23)
post_id62,996,033
authoranonym0us
permlinktutorial-create-our-own-discord-button-part-1-upload-it-to-a-web-server-1537571612222
categoryutopian-io
json_metadata{"app":"steeditor\/0.1.2","users":["name","anonym0us","utopian"],"links":["https:\/\/github.com\/Carlososuna11\/discord-example","https:\/\/discordapp.com\/","https:\/\/github.com\/","https:\/\/www.heroku.com\/","https:\/\/discordapp.com\/developers\/applications\/me","https:\/\/discordapp.com\/oauth2\/authorize?&client_id=YOUR_CLIENT_ID_HERE&scope=bot&permissions=0","https:\/\/github.com\/reactiflux\/discord-irc\/wiki\/Creating-a-discord-bot-&-getting-a-token","https:\/\/github.com\/new","https:\/\/dashboard.heroku.com\/apps","https:\/\/steemit.com\/@anonym0us"],"format":"markdown","tags":["utopian-io","tutorials","navi","bot","anonym0us"],"image":["https:\/\/ipfs.busy.org\/ipfs\/QmVHJFNQcuvzb12oYAT5enkvjeUd2AvousSwpBbQzpv5JE"]}
created2018-09-21 23:13:36
last_update2018-09-21 23:13:36
depth0
children4
net_rshares526,017,262,697
last_payout2018-09-28 23:13:36
cashout_time1969-12-31 23:59:59
total_payout_value0.530 SBD
curator_payout_value0.139 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length9,196
author_reputation2,740,171,706,809
root_title"[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (66)
@shares ·
fossbot voter comment
Upvoted.

DISCLAIMER: Your post is upvoted based on curation algorithm configured to find good articles e.g. stories, arts, photography, health, community, etc. This is to reward you (authors) for sharing good content using the Steem platform especially newbies.

If you're a dolphin or whales, and wish not to be included in future selection, please let me know so I can exclude your account. And if you find the upvoted post is inappropriate, FLAG if you must. This will help a better selection of post.

Keep steeming good content.
@Shares - Curation Service

Posted using https://Steeming.com condenser site.
properties (22)
post_id62,997,145
authorshares
permlinkre-anonym0us-tutorial-create-our-own-discord-button-part-1-upload-it-to-a-web-server-1537571612222-20180921t234137945z
categoryutopian-io
json_metadata{}
created2018-09-21 23:41:39
last_update2018-09-21 23:41:39
depth1
children0
net_rshares0
last_payout2018-09-28 23:41:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length621
author_reputation3,920,426,655,270
root_title"[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@yokunjon · (edited)
$8.23
I thank you for your contribution. Here are my thoughts;

* You might consider changing topics to preserve some uniqueness. Similar tutorials can be easily found on the internet. Being unique with tutorials on Utopian is not required, but preferable as we value rare posts more than others.

* There are filler images which don't have any teaching value. Volume/value ratio would be better if you consider to remove them.

----
Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/22322434).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , , , , ,
properties (23)
post_id63,300,636
authoryokunjon
permlinkre-anonym0us-tutorial-create-our-own-discord-button-part-1-upload-it-to-a-web-server-1537571612222-20180925t135735915z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit\/0.1","links":["https:\/\/join.utopian.io\/guidelines","https:\/\/review.utopian.io\/result\/8\/22322434","https:\/\/support.utopian.io\/","https:\/\/discord.gg\/uTyJkNm","https:\/\/join.utopian.io\/"]}
created2018-09-25 13:57:36
last_update2018-09-25 13:59:06
depth1
children1
net_rshares5,857,910,146,010
last_payout2018-10-02 13:57:36
cashout_time1969-12-31 23:59:59
total_payout_value6.232 SBD
curator_payout_value1.994 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length918
author_reputation14,981,508,863,374
root_title"[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (13)
@utopian-io ·
Thank you for your review, @yokunjon!

So far this week you've reviewed 4 contributions. Keep up the good work!
πŸ‘  
properties (23)
post_id63,412,523
authorutopian-io
permlinkre-re-anonym0us-tutorial-create-our-own-discord-button-part-1-upload-it-to-a-web-server-1537571612222-20180925t135735915z-20180930t145314z
categoryutopian-io
json_metadata{"app":"beem\/0.20.1"}
created2018-09-30 14:53:15
last_update2018-09-30 14:53:15
depth2
children0
net_rshares9,265,885,373
last_payout2018-10-07 14:53:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length111
author_reputation152,913,012,544,965
root_title"[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@steem-ua ·
#### Hi @anonym0us!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
post_id63,303,739
authorsteem-ua
permlinkre-tutorial-create-our-own-discord-button-part-1-upload-it-to-a-web-server-1537571612222-20180925t143336z
categoryutopian-io
json_metadata{"app":"beem\/0.19.54"}
created2018-09-25 14:33:36
last_update2018-09-25 14:33:36
depth1
children0
net_rshares0
last_payout2018-10-02 14:33:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length288
author_reputation23,203,609,903,979
root_title"[Tutorial] Create Our Own Discord Button (Part 1) - Upload it to a Web server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000