Not long ago, Discord released the new embedded app SDK, and since finding out about it, I can't stop coming up with ideas of apps to build for the Nomad Coders Discord server.

The embedded app SDK is pretty cool and pretty easy to use, so today I want to show you how it works and how to get started building your first Discord app.

If you're new here, my name is Nicholas. I am a software developer living in Seoul, South Korea. I love building things and teaching others how to build them, too.

For a while now, users in Discord chats have been able to do stuff together like playing games or watching YouTube as a group, which is pretty cool, but up until now, there aren't many activities and they're mostly games.

This is about to change thanks to the new embedded app SDK that Discord announced last March.

Using that SDK, it is now possible for us developers to create our own multiplayer games or social experiences that Discord users can join without leaving Discord.

I can't overstate how awesome this is for developers. If you build a real-time game or some social app on your own, the marketing effort to get people to download your app or to create an account on your website and stay on it is huge.

With the embedded app SDK, you can reach the millions of users that are already playing games and hanging out in Discord, your target audience in an instant and without making anyone download anything or create an account.

You also get the real-time and multiplayer features of Discord across Desktop, Android, iOS, and the web for free.

Also, an app Discovery section for users to find your app and the app monetization for subscription and in-app purchases is coming soon. Whenever platforms open themselves to developers, the first apps to be published have an insane advantage.

They get promoted more, they have little to no competition at the start and they can build a fan base before copycats show up.

Now is the perfect time to learn how to make Discord apps, which, as you will see, is incredibly easy and the developer experience is pretty good.

To get started, go to your user settings, click on Advanced, and then enable developer mode.

Then go to discord.com/developers/applications and create a new application. I am thinking of creating a multiplayer Pomodoro Timer for when Nomad Coders users study together, so I'm going to name my app Tomatina, and I will add a tomato icon.

Inside of your new app settings, click on Getting Started under Activities, and then click Enable because our app will get information from the users' account, like their username, avatar, and guild.

We need to authenticate the user using Oauth2 to get the keys for that. Click on Oauth2 on settings and copy your client ID and click on the Reset Secret button to get the client secret.

Make sure to keep the client secret safe and secret, then click on the button Add Redirect, and because we don't have a website yet, just write down https://127.0.

0.1. At its core, a Discord activity is an SPA, a single-page application that is rendered inside of Discord and that uses the embedded app SDK to communicate with Discord.

You can build the front end of your activity using React, Vue, or whatever you want, as long as the result is a client-side rendered SPA.

For this video, I will do it using Typescript, Vite, and Bun.

After installing the embedded app SDK, we need to initialize it using the client ID we got before. We wait for it to connect and then write a message on screen.

Because the app is running in localhost, we need to expose it to the public internet to test it in Discord. I'll do that using Cloudflare's Argo Tunnel.

this command that will expose my Local Host to the world through a URL that looks like this. Visiting this URL is the same as visiting Local Host. Once we have the public URL, we need to tell Discord to open it when the user starts our activity.

To do this, go back to your application settings, click on URL mappings and paste that URL on the Target Field of the first mapping.

Then go to your server, join a voice channel, click on Start Activity, and select your app.

You should now see your app running inside of Discord. Sweet! Now we need to authenticate the users that are running our app so we can get their profile, server information, avatars, and so on and so on.

To do that, we call the authorized command with our client ID and the scopes we want to ask the user for. Here we are only asking the user for their profile and their email, but there are many other permissions you can ask for.

If we go back to Discord and start our app again, we will now see the Discord authorized dialogue.

If the user clicks authorized, we will get a code that we need to exchange for an access token so we can talk to the Discord API on behalf of the user.

That has to happen in our back end, so we will send a post request to it with the code and expect an access token back.

I built my back end using Hono, a lovely framework I really like using nowadays.

The code is pretty simple. First, the server will receive the code from the front end, and then it will call the Discord API with the client ID, client secret, and the code to receive an access token that we will then send to our front end.

In the front end, we can now take that access token and call the authenticate command with it to get information about the logged in user and display their name on the screen, and it works awesome.

If you wanted to, you could call the Discord API directly from the app using the access token to get more information about the user, and that's it.

You now know how to make a Discord app, how it works, and how to log Discord users into it. This is a good starting point for you to continue building whatever awesome app you are thinking of building because Discord apps are just websites.

The sky is the limit. You can be as creative as you want.

If you check out the SDK documentation, you can see all the methods, commands, and events that are available to you. Among others, you can detect when a user is speaking or not, when a new user joins the app, and even when they change their rotation of their phone.

Since the SDK is currently in public developer preview, there are some temporary limitations you should keep in mind, like activities only being playable in servers with 25 users or less, and in app purchases not being available yet.

I hope you found this video useful. If you did, please like it, share it with your friends, and subscribe to the channel.

Thank you for watching. As always, see you on the next one. Bye-bye.

3분 안에 디스코드 앱 만들기?

한국인 린과 콜롬비아인 니꼴라스의 프로젝트 "노마드 코더" 입니다.
2015년 떠나, 현재까지 원하는 곳에서 일하며, 살고 있습니다.
📌 니콜라스와 무료로 코딩 공부하기 : https://nomadcoders.co


3분 안에 디스코드 앱 만들기?

3분 안에 디스코드 앱 만들기?

스크립트