Home

Welcome To Ask-Sdk-Jsx-For-Apl

Introduction

This project ask-sdk-jsx-for-apl is a React-based APL templating framework that allows developers to define APL document within the code. By using the React-style JSX/TSX file format, developers can include Vesper components as XML-style definition for the APL and shorten the APL definition code length, making the development more manageable.

Why should you use Ask-Sdk-Jsx-For-Apl?

Ask-Sdk-Jsx-For-Apl has many benefits over standard JSON-based APL templates, such as the following aspects.

1. Code-First Approach

Ask-Sdk-Jsx-For-Apl uses React-based components to define each APL document. By using JSX files to include XML-based APL document declaration and defining the document in an encapsulated React component, skill developers can simply import and include the component into the response as a natural Javascript/Typescript code. Following code shows how a Ask-Sdk-Jsx-For-Apl APL document can naturally fit into the LaunchIntent handler.

// MainSkill.js

import * as Alexa from 'ask-sdk';
import { LaunchIntentHandler } from './handlers/LaunchIntentHandler';

const builder = Alexa.SkillBuilders.custom();

const handler = builder.addRequestHandlers(
    new LaunchIntentHandler()
).lambda();
module.exports = { handler };

// handlers/LaunchIntentHandler.jsx

import * as Alexa from 'ask-sdk';
import * as React from "react";
import { LaunchAplDocument } from './apl/LaunchAplDocument';
import { AplDocument } from 'ask-sdk-jsx-for-apl';

class LaunchIntentHandler {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    }

    handle(handlerInput) {
        const responseBuilder = handlerInput.responseBuilder;
        return responseBuilder
            .addDirective(new AplDocument(<LaunchAplDocument />).getDirective())
            .speak("Welcome to my first Vesper skill")
            .getResponse();
    }
};
module.exports = { LaunchIntentHandler };

// apl/LaunchAplDocument.jsx

import * as React from 'react';
import { APL, MainTemplate, Frame, Container, Text } from 'ask-sdk-jsx-for-apl';

export class LaunchAplDocument extends React.Component {
    constructor(props) {
        super(props);
        this.launchMessage = 'Welcome to my first ask-sdk-jsx-for-apl skill!';
    }
    render() {
      return (
        <APL theme="dark">
          <MainTemplate>
            <Frame
              width="100vw"
              height="100vh"
              backgroundColor="rgb(22,147,165)"
            >
              <Container
                alignItems="center"
                justifyContent="spaceAround"
              >
                <Text
                  text={this.launchMessage}
                  fontSize="50px"
                  color="rgb(251,184,41)"
                />
              </Container>
            </Frame>
          </MainTemplate>
        </APL>
      );
    }
}