이제는 Q&A 페이지에 누군가 질문을 올리면, 담당자가 처리자에게 할당을 할 수 있고, 할당을 받은 사용자의 톡방에 봇이 메시지를 보내는 로직을 구현해 보겠다.
구현은 간단하게 node.js로 했다
ejs 페이지 만드는 것은 이 깃허브를 참고했다
[dependencies]
- "axios": "^0.21.1"
- "cors": "^2.8.5"
- "ejs": "^3.1.6"
- "express": "^4.17.1"
- "pm2": "^5.1.0"
1. app.js 생성
const express = require('express')
const path = require('path');
var cors = require('cors');
const indexRouter = require('./routes/index')
const qnaRouter = require('./routes/qna')
const app = express()
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
app.use(cors());
app.use(express.json())
app.use(express.urlencoded({ extended: false }));
app.use('/', indexRouter)
app.use('/qna', qnaRouter)
app.listen(3000, function(){
console.log('app listening on port 3000')
})indexRouter와 qnaRouter가 필요하다
2. indexRouter, index view 생성하기
app.js 경로에 routes 폴더를 생성하고, index.js, qna.js 파일을 만들어 준다
// routes/index.js
const express = require('express')
const router = express.Router()
router.get('/', function(req, res, next) {
res.render('index', { title: 'Help Center'})
})
module.exports = routerindexRouter로 들어오는 경로가 / 이고, 여기서도 / 경로이기 때문에 localhost:3000 으로 접속시 띄워질 화면을 정의한다. 여기서 res.render('index', {title: 'Help Center'}) 로 했다. 이 뜻은 views/index.ejs 를 rendering 하겠다는 뜻이다. (app.js에서 app.set('views' ..) 로 설정해주어야 한다!
app.js와 같은 경로에 views 폴더를 생성해즈고, 그 밑에 index.ejs 파일을 생성한다
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<a href="/qna/2">QnA</a>
</body>
</html>index.js에서 {title: 'Help Center'}로 넣어주기 때문에 ejs에서 <%= title %> 이 Help Center로 치환된다
3. qnaRouter, qna view 생성하기
// routes/qna.js
const express = require('express')
const router = express.Router()
const axios = require('axios')
const { APPKEY, URL, memberDB } = require('../config')
const sendMsg = async(conv_id, contents) => {
let data = {
"conversation_id" : conv_id,
"text" : contents
}
axios.post(URL, JSON.stringify(data), {
headers: {
"Content-Type": "application/json;charset=utf-8",
"Authorization": APPKEY
}
})
.then((res) => {
let status = res.status
let isSuccess = res.data.success
if(status === 200 && isSuccess) {
console.log("send msg success")
return true
}
})
}
router.get('/:id', function(req, res, next) {
res.render('qna', { title: 'Q&A'})
})
router.post('/', async function(req, res, next) {
let body = req.body
console.log('qna post')
let url = req.headers.referer
let name = body.name
let conv_id = memberDB[name]
await sendMsg(conv_id, url)
res.redirect('/')
})
module.exports = router[get]
일단 localhost:3000/qna로 들어오면 qna.ejs를 rendering한다
[post]
1. form에 처리할 직원의 이름을 넣고 할당 버튼을 누르면 req.body에서 name을 가져온다
2. name 과 bot-user 톡방 id를 매치 시켜 놓은 config.js 의 memberDB를 통해 톡방 id를 가져온다(conv_id)
3. let url = req.heades.referer에서 url을 가져온 이유는, 할당받는 사람에게 톡이 갈 때, 해당 qna 페이지 url을 data로 넘겨주기 위해서이다.
4. 할당받는 사람 이름과 처리해야할 qna url을 sendMsg 함수에 넣어준다.
5. sendMsg 함수는 axios를 이용해 postman으로 우리가 이전에 했던 요청을 처리한다
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div>
<span>제목 : 사이트가 안들어가져요</span>
<p>내용 : 사이트가 안들어가집니다..</p>
</div>
<div>
<button>접수</button>
</div>
<span>할당하기</span>
<form action="/qna" method="post">
<input type="text" name="name" placeholder="할당할 직원 이름을 입력">
<input type="submit" value="할당">
</form>
</body>
</html>
[config.js 설정]
app.js와 같은 위치에 config.js파일을 생성한다.
const APPKEY = "Bearer appkey"
const URL = "https://api.kakaowork.com/v1/messages.send"
const memberDB = {
"이유진" : 111111
}
module.exports = {
APPKEY,
URL,
memberDB,
};
현재 DB를 따로 구축한 상태가 아니기 때문에 memberDB를 만들어서 "name" : 톡방id를 매치 시켜놓았다.
그리고 APPKEY와 요청 URL을 정의해 두었다
전체 소스코드 : https://github.com/ujin2021/Kakaowork-Bot-Test
GitHub - ujin2021/Kakaowork-Bot-Test: Kakaowork message.send API를 사용해 메시지 전송하기
Kakaowork message.send API를 사용해 메시지 전송하기. Contribute to ujin2021/Kakaowork-Bot-Test development by creating an account on GitHub.
github.com
일반 카카오톡 메시지 보내기 보다 더 쉽게 했던 것 같다.
끝!
'프로젝트 > KAKAOWORK_BOT' 카테고리의 다른 글
| 2. KAKAOWORK BOT API 사용해보기 (1) | 2021.07.26 |
|---|---|
| 1. KAKAOWORK BOT 설정하기 (1) | 2021.07.26 |
