1. 소개
이전 Codelab에서 TV 가이드용 Dialogflow 챗봇을 빌드했으므로 이제 Google Chat으로 확장하는 방법을 보여드리겠습니다. 이 플랫폼의 동적 대화형 카드를 구성하고 여러 통합을 수행하는 방법을 알아봅니다.
빌드할 항목
맞춤설정 가능한 응답으로 Google Workspace 도메인에서 응답할 수 있는 Dialogflow 챗봇을 빌드합니다.
학습할 내용
- Google Chat 앱을 배포하고 구성하는 방법
- Google Chat에서 디스플레이 카드를 빌드하는 방법
- Dialogflow fulfillment에서 맞춤 페이로드를 빌드하는 방법
필요한 항목
- 이 2부 시리즈의 첫 번째 Codelab을 완료합니다.
- Dialogflow 콘솔에 로그인할 웹브라우저 및 이메일 주소
- Google Workspace 도메인에서 Chat이 사용 설정되어 있어야 합니다.
2. Google Chat 사용 설정 및 구성
이전 Codelab에서 만든 Dialogflow 에이전트로 시작합니다.
- Dialogflow 콘솔에서
를 클릭합니다. - 일반 탭에서 프로젝트 ID로 스크롤한 다음 Google Cloud
를 클릭합니다.
- Google Cloud 콘솔에서 탐색 메뉴 ☰ > API 및 서비스 > 라이브러리를 클릭합니다.
- 'Google Chat API'를 검색한 후 사용 설정을 클릭하여 Google Cloud 프로젝트에서 API를 사용합니다.
- 이제 Google Chat 앱을 구성합니다. API의 구성 페이지로 이동합니다. 각 GCP 프로젝트에는 Google Chat 앱이 하나만 있을 수 있습니다.
- Dialogflow 필드가 구성 옵션을 채우는 것을 확인할 수 있습니다.
- 아바타 URL 필드를 다음 TV 이미지로 변경합니다.
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - 채팅 메시지와 스페이스 모두에 Google Chat 앱 사용 설정
저장을 클릭하고 Cloud Console을 종료합니다.
Dialogflow 통합도 있습니다. Google Chat은 기본적으로 사용 설정되어 있지만 여러 플랫폼을 제공하려면 Dialogflow 콘솔의 통합 페이지로 이동하여 사용 설정하면 됩니다.
3. Google Chat에서 테스트
이제 Google Chat 앱이 구성되었으므로 채팅 스페이스에 추가하여 테스트해 보겠습니다. Google Chat을 열고 테스트 채팅 스페이스를 만듭니다. 스페이스 오른쪽 상단에서 드롭다운을 클릭하고 사용자 및 앱 추가를 선택합니다.
tvguide를 검색하고 Google Chat 앱을 스페이스에 추가합니다.
이제 스페이스에 @tvguide를 입력하기만 하면 Google Chat에서 이미 빌드한 Google Chat 앱과 상호작용할 수 있습니다. @tvguide hello를 입력하여 테스트해 보세요.
다음으로 Google Chat의 맞춤설정을 사용하여 더 풍부한 대답을 추가합니다.
4. 맞춤 Google Chat 카드
Google Chat을 사용하면 앱에서 사용자에게 기본 텍스트 응답 또는 카드 응답을 반환할 수 있습니다. 카드 응답을 사용하면 이미지, 버튼 등 다양한 위젯으로 빌드된 풍부한 인터페이스를 사용할 수 있습니다. 이제 Dialogflow 에이전트를 Google Chat 앱에 연결했으므로, Google Chat에 표시하려면 이행 코드에서 올바른 형식으로 JSON을 반환하면 됩니다. JSON 예시를 살펴보겠습니다.
기본 텍스트 응답은 다음과 같습니다.
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
위젯이 포함된 샘플 카드 응답은 다음과 같습니다.
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. 맞춤 페이로드 및 채팅 카드
Dialogflow의 맞춤 페이로드 를 사용하면 플랫폼별 서식 있는 응답 메시지를 사용할 수 있습니다. 여기에 Hangout Chat JSON 카드를 추가하면 에이전트가 사용자에게 다시 제공합니다.
환영 인텐트의 기본 카드를 추가하여 시작해 보겠습니다. Dialogflow 콘솔에서 기본 시작 인텐트로 이동하여 응답 섹션까지 아래로 스크롤합니다.
Google Chat을 클릭하고 기본값 탭의 응답을 첫 번째 응답으로 사용을 선택 해제한 다음 응답 추가 > 맞춤 페이로드를 클릭합니다.
JSON 스켈레톤이 표시됩니다.
아래 코드를 복사하여 붙여넣습니다. TextParagraph 위젯이 있는 카드를 설정했습니다.
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
저장을 누른 다음 테스트 채팅 스페이스로 이동하여 이 카드가 렌더링되는지 확인합니다. 채팅 스페이스에 '@tvguide hello'라고 입력합니다.
다음으로, 코드로 콘텐츠를 동적으로 생성할 수 있도록 이행 코드에 맞춤 페이로드를 추가합니다.
카드에 대해 자세히 알아보려면 메시지 형식 문서를 참고하세요. 다음 섹션에서는 카드를 추가합니다.
6. 주문 처리 시 카드 추가
이제 TV 편성표를 표시하는 위젯이 포함된 카드를 만들어 보겠습니다. 결과 목록 정보를 렌더링할 getGoogleCard라는 함수를 추가해 보겠습니다. keyValue 및 button 위젯을 사용하여 카드 응답을 구성합니다.
index.js의 코드 하단에 아래 함수를 추가합니다.
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
이제 에이전트가 사용자에게 다시 보낼 응답을 가져올 수 있도록 이 메서드를 호출해야 합니다. channelHandler 함수에서 함수의 콘텐츠를 아래 코드로 바꿉니다.
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
응답이 추가되는 하단의 코드를 확인합니다. 에이전트의 요청 소스가 이 플랫폼으로 식별되면'hangouts' 태그를 사용하여 JSON 페이로드를 구성합니다. 이는 대답에서 페이로드를 올바르게 다시 전달하는 데 중요합니다.
이제 채팅 스페이스로 돌아가서 테스트해 보세요. @tvguide What is on MTV?를 입력합니다. 다음과 비슷한 응답이 표시됩니다.
7. 축하합니다
Dialogflow로 첫 번째 Google Chat 봇을 만들었습니다.
다음 단계
이 Codelab이 재미있었나요? 이 멋진 실습을 살펴보세요.