O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.163 visualizações

Publicada em

Microsoft Student Partner 세미나
"카카오 채널 챗봇 개발과 Azure App service로 배포하기"
(Kakao channel chat-bot development & Deploy with azure app service)
-MSP 노아론(Aron Roh)-

Publicada em: Software
  • Seja o primeiro a comentar

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

  1. 1. 카카오 채널 챗봇 개발과 Azure App service 배포하기 진행자 : 노아론 (컴퓨터전자시스템공학부, Microsoft Student Partner 2018 ~) 11. 29. 2019
  2. 2. 세미나 소개 Azure App service Githu b 카카오i 챗봇 스킬 개발
  3. 3. 세미나 소개 Python, Flask를 통해 카카오i 챗봇의 스킬 서버를 구현하고
  4. 4. 세미나 소개 작성한 스킬 서버 코드를 Github에 Push하고
  5. 5. 세미나 소개 Azure App service와 연동하고 배포하여
  6. 6. 세미나 소개 이러한 챗봇을 개발해봅니다
  7. 7. 막간을 이용한 후원사 소개 서브웨이 샌드위치 ToGo 박스 케이터링
  8. 8. 카카오톡 채널 챗봇? 카카오톡 채널을 통해 제공되는 대화형 인터페이스의 챗봇(Chat bot)
  9. 9. 카카오톡 채널 챗봇? 음식점 소개 학식 메뉴 소개 실시간 투표
  10. 10. 카카오톡 채널 챗봇? 음식점 소개 학식 메뉴 소개 실시간 투표 서비스 예약 기타 등등
  11. 11. 카카오 i 스킬서버? 봇 시스템으로부터 스킬 요청을 받고 가변적인 응답을 가능케 함
  12. 12. Azure ? Microsoft의 클라우드 서비스 [애져]
  13. 13. Azure App service ! 완전 관리형 플랫폼에서 웹앱 빌드, 배포 및 확장 .NET, .NET Core, Node.js, Java, PHP, Ruby, Python 지원
  14. 14. Azure App service ! Web App 사용
  15. 15. 진행 단계
  16. 16. 웹프레임워크, Flask 익히기 Python의 마이크로 웹프레임워크
  17. 17. Flask 익히기 Flask, 이렇게나 간단합니다!
  18. 18. Flask 익히기 서버실행하기 – app.py 실행 접속 - http://localhost:5000/
  19. 19. Flask 익히기 @app.route 사용
  20. 20. Flask 익히기 jsonify?
  21. 21. Flask 익히기 jsonify 를 통해 JSON타입의 HTTP 응답데이터를 생성
  22. 22. Flask 익히기 jsonify 를 통해 JSON타입의 HTTP 응답데이터를 생성
  23. 23. 카카오i 챗봇 응답 데이터 전송
  24. 24. 스킬 - SimpleText
  25. 25. 스킬 - SimpleText 예상 결과작성 소스코드
  26. 26. 진행 단계
  27. 27. Github에 업로드
  28. 28. Github에 업로드
  29. 29. Github에 업로드 https://github.com/roharon/channel-chatbot-deploy.git
  30. 30. Azure App service 생성
  31. 31. Azure App service 생성
  32. 32. Azure App service 생성
  33. 33. Azure App service 생성
  34. 34. Azure App service 생성
  35. 35. Azure App service 생성
  36. 36. Azure App service 생성
  37. 37. 진행 단계
  38. 38. App service와 Github 연동
  39. 39. App service와 Github 연동
  40. 40. App service와 Github 연동
  41. 41. App service와 Github 연동 Azure App service Kudu 빌드 서버 Kudu의 자동빌드를 위해 레포지토리 경로에 있는 프로젝트에 올바른 파일을 확인
  42. 42. App service와 Github 연동 Azure App service Kudu 빌드 서버 Kudu의 자동빌드를 위해 레포지토리 경로에 있는 프로젝트에 올바른 파일을 확인 requirements.txt 또는 runtime.txt *.py
  43. 43. App service와 Github 연동
  44. 44. App service와 Github 연동
  45. 45. App service와 Github 연동 확인 <AppService의 URL>/test
  46. 46. App service와 Github 연동 확인 예시) https://mykakaotalk- chatbot.azurewebsites.net/test
  47. 47. App service와 Github 연동 확인 예시) https://mykakaotalk- chatbot.azurewebsites.net/test
  48. 48. App service와 Github 연동 확인 이 페이지가 계속 뜬다면?
  49. 49. App service와 Github 연동 확인 해결법 : 브라우저 cache 삭제 or 시크릿탭(Chrome)
  50. 50. 카카오i 챗봇 생성 https://i.kakao.com/openbuilder 카카오i 오픈빌더 챗봇 생성
  51. 51. 카카오i 챗봇 스킬 설정
  52. 52. 카카오i 챗봇 시나리오 설정
  53. 53. 카카오i 챗봇 시나리오 설정 폴백 블록만 설정하는 이유는?
  54. 54. 카카오i 챗봇 시나리오 설정 모든 응답을 스킬서버에서 받기 위해서
  55. 55. 스킬서버 응답 확인
  56. 56. 카카오톡 채널에 연결하기
  57. 57. 카카오톡 채널에 연결하기 Q. 운영채널과 개발채널의 차이점은 무엇인가요?
  58. 58. 카카오톡 채널에 연결하기 A. 운영채널은 Open Builder에서 배포를 한 뒤에 적용이 됩니다. 개발채널은 배포를 하지 않아도, 변경내용 그대로 반영이 되어 개발자가 편히 사용할 수 있습니다
  59. 59. 카카오톡 채널에 연결하기 A. 운영채널은 Open Builder에서 배포를 한 뒤에 적용이 됩니다. 개발채널은 배포를 하지 않아도, 변경내용 그대로 반영이 되어 개발자가 편히 사용할 수 있습니다
  60. 60. 카카오톡 채널에 연결하기 http://center-pf.kakao.com/
  61. 61. 카카오톡 채널에 연결하기
  62. 62. 본격적인 카카오i 챗봇 개발 이미지 출력하기
  63. 63. 스킬 – SimpleImage 이름 타입 필수 여부 설명 제한 imageUrl string O 전달하고자 하는 이미지의 url입니다 URL 형식 altText string O url이 유효하지 않은 경우, 전달되는 텍스트입니다 최대 1000자
  64. 64. 스킬 - SimpleImage
  65. 65. 스킬 - SimpleImage
  66. 66. 스킬 - BasicCard 카드 출력하기
  67. 67. 스킬 - 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 필드는 미지원 상태
  68. 68. 스킬 – 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로 설정할 경우 필요한 값입니다. 실제 이미지 사이즈와 다른 값일 경우 원본이미지와 다르게 표현될 수 있습니다.
  69. 69. 스킬 – BasicCard
  70. 70. 스킬 – BasicCard
  71. 71. 응용) BasicCard 이미지에 링크 추가하기 link Link X 이미지 클릭시 작동하는 link입니다.
  72. 72. 응용) BasicCard 이미지에 링크 추가하기 필드명 타입 필수 여부 설명 mobile string X ios와 android를 아우르는 mobile link입니다. ios string X ios의 웹이나 앱을 실행하는 link입니다. android string X android의 웹이나 앱을 실행하는 link입니다. pc string X mac과 window를 아우르는 pc link입니다. mac string X mac의 웹이나 앱을 실행하는 link입니다. win string X window의 웹이나 앱을 실행하는 link입니다. web string X 모든 기기를 아우르는 link입니다. Link 타입
  73. 73. 응용) BasicCard 이미지에 링크 추가하기
  74. 74. 응용) BasicCard 이미지에 링크 추가하기 <Android 디바이스 기준> mobile의 링크가 아닌 android 링크로 이동
  75. 75. 응용) BasicCard 이미지에 링크 추가하기 Link 우선순위 모바일: web < mobile < ios or android pc: web < pc < mac or win web 을 추가하는 경우 PC, 모바일 모두 web 링크로 이동함을 확인
  76. 76. 응용) 버튼에 링크추가하기
  77. 77. 응용) 버튼에 링크추가하기
  78. 78. 응용) 버튼눌러 전화걸기
  79. 79. 응용) 버튼눌러 전화걸기
  80. 80. 응용) 버튼눌러 공유하기
  81. 81. 응용) 버튼눌러 공유하기
  82. 82. 스킬 - CommerceCard 커머스 카드 출력
  83. 83. 스킬 – 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개 이하
  84. 84. 스킬 - CommerceCard
  85. 85. 스킬 - ListCard 리스트 카드 출력
  86. 86. 스킬 - ListCard 필드명 타입 필수 여부 설명 제한 header ListItem O 카드의 상단 항목 itmes Array <ListItem> O 카드의 각각 아이템 최대 5개 buttons Array <Button> X 최대 2개 ListCard 상세필드
  87. 87. 스킬 - ListCard 필드명 타입 필수 여부 설명 title string O •header에 들어가는 경우, listCard의 제목이 됩니다. •items에 들어가는 경우, 해당 항목의 제목이 됩니다. description string X •header에 들어가는 경우, 아무런 작동을 하지 않습니다. •items에 들어가는 경우, 해당 항목의 설명이 됩니다. imageUrl string X •header에 들어가는 경우, listCard 제목의 배경이 됩니다. •items에 들어가는 경우, 해당 항목의 우측 안내 사진이 됩니다. link Link X 클릭시 작동하는 링크입니다. ListItem 상세필드
  88. 88. 스킬 - ListCard
  89. 89. 스킬 - ListCard
  90. 90. 스킬 – Carousel 여러 장의 카드 출력
  91. 91. 스킬 – Carousel 필드명 타입 필수 여부 설명 제한 type string O 케로셀의 타입입니다. basicCard 혹은 co mmerceCard items Array <BasicCard>, Array <CommerceCard> O 케로셀 아이템입니다. 최대 10개 header CarouselHeader X 케로셀의 커버를 제공합니다. CommerceCard 만 지원하고 있습니다. 추후 BasicCard 도 지원할 예정입니다.
  92. 92. 스킬 - Carousel
  93. 93. 스킬 - Carousel
  94. 94. 스킬 – QuickReplies 버튼 바로가기 응답 설정
  95. 95. 스킬 – QuickReplies 버튼
  96. 96. 스킬 – QuickReplies 버튼
  97. 97. 스킬 – userRequest 사용자의 응답에 따라 결과를 다르게 줄 수 없을까?
  98. 98. 스킬 – userRequest 사용자 발화 데이터 사용하기
  99. 99. 스킬 – userRequest 필드명 타입 설명 timezone string 사용자의 시간대를 반환합니다.한국에서 보낸 요청이라면 “Asia/Seoul”를 갖습니다. block Block •사용자의 발화에 반응한 블록의 정보입니다. •블록의 id와 name을 포함합니다. utterance string 봇 시스템에 전달된 사용자의 발화입니다. lang string •사용자의 언어를 반환합니다. •한국에서 보낸 요청이라면 “kr”를 갖습니다. user User 사용자의 정보입니다.
  100. 100. 스킬 – userRequest 필드명 타입 설명 timezone string 사용자의 시간대를 반환합니다.한국에서 보낸 요청이라면 “Asia/Seoul”를 갖습니다. block Block •사용자의 발화에 반응한 블록의 정보입니다. •블록의 id와 name을 포함합니다. utterance string 봇 시스템에 전달된 사용자의 발화입니다. lang string •사용자의 언어를 반환합니다. •한국에서 보낸 요청이라면 “kr”를 갖습니다. user User 사용자의 정보입니다.
  101. 101. 스킬 – userRequest 사용자간 식별은 어떻게 할까?
  102. 102. 스킬 – userRequest User Key 가져오기
  103. 103. 스킬 – userRequest
  104. 104. 스킬 – userRequest User Key(plusfriendUserKey) 사용자의 고유번호로 외부 유출이 되지않도록 관리 필요
  105. 105. QnA
  106. 106. 감사합니 다
  107. 107. 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
  108. 108. 문의 roharon@studentpartner.com https://www.linkedin.com/in/아론-노-73b155121/

×