Instantly share code, notes, and snippets.

Embed
What would you like to do?
apl_template_export.json --> documentAPL.json + datasourceAPL.json
{
"document": {
"type": "APL",
"version": "1.0",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"resources": [],
"styles": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"when": "${viewport.shape == 'round'}",
"type": "Container",
"height": "100vh",
"direction": "column",
"items": [
{
"type": "Image",
"source": "${payload.imageDeFondoRound}",
"scale": "best-fill",
"width": "100vw",
"height": "100vh",
"position": "absolute",
"overlayColor": "rgba(0, 0, 0, 0.5)"
},
{
"type": "AlexaHeader",
"headerTitle": "${payload.title}"
},
{
"type": "Text",
"text": "Texto central solo visible en displays redondos",
"width": "100vw",
"paddingLeft": "10vw",
"paddingRight": "10vw",
"textAlign": "center",
"textAlignVertical": "center"
},
{
"type": "AlexaFooter",
"hintText": "${payload.pie}",
"paddingTop": "50vh"
}
]
},
{
"when": "${viewport.shape != 'round'}",
"type": "Container",
"height": "100vh",
"direction": "column",
"items": [
{
"type": "Image",
"source": "${payload.imageDeFondoFull}",
"scale": "best-fill",
"width": "100vw",
"height": "100vh",
"position": "absolute",
"overlayColor": "rgba(0, 0, 0, 0.5)"
},
{
"type": "AlexaHeader",
"headerTitle": "${payload.title}"
},
{
"type": "Container",
"height": "50vh",
"direction": "row",
"paddingTop": "20vh",
"items": [
{
"type": "TouchWrapper",
"width": "50vw",
"item": {
"type": "Frame",
"borderRadius": 25,
"height": "100%",
"backgroundColor": "${payload.color1}",
"item": {
"type": "Text",
"text": "${payload.texto1}",
"width": "100%",
"height": "100%",
"textAlign": "center",
"textAlignVertical": "center"
}
},
"onPress": {
"type": "SendEvent",
"arguments": [
"botonPulsado",
"A"
]
}
},
{
"type": "TouchWrapper",
"width": "50vw",
"item": {
"type": "Frame",
"borderRadius": 25,
"height": "100%",
"backgroundColor": "${payload.color2}",
"item": {
"type": "Text",
"text": "${payload.texto2}",
"width": "100%",
"height": "100%",
"textAlign": "center",
"textAlignVertical": "center"
}
},
"onPress": {
"type": "SendEvent",
"arguments": [
"botonPulsado",
"B"
]
}
}
]
},
{
"type": "AlexaFooter",
"hintText": "${payload.pie}",
"paddingTop": "20vh"
}
]
}
]
}
},
"datasources": {
"title": "skill de ejemplo",
"pie": "Di Alexa, 1, 2, 3...",
"imageDeFondoFull": "https://javiercampos.es/wp-content/uploads/2018/03/danubio-1.jpg",
"imageDeFondoRound": "https://javiercampos.es/wp-content/uploads/2018/03/danubio-1-300x225.jpg",
"color1": "tomato",
"color2": "lime",
"texto1": "Opción 1",
"texto2": "Opción 2"
}
}
{
"title": "skill de ejemplo",
"pie": "Di Alexa, 1, 2, 3...",
"imageDeFondoFull": "https://javiercampos.es/wp-content/uploads/2018/03/danubio-1.jpg",
"imageDeFondoRound": "https://javiercampos.es/wp-content/uploads/2018/03/danubio-1-300x225.jpg",
"color1": "tomato",
"color2": "lime",
"texto1": "Opción 1",
"texto2": "Opción 2"
}
{
"type": "APL",
"version": "1.0",
"theme": "dark",
"import": [{
"name": "alexa-layouts",
"version": "1.0.0"
}],
"resources": [],
"styles": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [{
"when": "${viewport.shape == 'round'}",
"type": "Container",
"height": "100vh",
"direction": "column",
"items": [{
"type": "Image",
"source": "${payload.imageDeFondoRound}",
"scale": "best-fill",
"width": "100vw",
"height": "100vh",
"position": "absolute",
"overlayColor": "rgba(0, 0, 0, 0.5)"
},
{
"type": "AlexaHeader",
"headerTitle": "${payload.title}"
},
{
"type": "Text",
"text": "Texto central solo visible en displays redondos",
"width": "100vw",
"paddingLeft": "10vw",
"paddingRight": "10vw",
"textAlign": "center",
"textAlignVertical": "center"
},
{
"type": "AlexaFooter",
"hintText": "${payload.pie}",
"paddingTop": "50vh"
}
]
},
{
"when": "${viewport.shape != 'round'}",
"type": "Container",
"height": "100vh",
"direction": "column",
"items": [{
"type": "Image",
"source": "${payload.imageDeFondoFull}",
"scale": "best-fill",
"width": "100vw",
"height": "100vh",
"position": "absolute",
"overlayColor": "rgba(0, 0, 0, 0.5)"
},
{
"type": "AlexaHeader",
"headerTitle": "${payload.title}"
},
{
"type": "Container",
"height": "50vh",
"direction": "row",
"paddingTop": "20vh",
"items": [{
"type": "TouchWrapper",
"width": "50vw",
"item": {
"type": "Frame",
"borderRadius": 25,
"height": "100%",
"backgroundColor": "${payload.color1}",
"item": {
"type": "Text",
"text": "${payload.texto1}",
"width": "100%",
"height": "100%",
"textAlign": "center",
"textAlignVertical": "center"
}
},
"onPress": {
"type": "SendEvent",
"arguments": [
"botonPulsado",
"A"
]
}
},
{
"type": "TouchWrapper",
"width": "50vw",
"item": {
"type": "Frame",
"borderRadius": 25,
"height": "100%",
"backgroundColor": "${payload.color2}",
"item": {
"type": "Text",
"text": "${payload.texto2}",
"width": "100%",
"height": "100%",
"textAlign": "center",
"textAlignVertical": "center"
}
},
"onPress": {
"type": "SendEvent",
"arguments": [
"botonPulsado",
"B"
]
}
}
]
},
{
"type": "AlexaFooter",
"hintText": "${payload.pie}",
"paddingTop": "20vh"
}
]
}
]
}
}
if (handlerInput.requestEnvelope.context.System.device.supportedInterfaces['Alexa.Presentation.APL']) { /* si hay soporte APL... */
let myDocument = require('./documentAPL.json');
let myDatasource = require('./datasourceAPL');
myDatasource.title= "título de ejemplo";
// etc... editamos las propiedades del datasource
return handlerInput.responseBuilder
.speak(TEXTO_MENSAJE)
.reprompt(TEXTO_MENSAJE)
.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
version: '1.0',
document: myDocument,
datasources: myDatasource
})
.getResponse();
}
else{ /* Si no hay soporte APL en el dispositivo que hace la request... */
return handlerInput.responseBuilder
.speak(TEXTO_MENSAJE)
.reprompt(TEXTO_MENSAJE)
.getResponse();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment