Actions On Goolge의 Browse Carousel 사용법

이게 뭐야?

Actions On Google의 Browse Carousel을 구현했을 때의 지견입니다.

Browse Carousel이란?

최근 업데이트로 Google Assistant의 Rich responses에 Browse Carousel이라는 것이 추가되었습니다.
New creative ways to build with Actions on Google | Google Developer

일반 회전 목마와 달리 회전 목마 타일을 탭하여 웹 링크를 볼 수 있습니다.
자세한 사양은 공식을 문서를 봐 주세요.
Browsing carousel | Actioins On Google

Client Library 업데이트

AoG의 Node.js Client Library를 사용하는 경우 ver1.10.0 이상으로 업데이트가 필요합니다.
Client Library가 BrowseCarousel을 지원하는 것은 ver1.10.0 때문입니다.
Release Version 1.10.0 · actions-on-google/actions-on-google-nodejs

구현 예

askWithCarousel 보다는 ask 에서 좋은 것 같습니다.

const response = app.buildRichResponse()
    .addSimpleResponse('Browsing Carouselです');

const carouselResponse = app.buildBrowseCarousel();

for (let i = 1; i <= 10; i++ ) {
    carouselResponse.addItems(app.buildBrowseItem()
        .setTitle('Title' + i)
        .setDescription('Description' + i)
        .setImage('https://www.gstatic.com/mobilesdk/170329_assistant/assistant_color_96dp.png', 'Alt-text')
        .setOpenUrlAction('https://www.google.co.jp/'));
}

response.addBrowseCarousel(carouselResponse);
app.ask(response);

Tile Consistency

타일의 구성 요소는 다음 요소를 설정할 수 있지만 모든 타일은 동일한 구성이어야합니다.

Title (required)

Image (optional)

Description (optional)

Footer (optional)

API에서 가져온 값을 설정하려고 할 때 일부 값이 없고 그대로 설정하면 다음과 같은 오류가 발생합니다.

"debugInfo": "expected_inputs[0].input_prompt.rich_initial_prompt.items[1].carousel_browse: 'carousel_browse' requires all items to contain an image or all items to not contain an image.."

tile의 수는 2~10

회전 목마에 설정할 수 있는 타일 수는 최소 2개, 최대 10개입니다.

타일이 하나만 있으면 다음과 같은 오류가 발생합니다.
표시하는 아이템이 한 때는 BasicCard를 사용하는 것이 좋을까 생각합니다.

"debugInfo": "expected_inputs[0].input_prompt.rich_initial_prompt.items[1].carousel_browse: 'carousel_browse' requires at least 2 items.."

GoogleHome은 지원되지 않음

GoogleHome에서 Browse Carousel이 포함된 응답을 받으면 다음 오류가 발생합니다.

"debugInfo": "expected_inputs[0].input_prompt.rich_initial_prompt: 'carousel_browse' is only supported for clients that support a web browser.."

Google Home을 향해 응답을 보낼 때 Capability를 확인하여 최적의 응답을 보내야 합니다.
Response branching
SurfaceCapabilities

// WebURLを開けるSurfaceかどうか判定
let hasWebBroswer = app.hasSurfaceCapability(app.SurfaceCapabilities.WEB_BROWSER);

보충

debugInfo는 Simulator의 DEBUG 탭에서 볼 수 있습니다. 편리합니다.

Appendix

Class: BrowseCarousel  |  Actions on Google  |  Google Developers
Actions on Google: Conversation Component Sample