Over the recent times, I've been trying to be more active on Discord than ever because a quite good number of people

among you have decided to join my server. My mods, or the awesome folks who run the server, have added a bunch of bots that

can do some cool stuff like banning troublemakers, removing spam and curse words, and many more. Now, this might not

be the most exciting thing ever, but what really got me curious was how these bots work under the hood. After digging into

it, I discovered that I can create my own bot completely free. This 'free' tag made me think of all the ways I could misuse a

bot right away. I wanted to create something cool that would play around with misusing the bot. This seemed like a

great idea, and when I was about to add it to my list of ideas in Obsidian, I suddenly realized that I already had an

application for this idea in mind. You see, I use Obsidian for just about everything: scripting, taking notes,

planning, and whatnot. But sometimes I brainstorm ideas in the wrong place, especially when the pressure starts to

build. I try to save these ideas on my phone, but they often get misplaced and I end up losing them. This problem led me

to my idea of using Discord to store my notes and easily access them when I'm back on my PC; simple and without the

risk of losing anything. I know this is basically what Notion is and what the paid version of Obsidian provides, but I

figured out I could create something similar for free and keep it secure using encryption. After all, who really

knows what happens to your data with these services? So, hello and welcome to another video where we're going to have

some fun trying to misuse the Discord API. First things first, here's what I had in mind. Since my projects focus on

Keeping costs as low as possible, or ideally free. Let me set the context for what I wanted to achieve: I wanted to

create a website that communicates with a bot. The bot would post messages in a channel, help me retrieve them, and then I

would display those messages back on the website. Pretty simple, right? I mean, people already use bots to store files,

so handling text should be even easier, right? Moving forward, I discovered that I could use Discord.js, a popular

JavaScript library that makes it super easy to communicate with the Discord API. It basically lets you create bots and

have them do all sorts of things. Diving into the project, I made a new Discord bot and added it to a new channel named

"save notes". Now that the plan was clear, I quickly set up an input field to capture user input and created an API route to

post it directly into the Discord channel. This worked as expected; everything seemed to fall into place, and I thought this video was wrapping up

right here. But little did I know, something unexpected was just around the corner. Basically, the input field comes with an `onchange` property. This allows

you to trigger functions whenever the user changes something in the field, making it pretty easy to handle the input. What I initially tried was to use

a single message that I could keep updating, but that plan didn't work out because Discord has a 2,000-character

per-message limit, so I had to rethink my approach. Next, I tried splitting the input into individual words and posting

them through the API. It didn't take long to realize that this would result in way too many API calls, which the server

or, at least, the Discord bot might not be able to handle. This needed some optimization. You see, an input field has

another property called `onblur`, which allows you to run functions when the focus or cursor is removed from the text.

Field now, this was perfect. Every time I stopped typing and clicked somewhere else, I could grab the new bunch of words and

post them, resulting in far fewer API calls. Plus, I would probably stay within the 2,000-character limit, because who

even types 2,000 characters in one go? This was working well, so well that I could hardly believe it. But now, an even

bigger problem was coming up. After creating a way to post messages, I needed a way to retrieve them, so I set up

another API that fetches all the messages from a channel. This part was also pretty straightforward, but things started to go the other way when I had

to add the edit functionality. In a note-taking app, you typically need to edit some text, and it turns out that

implementing the edit functionality isn't as simple as I thought. To edit a string, you have to calculate the

difference between each character or word in the right order, with no room for mistakes. This sounds like it should

be an easy task, but trust me, it wasn't. Calculating the difference between two strings or arrays isn't as easy as it

sounds. I spent countless hours trying to figure out the difference, but I couldn't. And after banging my head inside loops, I

learned that there are dedicated algorithms for string comparison. Remember, if something requires an algorithm, use it. Don't try to be a nerd and

do it on your own. Now, I studied these algorithms for like days and days, and after mastering them, I was ready to

tackle anything. After some deep research, I decided to use the Myers diff algorithm. It's a popular choice for

finding the difference between two sequences, like arrays and strings. This algorithm is also used in Git to compute the diff between file versions. The plan

was straightforward: I would get the input and then fetch all the messages from my Discord channel. Then I would

Pass both of them to the algorithm and get the diff. The algorithm returns an array of objects where each object is a

word with a type and a value. There are three types: unchanged, removed, and added, with the corresponding value being

the word itself. Now, I looped over each Discord message to check for changes one by one. I get the length of the current

message to slice its corresponding elements in the diff result. This gives me the current message along with any changes. Now, this subset of the diff

result lets me work my way through editing. I join the elements of the subset that have the type unchanged or

added into a single string. Then, I compare this string to the current message. If they don't match, I simply

edit the current message to the new subset. If the joined result is an empty string, it means all the elements in the

subset have the type as removed, so I just delete the message. Lastly, to check for new messages, I set an index that

adds up the length of each Discord message. When the loop ends, if the index, which represents the number of words in

the Discord messages, is smaller than the length of the diff result, it indicates that there are new words added in the

diff. If this is true, I grab the elements from the end of the diff result that have the type added and just post them

as a new message. All right, now everything seems to fall into place. All I had to do now was set up a front end

for this stuff. Building the website was pretty straightforward; after all, my years of experience in front-end web development came in handy. Anyways, one

should be able to create new notes as well, right? So I set up another API route which lets you create a note. A note here

refers to an individual channel inside a server, where each channel behaves like a note with content as messages inside of it.

The most important part of this project is privacy, so I implemented encryption using a popular JavaScript library called CryptoJS, along with the

AES, or Advanced Encryption Standard algorithm. It's considered one of the most secure encryption algorithms and is used by governments, so our little

notes app should be pretty okay. Although the CryptoJS library is no longer maintained, it still gets the work done.

Setting it up was simple. I encrypted messages whenever there was a POST request, which transformed the text into random strings, and I would decrypt the

messages whenever there was a GET request. However, I ran into a problem with encrypting the channel names. It

turns out Discord channels can only use plain words separated by dashes, but these encrypted strings had all kinds of punctuation and symbols. After

discussing this issue with my Discord people, we decided to use files instead of text messages. This approach would

even allow us to bypass the character limit easily and store extra information, like the channel name and other stuff,

inside the file's metadata. Lastly, we can encrypt the entire file, ensuring everything is secure. This file thing

might actually be an ideal approach for a situation like this. I tried a simple implementation of it, and while it worked,

it ran into multiple issues, so I ended up saving the code by commenting it out. Now, since this had issues, I

didn't get to encrypt the channel names, and we are back to using strings for now. The code, which might be some of the

weirdest code ever written by a human, is in the description. Feel free to check it out further. If we work on the project

for the channel name, we could try naming it something random, like a short string. Then, when we fetch the content, we can

retrieve the actual channel name from the metadata of the messages. This way, the channel name will stay hidden while

We still get to retrieve it later on. Finally, it was time to deploy this thing because I wanted it to be online so

I could access it from anywhere. Right? Since the whole idea was to make the website free to use, I decided to deploy

the website on Vercel. I thought the project was complete. I didn't realize that there was real trouble up ahead.

When I tried using the deployed website, I ran into strange errors, the kind of errors I had never seen before. I tried

running it locally again, and everything seemed to be working perfectly fine at first. I blamed Vercel, but then we tried

building it locally and running the build, and it turns out these errors came from the build, and not Vercel. After

digging deeper, we realized the issue was with Discord.js. You see, when you deploy a website, it goes through a build

process, and during this process the JavaScript code gets compiled and bundled. The problem is Discord.js doesn't seem to handle the build process

very well, or at least that's what we concluded. In the future, we might need to make a client which communicates

with the Discord API directly. This also needed some kind of authentication, like login and sign-up, but since the main

functionality is lacking, there is no point in adding that. The link to the hosted website is also in the

description; check it out because some of the functionality still seems to work. And that is it for the video. Thanks for

I tried using Discord as a Database for my Website

StupidGeek

Discord 봇을 활용한 웹사이트 구축 아이디어 발상 및 목표 설정

Discord 서버 활성화 및 봇 기능 소개

무료 봇 제작 가능성 확인 및 아이디어 구상

Obsidian을 이용한 아이디어 정리의 어려움과 Discord 활용 아이디어 제시

Notion, Obsidian 유료 버전과의 차별점 및 무료, 안전한 대안 제시

저비용 또는 무료 웹사이트 구축 목표 설정 및 웹사이트-봇 상호작용 계획

Discord.js 라이브러리를 이용한 봇 개발 및 웹사이트 구현 과정

Discord.js 라이브러리 소개 및 봇 생성

입력 필드 생성 및 Discord 채널에 메시지 전송 API 구현

메시지 길이 제한(2000자) 문제 발생 및 해결 방안 모색

`onblur` 속성 활용한 API 호출 최적화

메시지 검색 API 구현 및 편집 기능 구현의 어려움

문자열 비교 알고리즘 적용 및 편집 기능 구현

문자열 비교 알고리즘의 필요성과 어려움

Myers diff 알고리즘 선택 및 적용

알고리즘 결과 분석 및 메시지 편집, 추가, 삭제 로직 구현

새로운 메시지 확인 및 추가 로직 구현

프론트엔드 구축, 암호화 및 배포 과정

웹사이트 프론트엔드 개발 및 새로운 메모 생성 기능 추가

CryptoJS 라이브러리와 AES 알고리즘을 이용한 암호화 구현

채널 이름 암호화 문제 발생 및 파일 사용으로 전환

배포 후 발생한 오류 및 문제 해결 과정

배포된 웹사이트에서 발생한 예상치 못한 오류

오류 원인 분석 및 Discord.js 라이브러리 문제점 발견

빌드 프로세스와 Discord.js의 호환성 문제

향후 개선 방향 및 추가 기능 계획(인증 시스템 등)

I tried using Discord as a Database for my Website

I tried using Discord as a Database for my Website

스크립트