DiscordBotを用いたイベント用アプリを作成したよ

DiscordBotと連携してBlazorでWeb画面を表示するアプリを作りました。
個人開発なので手元にまともなドキュメント書く気がないので、プロダクトのドキュメントとしての記事です。

Discordのコマンド

開発経緯と解消したかった課題

開発経緯とか課題とか読みたい方向け

開発経緯

前の話
↑に記載した通り、Discordサーバー内のイベントでゲームのフレンド対戦で３～４時間、複数人のボス役に対して順番に戦いを仕掛け続けるというサーバー内イベント用のアプリです。
初回のイベントで参加し損ねていたのですが、どうも運営が大変だったらしいがイベント自体は好評だったんですよね。
それがちょっと悔しかったので、次は参加したいが２回目が確定していない。
→運営が楽になればイベントが気軽に開催できるよね、２回目開催のハードルが下がれば２回目あるよね
という圧力をかけるためのアプリです（運営が楽になればいいなというのは本当です）

第１回イベントの運用課題

• スプレッドシートの同期ずれで書き込みが消える（上書きされる）
• 誰がどこに行くが運営任せで挑戦者側からわかりにくい
• 挑戦者十数人に対し運営が一人だったため挑戦者管理＋結果管理で高負荷

解決策（と開発方針）の策定

せっかくDiscordサーバーなんだからDiscordBot作って課題解決しようぜ！と思ったのでその方向で検討。

• スプレッドシートの同期ずれはDiscordBotのスラッシュコマンドからの入力にすれば他の挑戦者を上書きは回避
• Bot経由でローカルにアプリ画面出して共有して案内板とすることで運営への問い合わせを軽減
• 勉強を兼ねて、Botのコマンドを処理するのはデスクトップアプリじゃなくてWebAPI経由でBlazorに表示したい

開発環境

• windows 11
• C# .Net 8.0
• Blazor Web App
• Vite (JavaScript管理）

システム構成

ユースケース図

プロジェクト構成

プロジェクトとしては運営さんにお渡しする関係でできるだけexeを増やしたくなかったので、１本に統一しました。
最初はBot用のコンソールアプリとWebAPI+Blazorで2本にしてたんですが、Lancherとか必要になりそうだったので途中で統合しました。

BossRushApp

• Blazor : メインプロジェクト
• WebAPI : Blazorに直で生やした
• DiscordBot : BackgroundServiceとして実行

ディレクトリ構成

途中で統合したためCommonsの構成がごちゃついています。

BossRushApp
│  appsettings.Development.json
│  appsettings.json
│  BossRushApp.csproj
│  BossRushApp.csproj.user
│  package.json
│  Program.cs
│  vite.config.js
│  
├─.config
│      dotnet-tools.json
│      
├─APIEndpoints
│      ChallengeRequest.cs
│      
├─Client
│  ├─scripts
│  │      battlelog.js
│  │      sortqueue.js
│  │      
│  └─styles
├─Commons
│  │  ConfigStringsService.cs
│  │  
│  ├─Helpers
│  │      ContextMenuHelper.cs
│  │      
│  ├─Models
│  │  │  DiscordUser.cs
│  │  │  
│  │  └─Requests
│  │          ChallengeRequestModel.cs
│  │          IRequestModel.cs
│  │          ResultRequestModel.cs
│  │          
│  └─Services
│          ApiEndpointResolver.cs
│          
├─Components
│  │  App.razor
│  │  Routes.razor
│  │  _Imports.razor
│  │  
│  ├─Layout
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      
│  ├─Models
│  │      BattleLogModel.cs
│  │      BossChallengerModel.cs
│  │      
│  └─Pages
│      │  BattleLogComponent.razor
│      │  Error.razor
│      │  Home.razor
│      │  Home.razor.css
│      │  QueueComponent.razor
│      │  
│      └─SortableList
├─DiscordBotService
│  ├─Commands
│  │      ChallengeCancelCommand.cs
│  │      ChallengeRequestCommand.cs
│  │      ICommandCreator.cs
│  │      ICommandExecutor.cs
│  │      ResultCommand.cs
│  │      
│  ├─Enums
│  │      Commands.cs
│  │      
│  ├─Events
│  │      SlashCommandEvent.cs
│  │      
│  └─Services
│          BossRushBotService.cs
│          RequestService.cs
│          
├─Properties
│  │  launchSettings.json
│  │  
│  └─PublishProfiles
│          FolderProfile.pubxml
│          FolderProfile.pubxml.user
│          
├─Services
│  │  BattleLogListManagerService.cs
│  │  ChallengersQueueManagerService.cs
│  │  IViteManifestService.cs
│  │  ViteManifestService.cs
│  │  
│  └─BossQueueService
│          ChallengersQueueService.cs
│          
└─wwwroot
    │  app.css
    │  
    ├─css
    └─js
            bundle-BYPX12mt.js
            bundle-RCBpwg3s.js
            manifest.json

振り返り

• WebUIの知識が薄かったから時間かかった
  • JS連携した場合の画面描画
    • BlazorとJSは同時利用するの好きじゃないんだけど、現状は使った方が開発は楽
    • ビハインドのjsにして使ってたけどコンポーネント化したときにjsエラーがわかりずらくなって困った
  • Vite-Blazorの複合（プロジェクト構成）
    • ViteでJS管理が主流なんだね
    • デスクトップ業務アプリケーションばっかり作ってきたのもあってnodeコマンドの細かい癖みたいなのに全部引っかかった
  • Collectionの画面描画イベントの発火
    • なんだあいつ。中身のプロパティ変えたら発火してくれよ
• オブジェクト指向な設計を意識して作ってたんだけど、どうなんだろう
  • 勉強を兼ねたこともありちょっとAPIとかDiscordの構成とか最初から詰め切れなかったからいびつなところはある
• テストコード
  • テストコードも書いたけど、テストドリブンな開発はできてないな
    つい先にコード書いちゃう
  • Julesを使ってあとから一気にメインテストコード書こうとしたら、JulesがC#対応していないの見落としてた

詳細なコード見たい人がいたら連絡くれたら対応するかもです。
公開を渋る理由もなかったので開いておきます。
https://github.com/lazyAtk/BossRushApp