Dialogflow의 Webhook에서 Google Assistant에 기본 카드 응답을 반환합니다.

Google 어시스턴트는 응답 메시지만을 반환하는 Simple Responses 외에도 스마트폰 화면에 이미지와 URL을 연결한 응답 메시지를 반환하는 Rich Responses라는 유형의 응답을 제공합니다.

자세한 내용은 공식 문서를 참조하십시오.
Responses  |  Actions on Google  |  Google Developers

기본 카드의 경우 이와 같이 응답 메시지 외에 사이트 정보를 표시하여 링크 대상으로 안내할 수 있습니다.


Dialogflow Webhook에서 이러한 응답을 만들 때 크게 두 가지 방법이 있습니다.

Firebase에서 제공하는 Node 라이브러리 사용

스스로 Json의 응답을 만들어 반환

이번에는 (Firebase를 사용하지 않았기 때문에) 후자의 수단을 선택하고 싶었습니다만, Dialogflow의 문서에는 별로 설명이 쓰여지지 않고 조금 고생했기 때문에 정리합니다.

Fulfillment  |  Dialogflow

Simple Responses의 경우는 다음과 같이 speech 와 displayText 에 메세지를 넣어 돌려주면 됩니다.

response.setHeader("Content-Type", "application/json")
response.send(JSON.stringify({'speech':"これはテストです",'displayText':"これはテストです"})

그러나 Rich Responses 쪽은 상기 Dialogflow의 문서에 의하면 서식 첨부 메세지라고 하는 것이 아마 data 에 Json 객체를 만들어 돌려주어야 합니다만, 별로 설명이 없습니다. Dialogflow는 Slack이나 Faebook과도 연계할 수 있는 구조이므로 각각의 서비스에 맞춘다고 하는 것이라고는 생각합니다만, 포럼에서 잘 되지 않는다고 하는 것으로 논의되고 있는 것 같습니다.

Google Assistant rich message responses - Integrations - Dialogflow (API.AI) Forums

이 포럼의 내용을 참고로 아래의 설명으로 Basic Card를 만들 수 있었습니다. 위에서 소개한 Action on Google 공식 문서 의 Basic Card 곳에서 쓰여진 샘플 코드를 적용하면 다음과 같이 됩니다.

 response.setHeader("Content-Type", "application/json")
  response.send(
    JSON.stringify({
      "speech": "This is a simple response for a carousel",
      "data": {
        "google": {
          "expectUserResponse": true,
          "richResponse": {
            "items": [
              {
                "simpleResponse": {
                  "textToSpeech": "This is a simple response for a carousel"
                }
              },
              {
                "basicCard": {
                  "title": "Math & prime numbers",
                  "formattedText": "42 is an even composite number. It\n    is composed of three distinct prime numbers multiplied together. It\n    has a total of eight divisors. 42 is an abundant number, because the\n    sum of its proper divisors 54 is greater than itself. To count from\n    1 to 42 would take you about twenty-one…",
                  "image": {
                    "url": "https://example.google.com/42.png",
                    "accessibilityText": "Image alternate text"
                  },
                  "buttons": [
                    {
                      "title": "Read more",
                      "openUrlAction": {
                        "url": "https://example.google.com/mathandprimes"
                      }
                    }
                  ]
                }
              }
            ],
            "suggestions": []
          }
        },
        "possibleIntents": [
          {
            "intent": "actions.intent.TEXT"
          }
        ]
      }
    })
  );

Simple Responses의 경우와 달리 displayText는 지정하지 않고 data 안에 google.richResponse.items라는 배열을 만들고 그 안에 displayText simpleResponse 를 만들고 basicCard 를 추가합니다. List Selector 와 같은 다른 종류의 응답도 같은 방법으로 실현할 수 있다고 생각됩니다 (시험하지 않지만).



포럼에 쓰여진 이 댓글을 참고했습니다.