[MSP] 카카오 채널 챗봇 개발과 Azure App Service로 배포하기

카카오 채널 챗봇 개발과
Azure App service 배포하기
진행자 : 노아론 (컴퓨터전자시스템공학부, Microsoft Student Partner 2018 ~)
11. 29. 2019

세미나 소개
Azure App
service
Githu
b
카카오i 챗봇
스킬 개발

세미나 소개
Python, Flask를 통해
카카오i 챗봇의 스킬 서버를 구현하고

세미나 소개
작성한 스킬 서버 코드를
Github에 Push하고

세미나 소개
Azure App service와 연동하고
배포하여

세미나 소개
이러한 챗봇을
개발해봅니다

막간을 이용한 후원사 소개
서브웨이 샌드위치
ToGo 박스 케이터링

카카오톡 채널 챗봇?
카카오톡 채널을 통해
제공되는
대화형 인터페이스의
챗봇(Chat bot)

음식점 소개
학식 메뉴 소개
실시간 투표

음식점 소개
학식 메뉴 소개
실시간 투표
서비스 예약
기타 등등

카카오 i 스킬서버?
봇 시스템으로부터 스킬 요청을 받고
가변적인 응답을 가능케 함

Azure ?
Microsoft의 클라우드 서비스
[애져]

Azure App service !
완전 관리형 플랫폼에서 웹앱 빌드, 배포 및
확장
.NET, .NET Core, Node.js,
Java, PHP, Ruby, Python
지원

Azure App service !
Web App 사용

웹프레임워크, Flask 익히기
Python의 마이크로 웹프레임워크

Flask 익히기
Flask, 이렇게나 간단합니다!

Flask 익히기
서버실행하기 – app.py 실행
접속 - http://localhost:5000/

Flask 익히기
@app.route 사용

Flask 익히기
jsonify 를 통해 JSON타입의 HTTP 응답데이터를 생성

카카오i 챗봇 응답 데이터 전송

스킬 - SimpleText
예상 결과작성 소스코드

Github에 업로드
https://github.com/roharon/channel-chatbot-deploy.git

App service와 Github 연동
Azure App service Kudu 빌드 서버
Kudu의 자동빌드를 위해
레포지토리 경로에 있는 프로젝트에
올바른 파일을 확인

Azure App service Kudu 빌드 서버
Kudu의 자동빌드를 위해
레포지토리 경로에 있는 프로젝트에
올바른 파일을 확인
requirements.txt
또는
runtime.txt
*.py

확인 <AppService의 URL>/test

확인 예시) https://mykakaotalk-
chatbot.azurewebsites.net/test

확인 이 페이지가 계속 뜬다면?

확인 해결법 : 브라우저 cache 삭제 or 시크릿탭(Chrome)

카카오i 챗봇 생성
https://i.kakao.com/openbuilder
카카오i 오픈빌더 챗봇 생성

카카오i 챗봇 스킬 설정

카카오i 챗봇 시나리오 설정

폴백 블록만 설정하는 이유는?

모든 응답을 스킬서버에서 받기 위해서

카카오톡 채널에 연결하기

Q. 운영채널과 개발채널의 차이점은
무엇인가요?

A. 운영채널은 Open Builder에서 배포를 한 뒤에 적용이
됩니다.
개발채널은 배포를 하지 않아도,
변경내용 그대로
반영이 되어 개발자가 편히 사용할 수 있습니다

http://center-pf.kakao.com/

본격적인 카카오i 챗봇 개발
이미지 출력하기

스킬 – SimpleImage
이름 타입 필수 여부 설명 제한
imageUrl string O
전달하고자 하는
이미지의
url입니다
URL 형식
altText string O
url이 유효하지
않은 경우,
전달되는
텍스트입니다
최대 1000자

스킬 - BasicCard
카드 출력하기

스킬 - BasicCard
필드명 타입 필수 여부 설명 제한
title string X 카드의 제목입니다. 최대 2줄
description string X
카드에 대한 상세
설명입니다.
최대 230자
thumbnail Thumbnail X
카드의 상단
이미지입니다.
profile Profile X
카드의 프로필
정보입니다.
social Social X 카드의 소셜 정보입니다.
buttons
Array
<Button>
X
카드의 버튼들을
포함합니다.
최대 3개
현재 profile, social 필드는 미지원 상태

스킬 – BasicCard – Thumbnail
필드필드명 타입 필수 여부 설명
imageUrl string O 이미지의 url입니다.
link Link X
이미지 클릭시 작동하는
link입니다.
fixedRatio boolean X
•true: 이미지 영역을 1:1
비율로 두고 이미지의 원본
비율을 유지합니다. 이미지가
없는 영역은 흰색으로
노출합니다.
•false: 이미지 영역을 2:1
비율로 두고 이미지의
가운데를 크롭하여 노출합니다.
기본값: false
width int O
fixedRatio를 true로 설정할
경우 필요한 값입니다. 실제
이미지 사이즈와 다른 값일
경우 원본이미지와 다르게
표현될 수 있습니다.
height int O
fixedRatio를 true로 설정할
경우 필요한 값입니다. 실제
이미지 사이즈와 다른 값일
경우 원본이미지와 다르게
표현될 수 있습니다.

응용) BasicCard 이미지에 링크
추가하기
link Link X
이미지 클릭시
작동하는
link입니다.

응용) BasicCard 이미지에 링크 추가하기
필드명 타입 필수 여부 설명
mobile string X
ios와 android를
아우르는 mobile
link입니다.
ios string X
ios의 웹이나 앱을
실행하는 link입니다.
android string X
android의 웹이나 앱을
pc string X
mac과 window를
아우르는 pc link입니다.
mac string X
mac의 웹이나 앱을
win string X
window의 웹이나 앱을
web string X
모든 기기를 아우르는
link입니다.
Link 타입

<Android 디바이스 기준>
mobile의 링크가 아닌
android 링크로 이동

Link 우선순위
모바일: web < mobile < ios or android
pc: web < pc < mac or win
web 을 추가하는 경우 PC, 모바일 모두 web 링크로 이동함을 확인

응용) 버튼에 링크추가하기

응용) 버튼눌러 전화걸기

응용) 버튼눌러 공유하기

스킬 - CommerceCard
커머스 카드 출력

스킬 – CommerceCard
현재 profile, social 필드는 미지원 상태
description string O
제품에 대한 상세
설명입니다.
최대 76자
price int O 제품의 가격입니다.
currency string O
제품의 가격에 대한
통화입니다.
현재 won만 가능
discount int X
할인할 금액입니다.
discountRate int X
할인율입니다.
dicountedPrice int
X (discountRate을
쓰는 경우 필수)
할인가(할인된
가격)입니다.
thumbnails
Array
<Thumbnail>
O
제품에 대한
사진입니다.
현재 1개만 가능
profile Profile X
제품을 판매하는
프로필 정보입니다.
buttons
Array
<Button>
O
다양한 액션을 수행할
수 있는 버튼입니다.
1개 이상, 3개 이하

스킬 - ListCard
리스트 카드 출력

스킬 - ListCard
header ListItem O
카드의 상단
항목
itmes
Array
<ListItem>
O
카드의 각각
아이템
최대 5개
buttons
Array
<Button>
X 최대 2개
ListCard 상세필드

스킬 - ListCard
필드명 타입 필수 여부 설명
title string O
•header에 들어가는 경우,
listCard의 제목이 됩니다.
•items에 들어가는 경우,
해당 항목의 제목이 됩니다.
description string X
아무런 작동을 하지
않습니다.
해당 항목의 설명이 됩니다.
imageUrl string X
listCard 제목의 배경이
됩니다.
해당 항목의 우측 안내
사진이 됩니다.
link Link X
클릭시 작동하는
링크입니다.
ListItem 상세필드

스킬 – Carousel
여러 장의 카드 출력

스킬 – Carousel
type string O
케로셀의
타입입니다.
basicCard 혹은 co
mmerceCard
items
Array
<BasicCard>,
Array
<CommerceCard>
O
케로셀
아이템입니다.
최대 10개
header CarouselHeader X
케로셀의 커버를
제공합니다.
CommerceCard 만
지원하고 있습니다.
추후 BasicCard 도
지원할 예정입니다.

스킬 – QuickReplies 버튼
바로가기 응답 설정

스킬 – QuickReplies 버튼

스킬 – userRequest
사용자의 응답에 따라
결과를 다르게 줄 수 없을까?

사용자 발화
데이터 사용하기

필드명 타입 설명
timezone string
사용자의 시간대를
반환합니다.한국에서 보낸
요청이라면 “Asia/Seoul”를
갖습니다.
block Block
•사용자의 발화에 반응한
블록의 정보입니다.
•블록의 id와 name을
포함합니다.
utterance string
봇 시스템에 전달된 사용자의
발화입니다.
lang string
•사용자의 언어를 반환합니다.
•한국에서 보낸 요청이라면
“kr”를 갖습니다.
user User 사용자의 정보입니다.

사용자간 식별은
어떻게 할까?

User Key 가져오기

User Key(plusfriendUserKey)
사용자의 고유번호로
외부 유출이 되지않도록 관리
필요

https://medium.com/@auston
pramodh/deploy-react-app-
on-azure-app-service-with-ci-
cd-from-github-b514d88bee71
참고자료
http://devhumor.com/media/git-push
https://i.kakao.com/docs/getting-started-
overview#%EC%98%A4%ED%94%88%EB%B9%8C%EB%8
D%94-%EA%B5%AC%EC%A1%B0

문의
roharon@studentpartner.com
https://www.linkedin.com/in/아론-노-73b155121/

[MSP] 카카오 채널 챗봇 개발과 Azure App Service로 배포하기

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie [MSP] 카카오 채널 챗봇 개발과 Azure App Service로 배포하기

Ähnlich wie [MSP] 카카오 채널 챗봇 개발과 Azure App Service로 배포하기 (20)

[MSP] 카카오 채널 챗봇 개발과 Azure App Service로 배포하기

Hinweis der Redaktion