Skip to content

Latest commit

 

History

History
323 lines (209 loc) · 16 KB

GETTING_STARTED.md

File metadata and controls

323 lines (209 loc) · 16 KB

Getting Started

This guide will help you get started with the project. It will also help you set up your own version of the HighTechU Discord Bot.

HighTechU Students: Please remember that we are available to help at every step of the process. Let us know if you need help!

Development

Your development environment must have Git, Node.js, and npm installed. For more information about Git, visit "Git". For more information about Node.js and npm, visit "Node.js, and npm".

You will need a text editor. Any text editor is fine, but we will be using VS Code. For more information about VS Code, visit "Visual Studio".

Lastly, you will need access to a terminal or command prompt. VS Code provides an integrated terminal for development. For more information about the Integrated Terminal, visit "Integrated Terminal".

Note: If you are using an online text editor / integrated development environment (Codespaces, Repl.it) you will most likely not need to download Git, Node.js, or npm.

Optional: You may want to install the Heroku CLI to manually deploy the project with Heroku. For more information, visit "Heroku CLI".

Setup the Project in A Development Environment

You will need a GitHub account and read/write access to the repository.

Note: HighTechU Students working in a team will have read/write access to your team's project repository.

Note: You will also need admin access to the repository if you plan on automatically deploying the Discord Bot with Heroku. For more information, visit "GitHub Integration".

Note: HighTechU Students will need to ask an instructor for admin access to their project repository. Notably, HighTechU Students working in a team will require 1 team member to ask an instructor for admin access.

Note:

  • You may want to fork the repository first if you do not have read/write access to the repository. For more information, visit "Fork a repo".
  • You may want to create a new repository using the HighTechU repository as a template. For more information, visit "About Repository Templates".

Step 1: Open the terminal or command prompt and navigate to your development directory.

  # Example: Navigate to Your-Development-Folder
  # "cd" means Change Directory
  cd your-development-folder

Step 2: Clone the project locally. For more information, visit "Cloning a repository".

  # URL: Check which repository you are trying to clone. It may not be the one in the example below.
  git clone https://github.com/hightechu/hightechu-discord-bot.git

Step 3: Navigate to the project directory.

  # Project Directory: Check the name of your repository. It may not be the one in the example below.
  cd hightechu-discord-bot

Step 4: Switch to a new branch from main.

Note: It is important that developers do not work directly in the main branch. The main branch should remain stable.

  # Replace <branch_name> with the name of your new branch.
  # Example: git checkout -b really-awesome-feature
  git checkout -b <branch_name>

Step 5: Install the npm dependencies.

  npm install

Step 6: Open the project in your preferred code editor.

  # Example: Open VS Code
  code .

Setup Configuration

Before you can start with the project you will need to configure the environment variables. However, at this point in the guide we do not have our configuration variables. But we can set up the file now so that we can add the configuration variables to the .env file throughout the guide.

  • Create an .env file based on .env.example. It should include all the content of .env.example.

We will be adding our secrets from Discord and Firebase into this file, and the file will not be uploaded to Git or GitHub, therefore your secrets will stay secret.

Note: The .env file will only be available in your local development environment. This means that each person working on the same project will need to create their own .env file with the appropriate contents.

Note: HighTechU Students working in a team will each need their own .env file, but the contents (the configuration variables) will be the same for everyone on the team.

Account Requirements

To proceed with this project, you will need to have an account with the following services: Discord, Firebase, and Heroku.

Notes:

  • HighTechU Students working in a team will require only 1 account per team for Firebase and Heroku.
  • HighTechU Students working in a team will each need their own Discord account. But only 1 team member will need to set up the Discord Server and the main Discord Bot. Thus, you will need to designate 1 team member to manage the accounts, and provide the configuration variables.

Discord - Personal

Discord - Server

Discord - Bot

  • Setup a Discord Bot. For more information, visit "Setting Up a Bot Application". (Note: This guide is provided by Discord.js. Please only read the provided linked section).
  • Add your Discord Bot to your server. For more information, visit "Adding a Bot to Servers". (Note: This section requires your bot application's client ID. Please read the entire section carefully).

Note: The link will look similar to the following https://discord.com/api/oauth2/authorize?client_id=123456789012345678&permissions=0&scope=bot%20applications.commands where 123456789012345678 is your Discord Bots Client ID.

  • Add your Discord Bot Token to .env. Obtain your bot token from the Discord Portal. For more information, visit "Your Token".

Add your Bot Token to the TOKEN configuration variable. Do not add any spaces between the configuration variable name (TOKEN) and the =.

.env

TOKEN=YOUR_VERY_SECRET_BOT_TOKEN

Firebase

  • Setup a Firebase Account. For more information, visit "Google Firebase".
  • Setup a Firebase Project. Follow the "Get started" Guide. For more information, visit "Products Build".
  • Create a Cloud Firestore within your Firebase Project. For more information, visit "Firestore".
  • Obtain your Firebase Project Config Variables. For more information, visit "Config Object".

Note: The code that will be provided for the Firebase Project Configuration Variables will be presented in a JavaScript script tag.

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "SECRET",
    authDomain: "SECRET_LINK",
    projectId: "SECRET_ID",
    storageBucket: "SECRET_LINK",
    messagingSenderId: "SECRET",
    appId: "SECRET"
  };
</script>

However, we only want the SECRET part. Carefully copy and paste each part into the correct .env configuration variable. Do not add any spaces between the configuration variable name and the =.

.env

DEV_PREFIX=&
TOKEN=YOUR_VERY_SECRET_BOT_TOKEN
apiKey=SECRET
authDomain=SECRET_LINK
projectId=SECRET_ID
storageBucket=SECRET_LINK
messagingSenderId=SECRET
appId=SECRET
  • Update Cloud Firestore Rules. For more information, visit "Rules tab".

We will want to update the rules to allow for anyone to read and write. You can copy and paste the following code into the Rules Tab in the Cloud Firestore Tab.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write;
    }
  }
}

Note: To learn more about Firebase and JavaScript visit the documentation.

Heroku

Note: HighTechU Students working in a team will need to designate 1 team member to manage the Heroku Application. You will need to inform an instructor of the designated team member. The student will then gain admin access to the team's project repository. This will allow them to set up automatic deployment.

  • Set a Heroku Account. For more information, visit "Heroku".
  • Create a new Heroku Application.
  • Setup Deployment Method. Use the Connect to GitHub method and select the appropriate repository.
  • Setup Configuration Variables. Add the configuration variables in the .env file to Heroku. For more information, visit "Config Vars - Using the Heroku Dashboard".

  • Enable Automatic Deployments. For more information, visit "Automatic deploys".
  • Deploy the main Branch Manually. For more information, visit "Manual deploys".

  • Config Dynos. Turn off the web dyno and turn on the worker dyno.

Dyno Example

Note: You will want to turn off the worker dyno when you are not using your Discord Bot. A free account has 550 free dyno hours each month, therefore use your hours appropriately.


  • Re-Deploy the main Branch. For more information, visit "Manual deploys".

Note: The worker dyno will be re-deployed every time the main branch is updated. Therefore, check that your app runs locally before merging your working branch into the main branch.

Locally Deploy

You will be able to deploy your Discord Bot locally. This is helpful for testing that your code works before adding it to the Git and GitHub Repository. You always want to make sure your code works as intended before merging it to the main branch.

Note: You will need to set up your own Discord Bot and add the Discord Bot to the team server to develop locally. You will need to follow the Discord - Bot instructions above.

Setting up your own Discord Bot to develop locally is critical for preventing a bug where the bot runs commands multiple times.

Note: You will need your .env file correctly configured with the configuration variables to deploy locally.

Note: HighTechU Students working in a team can share the Firebase configuration variables while developing locally.

Step 1: Start the server.

  npm run start

You will now be able to interact with your bot locally! You can use the !help command to see a list of commands.

Optional Configuration

These are optional configurations that you can perform to customize your Discord Bot.

Production Prefix

You can update the prefix for interacting with your Discord Bot. Currently to interact with the Discord Bot you would type !command. However, you can instead configure the interaction to be &command.

Step 1: Update the prefix in the config.json file.

from

# Prefix for Summoning your Discord Bot
{
  "prefix": "!"
}

to

# Prefix for Summoning your Discord Bot
{
  "prefix": "&"
}

Note: Changing the prefix will not affect the bot's functionality. However, it will affect the way the bot interacts with the user. Editing the config.json file will modify the prefix for the bot (both locally and on Heroku). Therefore, you will need to re-deploy the bot to update the prefix.

Development Prefix

You can update the prefix for interacting with your Discord Bot locally. This will only affect the bot locally. You will need to edit the .env file to update the prefix.

Step 1: Update the prefix in the .env file.

from

# Prefix for Summoning your Discord Bot
DEV_PREFIX=&

to

# Prefix for Summoning your Discord Bot
DEV_PREFIX=*

After editing the .env file, you will need to re-deploy the bot locally. However, you will need to run the npm run start:dev command to re-deploy the bot. The npm run start:dev command will run the bot locally with the development prefix.

Deployment

The Discord Bot is set up with a Heroku Application that automatically deploys the main branch on update. Therefore, be careful updating the main branch.

Note: If you are using the Heroku CLI to manually deploy, you will need to follow the instructions provided by Heroku in the application dashboard. For more information, visit "Git - For an Existing Heroku App".

Note: If you are using a free Heroku account with no credit card attached, you will only have 550 hours a month of uptime. There are roughly 730.5 hours in a month. Thus, your bot will not be available all the time. Please turn off your bot when not in use, and be aware that your bot will not have 24/7 uptime.

Testing the Bot

To test your setup, you can run the command !ping on your server. The Discord Bot will respond Pong! if your setup was a success.

Note: If you change your Discord Bot prefix, the command will no longer be !ping, but instead <new-prefix>ping.

Note: This applies to both locally developed Discord Bot and Heroku developed Discord Bot.

Problems?

Do not worry if your Discord Bot doesn't respond. Ask for help, and we can troubleshoot together to solve the problem. Check that your Discord Bot is running either locally (npm run start) or on Heroku. The Discord Bot will not work unless it is actively running.

Note: The Discord Bot must be added to your server, if it isn't added it can't listen and respond to commands.

Additional Information

Template Commands

The HighTechU Discord Bot has a few template commands...

  • !ping: A command that responds to the user.
  • !beep: A command that responds to the user and adds an emoji to their message.
  • !chart [YYYY-MM-DD]: A command that responds to the user and uses an external API and Discord Embed.
  • !hightechu: A command that responds to the user and uses Discord Embed.
  • !reminder: A command that reminds the user of their reminder every x minutes.
  • !help: A command to list all commands.
  • !reload: A command that reloads a command during local development.
  • !r: A command that reloads all commands during local development.
  • !add-element [element]: A command that responds to the user and adds the element to Firebase.
  • !view-elements: A command that responds to the user with all their Firebase elements.

Conclusion

You can now start developing. If you have any questions, feel free to ask. We want you to succeed!