How to create a home card in Alexa

Question

I'm trying to develop my first skill and I do not find proper information on how to create a home card

https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/providing-home-cards-for-the-amazon-alexa-app#creating-a-basic-home-card-to-display-text

says I had to add it to the JSON response, I do not understand where exactly the JSON response is?

Any help is much appreciated.

Answer 1

From Amazon tutorial:

When using the Java library:

Create a SimpleCard object.

Call the object’s setTitle() and setContent() methods to set the title and content.

Pass the card object to either

SpeechletResponse.newTellResponse() 
   or 
SpeechletResponse.newAskResponse() 

to get a SpeechletResponse that includes the card.

So, basically in Java solution place data from json to Java function calls in code.

More complete example about SpechletResponse is in HelloWorldSpeechlet.

You can take a ready repository as a base solution for your Lambda function (above code is part of one) and modify the source as you like.

You'll create a skill with intents in Developer portal, create Lambda function eg. in Java (at least Node.js and Python also possible) and put it running in AWS and map together with the skill in Developer Portal.

After that comes the place of jsoning: the Testing phase. You push json data to service and verify it in json.

Side note: In card case the response should contain card, so placing json in this context is little bit miss leading. You only make Alexa service generate it.

Java version of alexa skills, containing all necessary code you'll need:

https://github.com/amzn/alexa-skills-kit-java/blob/master/README.md

Answer 2

Section Creating a Basic Home Card to Display Text

To create a simple card, include the card property in your JSON response: Set the type to Simple.

• Set the title and content properties to the text to display.
• Use either “\r\n” or “\n” within the content to insert line breaks.

 {
   "version": "1.0",
   "response": {
     "outputSpeech": {"type":"PlainText","text":"Text to speak back to the user."},
     "card": {
       "type": "Simple",
       "title": "Example of the Card Title",
       "content": "Example of card content. This card has just plain text content.\nThe content is formatted with line breaks to improve readability."
     }
   }
 }

The above snippet in grey is JSON snippet. Note the "card": text in the snippet.

Answer 3

In the code it could look like this if you're using node.js

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
    },
    handle(handlerInput) {
        var reprompt = '';
        const speakOutput = 'Protokollaufnahme gestartet.';
        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(reprompt)
            .withSimpleCard('Protokollaufnahme', speakOutput)
            .withShouldEndSession(false)
            .getResponse();
    },
};

The card is initialized in the response like this:

.withSimpleCard('title', 'content')

With this it is automatically added to the json output