Alexa Навыки Kit: Как добавить изображение в стандартные карты с помощью JS

Question

Я здание от примеров, приведенных в alexa-skills-kit-js/samples/

, но они не имеют где-либо добавить изображение на карту ответа.

response.askWithCard(speechOutput, repromptOutput, cardTitle, cardContent);

Где изображение идти? CardContent обычно является строкой. Я просто превращаю его в объект, содержащий изображение ...?

Answer 1

К сожалению, это выглядит так: «Простой» жестко запрограммирован, а для малых и больших URL-адресов изображений нужны «стандартные» карты. Вот код из

https://github.com/amzn/alexa-skills-kit-js/blob/master/samples/historyBuff/src/AlexaSkill.js#L142

if (options.cardTitle && options.cardContent) { 
     alexaResponse.card = { 
      type: "Simple", 
      title: options.cardTitle, 
      content: options.cardContent 
     }; 
    } 

Вы должны изменить вашу локальную копию AlexaSkill.js, чтобы добавить функциональность.

Вот использование API из Колба-Ask библиотеки (шахты), показывающие, как работают карты:

https://johnwheeler.org/flask-ask/responses.html#displaying-cards-in-the-alexa-smartphone-tablet-app

Answer 2

Я последовал reply на подобный вопрос на форумах поддержки разработчиков Amazon от Марка Стрингер:

Я боролся с этим сам и теперь его работаю. Если вы используете образец модуля AlexaSkill.js, который предоставляет Amazon, то вам нужно добавить пару разделов, чтобы иметь дело с карточками изображений.

В разделе buildSpeechletResponse добавить это после подобного типа "Simple" раздел:

if (options.cardSmallImageURL && options.cardLargeImageURL) { 
     alexaResponse.card = { 
      type: "Standard", 
      title: options.cardTitle, 
      text: options.cardContent, 
      image: { 
       smallImageUrl: options.cardSmallImageURL, 
       largeImageUrl: options.cardLargeImageURL 
      } 
     }; 
    } 

Затем после определения askWithCard далее вниз добавить это:

askWithPictureCard: function(speechOutput, repromptSpeech, cardTitle, cardContent, smallImageURL, largeImageURL) { 
     this._context.succeed(buildSpeechletResponse({ 
      session: this._session, 
      output: speechOutput, 
      reprompt: repromptSpeech, 
      cardTitle: cardTitle, 
      cardContent: cardContent, 
      cardSmallImageURL: smallImageURL, 
      cardLargeImageURL: largeImageURL, 
      shouldEndSession: false 
     })); 

Теперь вы можете назвать это, вероятно, используя переменные, а не константы I тестировал с использованием;

response.askWithPictureCard («Это выход речи», «Это reprompt», «это название карты», «Это текст карты, обратите внимание на поле называется текст не cardContent», 'https://s3.amazonaws.com/thisisthesmallpictureurl-small.jpg', 'https://s3.amazonaws.com/thisisthebigpictureurl-big.jpg');

Затем выполните аналогичный процесс, чтобы добавить функцию tellWithPictureCard.

Там одна маленькая опечатка в коде там, где Стрингер положить CRD, когда он имел в виду карты который я скорректированный в моей пасте выше. Кроме того, этот подход работал для меня.