discord bot dashboard next

더 이상 사용되지 않았습니다

다른 대안을 고려하십시오. 지속적으로 사용할 수 있지만 지원은 제공되지 않습니다.

Discord 봇 대시 보드 템플릿

TypeScript 사용, Next.js 13, React 18 및 Chakra UI 2.0

• 빛/어두운 테마를 지원합니다
• 다중 언어 지원 (i18n)
• 타입 스크립트 지원
• 좋은 UI & UX + 빠른 성능
• 유연하고 사용자 정의 가능
• 자세한 문서

비디오 : https://youtu.be/idmpjt5pzvk
라이브 데모 : https://demo-bot.vercel.app

• '환영 메시지'기능 만 지원됩니다

검토 (최신 버전이 아님)

빛	어두운

시작하기

템플릿으로 작동하려면 몇 가지 사항을 사용자 정의해야합니다.

그 전에

• Node.js 및 패키지 관리자 설치 (예 : NPM 또는 PNPM)

필요한 기술

• React.js에 대한 기본 지식
• JavaScript/TypeScript를 읽을 수 있습니다

설정

1. 레포를 복제하십시오
   git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git

2. 종속성을 설치하십시오
   우리는 항상 PNpm 선호합니다

   NPM	PNPM
   npm install	pnpm install

3. 파일을 사용자 정의하십시오
   이 프로젝트의 파일 구조

   길	설명
   src/pages/*	모든 페이지
   SRC/구성 요소/*	구성 요소
   SRC/API/*	api utils
   src/config/*	일반적인 구성

4. 기능을 정의합니다
   대시 보드에는 기능 구성을위한 내장 지원이 있습니다
   사용자는 기능을 활성화/비활성화하고 기능을 활성화 한 후 기능을 구성 할 수 있습니다.

   src/config/types/custom-types.ts에서 모든 타이핑을 사용자 정의하십시오
   CustomFeatures 기능 및 옵션을 정의하는 데 사용됩니다. 자세한 내용은 예제를 참조하십시오.

   SRC/Config/Featust를 열 수 있습니다
   기능이 어떻게 구성되는지 알 수 있습니다

    'feature-id' : {
        name : 'Feature name' ,
        description : 'Description about this feature' ,
        icon : < Icon as = { BsMusicNoteBeamed } /> , //give it a cool icon
        useRender : ( data ) => {
            //render the form
        } ,
    }

   useRender 속성은 기능 구성 패널 렌더링하는 데 사용됩니다.
   예를 들어 여기에서 살펴보십시오

5. 일반 정보를 구성합니다
   src/config/common.tsx를 수정하십시오

   • 봇 이름 및 아이콘
   • URL 초대 (예 : https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
   • 길드 설정

6. 환경 변수를 구성합니다
   .env.example의 변수가 필요합니다
   .env 파일을 만들어 환경 변수를 정의 할 수 있습니다.

7. 백엔드 서버 설정
   대시 보드에 Discord 봇에 연결되도록하려면 백엔드 서버가 필요합니다.
   모든 프로그래밍 언어로 구현할 수 있습니다

   자신의 서버를 개발하기위한 가이드를 위해 여기를 읽으십시오.

8. 완료!
   pnpm run dev 로 앱 시작 (패키지 관리자에 따라 다름)
   그런 다음 앱이 포트 3000 에서 시작된 것을 볼 수 있습니다.

   현지화 | 형태

권한 부여

우리는 API Routes의 API 경로를 사용하여 승인을 처리하고 있습니다.

응용 프로그램을 구성합니다

1. 불일치 개발자 포털을 열었습니다

2. https://discord.com/developers/applications에서 oauth2 응용 프로그램을 작성하십시오

3. <Your Application> -> oauth2-> 리디렉션에서

   리디렉션에 <APP_URL>/api/auth/callback URL을 추가하십시오

   예를 들면 다음과 같습니다. http://localhost:3000/api/auth/callback
   이것은 승인에 필요합니다

승인 흐름

Login -> Discord OAuth -> API Routes -> Client

• 로그인 ( /api/auth/login )
  
  • 사용자를 OAUTH URL로 다시 리디렉션합니다
• Discord Oauth URL을 엽니 다
  • 사용자는 응용 프로그램을 승인합니다
  • /api/auth/callback 으로 다시 리디렉션됩니다
• API 경로
  • 액세스 토큰을 HTTP 전용 쿠키에 보관하십시오
  • 홈페이지로 다시 리디렉션하십시오

토큰 만료

Discord Access Token은 사용자가 만료 또는 무단으로 할 수 있습니다.
Discord API에서 401 오류를받은 후 사용자가 다시 로그인해야합니다.

새로 고침 토큰은 사용되지 않지만 인증 흐름을 사용자 정의 할 수 있습니다.

백엔드 개발

src/api/bot.ts를 확인하면 데이터 가져 오기에 대한 내장 API를 정의했습니다.

express.js (Node.js), Rocket (Rocket) 또는 모든 라이브러리/언어를 사용하여 자신의 서버를 개발할 수 있습니다.
일반적으로 서버는 Discord 봇과 함께 실행됩니다 (동일한 프로그램)
또한 봇 서버에 직접 연결하는 대신 redis를 사용할 수 있습니다.

공식적인 예

node.js (TypeScript)

권한 부여

클라이언트는 Authorization 헤더를 통해 액세스 토큰을 전달합니다.

 Bearer MY_TOKEN_1212112

필요한 경로

더 많은 기능을 위해 확장 할 수 있습니다

get /guilds/{guild}

• 길드 정보 가져 오기 ( custom-types.ts > CustomGuildInfo )
• 봇이 길드에 가입하지 않은 경우 404 또는 null 응답

get /guilds/{guild}/features/{feature}

• 기능 옵션 가져 오기 ( custom-types.ts > CustomFeatures[K] )
• 활성화되지 않은 경우 404에 응답하십시오

Patch /guilds/{guild}/features/{feature}

• 기능 옵션 업데이트
• 사용자 정의 본문 ( config/features 으로 정의 됨)
• 업데이트 된 기능 옵션에 응답합니다

Post /guilds/{guild}/features/{feature}

• 기능을 활성화합니다

삭제 /guilds/{guild}/features/{feature}

• 기능을 비활성화합니다

get /guilds/{guild}/roles

• 길드의 역할을 수행하십시오
• 역할 객체 목록에 응답합니다 (Discord 문서와 동일)

get /guilds/{guild}/channels

• 길드의 채널을 얻으십시오
• 길드 채널 목록에 응답합니다 (Discord 문서와 동일)

문제가 있습니까?

문제를 열어 질문을하십시오.

이 프로젝트를 사랑하십니까? 이 repo를 스타에게주세요!