views/test.ejs

<!DOCTYPE html>
<html ng-app="alexa" ng-controller="AlexaController">
  <head>
    <title>Alexa Tester</title>

    <script type="text/javascript" src="../angular.min.js"></script>
    <script type="text/javascript" src="../templates.json"></script>

    <script>
      function clone(o) {
        return JSON.parse(JSON.stringify(o));
      }

      // For Angular
      var app = angular.module('alexa', []);
      app.controller('AlexaController', function($scope, $http) {
        $scope.schema = <%-schema%>;
        $scope.request = {};
        $scope.response = null;
        $scope.requestType = null;
        $scope.session = {};
        $scope.intent = null;
        $scope.locale = 'en-US';
        $scope.accessToken = null;
        $scope.apiEndpoint = 'https://api.amazonalexa.com/';
        $scope.consentToken = null;
        $scope.deviceId = null;

        $scope.changetype = function() {
          if ($scope.requestType !== '') {
            $scope.request = clone($scope.templates[$scope.requestType]);
            $scope.request.session.attributes = $scope.session;
            $scope.request.request.timestamp = new Date();

            $scope.changelocale();
            $scope.changeAccessToken();
            $scope.changeConsentToken();
            $scope.changeDeviceId();

          } else {
            $scope.request = {};
          }

          $scope.intent = null;
        };

        $scope.changelocale = function() {
          $scope.request.request.locale = $scope.locale;
          $scope.request.context.System.apiEndpoint = $scope.apiEndpoint;

          if ($scope.locale === 'en-GB' || $scope.locale === 'de-DE') {
            $scope.request.context.System.apiEndpoint = 'https://api.eu.amazonalexa.com/';
          } else {
            $scope.request.context.System.apiEndpoint = 'https://api.amazonalexa.com/';
          }
        };

        $scope.changeAccessToken = function() {

          var accessToken = null;

          if ($scope.accessToken) {
            accessToken = $scope.accessToken;
          }

          $scope.request.context.System.user.accessToken = accessToken;
          $scope.request.session.user.accessToken = accessToken;
        };

        $scope.changeConsentToken = function() {

          var consentToken = null;

          if ($scope.consentToken) {
            consentToken = $scope.consentToken;
          }

          $scope.request.context.System.user.permissions.consentToken = consentToken;
          $scope.request.session.user.permissions.consentToken = consentToken;
        };

        $scope.changeDeviceId = function() {

          var deviceId = null;

          if ($scope.deviceId) {
            deviceId = $scope.deviceId;
          }

          $scope.request.context.System.device.deviceId = deviceId;
        };

        $scope.changeintent = function() {
          $scope.request = clone($scope.templates['intent']);
          $scope.request.session.attributes = $scope.session;
          $scope.request.request.intent.slots = {};
          $scope.request.request.intent.name = $scope.intent;
          $scope.request.request.locale = $scope.locale;
        }

        $scope.post = function() {
          if (Object.keys($scope.request).length !== 0) {
            $scope.request.request.timestamp = new Date();
            $http.post(location.href, $scope.request)
              .then(function onSuccess(response) {
                $scope.response = response.data;
                // Copy session variables
                if ($scope.response && $scope.response.sessionAttributes) {
                  $scope.session = $scope.response.sessionAttributes;
                  $scope.request.session.attributes = $scope.session;
                }
              })
              .catch(function onError(error) {
                alert(error.message);
              });
            } else {
              alert("Error: Cannot send an empty request object. Please select a request type.");
            }
        }

        $scope.getIntent = function() {
          try {
            var intents = $scope.schema.intents;
            for (var i = 0; i < intents.length; i++) {
              var intent = intents[i];
              if (intent.intent == $scope.request.request.intent.name) {
                return intent;
              }
            };
            return null;
          } catch(e) { return null; }
        };

        $scope.templates = templates;

        // Extract the applicationId if it exists and update the templates
        var applicationId = "<%= app.id || "" %>";
        if (applicationId) {
          $scope.templates.launch.session.application.applicationId = applicationId;
          $scope.templates.intent.session.application.applicationId = applicationId;
          $scope.templates.session_end.session.application.applicationId = applicationId;
        }
      });
    </script>

    <style>
    .code {
      white-space:pre;
      font-family:monospace;
      border:1px solid #666;
      display:inline-block;
      padding:5px;
      min-width:400px;
      min-height:25px;
    }
    </style>
  </head>

  <body>
    This is a simple testing utility to POST to your endpoint and simulate an Alexa request

    <h2>Request</h2>
    <div>
      Type:
      <select id="template" ng-model="requestType" ng-change="changetype()">
        <option value=""></option>
        <option value="launch">LaunchRequest</option>
        <option value="intent">IntentRequest</option>
        <option value="session_end">SessionEndedRequest</option>
      </select>

      <div id="deviceId">
        Device ID:
        <input id="deviceId_input" type="text" value="" ng-model="deviceId" ng-change="changeDeviceId()" />
      </div>

      <div id="accessToken">
        Access Token:
        <input id="accessToken_input" type="text" value="" ng-model="accessToken" ng-change="changeAccessToken()" />
      </div>

      <div id="consentToken">
        Consent Token:
        <input id="consentToken_input" type="text" value="" ng-model="consentToken" ng-change="changeConsentToken()" />
      </div>

      <div id="intent" ng-show="requestType=='intent'">
        Intent:
        <select id="intent_select" ng-change="changeintent()" ng-model="intent">
          <option value="">
          <% for (name in app.intents) { %>
            <option value="<%=name%>"><%=name%>
          <% } %>
        </select>
      </div>

      <div id="locale">
        Locale:
        <select id="locale" ng-model="locale" ng-change="changelocale()">
          <option value="en-US">en-US</option>
          <option value="en-GB">en-GB</option>
          <option value="de-DE">de-DE</option>
          <option value="ja-JP">ja-JP</option>
        </select>
      </div>

      <div id="slots" ng-show="getIntent().slots.length">
        Slot Values: <br>
        <div id="slotvalues" style="margin:5px;border:1px solid #ccc;display:inline-block;">
          <div ng-repeat="slot in getIntent().slots">
            {{slot.name}} : <input ng-change="request.request.intent.slots[slot.name].name=slot.name" ng-model="request.request.intent.slots[slot.name].value" style="width:100px;">
          </div>
        </div>
      </div>
    </div>

    <div>
      <div id="request" class="code" contenteditable="true">{{request|json}}</div>
    </div>
    <div>
      <input type="button" value="Send Request" ng-click="post()">
    </div>

    <h2>Session</h2>
    <div ng-show="session">
      <div id="session" class="code">{{session|json}}</div>
    </div>

    <h2>Response</h2>
    <div ng-show="response">
      <div id="response" class="code">{{response|json}}</div>
    </div>

    <h2>Schema</h2>
    <div>
      <div id="schema" class="code">{{schema|json}}</div>
    </div>

    <h2>Utterances</h2>
    <div>
      <div id="utterances" class="code" style="max-height:500px;overflow:auto;"><%=utterances%></div>
    </div>
  </body>
</html>