긍정적 사고, 음식의 절제, 규칙적인 운동

[ChatBot] 챗봇 시작해보기

챗봇 시작해보기

1. 1. 챗봇 시작해보기 파이썬과 노드로 만들어 보는 챗봇 (Slack, facebook..) ABCD, 한성일
2. 2. 0. 챗봇이란?
3. 3. 챗봇이란? 고객의 요청을 대신 응답해주는 채팅로봇 인공지능 빅데이터 자연어처리 프로그래밍 나이가 어떻게 되 시나요? 텍스트 음성 … 묻지 마세요.. 응답요청 Chatbot 머신러닝
4. 4. 챗봇 예 심심이 페이스북 챗봇
5. 5. 어디에 쓸까요? 가장 쉽게 떠오르는 곳은 콜 센터입니다.
6. 6. 또 어디가 있을까요? 물건주문, 호텔예약, 비서…
7. 7. 생각보다 간단할지 모릅니다.
8. 8. 1. 챗봇 플로우
9. 9. 챗봇 프레임웍 http://kitt.ai/ https://dev.botframework.com/
10. 10. 챗봇 플랫폼 라인 슬렉 텔레그램 페이스북
11. 11. 일반적인 챗봇 플로우 http://www.lds.com/coepost/enabling-a-smart-user-experience-using-chatbots/
12. 12. 슬랙과 페이스북 API 를 이용해서 챗봇을 만들어보겠습니다. 간단한..
13. 13. 2. 파이썬으로 슬렉챗봇 만들기
14. 14. 선작업 1. 파이썬 설치 https://realpython.com/blog/python/getting-started-with-the-slack-api-using-python-and-flask/ 참고 2. 슬랙 커뮤니티 생성
15. 15. VIRTUAL ENV 설정 $ mkdir abcd-python-slack-bot $ virtualenv venv $ source venv/bin/activate (venv)$ pip install slackclient==1.0.0
16. 16. 토큰생성 https://api.slack.com/web
17. 17. 토큰생성 https://api.slack.com/docs/oauth-test-tokens
18. 18. 토큰을 환경 변수로 지정 (venv)$ export SLACK_TOKEN=‘생성된 토큰'
19. 19. ngrok 을 이용 외부 오픈 SSL 주소 생성 https://ngrok.com/download (venv)$ ./ngrok http 5000 로컬 서버를 SSL 로 외부 오픈..
20. 20. WEBHOOK https://api.slack.com/outgoing-webhooks
21. 21. WEBHOOK https://abcds.slack.com/apps/new/A0F7VRG6Q-outgoing-webhooks
22. 22. INTEGRATION SETTINGS https://abcds.slack.com/services/B37GEBQBZ?added=1 ngrok 으로 생성된 주소 + /webhook 사용될 채널 웹훅 토큰
23. 23. WEBHOOK (venv)$ export SLACK_WEBHOOK_SECRET=‘생성된 웹훅 토큰'
24. 24. FLASK 설치 (venv)$ pip install flask
25. 25. RECEIVE.PY # -*- coding: utf-8 -*- import os from flask import Flask, request, Response from slackclient import SlackClient app = Flask(__name__) SLACK_WEBHOOK_SECRET = os.environ.get('SLACK_WEBHOOK_SECRET') SLACK_TOKEN = os.environ.get('SLACK_TOKEN', None) slack_client = SlackClient(SLACK_TOKEN) def send_message(channel_id, message): slack_client.api_call( "chat.postMessage", channel=channel_id, text=message, username='abcdBot', icon_emoji=':monkey_face:' ) @app.route('/webhook', methods=['POST']) def inbound(): print("get " + request.form.get('token')) print("username " + request.form.get('user_name')) username = request.form.get('user_name') if request.form.get('token') == SLACK_WEBHOOK_SECRET and username != 'slackbot': channel_name = request.form.get('channel_name') channel_id = request.form.get('channel_id') username = request.form.get('user_name') text = request.form.get('text') inbound_message = username + " in " + channel_name + " says: " + text send_message(channel_id, unicode("따라쟁이 ", 'utf-8') + " " + text) print(inbound_message) return Response(), 200 @app.route('/', methods=['GET']) def test(): return Response('It works!') if __name__ == "__main__": app.run(debug=True) receive.py
26. 26. RECEIVE.PY (venv)$ python receive.py
27. 27. 구동화면
28. 28. 실제 서버를 설정해서 포팅해봅시다.
29. 29. 3. 노드로 페이스북 챗봇 만들기 (HEROKU)
30. 30. 선작업 http://x-team.com/2016/04/how-to-get-started-with-facebook-messenger-bots/ nodejs 설치 참고 https://nodejs.org/ko/download/
31. 31. 선작업 heroku 가입이 되어있어야 함 https://heroku.com/ https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up heroku CLI 가 설치되어있어야 함
32. 32. 프로젝트 생성 $ mkdir abcd-node-bot $ cd abcd-node-bot/ $ npm init $ npm install express body-parser request --save { "name": "testbot", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node index.js" }, "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.15.2", "express": "^4.14.0", "request": "^2.79.0" } }
33. 33. express 설치 $ npm install express body-parser request --save
34. 34. INDEX.JS 생성 index.js 생성 var express = require('express'); var bodyParser = require('body-parser'); var request = require('request'); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 3000)); // Server frontpage app.get('/', function (req, res) {     res.send('잘돈다.'); }); // Facebook Webhook app.get('/webhook', function (req, res) { console.log(req.query['hub.verify_token']); if (req.query['hub.verify_token'] === 'abcd_verify_token') { // webhook 설정에 입력된 토큰 res.send(req.query['hub.challenge']); } else { res.send('Invalid verify token'); } }); node index.js
35. 35. HEROKU 생성 $ heroku login
36. 36. 로컬 GIT 설정 $ git init $ heroku create $ git add . $ git commit -m ‘ABCD 노드 봇 첫번째 커밋' $ git push heroku master .gitignore node_modules
37. 37. 작동확인 https://warm-spire-76279.herokuapp.com/
38. 38. 페이스북 페이지 만들기 https://www.facebook.com/pages/create/
39. 39. 페이지 생성 완료
40. 40. 앱생성 https://developers.facebook.com/quickstarts/ 기본설정으로 앱생성
41. 41. 제품추가
42. 42. 토큰생성
43. 43. 토큰생성
44. 44. WEB HOOK 설정 https://developers.facebook.com/ heroku 경로
45. 45. WEB HOOK 설정 페이지를 선택해주세요!
46. 46. WEBHOOK 설정
47. 47. PAGE_ACCESS_TOKEN 설정 PAGE_ACCESS_TOKEN
48. 48. 토큰 유효성 확인 https://warm-spire-76279.herokuapp.com/webhook? hub.verify_token=abcd_verify_token
49. 49. 따라하기 봇 테스트
50. 50. KITTEN https://placekitten.com/ kitten 300 200
51. 51. 따라하기 & 키튼 봇 소스 1 var express = require('express'); var bodyParser = require('body-parser'); var request = require('request'); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 3000)); // Server frontpage app.get('/', function (req, res) { res.send('This is TestBot Server'); }); // Facebook Webhook app.get('/webhook', function (req, res) { console.log(req.query['hub.verify_token']); if (req.query['hub.verify_token'] === 'abcd_verify_token') { // webhook 설정에 입력된 토큰 res.send(req.query['hub.challenge']); } else { res.send('Invalid verify token'); } });
52. 52. 따라하기 & 키튼 봇 소스 2 // handler receiving messages app.post('/webhook', function (req, res) { var events = req.body.entry[0].messaging; for (i = 0; i < events.length; i++) { var event = events[i]; if (event.message && event.message.text) { if (!kittenMessage(event.sender.id, event.message.text)) { sendMessage(event.sender.id, {text: event.message.text}); } } else if (event.postback) { console.log("Postback received: " + JSON.stringify(event.postback)); } } res.sendStatus(200); }); // generic function sending messages function sendMessage(recipientId, message) { request({ url: 'https://graph.facebook.com/v2.6/me/messages', qs: {access_token: process.env.PAGE_ACCESS_TOKEN}, method: 'POST', json: { recipient: {id: recipientId}, message: message, } }, function(error, response, body) { if (error) { console.log('Error sending message: ', error); } else if (response.body.error) { console.log('Error: ', response.body.error); } }); };
53. 53. 따라하기 & 키튼 봇 소스 3 // send rich message with kitten function kittenMessage(recipientId, text) { text = text || ""; var values = text.split(' '); if (values.length === 3 && values[0] === 'kitten') { if (Number(values[1]) > 0 && Number(values[2]) > 0) { var imageUrl = "https://placekitten.com/" + Number(values[1]) + "/" + Number(values[2]); message = { "attachment": { "type": "template", "payload": { "template_type": "generic", "elements": [{ "title": "Kitten", "subtitle": "Cute kitten picture", "image_url": imageUrl , "buttons": [{ "type": "web_url", "url": imageUrl, "title": "Show kitten" }, { "type": "postback", "title": "I like this", "payload": "User " + recipientId + " likes kitten " + imageUrl, }] }] } } }; sendMessage(recipientId, message); return true; } } return false; };
54. 54. 4. 조금 더해보기
55. 55. 더하기봇
56. 56. 더하기 봇 소스 #1 var express = require('express'); var bodyParser = require('body-parser'); var request = require('request'); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 3000)); // Server frontpage app.get('/', function (req, res) { res.send('This is TestBot Server'); }); app.get('/forecast', function (req, res) { forecast.get([35.9335, 139.6181], function(err, weather) { if(err) return console.dir(err); console.dir(weather); console.dir(weather.latitude); console.log("weather.latitude " + weather.latitude); console.log("오늘 " + weather.timezone + "의 날씨는 " + weather.currently.summary + "입니다. "); }); res.send('forecast'); });
57. 57. 더하기 봇 소스 #2 // Facebook Webhook app.get('/webhook', function (req, res) { if (req.query['hub.verify_token'] === 'abcd_verify_token') { res.send(req.query['hub.challenge']); } else { res.send('Invalid verify token'); } }); // handler receiving messages app.post('/webhook', function (req, res) { var events = req.body.entry[0].messaging; for (i = 0; i < events.length; i++) { var event = events[i]; if (event.message && event.message.text) { addMessage(event.sender.id, event.message.text); } } res.sendStatus(200); });
58. 58. 더하기 봇 소스 #3 // generic function sending messages function sendMessage(recipientId, message) { request({ url: 'https://graph.facebook.com/v2.6/me/messages', qs: {access_token: process.env.PAGE_ACCESS_TOKEN}, method: 'POST', json: { recipient: {id: recipientId}, message: message, } }, function(error, response, body) { if (error) { console.log('Error sending message: ', error); } else if (response.body.error) { console.log('Error: ', response.body.error); } }); }; function addMessage(recipientId, text) { text = text || ""; var values = text.split(' '); if (values.length === 3 && values[0] === 'add') { if (Number(values[1]) > 0 && Number(values[2]) > 0) { addText = values[1] + " + " + values[2] + " = " + (Number(values[1]) + Number(values[2])); message = {text: addText}; sendMessage(recipientId, message); } } };
59. 59. FORECAST 설치 $ npm install --save forecast
60. 60. 날씨봇 https://darksky.net/dev/
61. 61. FORECAST KEY
62. 62. 날씨앱 테스트
63. 63. 날씨 봇 소스 #1 var express = require('express'); var bodyParser = require('body-parser'); var request = require('request'); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 3000)); var Forecast = require('forecast'); // Initialize var forecast = new Forecast({ service: 'darksky', key: ‘your-api-key‘, units: 'celcius', cache: true, // Cache API requests ttl: { minutes: 27, seconds: 45 } });
64. 64. 날씨 봇 소스 #2 // Server frontpage app.get('/', function (req, res) { res.send('This is TestBot Server'); }); app.get('/forecast', function (req, res) { forecast.get([35.9335, 139.6181], function(err, weather) { if(err) return console.dir(err); console.dir(weather); }); res.send('forecast'); }); // Facebook Webhook app.get('/webhook', function (req, res) { if (req.query['hub.verify_token'] === 'abcd_verify_token') { res.send(req.query['hub.challenge']); } else { res.send('Invalid verify token'); } });
65. 65. 날씨 봇 소스 #3 // handler receiving messages app.post('/webhook', function (req, res) { var events = req.body.entry[0].messaging; for (i = 0; i < events.length; i++) { var event = events[i]; if (event.message && event.message.text) { weatherMessage(event.sender.id, event.message.text); } } res.sendStatus(200); }); // generic function sending messages function sendMessage(recipientId, message) { request({ url: 'https://graph.facebook.com/v2.6/me/messages', qs: {access_token: process.env.PAGE_ACCESS_TOKEN}, method: 'POST', json: { recipient: {id: recipientId}, message: message, } }, function(error, response, body) { if (error) { console.log('Error sending message: ', error); } else if (response.body.error) { console.log('Error: ', response.body.error); } }); };
66. 66. 날씨 봇 소스 #4 function weatherMessage(recipientId, text){ text = text || ""; var values = text.split(' '); if (values[0] === '날씨') { forecast.get([35.9335, 139.6181], function(err, weather) { console.log(weather); weatherText = "오늘 " + weather.timezone + "의 날씨는 " + weather.currently.summary + "입니다. "; message = {text: weatherText}; sendMessage(recipientId, message); }); } }
67. 67. 더하기와 날씨봇을 확장해 보세요.
68. 68. 또 어떤걸 해보고 싶으신가요? 머신러닝, 자연어처리, 음성인식…
69. 69. 파이썬 https://github.com/snowkiwi/slack-python-bot-tutorial 소스는 이곳을 참고하세요. 노드 https://github.com/snowkiwi/facebook-node-bot
70. 70. Q & A
71. 71. 수고하셨습니다. :) ABCD http://abcds.kr 

...

[출처]

http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=41825
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=42062

[마소연재] 페이스북 웹앱 만들기

1회 : 2013.01 | 페이스북 앱 기본 설정

2회 : 2013.02 | 페이스북 PHP/자바스클비트 SDK 사용

3회 : 2013.03 | 페이스북 웹앱 완성 및 광고 설정

1.페이스북 개발자 페이지에 접속 - http://developers.facebook.com/

2.페이스북 개발자 등록

  : 페이지 상단의 "APP" 메뉴를 선택하면 등록된 정보를 볼 수 있다.

3.페이스북 앱 생성

  : "새 앱 만들기" 버튼을 선택하고, "계속하기"를 누르면 헤로쿠(Heroku)와 관련된 기본적인 설정 페이지가

      보인다. 헤로쿠를 사용하지 않느다고 선택하면 바로 앱설정 페이지로 넘어간다.

     헤로쿠 호스팅 설정 페이지에서는 서버사이드 개발에 사용할 언어 설정과 이메일 주소를 입력한다.

     서버사이드 개발언어로는 PHP를 사용하고, 이메일 주소에는 사용 중인 헤로쿠 계정이있다면

     헤로쿠 계정을 적고 계정이 없는 경우에는 헤로쿠에서 사용할 이메일 주소를 입력하면

     해당 이메일주소로 회원가입 메일이 온다.

     * 헤로쿠 : PaaS기반의 클라우드 서비스 플랫폼이다. 별도 호스팅 절차없이 페이스북 앱을

                     PHP,Ruby,Node.js,Python으로 개발할 수 있다.

# 새 앱 만들기 옵션 

======================================================================================================

1.페이지 생성

  : 페이지 생성 주소 - http://www.facebook.com/pages/create.php

    * 페이지 탭 앱 등록방법 : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

* 헤로쿠 개발 구축 환경

헤로쿠 툴밸트를 사용해 계정 로그인용 인증키를 받고, 이를 사용해 소스를 관리하고 배포할 수 있다. (윈도우용 헤로쿠 인스톨러에는 Git가 포함돼있다. )

 기존 Git을 설치해 사용하고 있었다면 Git 설치 옵션을 제히하고 설치해야 한다.

 만약 Git를 다시 설치한다면 기존의 모든 설정이 초기화되고 SSH키값이 모두 사라진다.

 헤로쿠 툴밸트를 모두 설치했다면 커맨드라인에 'herokulogin'을 입력하고 헤로쿠 계정으로 로그인할 수 있다.

그 후 Git를 통해 소스를 다운로드 할 수 있다.

설정이 모두 정상적으로 이루어 졌는지 확인하기 위해 다운로드한 소스중에서 index.php 파일을 수정해보자.

바꾸고 Commit후에 Push하면 페이스북 앱에 바로 적용된다.

Git의  master branch의 최신 데이터로 앱을 배포한다는 것을 알 수 있다.

* 헤로쿠 개발환경 개선

 로컬PC에서 웹서버를 설치하고 PHP를 구동하자 - www.apmsetup.com

 로컬서버의 루트폴더에 Git로 헤로쿠에서 받아온 파일을 넣는다.

 http://localhost  로  구동시 설정 문제가 있다.

1. 페이스북 PHP SDK 사용에 필요한 '/sdk' 폴더가 없다.

   - Facebook SDK for PHP를 페이스북 개발자 페이지에서 다운로드하고,

      로컬 테스트 서버 환경의 웹 루트 하우에 '/sdk/src/facebook.php' 가 위치하도록 설치한다.

2. cURL 기능이 필요하다.

   - PHP에 cURL 기능이 있는지 phpinfo()로 확인하고 없으면 설치한다.

3.App ID, App Secret Code가 없다.

   - /Appinfo.php 파일에서는 App ID와 App Secret Code의 설정에 getenv() 함수를 사용하고 있다.

     이와 같은 헤로쿠 서버의 정보는 http://phpinfo.herokuapp.com 을 통해 확인할 수 있다.

로컬 테스트 서버 환경에 설치된 아파치에도 헤로쿠와 동일하게 App ID와 App Secret Code를 설정하기 위해 httpd.conf 파일 아래에 다음의 텍스트를 추가한다.

<VirtualHost *:80>

DocumentRoot (설치경로)

ServerName 127.0.0.1

SetEnv FACEBOOK_APP_ID (APP_ID)

SetEnv FACEBOOK_SECRET (SECRET)

</VirtualHost>

이렇게 마치면 로컬 서버 환경에서도 헤로쿠와 동일한 페이지가 출력된다. 하지만 페이스북앱의 도메인 퍼미션 때문에 로그인 버튼이 동작하지 않는다. 이를 해결하기 위해서는 페이스북 앱 설정 페이지에 있는 'Website with facebook login'에 http://127.0.0.1 을 추가해 로컬 테스트 서버 환경에 접근 권한을 주면 된다.

마지막으로 로컬 서버에서 개발한 것을 Git에 커밋하고 Push할 때 '/sdk' 폴더를 포함시키지 않도록 주의해야 한다. 헤로쿠 서버의 '/sdk' 폴더 내의 내용을 최신 페이스북 PHP SDK 로 관리해주기 때문이다. 또한 로컬 환경에서 동작했던 값이 그래도 헤로쿠 환경에 적용될 수 있도록 버전(PHP의 경우 'phpinfo()'한수로 확인 가능)관리에 신경 쓰자.

** 마소지 2013.01 참고 **

* 페이스북 자바스크립트 SDK

 : http://developers.facebook.com/docs/reference/javascript/

* 페이스북 Dialog

 : http://developers.facebook.com/docs/reference/dialogs/

* 페이스북 FQL(Facebook Query Language)

 : http://developers.facebook.com/docs/reference/fql/

* 페이스북 그래프 API

 : http://developers.facebook.com/docs/reference/api/

* Facebook SDK for PHP

 : http://developers.facebook.com/docs/reference/php/