SlackBot 에게 메시지 받기

안녕하세요.

간단한 웹 앱을 만들고, 슬랙과 연동시켜 보는 테스트를 진행하였습니다.

웹 앱에서 오류가 발생했을 때, 알림을 받아 팀원들과 빠르게 공유할 수 있습니다.

 

 

참조글

Vue.js + Node.js Express

[Node.js] express & vue 연동 1 (tistory.com)

Node.js Express Slack API

slackapi/node-slack-sdk: Slack Developer Kit for Node.js (github.com)

Slack 설정

[Crawling] Slack Bot 만들기 :: 아이스베어의 개발 일기 (tistory.com)

 

 

구성도

[ - - - - - - - - - - - - Web App - - - - - - - - - - - - ]  >  >  >  > HTTP  >  >  > [ - - - - - - - - - - - Slack - - - - - - - - - - - ]

[ Client ]  >  >  > REST API  >  >  > [ Server  ]  >  >  > Slack API  >  >  > [ Slack App ]  >  >  > [ Slack Channel ]

[ Vue.js ]  >  > JSON  >  > [ Node.js Express ]

 

[ - - - - - - - - - - - Python Script - - - - - - - - - - - ]  >  >  > Slack API  >  >  > [ Slack App ]  >  >  > [ Slack Channel ]

 

 

A. Web App 준비

1. 프로젝트 폴더 만들기

Node Project Directory (SlackBotVueProject)

  ㄴ - - Front End Directory (slackbotvue)

  ㄴ - - Back End Directory (slackbotexpress)

 

2. Vue.js

C:\SlackBotVueProject> npm i vue-cli -g

C:\SlackBotVueProject> vue init webpack slackbotvue

C:\SlackBotVueProject> cd slackbotvue

C:\SlackBotVueProject\slackbotvue> npm run dev

localhost:8080 확인

 

3. Node.js Express

C:\SlackBotVueProject> npm i express-generator -g

C:\SlackBotVueProject> express slackbotexpress --view=pug

C:\SlackBotVueProject\slackbotexpress> npm install

C:\SlackBotVueProject\slackbotexpress> npm start

localhost:3000 확인

 

4. Vue.js + Node.js Express

slackbotvue/config/index.js

-> module.exports.build.index : path.resolve(__dirname, '../../slackbotexpress/public/index.html')

-> module.exports.assetsRoot : path.resolve(__dirname, '../../slackbotexpress/public')

C:\SlackBotVueProject\slackbotvue> npm run build

 

slackbotexpress/routes/index.js

-> 상단 선언 부에 추가

var path = require('path');

-> 파일 경로 변경

/* GET home page. */

router.get('/', function(req, res, next) {

  //res.render('index', { title: 'Express' });

  res.sendFile(path.join(__dirname, '../public/index.html'));

});

C:\SlackBotVueProject\slackbotexpress> npm start

localhost:3000 확인

 

5. 추가 설정

slackbotvue/config/index.js

-> module.exports.dev : proxyTable property 추가

proxyTable: {

      '/api': {

        target: 'http://localhost:3000/api',

        changeOrigin: true,

        pathRewrite: {

          '^/api': ''

        }

      }

    }

C:\SlackBotVueProject\slackbotvue> npm i axios

slackbotvue/src/main.js

-> 상단 선언 부에 추가

import axios from 'axios'

Vue.prototype.$http = axios

6. IndexPage 생성

파일 신규 생성: slackbotvue/src/components/IndexPage.vue

slackbotvue/src/router/index.js

-> 상단 선언 부에 추가

//import HelloWorld from '@/components/HelloWorld'

import IndexPage from '@/components/IndexPage'

-> router 설정

export default new Router({

  routes: [

    {

      path: '/',

      name: 'IndexPage',

      component: IndexPage

      //name: 'HelloWorld',

      //component: HelloWorld

    }

  ]

})

C:\SlackBotVueProject\slackbotvue> npm run build

 

7. Node Slack SDK 설치

Slack | Node Slack SDK

npm install @slack/web-api @slack/socket-mode

 

B. Slack 준비

0. Slack 가입 및 설치

 

1. Slack App 만들기

Slack API 홈페이지 접속(api.slack.com) > Your Apps > Create New App > From Scratch

-> MyAppTest (Workspace 생성)

-> SlackBotTest (App 생성)

 

2. 추가 설정

Settings > Basic Information > Add features and functionality > Bots >

-> Your App's Presence in Slack > Always Show My Bot as Online 켜기

-> Show Tabs > Message Tab 켜기

 

Settings > Basic Information > Incoming Webhooks > Activate Incoming Webhooks

-> On 설정 (만든 채널과 연동, #projecttest)

 

Features > OAuth & Permissions > Scopes > Bot Token Scopes

-> chat:write 추가

 

3. Token 확인 및 채널에 게시

Features > OAuth & Permissions > OAuth Tokens for Your Workspace

-> xoxb-xxxxxxxxxxxxxxxxx

-> Reinstall to Workspace 클릭하여 채널에 게시 (#projecttest)

 

4. app 설정

좌측 앱 > 앱 선택 (SlackBotTest) > 이 앱을 채널에 추가

-> 채널 선택(#projecttest)

 

 

추가) Python Script Test

slackclient · PyPI

$ pip3 install slackclient

 

import os
from slack import WebClient
from slack.errors import SlackApiError

client = WebClient(token='xoxb-xxxxxxxxxxxxxxxxx')

try:
    response = client.chat_postMessage(
        channel='#projecttest',
        text="Hello world!")
    assert response["message"]["text"] == "Hello world!"
except SlackApiError as e:
    # You will get a SlackApiError if "ok" is False
    assert e.response["ok"] is False
    assert e.response["error"]  # str like 'invalid_auth', 'channel_not_found'
    print(f"Got an error: {e.response['error']}")

 

 

감사합니다.