jsonintegrationalexa-skills-kitnlualexa-presentation-language

Visualizing a List in APL using HTTP-Endpoint for Alexa


I am currently building an Alexa Skill using my own .NET-Backend, which should return an AlexaTextList with dynamic contents from my service. The request by Alexa looks the following:

{
"version": "1.0",
"session": {
    "new": false,
    "sessionId": "amzn1.echo-api.session.d5f8d9ee-bdd0-4c70-96g9-b468b6b76cd4",
    "application": {
        "applicationId": "amzn1.ask.skill.a07cbc1c-b942-47d6-8fa2-84ebb61f1b15"
    },
    "user": {
        "userId": "amzn1.ask.account.AE5FYATFIAFQF4UKWWBLICFMLP4ZV6KSNQFZJSECBBMKQFEL2UNUD46CDHO67QQPUQ4JZAG53CMBYUWVOWNVXMHRBBUT7ATRZDX6KRV4U2QU5FSHGL6JGOAHWRPS77PSB2N2MLFP2WKCCSC6SPZXVQKY45DLAXOD2OOFQLVGIZ6PCBRWZAEAKZKSMPWI4D36EUGPJDMVURI6BWY"
    }
},
"context": {
    "Viewports": [
        {
            "type": "APL",
            "id": "main",
            "shape": "RECTANGLE",
            "dpi": 160,
            "presentationType": "STANDARD",
            "canRotate": false,
            "configuration": {
                "current": {
                    "mode": "HUB",
                    "video": {
                        "codecs": [
                            "H_264_42",
                            "H_264_41"
                        ]
                    },
                    "size": {
                        "type": "DISCRETE",
                        "pixelWidth": 1024,
                        "pixelHeight": 600
                    }
                }
            }
        }
    ],
    "Viewport": {
        "experiences": [
            {
                "arcMinuteWidth": 246,
                "arcMinuteHeight": 144,
                "canRotate": false,
                "canResize": false
            }
        ],
        "mode": "HUB",
        "shape": "RECTANGLE",
        "pixelWidth": 1024,
        "pixelHeight": 600,
        "dpi": 160,
        "currentPixelWidth": 1024,
        "currentPixelHeight": 600,
        "touch": [
            "SINGLE"
        ],
        "video": {
            "codecs": [
                "H_264_42",
                "H_264_41"
            ]
        }
    },
    "Extensions": {
        "available": {
            "aplext:backstack:10": {}
        }
    },
    "System": {
        "application": {
            "applicationId": "amzn1.ask.skill.a07cbd1c-b982-47d6-8aa1-84eeb61f1b15"
        },
        "user": {
            "userId": "amzn1.ask.account.AE5FYATFIAFQF4UKWWBLICFMLP4ZV6KSNQFZJSECBBMKQFEL2UNUD46CDHO67QQPUQ4JZAG53CMBYUWVOWNVXMHRBBUT7ATRZDX6KRD4U2QU5FSHHL6JGOAHWRPS77QSB4N2MFFP2WKCCSC6SPZXVQKY45DLAXOD2OOFQLVGIZ6PCBRWZAEAKZKSMPWI4D36EUGPJDMVURI6BWY"
        },
        "device": {
            "deviceId": "amzn1.ask.device.AF7IR4TWRMUA5FWIUWMXJ7726QZIXXJJ4CF62N7S3N6Q5O3RTRGORGUCJ2IFWMKO2SYDWWCO4NH2AOGR35QTQSUVVJWJSU54YACLQJW2URDL6NIQMGTN7DGI7LX76B6Y4L45FMWMGBOCVC7JCFJOWQ4WTVYDYENBZUVMJQDZ4VU23MCWAC25Y",
            "supportedInterfaces": {}
        },
        "apiEndpoint": "https://api.eu.amazonalexa.com",
        "apiAccessToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IjEifQ.eyJhdWQiOiJodHRwczovL2FwaS5hbWF6b25hbGV4YS5jb20iLCJpc3MiOiJBbGV4YVNraWxsS2l0Iiwic3ViIjoiYW16bjEuYXNrLnNraWxsLmEwN2NiYzFjLWI5ODItNDdkNi04ZmExLTg0ZWViNjFmMWIxNSIsImV4cCI5MTYxMjM1MTY5MywiaWF0IjoxNjEyMzUxMzkzLCJuYmYiOjE2MTIzNTEzOTMsInByaXZhdGVDbGFpbXMiOnsiY29udGV4dCI6IkFBQUGBQUFBQVFESjl5V3BUNVYwd05XZnNmQk43YzdiS2dFQUFBQUFBQUM4WXQ3ZWNBNU4vUllSdmE1UENyM1dEUlJRQUljOWhodasd3E2Y29qckk3L01zVmFCTjl1aDRhOWd4Zmw4bFF5WEc3QU9MZTlGdjhoWjNBMUhyclpYeDBkM3A1Q2w4U3pyQ0dXQU1rSWI3eVlHL1B0dDYvT05qYW1XTnBTbERMa3FZbG5WdFdzVkdQRC9LTWVqTko5TFZ4dGJ0WTZWLzVlOEhmSkp4UE9YeXB5Q3BaRWluYdRQZ2dlclN0NjlRczZoN1Y3cmtTOTE0MDE4S05HTGlaZGtXTHVPZzdSczluNUFNcTlTV1paK3lBVjhpTE1Va2puallxWi9BdEY2c25uTDBCcU5Xbnd4RUdnRytRL0x6YThJT1d5cWcxYVliRHMwMGtRRHdTd2thTXFpNlNRU0c2aTM4OGVpZG9IOXBTZDFpZ4RabTNRbndpRGpjb1ZHTDNYeVZDYUNTazlUUnZIRVZ6c2V3cHJqWHd3bUVVTWwxV0lxRGgwMGNsN3pPYTdDd3FTOWN0RytEeGxvVCtVIiwiY29uc2VudFRva2VuIjpudWxsLCJkZXZpY2VJZCI6ImFtem4xLmFzay5kZXZpY2UuQUY3SVI0VFdSTVVBNUZXSVVXTVhKNzcyNlFaSVhYSko0Q0Y2Mk43UzNONlE1TzNSVFJHT1JHVUNKMklGV01LTzJTWURXV0NPNE5IMkFPR1IzNVFUUVNVVlZKV0pTVTU0WUFDTFFKVzJVUkRMNk5JUU5OVE43REdJN0xYNzZCNlk0TDQ1Rk1XTUdCT0NWQzdKQ0ZKT1dRNFdUVllEWUVOQlpVVk1KUURaNFZVMjNNQ1dBQzI1WSIsInVzZXJJZCI6ImFtem4xLmFzay5hY2NvdW50LkFFNUZZQVRGSUFGUUY0VUtXV0JMSUNGTUxQNFpWNktTTlFGWkpTRUNCQk1LUUZFTDJVTlVENDZDREhPNjdRUVBVUTRKWkFHNTNDTUJZVVdWT1dOVlhNSFJCQlVUN0FUUlpEWDZLUlY0VTJRVTVGU0hHTDZKR09BSFdSUFM3N1FTQjROMk1GRlAyV0tDQ1NDNlNQWlhWUUtZNDVETEFYT0QyT09GUUxWR0laNlBDQlJXWkFFQUtaS1NNUFdJNEQzNkVVR1BKRE1WVVJJNkJXWSJ9fQ.Yvl9fFy22oe429RMpfUp7fJskz0sJDa_YKSKqprIKGsHK9lUrHe4vhNKEANKa-gVpyXdAR-uHZbfutuTW6qDy_1eVdIUdr-4ye-b2MTUbp8sJ9ag2zfR_sgQEkGEbqF5L9dGtpaWS06zivuV8gxWUkwOMihNrmv6WP8YC_Qkj_FfQ-OTcJ-2q0BpiDtURX8Ai8JW0c1qhSglJHXlqVqCLpyuDWR0QhJHzS0n5H0opoyNUAF3w4nibxPxV9jmo4jdM8Fqgz3I1rvKPa2nTsrGPJfLDFxPsxtNuUGwxbWglJu4nkzg--f2cTgZE5vmKsaJoUzt5IB3c9H07IPhwC82Iw"
    }
},
"request": {
    "type": "IntentRequest",
    "requestId": "amzn1.echo-api.request.ff4e8edd-f343-4842-82bb-79eb1c1f5c22",
    "locale": "en-GB",
    "timestamp": "2021-02-03T11:23:13Z",
    "intent": {
        "name": "RESOLVE_CONFLICT",
        "confirmationStatus": "NONE",
        "slots": {
            
        }
    },
    "dialogState": "COMPLETED"
}

}

My service is then responding:

{
"version": "1.0",
"response": {
    "outputSpeech": {
        "type": "PlainText",
        "text": "Please select a cat."
    },
    "directives": [
        {
            "type": "Alexa.Presentation.APL.RenderDocument",
            "token": "resolve_action",
            "document": {
                "type": "APL",
                "version": "1.4",
                "theme": "dark",
                "import": [
                    {
                        "name": "alexa-layouts",
                        "version": "1.2.0"
                    }
                ],
                "resources": [],
                "onMount": [],
                "mainTemplate": {
                    "parameters": [
                        "payload"
                    ],
                    "items": [
                        {
                            "type": "AlexaTextList",
                            "id": "peopleList",
                            "headerTitle": "${payload.textListData.title}",
                            "headerBackButton": false,
                            "headerAttributionImage": "${payload.textListData.logoUrl}",
                            "backgroundBlur": false,
                            "backgroundColorOverlay": true,
                            "listItems": "${payload.textListData.listItems}"
                        }
                    ]
                }
            },
            "datasources": {
                "textListData": {
                    "type": "object",
                    "objectId": "textList",
                    "title": "Meeting Assistant | Resolve Conflict",
                    "listItems": [
                        {
                            "primaryText": "Mr. Cat",
                            "imageAlignment": "center",
                            "imageBlurredBackground": true,
                            "imageScale": "best-fit",
                            "imageThumbnailSource": "https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg",
                            "primaryAction": [
                                {
                                    "type": "SetValue",
                                    "componentId": "peopleList",
                                    "property": "headerTitle",
                                    "value": "Click"
                                }
                            ]
                        }
                    ],
                    "logoUrl": "https://w3-mediapool.hm.edu/mediapool/media/fk10/fk10_lokal/02_aktuelles/02_news/wintersemester_2020/langmann_3/FirstSpirit_1606121272258Akoa-logo-gradient-AKOA_Sunrise_35cm.png"
                }
            }
        }
    ],
    "shouldEndSession": false
}

}

Instead of a beautiful visualisation in my testing environment in the Alexa Console, I retrieve the following:

"error": {
    "type": "INVALID_RESPONSE",
    "message": "An exception occurred while dispatching the request to the skill."
}

As this scenario is very difficult to debug (if you have any suggestions for this problem as well, please let me know), it took me an eternity to this point, but I am just not able to resolve the issue. The error message is quite generic, it just cannot parse it properly. But according to the documentation, it is supposed to be fine (https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-interface.html#renderdocument-directive).

Interestingly, this only happens, if I am making use of the directive field in the response model. Basic card-responses are working fine, so I assume that the problem must be somewhere in the directive... Do you have any ideas how to proceed on this? Or did I miss something?

Thank you very much in advance!


Solution

  • I figured out what is the problem. I was using different HTTP 2xx-Status Codes, while Alexa only accepts 200 (https://developer.amazon.com/en-US/docs/alexa/custom-skills/request-and-response-json-reference.html#http-header-1).

    My problem therefore was not related to my request data or any settings in the developer console, but my HTTP-Header. It is a little confusing for me, because I was actually returning success status codes that could have been accepted, but apparently Alexa has strict requirements for that. I was not aware of this. Thanks to everyone, who was trying to help me out here and was validating my JSON-response.