대화형 작업 (Dialogflow) 빌드

Dialogflow 에이전트의 대화 로직이 포함된 웹훅으로 배포된 코드인 fulfillment를 사용하여 작업의 대화를 정의합니다. 처리는 사용자가 요청할 때 실행할 작업을 작업에 알려줍니다.

Interactive Canvas의 경우 처리에서 웹 앱에 관한 정보도 어시스턴트에 전달합니다. HtmlResponse를 사용하여 어시스턴트에 웹 앱을 렌더링하도록 지시할 수 있습니다. HtmlResponse는 웹 앱 맞춤 로직이 웹 앱을 변경하는 데 사용하는 data 업데이트를 제공할 수도 있습니다.

이 페이지에서는 처리에서 HtmlResponse를 사용하는 방법과 이 응답 유형을 사용하기 위한 일반 가이드라인을 설명합니다.

HTML 응답

웹 앱에 관한 정보를 어시스턴트에 전달하려면 인텐트별 처리에 HtmlResponse를 포함해야 합니다. HtmlResponse에는 웹 앱의 URL과 웹 앱을 업데이트하는 데이터가 포함될 수 있습니다. HtmlResponse를 전송하면 다음 단계가 진행됩니다.

  1. 매칭된 인텐트의 처리는 HtmlResponse를 기기로 전송합니다.
  2. 기기는 HtmlResponse의 URL을 사용하여 웹 앱을 로드합니다.
  3. data JSON 페이로드는 콜백으로 웹 앱에 전달됩니다.

  4. 대화형 작업이 새 HtmlResponse를 전송하여 업데이트를 보내거나 새 상태를 로드합니다.

샘플 처리

샘플 처리 코드에서 발췌한 다음 부분은 HtmlResponse를 구현하는 방법을 보여줍니다.

const functions = require('firebase-functions');
const {dialogflow, HtmlResponse} = require('actions-on-google');

const app = dialogflow({debug: true});
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});

// map of human speakable colors to color values
const tints = {
  red: 0xFF0000,
  green: 0x00FF00,
  blue: 0x0000FF,
};
app.intent('color', (conv, {color}) => {
  if (color in tints) {
    conv.ask(`Ok, I changed my color to ${color}. What else?`);
    conv.ask(new HtmlResponse({
      data: {
        tint: tints[color],
      },
    }));
    return;
  }
  conv.ask(`Sorry, I don't know that color. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      query: conv.query,
    },
  }));
});
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});

app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});

app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
  }));
});

exports.conversation = functions.https.onRequest(app);

인텐트 welcome개

위 스니펫에서 welcome 인텐트의 처리는 웹 앱의 URL과 함께 HtmlResponse를 전송합니다. 어시스턴트는 이를 수신하고 이 주소에서 HTML과 자바스크립트를 로드합니다.

...
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});
...

기타 인텐트

다른 인텐트 처리에서 HtmlResponse는 변수 값(샘플의 tint 또는 spin)을 웹 앱에 전달합니다. 웹 앱의 맞춤 로직은 이러한 값을 사용하여 요소 (애니메이션, 색상 등)를 업데이트합니다.

...
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});
...

가이드라인 및 제한사항

처리를 빌드할 때 HtmlResponse에 관한 다음 가이드라인과 제한사항에 유의하세요.

  • 처리의 각 인텐트에는 HtmlResponse가 포함되어야 합니다. 인텐트에 HtmlResponse가 없으면 웹 앱이 닫힙니다.
  • 사용자에게 전송하는 첫 번째 인텐트 (일반적으로 Welcome 인텐트)에만 웹 앱 URL을 포함하면 됩니다.
  • HtmlResponse의 크기는 50KB 이하여야 합니다.