IT & Art

★Sample Code(Github) 지난 기본편 튜토리얼에서 위와 같은 시스템을 만들었죠. 오늘은 그 첫 걸음이자 워밍업으로 실제 기상청 날씨 API를 연동해 보겠습니다. 기상자료개방포털[데이터:오픈 API] data.kma.go.kr 날씨예보 API 등록 먼저 공공데이터포털 가입합니다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 동네예보 서비스 검색 후 활용 신청합니다. 활용 조건이 저작자 표시니까 아래와 같이 기재하면 되겠네요. 본 저작물은 기상청에서 2021년 작성하여 공공누리 제1유형으로 개방한 동네예보..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에는 React App을 Dialogflow와 바로 연결할 수 없어서 Node App을 구현했습니다. 오늘은 마지막으로 React App과 Node App을 음성으로 연동해 보겠습니다. React App 생성 먼저 React 라이..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지금까지 클라이언트 사이드에서 텍스트 기반 웹앱과 챗봇을 살펴봤어요. 이제 오디오 입력을 받아 처리하는 React App만 남았는데요, React App 같은 웹앱은 Dialogflow와 직접 통신할 수 없습니다. Dialogflow AP..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에는 텍스트 기반 클라이언트 웹앱을 만들어 보았습니다. 오늘은 유명한 메신저 서비스, Slack에 챗봇을 연동해 보겠습니다. Slack 챗봇 연동 널리 알려진 메신저 서비스들의 챗봇으로 연동할 수도 있습니다. Integration..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에 fulfillment inline editor 대신 webhook을 사용하여 외부 솔루션 연동을 확장했습니다. 오늘은 클라이언트 사이드를 구현해 보겠습니다. 클라이언트 사이드는 텍스트 및 오디오 기반 앱과 챗봇으로 구현할 수 ..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에 fulfillment inline editor를 사용해서 외부 사이트 연동해 봤습니다. 서비스가 복잡해지면 fulfillment 코드도 복잡해지는만큼, webhook이 필수적인데요, 지금부터는 fulfillment inline..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 편에서 fulfillment를 사용해봤습니다. 오늘은 fulfillment inline editor를 통해 외부 사이트를 연동해 봅니다. 외부 서버 연동 코딩에 앞서, 날씨 정보를 가져올 수 있는 외부 사이트가 필요한데, 실제 날씨 ..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에는 티키타카를 위한 컨텍스트에 대해 알아봤습니다. 이번 시간에는 Fulfillment에 대해 알아봅시다. Why Fulfillment? 지금까지는 브라우저로 Dialogflow 콘솔에 접속해서 마치 서류의 빈 칸을 채우듯 쉽고 ..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 편에서 우리는 Dialogflow 에이전트를 만들고 날씨 인텐트를 만들어 보면서 개념을 이해했습니다. 오늘은 컨텍스트(Context)에 대해 이해해 봅시다. 날씨 대화 같은 경우에는 "오늘 날씨 어때?" / "응, 좋아." 1회성으로..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 구글의 Dialogflow는 머신과 인간의 대화를 가능하게 해주는 플랫폼입니다. 모바일이나 웹, 챗봇 등 다양한 형태로 사용할 수 있고 텍스트 기반뿐만 아니라 음성 기반으로도 가능합니다. 구글 계정만 있으면 사용할 수 있습니다. 사용해 볼..