Discord의 새로운 임베디드 앱 SDK: 매력적인 앱 제작하기

Nicholas가 새로운 Discord 임베디드 앱 SDK를 통해 개발자가 매력적인 멀티플레이어 경험을 쉽게 제작할 수 있는 방법을 알려드립니다.

### 새로운 임베디드 앱 SDK로 Discord 앱 구축하기
* 👨 얼마 전 Discord는 개발자가 Discord를 떠나지 않고도 **멀티플레이어 게임이나 소셜 경험 등 커뮤니티를 위한 매력적인 앱**을 만들 수 있는 **새로운 임베디드 앱 SDK**를 출시했습니다.
* 🚀 개발자는 **SDK를 통해 이미 Discord를 사용하는 수백만 명의 사용자에게 도달**할 수 있으며, 사용자가 다운로드하거나 새 계정을 만들 필요가 없으므로 타겟 오디언스의 참여를 유도하기가 더 쉬워집니다.
* 🕹 서울에서 온 소프트웨어 개발자 니콜라스는 노매드 코더스 디스코드 서버용 멀티플레이어 포모도로 타이머 앱인 **토마티나를 개발**하며 **SDK로 쉽게 시작**할 수 있다는 것을 보여줬습니다.
* 🔑 시작하려면 개발자는 **Discord 설정에서 개발자 모드를 활성화**하고, 새 애플리케이션을 만든 다음, 프로필 정보에 액세스할 수 있도록 **사용자 인증을 위한 OAuth를 설정**해야 합니다.
* 🌐 앱은 다양한 프런트엔드 기술을 사용하여 구축할 수 있는 **단일 페이지 애플리케이션(SPA)**으로 작동하며, 테스트하려면 **Cloudflare와 같은 도구**를 사용하여 로컬 서버를 공용 인터넷에 노출시켜야 합니다.
* 🔄 앱이 실행되면 개발자는 사용자를 인증하여 프로필 데이터를 수집하고 **Discord API와 상호 작용**하여 원활한 사용자 경험을 제공할 수 있습니다.
* 📚 SDK 문서는 사용 가능한 방법과 명령어에 대한 풍부한 정보를 제공하여 개발자가 다양한 애플리케이션을 만들 수 있도록 지원하지만, **공개 개발자 프리뷰 단계에는 몇 가지 제한 사항**이 있습니다.
* 👍 이 정보가 도움이 되었다면 **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

Discord의 임베디드 앱 SDK 시작하기

Discord의 새로운 임베디드 앱 SDK를 통해 개발자는 플랫폼을 떠나지 않고도 사용자를 위한 멀티플레이어 게임과 소셜 경험을 제작할 수 있습니다.

이를 통해 많은 사용자에게 도달하고 Discord의 실시간 및 멀티플레이어 기능을 무료로 활용할 수 있는 특별한 기회를 제공합니다.

또한, SDK는 앱 검색 섹션과 향후 수익화 옵션도 제공하므로 개발자가 Discord 앱을 구축하기에 이상적인 시기입니다.

Discord에서 멀티플레이어 포모도로 타이머 만들기

멀티플레이어 포모도로 타이머를 위한 Tomatina라는 새로운 애플리케이션이 Discord에서 만들어지고 있습니다.

사용자 인증은 계정 정보를 수집하기 위해 OAuth를 사용하여 설정됩니다.

앱의 프런트엔드는 테스트를 위해 로컬호스트를 공개하여 TypeScript, Vite, Bun을 사용하여 구축할 예정입니다.

Discord 앱에 대한 사용자 인증하기

사용자를 인증하기 위해 앱은 클라이언트 ID와 프로필 및 이메일과 같은 원하는 범위로 인증을 요청합니다.

사용자 인증이 완료되면 코드가 수신되고 백엔드에서 액세스 토큰으로 교환됩니다.

액세스 토큰은 Discord API에서 사용자 정보를 검색하는 데 사용되어 원활한 사용자 로그인과 데이터 표시를 가능하게 합니다.

이 동영상은 사용자 수가 25명 이하인 서비스에 대해 설명하며 아직 인앱 구매를 사용할 수 없다고 언급합니다.

크리에이터는 시청자에게 채널 좋아요, 공유 및 구독을 권장합니다.

영상은 친근한 인사와 음악으로 마무리됩니다.