개요

Google I/O 2018에서 발표된 Table Card(Google Assistant의 응답)를 시도했으므로 구현 방법을 소개하고 싶습니다. Dialogflow의 웹 콘솔을 사용한 구현 방법(정적)과 Fulfillment를 사용한 구현 방법(동적)을 소개하고 싶습니다.

주의
Table Card는 현재 미리보기 버전이며 Actions on Google 시뮬레이터에서만 테스트할 수 있습니다.

Table Card

Table Card를 사용하면 행렬의 표를 응답으로 사용자에게 반환할 수 있습니다(스포츠 순위, 선거 결과, 항공편 등의 정보를 깔끔하게 표시할 수 있을 것 같습니다). Table Card는 행렬 각각 최대 3개까지 정의할 수 있습니다.

운영 환경

Table Card에는 다음과 같은 Surfaces가 포함되어 있어야 합니다.

actions.capability.SCREEN_OUTPUT

Dialogflow 준비

Agent 만들기

DEFAULT LANGUAGE

English - en

DEFAULT TIME ZONE

(GMT-8:00) America/Los_Angeles

Dialogflow 웹 콘솔에서 Table Card 구현

Intent 만들기

Training phrases

Show me table card

Responses > GOOGLE ASSISTANT > ADD RESPONSES > Simple Response

Simple Response는 필수이므로 반드시 정의한다

나는 Here you go!라고 했다

Responses > GOOGLE ASSISTANT > ADD RESPONSES > Table Card

행렬에 원하는 문자를 넣습니다

시뮬레이터로 확인

Surface를 Smart Display로 설정한 다음 Show me table card를 입력합니다.



표시할 수 있었다!

Fulfillment로 구현

이번에는 Firebase functions를 사용하여 구현합니다. Firebase functions 사용법은 여기을 참조하십시오.

프로젝트 준비

$ firebase init

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
? Do you want to install dependencies with npm now? Yes

index.js

'use strict';

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

const app = dialogflow();

app.intent('TableCard', (conv) => {
  conv.ask('Here you go!');
  conv.ask(new Table({
    dividers: true,
    columns: ['header 1', 'header 2', 'header 3'],
    rows: [
      ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
      ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
    ],
  }));
});

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

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "actions-on-google": "^2.1.1",
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "private": true
}

actions-on-google 버전은 항상 2.1.1 이상이어야합니다.

배포

$ firebase deploy

Function URL: https://us-central1-flatfishtest.cloudfunctions.net/xxx

dialogflow 작업

Fulfillment Webhook을 활성화하고 Function URL을 설정

Intent 준비

이름

TableCard

Training phrases

Show me table card

하단의 Enable Webhook을 체크한다

Fulfillment > Enable Webhook call for this inetent

시뮬레이터로 확인

움직였다

TableCard를 사용자 정의!

TableCard는 이미지나 버튼 등 다양한 요소를 추가하거나 문자를 좌우 중앙 정렬을 할 수 있습니다. 자세한 내용은 여기을 참조하십시오.

index.js

'use strict';

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

const app = dialogflow();

app.intent('TableCard', (conv) => {
  conv.ask('Here you go!');
  conv.ask(new Table({
    title: 'Title',
    subtitle: 'subtitle',
    image: new Image({
      url: 'https://your-server/apple.png',
      alt: 'Apple'
    }),
    dividers: true,
    columns: ['header 1', 'header 2', 'header 3'],
    rows: [
      ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
    ],
    buttons: new Button({
      title: 'GitHub',
      url: 'https://github.com/actions-on-google'
    }),
  }));
});

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

다양한 주문을 받아서 만들 수 있었다.

Table Card의 인상

시뮬레이터에서 미리 볼 때 TableCard는 옆 화면에 적합한 인상을 가졌습니다. Table Card는 향후 출시 예정인 Smart Display의 주력 UI가 될지도 모릅니다.