Discord's New Embedded App SDK: Build Engaging Apps

Nicholas reveals how the new Discord embedded app SDK empowers developers to create engaging multiplayer experiences easily.

### Building Discord Apps with the New Embedded App SDK
* 👨 Not long ago, Discord released the new embedded app SDK, which allows developers to create **engaging apps for their communities**, like multiplayer games and social experiences, **without leaving Discord**.
* 🚀 The SDK enables developers to **reach millions of users already on Discord**, eliminating the need for users to **download anything or create new accounts**, making it **easier to engage a target audience**.
* 🕹 Nicholas, a software developer from Seoul, is excited about creating a multiplayer Pomodoro Timer app called Tomatina for The Nomad Coders Discord server, showcasing the **simplicity of getting started with the SDK**.
* 🔑 To begin, developers must **enable developer mode** in Discord settings, create a **new application**, and set up **OAuth for user authentication** to access their profile information.
* 🌐 The app functions as a **single-page application (SPA)** that can be built using various front-end technologies, and testing requires **exposing the local server to the public internet** using tools like Cloudflare.
* 🔄 Once the app is running, developers can authenticate users to gather their **profile data** and interact with the Discord API, allowing for a **seamless user experience**.
* 📚 The SDK documentation provides a wealth of information on available methods and commands, enabling developers to **create diverse applications**, though there are some limitations during the **public developer preview phase**.
* 👍 If you found this information helpful, consider **liking, sharing, and subscribing** for more content about **building apps on Discord**.

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 weren't many activities, and they were 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 too. 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's settings, click on getting started under activities, and then click enable. Because our app will get information from the user's account, like their username, Avatar, and Guild, we need to authenticate the user using OAuth to get the keys for that. Click on OAuth 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 Save 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 view 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 the 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 with this command that will expose my localhost to the world through a URL that looks like this. Visiting this URL is the same as visiting localhost. 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 in 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. 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 ser Serv 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. [Music]

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

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


노마드 코더 Nomad Coders

Getting Started with Discord's Embedded App SDK

Discord's new embedded app SDK allows developers to create multiplayer games and social experiences for users without leaving the platform.

This offers a unique opportunity to reach a large audience and utilize Discord's real-time and multiplayer features for free.

The SDK also provides an app discovery section and upcoming monetization options, making it an ideal time for developers to build Discord apps.

Creating a Multiplayer Pomodoro Timer on Discord

A new application called Tomatina is being created on Discord for a multiplayer Pomodoro Timer.

User authentication is set up using OAuth to gather account information.

The app's front end will be built using TypeScript, Vite, and Bun, with the localhost exposed to the public for testing.

To authenticate users, the app requests authorization with a client ID and desired scopes, such as profile and email.

Upon user authorization, a code is received, which is then exchanged for an access token in the back end.

The access token is used to retrieve user information from the Discord API, allowing for seamless user login and data display.

The video discusses a service with 25 users or less and mentions that in-app purchases are not available yet.

The creator encourages viewers to like, share, and subscribe to the channel.

The video ends with a friendly goodbye and music.