Build a Discord Bot Using Visual Programming in VSCode With Flyde
Tags: beginners, opensource, discord, bots
Published: 2023-08-10 16:00:00


## Introduction

Discord bots are transforming the way we interact online, and visual programming is breaking down the complexities of coding.

In this tutorial, we'll explore the fundamentals of Discord bots, delve into the world of visual programming, and guide you through creating your very own bot using Flyde's intuitive interface.

By the end of this tutorial you have a working Discord bot that tells dad jokes:
![End result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78538qpe37i8sy2r8omh.png)

That is built and debugged visually, using Flyde:

![Flyde result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogd91acibrc1bm2n7hkf.gif)


Whether you're new to coding or looking to expand your toolkit, this tutorial has something for you.

Ready to dive in? 🚀

### Why is a Discord Bot Your Next Great Side-Project

Discord bots are an excellent entry point for experimenting with backend development. With the ability to connect directly from your computer, they bypass the need for proxies or early deployment, offering a quick feedback loop.

This hands-on approach provides real-world use-cases and a practical way to learn and grow as a developer.

Discord bots can be used for many use-cases; personal notifications, enhancing gaming experiences, moderating communities, manage your SaaS via commands and many more.

No matter the use-case, Discord bots are a rewarding and engaging side-project for anyone interested in coding.

### Why Visual Programming? Tracing the Path from the 1960s to Today

Visual programming has deep roots, dating back to the 1960s with tools like [GRaIL](https://instadeq.com/blog/posts/no-code-history-graphical-input-language-grail-1969), which laid the groundwork for making programming accessible and intuitive.


![GRaIL (1968).
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx0jun27mkkpg491s7c7.png)

Fast forward to today, and platforms like Zapier have democratized development, especially in the no-code space. In parallel, platforms like NodeRed and NoFlo.js champion flow-based programming, creating modular, interconnected blocks that excel in handling concurrent and asynchronous tasks.

![A screenshot of the NodeRed interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh01svskosxfkljkqphh.png)

For novice developers, visual programming's appeal lies in its simplicity and its ability to make complex concepts like concurrency and asynchronous tasks more manageable. By representing code as visual flows, it demystifies these challenges, offering a more intuitive understanding and control.

When it comes to building bots, visual programming is a natural fit. Bots often require handling real-time interactions and managing multiple tasks simultaneously. Visual programming's modular approach allows developers to visualize these processes, making it easier to design, debug, and deploy bots efficiently.

### What is Flyde? A Fresh Approach to Visual Programming
Flyde is an open-source, AI-assisted visual programming tool designed to simplify backend development, including APIs, webhooks, and more. By allowing users to build complex applications through connecting visual parts, it caters to both novice and experienced developers.

![Flyde's VSCode Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi9jh4y2zbnf3fwb56up.gif)
*👆 A screenshot of Flyde running in VSCode. Flyde files, like any other file in your project can be pushed to Git, diffed and code-reviewed!*

What makes Flyde stand out is its seamless integration into existing code bases as an npm library, enabling it to be part of your standard development workflow. Its flows, represented in plain YAML, can be version controlled, tested, and integrated with CI/CD pipelines, aligning with modern development practices.

With features like VSCode integration, visual debugging, a library of pre-built components, custom code integration, and more, Flyde is more than a tool; it's a gateway to efficient, creative, and enjoyable coding. It's a platform that adapts to your needs, offering flexibility without sacrificing simplicity, and empowers you to explore and innovate without limitations.

Flyde's unique approach to visual programming brings fresh energy and possibilities to the development landscape. Whether you're taking your first coding steps or looking for a new perspective on your projects, Flyde offers a path filled with creativity, efficiency, and empowerment.


## Prerequisites
Before moving on, let's make sure you have the essential tools for running this tutorial.

- **Basic development knowledge** - Familiarity with programming concepts, command-line usage, and a general understanding of development workflows will be helpful. This tutorial assumes you have some experience with JavaScript, but even if you're a beginner, you can still follow along!

- **Discord Account, App and Server** - You'll need a Discord account to create and manage your bot. If you don't have one, sign up on the [Discord website](https://discord.com/). You'll also need the Discord client installed on your system to test your bot. Also, you'll need to be the admin of a Discord server. If you aren't the admin of any servers, follow [this link](https://support.discord.com/hc/en-us/articles/204849977-How-do-I-create-a-server-) to create one.

- **VSCode** - Visual Studio Code (VSCode) is a free, open-source code editor. Download it from the [official VSCode website](https://code.visualstudio.com/).

- **Node.js** - Node.js is a JavaScript runtime for server-side development. Download it from the [official Node.js website](https://nodejs.org/).

- **Flyde extension** - Install the Flyde extension for VSCode from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode). Simply search for "Flyde" in the Extensions view within VSCode, and click on the Install button.

## Step 1 - Clone the Boilerplate Repository
Flyde provides a boilerplate repository to get you started quickly with building a Discord bot. This repository includes essential configurations and examples to kickstart your project.

Follow these steps to clone the repository:

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to clone the repository.
3. Run the following command:`git clone https://github.com/FlydeHQ/flyde-discord-bot-boilerplate.git`
4. Change into the cloned directory: `cd flyde-discord-bot-boilerplate`
5. Install the required dependencies using:`npm install`
6. Open the cloned project in VSCode

## Step 2 - Discord Bot Setup

Discord bot tokens are unique authentication keys used to identify and authorize your bot within the Discord API. These tokens should be kept secret to prevent unauthorized access to your bot.

1. Rename `.env.example` to just `.env`. This `.env` file is used to store environment variables such as your Discord bot token and client ID and is excluded from .git using the .gitignore rules. *ProTip™ - By using a `.env` file, you can keep sensitive information like API keys and tokens out of your code, making it more secure. When using the `dotenv` package, these variables are automatically loaded into your Node.js application's process environment, allowing you to access them throughout your code.*
2. Open the `.env` in VSCode and change `YOUR_DISCORD_BOT_TOKEN` to your token and `YOUR_DISCORD_CLIENT_ID` to your bot token. See how to obtain them below.
3. Add the newly created bot to your server 

### How to obtain the Discord token and client id
1. Go to the [Discord Developer Portal](https://discord.com/developers/applications) and log in.
2. Click on "New Application", give it a name, and create it.
3. Go to the "Bot" tab -> "Reset token" -> Copy the generated token and paste it instead of `YOUR_DISCORD_BOT_TOKEN` in the `.env` file. ![Bot token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zn92tdyquqcg5n5zql0.gif)
4. Go to the "OAuth2" tab and copy your client ID and paste it instead of `YOUR_DISCORD_CLIENT_ID` in the `.env` file.
![Client ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7i37bd6oprq3bmt514t.gif)
5. Go to "OAuth2" -> "URL Generator", select the "Bot" scope, and then under "Bot permissions" select "Send messages". Then click on copy URL button and navigate to that URL to add your new bot to a server you control. *Note that for any new API or capability you'll use, you will need to generate a NEW URL covering the new required scopes.* 
![Bot URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw3m82mauzemap21pc81.gif)

If you get stuck, check out this [great article](https://www.writebots.com/discord-bot-token/) which covers the token creation process in details.

## Step 3 - Running the bot locally
Before we dive into the project and and add some new commands, let's make sure everything is working properly.

1. Start the bot by running `npm start`. We recommend using the VSCode embedded terminal for simplicity. See [this guide](https://code.visualstudio.com/docs/terminal/basics) to learn how.
2. Go to the server you've added your bot to, and run the `/joke` command. You should see the bot reply with a joke:

![Discord bot in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txlbma685vatffr24o9f.png)
And the terminal should output something along:

![Terminal output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qh8jqx1yv6937ddll6s9.png)

*Jokes courtesy of the great https://sv443.net/jokeapi/v2/*

## Step 4 - Enter Visual Programming!
Having a running discord bot that tells jokes is awesome, but you could have done that using regular code, right?

Time to use the Flyde VSCode extension to see how the `/joke` command is built, and then, see it's flow running live using Flyde's remote debugger!

1. Open the cloned project in VSCode
2. Open `commands/joke/Handler.flyde`
3. You should see a visual flow instead of textual code! Cool, right?
![Visual flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfj92kgr1y8hxwg5np3i.png) If you don't, make sure the [Flyde VSCode extension](https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode) was properly installed and you've restarted the editor at least once since
4. Time to see the visual debugger in action! Don't worry if the visual flow doesn't make sense yet. We'll soon dive into what's exactly going on there. Make sure your bot is running (`npm start`) and open Discord in a way that the Flyde flow is visible. Using Discord from mobile works great, but 2 monitors or just manually arranging the windows should work. Once you can see both the flow and discord, run the joke command.
5. If everything worked well, you should have seen the data flowing in real time! 🤯 I hope you understand how powerful this can be in debugging and reasoning about programs. You can even hover the inputs and outputs to see the data that passed through them.

This is how the flow looks like while the joke command is running:
![Visual debugger in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5efcyeyuikfyh0ic9n71.gif)

## Step 5 - Let's Add a New Command!

Time to get our hands dirty. We create a new command called `/greet` that greets the user. We'll start with a simple, hard-coded greet, and evolve to be personalized to the user and the current time.

1. Create a new command by running `npm run new-command`. Enter "greet" as the command name, and "Greets the user" as the description:

![Console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy1oc7fyz3sob0by14wp.png)
This creates a new folder in the commands folder containing a config.json file and a Hander.flyde, nothing magical. If you're curious (and you should be!) check out `scripts/load-commands.ts` to see how commands are loaded. The bot should reload automatically with any command file change.
2. Open `commands/greet/Handler.flyde` in VSCode - it should load the Flyde extension with the default command handler.
3. The command starts with a delayed version of the classic "Hello, World" example. Try running the bot and see it in action!
4. Remove the "World" string node and the "Delay" node by clicking on each, and pressing the delete keyboard button (or right click -> delete instance)
5. The "Hello" node is a Flyde inline value node. It can be used to create hard-coded values, like strings, but also used for inline scripts and calculations, which are better conveyed textually than visually. Double click it to open the edit modal, and change the value to `"Hello user! Welcome to our server!"`. Make sure to use double (or single) quotes. 
6. Save your flow (just like you save any other VSCode file!), wait for the bot to restart. You should see a message like "Successfully reloaded application (/) commands." in your terminal. 
7. Try using the `/greet` command again and see your latest changes!
8. Let's personalize the message a bit. Double click the inline node again, and change the value to: ```
`Hello, ${inputs.name}`
```
Make sure to use backticks, as Flyde will **automatically transform any `inputs.X` usage into an input pin for that node**, creating a visual version of a template literal. The inputs become required for the node to run, and Flyde will not process the node until the input is satisfied.  
![Value change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzy8h3h14czq7g2q49o4.png)
7. To get the user's id, we can access the `interaction` object available in our running context using another inline value: Right click the board and select "New value", then type `interaction.user.username`. This time without quotes, as we want to access the actual variable. 
![New value result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79fa3nxyeha52cluxtdm.png)

*This is a good time to mention Flyde is a generic tool and isn't aware of Discord. The `interaction` object is available because Flyde passes the Discord.js `interaction` object to the flow via an advanced featured called "externalContext".*

8. Connect the output of the new value you've created to the `name` input of the "Hello" string from before. You can do it by either clicking the "value" output pin and then clicking on the "name" input pin, or more intuitively, drag one to the other: 
![Pins connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr8qnurs4yprfuxo367v.gif)

Now make sure the bot restarted properly, and go see the command in action. Don't forget to see the flow running inside VSCode too! 

![Greet command in Discord](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5ys78um03twi4c9m9p8.png)

## Step 6 - Enhancement Ideas
I hope by now you can see how powerful can visual programming using Flyde be. Check out [the official docs](https://www.flyde.dev/docs) to learn more about Flyde and try building some cool new commands.

Here are some ideas:
- Try connecting to an external API using the HTTP node
- Try writing and reading to a file using the Filesystem nodes
- Try creating a new custom node using code and use it in your flow. [Learn how](https://www.flyde.dev/docs/code-parts/)

## Summary
Congratulations on completing this tutorial! You've taken your first steps into the world of visual programming with Flyde, building a Discord bot that's both functional and engaging. 

While this tutorial builds on Discord bots, Flyde is very flexible and powerful and can be used to build many other things. *It is not limited to Discord bots by any means!*

Flyde's unique approach to visual programming opens up a realm of possibilities. Even though it's still in the early days, the power and flexibility it offers are undeniable.

### Get Involved
Your feedback and engagement are vital as Flyde continues to grow:
- Open issues on [GitHub](https://github.com/FlydeHQ/flyde) if you encounter problems or have suggestions.
- Star the project to show your support.
- Join the [Flyde Discord community](https://discord.com/invite/x7t4tjZQP8) to connect with other enthusiasts.
- Need help? Write in the comments, and we'll be there for you!

### What's Next?
I'm eager to hear what you'd like to see in a **follow-up content**. Are you interested in learning about:
1. Using command parameters to enhance your bot's functionality?
2. Exploring more Discord usages (e.g., reactions, embeds)?
3. Understanding deployment strategies for your bot?
4. Diving deeper into control flow in Flyde, including ifs and loops?
5. A video version of this tutorial?

Please comment with what you'd like to see next!

Flyde is an evolving platform, and your journey with it is just beginning. Embrace the creativity, efficiency, and empowerment it offers. Keep experimenting, keep learning, and most importantly, have fun!