대화형 작업 (Dialogflow) 빌드

fulfillment를 사용하여 작업의 대화를 정의합니다. 이 코드는 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 인텐트의 처리는 다음을 전송합니다. HtmlResponse를 웹 앱의 URL로 바꿉니다. 어시스턴트가 이 메시지를 수신합니다. 해당 주소에 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가 포함되어 있지 않으면 웹 앱이 종료됩니다.
  • 전송하는 첫 번째 인텐트에만 웹 앱 URL을 포함하면 됩니다. 사용자 (일반적으로 Welcome 인텐트)입니다.
  • HtmlResponse의 크기는 50KB 이하여야 합니다.