如何使用 Amazon Echo show 技巧显示图表

Question

我在圣诞节收到了回声秀。现在我想尝试一下如何自定义它。我创建了多个传感器，其指标存储在 AWS DynamoDB 中。现在我想知道有什么可能性可以显示根据该数据创建的图表。是否可以直接使用 Alexa Presentation Language (APL) 显示图表？是否可以在 APL 中包含 iframe？我没有找到关于该主题的太多信息。也许你能给我指出正确的方向。

非常感谢

Answer 1

不确定这是否是您要查找的内容，但您可以生成 SVG 图形并使用 APL VectorGraphic primitives 渲染这些图形。

您将必须构建一个 custom skill，它在被调用时可以为您的指标提取数据，并生成 APL 来呈现图表。

或者，如果您对可以光栅化的指标有不同的服务器端渲染 API，您可以生成 PNG 并在 Echo Show 上渲染它。

Answer 2

作为参考，我将展示一个能够导航到 URL:

的 nodejs 函数的代码

const MetricsChoiceIntentHandler = {
canHandle(handlerInput) {
    return Alexa.getIntentName(handlerInput.requestEnvelope) === 'MetricsChoiceIntent';
},
handle(handlerInput) {
    const choice = handlerInput.requestEnvelope.request.intent.slots.choice.value;
    const speakOutput = `Alles klar. Auf zu ${choice}`;
    console.log("Deine Wahl: "+choice);
    
    if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
        handlerInput.responseBuilder.addDirective({
            type: 'Alexa.Presentation.APL.RenderDocument',
            document: launchDocument,
            token: 'jip'
        });
        
        var urlToGo="";
        switch(choice){
            case "gaswarner":
                urlToGo="https://www.url1.com";
                break;
            case "temperatur":
                urlToGo="https://www.url2.com"
                break;
        }
        
        handlerInput.responseBuilder.addDirective({
            type: "Alexa.Presentation.APL.ExecuteCommands",
            token: 'jip',
            commands: [{
              type: "OpenURL",
              source: urlToGo
            }]
        });
    }  

    return handlerInput.responseBuilder
        .speak(speakOutput)
        .getResponse();
}
};

有两件重要的事情要提一下：

您必须使用文档进行响应才能导航至 URL。这也可以是空白的虚拟 APL 文档
如果您想导航到 URL，您必须在文档和命令指令上设置令牌（可以是任何您喜欢的东西）。

如何使用 Amazon Echo show 技巧显示图表

How to show charts using Amazon Echo show skill

amazon-web-services

amazon-dynamodb

alexa-skills-kit