The gap between what you tell the computer to do and what you want the computer to do is where bugs are born and thrive.

As a moderator on the freeCodeCamp Discord, I frequently see people pop in to say, “I did everything exactly right but my code isn’t working!” These people know what they want their code to do. But they didn’t tell the computer how to do it properly.

To resolve their bug, they must align their desires — their mental model of their code’s behavior — with their code. Assumptions are the truses that preserve that gap.

The Problem with Assumptions

Let’s say that I'm working on a webpage and I want to set an element’s background to be blue. It’s not working as I desire. It’s setting the text color instead of the background color.

I engage my coworker for help. I say to her, “I told the computer to make the background blue. But it’s setting the text color instead!”

My problem is that I didn’t tell the computer to change the background color. I instead mistakenly used the color property. There’s no way that my coworker could know that I was using the wrong property. So my assumption prevented her from helping me.

The Components of a Great Question

Getting help takes effort. The more work you put into seeking help, the more likely you’ll be to obtain the help you need. In my experience, there are 3 components to a great question when you need technical assistance. Great questions contain all of these components.

1. The code that contains the problem

2. Any error messages you’re seeing

3. A description of the issue containing all of the following:

   • The exact steps to reproduce the issue

   • The expected result

   • The actual result

Below, I’ll break down each component in detail in case you’re not sure how to provide it when asking for help.

The Code that Contains the Problem

This is harder than it sounds. Frequently, the reason I fail to fix a bug by myself is that I’m looking in the wrong place. I may be looking in the wrong function, file, or even project! If I go to my coworker for help and only provide her the code that I think contains the problem, then she may not be able to help me out.

This means that it’s important to provide as much context as possible. This increases the chances that the code you share with the people helping you will contain the information they need to help you solve your problem.

Even with decades of experience coding, I frequently have doubts about how certain code will behave. Being able to run the code and experiment with it (add logs, attach a debugger, try different inputs, and so on) is a big part of my process.

There’s lots of ways you might transmit your code to someone to get some help. Here’s some examples:

For Large Projects

If you’re having trouble with a large project (something more than one file or more than a couple hundred lines of code). Then your best bet is to share a GitHub repo containing all the code.

Alternatively, you might create a “minimal reproduction.” If you can make the problem happen in the context of a small amount of code, then you can share that code instead. This can dramatically reduce the amount of work others need to do to help you and increase your chances of getting the answers you’re seeking.

Note: When working on a project for a client or employer, you might not be able to get help from outside sources due to your inability to share the relevant code. Don't share your employer’s or clients’ code publicly unless you have explicit permission to do so!

For Single File Projects

If your project is just one or two files or you’re creating a minimal reproduction of the issue, then you might be able to in-line your code in a chat message or create a GitHub Gist containing the relevant code.

Alternatively, you could use a tool like CodePen or StackBlitz to quickly generate a reproduction of the problem you’re facing.

For freeCodeCamp Lessons

Many of the questions I get on the freeCodeCamp Discord are regarding lessons in the learning platform (the curriculum). When asking a question about one of these lessons, make sure you include:

1. All the code from the editor panel (that is, all the code you have written or modified)

2. A link to the step

Without these two things, providing help gets dramatically harder.

Error Messages

When you’re a newer developer, error messages can be very intimidating. It’s understandable that you might skim over them as they don’t make sense and you’re not sure how to leverage them to solve your problem.

Reading your error messages carefully can be one of the first steps you take to becoming a stronger developer. But even if you don’t know what to make of the message, when seeking help, make sure you give others with experience in reading those messages the opportunity to do so. If there are any error messages in your console or terminal, copy/paste them in their entirety to your post asking for help.

Description of the Issue

When asking for help, you should consider that the person or people you’re asking might not have any context on your situation. It’s up to you to give them the context they need. To make sure you have given that context, include each of the following:

Steps to Reproduce the Issue

What, specifically, did you do that led you to encounter the problem you have? Be as detailed as possible here. Include things like, “I clicked the ‘Submit’ button,” or “I opened https://www.example.com in my browser.”

The Expected Result

Me: “My text is blue!”
My coworker: “That’s nice.”

My coworker wasn’t being dismissive of my problem. She just didn’t know whether it was a problem or not. Maybe I wanted the text to be blue. Maybe the blue text had nothing to do with my problem. Maybe the text only turns blue under certain circumstances.

If I had told my coworker that I expected the background to be blue rather than the text, she might have quickly realized what I did wrong and offered up a good suggestion on how to fix it.

The Actual result

Me: “I wanted my background to be blue!”
My coworker: “That’s nice.”

Forgetting to give the actual result is pretty much just as useless as forgetting to give the expected result. The expected and actual result of your code are both critical to a well-composed question.

When it comes to sharing actual results, screenshots or videos can be quite handy. Just make sure you’re not relying on them to the exclusion of the other components of a good question.

Example Question

Here’s an example of what putting all this guidance together might yield:

I'm on this step: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-33

I tried putting in this code:

for (iterator; condition; iteration) {

}

I expected it to pass, but instead, it gave me an error reading:

ReferenceError: iterator is not defined

Can anyone help me figure out what I'm doing wrong? Here’s a screenshot of the step and error:

The question isn’t long, but it contains all the elements of a quality question as described by this article. It gives the code that contains the problem (including a link to the freeCodeCamp step), the error message that is shown, and the expectations (that it should pass) and actual result (that an error message is shown). It even includes a helpful screenshot showing how the error and result are presented.

Closing Thoughts

This feels like a whole lot of effort. I just want my problem solved. Do I really need to do all of this???

Short answer? Yes. But only because it’s less effort than engaging in a prolonged back and forth as the people trying to help you attempt to get this information. Not just that, but if you go through these steps and collect this information, you might even find that you solve your problem yourself without needing to engage others.

This process might feel tedious at first, but like many things in life, if you practice it regularly then it becomes easier.

You’ve got this. 😎

In this case, there is no database to store the information. Rather, you just have a free Discord text channel that keeps the data as a sequence of messages in chat. And an admin/moderator/user with the required access rights can read through these messages and take the appropriate action.

In case you are new to Discord, it’s a great platform for chatting, playing video games, having calls, and even running a virtual team for your startup. It’s free, and you can download it from here.

Alright, coming back to the topic, I had a requirement like this to implement using Discord’s webhook and Next.js. I learned a lot from the activity. So I wrote this step-by-step tutorial about that process.

The primary objective here is to understand:

• What is a Webhook and what are the use cases?

• How to Integrate a webhook with a web application framework like Next.js

• How to build a user interface with the latest APIs and components from Next.js

I hope you’ll like it. If you want to learn from a video, the article is also available as a video tutorial:

Table of Contents

1. What is a Webhook?

2. How to Configure a Webhook on Discord

3. How to Create a Next.js Project

4. How to Set Environment Variables

5. How to Integrate the Webhook with the Next.js Form Component

   • Create the Form

   • Create the Server Action

6. How to Update the App Page

7. Let’s Test it Out

8. How to Improve the Message feedback using React 19’s useActionState Hook

   • Set up a toaster

   • Enhance the Form with the useActionState Hook

   • How to Update the Server Action to Return Results

9. Let’s Test it One More Time

10. Source Code and Resources

What is a Webhook?

Assume we have an email service that connects to a third-party email sender to send emails to users. Traditionally, there will be an API gateway to talk to the email service from the client devices. When the request is received, the email service will contact the email-sending provider.

While the email-sending provider processes the emails, the email service needs to know their status. One generic way to handle this is for the email service to poll for the status at a short frequency and update the client as and when the status changes. But this method has many drawbacks, such as resource mis-utilization, unnecessary connections, and poor performance.

On the contrary, how about the email service registers a callback URL that the email sender can call with relevant information when the email-sending action has been completed? This way, there is no unnecessary polling. Rather, the email sender can proactively inform the email service of a success or a failure after attempting to send the email. Then, the email service can respond to the clients regarding their status accordingly.

This registered callback is called a Webhook. Webhooks are widely used today in various industries like payments and checkout, system health monitoring, and third-party app integrations.

How to Configure a Webhook on Discord

You should now have an idea of how webhooks work, so let’s configure one with Discord.

Create or select a text channel on your Discord server. Click on the Edit Channel button.

Then, from the left-side navigation menu, select the Integration option. You should see the Webhooks option listed there.

Click on the Webhooks option and then click on the New Webhook button.

Give your webhook a name, and you can optionally upload a photo. This can be helpful when you have multiple webhooks and you want to quickly identify them by their photo and name.

Now, click on the Copy Webhook URL button to copy the webhook URL. Keep it safe somewhere, as we will be using it shortly in our application.

That’s it. Now let’s create a Next.js 15 application so we can integrate the webhook with it.

How to Create a Next.js Project

Open the terminal and use the following command to create a Next.js application:

npx create-next-app@latest

You’ll have to provide a few inputs for the initial project to create it. I will be using JavaScript (as opposed to TypeScript), Tailwind CSS, App Router, and Turbopack for this project. So I’ve opted for those choices by providing Yes as the response.

With that, you’ve created a Next.js project you can use for the rest of the tutorial.

How to Set Environment Variables

Create a .env file at the root of your project. We will now create an environment variable secret with the webhook URL you had copied before. Create an entry in the .env file like this:

DISCORD_WEBHOOK_URL=<YOUR_DISCORD_WEBHOOK_URL>

Make sure you replace the <YOUR_DISCORD_WEBHOOK_URL> with your actual webhook URL in the .env file. Remember, you must not commit and push this file to your version control. So, make sure that the .env file has been added to the .gitignore file of the project.

How to Integrate the Webhook with the Next.js Form component

Now, we will create the user interface to capture inputs from the user and send those to the Discord text channel using the webhook.

Let’s create a simple message form using the <Form /> component from Next.js. The <Form/> component is an extension of HTML’s native form with more flexibilities and features introduced by the release of Next.js 15. I would suggest that you go over this project-based video tutorial if you are interested in learning more about this new addition to Next.js.

Our strategy here is very straightforward:

• We will create a form and add an action to it using the form’s action prop.

• We will then create a Server Action using the webhook URL to communicate with Discord.

• The action will be invoked when the user fills up the form and submits it. Thus the webhook communication will be done.

Let’s write the code for these functionalities now.

Create the Form

Create a folder called _components under the app/ directory. Now, create a file message-form.jsx under the app/_components/ folder with the following code:

import Form from "next/form";
import { sendDiscordMessage } from "../actions";

const MessageForm = () => {
  return (
    <Form className="flex flex-col items-center" action={sendDiscordMessage}>
      <input
        type="text"
        placeholder="Your name"
        name="username"
        className="border p-1 rounded w-[300px] my-2"
        required
      />

      <input
        type="email"
        placeholder="Your e-mail"
        name="email"
        className="border p-1 rounded w-[300px] my-2"
        required
      />

      <input
        type="text"
        placeholder="Your Image Url"
        name="dp"
        className="border p-1 rounded w-[300px] my-2"
      />

      <select
        name="type"
        className="p-1 rounded border my-2 w-[300px]"
        required
      >
        <option value="">Message Type</option>
        <option value="thanks">Say, Thanks!</option>
        <option value="qa">QA</option>
        <option value="general">General</option>
      </select>

      <textarea
        placeholder="What do you want to say?"
        name="message"
        className="border p-1 rounded w-[300px] my-2"
        required
      />

      <button
        type="submit"
        className="bg-blue-500 w-[70px] text-white rounded-md"
      >
        Send
      </button>
    </Form>
  );
};

export default MessageForm;

Here, we have created a basic form with five fields for users to enter their name, email, profile image URL, message type (general, thanks, qa), and the message. There is a send button as well to submit the form.

We have used the Form component from the next/form package. The Form component allows us to execute a function on the server (server action) with the help of its action attribute. As you can see in the code above, we have imported a server action sendDiscordMessage and used that as the value for the action attribute of the form.

 <Form className="flex flex-col items-center" action={sendDiscordMessage}>

Now, let’s create the server action so that we can submit the form with it.

Create the Server Action

We’ll use a server action to send messages to Discord using webhooks. Create a folder called actions under the app/ directory. It’s a convention to keep all the actions colocated under the actions/ directory. Now, create a file called index.js under the app/actions/ directory with the following code:

"use server";

export const sendDiscordMessage = async (formData) => {
  try {
    const rawFormEntries = Object.fromEntries(formData);

    console.log(rawFormEntries);

    await fetch(process.env.DISCORD_WEBHOOK_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username: rawFormEntries?.username,
        avatar_url: rawFormEntries?.dp || "https://i.imgur.com/mDKlggm.png",
        content: rawFormEntries?.message,
        embeds: [
          {
            fields: [
              {
                name: "Email",
                value: rawFormEntries?.email,
                inline: true,
              },
              {
                name: "Message Type",
                value: rawFormEntries?.type,
                inline: true,
              },
            ],
          },
        ],
      }),
    })
  } catch (err) {
    console.log(err.message);
  }
};

Let’s understand what’s going on in the above code:

• In Next.js (or with React 19), a server function (aka server action) needs a special directive called ”use server” at the top of the file. So we have declared that.

• A server action is an async function that gets the formData as a parameter. The formData will contain the values of all the form fields submitted by the user. We can use the Object.formEntries() API to get a key-value pair from the formData. Check this out to learn the best way to handle formData in JavaScript.

• Next, we used the Discord webhook URL to make a POST call with the required payload to create the message.

• Let’s understand the payload format well. We need to follow a specific payload structure for the discord webhook to create the message. It follows a schema to have the following:

  • username: the name of the message sender. It appears at the top of the message. We’re reading the name field from the submitted data and populating the username field.

  • avatar_url: the profile photo of the message sender. We have a dp field in the form to capture the profile photo URL. We’re using that, and in case the user does not provide it, we’re using a default image as the profile photo.

  • content: The content field is the actual message content. We are reading the value of the message field and populating the value.

  • embeds: In the Discord message, you can use embeds. These embeds could be text messages, images, or videos. We will utilize the embeds to show the email and message type information. The embeds is an array of fields. In each of the fields, we have passed the email and message type values as the inline values. Inline values will appear in line, side by side.

How to Update the App Page

Finally, let’s update the application’s page with our form component so that everything gets stitched together. Open the page.js file under the app/ directory and paste in the following code:

import MessageForm from "./_components/message-form";

export default function Home() {
    return (
        <div className="flex flex-col justify-center items-center">
          <h1 className="text-3xl my-3">Send a message to tapaScript</h1>
          <MessageForm />
        </div>
      ) 
}

Here we have integrated the form with the app page so that we can access it on the browser.

Let’s Test it Out

Now you can run the app with the command yarn dev from your terminal. The app will be available on localhost:3000 by default. Open a browser tab and hit the URL http://localhost:3000. You should see a form like the one below. Fill it out with values and hit the Send button.

Go to the text channel of your Discord server and check for a message that should appear there momentarily. Check that the fields of the message match the input values you provided in the form.

TADA! We have done it. But hold on – we can make it even better. Did you notice that we aren’t showing any kind of feedback saying the “Message has been sent successfully”, or “There are issues in sending the message”? We’re not taking care of providing the result of the server action to the form component. Let’s fix that.

How to Improve the Message Feedback using React 19’s useActionState Hook

React 19 introduced a hook called useActionState that helps you update the state based on the result of a server action. Let’s use this hook to enhance the message form and the server action so that when the action gets executed successfully (or fails), we can notify the form component to change its state and show the success/error messages accordingly.

Set up a toaster

We will use a toast message to show the success/error messages. Let’s use the toast library called sonner. First, install it with this command:

yarn add sonner

Now, we have to add the Toaster from sonner to our app. The best place to add it is at the root level Layout of the application. Open the layout.js file and import the Toaster:

import { Toaster } from 'sonner';

Then, use the Toaster in the JSX of the layout:

 <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
        <Toaster richColors />
      </body>
 </html>

That’s it. The toaster set-up is done. Now we will be able to use it in our components to show the toast messages.

Enhance the Form with the useActionState Hook

First, import the useActionState and useEffect hooks into the message-form.jsx file. Also, import the toast from sonner. As we will be using the hooks now, we have to make the message-form component a client component. So, add the ”use client” directive at the top of the file.

"use client";

import Form from "next/form";
import { useActionState } from "react";
import { sendDiscordMessage } from "../actions";
import { useEffect } from "react"
import { toast } from "sonner";

Next, use the useActionState hook to get the formState updated from the server action result. An isPending state tells us if the form submission has been completed. The useActionState returns a new formAction from the existing server action instance.

The syntax goes like this:

const [formState, formAction, isPending] = useActionState(sendDiscordMessage,null);

Now, we need to use this formAction as the value of the action attribute of the <Form /> component:

<Form className="flex flex-col items-center" action={formAction}>

Next, use the useEffect hook to track the formState changes and show the toast message accordingly. The shape of the formState can be customized based on our needs. We will see shortly how the server action can return this state value.

  useEffect (() => {
    if (formState?.success) {
      toast.success(formState?.message);
    } else if (formState?.success === false) {
      toast.error(formState?.message);
    }
  },[formState?.success])

The last thing here is to improve the UX of the form using the isPending state we got from the useActionState hook. The value of the isPending state will be true if the form is still in transition and being submitted. It will be changed to false when the form is submitted. So we can use the state value to customize the submit button text.

<button
  type="submit"
  className="bg-blue-500 w-[70px] text-white rounded-md">
    {isPending ? "Sending..." : "Send"}
</button>

Those are all the changes we need to make in the form component. Here’s the complete code of the modified form component for you to check out and use:

"use client";

import Form from "next/form";
import { useActionState } from "react";
import { sendDiscordMessage } from "../actions";
import { useEffect } from "react"
import { toast } from "sonner";

const MessageForm = () => {
  const [formState, formAction, isPending] = useActionState(
    sendDiscordMessage,
    null
  );

  useEffect (() => {
    if (formState?.success) {
      toast.success(formState?.message);
    } else if (formState?.success === false) {
      toast.error(formState?.message);
    }
  },[formState?.success])



  return (
    <Form className="flex flex-col items-center" action={formAction}>
      <input
        type="text"
        placeholder="Your name"
        name="username"
        className="border p-1 rounded w-[300px] my-2"
        required
      />

      <input
        type="email"
        placeholder="Your e-mail"
        name="email"
        className="border p-1 rounded w-[300px] my-2"
        required
      />

      <input
        type="text"
        placeholder="Your Image Url"
        name="dp"
        className="border p-1 rounded w-[300px] my-2"
      />

      <select
        name="type"
        className="p-1 rounded border my-2 w-[300px]"
        required
      >
        <option value="">Message Type</option>
        <option value="thanks">Say, Thanks!</option>
        <option value="qa">QA</option>
        <option value="general">General</option>
      </select>

      <textarea
        placeholder="What do you want to say?"
        name="message"
        className="border p-1 rounded w-[300px] my-2"
        required
      />

      <button
        type="submit"
        className="bg-blue-500 w-[70px] text-white rounded-md"
      >
        {isPending ? "Sending..." : "Send"}
      </button>
    </Form>
  );
};

export default MessageForm;

How to Update the Server Action to Return Results

The changes in the server action should be as follows:

1. When you use the useActionState hook, pass a returned formAction to the form. We have seen this before. It helps in multiple ways, and one of them is getting the previous state value of the formState inside the server action. You must be mindful to pass it as the first argument to the server function, and then the formData.

2. We can now return the result of the server action so that the formState gets updated with the result. We will create a result structure with a boolean success field indicating if it is a success or error scenario and a message field with the actual message.

Here’s the changed code with the above two updates:

"use server";

export const sendDiscordMessage = async (prevState, formData) => {
  try {
    const rawFormEntries = Object.fromEntries(formData);

    console.log(rawFormEntries);

    await fetch(process.env.DISCORD_WEBHOOK_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username: rawFormEntries?.username,
        avatar_url: rawFormEntries?.dp || "https://i.imgur.com/mDKlggm.png",
        content: rawFormEntries?.message,
        embeds: [
          {
            fields: [
              {
                name: "Email",
                value: rawFormEntries?.email,
                inline: true,
              },
              {
                name: "Message Type",
                value: rawFormEntries?.type,
                inline: true,
              },
            ],
          },
        ],
      }),
    });

    return {
      success: true,
      message: `Your message has been sent successfully.`,
    };
  } catch (err) {
    console.log(err.message);
    return {
      success: false,
      message: `Problem is sending message ${err.message}`,
    };
  }
};

As you must have noticed, the returned result is the formState we have used inside the form component to show the toast messages.

Let’s Test it One More Time

Let’s test things out with all the changes.

1. First, fill out the form with the details. Now we’re using a profile picture URL rather than keeping it empty. Click on the Send button.

2. You should see the that button text gets changed to Sending… while the form is being submitted.

3. After the submission, you should get the success message in the toast. Also, the form state should be restored to its original state.

4. On the Discord text channel, you should see the message posted successfully.

That’s amazing! We have now made the app much better with the message and error handling.

Source Code and Resources

All the source code used in this article is in the GitHub repository. You can take a look, follow the README to set it up, and run it locally.

• The next-js-discord GitHub repository

Here are the resources I mentioned in the article that you may find helpful:

• Next.js 15 Form Component - All That You Need To Know

• Next.js Server Actions || Learn Patterns & Project Building

• MASTER React 19 useActionState Hook with Project & Usecases

• The useActionState official doc

Also, you can connect with me by:

• Subscribing to my YouTube Channel. If you are willing to learn React and its ecosystem, like Next.js, with both fundamental concepts and projects, I have great news for you: you can check out this playlist on my YouTube channel with 30+ video tutorials and 20+ hours of engaging content so far, for free. I hope you like them as well.

• Following me on X (Twitter) or LinkedIn if you don't want to miss the daily dose of up-skilling tips.

• Checking out and following my Open Source work on GitHub.

• I regularly publish meaningful posts on my GreenRoots Blog, you may find them helpful, too.

See you soon with my next article. Until then, please take care of yourself, and keep learning.

Claim Your Role

In any channel within our Discord server, type /supporter and you should see a command window pop up.

Click CamperChan's /supporter command, and enter the email address associated with your freecodecamp.org/learn account.

Then, hit enter to submit the command and you should see a success message! You'll now have the role with access to the supporter-only channels.

Error Messages

There are a few error messages you may encounter when claiming this role. For any of these messages, please ping Naomi directly in the server to assist you.

Already Have Role

This error message means you have already been assigned the Supporter role in the Discord server.

Record for Discord Server Exists

This error message means your Discord account has already been granted the Supporter role previously, but you have somehow lost it (for example by leaving the server and rejoining later).

Naomi will need to reset the database entry for you.

Record for Email Exists

This means your email address has already been used by another Discord account to claim the Supporter role. Naomi will give you instructions on how to verify ownership of the email address.

Not a Supporter

This means your curriculum account has not been flagged as having donated. Reach out to Naomi, and she will provide you instructions so she can fix that - make sure to have your latest donation receipt ready.

No freeCodeCamp account

This means the email address you entered does not have a curriculum account associated with it. Double check the spelling, and make sure you are using the email you use to sign in at freecodecamp.org

Thank You

Thanks again for supporting our charity's mission. Your donation will help us continue to provide free learning resources to millions of people around the world.

Discord has to update often because the Discord team implements new features and bug fixes regularly.

In addition, the app itself must load new messages from chat rooms and DMs. Once the update fails, Discord gets stuck in an update failed loop.

In this guide, I will show you 4 ways you can fix the Discord update failed error on a Windows 10 computer.

What We'll Cover

• Double-check your Internet Connection
• Run Discord as an Administrator
• Rename Discord’s Update.exe File
• Temporarily Disable your Antivirus Program and VPN
• Uninstall and Reinstall Discord
• Conclusion

Solution 1: Double-check your Internet Connection

The first thing I would suggest you do is to check your internet connection.

That’s because Discord needs an internet connection to update, as the update has to be done over the internet. Once there’s no internet connection, the update won’t happen.

Make sure your Windows 10 PC is connected to the internet and the internet connection is strong enough.

Solution 2: Run Discord as an Administrator

A common solution to this issue is to run the Discord app as an admin.

This could fix the issue because any app you want to install needs admin privileges. Discord is not an exception, so granting it admin privileges can make it dig deeper into the issue and resolve it.

To run Discord as administrator, search for Discord and select Run as Administrator on the right:

Solution 3: Rename Discord’s Update.exe File

There’s a separate executable for updating Discord. This is the update.exe file in the Discord folder.

Renaming this file can force Discord to download a fresh one and subsequently fix the issue for you.

Follow these steps to rename Discord’s update.exe file Press WIN (Windows logo key) + R on your keyboard and type in %localappdata%.

Look for the Discord folder and open it.

Right-click on the Update.exe file and select rename. Then rename it to something like “Updater.exe”. You must not change the extension.

Open the app again and see if the problem gets fixed.

Solution 4: Temporarily Disable your Antivirus Program and VPN

Antivirus programs and VPNs are known for interfering with the normal functioning of computers and internet connections. So if you have one or both of them on your PC, it might be stopping Discord from updating.

To disable your antivirus and VPN, open Task Manager, right-click on WIN (Windows logo key) and select Task Manager.

Under processes, right-click on Discord and select “End Task”.

Solution 5: Uninstall and Reinstall Discord

If the solutions already discussed fail to work for you, the last resort is to uninstall Discord and reinstall it.

Step 1: Head over to Control Panel and select Uninstall a Program.

Step 2: Look for Discord, right-click on it and select uninstall.

Step 3: To completely remove Discord, press WIN + R on your keyboard, type %localappdata%, and click OK.

Step 4: Right-click on the Discord folder and select Delete.

Step 4: Download Discord again and install it.

Conclusion

I hope the solutions discussed above help you get Discord to update so you can start using it again.

Thank you for reading.

I was recently working on a Discord bot that had to detect the number of emotes in a given message. Today I'll share my process with you, including the newer JavaScript RegEx feature that finally solved the issues I was having.

How Unicode Emoji Work

The Unicode Consortium defines specific character codes for each emoji. They even maintain a helpful emoji chart as a reference. As an example, U+1F600 corresponds to the 😀 emoji.

Some emoji consist of multiple Unicode characters. This is most common with the flag emoji, which consists of the "regional indicators" that make up the country's two-letter country code.

This means the United States flag, 🇺🇸, consists of the two Unicode characters U+1F1FA and U+1F1F8, which correspond to the regional indicators U and S.

As a fun fact, it is up to the operating system to determine how to render an emoji. If you are on Windows, for example, you won't see a flag above. You'll see US.

What are Discord Emotes?

One of Discord's many features is allowing communities to upload their own custom emotes. These emotes are identified by a name, and are used with the syntax :emote_name:.

However, the way they are identified by the client/API is different. Each emote has a unique ID, and they're sent in the message content as <:emote_name:1234567890>, or <a:emote_name:1234567890> for animated emotes.

You can see this in Discord by putting a backslash \ before the emote and sending it. It will render something like this:

How to Match Emoji and Emotes with RegEx

My original approach had two different RegEx phrases.

I was using /(<a?)?:\w+:(\d{18}>)?/g to catch the Discord emotes. This RegEx was successfully picking up Discord emotes, which was great!

I paired it with /:[^:\s]*(?:::[^:\s]*)*:/g to match the Unicode emoji, which only partially worked. The problem here was that I was seeing some emotes being counted twice – because the Discord RegEx was matching them. And others were being missed entirely.

So, with RegEx being what it is, I tried to make it more complex. <:[^:\s]+:\d+>|<a:[^:\s]+:\d+>|(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]|\ufe0f)/g was a bit more successful in matching the built-in emoji, but still wasn't perfect. This RegEx was designed to match unicode characters specifically.

I played around with trimming whitespace, using the word boundary \b character, and a few other tweaks, before finally giving up and doing some research.

And then I discovered Unicode Property Escapes. This RegEx feature allows you to add the u flag to your RegEx, unlocking the Unicode Properties denoted with the \p character.

With some additional research, I was able to find the Emoji Character properties – specifically, the Extended_Pictograph property. This enabled me to update the RegEx to a final, functional value:

/<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu

The \p{Extended_Pictographic} property seems to match Unicode emotes as well as character modifiers (often used for skin tones in emoji).

Conclusion

This RegEx is currently running in my production code and hasn't shown any issues yet.

Hopefully this article has helped you. If you are interested in exploring Unicode Property Escapes further, the Unicode Consortium offers a full list of the available values.

Happy Coding!

By popular demand, we built a Discord bot that helps people track their progress in the challenge.

Today I am going to show you how to build your own 100 Days of Code bot.

Note that discord.js has released version 14, which includes breaking changes. For compatibility with this tutorial, you will want to ensure you are using discord.js 13 - you can install this with npm install discord.js@13. If you have any questions, feel free to join my discord server.

Create a Discord Bot Application

Your first step is to set up a Discord bot application. Head over to the Discord Developer Portal, sign in if needed, and select "Applications" from the sidebar.

Screenshot of the Developer Portal. If this is your first bot, you will not have any applications here.

Click the "New Application" button. Give it a name, and set it as a "Personal" application. You will now be taken to the application's settings. Here you can change the name, or give it an avatar.

Select "Bot" from the side bar, then click the "Add Bot" button. This will create a Discord Bot account for your application.

Screenshot of the Bot settings page. If you did not set an avatar, you will see a default based on your bot's name.

This is the screen where you will get the bot token. It is very important to keep this token secret, as the token allows your code to connect to your bot. Keep it safe and do not share it with anyone.

Now you need to add the bot to a server to interact with it. Click the "OAuth2" option on the sidebar, then select "URL Generator".

Under "Scopes", select bot and application.commands. The bot scope allows your bot account to join the server, and the application.commands scope allows you to update the slash commands (more on this later).

When you select bot, a new section for "Bot Permissions" will appear. Select the following permissions:

• Send Messages
• Embed Links
• Read Messages/View Channels

Screenshot of the OAuth screen with the required settings.

Copy the generated URL, and paste it into your browser. This will take you through Discord's process to add your new bot to a server.

Note that you must have the Manage Server permission in the server you want to add the bot to. If you do not have this permission, you can create a server to test your bot in.

Now you are ready to write some code!

Set Up Your Project

You will first need to set up the infrastructure and tooling for your project.

Ensure that you have Node.js version 16 and npm installed. Note that the packages you will use do not support earlier versions of Node.

Prepare the package.json

Create a directory, or folder, for your project. Open your terminal pointing to that new folder. Run the command npm init to set up your package.json file. For this tutorial, the default values are sufficient, but feel free to edit them as you wish.

You should end up with a package.json similar to this:

{
  "name": "100doc-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now you need to make a couple of changes to get ready for the TypeScript implementation.

First, replace the main value of index.js with ./prod/index.js – you will be setting your TypeScript to compile to a prod directory.

Then remove the test script and add the following two scripts:

"build": "tsc",
"start": "node -r dotenv/config ./prod/index.js"

The build script will compile your TypeScript into JavaScript so Node can run it, and the start script will run the index.js entrypoint file.

Adding the -r dotenv/config here will dynamically import and run the config method in the dotenv package, which loads your environment variables from the .env file.

Speaking of packages, your next step is to install dependencies. Using npm install, install these dependencies:

• discord.js – this is the library that will handle connecting to the gateway and managing the Discord API calls.
• @discordjs/builders – the discord.js package for constructing application commands
• @discordjs/rest – a custom API client for interacting with the Discord REST API.
• discord-api-types – Type definitions and handlers for the Discord REST API.
• dotenv – a package that loads .env values into the Node process.
• mongoose – A wrapper for the MongoDB connection which offers tools for structuring your data.

Finally, install the development dependencies with npm install --save-dev. Development dependencies are packages that are required for working on your project in a development environment, but not required for running the codebase in production.

• typescript – This is the package for the TypeScript language, which includes everything needed to write code in TypeScript and compile it into JavaScript.
• @types/node – TypeScript relies on type definitions to understand the code you write. This package defines the types for the Node.js runtime environment, such as the process.env object.

With these packages installed, you should now have a package.json similar to this:

{
  "name": "100doc-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "./prod/index.js",
  "scripts": {
    "build": "tsc",
    "start": "node -r dotenv/config ./prod/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@discordjs/builders": "^0.11.0",
    "@discordjs/rest": "^0.2.0-canary.0",
    "discord.js": "^13.6.0",
    "dotenv": "^14.2.0",
    "mongoose": "^6.1.7"
  },
  "devDependencies": {
    "@types/node": "^17.0.10",
    "typescript": "^4.5.4"
  }
}

Prepare TypeScript

TypeScript's compiler offers a number of different settings to maximise your control over the resulting JavaScript.

You can typically modify the compiler settings through a tsconfig.json file at the root of your project. You can generate the default boilerplate for this file with npx tsc --init, use an existing one if you set one up in another project, or even write one from scratch.

Because the compiler settings can significantly change the behaviour of TypeScript, it is best to use the same settings when following this tutorial. Here are the settings you should use:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./prod",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

The most important settings here are the rootDir and outDir settings. These tell the compiler that all of your code will be in the src directory, and the resulting JavaScript should go in the prod directory.

If you would like to test your settings, create a src directory and place an index.ts file inside. Write some code (such as a console.log statement) and run npm run build in your terminal. You should see a prod directory get created, with an index.js containing your compiled code.

Additional Setup Notes

If you are using git as a version control, you want to avoid pushing secrets and unnecessary code to your repository. Create a .gitignore file in your root project directory, and add the following content:

/node_modules/
/prod/
.env

The .gitignore file tells git not to track files/folders that match the patterns you enter. Ignoring the node_modules folder keeps your repository from becoming bloated.

Pushing the compiled JavaScript is also unnecessary, as your project is typically compiled in production before runtime. .env files contain secret values, such as API keys and tokens, so they should not be committed to a repository.

Create the Discord Bot

Your next step is to prepare the initial bot connection. If you did not do so earlier, create a src directory and an index.ts file within.

Start with an anonymous immediately-invoked function expression (IIFE) to allow for top-level await use:

(async () => {

})();

Within this function you are going to instantiate your Discord bot. At the top of the file, import the Client class with import { Client } from "discord.js";. The Client class represents your Discord bot's session.

Inside your function, construct a new Client instance and assign it to a BOT variable with const BOT = new Client();. Now the BOT variable will represent your bot.

To connect your bot to the Discord gateway and begin receiving events, you will need to use the .login() method on your bot instance. The .login() method takes a single argument, which is the token for the bot application you created earlier.

Many of the methods in discord.js are asynchronous, so you will need to use await here. Add the line await BOT.login(process.env.BOT_TOKEN); to your IIFE.

Your index.ts file should now look like this:

import { Client } from "discord.js";

(async () => {
  const BOT = new Client();

  await BOT.login(process.env.BOT_TOKEN);
})();

If you try to run npm run build, you will see an error: An argument for 'options' was not provided.

In discord.js 13, you are required to specify Gateway Intents when you instantiate your bot. Gateway Intents tell Discord what events your bot should receive.

In your src folder, create a config folder - then in config, create an IntentOptions.ts file.

Within that new file, add the line export const IntentOptions = ["GUILDS"]. This will tell Discord your bot should receive the Guild events.

Then, back in your index.ts file, add an argument to your new Client() call: new Client({intents: IntentOptions}). You'll need to import it at the top of your file with import { IntentOptions } from "./config/IntentOptions;.

It seems you still have an error: Type 'string' is not assignable to type 'number |${bigint}| IntentsString | Readonly<BitField<IntentsString, number>> | RecursiveReadonlyArray<number |${bigint}| IntentsString | Readonly<...>>'.

TypeScript is inferring your IntentOptions array as a string, but the Client constructor is expecting more specific types.

Head back to your config/IntentOptions.ts file and add another import: import { IntentsString } from "discord.js". Then update your variable with the new type definition: export const IntentOptions: IntentsString[] = ["GUILDS"];.

Now npm run build should be successful. If you have added your new bot to a Discord server, running npm start will show your bot come online in that server. However, the bot is not going to respond to anything yet, because you have not started listening to events.

Gateway Events in Discord

Gateway "events" are generated when an action happens on Discord, and are typically sent to clients (including your bot) as JSON payloads. You can listen to those events with the .on() method, allowing you to write logic for your bot to follow when specific events occur.

The first event to listen to is the "ready" event. This event fires when your bot has connected to the gateway and is ready to process events. Above your .login() call, add BOT.on("ready", () => console.log("Connected to Discord!"));.

For your changes to take effect, use npm run build again to compile the new code. Now if you try npm run start, you should see "Connected to Discord!" print in your terminal.

Connect to the Database

You'll be using the mongoose package to connect to a MongoDB instance. If you prefer, you can run MongoDB locally, or you can use the MongoDB Atlas free tier for a cloud-based solution.

If you do not have a MongoDB Atlas account, freeCodeCamp has a great tutorial on setting one up.

Grab your connection string for your database and add it to your .env file as MONGO_URI="", with the connection string going between the quotes. For the database name, use oneHundredDays.

Create a directory called database to hold the files that contain your database logic. Within that directory, create a file called connectDatabase.ts. You will be writing your logic to initiate the database connection here.

Start with an exported function declaration:

export const connectDatabase = async () => {

}

mongoose offers a connect method for connecting to the database. Import it with import { connect } from "mongoose"; at the top of your file.

Then use the method inside your function with await connect(process.env.MONGO_URI);. Add a console.log statement after that so you can identify that your bot has connected to the database.

Your connectDatabase.ts file should now look something like this:

import { connect } from "mongoose";

export const connectDatabase = async () => {
    await connect(process.env.MONGO_URI);
    console.log("Database Connected!")
}

Now, within your index.ts file, import this function with import { connectDatabase } from "./database/connectDatabase" and add await connectDatabase() to your IIFE, just before the .login() method. Go ahead and run npm run build again.

A compiler error, indicating that: Argument of type string or undefined is not assignable to parameter of type string.

Oh no – an error!

Environment Variable Validation

The problem with environment variables is that they can all be undefined. This often happens if you make a typo in your environment variable name, or mix the name up with another name (a mistake I made when writing this tutorial, using TOKEN instead of BOT_TOKEN in some places).

TypeScript is warning you that the connect method takes a string, and that an undefined value will break things. You can fix this, but first you will want to write a function to handle validating your environment variables.

Within your src directory, create a utils directory to contain your utility functions. Add a validateEnv.ts file there.

Create a function in the file called validateEnv. This function will be synchronous and does not need the async keyword. Within that function, add conditions to check for your two environment variables. If either one is missing, return false. Otherwise, return true.

Your code might look something like this:

export const validateEnv = () => {
  if (!process.env.BOT_TOKEN) {
    console.warn("Missing Discord bot token.");
    return false;
  }

  if (!process.env.MONGO_URI) {
    console.warn("Missing MongoDB connection.");
    return false;
  }
  return true;
};

Head back to your index.ts file and import this validation function with import { validateEnv } from "./utils/validateEnv". Then at the beginning of your IIFE, use an if statement to return early if the function returns false. Your index.ts should look like:

import { Client } from "discord.js";
import { connectDatabase } from "./database/connectDatabase";
import { validateEnv } from "./utils/validateEnv";

(async () => {
  if (!validateEnv()) return;

  const BOT = new Client();

  BOT.on("ready", () => console.log("Connected to Discord!"));

  await connectDatabase();

  await BOT.login(process.env.BOT_TOKEN);
})();

If you try npm run build again, you will see the same error message as before. This is because while we know the environment variable exists, TypeScript still cannot infer it. The validation function is set up to exit the process if the environment variable is missing, so we are going to tell TypeScript that it is definitely a string.

Back in your connectDatabase.ts file, within the connect function use process.env.MONGO_URI as string to coerce the type into string. The error should go away, and you can now run npm run build and npm start.

You should see the messages you wrote for both the Discord and MongoDB connections print in your terminal.

The "interaction" Event

While you are making great progress on your bot, it still does not do anything. In order to receive commands, you will need to create another event listener.

Discord rolled out slash commands, featuring a new UI and a new gateway event. The interactionCreate event is triggered when someone uses a slash command with your bot. This is the event you will want to listen to. Because the logic is a bit more complicated than the ready event, you will want to create a separate file.

Within your src directory, create an events directory, and an onInteraction.ts file in there. Start by defining an exported function onInteraction. This should be an asynchronous function, with a single parameter called interaction.

export const onInteraction = async (interaction) => {

};

To provide a type definition for your parameter, import the Interaction type from discord.js.

import { Interaction } from "discord.js";

export const onInteraction = async (interaction: Interaction) => {

};

The interaction event actually triggers on any command interaction, which includes things like button clicks and select menus, as well as the slash commands we want.

Because you will only be writing slash commands for this bot, you can filter out any other interaction type and help TypeScript understand the data you are working with.

In your new function, add a condition to check interaction.isCommand(). You will be writing logic within this block later.

import { Interaction } from "discord.js";

export const onInteraction = async (interaction: Interaction) => {
  if (interaction.isCommand()) {
  }
};

Now, back in your index.ts file, you can mount another listener. Next to your .on("ready") listener, add a BOT.on("interactionCreate") listener. For this event, the callback takes an interaction argument which you can pass to your new onInteraction function.

  BOT.on(
    "interactionCreate",
    async (interaction) => await onInteraction(interaction)
  );

Great! You can run npm run build to confirm that TypeScript doesn't throw any errors, but without actual commands to use you can't quite test this code yet.

Prepare for Commands

I maintain a few Discord bots, and one thing I've discovered that helps keep code maintainable and readable is making the components modular.

Define an Interface

You will first need to define a common structure for your commands. Create an interfaces folder in src. Then inside interfaces create a file called Command.ts.

Now you are going to create an interface. In TypeScript, an interface is often used to define the structure of an object, and is one of many tools available for declaring a variable's type.

In your Command.ts file, create an exported interface called Command:

export interface Command {

}

Your interface will have two properties – data, which will hold the command data to send to Discord, and run, which will hold the callback function and command logic.

For the data property, import SlashCommandBuilder and SlashCommandSubcommandsOnlyBuilder from @discordjs/builders. Define the data property as either one of those two types.

For the run property, import the CommandInteraction type from discord.js. Define run as a function which takes a CommandInteraction typed parameter and returns a void Promise.

import {
  SlashCommandBuilder,
  SlashCommandSubcommandsOnlyBuilder,
} from "@discordjs/builders";
import { CommandInteraction } from "discord.js";

export interface CommandInt {
  data: SlashCommandBuilder | SlashCommandSubcommandsOnlyBuilder;
  run: (interaction: CommandInteraction) => Promise<void>;
}

Create a Command List

Next you need a place to store all of your commands. Create a folder called commands in the src directory, and add a file called _CommandList.ts. The underscore here will keep this file at the top of the list.

The _CommandList.ts file will need two lines. First, import your Command interface, then declare a CommandList array. The array will be empty for now, but give it a Command[] type so TypeScript knows it will eventually hold your command objects. The file should look like:

import { Command } from "../interfaces/Command";

export const CommandList: Command[] = [];

The purpose of this file is to create an array of your bot's commands which you will iterate over in the interaction event listener. There are ways to automate this, but they tend to be unnecessarily complex for smaller bots.

Check for Commands

Back in your onInteraction.ts file, you should start working on the logic for finding and running a command.

In your interaction.isCommand() condition block, loop through the CommandList array (remember to import it!) with a for...of loop.

for (const Command of CommandList) {

}

The interaction payload received from Discord includes a commandName property, which you can use to find the command that a user has selected. To check this, compare interaction.commandName with the Command.data.name property.

if (interaction.commandName === Command.data.name) {

}

Now, if you have found the command the user has chosen, you need to run the logic for that command. This is achieved with a Command.run(interaction) call – passing the interaction payload into the command.

Your final file should look like this:

import { Interaction } from "discord.js";
import { CommandList } from "../commands/_CommandList";

export const onInteraction = async (interaction: Interaction) => {
  if (interaction.isCommand()) {
    for (const Command of CommandList) {
      if (interaction.commandName === Command.data.name) {
        await Command.run(interaction);
        break;
      }
    }
  }
};

Database Model

There's one more step before you are ready to start writing commands. This bot will track your community members' 100 Days of Code progress. And you need to store that progress in the database.

mongoose helps structure your MongoDB records to prevent you from passing malformed or incomplete data into your database.

Start by creating a models folder in your database directory. In that models folder, create a CamperModel.ts file. This will be your structure for the user objects.

You first need to import the necessary values from the mongoose library. Add import { Document, model, Schema } from "mongoose"; at the top of the file.

Because you are using TypeScript, you need to create a type definition for your database objects. Create another interface, like you did for your commands, named CamperInt.

export interface CamperInt extends Document {

}

Your database model will have four properties. Add these to your interface:

• discordId: string; – Every user object in Discord has a unique identifier, called a Snowflake, which is used to distinguish them from other users. Unlike a username or discriminator (the four digit number after the username), the id value cannot be changed. This makes it the ideal value for linking your stored data to a Discord user.
• round: number; – This will represent the "round" the user is on in the challenge. When someone completes 100 days of the challenge, they may choose to undertake the challenge again. When they do, they often refer to it as "round 2", for example.
• day: number; – This represents the day the user is on in the challenge.
• timestamp: number; – You will use this value to track when the user last submitted a 100 Days of Code post.

Great! Now you need to define the Schema for your database entries. mongoose uses a Schema object to define the shape of the documents that go in to your database collection. The Schema import has a constructor, which you will assign to a variable.

export const Camper = new Schema();

This constructor takes an object as its argument, and that object defines the database keys and types. Go ahead and pass in an object similar to what your interface looks like.

export const Camper = new Schema({
    discordId: String,
    round: Number,
    day: Number,
    timestamp: Number,
})

Next you need to create the model. In mongoose, the model object serves to create, read, and update your documents in the MongoDB database. Add export default model(); at the bottom of your file.

The model function takes a few parameters. The first is a string, and is the name to use for the documents in your database. For this collection, use "camper". The second argument is the schema to use for the data – use your Camper schema there.

By default, mongoose will use the plural version of your model name for the collection. In our case, that would be "campers". If you want to change that, you can pass in a third argument of { collection: "name" } to set the collection to name.

If you were using JavaScript, this would be enough to get your database model set up. However, because you are using TypeScript, you should take advantage of the type safety. model() by default returns a Document type of any.

To resolve this, you can pass a generic type into the model function. Generic types serve as variables for type definitions, in a sense. You need to set the generic type for your model to use your interface. Add the generic type by changing model to model<CamperInt>.

Just one more step here. Your CamperInt interface only defines the properties you set in the MongoDB document, but doesn't include the standard properties.

Change your export interface CamperInt to export interface CamperInt extends Document. This tells TypeScript that your type definition is an extension of the existing Document type definition – you are essentially adding properties to that structure.

Your final file should look like this:

import { Document, model, Schema } from "mongoose";

export interface CamperInt {
  discordId: string;
  round: number;
  day: number;
  timestamp: number;
}

export const Camper = new Schema({
  discordId: String,
  round: Number,
  day: Number,
  timestamp: Number,
});

export default model<CamperInt>("camper", Camper);

As a safety check, use npm run build again. You should not see any errors in the terminal.

Write Bot Commands

You are finally ready to start writing some commands! As this is a 100 Days of Code bot, you should start with the command for creating a 100 Days of Code update.

100 Command

Within your commands folder, create a oneHundred.ts file. This will hold your 100 Days of Code command. Import your command interface with import { Command } from "../interfaces/Command;.

Now declare an exported variable oneHundred and give it the Command type:

import { Command } from "../interfaces/Command";

export const oneHundred: Command = {

};

First, create the data property. You will be using the @discordjs/builders package to build a slash command.

Start by importing the SlashCommandBuilder() from the @discordjs/builders package. Then, construct a new instance in the data property with new SlashCommandBuilder(). You're going to chain some methods here to pass the information you want into the builder.

The .setName() method allows you to set the name of your slash command. Set the name to "100". The setDescription() option allows you to display a description of the command in Discord's UI. Set the description to "Check in for the 100 Days of Code challenge.".

Slash commands can also accept option values. These are used to take arguments from the user, and come in various types. For this command, you'll want a string option with the addStringOption() method. Option methods take a callback function, with an option parameter.

You can then chain methods on the option parameter to configure the information for the argument. Use the .setName() method to give the option a name of "message", and the .setDescription() method to give it a description of "The message to go in your 100 Days of Code update.". Finally, use the .setRequired() method to set the option to be required.

Here's what you should have now:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
};

If you are coding in an IDE with Intellisense enabled, you may have noticed that this will throw a type error on the data property. This is because the SlashCommandBuilder actually returns an Omit type! An Omit type is used to tell TypeScript that the type is almost the same as another type, but with specific properties removed.

Head over to your interfaces/Command.ts file to update the type. Replace the SlashCommandBuilder type with Omit<SlashCommandBuilder, "addSubcommandGroup" | "addSubcommand">. This will tell TypeScript that data should be a SlashCommandBuilder, but without those two specific properties.

import {
  SlashCommandBuilder,
  SlashCommandSubcommandsOnlyBuilder,
} from "@discordjs/builders";
import { CommandInteraction } from "discord.js";

export interface Command {
  data:
    | Omit<SlashCommandBuilder, "addSubcommandGroup" | "addSubcommand">
    | SlashCommandSubcommandsOnlyBuilder;
  run: (interaction: CommandInteraction) => Promise<void>;
}

Great! Now that your type error is resolved, head back over to your oneHundred.ts command file – it is time to write the command logic.

All of your bot's logic for responding to the command will go in the run property. As you did in your interface, start by creating an async function which takes an interaction argument. Then, let the first line of your function be await interaction.deferReply();.

Discord expects a bot to respond to a command within three seconds. Because this command may take longer to process, using the .deferReply() method sends an acknowledgement response that gives you a full 15 minutes to send the actual response.

Next, you need to extract some data from the command. First, destructure the user object out of the interaction payload with const { user } = interaction;. The user object represents the Discord user that called the command.

Then get the message option you sent with const text = interaction.options.getString("message", true);. With this line, you are accessing the options property of the interaction. The .getString() method specifically grabs a string option (remember that you created the option in data), and "message" is the name of the option. The true argument indicates that this is a required option, so TypeScript won't consider it nullable.

Your file should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);
  },
};

The next step in this command would be to fetch data from your database. Because many of your commands will need to do this, you should create a module for it.

Handling the Database Logic

Create a src/modules directory, and add a getCamperData.ts file within. Create an exported async function named getCamperData, and give it a string parameter named id. Then, within the function, you can query the database.

Import your CamperModel from the database directory, and use the findOne() method to query by the camper's id: const camperData = await CamperModel.findOne({ discordId: id });.

import CamperModel from "../database/models/CamperModel";

export const getCamperData = async (id: string) => {
  const camperData = await CamperModel.findOne({ id });
};

We still have one more step here. If the camper has not used the bot before, they won't have an existing database record. findOne() would return null in this case – so you can add a fallback value.

import CamperModel from "../database/models/CamperModel";

export const getCamperData = async (id: string) => {
  const camperData =
    (await CamperModel.findOne({ discordId: id })) ||
    (await CamperModel.create({
      discordId: id,
      round: 1,
      day: 0,
      date: Date.now(),
    }));
};

Finally, you need to return your data. Add return camperData at the end of the function. For extra type safety, define the return type of your function as Promise<CamperData>.

import CamperModel, { CamperInt } from "../database/models/CamperModel";

export const getCamperData = async (id: string): Promise<CamperInt> => {
  const camperData =
    (await CamperModel.findOne({ discordId: id })) ||
    (await CamperModel.create({
      discordId: id,
      round: 1,
      day: 0,
      date: Date.now(),
    }));
  return camperData;
};

You now have a way to get camper data from the database, but you need a way to update it as well. Create another file in your /src/modules directory called updateCamperData.ts. This will handle the logic to increment a camper's progress.

Start with an exported async function called updateCamperData. It should take a Camper parameter, which would be the data you fetch from MongoDB.

import { CamperInt } from "../database/models/CamperModel";

export const updateCamperData = async (Camper: CamperInt) => {

};

The only time you will update data is within the /100 command – where you'll want to increment the camper's day count, check if they have started a new round, and update the timestamp.

First, increment the day count with Camper.day++;. With the way the 100 Days of Code challenge works, if a camper has passed day 100 then they have started a new "round". You'll need a condition to check if Camper.day > 100, and if so, reset the day to 1 and increment the round.

After that condition, update the timestamp with Camper.timestamp = Date.now(); and save the data with await Camper.save();. Finally, return the modified data object so you can use it in the command.

Your final file should look like:

import { CamperInt } from "../database/models/CamperModel";

export const updateCamperData = async (Camper: CamperInt) => {
  Camper.day++;
  if (Camper.day > 100) {
    Camper.day = 1;
    Camper.round++;
  }
  Camper.timestamp = Date.now();
  await Camper.save();
  return Camper;
};

100 Command Continued

Now that your database logic is ready, return to your oneHundred.ts file. As a reminder, that file should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);
  },
};

Import your two new modules at the top of the file. Then, after your logic that extracts the values from the interaction object, fetch the camper's data from the database with const targetCamper = await getCamperData(user.id);. Update the data with const updatedCamper = await updateCamperData(targetCamper);.

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";
import { getCamperData } from "../modules/getCamperData";
import { updateCamperData } from "../modules/updateCamperData";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);

    const targetCamper = await getCamperData(user.id);
    const updatedCamper = await updateCamperData(targetCamper);
  },
};

Now you need to construct the response to send back to the camper when they use the command.

For this, you'll be using Discord's message embed feature. Start by importing the MessageEmbed constructor from discord.js, and creating a new embed with const oneHundredEmbed = new MessageEmbed();. The MessageEmbed class has a few methods to use for building the content of the embed.

Use the .setTitle() method to set the title of the embed to "100 Days of Code".

Use the .setDescription() method to set the description of the embed to the message the camper provided in the command (remember that you extracted this to the text variable earlier). The author of the embed can be set, and will display at the top of the embed.

Use the .setAuthor() method to pass an object with a name property set to user.tag (which will display the camper's username and discriminator, like nhcarrigan#0001), and an iconURL property set to user.displayAvatarUrl() (which will attach the camper's avatar to the embed).

Embeds also accept fields, which are smaller blocks of text that have their own title and description. The .addField() method takes two or three arguments, the first being the field title, the second being the field description, and the third being an optional boolean to set the field as inline.

Use the .addField() method to add two fields. The first should have the title set to "Round" and the description set to updatedCamper.round.toString(). The second should have the title set to "Day" and the description set to updatedCamper.day.toString(). Both fields should be inline.

For the last part of your embed, use the .setFooter() method to add small footer text. Pass an object with a text property set to "Day completed: " + new Date(updatedCamer.timestamp).toLocaleDateString() to show the time the camper reported their progress.

Finally, you need to send this new embed back to the camper. Because you have already sent a response with the interaction.deferReply() call, you cannot send another response. Instead, you need to edit the one you sent.

Use await interaction.editReply() to edit the response. The .editReply() method takes an object with various properties – in this case, you are sending an embed. Pass an object with an embeds property set to [oneHundredEmbed].

Note that this is an array containing your embed. Discord messages can contain up to 10 embeds, and the API expects an array of embed objects to match.

Your final command file should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { MessageEmbed } from "discord.js";
import { Command } from "../interfaces/Command";
import { getCamperData } from "../modules/getCamperData";
import { updateCamperData } from "../modules/updateCamperData";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);

    const targetCamper = await getCamperData(user.id);
    const updatedCamper = await updateCamperData(targetCamper);

    const oneHundredEmbed = new MessageEmbed();
    oneHundredEmbed.setTitle("100 Days of Code");
    oneHundredEmbed.setDescription(text);
    oneHundredEmbed.setAuthor({
      name: user.tag,
      iconURL: user.displayAvatarURL(),
    });
    oneHundredEmbed.addField("Round", updatedCamper.round.toString(), true);
    oneHundredEmbed.addField("Day", updatedCamper.day.toString(), true);
    oneHundredEmbed.setFooter({
      text:
        "Day completed: " +
        new Date(updatedCamper.timestamp).toLocaleDateString(),
    });

    await interaction.editReply({ embeds: [oneHundredEmbed] });
  },
};

Registering Commands

If you run npm run build and npm start, everything starts up – but you have no way to actually use your new command. This is because Discord requires that commands be registered so they are made available in the application UI. There are a few steps we'll need to take to do this.

First, head over to your _CommandList.ts file and import your oneHundred command. Add this to your CommandList array so it's available elsewhere.

import { Command } from "../interfaces/Command";
import { oneHundred } from "./oneHundred";

export const CommandList: Command[] = [oneHundred];

Now it is time to add the logic to send the command information to Discord. In your src/events directory, add an onReady.ts file. We'll be using this with the "ready" event.

Create an exported async function named onReady, and give it a single parameter called BOT. Import the Client type from discord.js and set the BOT typedef to Client.

import { Client } from "discord.js";

export const onReady = async (BOT: Client) => {};

Now import the REST module from @discordjs/rest. This will allow you to instantiate an API client, which you'll use to send the commands. Construct a new instance with const rest = new REST();.

There are a couple of things you'll need to configure with your REST client. First, pass an object into the REST() constructor with a version property set to "9". This tells the client to use version 9 of Discord's API, which is currently the latest version.

Then, chain a .setToken() call on the constructor to set the API token to process.env.BOT_TOKEN – you'll have to coerce this to a string.

import { REST } from "@discordjs/rest";
import { Client } from "discord.js";

export const onReady = async (BOT: Client) => {
  const rest = new REST({ version: "9" }).setToken(
    process.env.BOT_TOKEN as string
  );
};

The API expects command data to be sent in a specific JSON format, but thankfully the slash command builder we are using has a method just for that. Import your CommandList, then create a new array and map your command data.

const commandData = CommandList.map((command) => command.data.toJSON());

Before you send the commands to Discord, it's important to note that there are two types of commands. "Global Commands" are available everywhere your bot is used, but take about an hour to update. "Guild Commands" are available only in a single server, but update immediately. Because this bot is designed to run in a single server, we're going to use guild commands.

You'll need to get the ID of the server you are using the bot in. To do this, make sure you have enabled developer mode in your Discord application, then right click on your server icon and select "Copy ID". In your .env file, add a GUILD_ID variable and assign it the ID you copied. It should look something like GUILD_ID="778130114772598785".

Back in your onReady.ts file, start your API call with await rest.put(). Sending a PUT request will update any existing commands, where a POST will attempt to create new commands and error if commands share a name. Import Routes from discord-api-types/v9, and within the rest.put() call pass a Routes.applicationGuildCommands() call. This will be used to construct the API endpoint to send the commands to.

The applicationGuildCommands() call will take two arguments.

The first is the application ID to associate the commands with. You can get this from the BOT.user.id value – but user is potentially undefined, so you'll need to optionally chain it. Use BOT.user?.id || "missing id" to add a fallback value that will error out – this will allow us to know if the bot's ID is missing.

The second argument is the server ID, which you set up as process.env.GUILD_ID (remember to coerce the type!).

The .put() call needs a second argument as well, which is the data you want to send. Pass this as { body: commandData } to match the expected format.

Finally, add a console.log("Discord ready!") at the end of the file to indicate your bot is online.

import { REST } from "@discordjs/rest";
import { Routes } from "discord-api-types/v9";
import { Client } from "discord.js";
import { CommandList } from "../commands/_CommandList";

export const onReady = async (BOT: Client) => {
  const rest = new REST({ version: "9" }).setToken(
    process.env.BOT_TOKEN as string
  );

  const commandData = CommandList.map((command) => command.data.toJSON());

  await rest.put(
    Routes.applicationGuildCommands(
      BOT.user?.id || "missing id",
      process.env.GUILD_ID as string
    ),
    { body: commandData }
  );

  console.log("Discord ready!");
};

Switch to your index.ts file and locate your "ready" event listener. Replace the console.log call with your new onReady function – remember to import it, and make the callback asynchronous.

import { Client } from "discord.js";
import { IntentOptions } from "./config/IntentOptions";
import { connectDatabase } from "./database/connectDatabase";
import { onInteraction } from "./events/onInteraction";
import { onReady } from "./events/onReady";
import { validateEnv } from "./utils/validateEnv";

(async () => {
  if (!validateEnv()) return;
  const BOT = new Client({ intents: IntentOptions });

  BOT.on("ready", async () => await onReady(BOT));

  BOT.on(
    "interactionCreate",
    async (interaction) => await onInteraction(interaction)
  );

  await connectDatabase();

  await BOT.login(process.env.BOT_TOKEN);
})();

Now run npm run build and npm start, and head to your server in Discord. If you type / you should see your new /100 command show up. Try using the command and checking the response.

If you see this response, then you've successfully created your first command!

Congratulations! You have your first successful command. With all of the infrastructure you've built, adding additional commands will be much smoother. Let's go ahead and do that now.

Edit Command

What happens if a camper makes a typo in their /100 message? Because the bot sends the response, the camper cannot edit it (Discord does not allow you to edit messages you did not send). You should create a command that will allow a camper to do this.

Create an edit.ts file in your src/commands directory. Like you did with the /100 command, import your SlashCommandBuilder and Command interface, and export an edit object with the Command type.

Use the SlashCommandBuilder to prepare the data property. Give the command the name edit and the description Edit a previous 100 days of code post., then add two string options. The first string option should have a name embed-id and a description of ID of the message to edit., and the second should have a name of message and a description of The message to go in your 100 Days of Code update.. Both options should be required.

Your code should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const edit: Command = {
    data: new SlashCommandBuilder()
    .setName("edit")
    .setDescription("Edit a previous 100 days of code post.")
    .addStringOption((option) =>
      option
        .setName("embed-id")
        .setDescription("ID of the message to edit.")
        .setRequired(true)
    )
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
}

Create your run property with an async function and an interaction parameter. Destructure the channel and user from the interaction, and grab the embed-id and message options. Don't forget to defer the response!

    run: async (interaction) => {
        await interaction.deferReply();
        const { channel, user } = interaction;
        const targetId = interaction.options.getString("embed-id", true);
        const text = interaction.options.getString("message", true);
    }

The channel property is nullable (in cases where an interaction is sent via a DM, for example), so you'll want to check that it exists. If it does not, respond with a message that the command is missing parameters.

    if (!channel) {
      await interaction.editReply({
        content: "Missing channel parameter.",
      });
      return;
    }

Now that you know the channel exists, you can fetch the message that the camper wants to edit based on the ID they provided. Use channel.messages.fetch() to do this, passing in the targetId as the argument.

Because it is possible that the target message does not exist, you need to account for that in your code. Add a condition that checks for this, and if the message is not found respond with an explanation.

    const targetMessage = await channel.messages.fetch(targetId);

    if (!targetMessage) {
      await interaction.editReply({
        content:
          "That does not appear to be a valid message ID. Be sure that you are using this command in the same channel as the message.",
      });
      return;
    }

The last thing you need to check is that the message the camper is editing actually belongs to them. You can access the embed with the .embeds property – much like how you sent it, the property is returned as an array of embed objects.

Grab the first embed from the array, and then check that the embed author matches the user's tag. If not, let them know they cannot edit this post.

    const targetEmbed = targetMessage.embeds[0];

    if (targetEmbed.author?.name !== user.tag) {
        await interaction.editReply({
            content: "This does not appear to be your 100 Days of Code post. You cannot edit it."
        })
    }

Now that you have confirmed everything is correct, you can use .setDescription() on the embed to update the text. Then, edit the message with the new embed, and respond to the interaction with a confirmation.

Your full code should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const edit: Command = {
  data: new SlashCommandBuilder()
    .setName("edit")
    .setDescription("Edit a previous 100 days of code post.")
    .addStringOption((option) =>
      option
        .setName("embed-id")
        .setDescription("ID of the message to edit.")
        .setRequired(true)
    )
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { channel, user } = interaction;
    const targetId = interaction.options.getString("embed-id", true);
    const text = interaction.options.getString("message", true);

    if (!channel) {
      await interaction.editReply({
        content: "Missing channel parameter.",
      });
      return;
    }

    const targetMessage = await channel.messages.fetch(targetId);

    if (!targetMessage) {
      await interaction.editReply({
        content:
          "That does not appear to be a valid message ID. Be sure that you are using this command in the same channel as the message.",
      });
      return;
    }

    const targetEmbed = targetMessage.embeds[0];

    if (targetEmbed.author?.name !== user.tag) {
      await interaction.editReply({
        content:
          "This does not appear to be your 100 Days of Code post. You cannot edit it.",
      });
    }

    targetEmbed.setDescription(text);
    await targetMessage.edit({ embeds: [targetEmbed] });
    await interaction.editReply({ content: "Updated!" });
  },
};

Add your new edit command to your CommandList array, then build and run your bot and you should see the new command. Try editing the embed you sent earlier.

You should see your embed update, and a confirmation from the bot!

View Command

Campers should have a way to view their current progress, so we'll need to create a command to do so. By now, you should be comfortable with the command structure – we encourage you to follow these instructions but attempt to write the code without looking at the final result.

Create a view.ts file in your commands directory, and set up your command variable. Create the data property with a command that has the name view and the description Shows your latest 100 days of code check in. This command does not need any options.

Set up your async function in the run property, and defer the interaction response. Extract the user object from the interaction. Use your getCamperData module to fetch the camper's data from the database. Then, check if the data's day property has a non-zero value. If it does not, let the camper know that they have not started the 100 Days of Code challenge, and can do so with the /100 command.

Create an embed with a title set to My 100DoC Progress. Set the description to Here is my 100 Days of Code progress. I last reported an update on: and add the camper's timestamp. Add a Round and Day field, and set the author for the embed. Then send the embed in the interaction response.

Remember to add your new command to the CommandList, then try building and starting your bot. You should see the command available, and be able to get a response from it.

If you did not get the response, here is what your code should look like.

import { SlashCommandBuilder } from "@discordjs/builders";
import { MessageEmbed } from "discord.js";
import { Command } from "../interfaces/Command";
import { getCamperData } from "../modules/getCamperData";

export const view: Command = {
  data: new SlashCommandBuilder()
    .setName("view")
    .setDescription("Shows your latest 100 Days of Code check in."),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const targetCamper = await getCamperData(user.id);

    if (!targetCamper.day) {
      await interaction.editReply({
        content:
          "It looks like you have not started the 100 Days of Code challenge yet. Use `/100` and add your message to report your first day!",
      });
      return;
    }

    const camperEmbed = new MessageEmbed();
    camperEmbed.setTitle("My 100DoC Progress");
    camperEmbed.setDescription(
      `Here is my 100 Days of Code progress. I last reported an update on ${new Date(
        targetCamper.timestamp
      ).toLocaleDateString()}.`
    );
    camperEmbed.addField("Round", targetCamper.round.toString(), true);
    camperEmbed.addField("Day", targetCamper.day.toString(), true);
    camperEmbed.setAuthor({
      name: user.tag,
      iconURL: user.displayAvatarURL(),
    });

    await interaction.editReply({ embeds: [camperEmbed] });
  },
};

Help Command

The last thing you need to build is a help command, which will explain how campers can interact with the bot.

Create your help.ts file in the command directory, and create your data property. Give the command the name help and the description Provides information on using this bot.

Set up your run property with the async function, and remember to defer the reply. Create an embed, and use the description and fields to provide the information you would like to share with your campers. Send the embed in the interaction response.

Load your new help command into the CommandList, and build + start your bot to test it. You should see a response with the embed you created.

Your embed might look different, depending on what information you chose to share. Here's the code that we used for the above embed:

import { SlashCommandBuilder } from "@discordjs/builders";
import { MessageEmbed } from "discord.js";
import { Command } from "../interfaces/Command";

export const help: Command = {
  data: new SlashCommandBuilder()
    .setName("help")
    .setDescription("Provides information on using this bot."),
  run: async (interaction) => {
    await interaction.deferReply();
    const helpEmbed = new MessageEmbed();
    helpEmbed.setTitle("100 Days of Code Bot!");
    helpEmbed.setDescription(
      "This discord bot is designed to help you track and share your 100 Days of Code progress."
    );
    helpEmbed.addField(
      "Create today's update",
      "Use the `/100` command to create your update for today. The `message` will be displayed in your embed."
    );
    helpEmbed.addField(
      "Edit today's update",
      "Do you see a typo in your embed? Right click it and copy the ID (you may need developer mode on for this), and use the `/edit` command to update that embed with a new message."
    );
    helpEmbed.addField(
      "Show your progress",
      "To see your current progress in the challenge, and the day you last checked in, use `/view`."
    );
    helpEmbed.setFooter({ text: `Version ${process.env.npm_package_version}` });
    await interaction.editReply({ embeds: [helpEmbed] });
    return;
  },
};

Conclusion

Congratulations! You have successfully built a Discord bot for the 100 Days of Code challenge.

If you are interested in exploring further, you can view the source code for the live bot that inspired this tutorial, which includes custom error logging, external error reporting, and a documentation site.

But sometimes, when you're trying to establish a voice call connection, you'll get an error that says “RTC Connecting Discord”. This message will keep showing without any meaningful progress.

So what does this error mean?

Discord uses the Real-time Chat protocol (RTC) to run concurrent communication. So if you are experiencing the “RTC Connecting Discord” problem, it is a network issue.

In this article, I will show you 5 changes you can make to your network configurations to fix the RTC Connecting Discord issue. 3 of the fixes involve your computer network settings, while the remaining 2 happen right in your Discord app.

How to Fix RTC Connecting Discord by Updating your Network Driver

If your device relies on an outdated network adapter driver for internet connections, it could have a negative effect on your internet experience – and could cause this issue as well.

So, updating your network driver can fix the issue.

The steps below take you through how you can update your network adapter driver.

Step 1: Click on Start (Windows logo) and search for "device manager". Hit ENTER to open the first search result – which is always Device Manager. You can click on the "Device Manager" search result, too.

Step 2: Expand "Network Adapters."

Step 3: Look for the adapter in use, right-click on it and select "update driver".

Step 4: Select "Search automatically for drivers".

Windows will now search the internet for an updated driver and install it for you.

How to Fix RTC Connecting Discord by Changing your Domain Name Server

A domain name server (DNS) is assigned to you by your ISP (Internet Service Provider). Domain name servers make it possible to reach websites by typing addresses (URLs) to the browser instead of some unreadable numbers.

Changing this DNS to a widely used DNS like that of Google or Cloudflare can help you fix the RTC Connecting Discord issue.

To change your DNS to Google’s, follow the steps below.

Step 1: Right-click on Start and choose “Run” to open the Run dialogue.

Step 2: Type in “Control ncpa.cpl” (without quotes) and hit ENTER. This will open up your network connection devices.

Step 3: Right-click on your current network and select “Properties”.

Step 4: Look for Internet Protocol Version 4 (TCP/IPv4) and double-click it.

Step 5: Click on the “Use the following DNS server address” radio button and type in the following values:

• 8.8.8.8 for Preferred DNS Server
• 8.8.4.4 for Alternate DNS Server

Step 6: Click Ok.

Complete the setup with the next fix.

How to Fix RTC Connecting Discord by Clearing your Computer Network Cache in the Command Line

If you’re using the web-based Discord, this fix can work for you.

You can clear your network cache on your browser, but a more effective way to do it is to clear it right on your Windows 10 computer in the command line.

The steps below show you how to do it.

Step 1: Hit the WIN (Windows logo) key on your keyboard and search for "cmd".

You have to use the Command Prompt as an administrator, so you should select "Run as Administrator" on the right instead of just hitting ENTER to open it.

Step 2: Enter and execute the following commands one after the other:

• ipconfig /release
• ipconfig /flushdns
• ipconfig /renew

Step 3: Restart your computer.

How to Fix RTC Connecting Discord by Disabling QoS

Discord’s QoS (Quality of Service) communicates to your router that the units of data being transmitted are of high priority. This could make your router misbehave, and cause the RTC Connecting Discord issue.

So, disabling the QoS might fix it for you in case you have it enabled.

Follow the steps below to disable QoS on Discord.

Step 1: Launch Discord, then click on Settings on the bottom left corner.

Step 2: Select Voice and Video on the left panel.

Step 3: Scroll down to the QoS section and disable it.

Step 4: Restart the Discord app.

How to Fix RTC Connecting Discord by Changing the Audio Subsystem in Discord

In Discord, the Legacy audio subsystem has always been suggested as the best because it is the highest quality compared to the Standard and Experimental audio subsystems.

Changing your Audio subsystem to Legacy can make you establish quality audio – which can end up fixing the RTC Connecting Discord issue.

These steps take you through how to change your Audio subsystem to Legacy.

Step 1: Open Discord and click on Settings on the bottom left corner.

Step 2: Select Voice and Video.

Step 3: Scroll down to the Audio Subsystem dropdown and select “Legacy”.

Step 4: Restart Discord.

Conclusion

This article showed you how you can fix the RTC Connecting Discord problem you might experience when you are trying to use Discord's audio call feature.

Apart from the solutions explained in this article, you can try other minor fixes such as:

• Restarting your devices – computer and router
• Double-checking internet connection
• Using a VPN

Thanks a lot for reading this article. If you find it helpful, share it with your friends and loved ones.

Discord was originally created for gamers, but many other people now use it these days. It has become an alternative to Slack for many users – especially for those who want to have an online community.

But sometimes, Discord might not open when you launch it. This could be due to pending updates, running games, and other causes.

In this article, I will show you 5 quick ways you can make Discord open again on a Windows 10 computer.

Table of Contents

• How to Fix Discord Not Opening in the Command Line
• How to Fix Discord Not Opening by Clearing AppData
• How to Fix Discord Not Opening by Clearing LocalAppData
• How to Fix Discord Not Opening by Closing Background Applications
• How to Fix Discord Not Opening with the Task Manager
• Conclusion

How to Fix Discord Not Opening in the Command Line

The number one fix I would recommend to make Discord open again is to kill the Discord task with the Command Prompt.

This is how to do it:

Step 1: Click on Start or press WIN (Windows key) on your keyboard, then search for "cmd".

Step 2: Hit ENTER or select the first search result to open the Command Prompt.

Step: Type in taskkill /F /IM discord.exe and hit ENTER.

You should get a message that the Discord process has been terminated.

How to Fix Discord Not Opening by Clearing AppData

When you clear an app's AppData, all cache files are cleared – which can fix some problems, including loading.

Go through the following steps to clear your Discord's AppData:

Step 1: Press WIN (Windows key) + R to open the Run dialogue.

Step 2: Type in "%appdata%" (without quotes) and press ENTER on your keyboard. This will open up the AppData folder.

Step 3: Locate the Discord folder and delete it. Delete it from your Recycle Bin too.

How to Fix Discord Not Opening by Clearing LocalAppData

Clearing the Discord's LocalAppData can make it open again. It can also fix the common JavaScript error associated with Discord as well.

To clear LocalAppData, follow these steps:

Step 1: Press WIN (Windows key) + R to open the Run dialogue.

Step 2: Type in "%localappdata%" (without quotes) and press ENTER on your keyboard. This will open up the LocalAppData folder.

Step 3: Look for the Discord folder and delete it. Go to your Recycle Bin and delete it too.

Note that you might have to reinstall Discord to get it running again after clearing its LocalAppData. I can attest that this solves the issue as I recently had to do it.

How to Fix Discord Not Opening by Closing Background Applications

A lot of games run in the background and this could have a negative effect on your Discord app.

Use the steps below to fix the issue only if you don't have useful apps running in the background.

Step 1: Click on Start or press WIN (Windows key) on your keyboard and select Settings.

Step 2: Select "Privacy".

Step 3: Click on Background apps on the left, then turn off the toggle under "Let apps run in the background".

How to Fix Discord Not Opening with the Task Manager

Stopping the Discord process with the Task Manager can make Discord open again as this refreshes the app.

Step 1: Press CTRL + SHIFT + ESC to open the Task Manager

Step 2: Make sure you are under the Processes. Right-click on Discord and select "End Task".

Conclusion

In this article, you learned how to fix Discord when it won't open in a few different ways.

Apart from the methods discussed in this guide, you can also fix the issue by uninstalling and reinstalling Discord.

Note that you can also fix another popular issue with Discord – JavaScript error – by using one of the fixes suggested in this article – clearing LocalAppData. I've had to do this myself.

Thanks a lot for reading. If you find this article helpful, consider sharing it with your friends. That's very much appreciated.

In case you've seen my previous tutorial on this topic, stick with me as this version features lots of updates.

You can follow along with this tutorial using the code on my GitHub:

If you want, you can dive right into my video tutorial on YouTube – or read on for more details. 😎

What to Expect from this Tutorial

Here is an example of the Discord AI chatbot that we will have built by the end of this tutorial.

Chat demo with my bot in Discord. I drew the bot's icon 😊

My chatbot project started as a joke with a friend when we were playing video games.

I'm honestly surprised by how popular it became – there were 5.9k views of my previous tutorial, plus, when I deployed my bot to a 1k+ user server, people flooded it with 300+ messages in an hour, effectively crashing the bot. 😳 You can read more about my deployment post-mortem in this post.

Since a lot of people are interested in building their own bots based on their favorite characters, I updated my tutorial to include an in-depth explanation on how to gather text data for any character, fictional or non-fictional.

You may also create a custom dataset that captures the speech between you and your friends and build a chatbot that speaks like yourself!

Other updates in this tutorial address changes in Hugging Face's model hosting services, including API changes that affect how we push the model to Hugging Face's model repositories.

Outline of this Tutorial

The video version of this tutorial runs for a total of one hour and features the following topics:

1. Gather text data for your character using one of these two methods: find pre-made datasets on Kaggle or make custom datasets from raw transcripts.

2. Train the model in Google Colab, a cloud-based Jupyter Notebook environment with free GPUs.

3. Deploy the model to Hugging Face, an AI model hosting service.

4. Build a Discord bot in either Python or JavaScript, your choice! 🤩

5. Set up the Discord bot's permissions so they don't spam non-bot channels

6. Host the bot on Repl.it.

7. Keep the bot running indefinitely with Uptime Robot.

To learn more about how to build Discord bots, you may also find these two freeCodeCamp posts useful – there's a Python version and a JavaScript version.

How to Prepare the Data

For our chatbot to learn to converse, we need text data in the form of dialogues. This is essentially how our chatbot is going to respond to different exchanges and contexts.

Is Your Favorite Character on Kaggle?

There are a lot of interesting datasets on Kaggle for popular cartoons, TV shows, and other media. For example:

• Rick and Morty

• Harry Potter

• The Big Bang Theory

• Game of Thrones

We only need two columns from these datasets: character name and dialogue line.

Example dataset: Harry Potter movie transcript

Can't Find Your Favorite Character on Kaggle?

Can't find your favorite character on Kaggle? No worries. We can create datasets from raw transcripts. A great place to look for transcripts is Transcript Wiki. For example, check out this Peppa Pig transcript.

Example: Peppa Pig transcript

Using a regular expression like ([a-zA-Z|\s]+): (.+), we can extract out the two columns of interest, character name, and dialogue line.

Try it out on this Python regex website yourself!

How to Train the Model

Under the hood, our model will be a Generative Pre-trained Transfomer (GPT), the most popular language model these days.

Instead of training from scratch, we will load Microsoft's pre-trained GPT, DialoGPT-small, and fine-tune it using our dataset.

My GitHub repo for this tutorial contains the notebook file named model_train_upload_workflow.ipynb to get you started. All you need to do is the following: (please refer to the video for a detailed walkthrough)

1. Upload the file to Google Colab

2. Select GPU as the runtime, which will speed up our model training.

3. Change the dataset and the target character in code snippets like:

data = pd.read_csv('MY-DATASET.csv')
CHARACTER_NAME = 'MY-CHARACTER'

Running through the training section of the notebook should take less than half an hour. I have about 700 lines and the training takes less than ten minutes. The model will be stored in a folder named output-small .

Want an even smarter and more eloquent model? Feel free to train a larger model like DialoGPT-medium or even DialoGPT-large. Model size here refers to the number of parameters in the model. More parameters will allow the model to pick up more complexity from the dataset.

You may also increase the number of training epochs by searching for num_train_epochs in the notebook. This is the number of times that the model will cycle through the training dataset. The model will generally get smarter when it has more exposure to the dataset.

However, do take care not to overfit the model: If the model is trained for too many epochs, it may memorize the dataset and recite back lines from the dataset when we try to converse with it. This isn't ideal as we want the conversation to be more organic.

How to Host the Model

We will host the model on Hugging Face, which provides a free API for us to query the model.

Sign up for Hugging Face and create a new model repository by clicking on New model. Obtain your API token by going to Edit profile > API Tokens. We will need this token when we build the Discord bot.

Follow along with this section in my video to push the model. Also, remember to tag it as conversational in its Model Card (equivalently its README.md):

---
tags:
- conversational
---

# My Awesome Model

You will know that everything works fine if you are able to chat with the model in the browser.

How to Build the Discord Bot

Go to the Discord Developer's page, create an application, and add a bot to it. Since our chatbot is only going to respond to user messages, checking Text Permissions > Send Messgaes in the Bot Permissions Setting is sufficient. Copy the bot's API token for later use.

Sign up for Repl.it and create a new Repl, Python or Node.js for JavaScript, whichever you are working with.

Let's store our API tokens for Hugging Face and Discord as environment variables, named HUGGINGFACE_TOKEN and DISCORD_TOKEN respectively. This helps keep them secret.

Copy my Python script for a Python bot and my JS script for a JS bot. Note that for the JS bot, because of a version incompatibility with Repl.it's Node and NPM, we will need to explicitly specify a lower version of the Discord API in package.json.

"dependencies": {
    "discord.js": "^12.5.3",
}

With that, our bot is ready to go! Start the Repl script by hitting Run, add the bot to a server, type something in the channel, and enjoy the bot's witty response.

How to Keep the Bot Online

One problem with our bot is that it halts as soon as we stop the running Repl (equivalently, if we close the Repl.it browser window).

To get around this and keep our bot running indefinitely, we will set up a web server to contain the bot script, and use a service like Uptime Robot to pin our server every five minutes so that our server stays alive.

In my video tutorial, I copied the server code from these two freeCodeCamp posts (Python version, JavaScript version). Then, I set up the monitor on Uptime Robot. Now my bot continues to reply to my messages even if I close the browser (or shut down my computer all together).

Congratulations on reaching the end of this tutorial! I hope you enjoyed creating the bot and have fun chatting with your favorite character! 🥳

Tutorial Video Link

More About Me and My Chatbot Project

I'm Lynn, a software engineer at Salesforce. I graduated from the University of Chicago in 2021 with a joint BS/MS in Computer Science, specializing in Machine Learning. Come say hi on my personal website!

I post fun project tutorials like this on my YouTube channel. Feel free to subscribe to catch up on my latest content. 😃

Want to learn more about my bot? Check out this 15-minute real-time chat demo featuring me, my friend, and my bot!

Interested in the model I trained? Check it out on Hugging Face:

My chatbot was so popular on a 1k+ user server that... it crashed. 🤯 Read about my deployment post-mortem in this post:

Thanks for reading!

We just released a tutorial on the freeCodeCamp.org YouTube channel that will teach you how to create a discord chat bot that talks like a character of your choice. You will learn to create the bot in both Python and JavaScript.

Lynn Zheng created this course. Lynn is a software engineer at Salesforce and a hobbyist game developer. She is also a great teacher!

Here are the sections in this course:

• Gather data
• Train the model
• Deploy the model
• Build the Discord bot in Python
• Build the Discord bot in JavaScript
• Keep the bots online

Creating this awesome bot will make you feel like a programming wizard.

Watch the course below or on the freeCodeCamp.org YouTube channel (1-hour watch).

Transcript

(autogenerated)

Want to make a discord bot that talks like characters from Rick and Morty or Harry Potter? Maybe you want to make a talk like another favorite character.

In this course Lynn will show you how to create a discord bot that uses artificial intelligence to talk like a character of your choice.

Hi there. I'm Lynn. I'm a software engineer, hobbyist game developer and recent graduate from the University of Chicago.

In this tutorial, we're going to build a discord AI chat bot that can speak like your favorite character.

Before we start, if you haven't seen that video, by any chance, know that this video is something different and more comprehensive.

So keep watching to the end, the original tutorial and my first discord bot started as a joke between me and my friends when we were playing video games, and it really surprised me how popular it became and a lot of people wanted to build their own bot based on that tutorial.

Therefore, I decided to update that tutorial to include more characters, as well as to show you how to find data for your favorite character.

Other topics that we will cover here include, but are not limited to how to train the model, how to deploy the model, come the errors you might see during this model, training and deployment pipeline and how to solve them.

Moreover, we will cover how to build the bot in Python and how to build it in JavaScript.

Lastly, we will cover how to properly deploy the bot to a Discord server and to limit it to certain channels, and how to keep the bot running indefinitely.

I hope you're excited.

And let's jump into the tutorial.

First, we're going to find data for our character.

My favorite sources aren't kaggle transcript wiki, and just random fandom websites that came out from a Google search.

And my research process goes like this, I first search on kaggle to see if there are pre made dialog data set.

For example, if we search for Rick and Morty, we get this nicely formatted data set that includes the name of the character and the lines are speaking.

If we search for Harry Potter, here is another data set that includes the character and the sentence they're speaking.

Since we're building a chatbot, we need only these two columns in our data, set the character name and align their speaking.

So these dialog data sets on kaggle are perfect for our requirement.

Alright, if we succeeded in finding some data on kaggle, we can move on to the model training step.

But what if we cannot find a data set for our character on kaggle.

For example, if I want to find a data set for Peppa Pig, it looks like there is no data set for the character.

In this case, we may need to find a raw transcript of the media, be it a video game, a cartoon on a show.

And I've found that transcript wiki has some great resources.

So here we have a list of movies shows, video games, musicals commercials.

For example, I was able to find the transcript for Peppa Pig.

And also movies like Batman on transcript wiki.

The transcript looks like this.

So we have their character name and their actions or the lines they're speaking.

We will see shortly how to turn a raw transcript like this into a data set like those we saw on kaggle.

Besides transcript wiki, you may also just Google the name of your media with the keyword transcript.

For example, my first thought was based on the game, the word ends with you.

And it has no results either on kaggle or transcript wiki.

So what I did was to just Google the name of the game and game transcript.

And it just happened that this fandom website has the full game transcript.

So Be sure to utilize your Google Search skills to find data for your character.

If rather than a fictional character, you are more interested in real life character, you may search for interview scripts as your data source.

If you want to create a chatbot that speaks like yourself or your friends, you can treat text messages between you and your friends as dialogues, and handcraft, your data set.

There are tons of ways to get data for your character.

So be creative.

And now we will look at how to turn raw transcripts into data set.

Now, suppose we have found our raw transcript, let's see how we can turn it into a two column character line data set.

Suppose we take this Peppa Pig transcripts and copy them into a text file.

Now we go to Google colab and upload our data file.

Now we create a Google colab notebook.

And use those to parse our script.

So I'm going to name this parse script ipnb.

And we are going to from Google colab can import drive and then called drive about mount content drive.

This will allow us to read the data from our Google Drive.

Alright, now that our drive has been mounted, let's import OS and then OS change directory into content, drive by drive.

And then we see if there's anything in it.

Yeah, we have our Peppa Pig dot txt.

So here we are going to import regular expression to parse our transcript, put the parsed result into a panda's data frame, and export it as a CSV file just like those we saw on kaggle.

This is going to be our regular expression pattern.

You don't have to be a pro a regular expression to understand this part.

If we take the pattern to this site, and our testing is Peppa Pig you will see that we have two match capture groups, the first being the character's name, the second being the line spoken.

And also for the second line mama pig, we have the character name and the line being spoken.

Right so that's all right, regular expression.

Now, let's define a dictionary that will store our data.

So we know that we need the column name and the column line in our result data frame and then we open and read the file For each line, we match it with our regular expression pattern.

If there is a match, we extract name and light from this regular expression match, and then append it to our dictionary here.

And then we convert this dictionary into a data frame.

Now we can inspect the data frame, quote.

So we have the name is Peppa Pig saying that I'm Peppa Pig.

And George makes the sound that mama pig makes the sound great.

We can also count the number of lines that belong to our character.

So we do some the F name is equal to Peppa Pig.

And we saw that Peppa Pig has 38 lines in our entire data frame.

So the length of our data frame is over 100 and Peppa Pig has 1/3 of the lines.

The last step will be to export the data frame.

So df.to, CSV, the name will be Peppa Pig.

csv and and we will drop the index.

Cool.

Now we should have a Peppa Pig dot CSV in overdrive.

And hear this name and line.

This is how we parse those raw transcripts into a file that can be used in our model training.

So next, let's proceed on to the exciting step model training.

Now we're going to train the model.

Go to my GitHub repository linked to in the description below and download the content.

We're going to use those model train upload workflow the IP one MB which looks like this.

Alright, now our file has been downloaded, we unzip the content.

And in here we have a model training upload workflow dot ipnb.

We upload this notebook file to Google Drive and open it in Google colab.

We are going to train a GPT model which is short for generative pre trained transformer.

In the runtime change runtime type.

Make sure to select GPU because this will accelerate our model training.

So now here we mount the drive.

We install the Transformers module that we'll be using.

And we change directory into my drive.

Here are all the modules that we are importing.

If we're using the data set from kaggle, we need to obtain our API key from kaggle.

So go to our kaggle profile, go to account.

Scroll down to the API key section.

Create a new API token and download this file as kaggle dot JSON.

We'll go back to Google Drive and upload kaggle dot JSON.

Now we can download our data set from kaggle, we're going to use the Harry Potter data set as the example.

So grab those user name and the data set name.

And our file is here part one dot CSV.

Not not because there are white spaces, in our file name, we got special characters in the file name.

So let's inspect the contents of our data file.

Well, CSV files are usually separated by commas, hence the name CSV.

However, this one looks like it's separated by semicolons.

So we need to take care of the semi colons where we're reading the data into a panda's data frame.

So separation is semicolon instead of a comma.

Cool.

So let's sample data to see what's inside.

Alright, so we have character and sentence.

Notice that these two column names aren't exactly what we need.

We want the two columns of our data frame to be named as name and line as use down here in this cell, so we need to change the name of our columns.

Alright, let's resample our data.

Looks like we have successfully changed the name of our columns.

Now let's see how big our data is.

So he only has 1000 or so lines.

And let's see how many lines our character has.

Our character has 155 lines.

So here we change our character name to Harry.

And we now run this cell to create a context data frame that includes the current line our characters speaking, and several lines directly preceding the line.

Context data frame is useful here because we are creating a conversational chatbot.

And we want to generate a response based on the conversation context.

So let's sample our context data frame.

So in the context of clarity, something something our character respond with seems a pity not to ask her.

Great, now we have our data set, which split the data set into a training set and a test set.

This is because we don't want to overfit the model.

In the case of overfitting, the model will just memorize the lines from the data set and talk back to us using the exact lines, we don't want that we want the conversation to be more organic.

So we're only training the model on a training set and evaluating the model on the test set.

So we continue running these cells to build data sets, caching checkpoints, and down here we built the model.

We'll build our model by fine tuning Microsoft's pre trained GPT small.

Small here refers to the number of parameters in the model.

There are also a medium and a large model.

Generally, the larger the model, the longer it takes to train, but the smarter the model can get.

I would recommend that training a medium model, as it's pretty smart and not too hard to change.

My production chatbot that is currently running on a server with 1000 plus users is also a medium model.

For this tutorial for the sake of time, I'm training just a small model.

You can see here it's downloading the model.

And this may take some time because it's essentially 300 megabytes.

Here are some hyper parameters that you may find useful.

For example, num train aprox is the number of training aprox.

This is defined to be four here, and this is the number of times that the model will cycle through the training set.

As long as the model is not overfitting, increasing the number of training epochs usually results in smarter models.

Because the model has more time to cycle through the data set and pick up the nitty gritty details.

There's another hyper parameter called the batch size.

This is the number of training examples that the model will see in the batch before he updates his gradient.

I wouldn't recommend changing this unless you know what you're doing, since other hyper parameters like learning rate and temperature might be sensitive to this change in batch size.

However, if you're training a larger model on a larger data set and are running into memory errors, to make the error go away a might help to decrease the batch size.

The remaining cells have been configured to taking this context data frame we've created, trained the model and save it to a folder called output small.

Now let's run this main function.

training will take some time, I trained my medium model for 12 epochs, and it took around two hours.

So do sit back and grab a snack while the model is training.

You can see the progress in the progress bars about Alright, here we get back a perplexing cancer.

This usually refers to how confused the model is.

If a model has a large complexity, it means that the model is pretty confused as to which words to choose to respond to a given situation.

And the model might not be very smart.

In our case, our data set is pretty small.

It only has 150 plus lines.

So it makes sense about the perplexity is high to decrease the perplexity we might need to train for more epochs.

Cool.

But now that the training is complete, we can load and chat with the model here.

That's changed the name of the Hello, fellow read writer.

So let's ask pause.

Quidditch.

There's no such thing as a bad read writer.

Great, it looks like our chat bots is capable of making and maintaining a conversation.

Now we can push the model to Huggy face and start building our discord chat bot.

Alright, now let's change directory just into the content folder.

Because we'll be doing our push there.

And we do pip install hugging face command line client.

And then we're logging using our credentials.

Right after logging were assigned this token, we need to grab this token Go for the song that we need to do afterwards.

So we can create a repository to store all models from the command line, my is going to be called dialogue up at small Harry Potter.

And our empty model repository is right here.

There's nothing except for the get attributes file, but we will be adding the model file soon.

Now we still get Fs, which stands for get large file storage, this wall allows us to push and pull all models.

And we've replaced this token with the takeaway just copied from the above.

So here's my username and my token.

And we call it our training result is stored in this output small directory.

And then we change directory into our dialog up the small directory because we need to do git add and permit from there, we saw the get Fs and inspect the contents our current directory, which should be dialogue GPT, small her father and also just printed out the working directory where to make sure that we are inside content.

Cool.

Now we check the file status on Git.

So these files not we need to add to get.

So we do a git add this will take some time because the pytorch model dot being is pretty large.

And we configured a global username and user email.

These are just my hug and based credentials.

That would come in with message initial comment.

And finally, we'll push the model.

It's about 400 megabytes because the pytorch model is itself about 400 megabytes.

Alright, looks like the push is complete.

Now we see our pytorch model here.

However, there's one more thing that we need to do before we can converse with the model on Huggy face.

That is, you see here, it's tagged as text generation.

However, we know that we are training a chatbot model, and we want our model to be conversational.

For that purpose, we need to edit the model card.

So we create a model cart here and we're putting our desired model tax so our tax is conversational.

We come in our model card.

And now our model is correctly tagged as conversational.

If we go to the main model page, we can start chatting with the model here.

Alright, now that we have pushed our model to hugging face, we're ready to use it in our discord chat bots.

Now we have our model let's build the discord bot here on Discord.

I have my server lease dev lab.

I have two channels, one for the Python bot and one for the job as robot The reason why we have separate channel for the bots is because we don't want the bots to be talking to each other.

So after we built the bot, we will learn how to set their permissions correctly so that they don't go outside of their dedicated channel.

So we go to discord, developers page, create an application, we need one application per bot.

So our name will be chatted about Python.

So here we create a bot.

And I'm going to name this Harry Potter, bot, Python and upload an icon.

We will be using this API token here.

When we create our bot in Python, we're going to host our bot our rapida it so sign up for repple.id and create a new Python repple here going to name those chatty, but I thought and in here, we will need to store our API tokens for Huggy face underscore us environmental variables.

So here is the top for the secrets for the environment variables.

So the first one will be hugging face token.

And for the value, we'll go to our hugging face profile or the profile API tokus, copy the API token, come back here and fill in that value.

Next, we'll created this core token.

And for this value, would go to this discord developers portal and copy the token.

Three, add the token here.

And our environment variables are all set.

Next, I have the Python file in my GitHub repository called this court bot dot p y.

So we brought the code from here, and I'll explain the code line by line.

Starting from line one, we're first import the OS module that will help us reading our environment variables.

Next, we import modules that are useful for querying the Huggy face model.

Finally, we'll import the discount module.

And here I have my API URL pointing to my username.

And with the Find a bot as follows.

In the init function, it takes in a model name, which for me will be dialogue GPT small Harry Potter.

Then we store this API endpoint by concatenating this API URL, which is my profile link with the model name.

Now we retrieve the secret API token from the system environment by looking at Oh s dot environment hugging face token.

Next, we format the header, you know request to Huggy face.

For the authorization part.

We're putting bearer and the hugging face token.

Next, we'll define the quorum method that takes in the payload.

we dump the payload as a JSON string.

And use the request module to make an HTTP POST request to the API endpoint using our defined request headers, which contains our hugging face API key and passing the data.

Once the request finishes, it should give us a response object and we decode it from UTF eight and load the result as us rate and return to string.

Next, would you find an asynchronous function named already.

The next two function definitions are based on the discord API.

Both are asynchronous function.

The first one is already, this function will be called when the bot is logging in.

So when the bot is logging, we will print out logged as print out the bots name and a bot ID so that we know that the bot is functioning.

Next, because our bot is a chatbot, it needs to respond to messages.

So our message is a method that will be called each time the bot sees a message in the channel.

So given the message, if the message is coming from the bot itself, the bot ignores the message and does not reply to it.

Otherwise, it will form a Korea payload with the content of the message.

And to make the bot more user friendly.

While the bot is waiting for the HTTP response from the model, we set its status as typing so that the user will know that the bot is generating its response.

So this is a synchronous call with a message.channel.tv.

We call it soft query using the payload and get back the response.

If there is a valid generated response, there will be a generated tax field in this response.

And we'll be able to get that out as a bots response.

Otherwise, there might be an error in the response, we just log out the error message so that we can debug later on.

Finally, we use another asynchronous method to send the bots response to the channel using message dot channel dot send.

And that's it about our bot definition.

In the main function we just created about passing the model name.

So for me, this is style gptc small Harry Potter and us client that run looking up the score token from the environment variables.

Great now that our bot should be all set up that seemed like the bot to our channel.

In the OAuth two tab, we are going to select the bot.

And for the bot permissions.

The only thing you need is to send messages.

So we copy this URL, paste it in a new browser window and invited to my server.

Alright, now that we see that our bot has appeared, however, it shows as offline.

So we need to run the repple.

So we hit run here.

And rapport is installing all our dependencies and imports.

Great now that our bot has logged in as Harry Potter about Python, and this is its unique ID.

Let's go to the server.

And now that the bot is online don't want the bot to appear in the general channel.

So we go to the channel setting permissions.

Advanced permissions add a bot and we remove it permission to send messages and save the changes.

Now, let's see what happens if I type something in the general channel, nothing should happen because the bot shouldn't be able to send a message.

Nothing happens, although the bot is online.

And now this bot should work in this Python bots channel.

So let's do Hello.

And we briefly saw not there's a typing prompt.

Cool.

So yeah, this is how we built a bot in Python.

One thing to know, you know, raphoe, though it is not, because we took away the bots permission to send the messages in the general channel, it is showing an exception, and this is totally okay.

If you don't like seeing this exception, you can use the try, accept block and log out this exception.

Great.

So now we're going to repeat the process for the JavaScript bot.

So we go back to the discord developer portal, and create a new application.

This time, I'm going to call it chatty bots, JavaScript.

And I'll create a bot.

Back to wrap it, we create a node.js app.

going to call it chadic, thought js.

We again create two environmental variables.

The first one is hugging face token, copying my API token from my profile Edit Profile, putting here and copy my discord bot token.

Call this one this court token and adding the value.

Great.

Now we have our environment variable set up.

Go to my GitHub repository, there is a discord bots.js file that contains the code that we will use for this JavaScript chatbot.

Let's copy paste.

And I'll go through the code line by line.

So first, we import the discord CPI for the JavaScript module.

And we import fetch for making HTTP requests, just like with it in Python.

And we initialize a new discord client and define the model URL just as my user name and the model name.

So this guy is the LGBT small Harry Potter.

And this is the same callback that is called when the bot is ready, just like the already function we saw in Python.

So when the bot is ready, and logged in, we print out logged in as client user dot Tak.

And here is another callback.

This time all message, we use an asynchronous callback, because we are making HTTP requests.

Like in the Python script, we ignore the message if the message is from the bot itself.

By checking if message dot author is the bot.

Now we formed the payload.

So the payload is a dictionary containing inputs with text message content, which is the message that the bot has received.

And we formed the request headers by again, using the Huggy face API key.

So we read the Huggy face token from the environment, process dot m dot hugging face token and form the headers.

Right before we start making the HTTP request, we set the bot status to typing.

Now record a server.

So the response is the result from this call to fetch using HTTP POST, given the payload as the body and the headers using the Huggy face token.

And we convert the response into JSON format, and extract out the generated text field.

If there isn't a generate a text field in the response, but is that the response contains a narrower field.

This means that the board has encountered some errors, and we may want to print out the error for further debugging.

Now that we have the bots response, we can clear out his typing status and sent the message to the channel as a reply.

This ends the definition of our client dot our message call.

Down here, we log in using the discord token.

Now let's invite the boss to our server.

So we go to o auth.

Check the bot, it only permission is to send messages.

We copy this paste in a new browser window and invite it to our server.

Great looks like we have another bot.

Remember to click on save changes.

Otherwise, the bots icon wouldn't be showing.

Now that we have our bot, however, it's not logged in.

So we need to go back to the repple to run our script.

But before we run our repple, let's make sure that the bot doesn't have access to the general channel.

Nor does it have access to the Python channel because it's not supposed to go there.

So in permissions, we find this chat about JavaScript.

Remove its permission to send messages.

And always remember to save the changes.

We do the same thing for it on the Python channel and go to the jazz channel.

This time, the one we need to remove is the Python bot.

So this Python bot shouldn't be able to send messages to this JavaScript channel.

Now we go back to run our raphoe dotnet.

If you see this error, this means that the discord version that NPM is trying to install is wrong.

You can see that there are those warnings that the newest discord module is not compatible with rapida its version of node, or NPM.

So we need to manually change something in package dot JSON.

So here, we just use the older version and rerun it.

Now that we are logged in as chatty about JavaScript 1048 let's go back to our discord channel.

Call the chat about is also online.

Let's see if a response to our messages.

Alright, right.

So this is now an error message telling us that the model is still loading.

The model will usually take one or two minutes to load.

So let's give it some time.

Great looks like our bot is responding to us.

And because we have set the bots permissions correctly, the Python bot is not responding to any messages here.

And the JavaScript bots shouldn't be able to talk here.

And in our general channel, nobody is ever allowed to talk here.

Cool.

So now we have successfully built the bot both in Python and in JavaScript.

One thing to note is that if I close the browser tab for the Python bot, the bot is no longer responding, although it still shows that the bot is online.

So in the next part, we're going to look at how to keep the bots running indefinitely in the browser, even when we close the browser tab.

In order to get our bot to run indefinitely, we need to create a web server in raphoe dotnet, and set up a service called uptime robot to continuously ping the web server.

So this is for the Python bot.

And we create a new file called people live dot p y.

And we add the code for a web server like this.

And in our main.py, we import that part.

And down here in the main function, right before the bot runs.

We ask it to be kept alive.

We run it.

When the code runs, we see a URL shown in this tab.

And we copy this URL and bring it to our uptime robot service.

So here is the uptime robots website.

And I already have an account.

So I'll just go to my dashboard and add a new monitor.

Monitor montra type is going to be HTTPS friendly name, this court, Python but the URL is the one we copied from here.

And monetary level will be a ping every five minutes that should be sufficient.

And finally we create, monitor and close it.

Now let's see if our Python bot is capable of running indefinitely.

Alright, I'm going to close this top containing my Python script.

And it looks like our model is still up.

It's just that after some time, the model or Huggy face backend will reload because the bot itself is responding.

We know that our web server approach has worked Now let's repeat this process for the JavaScript bot.

We create a new file called server.js and copy paste base code waiting for import this part from the file that we just created.

Finally, right before to bought Roz, we are going to call keep alive.

Stop this service.

And right.

Alright, the server is now ready.

We copy this URL, go to uptime robot and add a new monitor.

It's again HTTP monitor this cord.

js bot, and the URL is like this.

We create a monitor.

Now we can safely close this browser window and go back to our discord chat about is still running.

Great.

Now we're all done.

We have a cool Python chat bot and a cool JavaScript chat bot not can run indefinitely.

I hope you enjoyed this video.

Please subscribe for more content like this and I'll see you in the next one.

By popular demand, we recently built a Discord bot that helps people track their progress in the challenge.

Today I am going to show you how to build your own 100 Days of Code bot.

How to Create a Discord Bot Application

Your first step is to set up a Discord bot application. Head over to the Discord Developer Portal, sign in if needed, and select "Applications" from the sidebar.

Screenshot of the Developer Portal. If this is your first bot, you will not have any applications here.

Click the "New Application" button. Give it a name, and set it as a "Personal" application. You will now be taken to the application's settings. Here you can change the name, or give it an avatar.

Select "Bot" from the side bar, then click the "Add Bot" button. This will create a Discord Bot account for your application.

Screenshot of the Bot settings page. If you did not set an avatar, you will see a default based on your bot's name.

This is the screen where you will get the bot token. It is very important to keep this token secret, as the token allows your code to connect to your bot. Keep it safe and do not share it with anyone.

Now you need to add the bot to a server to interact with it. Click the "OAuth2" option on the side bar. You should see a form under the "OAuth2 URL Generator" section. Leave the "Select Redirect URL" dropdown blank, and check the box for the "bot" scope.

An option to select permissions will appear. Check the boxes for the following permissions:

• Send Messages
• Manage Messages
• Embed Links
• Read Message History
• View Channels

Above that section, you should see a URL generated. Click the "Copy" button to copy it, then paste it into your browser and go.

This will take you through Discord's process to add your new bot to a server. Note that you must have the Manage Server permission in the server you want to add the bot to. If you do not have this permission in any servers, you can create a server to test your bot in.

Screenshot of the OAuth screen with the correct settings marked.

Now you are ready to write some code!

How to Set Up Your Project

You need to set up the infrastructure and tooling for your project.

Prepare the package.json

Create a directory, or folder, for your project. Open your terminal pointing to that new folder. Run the command npm init to set up your package.json file. For this tutorial, the default values are sufficient, but feel free to edit them as you wish.

You should end up with a package.json similar to this:

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now you need to make a couple of changes to get ready for the TypeScript implementation.

First, replace the main value of index.js with ./prod/index.js – you will be setting your TypeScript to compile to a prod directory.

Then, remove the test script and add the following two scripts:

"build": "tsc",
"start": "node -r dotenv/config ./prod/index.js"

The build script will compile your TypeScript into JavaScript so node can run it, and the start script will run the index.js entrypoint file.

Adding the -r dotenv/config here will dynamically import and run the config method in the dotenv package, which loads your environment variables from the .env file.

Speaking of packages, your next step is to install dependencies. Using npm install, install these dependencies:

• discord.js – this is the library that will handle connecting to the gateway and managing the Discord API calls.
• dotenv – a package that loads .env values into the node process.
• mongoose – A wrapper for the MongoDB connection which offers tools for structuring your data.

Finally, install the development dependencies with npm install --save-dev. Development dependencies are packages that are required for working on your project in a development environment, but not required for running the codebase in production.

• typescript – This is the package for the TypeScript language, which includes everything needed to write code in TypeScript and compile it into JavaScript.
• @types/node – TypeScript relies on type definitions to help understand the code you write. This package defines the types for the Node.js runtime environment, such as the process.env object.

With these packages installed, you should now have a package.json similar to this:

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "node -r dotenv/config ./prod/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "discord.js": "^12.5.3",
    "dotenv": "^10.0.0",
    "mongoose": "^5.12.14"
  },
  "devDependencies": {
    "@types/node": "^15.12.2",
    "typescript": "^4.3.4"
  }
}

Prepare TypeScript

TypeScript's compiler offers a number of different settings to maximize your control over the resulting JavaScript.

You can typically modify compiler settings through a tsconfig.json file at the root of your project. You can generate the default boilerplate for this file with npx tsc --init, use an existing one if you set one up in another project, or even write one from scratch.

Because the compiler settings can significantly change the behaviour of TypeScript, it is best to use the same settings when following this tutorial. Here are settings you should use:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./prod",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

The most important settings here are the rootDir and outDir settings. These tell the compiler that all of your code will be in the src directory, and the resulting JavaScript should go in the prod directory.

If you would like to test your settings, create a src directory and place an index.ts file inside. Write some code (such as a console.log statement) and run npm run build in your terminal. You should see a prod directory get created, with an index.js containing your compiled code.

Additional Setup Notes

If you are using git as a version control, you want to avoid pushing secrets and unnecessary code to your repository. Create a .gitignore file in your root project directory, and add the following content:

/node_modules/
/prod/
.env

The .gitignore file tells git not to track files/folders that match the patterns you enter. Ignoring the node modules folder keeps your repository from becoming bloated.

Pushing the compiled JavaScript is also unnecessary, as your project is typically compiled in production before runtime. .env files typically contain your secret values, such as API keys and tokens, so they should not be committed to a repository.

If you are using a UNIX based environment (such as Linux, or Git Bash on Windows), you can also add a prebuild script to your package.json. The prebuild script will automatically run before the build script when you use npm run build. I set mine to clean up the existing prod directory with rm -r ./prod.

How to Create the Discord Bot

Your next step is to prepare the initial bot connection. If you did not do so earlier, create a src directory and an index.ts file within.

Start with an anonymous immediately-invoked function expression (IIFE) to allow for top-level await use:

(async () => {

})();

Within this function you are going to instantiate your Discord bot. At the top of the file, import the Client class with import { Client } from "discord.js;". The Client class represents your Discord bot's session.

Inside your function, construct a new Client instance and assign it to a BOT variable with const BOT = new Client();. Now the BOT variable will represent your bot.

To connect your bot to Discord's gateway and begin receiving events, you will need to use the .login() method on your bot instance. The .login() method takes a single argument, which is the token for the bot application you created earlier.

Many of the methods in discord.js are asynchronous, so you will need to use await here. Add the line await BOT.login(process.env.BOT_TOKEN); to your IIFE.

The process.env object will contain the environment variables for your Node.js runtime environment. With the dotenv package, this will also include any variables you set in your .env secrets file.

Create that .env file in the root of your project, and add BOT_TOKEN="" as the first line. Between the quotes, paste the bot token from the bot page on the Discord Developer Portal.

Your index.ts file should now look like this:

import { Client } from "discord.js";

(async () => {
  const BOT = new Client();

  await BOT.login(process.env.BOT_TOKEN);
})();

Assuming you added your new bot to a server, if you run npm run build and npm start you should see your bot come online in the server. However, the bot will not respond to anything yet, because we have not started listening to events.

Gateway Events in Discord

Gateway "events" are generated when an action happens on Discord, and are typically sent to clients (including your bot) as JSON payloads. You can listen to those events with the .on() method, allowing you to write logic for your bot to follow when specific events occur.

The first event to listen to is the "ready" event. This event fires when your bot has connected to the gateway and is ready to process events. Above your .login() call, add BOT.on("ready", () => console.log("Connected to Discord!"));.

For your changes to take effect, use npm run build again to compile the new code. Now if you try npm run start, you should see "Connected to Discord!" print in your terminal.

How to Connect to the Database

You'll be using the mongoose package to connect to a MongoDB instance. If you prefer, you can run MongoDB locally, or you can use the MongoDB Atlas free tier for a cloud-based solution.

If you do not have a MongoDB Atlas account, freeCodeCamp has a great tutorial on setting one up.

Grab your connection string for your database and add it to your .env file as MONGO_URI="", with the connection string going between the quotes. For the database name, use oneHundredDays.

Create a directory called database to hold the files that contain your database logic. Within that directory, create a file called connectDatabase.ts. You will be writing your logic to initiate the database connection here.

Start with an exported function declaration:

export const connectDatabase = async () => {

}

mongoose offers a connect method for connecting to the database. Import it with import { connect } from "mongoose"; at the top of your file.

Then use the method inside your function with await connect(process.env.MONGO_URI);. Add a console.log statement after that so you can identify that your bot has connected to the database.

Your connectDatabase.ts file should now look something like this:

import { connect } from "mongoose";

export const connectDatabase = async () => {
    await connect(process.env.MONGO_URI);
    console.log("Database Connected!")
}

Now, within your index.ts file, import this function with import { connectDatabase } from "./database/connectDatabase" and add await connectDatabase() to your IIFE, just before the .login() method. Go ahead and run npm run build again.

A compiler error, indicating that: Argument of type string or undefined is not assignable to parameter of type string.

Oh no – an error!

Environment Variable Validation

The problem with environment variables is that they can all be undefined. This often happens if you make a typo in your environment variable name, or mix the name up with another name (a mistake I made when writing this tutorial, using TOKEN instead of BOT_TOKEN in some places).

TypeScript is warning you that the connect method takes a string, and that an undefined value will break things. You can fix this, but first you will want to write a function to handle validating your environment variables.

Within your src directory, create a utils directory to contain your utility functions. Add a validateEnv.ts file there.

Create a function in the file called validateEnv. This function will be synchronous and does not need the async keyword. Within that function, add conditions to check for your two environment variables. If either one is missing, return false. Otherwise, return true.

Your code might look something like this:

export const validateEnv = () => {
  if (!process.env.BOT_TOKEN) {
    console.warn("Missing Discord bot token.");
    return false;
  }

  if (!process.env.MONGO_URI) {
    console.warn("Missing MongoDB connection.");
    return false;
  }
  return true;
};

Head back to your index.ts file and import this validation function with import { validateEnv } from "./utils/validateEnv". Then at the beginning of your IIFE, use an if statement to return early if the function returns false. Your index.ts should look like:

import { Client } from "discord.js";
import { connectDatabase } from "./database/connectDatabase";
import { validateEnv } from "./utils/validateEnv";

(async () => {
  if (!validateEnv()) return;

  const BOT = new Client();

  BOT.on("ready", () => console.log("Connected to Discord!"));

  await connectDatabase();

  await BOT.login(process.env.BOT_TOKEN);
})();

If you try npm run build again, you will see the same error message as before. This is because while we know the environment variable exists, TypeScript still cannot infer it. The validation function is set up to exit the process if the environment variable is missing, so we are going to tell TypeScript that it is definitely a string.

Back in your connectDatabase.ts file, within the connect function use process.env.MONGO_URI as string to coerce the type into string. The error should go away, and you can now run npm run build and npm start.

You should see the messages you wrote for both the Discord and MongoDB connections print in your terminal.

The "message" Event

While you are making great progress on your bot, it still does not do anything. In order for the bot to respond to messages, you will need another event handler.

The logic in this one will be a bit more complicated, so you should create a separate module for it. Create an events folder in the src directory.

Within your events folder, create an onMessage.ts file. At the top, import the Message class from discord.js with import { Message } from "discord.js";. This class will serve as your type definition.

Then create an exported function called onMessage. The function should be asynchronous and take a message parameter with the Message type. Your function will look like this:

import { Message } from "discord.js";

export const onMessage = async (message: Message) => {

};

Before diving in to the logic for this function, you should attach it to the event listener. Back in your index.ts file, import your new function with import { onMessage } from "./events/onMessage";.

Next to your existing .on("ready") listener, add a BOT.on("message") listener. For the "message" event, the callback takes a message argument which you can pass to your new onMessage function:

BOT.on("message", async (message) => await onMessage(message));

We should test that this works. Head back to your onMessage.ts file. Inside your onMessage function, add console.log(message.content). The .content property on the Message class contains the text content sent in the message.

Use npm run build and npm start to get your bot running again, and then send "Hello" in a Discord channel the bot can see. You should see "Hello" print to your terminal.

How to Prepare for Commands

I maintain a few Discord bots, and one thing I've discovered that helps keep code maintainable and readable is making the components modular.

Define an Interface

You will first need to define a common structure for your commands. Create an interfaces folder in src. Then inside interfaces create a file CommandInt.ts.

Now you are going to create an interface. In TypeScript, an interface is often used to define the structure of an object, and is one of many tools available for declaring a variable's type.

In your CommandInt.ts file, import the Message class from Discord, then declare an interface called CommandInt with this syntax:

import { Message } from "discord.js";

export interface CommandInt {

}

Inside this interface, you are going to add three properties:

• name: string; – the name value will be your command's name. You will use this to trigger the command in the Discord server.
• description: string; – the description value explains what the command does. You will used this in one of the commands.
• run: (message: Message) => Promise<void> – this is the property that will hold the command's logic.

The run type definition is a bit tricky, so let's break it down. You have typed it as a function which takes one argument, message. That argument should be the Message type. You then set the function's return type to Promise<void>. This means your function will be asynchronous (this is important later) and does not return a value.

Create a Command List

Next you need a place to store all of your commands. Create a folder called commands in the src directory, and add a file called _CommandList.ts. The underscore here will keep this file at the top of the list.

The _CommandList.ts file will need two lines. First, import your CommandInt interface, then declare a CommandList array. The array will be empty for now, but give it a CommandInt[] type so TypeScript knows it will eventually hold your command objects. The file should look like:

import { CommandInt } from "../interfaces/CommandInt";

export const CommandList: CommandInt[] = [];

The purpose of this file is to create an array of your bot's commands which you will iterate over in the message event listener. There are ways to automate this, but they tend to be unnecessarily complex for smaller bots.

Check for Commands

Back in your onMessage.ts file, you should start working on the logic to check messages for commands.

The first step is to ensure that your bot ignores its own messages, as well as the messages of other bots. This helps prevent endless cycles where the bot is responding to itself.

The message object has an author property, which represents the Discord user that sent the message. The author property has a bot property, which is a Boolean that indicates the author is a bot account. Add a step to check if this property is true:

if (message.author.bot) {
  return;
}

You also want to prevent people from accidentally calling your bot's commands. For example, if you have a help command, you would not want the bot to respond when someone says "help me please".

This can be avoided by setting a prefix for the bot to detect. Most bots use !, but you are welcome to choose whichever prefix you would like.

Declare a variable prefix and assign it your chosen prefix, such as const prefix = "!";. Then add a condition to check if the message.content does not start with that prefix, and if so return.

const prefix = "!";

if (!message.content.startsWith(prefix)) {
  return;
}

Now that you have verified that the message came from a user and is intentionally triggering your bot, you can check to see if the command is valid.

Using the (currently empty) CommandList array will facilitate this process, so import it at the top of your file with import { CommandList } from "../commands/_CommandList";.

There are a few ways to iterate through an array – for the live bot, I used a for..of loop. Regardless of the loop approach, you will want to check each command in the array against the message content. Here is a loop example:

  for (const Command of CommandList) {
    if (message.content.startsWith(prefix + Command.name)) {
      await Command.run(message);
      break;
    }
  }

This loop iterates through the list of commands, and if the message content starts with the prefix and command name, the bot will call the command's run method.

Remember that you declared the run property to be an async function that took the message as an argument. Then, to save on compute time, the loop breaks when it finds a matching command.

Database Model

There's one more step before you are ready to start writing commands. This bot will track your community members' 100 Days of Code progress. And you need to store that progress in the database.

mongoose helps structure your MongoDB records to prevent you from passing malformed or incomplete data into your database.

Start by creating a models folder in your database directory. In that models folder, create a CamperModel.ts file. This will be your structure for the user objects.

You first need to import the necessary values from the mongoose library. Add import { Document, model, Schema } from "mongoose"; at the top of the file.

Because you are using TypeScript, you need to create a type definition for your database objects. Create another interface, like you did for your commands, named CamperInt.

export interface CamperInt {

}

Your database model will have four properties. Add these to your interface:

• discordId: string; – Every user object in Discord has a unique identifier, called a Snowflake, which is used to distinguish them from other users. Unlike a username or discriminator (the four digit number after the username), the id value cannot be changed. This makes it the ideal value for linking your stored data to a Discord user.
• round: number; – This will represent the "round" the user is on in the challenge. When someone completes 100 days of the challenge, they may choose to undertake the challenge again. When they do, they often refer to it as "round 2", for example.
• day: number; – This represents the day the user is on in the challenge.
• timestamp: number; – You will use this value to track when the user last submitted a 100 Days of Code post.

Great! Now you need to define the Schema for your database entries. mongoose uses a Schema object to define the shape of the documents that go in to your database collection. The Schema import has a constructor, which you will assign to a variable.

export const Camper = new Schema();

This constructor takes an object as its argument, and that object defines the database keys and types. Go ahead and pass in an object similar to what your interface looks like.

export const Camper = new Schema({
    discordId: String,
    round: Number,
    day: Number,
    timestamp: Number,
})

Next you need to create the model. In mongoose, the model object serves to create, read, and update your documents in the MongoDB database. Add export default model(); at the bottom of your file.

The model function takes a few parameters. The first is a string, and is the name to use for the documents in your database. For this collection, use "camper". The second argument is the schema to use for the data – use your Camper schema there.

By default, mongoose will use the plural version of your model name for the collection. In our case, that would be "campers". If you want to change that, you can pass in a third argument of { collection: "name" } to set the collection to name.

If you were using JavaScript, this would be enough to get your database model set up. However, because you are using TypeScript, you should take advantage of the type safety. model() by default returns a Document type of any.

To resolve this, you can pass a generic type into the model function. Generic types serve as variables for type definitions, in a sense. You need to set the generic type for your model to use your interface. Add the generic type by changing model to model<CamperInt>.

Just one more step here. Your CamperInt interface only defines the properties you set in the MongoDB document, but doesn't include the standard properties.

Change your export interface CamperInt to export interface CamperInt extends Document. This tells TypeScript that your type definition is an extension of the existing Document type definition – you are essentially adding properties to that structure.

Your final file should look like this:

import { Document, model, Schema } from "mongoose";

export interface CamperInt {
  discordId: string;
  round: number;
  day: number;
  timestamp: number;
}

export const Camper = new Schema({
  discordId: String,
  round: Number,
  day: Number,
  timestamp: Number,
});

export default model<CamperInt>("camper", Camper);

As a safety check, use npm run build again. You should not see any errors in the terminal.

How to Write Bot Commands

You are finally ready to start writing some commands! As this is a 100 Days of Code bot, you should start with the command for creating a 100 Days of Code update.

100 command

Within your commands folder, create a oneHundred.ts file. This will hold your 100 Days of Code command. Import your command interface with import { CommandInt } from "../interfaces/CommandInt";.

Now declare an exported variable oneHundred and give it the CommandInt type:

import { CommandInt } from "../interfaces/CommandInt";

export const oneHundred: CommandInt = {

}

Set the name property to "100", give it a description property similar to "Creates a 100 Days of Code update", and set up the run function as async (message) => {}.

Now for the logic within the function. Your logic will need a few properties from the message object to work, so go ahead and destructure those out: const{ author, channel, content } = message;.

When a user calls this command, it should look something like this:

!100 Here is my 100 Days of Code update.

You will want to extract that text without the !100 part. There are a few was to do this – we are going to slice it out with const text = content.split(" ").slice(1).join(" "). Using the previous example, text would now hold the string "Here is my 100 Days of Code update.".

Time for some database work. Import your CamperModel with import CamperModel from "../database/models/CamperModel". Note that you are importing the default export, instead of a module.

Now you need to see if the user has a record in your database. Use let targetCamperData = await CamperModel.findOne() to prepare for this.

The .findOne() method is used to query the collection for a single record, and takes an object to filter the query. These queries support MongoDB's syntax for advanced searching, but in this case you only need to find the record by the user's discordId. Add {discordId: author.id} as the parameter for the findOne().

What happens if the user's record does not exist yet? If this is their first time using the command, they will not have a document in the database. Add an if condition to check if targetCamperData does not exist:

if (!targetCamperData) {

}

In this block, you are going to reassign targetCamperData to a new document with targetCamperData = await CamperModel.create(). You use the .create() method to generate and save a new document. The method takes an object as the first argument – that object is the document to create. Pass the following object to the method:

targetCamperData = await CamperModel.create({
  discordId: author.id,
  round: 1,
  day: 0,
  timestamp: Date.now()
});

Whether the record exists already or has just been created, your next step is to update it. After your if block, add a line to increment the day value: targetCamperData.day++.

What happens if the user is on day 100? They should not be able to go to day 101, as the challenge is only a hundred days long. You will need to add logic for that. If the user is above day 100, you want to set their day to 1 and increase their round:

targetCamperData.day++;
if (targetCamperData > 100) {
  targetCamperData.day = 1;
  targetCamperData.round++;
}

Now update the timestamp with targetCamperData.timestamp = Date.now();. This may seem redundant, since you did this step in the create method, but this ensures that the timestamp is updated if the data already existed.

You need to save the changes you made to the document. Add await targetCamperData.save(); to do this – mongoose will then save your changes to the document in MongoDB.

Now you will construct the message the bot should send. To do this, you are going to use a message embed. Message embeds are special message formats that are available to Discord bots, which offer additional formatting options and styling.

Start by adding the MessageEmbed class to your imports with import { MessageEmbed } from "discord.js";. Then, after your database logic, create a new message embed with const oneHundredEmbed = new MessageEmbed();. Time to start setting the values of the embed.

The embed title appears as large text at the top of the embed. Set the title to "100 Days of Code" with oneHundredEmbed.setTitle("100 Days of Code");.

The embed description appears as standard text below the title. Set this to the user-provided text with oneHundredEmbed.setDescription(text);.

The embed author appears above the title, and is used to indicate who generated the embed. You will set this with oneHundredEmbed.setAuthor().

This method takes a few arguments, and you will use the first two. The first argument is the author's name. Set this to author.username + "#" + author.discriminator. This will display in the same way that you see a user in Discord: nhcarrigan#0001.

Set the second argument to author.displayAvatarUrl(). This is a method provided by discord.js to fetch the URL for the author's avatar image.

Embed fields are additional title-description pairs that can be nested within the embed, and optionally inlined. These can be created with the .addField() method, which takes up to three arguments. The first argument is the field title, the second argument is the field description, and the third argument is an optional Boolean to set the field as inline.

Add two fields to your embed. The first is oneHundredEmbed.addField("Round", targetCamperData.round, true);, and the second is oneHundredEmbed.addField("Day", targetCamperData.day, true);.

You can add a footer to an embed and appears at the bottom in small text. Set the footer to the data's timestamp with oneHundredEmbed.setFooter("Day completed: " + new Date(targetCamperData.timestamp).toLocaleDateString();. The toLocaleDateString() method will take a Date object and convert it to a locale-specific string based on the location of your bot's server.

Now you need to send that message embed. The channel property you extracted from the message value earlier represents the Discord channel in which the message was sent. This object has a .send() method, which you can use to have the bot send a message back to that channel. Use await channel.send(oneHundredEmbed) to send your new embed to that channel.

To keep the channel clean, add an await message.delete() to have the bot delete the message that triggered the command. Your final code should look like this:

import { CommandInt } from "../interfaces/CommandInt";
import CamperModel from "../database/models/CamperModel";
import { MessageEmbed } from "discord.js";

export const oneHundred: CommandInt = {
  name: "100",
  description: "Creates a 100 Days of Code update",
  run: async (message) => {
    const { author, channel, content } = message;
    const text = content.split(" ").slice(1).join(" ");

    let targetCamperData = await CamperModel.findOne({ discordId: author.id });

    if (!targetCamperData) {
      targetCamperData = await CamperModel.create({
        discordId: author.id,
        round: 1,
        day: 0,
        timestamp: Date.now(),
      });
    }

    targetCamperData.day++;
    if (targetCamperData.day > 100) {
      targetCamperData.day = 1;
      targetCamperData.round++;
    }
    targetCamperData.timestamp = Date.now();
    await targetCamperData.save();

    const oneHundredEmbed = new MessageEmbed();
    oneHundredEmbed.setTitle("100 Days of Code");
    oneHundredEmbed.setDescription(text);
    oneHundredEmbed.setAuthor(
      author.username + "#" + author.discriminator,
      author.displayAvatarURL()
    );
    oneHundredEmbed.addField("Round", targetCamperData.round, true);
    oneHundredEmbed.addField("Day", targetCamperData.day, true);
    oneHundredEmbed.setFooter(
      "Day completed: " +
        new Date(targetCamperData.timestamp).toLocaleDateString()
    );

    await channel.send(oneHundredEmbed);
    await message.delete();
  },
};

If you remember, you created a list to hold all of your commands. You need to add your new command to that list. Head back to your _CommandList.ts file. Import your new command with import { oneHundred } from "./oneHundred";, then add oneHundred to your empty CommandList array:

import { CommandInt } from "../interfaces/CommandInt";
import { oneHundred } from "./oneHundred";

export const CommandList: CommandInt[] = [oneHundred];

Now you can test it out! Use npm run build and npm start to get the bot started. Try sending !100 This is my first post! in the channel. The bot should respond with an embed and delete your message.

You can see the embed, with the author, title, description, fields, and footer.

View command

What happens if a user forgets if they submitted or not, or wants to see what day they are on? You should add a command to view current 100 Days of Code progress.

In your commands directory, create a view.ts file. Like before, import your command interface and CamperModel, and create a new command called view. Set the name to "view", the description to something like "View your current 100 Days of Code progress", and the run command to async (message) => {}.

You won't need the message content for this command, so extract the author and channel values from the message like you did before: const { author, channel } = message;.

Just like the 100 command, you need to fetch the user's data from the database. This time, however, if the data does not exist you will not be creating it – so you can use const here instead of let: const targetCamperData = await CamperModel.findOne({ discordId: author.id });

Now, if the user doesn't have a data record yet, they haven't started the challenge with the bot. You should send a message to let them know how to do this.

if (!targetCamperData) {
  await channel.send("You have not started the challenge yet.");
  return;
}

Construct an embed, similar to the one you built for the 100 command. Don't forget to import the MessageEmbed class!

    const camperEmbed = new MessageEmbed();
    camperEmbed.setTitle("My 100DoC Progress");
    camperEmbed.setDescription(
      `Here is my 100 Days of Code progress. I last reported an update on ${new Date(
        targetCamperData.timestamp
      ).toLocaleDateString()}.`
    );
    camperEmbed.addField("Round", targetCamperData.round, true);
    camperEmbed.addField("Day", targetCamperData.day, true);
    camperEmbed.setAuthor(
      author.username + "#" + author.discriminator,
      author.displayAvatarURL()
    );

A couple of key differences here. Instead of taking a text input from the user, you are using a fixed description value to indicate this is a view embed instead of a 100 embed. Since you use the timestamp in the description, you do not need to add a footer.

Just like before, send the embed to the message channel and delete the original message. Your final file should be:

import { CommandInt } from "../interfaces/CommandInt";
import CamperModel from "../database/models/CamperModel";
import { MessageEmbed } from "discord.js";

export const view: CommandInt = {
  name: "view",
  description: "Views your 100 Days of Code progress.",
  run: async (message) => {
    const { author, channel } = message;

    const targetCamperData = await CamperModel.findOne({
      discordId: author.id,
    });

    if (!targetCamperData) {
      await channel.send("You have not started the challenge yet.");
      return;
    }

    const camperEmbed = new MessageEmbed();
    camperEmbed.setTitle("My 100DoC Progress");
    camperEmbed.setDescription(
      `Here is my 100 Days of Code progress. I last reported an update on ${new Date(
        targetCamperData.timestamp
      ).toLocaleDateString()}.`
    );
    camperEmbed.addField("Round", targetCamperData.round, true);
    camperEmbed.addField("Day", targetCamperData.day, true);
    camperEmbed.setAuthor(
      author.username + "#" + author.discriminator,
      author.displayAvatarURL()
    );

    await channel.send(camperEmbed)
    await message.delete();
  },
};

Add your new view command to your _CommandList.ts file with an import, and put the command in the CommandList array. Then use npm run build and npm start to test your new changes. Send "!view" in your channel and you should see the bot respond:

Edit command

Unfortunately, if a user makes a typo in their 100 Days of Code post, they can't edit the message because the bot sent it. But you can add a command that will allow them to do this.

Create an edit.ts file in your commands directory. Import your command interface and declare a new command called edit. Set the name to "edit", the description to something like "Edits a previous 100 Days of Code post", and prepare the run function as you have before.

Within the function, extract the author, channel, and content properties from the message object.

The edit command will take a Discord message id, followed by the updated text to use. You can destructure those from the message content with const [, targetId, ...text] = content.split(" ");.

The first element in the array would be the !edit command call, which is not needed for this command so you do not need to assign it to a value. The targetId element would be the id of the message to edit. ...text that uses the spread operator to assign the remaining message content to the text variable, as an array.

Now you need to use the targetId to get the actual message from Discord. The channel value has a messages property which represents all of the messages sent in that channel. You can use the fetch method on that messages property to get a specific message (or multiple messages). Set this up as const targetMessage = await channel.messages.fetch().

The .fetch() method can take an object containing the options for the fetch request, or it can take a string as the id of the message to fetch. Because you have the id, and are only fetching one message, you can pass targetId to the .fetch() method as the only parameter.

It is possible that the targetMessage does not exist. For example, if the user provided an invalid id string (or no id string at all). You'll need to add logic to check if the targetMessage is not found:

    if (!targetMessage) {
        await channel.send("That does not appear to be a valid message ID.");
        return;
    }

Now that you have asserted that the message exists, you can start working with the properties. Because your bot sends the message as an embed, the content property you are used to working with will be empty. Instead, you can find the embed within the embeds property.

The embeds property is an array of MessageEmbed objects. Since you wrote the bot's code to only send one embed, you can access that embed with const targetEmbed = targetMessage.embeds[0];.

Now that you have the embed, you need to confirm that the embed is from one of that user's 100 Days of Code posts. Thankfully, you set the user as the author of the embed. You can check if the embed's author information does not match the message author's information:

    if (
      targetEmbed.author?.name !==
      author.username + "#" + author.discriminator
    ) {
      await channel.send(
        "This does not appear to be your 100 Days of Code post. You cannot edit it."
      );
      return;
    }

You have accounted for the message belonging to a different user (or not having the correct embed entirely), so now you can edit the embed.

Like you did before, set the description of the embed with the .setDescription() method. You'll need to use .join(" ") on the text variable this time, since it is currently an array. targetEmbed.setDescription(text.join(" "));

Rather than sending a new message, you need to edit the existing message. You have the existing message stored in targetMessage, so you can use the .edit() method to change that message directly.

await targetMessage.edit(targetEmbed); will change the message's embed to your modified version. Then delete the message that triggered this command with await message.delete();. Your command should look like this:

import { CommandInt } from "../interfaces/CommandInt";

export const edit: CommandInt = {
  name: "edit",
  description: "Edits a previous 100 Days of Code post.",
  run: async (message) => {
    const { author, channel, content } = message;
    const [, targetId, ...text] = content.split(" ");

    const targetMessage = await channel.messages.fetch(targetId);

    if (!targetMessage) {
      await channel.send("That does not appear to be a valid message ID.");
      return;
    }

    const targetEmbed = targetMessage.embeds[0];

    if (
      targetEmbed.author?.name !==
      author.username + "#" + author.discriminator
    ) {
      await channel.send(
        "This does not appear to be your 100 Days of Code post. You cannot edit it."
      );
      return;
    }

    targetEmbed.setDescription(text.join(" "));

    await targetMessage.edit(targetEmbed);
    await message.delete();
  },
};

Add the command to your _CommandList.ts file, importing it and adding the variable to the array. Then use npm run build and npm start to run the bot again.

To grab a message ID, you should have Developer Mode enabled in your Discord client. If you have not done so, visit your settings and select the "Advanced" section. Toggle "Developer Mode" on:

Then head back to your channel and right click on your original 100 Days of Code message. You should see an option in the context menu to copy the message ID:

Select that option and you will get an ID (mine was 855559921666621441). Then in the same channel, use !edit 855559921666621441 This is an edited post!, replacing my value with the one you got from the "Copy ID" option. The bot should edit the existing embed with your new content.

Help command

You are almost there! One more command to go. Many bots have a help command, which returns a list of available commands. You should add one to your bot as well.

One last time, create a help file in your commands directory. Import your CommandInt interface and set up your command as help. Set the name to "help", and the description to something like "Returns information on the bot's available commands.". Set up your run function.

This time you only need the message's channel property, so no need to destructure anything here. Instead, import the MessageEmbed class from discord.js, and go ahead and import your command list too: import { CommandList } from "./_CommandList";.

Construct a new MessageEmbed and assign it to a helpEmbed variable. Set the title to "Available Commands:" and the description to something similar to "These are the available commands for this bot.".

Now you need to add a field to the embed and dynamically generate the list of commands. Start by adding the field with helpEmbed.addField(). Use the first parameter to set the field name to "Commands:". For the description (the second parameter), you will use the CommandList array to generate a readable list of commands.

    helpEmbed.addField(
      "Commands:",
      CommandList.map((el) => `\`!${el.name}\`: ${el.description}`).join("\n")
    );

The process here is two-part. First, using the built-in array method .map, you are creating a new array from your array of CommandInt objects. This array contains strings formatted using Markdown so the command name and description are readable. The string for your help command would look like:

!help: Returns information on the bot's available commands.

You are then joining that array of strings with a new-line separator, which will create a vertical list of commands in a single string (embed fields require strings for the description).

Send the embed to the channel. Because you did not destructure the channel property out of the message object, you will need to use message.channel.send(helpEmbed); directly.

This time, do not delete the original message – you did not add an author to the help embed, so preserving the original message helps moderators see who used the command. Your help command should look like:

import { CommandInt } from "../interfaces/CommandInt";
import { MessageEmbed } from "discord.js";
import { CommandList } from "./_CommandList";

export const help: CommandInt = {
  name: "help",
  description: "Returns information on the bot's available commands.",
  run: async (message) => {
    const helpEmbed = new MessageEmbed();
    helpEmbed.setTitle("Available Commands!");
    helpEmbed.setDescription(
      "These are the available commands for this bot."
    );
    helpEmbed.addField(
      "Commands:",
      CommandList.map((el) => `\`!${el.name}\`: ${el.description}`).join("\n")
    );

    await message.channel.send(helpEmbed);
  },
};

Import your help command into your _CommandList.ts file and add the command to your array. With this final command, your _CommandList.ts file should be:

import { CommandInt } from "../interfaces/CommandInt";
import { oneHundred } from "./oneHundred";
import { view } from "./view";
import { edit } from "./edit";
import { help } from "./help";

export const CommandList: CommandInt[] = [oneHundred, view, edit, help];

Use npm run build and npm start one last time to test this feature. Send !help in your channel and the bot should respond:

Conclusion

Congratulations! You have successfully built a Discord bot for the 100 Days of Code challenge.

If you are interested in exploring further, you can view the source code for the live bot that inspired this tutorial, which includes custom error logging, external error reporting, and a documentation site.

In the first hour, Deployment Hell struck and I had to take the bot down for maintenance. Another hour passed and I managed to patch up my bot and send it back.

Now my bot is up and running and more resilient than ever. As for me, I survived and even thrived in Deployment Hell 🔥. In this deployment postmortem, I'm going to show you how.

I sent my AI chatbot into the server at 2 pm on June 2nd, and hype started gathering around it. The chat went on for a while and all was nice and smooth.

At 3:20 pm, everything started falling apart: My free-tier API key reached its hourly request limit, and I had no choice but to take down the bot and the server for maintenance.

Never mind the typos in my message 😅 This incident caught me totally unprepared

Despite being struck by Deployment Hell in the first hour on the first day of my project debut, I knew I need to sit down, take a deep breath, and recover from this incident.

What Went Well with Deployment

As a first step, I didn't forget to congratulate myself on what went well despite this mishap. Clearly, people were enthusiastic about chatting with my chatbot, to the extent that we went over rate limit.

Moreover, in the brief hour when I observed people interact with my bot in real time, I discovered several good design choices that I've consciously, unconsciously, or subconsciously made.

Avoid Feature Creep At All Costs During Development

I originally developed my code for a tutorial, so I kept my code as simple and readable as possible, without complicated features that won't serve my bot's main use case: chatting.

That said, I marked down TODOs and stretch goals in my code, hoping to get back to those if necessary. For example:

 # TODO: cache chat history in DB and load
 # TODO: after each user input and bot input,
 # append them to conversation history for the next query
 ...
 # FIXME: better make this try-except block more fine-grained

As I observed users interacting with the bot, I'm actually relieved that I didn't implement the memory cache feature. Several users were talking with the bot at once, each along their different conversation thread. If I were to keep track of the conversation history, I would have to create a unique log for each user, further complicating database operations.

Abide by the Principle of Least Privilege

One thing I learned in my Computer Security class is the Principle of Least Privilege (PoLP) – granting an application the minimum amount of access it needs to do its job.

My chatbot only needs two low-level security permissions: View Channel for reading users' messages, and Send Text Messages for replying to users.

Of course I could have given it more fancy permissions like those shown below in the image, just in case it needs any. But that would have violated PoLP and who knows whether my malfunctioning bot will bring down anything else with it when it fails?

Permission settings for Discord bots

Other Observations from Deploying My Bot

Despite its ephemeral lifespan, my bot offered me an opportunity to conduct user research in the real world. This is a server with 1000+ users, not my cozy dev server where my friends and I hang out and take turns to politely exchange lines with the bot.

Here, I observed several interesting user behaviors:

• People tend to ask the bot open-ended questions instead of factual ones. Because I built my bot based off a video game character, when developing the AI model, I was keen on making sure the model learns the canon information about the character, like name, age, and role in the game. I was relieved when I saw that people are much more curious about the bot character's preference for ice cream flavor than their factual place of birth.

• People use a lot of emoticons :), emojis 😃 and GIFs as they text. However, these will most likely be treated as <UNKNOWN> tokens in the AI model's tokenizer, which means I should sanitize user inputs.

I was also very fortunate to receive direct feedback from friendly people on the server. One feature request that I got was to make the bot attach its response to a user's message thread, instead of just dumping its response in the channel.

Buzzing with excitement from people's enthusiasm and armed with insights from user research, I was ready to patch up my bot and send it back as soon as possible.

What I Needed to Fix

As a good development habit, I kept my code well-organized and modularized, so switching from the production bot back to my development bot requires no more than copy-pasting the dev bot's API key.

Once I was running on my dev server, I sat down to identify the types of problems I needed to tackle.

Fatal Crashes

The fatal bug that caused me to take down my bot was that I hit an hourly API rate limit. I took the obvious approach of keeping redundancy in my system: Keep an alternative API key, and once the primary one runs out, switch over to the alternative, and then switch back at the turn of the hour.

Workaround aside, I noted that this is a short-term solution. If I need to properly scale up my system, I should make an estimate of the number of requests per hour, as I'll discuss at the end of this section.

New Features for Usability

I decided on several new features that will make my bot more user-friendly. Some highlights are:

• As some server people suggested, I re-programmed the bot so that instead of dumping responses to different user messages into the channel, it directly responds to each user message in the message's thread.

• I sanitized user inputs by removing Unicode emojis and Discord-specific <:some_hilarious_gif> tags. This will limit <UNKNOWN> tokens that my AI model will receive and help it generate better responses.

• I implemented a magic command $ignore [message] that allow users to send a message to the channel without triggering a bot response. This feature comes from my observation that, whenever the bot says something funny or smart (or both!), users will remark on that by sending a text intended for their friends (and not the bot) to the channel. It'd be annoying to still receive a bot response on a remark intended for a friend. Hence, I hope that this magic command will address this user pain point.

• I implemented magic commands for the server moderators to interface with my bot (stopping or rebooting) so that they can keep the bot under control without having to access my Repl.it server. This makes both my job and theirs easier.

Future-proof Logging

In my cozy dev server, there is little complexity, whereas on this 1000+ user server where 40% of users are online at any given moment, complexity explodes.

There are multiple channels besides the chat channel dedicated to my bot, multiple user roles and permission levels, multiple users typing at the same time, and so on.

While I certainly cannot prevent all possible failure scenarios, what I could do is to protect the important part of my code with a try-except block and log out all information that might reveal the cause of a failure. Since real-time system bugs are subtle and difficult to reproduce, logging will save me lots of headaches down the road.

except Exception as e:
            print(e, 'Offending channel', message.channel, 
            'Offending message', message.content, 
            'Offending bot response', bot_response, 
            sep='\n', end='\n\n')

Scalability

Estimating under some system constraints is where basic statistics and heuristics come in. Hugging Face's model Inference API imposes two limits on the scalability of my system:

1. A 10k tokens (characters) per hour rate limit, which is about 300 queries.

2. A 30k tokens per month quota for free-tier accounts, which is about 900 queries.

Wonder how I get the numbers? Fun fact: 1) 10k characters is between 1430 and 2500 words. We will take 2100 since Discord messages usually use simple, short words. 2) The average length of a text message is 7 words. 2100 / 7 = 300 messages

After processing these numbers, the fact that I hit the per-hour rate limit during the first hour of my bot debut is quite a remarkable feat. People are clearly hyped about my witty chatbot. 🥳

Suppose the hype recedes and life goes on, consider now a hypothetical scenario where 20 users (2% of the 1000+ on the server) regularly chat with my bot, each for 25 lines, in the two hours following dinner. This produces a total of 500 queries in two hours (or 250 per hour), meaning that my bot is safe from the per-hour rate limit of 300.

However, in a month, 500 * 30 = 15,000 queries, 15 times more than my quota of 900. If my bot is indeed this popular, I would need to switch to a higher-tier subscription plan to ensure that it remains available.

From Tutorial Code to Production Code

Compared to my tutorial code which strives to be simple, readable, and educative, my production code is longer, more complicated, but also more robust.

What Makes a Great Side Project

Having emerged from Deployment Hell, like my bot, I'm more resilient than ever and have gained new insights about the principles and challenges in real-world software engineering.

As a final takeaway, I reflect on what makes my Discord AI chatbot this popular. (On June 3rd, a day when it's up 24 hours, it had already busted the monthly 30k quota on both my account and one I borrowed from a friend, totaling 2,000+ messages. 🤓)

I have completed and polished various side projects that received positive feedback, but none of them were as half popular as this one. In retrospect, it's not too hard to see why.

Among projects that I'm most proud of, I built a chess engine and a rhythm game engine for the Ren'Py Visual Novel (VN) game development engine. Both are rated 5-star on itch.io, a popular platform for publishing indie games.

These projects, however, are open-source engines intended for developers to integrate into their VN games more than standalone playables that can entertain players for hours.

In comparison, my Discord AI chatbot manages to capture each of the following elements that distinguishes a great side project from a good one:

• Audience: I'm fortunate to have this friendly server with 1000+ users who are open to experimenting with the bot and provide me with helpful feedback.

• Accessibility: For people to enjoy my chabot, there is nothing special they need to add to their routine - not even opening up a new web app - they just log into Discord as usual, and voilà, the bot is here to chat!

• Interactivity: Without interactive components, even the most visually-astonishing game will fail to retain players' attention. Nothing to worry about for my chatbot though: Like a loyal friend, it always has something to quip about whenever you need a good chat.

If you'd like to learn more about my methodology for working on side projects, check out my previous blog post:

Also check out my chatbot tutorial!

You can also try this out in JavaScript:

You do not need to install anything on your computer, and you do not need to pay anything to host your bot.

We are going to use a number of tools, including the Discord API, Node.js libraries, and a cloud computing platform called Repl.it.

If you'd rather code your discord bot using Python instead of JavaScript, read this tutorial instead.

There is also a video version of this written tutorial. The video is embedded below and the written version is after the video.

How to Create a Discord Bot Account

In order to work with the Node.js library and the Discord API, we must first create a Discord Bot account.

Here are the step to creating a Discord Bot account.

1. Make sure you’re logged on to the Discord website.

2. Navigate to the application page.

3. Click on the “New Application” button.

4. Give the application a name and click “Create”.

5. Go to the “Bot” tab and then click “Add Bot”. You will have to confirm by clicking "Yes, do it!"

Keep the default settings for Public Bot (checked) and Require OAuth2 Code Grant (unchecked).

Your bot has been created. The next step is to copy the token.

This token is your bot's password so don't share it with anybody. It could allow someone to log in to your bot and do all sorts of bad things.

You can regenerate the token if it accidentally gets shared.

How to Invite Your Bot to Join a Server

Now you have to get your Bot User into a server. To do this, you should create an invite URL for it.

Go to the "OAuth2" tab. Then select "bot" under the "scopes" section.

Now choose the permissions you want for the bot. Our bot is going to mainly use text messages so we don't need a lot of the permissions. You may need more depending on what you want your bot to do. Be careful with the "Administrator" permission.

After selecting the appropriate permissions, click the 'copy' button above the permissions. That will copy a URL which can be used to add the bot to a server.

Paste the URL into your browser, choose a server to invite the bot to, and click “Authorize”.

To add the bot, your account needs "Manage Server" permissions.

Now that you've created the bot user, we'll start writing the Python code for the bot.

How to Code a Basic Discord Bot with the discord.js Library

We'll be using the discord.js Node library to write the code for the bot. discord.js is an API wrapper for Discord that makes it easier to create a Discord bot in Node.js / JavaScript.

How to Create a Repl and Install discord.js

You can develop the bot on your local computer with any code editor. However, in this tutorial, we'll be using Repl.it because it will make it simpler for anyone to follow along. Repl.it is an online IDE that you can use in your web browser.

Start by going to Repl.it. Create a new Repl and choose "Node.js" as the language. This means the programming language will be JavaScript.

To use the discord.js library, just add const Discord = require("discord.js"); at the top of main.js. Repl.it will automatically install this dependency when you press the "run" button.

How to Set Up Discord Events for Your Bot

discord.js revolves around the concept of events. An event is something you listen to and then respond to. For example, when a message happens, you will receive an event about it that you can respond to.

Let’s make a bot that replies to a specific message. This simple bot code is taken directly from the discord.js documentation. We will be adding more features to the bot later.

Add this code to main.js. I'll explain what all this code does shortly.

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(process.env.TOKEN)

When you created your bot user on Discord, you copied a token. Now we are going to create a .env file to store the token.

.env files are used for declaring environment variables. On Repl.it, most files you create are visible to anyone but .env files are only visible to you. Other people viewing a public repl will not be able to see the contents of the .env file.

So if you are developing on Repl.it, only include private information like tokens or keys in a .env file.

Click the "Add file" button and create a file named .env.

Inside the file add the following line, including your actual token you copied previously:

TOKEN=[paste token here]

Now let's go over what each line of code is doing in your Discord bot code.

The first line imports the discord.js library. Next, we create an instance of a Client. This is the connection to Discord.

The client.on() is used to check for events. It accepts an event name, and then a callback function to be called when the event takes place. In this code, the ready event is called when the bot is ready to start being used. Then, when the Discord server has a new message, the message event is called.

The code checks if the msg.content equals 'ping'. If so, then the bot replies with 'pong' to the channel.

Now that the bot is set up, the final line runs the bot with the login token. It gets the token from out .env file.

We have the code for the bot so now we just have to run it.

How to Run the Bot

Now click run button on the top to run your bot in repl.it.

Now go to your Discord room and type "ping". Your bot should return "pong".

How to Improve the Bot

Now that we have a basic bot working, we'll improve it. It is called "Encourage Bot" for a reason.

This bot will respond with a message of encouragement whenever someone sends a message containing a sad or depressing word.

Anyone will be able to add encouraging messages for the bot to use and the user-submitted messages will be stored in the Repl.it database.

The bot will also return a random inspirational quote from an API when someone types the message "$inspire" into the chat.

We'll start with adding the "$inspire" feature.

How to Add Inspirational Quotes to the Bot

We will get inspirational quotes from an API called zenquotes.io. We need to import the node-fetch module, add a getQuote() function, and update our bot code to call the function.

Here is the updated code. After the code, I'll explain the new parts.

const Discord = require("discord.js")
const fetch = require("node-fetch")
const client = new Discord.Client()

function getQuote() {
  return fetch("https://zenquotes.io/api/random")
    .then(res => {
      return res.json()
      })
    .then(data => {
      return data[0]["q"] + " -" + data[0]["a"]
    })
}

client.on("ready", () => {
  console.log(`Logged in as ${client.user.tag}!`)
})

client.on("message", msg => {
  if (msg.author.bot) return

  if (msg.content === "$inspire") {
    getQuote().then(quote => msg.channel.send(quote))
  }
})

client.login(process.env.TOKEN)

We now have to import the node-fetch module. This module allows our code to make an HTTP request to get data from the API.

The getQuote() function is pretty straightforward. First, it uses the node-fetch module to request data from the API URL. The API returns a random inspirational quote. This function could easily be rewritten to get quotes from a different API, if the current one stops working.

Then the function converts the response from the API to JSON and creates a string to return. Through trial and error I figured out how to get the quote from the JSON into the string format I wanted. The quote is returned from the function as a string.

The final part updated in the code is toward the end. Previously it looked for the message "ping". Now it looks for "$inspire". Instead of returning "pong", it gets the quote with getQuote() and returns the quote. We use msg.channel.send() to send the message to the channel. Also, the code checks if the message comes from the bot itself and if it does, it leaves the function so it does not do anything.

At this point you can run your code and try it out.

How to Add Encouraging Messages to the Bot

Now we will implement the feature where the bot responds with encouraging messages when a user posts a message with a sad word.

How to Add Sad Words to the Bot

First we need to create an array that contains the sad words that the bot will respond to.

Add the following line after the client variable is created:

sadWords = ["sad", "depressed", "unhappy", "angry", "miserable"]

Feel free to add more words to the list.

How to Add Encouraging Messages to the Bot

Now we'll add an array of encouraging messages that the bot will respond with.

Add the following array after the sadWords list you created:

encouragements = [
  "Cheer up!",
  "Hang in there.",
  "You are a great person / bot!"
]

Like before, feel free to add more phrases of your choice to the array . I'm just using three items for now because later we'll add the ability for users to add more encouraging phrases for the bot to use.

How to Respond to Messages

Now we need to update our bot to use the two lists we created.

Now we will update the message function to check all messages to see if they contain a word from the sadWords list. If a sad word is found, the bot will send a random message of encouragement.

Here is the updated code:

client.on("message", msg => {
  if (msg.content === "$inspire") {
    getQuote().then(quote => msg.channel.send(quote))
  }

  if (sadWords.some(word => msg.content.includes(word))) {
    const encouragement = encouragements[Math.floor(Math.random() * encouragements.length)]
    msg.reply(encouragement)
  }

})

This is a good time to test the bot. You know enough now to create your own bot. But next you'll learn how to implement more advanced features and store data using the Repl.it database.

How to Enable User-submitted Messages

The bot is completely functional, but now let's make it possible to update the bot right from Discord. A user should be able to add more encouraging messages for the bot to use when it detects a sad word.

We are going to use Repl.it's built-in database to store user-submitted messages. This database is a key-value store that’s built into every repl.

At the top of the code, under the other import statements, add:

const Database = require("@replit/database")
const db = new Database()

This will allow us to use the Repl.it database. When you run the code, Repl.it should install the database module automatically. If for some reason it doesn't, you may have to go into the Shell tab (not the Console) and type "npm install @replit/database".

After where the encouragements array is created, insert the following code to add the encouragements to the database if needed:

db.get("encouragements").then(encouragements => {
  if (!encouragements || encouragements.length < 1) {
    db.set("encouragements", starterEncouragements)
  }  
})

Also, rename the encouragements array toward the top to starterEncouragements.

Users will be able to add custom encouraging messages for the bot to use directly from the Discord chat. Before we add new commands for the bot, let's create two helper functions that will add custom messages to the database and delete them.

Add the following code after the getQuote() function:

function updateEncouragements(encouragingMessage) {
  db.get("encouragements").then(encouragements => {
    encouragements.push([encouragingMessage])
    db.set("encouragements", encouragements)
  })
}

function deleteEncouragment(index) {
  db.get("encouragements").then(encouragements => {
    if (encouragements.length > index) {
      encouragements.splice(index, 1)
      db.set("encouragements", encouragements)
    }
  })
}

The updateEncouragements() function accepts an encouraging message as an argument.

First it gets the "encouragements" from the database. Then, it adds the new encouragement to the array, and stores the updated array back in the database under the "encouragements" key.

The deleteEncouragement() function accepts an index as an argument.

It gets the list of encouragements from the database stored under the "encouragements" key. If the length is more than the index, then the list item at that index is deleted. Finally, the updated list is stored back in the database under the "encouragements" key.

Here is the updated code for the message function. After the code, I'll explain the new sections.

client.on("message", msg => {
  if (msg.content === "$inspire") {
    getQuote().then(quote => msg.channel.send(quote))
  }


  if (sadWords.some(word => msg.content.includes(word))) {
    db.get("encouragements").then(encouragements => {
      const encouragement = encouragements[Math.floor(Math.random() * encouragements.length)]
      msg.reply(encouragement)
    })
  }

  if (msg.content.startsWith("$new")) {
    encouragingMessage = msg.content.split("$new ")[1]
    updateEncouragements(encouragingMessage)
    msg.channel.send("New encouraging message added.")
  }

  if (msg.content.startsWith("$del")) {
    index = parseInt(msg.content.split("$del ")[1])
    deleteEncouragment(index)
    msg.channel.send("Encouraging message deleted.")
  }
})

The sad words section has been updated to use the encouraging messages from the database so user submitted messages can be used.

The next new section of code is used to add a new user-submitted message to the database. If a Discord message starts with "$new", then the text after "$new" will be used as a new encouraging message.

The code msg.content.split('$new ')[1] splits off the message from the "$new" command and stores the message in a variable. In that line of code, take note of the space in '$new '. We want everything after the space.

We call the updateEncouragements helper function with the new message, and then the bot sends a message to the discord chat confirming that the message was added.

The third new section (at the end of the code above) checks if a new Discord message starts with "$del". This is the command to delete an item from the "encouragements" list in the database.

The index is split off from the Discord message starting with "$del". Then, the deleteEncouragement() function is called passing in the index to delete. The updated list of encouragements is loaded into the encouragements variable, and then the bot sends a message to Discord with the current list.

Final Bot Features

The bot should work so this is a good time to test it. We will now add a few final features.

We will add the ability to get a list of user-submitted messages right from Discord and we will add the ability to turn off and on whether the bot responds to sad words.

I will give you the full final code of the program, and then I'll discuss the updates below the code.

const Discord = require("discord.js")
const fetch = require("node-fetch")
const Database = require("@replit/database")

const db = new Database()
const client = new Discord.Client()

const sadWords = ["sad", "depressed", "unhappy", "angry", "miserable"]

const starterEncouragements = [
  "Cheer up!",
  "Hang in there.",
  "You are a great person / bot!"
]

db.get("encouragements").then(encouragements => {
  console.log(encouragements)
  if (!encouragements || encouragements.length < 1) {
    db.set("encouragements", starterEncouragements)
  }  
})

db.get("responding").then(value => {
  if (value == null) {
    db.set("responding", true)
  }  
})

function getQuote() {
  return fetch("https://zenquotes.io/api/random")
    .then(res => {
      return res.json()
      })
    .then(data => {
      return data[0]["q"] + " -" + data[0]["a"]
    })
}

function updateEncouragements(encouragingMessage) {
  db.get("encouragements").then(encouragements => {
    encouragements.push([encouragingMessage])
    db.set("encouragements", encouragements)
  })
}

function deleteEncouragment(index) {
  db.get("encouragements").then(encouragements => {
    if (encouragements.length > index) {
      encouragements.splice(index, 1)
      db.set("encouragements", encouragements)
    }
  })
}

client.on("ready", () => {
  console.log(`Logged in as ${client.user.tag}!`)
})

client.on("message", msg => {
  if (msg.content === "$inspire") {
    getQuote().then(quote => msg.channel.send(quote))
  }

  db.get("responding").then(responding => {
    if (responding && sadWords.some(word => msg.content.includes(word))) {
      db.get("encouragements").then(encouragements => {
        const encouragement = encouragements[Math.floor(Math.random() * encouragements.length)]
        msg.reply(encouragement)
      })
    }
  })

  if (msg.content.startsWith("$new")) {
    encouragingMessage = msg.content.split("$new ")[1]
    updateEncouragements(encouragingMessage)
    msg.channel.send("New encouraging message added.")
  }

  if (msg.content.startsWith("$del")) {
    index = parseInt(msg.content.split("$del ")[1])
    deleteEncouragment(index)
    msg.channel.send("Encouraging message deleted.")
  }

  if (msg.content.startsWith("$list")) {
    db.get("encouragements").then(encouragements => {
      msg.channel.send(encouragements)
    })
  }

  if (msg.content.startsWith("$responding")) {
    value = msg.content.split("$responding ")[1]

    if (value.toLowerCase() == "true") {
      db.set("responding", true)
      msg.channel.send("Responding is on.")
    } else {
      db.set("responding", false)
      msg.channel.send("Responding is off.")
    }
  }
})

client.login(process.env.TOKEN)

The first section added to the code is right under the starterEncouragements list:

db.get("responding").then(value => {
  if (value == null) {
    db.set("responding", true)
  }  
})

We create a new key in the database called "responding" and set it to "true". We'll use this to determine if the bot should respond to sad words or not. Since the database is saved even after the program stops running, we only create the new key if it doesn't already exist.

The next new part of the code is in the section that responds to sad words is now inside this if statement. The bot will only respond to sad words if db.get("responding") = true. The ability to update this value comes after this next section.

Next, after the code to make the bot respond to the "$del" command, there is new code to respond to the "$list" command when sent as a Discord message.

The bot sends the list of encouragements as a Discord message.

The final new section comes next. This code makes the bot respond to the "$responding" command. This command takes an argument of either "true" or "false". Here is a usage example: "$responding true".

The code first pulls off the argument with value = msg.content.split("$responding ")[1] (like before, note the space in "$responding "). Then there is an if/else statement that appropriately sets the "responding" key in the database and sends a notification message back to Discord. If the argument is anything but "true", the code assumes "false".

The code for the bot is complete! You can now run the bot and try it out. But there is one more important step that we will discuss next.

How to Set Up the Bot to Run Continuously

If you run your bot in repl.it and then close the tab it is running in, your bot will stop running.

But there are two ways you can keep your bot running continuously, even after you close your web bowser.

The first way and simplest way is to sign up for paid plan in Repl.it. Their cheapest paid plan is called the Hacker Plan and it includes five always-on Repls.

You can get three months free using this link (limited to first 1000 people): https://repl.it/claim?code=tryalwayson2103

Once you have signed up for that plan, open your Repl and click the name at the top. Then select the "Always On" option.

There is another way to keep your code running even on the free tier but it is a little more complicated. Repl.it will continue running a web server even after the tab is closed. But even a web server will only run for up to an hour without any use.

Here is what the repl.it docs say:

Once deployed, the server will continue to run in the background, even after you close the browser tab. The server will stay awake and active until an hour after its last request, after which it will enter a sleeping stage. Sleeping repls will be woken up as soon as it receives another request; there is no need to re-run the repl. However, if you make changes to your server, you will need to restart the repl in order to see those changes reflected in the live version.

To keep the bot running continuously, we'll use another free service called Uptime Robot at https://uptimerobot.com/.

Uptime Robot can be set up to ping the bot's web server on repl.it every 5 minutes. With constant pings, the bot will never enter the sleeping stage and will just keep running.

So we have to do two more things to get our bot to run continuously:

1. create a web server in repl.it and
2. set up Uptime Robot to continuously ping the web server.

How to Create a Web Server in repl.it

Creating a web server is simpler than you may think.

To do it, create a new file in your project called server.js.

Then add the following code:

const express = require("express")

const server = express()

server.all("/", (req, res) => {
  res.send("Bot is running!")
})

function keepAlive() {
  server.listen(3000, () => {
    console.log("Server is ready.")
  })
}

module.exports = keepAlive

In this code, we use express to start a web server. The server returns "Bot is running!" to anyone who visits it. The server will run on a separate thread from our bot. We won't discuss everything here since the rest is not really relevant to our bot.

Now we just need the bot to run this web server.

Add the following line toward the top of index.js to import the server.

const keepAlive = require("./server")

To start the web server when index.js is run, add the following line as the second-to-last line, right before the bot runs.

keepAlive()

When you run the bot on repl.it after adding this code, a new web server window will open up. There is a URL shown for the web server. Copy the URL so you can use it in the next section.

How to Set Up Uptime Robot

Now we need to set up Uptime Robot to ping the web server every five minutes. This will cause the bot to run continuously.

Create a free account on https://uptimerobot.com/.

Once you are logged in to your account, click "Add New Monitor".

For the new monitor, select "HTTP(s)" as the Monitor Type and name it whatever you like. Then, paste in the URL of your web server from repl.it. Finally, click "Create Monitor".

We're done! Now the bot will run continuously so people can always interact with it on Repl.it.

Conclusion

You now know how to create a Discord bot with JavaScript, and run it continuously in the cloud.

There are a lot of other things that the discord.js library can do. So if you want to give a Discord bot even more features, your next step is to check out the docs for discord.js.

You do not need to install anything on your computer, and you do not need to pay anything to host your bot.

We are going to use a number of tools, including the Discord API, Python libraries, and a cloud computing platform called Repl.it.

There is also a video version of this written tutorial. The video is embedded below and the written version is after the video.

How to Create a Discord Bot Account

In order to work with the Python library and the Discord API, we must first create a Discord Bot account.

Here are the step to creating a Discord Bot account.

1. Make sure you’re logged on to the Discord website.

2. Navigate to the application page.

3. Click on the “New Application” button.

4. Give the application a name and click “Create”.

5. Go to the “Bot” tab and then click “Add Bot”. You will have to confirm by clicking "Yes, do it!"

Keep the default settings for Public Bot (checked) and Require OAuth2 Code Grant (unchecked).

Your bot has been created. The next step is to copy the token.

This token is your bot's password so don't share it with anybody. It could allow someone to log in to your bot and do all sorts of bad things.

You can regenerate the token if it accidentally gets shared.

How to Invite Your Bot to Join a Server

Now you have to get your Bot User into a server. To do this, you should create an invite URL for it.

Go to the "OAuth2" tab. Then select "bot" under the "scopes" section.

Now choose the permissions you want for the bot. Our bot is going to mainly use text messages so we don't need a lot of the permissions. You may need more depending on what you want your bot to do. Be careful with the "Administrator" permission.

After selecting the appropriate permissions, click the 'copy' button above the permissions. That will copy a URL which can be used to add the bot to a server.

Paste the URL into your browser, choose a server to invite the bot to, and click “Authorize”.

To add the bot, your account needs "Manage Server" permissions.

Now that you've created the bot user, we'll start writing the Python code for the bot.

How to Code a Basic Discord Bot with the discord.py Library

We'll be using the discord.py Python library to write the code for the bot. discord.py is an API wrapper for Discord that makes it easier to create a Discord bot in Python.

How to Create a Repl and Install discord.py

You can develop the bot on your local computer with any code editor. However, in this tutorial, we'll be using Repl.it because it will make it simpler for anyone to follow along. Repl.it is an online IDE that you can use in your web browser.

Start by going to Repl.it. Create a new Repl and choose "Python" as the language.

To use the discord.py library, just write import discord at the top of main.py. Repl.it will automatically install this dependency when you press the "run" button.

If you prefer to code the bot locally, you can use this command on MacOS to install discord.py:

python3 -m pip install -U discord.py

You may have to use pip3 instead of pip.

If you are using Windows, then you should use the following line instead:

py -3 -m pip install -U discord.py

How to Set Up Discord Events for Your Bot

discord.py revolves around the concept of events. An event is something you listen to and then respond to. For example, when a message happens, you will receive an event about it that you can respond to.

Let’s make a bot that replies to a specific message. This simple bot code, along with the code explanation, is taken from the discord.py documentation. We will be adding more features to the bot later.

Add this code to main.py. (You can name the file something else if you like, just not discord.py.) I'll explain what all this code does shortly.

import discord
import os

client = discord.Client()

@client.event
async def on_ready():
    print('We have logged in as {0.user}'.format(client))

@client.event
async def on_message(message):
    if message.author == client.user:
        return

    if message.content.startswith('$hello'):
        await message.channel.send('Hello!')

client.run(os.getenv('TOKEN'))

When you created your bot user on Discord, you copied a token. Now we are going to create a .env file to store the token. If you are running your code locally, you don't need the .env file. Just replace os.getenv('TOKEN') with the token.

.env files are used for declaring environment variables. On Repl.it, most files you create are visible to anyone but .env files are only visible to you. Other people viewing a public repl will not be able to see the contents of the .env file.

So if you are developing on Repl.it, only include private information like tokens or keys in a .env file.

Click the "Add file" button and create a file named .env.

Inside the file add the following line, including your actual token you copied previously:

TOKEN=[paste token here]

Now let's go over what each line of code is doing in your Discord bot code.

1. The first line imports the discord.py library.
2. The second line imports the os library, but this is only used for getting the TOKEN variable from the .env file. If you are not using a .env file, you do not need this line.
3. Next, we create an instance of a Client. This is the connection to Discord.
4. The [@client.event()](https://discordpy.readthedocs.io/en/latest/api.html#discord.Client.event) decorator is used to register an event. This is an asynchronous library, so things are done with callbacks. A callback is a function that is called when something else happens. In this code, the [on_ready()](https://discordpy.readthedocs.io/en/latest/api.html#discord.on_ready) event is called when the bot is ready to start being used. Then, when the bot receives a message, the [on_message()](https://discordpy.readthedocs.io/en/latest/api.html#discord.on_message) event is called.
5. The [on_message()](https://discordpy.readthedocs.io/en/latest/api.html#discord.on_message) event triggers each time a message is received but we don't want it to do anything if the message is from ourselves. So if the [Message.author](https://discordpy.readthedocs.io/en/latest/api.html#discord.Message.author) is the same as the [Client.user](https://discordpy.readthedocs.io/en/latest/api.html#discord.Client.user) the code just returns.
6. Next, we check if the Message.content starts with '$hello'. If so, then the bot replies with 'Hello!' to the channel it was used in.
7. Now that the bot is set up, the final line runs the bot with the login token. It gets the token from out .env file.

We have the code for the bot so now we just have to run it.

How to Run the Bot

Now click run button on the top to run your bot in repl.it.

If you are writing the bot locally, you can use these commands in the terminal to run the bot:

On Windows:

py -3 main.py

On other systems:

python3 main.py

Now go to your Discord room and type "$hello". Your bot should return "Hello!".

How to Improve the Bot

Now that we have a basic bot working, we'll improve it. It is called "Encourage Bot" for a reason.

This bot will respond with a message of encouragement whenever someone sends a message containing a sad or depressing word.

Anyone will be able to add encouraging messages for the bot to use and the user-submitted messages will be stored in the Repl.it database.

The bot will also return a random inspirational quote from an API when someone types the message "$inspire" into the chat.

We'll start with adding the "$inspire" feature.

How to Add Inspirational Quotes to the Bot

We will get inspirational quotes from an API called zenquotes.io. We need to import a couple more Python modules, add a get_quote() function, and update our bot code to call the function.

Here is the updated code. After the code, I'll explain the new parts.

import discord
import os
import requests
import json

client = discord.Client()

def get_quote():
  response = requests.get("https://zenquotes.io/api/random")
  json_data = json.loads(response.text)
  quote = json_data[0]['q'] + " -" + json_data[0]['a']
  return(quote)

@client.event
async def on_ready():
  print('We have logged in as {0.user}'.format(client))

@client.event
async def on_message(message):
  if message.author == client.user:
    return

  if message.content.startswith('$inspire'):
    quote = get_quote()
    await message.channel.send(quote)

client.run(os.getenv('TOKEN'))

We now have to import the requests module. This module allows our code to make an HTTP request to get data from the API. The API returns JSON, so the json module makes it easier to work with the data returned.

The get_quote() function is pretty straightforward. First, it uses the requests module to request data from the API URL. The API returns a random inspirational quote. This function could easily be rewritten to get quotes from a different API, if the current one stops working.

Next inside the function, we use json.loads() to convert the response from the API to JSON. Through trial and error I figured out how to get the quote from the JSON into the string format I wanted. The quote is returned from the function as a string.

The final part updated in the code is toward the end. Previously it looked for a message that started with "$hello". Now it looks for "$inspire". Instead of returning "Hello!", it gets the quote with quote = get_quote() and returns the quote.

At this point you can run your code and try it out.

How to Add Encouraging Messages to the Bot

Now we will implement the feature where the bot responds with encouraging messages when a user posts a message with a sad word.

How to Add Sad Words to the Bot

First we need to create a Python list that contains the sad words that the bot will respond to.

Add the following line after the client variable is created:

sad_words = ["sad", "depressed", "unhappy", "angry", "miserable"]

Feel free to add more words to the list.

How to Add Encouraging Messages to the Bot

Now we'll add a list of encouraging messages that the bot will respond with.

Add the following list after the sad_words list you created:

starter_encouragements = [
  "Cheer up!",
  "Hang in there.",
  "You are a great person / bot!"
]

Like before, feel free to add more phrases of your choice to the list. I'm just using three items for now because later we'll add the ability for users to add more encouraging phrases for the bot to use.

How to Respond to Messages

Now we need to update our bot to use the two lists we created. First, import the random module because the bot will choose encouraging messages randomly. Add the following line to the import statements at the top of the code: import random.

Now we will update the on_message() function to check all messages to see if they contain a word from the sad_words list. If a sad word is found, the bot will send a random message of encouragement.

Here is the updated code:

async def on_message(message):
  if message.author == client.user:
    return

  msg = message.content

  if msg.startswith('$inspire'):
    quote = get_quote()
    await message.channel.send(quote)

  if any(word in msg for word in sad_words):
    await message.channel.send(random.choice(starter_encouragements))

This is a good time to test the bot. You know enough now to create your own bot. But next you'll learn how to implement more advanced features and store data using the Repl.it database.

How to Enable User-submitted Messages

The bot is completely functional, but now let's make it possible to update the bot right from Discord. A user should be able to add more encouraging messages for the bot to use when it detects a sad word.

We are going to use Repl.it's built-in database to store user-submitted messages. This database is a key-value store that’s built into every repl.

At the top of the code, under the other import statements, add from replit import db. This will allow us to use the Repl.it database.

Users will be able to add custom encouraging messages for the bot to use directly from the Discord chat. Before we add new commands for the bot, let's create two helper functions that will add custom messages to the database and delete them.

Add the following code after the get_quote() function:

def update_encouragements(encouraging_message):
  if "encouragements" in db.keys():
    encouragements = db["encouragements"]
    encouragements.append(encouraging_message)
    db["encouragements"] = encouragements
  else:
    db["encouragements"] = [encouraging_message]

def delete_encouragment(index):
  encouragements = db["encouragements"]
  if len(encouragements) > index:
    del encouragements[index]
  db["encouragements"] = encouragements

The update_encouragements() function accepts an encouraging message as an argument.

First it checks if "encouragements" is a key in the database. If so, it gets the list of encouragements already in the database, adds the new one to the list, and stores the updated list back in the database under the "encouragements" key.

If the database does not already contain "encouragements", a new key by that name is created and the new encouraging message is added as the first element in the list.

The delete_encouragement() function accepts an index as an argument.

It gets the list of encouragements from the database stored under the "encouragements" key. If the number of items in the encouragements list is greater than the index, then the list item at that index is deleted.

Finally, the updated list is stored back in the database under the "encouragements" key.

Here is the updated code for the on_message() function. After the code, I'll explain the new sections.

async def on_message(message):
  if message.author == client.user:
    return

  msg = message.content

  if msg.startswith("$inspire"):
    quote = get_quote()
    await message.channel.send(quote)

  options = starter_encouragements
  if "encouragements" in db.keys():
    options = options + db["encouragements"]

  if any(word in msg for word in sad_words):
    await message.channel.send(random.choice(options))

  if msg.startswith("$new"):
    encouraging_message = msg.split("$new ",1)[1]
    update_encouragements(encouraging_message)
    await message.channel.send("New encouraging message added.")

  if msg.startswith("$del"):
    encouragements = []
    if "encouragements" in db.keys():
      index = int(msg.split("$del",1)[1])
      delete_encouragment(index)
      encouragements = db["encouragements"]
    await message.channel.send(encouragements)

The first new line of code from above is options = starter_encouragements. We are making a copy of starter_encouragements because we are going to add the user-submitted messages to that list before choosing a random message for the bot to send.

We check if "encouragements" is already in the database keys (meaning that a user has submitted at least one custom message). If so, we add the user messages to the starter encouragements.

Then, instead of sending a random message from starter_encouragements, the bot now sends a random message from options.

The next new section of code is used to add a new user-submitted message to the database. If a Discord message starts with "$new", then the text after "$new" will be used as a new encouraging message.

The code msg.split("$new ",1)[1] splits off the message from the "$new" command and stores the message in a variable. In that line of code, take note of the space in "$new ". We want everything after the space.

We call the update_encouragements helper function with the new message, and then the bot sends a message to the discord chat confirming that the message was added.

The third new section (at the end of the code above) checks if a new Discord message starts with "$del". This is the command to delete an item from the "encouragements" list in the database.

First a new variable called encouragements is initialized as an empty array. The reason for this is that this section of code will send a message with an empty array if the database does not include an "encouragement" key.

If the "encouragement" key is in the database, the index will be split off from the Discord message starting with "$del". Then, the delete_encouragement() function is called passing in the index to delete. The updated list of encouragements is loaded into the encouragements variable, and then the bot sends a message to Discord with the current list.

Final Bot Features

The bot should work so this is a good time to test it. We will now add a few final features.

We will add the ability to get a list of user-submitted messages right from Discord and we will add the ability to turn off and on whether the bot responds to sad words.

I will give you the full final code of the program, and then I'll discuss the updates below the code.

import discord
import os
import requests
import json
import random
from replit import db

client = discord.Client()

sad_words = ["sad", "depressed", "unhappy", "angry", "miserable"]

starter_encouragements = [
  "Cheer up!",
  "Hang in there.",
  "You are a great person / bot!"
]

if "responding" not in db.keys():
  db["responding"] = True

def get_quote():
  response = requests.get("https://zenquotes.io/api/random")
  json_data = json.loads(response.text)
  quote = json_data[0]["q"] + " -" + json_data[0]["a"]
  return(quote)

def update_encouragements(encouraging_message):
  if "encouragements" in db.keys():
    encouragements = db["encouragements"]
    encouragements.append(encouraging_message)
    db["encouragements"] = encouragements
  else:
    db["encouragements"] = [encouraging_message]

def delete_encouragment(index):
  encouragements = db["encouragements"]
  if len(encouragements) > index:
    del encouragements[index]
  db["encouragements"] = encouragements

@client.event
async def on_ready():
  print("We have logged in as {0.user}".format(client))

@client.event
async def on_message(message):
  if message.author == client.user:
    return

  msg = message.content

  if msg.startswith("$inspire"):
    quote = get_quote()
    await message.channel.send(quote)

  if db["responding"]:
    options = starter_encouragements
    if "encouragements" in db.keys():
      options = options + db["encouragements"]

    if any(word in msg for word in sad_words):
      await message.channel.send(random.choice(options))

  if msg.startswith("$new"):
    encouraging_message = msg.split("$new ",1)[1]
    update_encouragements(encouraging_message)
    await message.channel.send("New encouraging message added.")

  if msg.startswith("$del"):
    encouragements = []
    if "encouragements" in db.keys():
      index = int(msg.split("$del",1)[1])
      delete_encouragment(index)
      encouragements = db["encouragements"]
    await message.channel.send(encouragements)

  if msg.startswith("$list"):
    encouragements = []
    if "encouragements" in db.keys():
      encouragements = db["encouragements"]
    await message.channel.send(encouragements)

  if msg.startswith("$responding"):
    value = msg.split("$responding ",1)[1]

    if value.lower() == "true":
      db["responding"] = True
      await message.channel.send("Responding is on.")
    else:
      db["responding"] = False
      await message.channel.send("Responding is off.")

client.run(os.getenv("TOKEN"))

The first section added to the code is right under the starter_encouragements list:

if "responding" not in db.keys():
  db["responding"] = True

We create a new key in the database called "responding" and set it to "True". We'll use this to determine if the bot should respond to sad words or not. Since the database is saved even after the program stops running, we only create the new key if it doesn't already exist.

The next new part of the code is that the section that responds to sad words is now inside this if statement: if db["responding"]:. The bot will only respond to sad words if db["responding"] = True. The ability to update this value comes after this next section.

Next, after the code to make the bot respond to the "$del" command, there is new code to respond to the "$list" command when sent as a Discord message.

This section starts with creating an empty list called encouragements. Then, if there are already encouragements in the database, those encouragements replace the empty list that was just created.

Finally, the bot sends the list of encouragements as a Discord message.

The final new section comes next. This code makes the bot respond to the "$responding" command. This command takes an argument of either "true" or "false". Here is a usage example: "$responding true".

The code first pulls off the argument with value = msg.split("$responding ",1)[1] (like before, note the space in "$responding "). Then there is an if/else statement that appropriately sets the "responding" key in the database and sends a notification message back to Discord. If the argument is anything but "true", the code assumes "false".

The code for the bot is complete! You can now run the bot and try it out. But there is one more important step that we will discuss next.

How to Set Up the Bot to Run Continuously

If you run your bot in repl.it and then close the tab it is running in, your bot will stop running.

But there are two ways you can keep your bot running continuously, even after you close your web bowser.

The first way and simplest way is to sign up for paid plan in Repl.it. Their cheapest paid plan is called the Hacker Plan and it includes five always-on repls.

You can get three months free using this link (limited to first 1000 people): https://repl.it/claim?code=tryalwayson2103

Once you have signed up for that plan, open your Repl and click the name at the top. Then select the "Always On" option.

There is another way to keep your code running even on the free tier but it is a little more complicated. Repl.it will continue running a web server even after the tab is closed. But even a web server will only run for up to an hour without any use.

Here is what the repl.it docs say:

Once deployed, the server will continue to run in the background, even after you close the browser tab. The server will stay awake and active until an hour after its last request, after which it will enter a sleeping stage. Sleeping repls will be woken up as soon as it receives another request; there is no need to re-run the repl. However, if you make changes to your server, you will need to restart the repl in order to see those changes reflected in the live version.

To keep the bot running continuously, we'll use another free service called Uptime Robot at https://uptimerobot.com/.

Uptime Robot can be set up to ping the bot's web server on repl.it every 5 minutes. With constant pings, the bot will never enter the sleeping stage and will just keep running.

So we have to do two more things to get our bot to run continuously:

1. create a web server in repl.it and
2. set up Uptime Robot to continuously ping the web server.

How to Create a Web Server in repl.it

Creating a web server is simpler than you may think.

To do it, create a new file in your project called keep_alive.py.

Then add the following code:

from flask import Flask
from threading import Thread

app = Flask('')

@app.route('/')
def home():
    return "Hello. I am alive!"

def run():
  app.run(host='0.0.0.0',port=8080)

def keep_alive():
    t = Thread(target=run)
    t.start()

In this code, we use Flask to start a web server. The server returns "Hello. I am alive." to anyone who visits it. The server will run on a separate thread from our bot. We won't discuss everything here since the rest is not really relevant to our bot.

Now we just need the bot to run this web server.

Add the following line toward the top of main.py to import the server.

from keep_alive import keep_alive

To start the web server when main.py is run, add the following line as the second-to-last line, right before the bot runs.

keep_alive()

When you run the bot on repl.it after adding this code, a new web server window will open up. There is a URL shown for the web server. Copy the URL so you can use it in the next section.

How to Set Up Uptime Robot

Now we need to set up Uptime Robot to ping the web server every five minutes. This will cause the bot to run continuously.

Create a free account on https://uptimerobot.com/.

Once you are logged in to your account, click "Add New Monitor".

For the new monitor, select "HTTP(s)" as the Monitor Type and name it whatever you like. Then, paste in the URL of your web server from repl.it. Finally, click "Create Monitor".

We're done! Now the bot will run continuously so people can always interact with it on Repl.it.

Conclusion

You now know how to create a Discord bot with Python, and run it continuously in the cloud.

There are a lot of other things that the discord.py library can do. So if you want to give a Discord bot even more features, your next step is to check out the docs for discord.py.