개요

다음 기술 구성에서는 하나의 Team (작업공간에서만 실행) Bot을 구현하는 방법을 설명합니다.

Slack App

Event API를 사용합니다.

Botkit 4

노드는 v12.7.0을 사용합니다.

TypeScript

서버에 배치하는 것은 이 글의 범위 내에 있지 않습니다. 로컬에서 시작된 Bot 프로세스와 Slack이 연결된 곳을 포함합니다.

Slack App

Slack의 공동 제작 기능의 최신 버전은 Slack App 입니다.Custom Integrationdeprecated니까 지금부터 새로 만들면 Slack App 만들자.

Slack App의 종류

Slack App 자체는 기능을 Slack과 협업하는 데 사용되는 유니버설 박스로 제작된 Slack App에 Bot 사용자 기능이나 Slash Command 기능을 추가하여 응용 프로그램을 만든다.
참고로 제공하고자 하는 기능에 대해 말하자면, 정말 Bot 사용자가 필요한지 아닌지를 고려해 보는 것이 좋다.
Slack에서 어떤 기능만 수행하려면 Slach Command로 충분합니다.
이 페이지를 쓰면서'아, 설치하고 싶은 기능, Slach Command면 되지 않을까'라고 생각했어요.

Botkit 4

여기는 Botkit4Slack의 공식 문서입니다.
왼쪽 상단의 Botkit 버전을 변경하면 오래된 쓰기 방법을 볼 수 있습니다.

Botkit4의 쓰기 및 Adapter

Botkit4부터 Bot의 기능을 Adapter라는 단위로 잘라서 필요한 Adapter import를 사용하는 방법입니다.
Slack Bot 제작에 필요한 어댑터는 botbuilder-adapter-slack 입니다.
이 어댑터에는 두 가지 모드가 있습니다.

단일 Team 모드

단일 작업공간에서만 사용되는 모드입니다.

회사 내 Slack에서만 사용하는 Bot 같은 경우는 여기 있습니다.

멀티 팀 모드

여러 작업 공간에서 사용되는 모드입니다.

각종 업무 공간을 서비스로 사용할 경우 여기.

이번 목적은 1이니까 1로 쓰자.

1. Slack App 만들기

1.1 Slack App 만들기

에서 설명한 대로 해당 매개변수의 값을 수정합니다.
응용 프로그램의 이름과 사용할 작업공간을 선택하십시오.

서명 섹션 복사

그러면 App Credentials란에 여러 가지 중요한 값을 지불합니다.
이 중 Create New App 의 값을 복사합니다.

1.2 Bot User 만들기

그렇다면 봇을 만들기 위해 먼저 봇 사용자를 추가합시다.
다음 화면에서 Slack App에 기능을 추가하려면 Signing Secret 을 클릭합니다.
(이 사진은 이 작업이 끝난 후에 진행된 것이기 때문에 이미 녹색이 되었지만 처음에는 모두 회색일 것이다)


이 버튼을 누릅니다.

이런 화면이니까 Bot 이름을 넣어요.
이번 설치는 RTM APIBots를 사용하지 않으므로 열 수 있습니다.
저장이 완료되면 이 부트 사용자를 작업공간으로 초대합니다.
다음 메뉴를 클릭하여 열고 Always Show My Bot as Online 버튼을 누릅니다.

이렇게 하면 흔히 볼 수 있는 OAuth 로그인 같은 화면이 열리기 때문에'허용'을 누르세요.
작업공간에 Bot User가 추가되었습니다. 확인하십시오.💡

이것은 사용하는 채널의 체외 그림이다.Bot 사용자로 참여🤖

Bot Token 복사

여기서 만든 Bot은 많은 말을 하기 때문에 이 Bot을 식별해야 합니다.
이렇게 하려면 Permissions 를 클릭하고 표시된 값Install App to Workspace을 복사합니다.
나는 두 개가 나타날 것이라고 생각한다. Bot User OAuth Access Token부터 시작된 것이다.
이 녀석은 Botkit에서 Bot Token이라고 부른다.

2. TypeScript 준비

그럼 나는 마침내 코드를 쓰기 시작했다.
더 이상 무형의 js를 쓸 수 없다!그래서 TypeScript로 씁니다.

$ npm install --save-dev typescript

Botkit 코드라면 서버의 node에서 실행되기 때문에 웹팩이 필요하지 않습니다.
TypeScript를 컴파일하는 데 필요한 것xoxb-.
tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

ts 파일을 tsconfig.json 산하에 놓고 src/ 에 js 파일을 토출합니다.
package.json

"scripts": {
  "start": "node dist/index.js",
  "build": "npx tsc --outDir ./dist ./src/index.ts"
}

이런 느낌.
TypeScript 준비는 여기서 끝냅니다.

3. Botkit 코드 쓰기

$ touch src/index.ts

$ npm install --save botkit botbuilder-adapter-slack

index.ts

import { Botkit } from "botkit";
import { SlackAdapter, SlackEventMiddleware } from "botbuilder-adapter-slack";

const adapter = new SlackAdapter({
  clientSigningSecret: process.env.CLIENT_SIGNING_SECRET,
  botToken: process.env.BOT_TOKEN,
  // Single Teamモードでは不要なパラメータなのですが、型で必須と言われてしまうので仕方なく書いてます。
  redirectUri: ""
});
// Slackのイベントを受け取れるようにします。
adapter.use(new SlackEventMiddleware());

const controller = new Botkit({
  adapter: adapter,
});

controller.on("app_mention", async (bot, message) => {
  await bot.reply(message, "I received an app_mention event.");
});

여기에서 Slack App을 만들 때 복사된 두 개의 값을 사용합니다.dist/과Signing Secret 두 가지.
내가 쓰는 것은direnvBot Token이기 때문에 추적한다.

export CLIENT_SIGNING_SECRET=hogehoge
export BOT_TOKEN=piyopiyo

4. 컴파일하여 실행합니다.

.envrc에 이미 기재되어 있다

$ npm run build
$ npm start

그뿐이야.
그나저나 package.json 비어 있으면

****************************************************************************************
* WARNING: Your bot is operating without recommended security mechanisms in place.     *
* Initialize your adapter with a clientSigningSecret parameter to enable               *
* verification that all incoming webhooks originate with Slack:                        *
*                                                                                      *
* var adapter = new SlackAdapter({clientSigningSecret: <my secret from slack>});       *
*                                                                                      *
****************************************************************************************
>> Slack docs: https://api.slack.com/docs/verifying-requests-from-slack

만약 이런 Warning, Signing Secret 오류가 발생한다면

Error: An API error occurred: invalid_auth

버려진 함수에 대한 지원이 부족합니다.

Enabling plugin:  Slack Adapter
Webhook endpoint online:  http://localhost:3000/api/messages

나오기만 하면 성공이야.

5.ngrok에 로컬 서버 발표

그러면 Bot의 서버는 이렇게 일어납니다. 이벤트 API에서 이루어지기 때문에 실제로 시도하려면 이 서버가 공개하는 단점이 필요합니다.
하지만 현지에서 시동을 걸면 그런 물건이 있을 리가 없어요...
따라서 ngrok를 사용하세요.
일본어라면 여기 미니노버 씨의 기사에서 개요를 잡을 수 있습니다.
ngrok의 배치를 다른 사람에게 전달하는 정보는 방금 서버를 시작한 상태에서 다른 프로세스에서ngrok입니다.

$ ngrok http 3000

이렇게 로컬 기기의 포트 3000번이 공개되어 URL이 만들어지고 최고~~

6. Event Subscriptions를 ON으로 설정합니다.

여기서 Slack App으로 한 번 돌아갑니다.

RTM API 및 Event API

Slack Bot의 구현 방법은 몇 가지가 있는데 이번에는 Event API를 사용하는 방법으로 제작되었습니다.
이것에 관해서는 나무타카 씨의 이쪽 기사를 읽으면 이해하기 쉽다.
또한 Slack의 공식 블로그는 다음과 같은 Event API 사용을 권장합니다.
Generally, we recommend using the Events API, except for in a few specific cases (for instance, for an internal integration behind a firewall). When it comes down to it, the RTM API sends a lot of unnecessary information to your server over the connected WebSockets. This is particularly important if you have multiple connected clients, or just a large team using your app.

6.1. Slack에 URL 등록

그러면 실제 작업으로 먼저 Event Subscriptions를 클릭합니다

이벤트를 활성화합니다.

이렇게 하면 URL을 입력하는 필드가 나타나기 때문에 방금 시작한ngrok의 URL에 경로의 내용을 추가합니다.
URL을 입력하면 요청이 자동으로 팝업되어 올바른 URL인지 확인합니다.
이때 비행 이벤트는 url_버전 이벤트입니다. 만약 사실이라면 실행하고 적당한 응답을 되돌려야 하지만 Botkit은 이미 실현된 것 같습니다. 코드에 아무것도 쓰지 않아도 됩니다Bot Token👏

6.2. 이벤트 등록

이번 Subscribe Bot 멤버로서의 활동은 Verified! 중에서 Subscribe to bot events 을 선택하세요.

지금 app_mention 단추를 누르면 일시적으로 설정이 완료됩니다.
참고로 ngrok 프로세스를 다시 시작하면 URL이 바뀌기 때문에 이 설정을 다시 해야 합니다.
로컬에서 계속 검증하고 싶다면ngrok 프로세스를 죽이지 마십시오.

7. 슬랙 확인

그럼 여기서 끝내면 실제로 슬랙에서 해볼 수 있어요.

와!
여기 오면 뭐든지 할 수 있어.
단계는 Slack App 설정에서 Subscribe 이벤트를 설정하고 코드Save Changes에서 작성합니다.
이벤트 API에서 시작된 이벤트는 Slack의 대부분의 활동을 덮어쓰기 때문에 기본적으로 Slack으로 하고 싶은 일은 무엇이든지 할 수 있죠.

끝내다

아무래도 절차가 있고 Slack과 Botkit의 신구 정보가 인터넷에 섞여 있어 현혹되었다.
우리 좋은 Bot 생활 합시다!!
제가 앞으로 설치하려고 했던 기능은 Bot이 아니라 Slash Command에서 만들었습니다...