AutoPage Alexa技能APL

Question

我正在尝试使用Alexa创作工具创建一个幻灯片放映(2-3张图片)，我已经成功地使用了APL寻呼机，它一次显示一系列组件。事情是这样的，为了从图像A切换到图像B.C，我必须触摸屏幕并左右滑动。我想要自动实现这一点，让alexa在一定的时间内对图像进行处理，这似乎可以使用APL自动检测实现，但由于某些原因，这是行不通的。

我所做的

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

在尝试了模拟之后，直接在回显5中，它仍然只在显示被触摸时触发。

也曾尝试过：

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

一些疑问

如果我将命令放在APLdocument.json1文件中，还是直接放在处理程序中，当我只调用.addDirective2..the差异时，我会看到如果我希望内容或持续时间是动态的，我应该将它直接放在后端代码(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
   }]
  });
}

预期outPut

让Alexa (回显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
     }
   ]
  });
}