Gabriel Grinberg

Posted on Aug 10, 2023 • Edited on Aug 12, 2023 • Originally published at Medium

Build a Discord Bot Using Visual Programming in VSCode With Flyde

#beginners #opensource #discord #bots

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:

That is built and debugged visually, using Flyde:

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, which laid the groundwork for making programming accessible and intuitive.

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.

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.

👆 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. 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 to create one.
VSCode - Visual Studio Code (VSCode) is a free, open-source code editor. Download it from the official VSCode website.
Node.js - Node.js is a JavaScript runtime for server-side development. Download it from the official Node.js website.
Flyde extension - Install the Flyde extension for VSCode from the VSCode Marketplace. 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:

Open your terminal or command prompt.
Navigate to the directory where you want to clone the repository.
Run the following command:git clone https://github.com/FlydeHQ/flyde-discord-bot-boilerplate.git
Change into the cloned directory: cd flyde-discord-bot-boilerplate
Install the required dependencies using:npm install
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.

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.
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.
Add the newly created bot to your server

How to obtain the Discord token and client id

Go to the Discord Developer Portal and log in.
Click on "New Application", give it a name, and create it.
Go to the "Bot" tab -> "Reset token" -> Copy the generated token and paste it instead of YOUR_DISCORD_BOT_TOKEN in the .env file.
Go to the "OAuth2" tab and copy your client ID and paste it instead of YOUR_DISCORD_CLIENT_ID in the .env file.
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.

If you get stuck, check out this great article 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.

Start the bot by running npm start. We recommend using the VSCode embedded terminal for simplicity. See this guide to learn how.
Go to the server you've added your bot to, and run the /joke command. You should see the bot reply with a joke:

And the terminal should output something along:

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!

Open the cloned project in VSCode
Open commands/joke/Handler.flyde
You should see a visual flow instead of textual code! Cool, right? If you don't, make sure the Flyde VSCode extension was properly installed and you've restarted the editor at least once since
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.
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:

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.

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

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.

Open commands/greet/Handler.flyde in VSCode - it should load the Flyde extension with the default command handler.
The command starts with a delayed version of the classic "Hello, World" example. Try running the bot and see it in action!
Remove the "World" string node and the "Delay" node by clicking on each, and pressing the delete keyboard button (or right click -> delete instance)
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.
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.
Try using the /greet command again and see your latest changes!
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.

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.

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".

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:

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!

Step 6 - Enhancement Ideas

I hope by now you can see how powerful can visual programming using Flyde be. Check out the official 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

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 if you encounter problems or have suggestions.
Star the project to show your support.
Join the Flyde Discord community 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:

Using command parameters to enhance your bot's functionality?
Exploring more Discord usages (e.g., reactions, embeds)?
Understanding deployment strategies for your bot?
Diving deeper into control flow in Flyde, including ifs and loops?
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!