대화형 작업이 2023년 6월 13일에 지원 중단되었습니다. 자세한 내용은 대화 작업 지원 중단을 참고하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

클라이언트 또는 서버 측 처리를 사용하여 계속 빌드

기본사항을 배웠으므로 이제 캔버스 관련 메서드를 사용하여 작업을 개선하고 맞춤설정할 수 있습니다. 작업 프로젝트를 만들 때 클라이언트 처리 모델 또는 서버 측 처리 모델을 사용하여 작업을 개발할 수 있습니다. 이러한 옵션에 관한 자세한 내용은 Interactive Canvas 사용 설정을 참고하세요.

클라이언트 처리 모델 옵션을 선택하는 경우 작업에서 다음을 사용할 수 있습니다.

클라이언트 측 처리로 빌드에 나열된 모든 API
서버 측 처리로 빌드에 나열된 모든 API

참고: 클라이언트 측 처리의 경우 계정 연결과 같이 캔버스가 아닌 기능에 웹훅만 호출하는 것이 좋습니다.
onTtsMark() 콜백

서버 처리 모델 옵션을 선택한 경우 작업에서 다음을 사용할 수 있습니다.

서버 측 처리로 빌드에 나열된 모든 API
콜백

일부 Interactive Canvas API는 특정 처리 모델과 함께 사용하지 않는 것이 좋습니다. 다음 표에서는 클라이언트 처리 옵션을 선택할 때 사용 설정된 API와 각 모델에 이러한 API가 권장되는지 또는 권장되지 않는지를 보여줍니다.

API 이름	서버 처리 모델에서 지원되나요?	클라이언트 처리 모델에서 지원되나요?
`sendTextQuery()`	지원됨	지원되지만 권장되지 않습니다. 자세한 내용은 sendtextQuery()를 참조하세요.
`outputTts()`	지원됨	지원됨
`triggerScene()`	No	예
`createIntentHandler(), expect(), clearExpectations(), prompt()`	No	예
`createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot()`	No	예
`setHomeParam(), getHomeParam(), setUserParam(), getUserParam()`	No	지원됨

다음 섹션에서는 Interactive Canvas 작업에서 클라이언트 및 서버 측 처리 모델의 API를 구현하는 방법을 설명합니다.

클라이언트 측 처리를 사용하여 빌드

웹 앱 로직에서 다음과 같은 Interactive Canvas API를 구현할 수 있습니다.

`outputTts()`

이 API를 사용하면 Actions Builder에서 정적 프롬프트를 보내거나 웹훅을 호출하지 않고도 기기에서 텍스트 음성 변환 (TTS)을 출력할 수 있습니다. TTS와 연결된 서버 측 로직이 필요하지 않다면 클라이언트 측의 outputTts()를 사용하여 서버로 이동하지 않고 사용자에게 더 빠른 응답을 제공할 수 있습니다.

클라이언트 측 outputTts()은 서버 측 TTS를 중단하거나 취소할 수 있습니다. 다음 예방 조치를 취하면 서버 측 TTS가 중단되지 않을 수 있습니다.

세션 시작 시 outputTts()를 호출하지 마세요. 대신 작업의 첫 번째 대화 차례에서 서버 측 TTS를 사용합니다.
중간에 사용자 작업 없이 outputTts()를 연속으로 호출하지 마세요.

다음 스니펫은 outputTts()를 사용하여 클라이언트 측에서 TTS를 출력하는 방법을 보여줍니다.

interactiveCanvas.outputTts(
      '<speak>This is an example response.</speak>', true);

또한 outputTts()를 onTtsMark()와 함께 사용하여 SSML 마커를 텍스트 시퀀스에 배치할 수도 있습니다. onTtsMark()를 사용하면 다음 스니펫과 같이 SSML TTS 문자열의 특정 지점에서 웹 앱 애니메이션 또는 게임 상태가 동기화됩니다.

interactiveCanvas.outputTts(
      '<speak>Speak as <mark name="number" /> number <break time="700ms"/>' +
      '<say-as interpret-as="cardinal">12345</say-as> <break time="300ms"/> ' +
      'Speak as <mark name="digits" /> digits <break time="700ms"/>' +
      '<say-as interpret-as="characters">12345</say-as></speak>', true);

이전 예에서는 응답을 맞춤설정하는 두 개의 표시가 TTS와 함께 웹 앱에 전송됩니다.

클라이언트에서 인텐트 처리 처리

Interactive Canvas의 서버 처리 모델에서는 모든 인텐트를 웹훅으로 처리해야 하므로 작업의 지연 시간이 증가합니다. 웹훅을 호출하는 대신 웹 앱 내에서 인텐트 처리를 처리할 수 있습니다.

클라이언트 측에서 인텐트를 처리하려면 다음 API를 사용하면 됩니다.

createIntentHandler(): Actions Builder에 정의된 맞춤 인텐트의 웹 앱 코드에서 인텐트 핸들러를 정의할 수 있는 메서드입니다.
expect(): 사용자가 인텐트를 일치시킬 수 있도록 인텐트 핸들러를 활성화/등록하는 메서드입니다.
clearExpectations(): 사용자가 인텐트와 일치하는 발화를 말하더라도 인텐트가 일치될 수 없도록 현재 활성화된 모든 인텐트의 기대치를 삭제하는 메서드입니다.
deleteHandler(): 개별 인텐트 핸들러를 사용 중지하여 이러한 인텐트를 일치시킬 수 없도록 하는 메서드입니다.

이러한 API를 사용하면 Interactive Canvas 작업의 다양한 상태에 관해 인텐트를 선택적으로 활성화하거나 사용 중지할 수 있습니다. 이러한 인텐트를 활성화하려면 인텐트 핸들러에서 expect()를 사용해야 합니다.

인텐트 핸들러 활성화

인텐트 핸들러 활성화는 2단계 프로세스입니다. 먼저 Actions Builder에서 인텐트를 정의해야 합니다. 그런 다음 인텐트를 일치 가능하게 만들려면 인텐트 핸들러에서 expect()를 호출해야 합니다.

클라이언트 측에서 인텐트 핸들러를 구성하고 활성화하려면 다음 단계를 따르세요.

Actions 콘솔에서 프로젝트를 열고 맞춤 인텐트를 추가합니다.
Is this a global intent?(전역 인텐트인가요?)에서 Yes(예)를 선택합니다.

참고: Actions Builder에서 만들고 클라이언트 측에서 트리거하는 인텐트는 전역 인텐트로 구성해야 합니다.
인텐트를 구성하고 저장을 클릭합니다.

다음 스니펫과 같이 웹 앱 로직에서 인텐트의 핸들러를 정의합니다.

/**
* Define handler for intent.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });

/**
* Define handler for intent with an argument.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    const numberOfPeople = matchedIntent.getIntentArg('numberOfPeople');
    console.log(`Intent match handler to reserve a table for ${number of people} was triggered!`);
  });

다음 스니펫에 표시된 대로 expect() 메서드를 호출하여 인텐트 핸들러를 등록합니다.

/**
* Define handler for intent and expect() it.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });
var handler = interactiveCanvas.expect(bookTableIntent);

인텐트 핸들러 사용 중지

인텐트 핸들러를 정의한 후에는 작업에 필요한 인텐트를 활성화하거나 비활성화할 수 있습니다. expect()를 호출하여 인텐트를 활성화하면 새로 생성된 핸들러를 사용 중지하는 데 사용할 수 있는 deleteHandler() 메서드가 있는 객체가 반환됩니다. 인텐트 핸들러 정의는 인텐트가 현재 활성 상태가 아니어도 유지되므로 필요한 경우 인텐트를 다시 활성화할 수 있습니다.

인텐트 핸들러를 사용 중지하려면 다음 스니펫과 같이 인텐트 핸들러에서 deleteHandler()를 호출합니다.

    /**
    * Define handler for intent and expect() it.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    var handler = interactiveCanvas.expect(bookTableIntent);
    
    // Delete the handler for `bookTableIntent`.
    handler.deleteHandler();

다음 스니펫과 같이 expect()를 호출하여 사용 중지된 인텐트 핸들러를 다시 추가할 수 있습니다.

    // Re-add the `bookTableIntent` handler.
    handler = interactiveCanvas.expect(bookTableIntent);

인텐트를 일괄적으로 사용 중지하려면 clearExpectations() 메서드를 사용하여 현재 활성화된 인텐트를 모두 사용 중지할 수 있습니다. 다음 스니펫은 모든 인텐트 핸들러의 기대치를 삭제하는 방법을 보여줍니다.

interactiveCanvas.clearExpectations();

클라이언트에서 슬롯 채우기 처리

Actions Builder 내의 장면에 슬롯 채우기를 추가하는 대신 웹 앱에서 직접 슬롯 채우기를 처리할 수 있습니다.

클라이언트 측에서 슬롯 채우기를 처리하려면 먼저 다음 API 중 하나를 사용하여 슬롯을 만들어야 합니다.

createNumberSlot(callback, hints): 웹 앱 코드에서 번호 슬롯을 정의할 수 있는 메서드입니다. 사용자에게 번호를 요청하는 데 사용됩니다.
createTextSlot(callback, hints): 웹 앱 코드에서 텍스트 슬롯을 정의할 수 있는 메서드입니다. 사용자에게 단어를 요청하는 데 사용됩니다.
createConfirmationSlot(callback, hints): 웹 앱 코드에서 확인 슬롯을 정의할 수 있는 메서드입니다. 사용자에게 확인 (예/아니요) 메시지를 표시하는 데 사용됩니다.
createOptionsSlot(options, callback, hints): 웹 앱 코드에서 옵션 슬롯을 정의할 수 있는 메서드입니다. 사용자에게 사전 정의된 옵션 목록에서 선택하라는 메시지를 표시하는 데 사용됩니다.

슬롯을 만들 때 작업의 자연어 이해 (NLU) 시스템을 개선하는 키워드인 triggerHints을 선택적으로 정의할 수 있습니다. 이러한 키워드는 사용자가 슬롯을 채울 때 말할 수 있는 짧은 단어여야 합니다. 예를 들어 숫자 슬롯의 triggerHints 키워드는 years일 수 있습니다. 사용자가 대화에서 '만 30세입니다'로 연령에 관한 질문에 답장하면 작업에서 사용자가 슬롯을 적절하게 채우고 있다고 인식할 가능성이 높습니다.

슬롯을 만든 후 prompt API를 사용하여 사용자에게 슬롯을 요청하는 메시지를 표시할 수 있습니다.

prompt(tts, slot): 채워져야 할 예상 슬롯을 사용자에게 표시하여 TTS를 출력하는 메서드입니다.

prompt()를 호출하면 채워진 슬롯의 상태 및 값이 포함된 프로미스가 반환됩니다.

번호 슬롯 만들기

전화번호 슬롯을 사용하면 대화 중에 사용자에게 번호를 묻는 메시지를 표시할 수 있습니다. 슬롯 채우기에 관한 자세한 내용은 Actions Builder 문서의 슬롯 채우기 섹션을 참고하세요.

사용자에게 클라이언트 측의 번호 슬롯을 채우라는 메시지를 표시하려면 다음 단계를 따르세요.

createNumberSlot() 메서드를 호출하여 웹 앱 로직에 번호 슬롯을 만듭니다.

/**
 * Create number slot.
 */
const triggerHints = { associatedWords: ['guess number', 'number'] };
const slot = interactiveCanvas.createNumberSlot(
  number => {
    console.log(`Number guessed: ${number}.`);
  }, triggerHints);

다음 스니펫과 같이 prompt() 메서드를 호출하여 사용자에게 슬롯을 요청하는 메시지를 표시하고 반환된 프로미스에서 슬롯 값을 처리합니다.

const promptPromise = interactiveCanvas.prompt(
  { text: 'What number am I thinking of between 1 and 10?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 5, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

텍스트 슬롯 만들기

텍스트 슬롯을 사용하면 대화 중 사용자에게 단어를 묻는 메시지를 표시할 수 있습니다. 슬롯 채우기에 관한 자세한 내용은 Actions Builder 문서의 슬롯 채우기 섹션을 참고하세요.

클라이언트 측에서 텍스트 슬롯을 채우라는 메시지를 표시하려면 다음 단계를 따르세요.

createTextSlot() 메서드를 호출하여 웹 앱 로직에 텍스트 슬롯을 만듭니다.

/**
 * Create text slot.
 */
const triggerHints = { associatedWords: ['favorite color', 'color'] };
const slot = interactiveCanvas.createTextSlot(
  text => {
    console.log(`Favorite color: ${text}.`);
  }, triggerHints);

다음 스니펫과 같이 prompt() 메서드를 호출하여 사용자에게 슬롯을 요청하는 메시지를 표시하고 반환된 프로미스에서 슬롯 값을 처리합니다.

const promptPromise = interactiveCanvas.prompt(
  { text: 'What is your favorite color?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: "red", status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

확인 슬롯 만들기

확인 슬롯을 사용하면 사용자에게 확인을 요청하는 메시지를 표시할 수 있습니다. 사용자는 슬롯을 채우기 위해 '예' 또는 '아니요'라고 응답할 수 있습니다. 슬롯 채우기에 관한 자세한 내용은 Actions Builder 문서의 슬롯 채우기 섹션을 참고하세요.

사용자에게 클라이언트 측에서 확인 슬롯을 채우라는 메시지를 표시하려면 다음 단계를 따르세요.

createConfirmationSlot() 메서드를 호출하여 웹 앱 로직에 확인 슬롯을 만듭니다.

/**
 * Create confirmation slot (boolean).
 */
const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
const slot = interactiveCanvas.createConfirmationSlot(
  yesOrNo => {
    console.log(`Confirmation: ${yesOrNo}`);
  }, triggerHints);

다음 스니펫과 같이 prompt() 메서드를 호출하여 사용자에게 슬롯을 요청하는 메시지를 표시하고 반환된 프로미스에서 슬롯 값을 처리합니다.

const promptPromise = interactiveCanvas.prompt(
  { text: 'Do you agree to the Terms of Service?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: true, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

옵션 슬롯 만들기

옵션 슬롯을 사용하면 사용자에게 사전 정의된 옵션 목록에서 선택하라는 메시지를 표시할 수 있습니다. 슬롯 채우기에 관한 자세한 내용은 Actions Builder 문서의 슬롯 채우기 섹션을 참고하세요.

사용자에게 클라이언트 측의 옵션 슬롯을 채우라는 메시지를 표시하려면 다음 단계를 따르세요.

createOptionsSlot() 메서드를 호출하여 웹 앱 로직에 옵션 슬롯을 만듭니다.

/**
 * Create options slot (list selection).
 */
const triggerHints = { associatedWords: ['select fruit', 'choose fruit'] };
// Define selectable options
const options = [{
  key: 'apple',
  synonyms: ['apple', 'large apple', 'gala apple'],
}, {
  key: 'banana',
  synonyms: ['banana', 'green banana', 'plantain'],
}];
const slot = interactiveCanvas.createOptionsSlot(
  options,
  selectedOption => {
    console.log(`You have selected ${selectedOption} as your fruit.`);
  }, triggerHints);

다음 스니펫과 같이 prompt() 메서드를 호출하여 사용자에게 슬롯을 요청하는 메시지를 표시하고 반환된 프로미스에서 슬롯 값을 처리합니다.

const promptPromise = interactiveCanvas.prompt(
  { text: 'Would you like a banana or an apple?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 'apple', status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

`triggerScene()`

triggerScene() API를 사용하면 클라이언트 측 처리에서 Interactive Canvas 작업의 다른 장면으로 전환할 수 있습니다. triggerScene()를 사용하면 사용자가 웹훅이 필요한 Actions Builder의 시스템 장면에 액세스해야 할 때 클라이언트 측 처리에서 서버 측 처리로 전환할 수도 있습니다. 예를 들어 사용자가 계정을 연결하거나 알림을 받아야 할 때 triggerScene()를 호출할 수 있습니다. 그러면 Canvas 프롬프트를 사용하여 이 장면에서 클라이언트 측 처리로 돌아갈 수 있습니다.

다음 스니펫은 작업에서 triggerScene()를 구현하는 방법을 보여줍니다.

interactiveCanvas.triggerScene('SceneName').then((status) => {
  console.log("sent the request to trigger scene.");
}).catch(e => {
  console.log("Failed to trigger a scene.");
})

클라이언트의 홈 및 사용자 스토리지

웹훅을 사용하여 홈 및 사용자 스토리지 값을 가져오고 설정하는 대신 클라이언트 측 API를 호출하여 웹 앱에서 홈 및 사용자 스토리지를 처리할 수 있습니다. 그러면 웹 앱은 이러한 저장된 값을 여러 세션 (예: 프롬프트 및 조건)에서 사용할 수 있으며 필요한 경우 특정 가족 또는 사용자의 값에 액세스할 수 있습니다. 이러한 API를 사용하면 더 이상 저장소 값을 가져오고 설정하기 위해 웹훅을 호출할 필요가 없으므로 Interactive Canvas 작업에서 지연 시간을 줄일 수 있습니다.

웹 앱의 홈 및 사용자 스토리지는 웹훅의 스토리지와 동일한 일반 원칙을 따릅니다. 홈 및 사용자 스토리지에 관한 자세한 내용은 홈 스토리지 및 사용자 스토리지 문서를 참고하세요.

클라이언트 측 홈 스토리지

홈 스토리지를 사용하면 홈 그래프를 기반으로 가족 사용자의 값을 저장할 수 있으며 이는 가족의 모든 세션에서 공유됩니다. 예를 들어 사용자가 한 가정에서 Interactive Canvas 게임을 플레이하면 게임 점수를 홈 저장소에 저장할 수 있고 다른 가족 구성원은 저장된 점수로 게임을 계속 플레이할 수 있습니다.

작업이 홈 스토리지를 지원하도록 사용 설정하려면 다음 단계를 따르세요.

Actions 콘솔에서 배포 > 디렉터리 정보 > 추가 정보로 이동합니다.
작업에서 홈 스토리지를 사용하나요?에서 예 체크박스를 선택합니다.

웹 앱의 홈 스토리지에 값을 쓰려면 다음 스니펫과 같이 setHomeParam() 메서드를 호출합니다.

interactiveCanvas.setHomeParam('familySize',  10).then(
      result => {
        console.log('Set home param success');
      },
      fail => {
        console.error(err);
      });

웹 앱에서 홈 스토리지의 값을 읽으려면 다음 스니펫과 같이 getHomeParam() 메서드를 호출합니다.

interactiveCanvas.getHomeParam('familySize').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

기존의 모든 홈 스토리지를 지우려면 다음 스니펫과 같이 resetHomeParam() 메서드를 호출합니다.

interactiveCanvas.resetHomeParam();

클라이언트 측 사용자 스토리지

사용자 스토리지를 사용하면 확인된 특정 사용자의 매개변수 값을 여러 세션에 저장할 수 있습니다. 예를 들어 사용자가 게임을 플레이 중인 경우 해당 사용자에 대해 게임 점수를 저장할 수 있습니다. 후속 게임플레이 세션에서는 사용자가 동일한 점수로 게임을 계속 플레이할 수 있습니다.

웹 앱의 사용자 스토리지에 값을 쓰려면 다음 스니펫과 같이 setUserParam() 메서드를 호출합니다.

interactiveCanvas.setUserParam('color',  'blue').then(
      result => {
        console.log('Set user param success');
      },
      err => {
        console.error(err);
      });

웹 앱의 사용자 스토리지에서 값을 읽으려면 다음 스니펫과 같이 getUserParam() 메서드를 호출합니다.

interactiveCanvas.getUserParam('color').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

기존 사용자 저장용량을 모두 지우려면 다음 스니펫과 같이 resetUserParam() 메서드를 호출합니다.

interactiveCanvas.resetUserParam();

`setCanvasState()`

setCanvasState() 메서드를 사용하면 Interactive Canvas 웹 앱에서 처리로 상태 데이터를 전송하고 웹 앱이 상태를 업데이트했음을 어시스턴트에 알릴 수 있습니다. 웹 앱은 업데이트된 상태를 JSON 객체로 보냅니다.

setCanvasState()을 호출해도 인텐트가 호출되지 않습니다. setCanvasState()를 호출한 후 sendTextQuery()가 호출되거나 사용자 쿼리가 대화의 인텐트와 일치하면 이전 대화 차례에서 setCanvasState()로 설정된 데이터를 후속 대화 전환에서 사용할 수 있습니다.

다음 스니펫에서 웹 앱은 setCanvasState()를 사용하여 캔버스 상태 데이터를 설정합니다.

JavaScript

this.action.canvas.setCanvasState({ score: 150 })

웹훅에서 캔버스 상태 참조

처리 코드에서 저장된 캔버스 상태 값을 참조할 수 있습니다. 값을 참조하려면 conv.context.canvas.state.KEY 구문을 사용합니다. 여기서 KEY는 캔버스 상태 값이 설정되었을 때 주어진 키입니다.

예를 들어 이전에 캔버스 상태에 있는 게임의 최고점수 값을 매개변수 score로 저장했다면 처리에서 이 값에 액세스하려면 conv.context.canvas.state.score를 사용하여 이 값을 참조합니다.

Node.js

app.handle('webhook-name', conv => {
    console.log(conv.context.canvas.state.score);
})

프롬프트 내에서 캔버스 상태 참조

프롬프트에서 저장된 캔버스 상태 값을 참조할 수 있습니다. 값을 참조하려면 $canvas.state.KEY 구문을 사용합니다. 여기서 KEY는 캔버스 상태 값이 설정되었을 때 주어진 키입니다.

예를 들어 이전에 캔버스 상태에 있는 게임의 최고점수 값을 score 매개변수로 저장했다면 프롬프트에서 이 값에 액세스하려면 $canvas.state.score를 사용하여 이 값을 참조합니다.

JSON

{
  "candidates": [{
    "first_simple": {
      "variants": [{
        "speech": "Your high score is $canvas.state.score."
      }]
    }
  }]
}

조건 내에서 캔버스 상태 참조

조건에서 저장된 캔버스 상태 값을 참조할 수도 있습니다. 값을 참조하려면 canvas.state.KEY 구문을 사용합니다. 여기서 KEY는 Canvas 상태 값이 설정될 때 주어진 키입니다.

예를 들어 이전에 캔버스 상태에 게임의 최고점수 값을 score 매개변수로 저장했고 이를 조건에서 999 값과 비교하려는 경우 canvas.state.score를 사용하여 조건에 저장된 값을 참조할 수 있습니다. 조건 표현식은 다음과 같습니다.

조건 문법

canvas.state.score >= 999

`sendTextQuery()`

sendTextQuery() 메서드는 대화형 작업에 텍스트 쿼리를 전송하여 프로그래매틱 방식으로 인텐트를 일치시킵니다. 이 샘플은 sendTextQuery()를 사용하여 사용자가 버튼을 클릭할 때 삼각형 회전 게임을 다시 시작합니다. 사용자가 '게임 다시 시작' 버튼을 클릭하면 sendTextQuery()에서 Restart game 인텐트와 일치하는 텍스트 쿼리를 전송하고 프로미스를 반환합니다. 이 프로미스로 인해 인텐트가 트리거되면 SUCCESS, 트리거되지 않으면 BLOCKED이 발생합니다. 다음 스니펫은 인텐트와 일치하고 프로미스의 성공 및 실패 사례를 처리합니다.

JavaScript

…
/**
* Handle game restarts
*/
async handleRestartGame() {
    console.log(`Request in flight`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
    const res = await this.action.canvas.sendTextQuery('Restart game');
    if (res.toUpperCase() !== 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        return;
    }
    console.log(`Request in flight: ${res}`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
}
…

프로미스로 인해 SUCCESS가 반환되면 Restart game 웹훅 핸들러는 Canvas 응답을 웹 앱에 보냅니다.

JavaScript

…
app.handle('restart', conv => {
  conv.add(new Canvas({
    data: {
      command: 'RESTART_GAME'
    }
  }));
});
…

이 Canvas 응답은 onUpdate() 콜백을 트리거하여 아래 RESTART_GAME 코드 스니펫의 코드를 실행합니다.

JavaScript

…
RESTART_GAME: (data) => {
    this.scene.button.texture = this.scene.button.textureButton;
    this.scene.sprite.spin = true;
    this.scene.sprite.tint = 0x00FF00; // green
    this.scene.sprite.rotation = 0;
},
…

서버 측 처리를 사용하여 빌드

웹훅에서 다음 Interactive Canvas API를 구현할 수 있습니다.

전체 화면 모드 사용 설정

기본적으로 Interactive Canvas 웹 앱에는 작업 이름과 함께 화면 상단에 헤더가 포함됩니다. enableFullScreen를 사용하여 헤더를 삭제하고 로드 화면에 표시되는 임시 토스트 메시지로 대체할 수 있습니다. 이를 통해 사용자는 작업과 상호작용하는 동안 전체 화면 환경을 사용할 수 있습니다. 토스트 메시지 메시지에는 작업의 표시 이름, 개발자 이름, 작업 종료 안내가 표시되며, 토스트 메시지 색상은 사용자가 기기에서 테마로 선택하는 항목에 따라 변경됩니다.

사용자가 작업과 자주 상호작용하면 토스트 메시지가 로드 화면에서 일시적으로 표시되지 않습니다. 사용자가 한동안 작업에 참여하지 않으면 작업을 시작할 때 토스트 메시지가 다시 표시됩니다.

웹훅이나 작업 빌더의 정적 프롬프트에서 전체 화면 모드를 사용 설정할 수 있습니다.

웹훅에서 전체 화면 모드를 사용 설정하려면 다음 단계를 따르세요.

세션의 웹훅에서 반환하는 첫 번째 canvas 응답에서 enableFullScreen 필드를 true로 설정합니다. 다음 스니펫은 Node.js 클라이언트 라이브러리를 사용하는 구현의 예입니다.

 const { conversation, Canvas } = require('@assistant/conversation');
 const functions = require('firebase-functions');

 const app = conversation();

 app.handle('invocation_fullscreen', conv => {
   conv.add(new Canvas(
     {
       url: 'https://example-url.com',
       enableFullScreen: true
     }));
 });

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

Actions Builder의 정적 프롬프트에서 전체 화면 모드를 사용 설정하려면 다음 단계를 따르세요.

Actions 콘솔에서 프로젝트를 엽니다.
탐색 메뉴에서 Develop을 클릭하고 첫 번째 canvas 응답이 포함된 프롬프트를 엽니다.

다음 스니펫과 같이 enable_full_screen를 true로 설정합니다.

 {
  "candidates": [
    {
      "canvas": {
        "url": "https://example-url.com",
        "enable_full_screen": true
      }
    }
  ]
}

`continueTtsDuringTouch`

기본적으로 사용자가 Interactive Canvas 작업을 사용하는 동안 화면을 탭하면 TTS가 재생이 중지됩니다. 사용자가 continueTtsDuringTouch로 화면을 터치할 때 TTS가 계속 재생되도록 사용 설정할 수 있습니다. 이 동작은 동일한 세션에서 사용 설정하거나 사용 중지할 수 없습니다.

웹훅 또는 Actions Builder의 정적 프롬프트에서 이 동작을 구현할 수 있습니다.

사용자가 웹훅에서 화면을 탭한 후 TTS가 계속되도록 하려면 다음 단계를 따르세요.

세션의 웹훅에서 반환하는 첫 번째 canvas 응답에서 continueTtsDuringTouch 필드를 true로 설정합니다. 다음 스니펫은 Node.js 클라이언트 라이브러리를 사용하는 구현의 예입니다.

const { conversation, Canvas } = require('@assisant/conversation');
const functions = require('firebase-functions');

const app = conversation();

app.handle('intent-name', conv => {
  conv.add(new Canvas(
    {
      url: 'https://example-url.com',
      continueTtsDuringTouch: true
    }));
});

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

사용자가 작업 빌더의 정적 프롬프트에서 화면을 탭한 후 TTS가 계속되도록 하려면 다음 단계를 따르세요.

Actions 콘솔에서 프로젝트를 엽니다.
탐색 메뉴에서 Develop을 클릭하고 첫 번째 canvas 응답이 포함된 프롬프트를 엽니다.

다음 스니펫과 같이 continue_tts_during_touch를 true로 설정합니다.

  {
   "candidates": [
     {
       "canvas": {
         "url": "https://example-url.com",
         "continue_tts_during_touch": true
       }
     }
   ]
 }