Alexa Skill Getter

alexa-skill-getter.markdown

Alexa Skill Getter

A Pen by Oliver Britton on CodePen.

License.

index.html

<div id="app">
  <section v-if="!showResults" class="initial section">
    <div class="container">
      <h1 class="title">Get Alexa skill</h1>
      <h2 class="subtitle">
        You can use this page to get the Alexa skill you need. Please enter the information below.
      </h2>
       <div class="notification is-warning">
        Remember to remove smart quotes! If you click the "Open Windows" button at the bottom, there is a smart quote remover in there.
      </div>
      <div class="field">
        <div class="control">
          <input v-model="password" class="input is-primary" id="password-input" type="password" placeholder="Password">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <input v-model="skillName" class="input is-info" id="skill-name" type="text" placeholder="Skill Name">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <input v-model="logoUrl" class="input is-info" id="skill-logo-url" type="text" placeholder="Skill Logo URL">
        </div>
      </div>
      <textarea v-model="facts" class="textarea" id="facts" placeholder="Facts"></textarea>

      <br>

      <a v-on:click="sendData" class="button is-primary">Get the damn skill</a>
      <a class="button is-danger" @click="openWindows()">Open up windows</a>
      <a class="button pink" @click="openJamesWindows()" style="background: pink;">Just for James</a>
        
    </div>

  </section>
  <section v-if="showResults" class="values section">
    <div class="container">
      <h1 class="title">Here you go...</h1>
      <h2 class="subtitle">
        These should be the details for your Alexa skill. (If you entered the wrong password, you won't be able to download the code for the skill)
      </h2>
      <div class="notification is-info">
        New feature my dudes! You don't have to copy it yourself now, you can just double-click.
      </div>
      <textarea v-model="skillModel" class="textarea" id="skillModel" placeholder="Skill Model" @dblclick="copyToClipboard(skillModel)">{ skillModel }</textarea>

      <br>

      <div class="field">
        <div class="control">
          <input class="input is-primary" type="text" placeholder="Short Description" v-bind:value="skillShortDescription" @dblclick="copyToClipboard(skillShortDescription)">
        </div>
      </div>

      <div class="field">
        <div class="control">
          <input class="input is-primary" type="text" placeholder="Long Description" v-bind:value="skillLongDescription" @dblclick="copyToClipboard(skillLongDescription)">
        </div>
      </div>

      <br>

      <div class="field">
        <div class="control">
          <input class="input is-secondary" type="text" placeholder="Example 1" v-bind:value="example1" @dblclick="copyToClipboard(example1)">
        </div>
      </div>

      <div class="field">
        <div class="control">
          <input class="input is-secondary" type="text" placeholder="Example 2" v-bind:value="example2" @dblclick="copyToClipboard(example2)">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <input class="input is-secondary" type="text" placeholder="Example 3" v-bind:value="example3" @dblclick="copyToClipboard(example3)">
        </div>
      </div>
      
      </br>
      
      <div class="field">
        <div class="control">
          <input class="input is-secondary" type="text" placeholder="Testing instructions" v-bind:value="testing" @dblclick="copyToClipboard(testing)">
        </div>
      </div>

      <a class="button is-warning" v-bind:href="skillLink" target="_blank">Click this fricking button to download</a>

      <a class="button is-link" onClick="window.location.reload(true);">Make another god dammit</a>

      <a class="button is-danger" @click="openWindows()">Open up windows</a>

    </div>

  </section>
</div>

script.js

function encode(str, removeQuotes = true) {
  if (removeQuotes) {
    return btoa(unescape(removeSmartQuotes(str))).replace("/", "_");
  } else {
    return btoa(unescape(str)).replace("/", "_");
  }
}

function removeSmartQuotes(str) {
  return str
  .replace(/[\u2018\u2019]/g, "'")
  .replace(/[\u201C\u201D]/g, '"');
}

var app = new Vue({
  el: "#app",
  data: {
    password: "",
    skillName: "",
    logoUrl: "",
    facts: "",

    skillModel: "123",
    skillLink: "",

    skillShortDescription: "",
    skillLongDescription: "",

    example1: "",
    example2: "",
    example3: "",
    
    testing: "",

    showResults: false
  },
  methods: {
    sendData: function() {
      let password = encode(this.password);
      let skillName = encode(this.skillName);
      let logoUrl = encode(this.logoUrl);
      let facts = encode(this.facts);

      let requestUrl =
        "https://apis.ollybritton.com/alexa-skills/get_model/" + skillName;

      app.skillLink =
        "https://apis.ollybritton.com/alexa-skills/get_skill/" +
        password +
        "/" +
        skillName +
        "/" +
        logoUrl +
        "/" +
        facts;

      axios
        .get(requestUrl)
        .then(function(response) {
          console.log(response);
          app.skillModel = JSON.stringify(response.data);
          app.showResults = true;
        })
        .catch(function(error) {
          console.log(error);
          console.log(error.config.url)
        });

      app.skillShortDescription =
        "An Alexa Skill to generate random " + app.skillName;
      app.skillLongDescription = `This Alexa skill provides you with the luxury of receiving ${
        app.skillName
      } whenever you like, simply by asking Alexa. This is an incredible skill and your life will be better because of it. This skill is also compatible with Alexa devices that have screens.`;

      app.example1 = `Alexa, tell ${app.skillName} I want a fact.`;
      app.example2 = `Alexa, ask ${app.skillName} for a fact.`;
      app.example3 = `Alexa, tell ${app.skillName} to give me a fact.`;
      
      app.testing = `Just ask ${app.skillName} for a fact ;)`
    },
    openWindows: function() {
      links = [
       "https://dan.hersam.com/tools/smart-quotes.html", "https://console.aws.amazon.com/console/home",
        "https://developer.amazon.com/alexa/console/ask",
        "https://login.live.com/login.srf",
        "https://sheets.google.com",
        "https://www.dropbox.com/login"
      ];

      for (link of links) {
        window.open(link);
      }
    },
    openJamesWindows: function() {
      links = [
       "https://ovh.com/auth",      "https://console.aws.amazon.com/console/home",
        "http://livid3d.com/webmail",
        "https://developer.amazon.com/alexa"
      ];

      for (link of links) {
        window.open(link);
      }
    },
    copyToClipboard: function(str) {
      const el = document.createElement('textarea');
      el.value = str;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

style.css

.pink
  background-color: pink

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />