기본사항을 배웠으므로 이제 캔버스 관련 메서드를 사용하여 작업을 개선하고 맞춤설정할 수 있습니다. 작업 프로젝트를 만들 때 클라이언트 처리 모델 또는 서버 측 처리 모델을 사용하여 작업을 개발할 수 있습니다. 이러한 옵션에 관한 자세한 내용은 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(예)를 선택합니다.
인텐트를 구성하고 저장을 클릭합니다.
다음 스니펫과 같이 웹 앱 로직에서 인텐트의 핸들러를 정의합니다.
/** * 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
를 사용하여 헤더를 삭제하고 로드 화면에 표시되는 임시 토스트 메시지로 대체할 수 있습니다. 이를 통해 사용자는 작업과 상호작용하는 동안 전체 화면 환경을 사용할 수 있습니다. 토스트 메시지 메시지에는 작업의 표시 이름, 개발자 이름, 작업 종료 안내가 표시되며, 토스트 메시지 색상은 사용자가 기기에서 테마로 선택하는 항목에 따라 변경됩니다.
![](https://developers.google.cn/static/assistant/interactivecanvas/images/toast-message.png?hl=ko)
사용자가 작업과 자주 상호작용하면 토스트 메시지가 로드 화면에서 일시적으로 표시되지 않습니다. 사용자가 한동안 작업에 참여하지 않으면 작업을 시작할 때 토스트 메시지가 다시 표시됩니다.
웹훅이나 작업 빌더의 정적 프롬프트에서 전체 화면 모드를 사용 설정할 수 있습니다.
웹훅에서 전체 화면 모드를 사용 설정하려면 다음 단계를 따르세요.
세션의 웹훅에서 반환하는 첫 번째
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 } } ] }