Dialogflow와 Google Chat 통합

1. 시작하기 전에

이 Codelab에서는 Dialogflow가 Google Workspace API와 연결되어 Google Chat에서 동적 응답을 제공하는 Google Calendar를 사용하여 완전히 작동하는 약속 스케줄러를 만드는 방법을 알아봅니다.

이전 Codelab의 설정이 아직 없거나 Dialogflow 및 이행에 자신이 있다면 여기에서 시작 코드와 에이전트 구성을 다운로드하세요.

https://github.com/googleworkspace/appointment-scheduler-codelab

기본 요건

계속하기 전에 다음 Codelab을 완료해야 합니다.

1. Dialogflow로 약속 일정 도구 빌드
2. Dialogflow를 Actions on Google과 통합하기
3. Dialogflow의 항목 이해하기
4. Dialogflow를 Calendar와 통합하여 Fulfillment 이해하기

또한 Dialogflow로 챗봇 빌드 학습 과정에 있는 다음 동영상에서 Dialogflow의 기본 개념과 구조를 파악해야 합니다.

학습할 내용

• Google Chat 앱을 배포하고 구성하는 방법
• Google Chat에서 디스플레이 카드를 빌드하는 방법
• Dialogflow fulfillment에서 맞춤 페이로드를 빌드하는 방법

빌드할 항목

• Dialogflow, Google Chat, Calendar 간 통합
• (선택사항) 더 풍부한 카드를 위해 Google 지도 통합

필요한 항목

• Dialogflow 콘솔에 로그인할 웹브라우저 및 이메일 주소
• Google Workspace 도메인에서 Calendar 및 Google Chat이 사용 설정됨

주의: 이 Codelab을 완료하려면 Google Workspace 계정을 사용해야 합니다. @gmail.com 계정으로 API를 사용하려고 하면 오류가 발생합니다.

2. Google Chat 사용 설정 및 구성

이전 Codelab에서 만든 Dialogflow 에이전트로 시작합니다.

1. Dialogflow 콘솔에서 를 클릭합니다.
2. 일반 탭에서 프로젝트 ID로 스크롤한 다음 Google Cloud를 클릭합니다.

3. Google Cloud 콘솔에서 탐색 메뉴 ☰ > API 및 서비스 > 라이브러리를 클릭합니다.
4. 'Google Chat API'를 검색한 후 사용 설정을 클릭하여 Google Cloud 프로젝트에서 API를 사용합니다.
5. 이제 Chat 앱을 구성합니다. API의 구성 페이지로 이동합니다. 각 GCP 프로젝트에는 Chat 앱이 최대 하나만 있을 수 있습니다.

6. Dialogflow 필드가 구성 옵션을 채우는 것을 확인할 수 있습니다.
7. 아바타 URL 필드를 다음 자동차 이미지로 변경합니다. **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. 채팅 메시지와 스페이스 모두에서 Chat 앱을 사용 설정하려면 앱에 직접 메시지를 보낼 수 있습니다와 앱은 여러 사용자가 있는 공간에서 작동합니다를 선택합니다.

저장을 클릭하고 Cloud Console을 종료합니다.

3. 추가 Dialogflow 통합

Google Chat은 기본적으로 사용 설정되어 있지만 봇이 여러 플랫폼을 지원하도록 하려면 Dialogflow 콘솔의 통합 페이지로 이동하여 사용 설정하면 됩니다.

4. Google Chat에서 테스트

이제 Chat 앱이 구성되었으므로 Chat 스페이스에 추가하여 테스트해 보겠습니다. Google Chat을 열고 테스트 스페이스를 만듭니다.

1. 스페이스 오른쪽 상단에서 드롭다운을 클릭하고 사용자 및 앱 추가를 선택합니다.
2. AppointmentScheduler를 검색하고 스페이스에 앱을 추가합니다.
3. 이제 스페이스에 @AppointmentScheduler를 입력하기만 하면 Google에서 이미 빌드한 앱과 상호작용할 수 있습니다.

이 플랫폼에서 이전 Codelab과 동일한 입력으로 테스트해 보세요.

1. 사용자: '@AppointmentScheduler 내일 오후 2시에 차량 등록 약속을 잡아 줘.'
2. 채팅 앱: '예약 가능 여부를 확인해 보겠습니다. 4월 24일 오후 2시가 좋습니다.'

다음으로 Google Chat의 맞춤설정을 사용하여 더 풍부한 대답을 추가합니다.

5. 맞춤 Google Chat 카드

Google Chat을 사용하면 앱에서 사용자에게 기본 텍스트 응답 또는 카드 응답을 반환할 수 있습니다. 카드 응답을 사용하면 이미지, 버튼 등 다양한 위젯으로 빌드된 더 풍부한 인터페이스를 사용할 수 있습니다. 이제 Dialogflow 에이전트를 Google Chat 앱에 연결했으므로, Google에 표시하려면 이행 코드에서 올바른 형식으로 JSON을 반환하기만 하면 됩니다. JSON 예시를 살펴보겠습니다.

기본 텍스트 응답은 다음과 같습니다.

 {
  "text": "Your pizza delivery is here!"
}

위젯이 포함된 샘플 카드 응답은 다음과 같습니다.

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

카드에 대해 자세히 알아보려면 메시지 형식 문서를 참고하세요. 다음 섹션에서는 Chat 앱에 카드를 추가합니다.

6. 맞춤 페이로드 및 채팅 카드

Dialogflow의 맞춤 페이로드 를 사용하면 플랫폼별 서식 있는 응답 메시지를 사용할 수 있습니다. 여기에 Hangout Chat JSON 카드를 추가하면 에이전트가 사용자에게 다시 제공합니다.

환영 인텐트의 기본 카드를 추가하여 시작해 보겠습니다. Dialogflow 콘솔에서 기본 시작 인텐트로 이동하여 응답 섹션까지 아래로 스크롤합니다.

Google Chat을 클릭하고 기본값 탭의 응답을 첫 번째 응답으로 사용을 선택 해제한 다음 응답 추가 > 맞춤 페이로드를 클릭합니다.

JSON 스켈레톤이 표시됩니다.

아래 코드를 복사하여 붙여넣습니다. TextParagraph 위젯이 있는 카드를 설정했습니다.

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

저장을 누른 다음 테스트 Chat 스페이스로 이동하여 이 카드가 렌더링되는지 확인합니다. Chat 스페이스에서 '@AppointmentScheduler hello'라고 입력합니다.

다음으로, 코드로 콘텐츠를 동적으로 생성할 수 있도록 이행 코드에 맞춤 페이로드를 추가합니다.

7. Fulfillment에 카드 추가

이제 예정된 약속을 표시하는 위젯이 여러 개 있는 카드를 만들어 보겠습니다. 입력(appointmentType, date, time)을 렌더링할 getGoogleChatCard라는 함수를 추가해 보겠습니다.

아래 함수를 index.js의 코드 하단에 추가합니다.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

이 카드에는 키-값 쌍과 버튼 위젯이 포함되어 있습니다. 그런 다음 위젯은 section에 정렬되고 card에는 렌더링할 섹션 목록이 포함됩니다.

이제 캘린더 일정이 생성될 때 이 함수를 호출해 보겠습니다. createCalendarEvent 함수에서 콘텐츠를 아래 코드로 바꾸고 함수를 배포합니다.

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

에이전트가 Google Chat에서 응답할 때 에이전트는 위에 구성된 카드를 반환해야 합니다. 일정 요청으로 테스트해 보세요.

8. (선택사항) Google 지도 이미지 위젯 추가

대답 카드를 더 시각적으로 만들려면 Maps Static API에서 생성된 약속 장소의 정적 지도를 추가하면 됩니다. API를 사용하면 URL 매개변수로 지도 이미지를 구성할 수 있습니다. 그런 다음 카드의 이미지 위젯에서 이미지를 사용할 수 있습니다.

1. Calendar 및 Google Chat API를 사용 설정한 것과 같은 방식으로 Google Cloud 콘솔에서 Maps Static API를 사용 설정합니다.
2. 콘솔의 API 및 서비스 페이지에서 프로젝트의 API 키를 만들어 저장합니다. 지도에서 API 키를 검색하는 방법과 권장사항에 대한 자세한 내용은 여기를 참고하세요.
3. API 키와 다음 상수를 index.js 파일의 상단에 복사합니다.

const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';

4. 그런 다음 getGoogleChatCard 함수에 이미지 위젯을 추가합니다.

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

5. infoSection 변수의 위젯 목록에 mapImageWidget을 추가하고 저장 및 배포합니다.
6. Chat 스페이스에서 Chat 앱을 테스트하면 오늘 추가한 코드를 기반으로 리치 응답이 표시됩니다.

9. 삭제

다른 Dialogflow Codelab을 완료할 계획이라면 지금은 이 섹션을 건너뛰고 나중에 다시 돌아오세요.

Dialogflow 에이전트 삭제

1. 기존 상담사 옆에 있는 아이콘을 클릭합니다.

2. 일반 탭에서 하단으로 스크롤하여 이 에이전트 삭제를 클릭합니다.
3. 대화상자에 삭제를 입력하고 삭제를 클릭합니다.

10. 축하합니다

Dialogflow에서 챗봇을 만들고 Calendar 및 Google Chat과 통합했으니 Google Workspace 전문가입니다.

자세히 알아보기

자세한 내용은 Dialogflow GitHub 페이지의 코드 샘플을 참고하세요.