Slack Bot dengan Claude Code

Slack Botpengembangan dengan Claude Code: efisiensi

Slack Bot 使えば、チーム内 workflow otomatisasiし、業務効率 大幅 peningkatan bisa dilakukan.Bolt SDK 使ったpengembangan 比較的mudah す 、eventpemrosesanやmodalpembangunan 多く ボイラープレート diperlukan.Claude Code pemanfaatan 、efisien Slack Bot pembangunanし.

Setup Proyek

> Slack Bot proyek Bolt SDK dengan pembuatanして。
> TypeScript、Socket Modedukungan dengan 。

npm init -y
npm install @slack/bolt @slack/web-api
npm install -D typescript @types/node tsx

// src/app.ts
import { App, LogLevel } from '@slack/bolt';

const app = new App({
  token: process.env.SLACK_BOT_TOKEN!,
  signingSecret: process.env.SLACK_SIGNING_SECRET!,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN!,
  logLevel: LogLevel.INFO,
});

// ボット 起動
(async () => {
  await app.start();
  console.log('Slack Bot is running!');
})();

export default app;

Implementasi Slash Command

> /task command dengan taskmanajemenする機能 buatkan.
> penambahan、daftar、selesai 3つ サブcommand support.

// src/commands/task.ts
import { App } from '@slack/bolt';

interface Task {
  id: string;
  title: string;
  assignee: string;
  completed: boolean;
  createdAt: string;
}

const tasks = new Map<string, Task[]>();

export function registerTaskCommand(app: App) {
  app.command('/task', async ({ command, ack, respond }) => {
    await ack();

    const [action, ...args] = command.text.split(' ');
    const channelId = command.channel_id;

    switch (action) {
      case 'add': {
        const title = args.join(' ');
        if (!title) {
          await respond('タスク名を入力してください: `/task add task名`');
          return;
        }

        const channelTasks = tasks.get(channelId) || [];
        const newTask: Task = {
          id: `task-${Date.now()}`,
          title,
          assignee: command.user_id,
          completed: false,
          createdAt: new Date().toISOString(),
        };
        channelTasks.push(newTask);
        tasks.set(channelId, channelTasks);

        await respond({
          blocks: [
            {
              type: 'section',
              text: {
                type: 'mrkdwn',
                text: `task penambahanしま: *${title}*`,
              },
            },
          ],
        });
        break;
      }

      case 'list': {
        const channelTasks = tasks.get(channelId) || [];
        if (channelTasks.length === 0) {
          await respond('task ありません');
          return;
        }

        const taskList = channelTasks
          .map((t, i) => {
            const status = t.completed ? '~' : '';
            const check = t.completed ? ':white_check_mark:' : ':black_square_button:';
            return `${check} ${status}${t.title}${status}`;
          })
          .join('\n');

        await respond({
          blocks: [
            {
              type: 'section',
              text: { type: 'mrkdwn', text: `*taskdaftar*\n${taskList}` },
            },
          ],
        });
        break;
      }

      default:
        await respond('使い方: `/task add task名` | `/task list`');
    }
  });
}

implementasi modal

> フィードバックpengiriman用 modal implementasikan.
> form inputverifikasi juga 含めて。

// src/views/feedback-modal.ts
import { App } from '@slack/bolt';

export function registerFeedbackModal(app: App) {
  // modal 開くショートカット
  app.shortcut('open_feedback', async ({ shortcut, ack, client }) => {
    await ack();

    await client.views.open({
      trigger_id: shortcut.trigger_id,
      view: {
        type: 'modal',
        callback_id: 'feedback_submission',
        title: { type: 'plain_text', text: 'フィードバック' },
        submit: { type: 'plain_text', text: 'pengiriman' },
        blocks: [
          {
            type: 'input',
            block_id: 'category_block',
            label: { type: 'plain_text', text: 'kategori' },
            element: {
              type: 'static_select',
              action_id: 'category',
              options: [
                { text: { type: 'plain_text', text: 'バグ報告' }, value: 'bug' },
                { text: { type: 'plain_text', text: '機能要望' }, value: 'feature' },
                { text: { type: 'plain_text', text: 'そ 他' }, value: 'other' },
              ],
            },
          },
          {
            type: 'input',
            block_id: 'description_block',
            label: { type: 'plain_text', text: '詳細' },
            element: {
              type: 'plain_text_input',
              action_id: 'description',
              multiline: true,
              min_length: 10,
              max_length: 1000,
            },
          },
          {
            type: 'input',
            block_id: 'priority_block',
            label: { type: 'plain_text', text: '優先度' },
            element: {
              type: 'radio_buttons',
              action_id: 'priority',
              options: [
                { text: { type: 'plain_text', text: '高' }, value: 'high' },
                { text: { type: 'plain_text', text: '中' }, value: 'medium' },
                { text: { type: 'plain_text', text: '低' }, value: 'low' },
              ],
            },
          },
        ],
      },
    });
  });

  // modalpengiriman pemrosesan
  app.view('feedback_submission', async ({ ack, view, client, body }) => {
    await ack();

    const values = view.state.values;
    const category = values.category_block.category.selected_option?.value;
    const description = values.description_block.description.value;
    const priority = values.priority_block.priority.selected_option?.value;

    // フィードバックチャンネル 投稿
    await client.chat.postMessage({
      channel: process.env.FEEDBACK_CHANNEL_ID!,
      blocks: [
        {
          type: 'section',
          text: {
            type: 'mrkdwn',
            text: `*新しいフィードバック*\n*kategori:* ${category}\n*優先度:* ${priority}\n*内容:* ${description}\n*投稿者:* <@${body.user.id}>`,
          },
        },
      ],
    });
  });
}

eventlistener

// src/events/index.ts
import { App } from '@slack/bolt';

export function registerEvents(app: App) {
  // メンションdukungan
  app.event('app_mention', async ({ event, say }) => {
    await say({
      text: `<@${event.user}> お呼び すか？ \`/task\`command 何かお手伝いします！`,
      thread_ts: event.ts,
    });
  });

  // 新メンバー参加時
  app.event('member_joined_channel', async ({ event, client }) => {
    await client.chat.postMessage({
      channel: event.channel,
      text: `<@${event.user}> さん、ようこそ！チャンネルpanduan konfirmasi くださいね。`,
    });
  });
}

Ringkasan

Slack Bot Bolt SDK dan Claude Code 組み合わせれば、チーム業務 otomatisasitools 素早くpembangunan bisa dilakukan.チャットボットpengembanganpanduanやWebhookimplementasi juga bisa dijadikan referensi.

Untuk Slack Bolt SDKの詳細, lihat Bolt for JavaScript公式ドキュメント.