AutoPage Alexa 技能 APL

Question

我正在尝试使用 Alexa 创作工具创建幻灯片放映（2-3 张图像）。我已经设法使用 APL Pager 做到这一点，它一次显示一系列组件。问题是，为了从图像 A 切换到图像 B..C，我必须触摸屏幕并向左/向右滑动。 我想让这件事自动发生，并让 alexa 在一定时间内切换图像，似乎这可以使用APL autopage 来实现，但由于某种原因这不起作用？？？？

我做了什么

• 使用 APL 寻呼机设置 APL
• 在 APL 文档中添加了自动页面
  • 组件 ID
  • 持续时间
  • 延迟

在尝试模拟并直接在 echo show 5 中后，它仍然仅在触摸显示屏时触发。

也试过了：

• 直接在 Alexa 的处理程序中添加标准命令（自动寻呼机），但响应相同。

一些疑惑

当我调用 .addDirective[2] 时，我将命令放在 APLdocument.json[1] 文件中还是直接放在处理程序中是否重要。我看到的唯一区别是我是否希望内容或持续时间是动态的我应该直接把它放在后端代码中（index.js）吧？

[1]

{
 "type": "APL",
 "version": "1.4",
 "settings": {},
 "theme": "light",
 "import": [],
 "resources": [],
 "styles": {},
 "onMount": [],
 "graphics": {},
 "commands": [
  {
   "type": "AutoPage",
   "componentId": "fisrtpager",
   "duration": 1000,
   "delay": 500
  }
],

[2]

handlerInput.responseBuilder.addDirective({
   type: 'Alexa.Presentation.APL.RenderDocument',
   token:'arrugas',
   document: physiolift,
   commands: [{
    "type": "AutoPage",
    "componentId": "fisrtpager",
    "duration": 1000,
    "delay": 500
   }]
  });
}

预期输出

让 Alexa（echo show 5）像轮播一样显示一系列图像（无需触摸屏幕）

我的代码

APL 文档

{
   "type":"APL",
   "version":"1.4",
   "settings":{
      
   },
   "theme":"light",
   "import":[
      
   ],
   "resources":[
      
   ],
   "styles":{
      
   },
   "onMount":[
      
   ],
   "graphics":{
      
   },
   "commands":[
      {
         "type":"AutoPage",
         "componentId":"fisrtpager",
         "duration":1000,
         "delay":500
      }
   ],
   "layouts":{
      
   },
   "mainTemplate":{
      "parameters":[
         "payload"
      ],
      "items":[
         {
            "type":"Pager",
            "id":"fisrtpager",
            "width":"100%",
            "height":"100%",
            "items":[
               {
                  "type":"Image",
                  "width":"100%",
                  "height":"100%",
                  "scale":"best-fill",  
 "source":"https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
                  "align":"center"
               },
               {
                  "type":"Image",
                  "width":"100%",
                  "height":"100%",
                  "source":"https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
                  "scale":"best-fill"
               },
               {
                  "type":"Text",
                  "text":"Just text content shown on page #3",
                  "textAlign":"center"
               }
            ],
            "navigation":"wrap"
         }
      ]
   }
}

index.js

// somewhere inside the intent im invoking
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
   // Create Render Directive.
   handlerInput.responseBuilder.addDirective({
    type: 'Alexa.Presentation.APL.RenderDocument',
    token:'arrugas',
    document: require('./documents/ImageTest.json')
 });
}

speakOutput += ' just saying somthing'
return handlerInput.responseBuilder
.speak(speakOutput)
.reprompt('just saying something else')
.getResponse();

Answer 1

只需在“onMount”事件处理程序中添加命令。这是修改后的代码，完全符合您的需要：

{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"layouts": {},
"mainTemplate": {
    "parameters": [
        "payload"
    ],
    "items": [
        {
            "type": "Pager",
            "id": "fisrtpager",
            "width": "100%",
            "height": "100%",
            "items": [
                {
                    "type": "Image",
                    "width": "100%",
                    "height": "100%",
                    "scale": "best-fill",
                    "source": "https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
                    "align": "center"
                },
                {
                    "type": "Image",
                    "width": "100%",
                    "height": "100%",
                    "source": "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
                    "scale": "best-fill"
                },
                {
                    "type": "Text",
                    "text": "Just text content shown on page #3",
                    "textAlign": "center"
                }
            ],
            "navigation": "none",
            "onMount": [{
                "type": "AutoPage",
                "componentId": "fisrtpager",
                "duration": 1000,
                "delay": 500
            }]
        }
    ]
}

}

Answer 2

要从后端代码动态更新此功能，您可以执行以下操作：

// check if device supports APL
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
   // Create Render Directive.
   handlerInput.responseBuilder.addDirective({
     type: 'Alexa.Presentation.APL.RenderDocument',
     token: "dialogManagementPagerDoc",
     document: require('./PATH-TO/YOUR-APL-FILE.json')
   })
   .addDirective({
   type: "Alexa.Presentation.APL.ExecuteCommands",
   token: "dialogManagementPagerDoc",
   commands: [
    {
      type: "AutoPage",
      componentId: "YOUR_PAGER_ID",
      delay: 1000,
      duration: 5000
     }
   ]
  });
}