20240330134529-building_your_first_activity_in_discord.org

Building Your First Activity in Discord

https://discord.com/developers/docs/activities/building-an-activity https://github.com/discord/getting-started-activity

JavaScriptで以下の目標を持ったDiscord Activitiesアプリを作る

• 新しいDiscordアプリを作成する
• VoiceChannelからアプリを起動する
• ユーザー認証する
• 現在のVoiceChannel名を取得し、表示する
• 現在のサーバーアバターを表示する

前提条件

• Embedded App SDKを利用する
• JavaScriptの経験
• ウェブ技術の知識

知っておくべき概念

• 非同期JavaScript
• React、Vueなどのフロントエンドフレームワーク

1. 新しいDiscordアプリを作成する

https://discord.com/developers/applications/ で新しいアプリを作成する

2. プロジェクトファイルの設定

gitで雛形をcloneする

git clone [email protected]:discord/getting-started-activity.git
cd getting-started-activity

フロントはReact、TypeScriptでやりたいので client を削除 npm create vite@latest clientのプロジェクトを作成 https://ja.vitejs.dev/guide/ vite.config.jsにサーバー側の設定を追加

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
+ envDir: '../',
+ server: {
+   proxy: {
+     '/api': {
+       target: 'http://localhost:3001',
+       changeOrigin: true,
+       secure: false,
+       ws: true,
+     },
+   },
+   hmr: {
+     clientPort: 443,
+   },
+ },
  plugins: [react()],
})

Embedded App SDKをインストール