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 프로젝트에는 최대 1개의 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 콘솔을 종료합니다.
또한 Dialogflow 통합. Google Chat은 기본적으로 사용 설정되어 있지만 여러 플랫폼을 지원하려는 경우 Dialogflow 콘솔의 통합 페이지로 이동하여 사용 설정할 수 있습니다.
3. Google Chat에서 테스트
이제 Google Chat 앱이 구성되었으므로 Chat 스페이스에 추가하여 테스트해 보겠습니다. Google Chat을 열고 테스트 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의 커스텀 페이로드 를 사용하면 플랫폼별 리치 응답 메시지를 사용할 수 있습니다. 여기에 행아웃 채팅 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 및 버튼 위젯을 사용하여 카드 응답을 구성합니다.
하단의 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 페이로드를 구성합니다. 이는 처리에서 페이로드를 올바르게 다시 전달하는 데 중요합니다.
이제 Chat 스페이스로 돌아가서 테스트해 보세요. @tvguide What is on MTV?를 입력합니다. 비슷한 응답이 표시됩니다.
7. 축하합니다
Dialogflow로 첫 번째 Google Chat 봇을 만들었습니다.
다음 단계
이 Codelab에 만족하셨나요? 멋진 실습을 살펴보세요.