Cannot send BasicCard - Actions on Google simulator

[sonlexqt]

Using the actions-on-google-nodejs v2 library, I setup the webhook to send a BasicCard:

const generateCardItem = ({ text, parkObject }) => {
  const { title, subtitle, thumbnail } = parkObject;
  // Create a basic card
  return new BasicCard({
    text,
    subtitle,
    title,
    image: new Image({
      url: `${API_ROOT_URL}${thumbnail}`,
      alt: 'Image alternate text',
    }),
  });
};
app.intent(INTENT.PARK_BY_NAME, (conv, params) => {
  const { Parks } = params;
  return axios.get(DIALOGFLOW_API_URL, {
    params: {
      applicationid: APPLICATION_ID,
      actions: 'search-park-by-name',
      parks: Parks,
    },
  }).then((response) => {
    const { data } = response;
    const { speech, text, card } = data;
    const parkObject = card[0];
    const cardItem = generateCardItem({
      text: text || speech,
      parkObject,
    });
    conv.ask('basicCard');
    conv.ask(cardItem);
  }).catch((error) => {
    console.error('ERROR');
    console.error(error);
  });
});

When I test with Actions on Google simulator, this is shown: (the simple response is shown and the BasicCard isn't). When I check the console output this is what I got:

2018-04-23T07:38:40.971857+00:00 app[web.1]: Response {
2018-04-23T07:38:40.971878+00:00 app[web.1]:   "data": {
2018-04-23T07:38:40.971880+00:00 app[web.1]:     "google": {
2018-04-23T07:38:40.971882+00:00 app[web.1]:       "expectUserResponse": true,
2018-04-23T07:38:40.971884+00:00 app[web.1]:       "richResponse": {
2018-04-23T07:38:40.971886+00:00 app[web.1]:         "items": [
2018-04-23T07:38:40.971888+00:00 app[web.1]:           {
2018-04-23T07:38:40.971889+00:00 app[web.1]:             "simpleResponse": {
2018-04-23T07:38:40.971891+00:00 app[web.1]:               "textToSpeech": "basicCard"
2018-04-23T07:38:40.971892+00:00 app[web.1]:             }
2018-04-23T07:38:40.971894+00:00 app[web.1]:           },
2018-04-23T07:38:40.971896+00:00 app[web.1]:           {
2018-04-23T07:38:40.971897+00:00 app[web.1]:             "basicCard": {
2018-04-23T07:38:40.971899+00:00 app[web.1]:               "title": "KINSMEN PARK",
2018-04-23T07:38:40.971901+00:00 app[web.1]:               "subtitle": "Has 6 amenities",
2018-04-23T07:38:40.971903+00:00 app[web.1]:               "formattedText": "KINSMEN PARK has 6 amenities: 1 Accessible Swing, 1 Baseball Diamond, 1 Basketball, 1 Playground, 1 Soccer Field, 1 Spray Pad, . What other park would you like to know more about?",
2018-04-23T07:38:40.971905+00:00 app[web.1]:               "image": {
2018-04-23T07:38:40.971907+00:00 app[web.1]:                 "url": "https://www.image-url.com/Content/Upload/1ac37f71-a39e-4f04-9628-d02bf2a694b6/facility_photos_thumbnail/2571/196af28ae1204d47b4bc9211bcaf7847.JPG",
2018-04-23T07:38:40.971912+00:00 app[web.1]:                 "accessibilityText": "Image alternate text"
2018-04-23T07:38:40.971914+00:00 app[web.1]:               }
2018-04-23T07:38:40.971916+00:00 app[web.1]:             }
2018-04-23T07:38:40.971918+00:00 app[web.1]:           }
2018-04-23T07:38:40.971919+00:00 app[web.1]:         ]
2018-04-23T07:38:40.971921+00:00 app[web.1]:       },
2018-04-23T07:38:40.971922+00:00 app[web.1]:       "userStorage": "{\"data\":{}}"
2018-04-23T07:38:40.971924+00:00 app[web.1]:     }
2018-04-23T07:38:40.971926+00:00 app[web.1]:   },
2018-04-23T07:38:40.971927+00:00 app[web.1]:   "contextOut": [
2018-04-23T07:38:40.971929+00:00 app[web.1]:     {
2018-04-23T07:38:40.971931+00:00 app[web.1]:       "name": "_actions_on_google",
2018-04-23T07:38:40.971932+00:00 app[web.1]:       "lifespan": 99,
2018-04-23T07:38:40.971934+00:00 app[web.1]:       "parameters": {
2018-04-23T07:38:40.971936+00:00 app[web.1]:         "data": "{}"
2018-04-23T07:38:40.971937+00:00 app[web.1]:       }
2018-04-23T07:38:40.971939+00:00 app[web.1]:     }
2018-04-23T07:38:40.971941+00:00 app[web.1]:   ]
2018-04-23T07:38:40.971942+00:00 app[web.1]: }
2018-04-23T07:38:40.971950+00:00 app[web.1]: Status 200

I think the BasicCard is successfully sent but somehow Actions on Google simulator didn't show the card. Any suggestions ?

[Edo78]

You have to call ask only one time for intent, every others time are ignored. So calling ask with the string basicCard you send a SimpleResponse to dialogflow and the BasicCard is basically discarded.

Try to remove the conv.ask('basicCard');

[Fleker]

Can you provide a larger code snippet?

[sonlexqt]

@Edo78 are you sure ? Because in the sample code, we can call conv.ask multiple times. Have you tried it ? @Fleker thanks, I updated my issue with more code snippet.

[Canain]

@sonlexqt are you simulating using the Phone or Speaker surface? Visual responses are only available on screen surfaces (so only the Phone mode will work).

It should be selected like this on the simulator:

[sonlexqt]

@Canain I'm simulating using the Phone surface: I think the surface is not a problem because I can show Carousel using my bot, just the BasicCard doesn't appear.

[Canain]

Hm... That's really weird, because your code should work but the logs you posted show that only the basic card is sent and not the SimpleResponse too which should look like:

{
  "items": [
    {
      "simpleResponse": {
        "textToSpeech": "basicCard"
      }
    },
    {
      "basicCard": {
        "title": "DRUMQUIN PARK",
        "subtitle": "Has 4 amenities",
        "formattedText": "DRUMQUIN PARK has 4 amenities: 2 Baseball Diamonds, 1 BMX, 1 Playground, 1 Soccer Field, . What other park would you like to know more about?",
        "image": {
          "url": "https://www.miltonparks.com/Content/Upload/1ac37f71-a39e-4f04-9628-d02bf2a694b6/facility_photos_thumbnail/2564/d8c1a3feb1e94393ba9a8f46239f2cda.jpg",
          "accessibilityText": "Image alternate text"
        }
      }
    }
  ]
}

The response log you posted also should actually error out on the simulator as a SimpleResponse is required.

This might be a caching issue. Can you verify the code is deploy and corresponds to the same logs? Also, on the simulator, if you click on a certain response, you can go to the RESPONSE tab to get more information.

[ghost]

@sonlexqt Can you post working sample for the Carousel because I have not been able to get it to work