diff --git a/AI/aiaFiles/alexaHelloWorld/Alexa_Hello_World.aia b/AI/aiaFiles/alexaHelloWorld/Alexa_Hello_World.aia new file mode 100644 index 00000000..681c2b74 Binary files /dev/null and b/AI/aiaFiles/alexaHelloWorld/Alexa_Hello_World.aia differ diff --git a/AI/aiaFiles/alexaHelloWorld/Alexa_Hello_World.asc b/AI/aiaFiles/alexaHelloWorld/Alexa_Hello_World.asc new file mode 100644 index 00000000..581bd1c4 --- /dev/null +++ b/AI/aiaFiles/alexaHelloWorld/Alexa_Hello_World.asc @@ -0,0 +1 @@ +UEsDBBQACAgIAKiltlAAAAAAAAAAAAAAAAA7AAAAc3JjL2FwcGludmVudG9yL2FpX3RhYnVuc2h2aWsvQWxleGFfSGVsbG9fV29ybGQvU2NyZWVuMS5ia3kDAFBLBwgAAAAAAgAAAAAAAABQSwMEFAAICAgAqKW2UAAAAAAAAAAAAAAAADsAAABzcmMvYXBwaW52ZW50b3IvYWlfdGFidW5zaHZpay9BbGV4YV9IZWxsb19Xb3JsZC9TY3JlZW4xLnNjbVOu4VLxCvb346pWSiwtyQgN8lGyio7VUYpMDEstKs7Mz1OyUjIyMFPSUQrOLy1KTgVy3fKLcoH8gKL8gtSikszUYiWraiUVv8RckGRwclFqap4hUF4lpLIASbkKknnmQH5oaWYKkG0AZIZkluSg6nUsKICa55iTWpEY75Gak5MfH55flJOiVFvLVaMMAFBLBwhXobbujQAAALcAAABQSwMEFAAICAgAqKW2UAAAAAAAAAAAAAAAACYAAAB5b3VuZ2FuZHJvaWRwcm9qZWN0L3Byb2plY3QucHJvcGVydGllc3VQu07EMBDs90MoTay7k6BwAUjW1YBEGW2cFVnOsaNdJzy+Hid3FAjRzUMzu5oROTmcJk4LpZLFILcFuznpsPDJ3EX6wPZIMeb2JUvszVMQomQh4Ujujw2oSkWdMddnBJpnCbQKKgG6mWO/kg3AQqKcU8g9OfvDtmZrGpiVNOaApYrOY1QC/Oes8henV/dIOuWkvBDokN8ja1HUN635Z5lrPKxdHcqlrgxU6x5i/ZUDhBzrAJPwiPLpro7e7/zB3h9+G6ZHOZ3dZudv/cXFEOqAm+79vrmx8A1QSwcI7cFUTNkAAABbAQAAUEsBAhQAFAAICAgAqKW2UAAAAAACAAAAAAAAADsAAAAAAAAAAAAAAAAAAAAAAHNyYy9hcHBpbnZlbnRvci9haV90YWJ1bnNodmlrL0FsZXhhX0hlbGxvX1dvcmxkL1NjcmVlbjEuYmt5UEsBAhQAFAAICAgAqKW2UFehtu6NAAAAtwAAADsAAAAAAAAAAAAAAAAAawAAAHNyYy9hcHBpbnZlbnRvci9haV90YWJ1bnNodmlrL0FsZXhhX0hlbGxvX1dvcmxkL1NjcmVlbjEuc2NtUEsBAhQAFAAICAgAqKW2UO3BVEzZAAAAWwEAACYAAAAAAAAAAAAAAAAAYQEAAHlvdW5nYW5kcm9pZHByb2plY3QvcHJvamVjdC5wcm9wZXJ0aWVzUEsFBgAAAAADAAMAJgEAAI4CAAAbAEJ1aWx0IHdpdGggTUlUIEFwcCBJbnZlbnRvcg== \ No newline at end of file diff --git a/AI/aiaFiles/convertToAsc.py b/AI/aiaFiles/convertToAsc.py index a47603f6..5f746827 100644 --- a/AI/aiaFiles/convertToAsc.py +++ b/AI/aiaFiles/convertToAsc.py @@ -1,7 +1,7 @@ import sys import base64 if len(sys.argv) < 2: - print ('use: convertToAsc.py WhatIsIt') + print ('use: convertToAsc.py Alexa_Hello_World') sys.exit(2) s = sys.argv[1] #s = 'LogoWParamsTemplate' diff --git a/AI/images/alexa-helloworld/add_skill.png b/AI/images/alexa-helloworld/add_skill.png new file mode 100644 index 00000000..f97bb3b3 Binary files /dev/null and b/AI/images/alexa-helloworld/add_skill.png differ diff --git a/AI/images/alexa-helloworld/amazon_login.png b/AI/images/alexa-helloworld/amazon_login.png new file mode 100644 index 00000000..29464357 Binary files /dev/null and b/AI/images/alexa-helloworld/amazon_login.png differ diff --git a/AI/images/alexa-helloworld/blocks1.png b/AI/images/alexa-helloworld/blocks1.png new file mode 100644 index 00000000..ba5d15b8 Binary files /dev/null and b/AI/images/alexa-helloworld/blocks1.png differ diff --git a/AI/images/alexa-helloworld/blocks2.png b/AI/images/alexa-helloworld/blocks2.png new file mode 100644 index 00000000..6085ccca Binary files /dev/null and b/AI/images/alexa-helloworld/blocks2.png differ diff --git a/AI/images/alexa-helloworld/blocks3.png b/AI/images/alexa-helloworld/blocks3.png new file mode 100644 index 00000000..2975a084 Binary files /dev/null and b/AI/images/alexa-helloworld/blocks3.png differ diff --git a/AI/images/alexa-helloworld/blocks4.png b/AI/images/alexa-helloworld/blocks4.png new file mode 100644 index 00000000..45d09c4b Binary files /dev/null and b/AI/images/alexa-helloworld/blocks4.png differ diff --git a/AI/images/alexa-helloworld/build_tab.png b/AI/images/alexa-helloworld/build_tab.png new file mode 100644 index 00000000..be84d439 Binary files /dev/null and b/AI/images/alexa-helloworld/build_tab.png differ diff --git a/AI/images/alexa-helloworld/define_intent.gif b/AI/images/alexa-helloworld/define_intent.gif new file mode 100644 index 00000000..037a8af0 Binary files /dev/null and b/AI/images/alexa-helloworld/define_intent.gif differ diff --git a/AI/images/alexa-helloworld/define_invocation.gif b/AI/images/alexa-helloworld/define_invocation.gif new file mode 100644 index 00000000..1dc6beac Binary files /dev/null and b/AI/images/alexa-helloworld/define_invocation.gif differ diff --git a/AI/images/alexa-helloworld/dev_console.png b/AI/images/alexa-helloworld/dev_console.png new file mode 100644 index 00000000..9869202d Binary files /dev/null and b/AI/images/alexa-helloworld/dev_console.png differ diff --git a/AI/images/alexa-helloworld/find_skill.png b/AI/images/alexa-helloworld/find_skill.png new file mode 100644 index 00000000..3930491f Binary files /dev/null and b/AI/images/alexa-helloworld/find_skill.png differ diff --git a/AI/images/alexa-helloworld/goto_blocks.png b/AI/images/alexa-helloworld/goto_blocks.png new file mode 100644 index 00000000..e9f36830 Binary files /dev/null and b/AI/images/alexa-helloworld/goto_blocks.png differ diff --git a/AI/images/alexa-helloworld/goto_designer.png b/AI/images/alexa-helloworld/goto_designer.png new file mode 100644 index 00000000..23a4c7da Binary files /dev/null and b/AI/images/alexa-helloworld/goto_designer.png differ diff --git a/AI/images/alexa-helloworld/init_block.gif b/AI/images/alexa-helloworld/init_block.gif new file mode 100644 index 00000000..7de9fbc1 Binary files /dev/null and b/AI/images/alexa-helloworld/init_block.gif differ diff --git a/AI/images/alexa-helloworld/intent_spoken.gif b/AI/images/alexa-helloworld/intent_spoken.gif new file mode 100644 index 00000000..93ba5455 Binary files /dev/null and b/AI/images/alexa-helloworld/intent_spoken.gif differ diff --git a/AI/images/alexa-helloworld/login_alexa.png b/AI/images/alexa-helloworld/login_alexa.png new file mode 100644 index 00000000..c57e7689 Binary files /dev/null and b/AI/images/alexa-helloworld/login_alexa.png differ diff --git a/AI/images/alexa-helloworld/name_skill.png b/AI/images/alexa-helloworld/name_skill.png new file mode 100644 index 00000000..bd1e17b4 Binary files /dev/null and b/AI/images/alexa-helloworld/name_skill.png differ diff --git a/AI/images/alexa-helloworld/notice_skill.png b/AI/images/alexa-helloworld/notice_skill.png new file mode 100644 index 00000000..54a67cf9 Binary files /dev/null and b/AI/images/alexa-helloworld/notice_skill.png differ diff --git a/AI/images/alexa-helloworld/notice_voice.png b/AI/images/alexa-helloworld/notice_voice.png new file mode 100644 index 00000000..a56c2ea4 Binary files /dev/null and b/AI/images/alexa-helloworld/notice_voice.png differ diff --git a/AI/images/alexa-helloworld/say_block.gif b/AI/images/alexa-helloworld/say_block.gif new file mode 100644 index 00000000..00e0e4a6 Binary files /dev/null and b/AI/images/alexa-helloworld/say_block.gif differ diff --git a/AI/images/alexa-helloworld/send_updates.png b/AI/images/alexa-helloworld/send_updates.png new file mode 100644 index 00000000..f239a30e Binary files /dev/null and b/AI/images/alexa-helloworld/send_updates.png differ diff --git a/AI/images/alexa-helloworld/start_testing.gif b/AI/images/alexa-helloworld/start_testing.gif new file mode 100644 index 00000000..bb7947fd Binary files /dev/null and b/AI/images/alexa-helloworld/start_testing.gif differ diff --git a/AI/images/alexa-helloworld/test_skill.png b/AI/images/alexa-helloworld/test_skill.png new file mode 100644 index 00000000..ecd65e40 Binary files /dev/null and b/AI/images/alexa-helloworld/test_skill.png differ diff --git a/AI/images/alexa-helloworld/test_tab.png b/AI/images/alexa-helloworld/test_tab.png new file mode 100644 index 00000000..458ca4f0 Binary files /dev/null and b/AI/images/alexa-helloworld/test_tab.png differ diff --git a/AI/images/alexa-helloworld/test_tab2.png b/AI/images/alexa-helloworld/test_tab2.png new file mode 100644 index 00000000..e0115b39 Binary files /dev/null and b/AI/images/alexa-helloworld/test_tab2.png differ diff --git a/AI/images/alexa-helloworld/text_block.gif b/AI/images/alexa-helloworld/text_block.gif new file mode 100644 index 00000000..4f9e6dab Binary files /dev/null and b/AI/images/alexa-helloworld/text_block.gif differ diff --git a/AI/images/alexa-helloworld/update_done.png b/AI/images/alexa-helloworld/update_done.png new file mode 100644 index 00000000..9cd663f0 Binary files /dev/null and b/AI/images/alexa-helloworld/update_done.png differ diff --git a/AI/tutorials/alexa-helloworld.md b/AI/tutorials/alexa-helloworld.md new file mode 100644 index 00000000..8cb53d08 --- /dev/null +++ b/AI/tutorials/alexa-helloworld.md @@ -0,0 +1,261 @@ +--- +title: Hello World +layout: tutorial +howtos: true +yrmedia: false +--- + +# Connect Your App + +
+ +# Hello World: A Simple Alexa Skill App + +## Introduction + +This is the first tutorial to introduce you to making your own Skills that you can use with Alexa! + + + +An Alexa Skill is a **voice-based application** for Amazon Alexa-enabled devices, such as Amazon Echo Dots or Alexa-enabled smartphones. +Don't worry about developing and testing Alexa Skills if you don't have your own Alexa-enabled device. We'll show you how to use the Amazon Developer page to test your skills using a virtual Alexa that can be run on any device! + + + +For this skill, we will teach our Alexa to say "Hello world" when we ask it to, using several different phrases we might say to get Alexa to accomplish the same task - saying hello. + +## Create an Amazon Developper Account + +If you haven’t already, follow the instructions in the *Creating an Amazon Developer Account* to create a free **Amazon Developer Account**. +This will allow you to save any Alexa Skills to your account and use your skills on any Alexa-enabled devices that you have linked to your Amazon account. + +## Add a Skill + +In the Designer Toolbar at the top of the screen, you will see a button labeled **“Add Skill …”**. + +![Add a skill](../images/alexa-helloworld/add_skill.png){:.enlargeImage} + +Click on the **Add Skill** button and enter the name of your skill. For this demonstration, we will name this skill *“HelloWorld”*. + +![Name the skill](../images/alexa-helloworld/name_skill.png){:.enlargeImage} + +## Login to Your Amazon Account + +You will now be taken to a new Designer Page for the Conversational AI Interface. +Under the image of the Amazon Echo Dot, there should be a button labeled **Login to Amazon**. +Click that button and enter your Amazon Developer Account information into the external pop-up. + +![Login to Alexa](../images/alexa-helloworld/login_alexa.png){:.enlargeImage} + +*If this window does not appear, check if your browser has blocked a pop up and allow the pop-up.* + +## Open the Blocks Editor + +After you’ve successfully signed in, switch to the **Blocks Editor** by clicking the **Blocks** button in the top right. + +![Switch to blocks editor](../images/alexa-helloworld/goto_blocks.png){:.enlargeImage} + +Notice that in the menu on the right, there is a new built-in drawer labeled **Voice**. + +![Notice the Voice drawer](../images/alexa-helloworld/notice_voice.png){:.enlargeImage} + +There’s also a component below it with the same name as your skill. This is your **Skill Component**. + +![Notice the drawer for your Skill](../images/alexa-helloworld/notice_skill.png){:.enlargeImage} + +## Add the Initialize Block + +Click on the **Skill Component** at the bottom of the menu. This will open a blocks drawer. Drag the **Initialize Block** onto the workspace. + +![Drag the initialze skill block](../images/alexa-helloworld/init_block.gif){:.enlargeImage} + +Everything inside this block will tell Alexa the structure of the Alexa Skill and all of the phrases it should be listening for. + +## Add the Invocation Name + +The first thing we want to teach our skill to listen out for is its **Invocation Name**. + + + +Just like how every mobile app needs to have a name, so does our custom Alexa Skill. An Invocation Name is just the name of the Skill that we are making, and is used to “invoke” our skill. The structure of any command you tell Alexa is: + +
“Alexa, tell (Invocation Name) to ...”
+ +The invocation name is what will help Alexa tell which Skill it needs to use, so make sure that every skill you make has a unique name. +For example, if we decided to make the Invocation name of a custom skill “Codi bee” we would say: + +
“Alexa, tell Codi bee to do something”
+ +Note: The invocation name needs to be at least two (2) words long, but avoid making it a full sentence, since you will be saying the name a lot. + + + + +For this demonstration, let’s name this skill “Codi Bee”, which is MIT App Inventor’s mascot. This means when we want to call our skill, we will say: + +
“Alexa, tell Codi bee to do something”
+ + +To define this invocation name, open the **Voice** blocks drawer. The top most block is the **define invocation name** block. Drag the **define invocation name** block inside the **when initialize** block. + +![Drag the define invocation name block](../images/alexa-helloworld/define_invocation.gif){:.enlargeImage} + +Now get a Text block from the **Text** drawer and add it to the invocation name. + +![Drag the text block](../images/alexa-helloworld/text_block.gif){:.enlargeImage} + +Don’t mind the error for now. It’s just a warning saying that the invocation name should not be empty. Inside the text block, enter your invocation name. *Remember, two or more words, but not a full sentence!* For this tutorial, we will make this invocation name “Codi Bee.” + +![Change the invocation name](../images/alexa-helloworld/blocks1.png){:.enlargeImage} + +## Define a Custom Intent + +Now we need to add a custom **Intent** to our app. + + + + You can think of an **Intent** as a “command” that you want to teach Alexa. It could be a Stop Intent, a SayHelloWorld Intent, or any intent you can really think that you will need in any Skill. + + + +Let’s teach our app to listen for the “SayHelloWorld” intent. To define this intent, open the **Voice** drawer again and scroll down to the block that says **Define intentName Intent**. Drag this **Define Intent** block under the invocation name. + +![Drag the define intent block](../images/alexa-helloworld/define_intent.gif){:.enlargeImage} + +For this intent, we’ll rename the intent to be “SayHelloWorld”. You can give this intent any name that makes sense to you, as long as it is a meaningful name. + +![Change the intent name](../images/alexa-helloworld/blocks2.png){:.enlargeImage} + +Don’t mind the error for now. It’s just a warning saying that the phrase list has to have at least one sentence. We’ll fix that in the next step! + +## Add a List of Utterances + +As you might have noticed, we need to give the intent block a list of **utterances**. + + + +Let’s say your parent wants you to do the dishes. They might say “Clean the dishes.” Or, maybe they’ll say “*Do* the dishes.” Maybe they’ll just say “Wash the dirty plates.” All these sentences all have the same *intent*: you need to do the dishes. + +Just like this example, when talking to Alexa, there might be a lot of ways to say something to trigger an intent. Each of these phrases that all mean the same thing is called an **utterance**. + + + +In these text blocks, we will write a few sentences which Alexa will understand to mean “SayHelloWorld”. One sentence could be “Say hi and another sentence could be “Say hello", or "Say hello world". + +![Add utterances](../images/alexa-helloworld/blocks3.png){:.enlargeImage} + +(If you are familiar with the List block, you can make this list bigger by clicking the blue icon at the top left of the block and add as many phrases as you want.) + +Remember that the structure of any command you tell Alexa when you want to trigger a skill is: + +
“Alexa, tell (Invocation Name) to (Utterance)”
+ +We already set the invocation name as Codi Bee, and now we've added the intent phrases, “Say hi”, “Say hello”, and "Say hello world". Here is a full example of what Alexa might hear when we want to trigger our new Skill: + +
“Alexa, tell Codi bee to say hello.”
+ +## Update the Amazon Code + +Now, we have finished telling Alexa the *structure* of our new Skill, also called the **Interaction Model**. This interaction model is made of the **Invocation Name** (Codi Bee), the name of all the **intents** your skill needs to know, and all the **phrases** that will trigger each intent. Your blocks so far should look something like this. + +![Interaction Model blocks](../images/alexa-helloworld/blocks3.png){:.enlargeImage} + +Now, we need to send this *interaction model* to Amazon. Let’s go back to the Designer page in the top right. + +![Switch to designer](../images/alexa-helloworld/goto_designer.png){:.enlargeImage} + +Below the picture of the Amazon Echo Dot, there is a button labeled **Send Updates**. (If you only see a button that says **Login to Amazon**, you need to do that first). Click this button. + +![Send updates](../images/alexa-helloworld/send_updates.png){:.enlargeImage} + +You should get a pop-up at the top of your browser that says “Skill updated successfully on Amazon”. Click OK to continue. + +![Amazon notification](../images/alexa-helloworld/update_done.png){:.enlargeImage} + +## Define the Endpoint Function + +Now that we have defined the Interaction Model and updated Alexa, we need to define the "brain" of the Alexa skill. Our skill can now recognize whenever we want it to “SayHelloWorld,” but it doesn’t know what to do or how to handle it. To make the response, we need to define the **Endpoint Function**, the brain of our Skill. To begin, let’s navigate back to the Blocks view. + +![Switch to blocks editor](../images/alexa-helloworld/goto_blocks.png){:.enlargeImage} + +Open the **Voice** drawer and scroll down until you see the **when SayHelloWorld intent spoken** block. Drag this block below the When Skill Initialize block (not inside). + +![Drag when SayHelloWorld intent spoken block](../images/alexa-helloworld/intent_spoken.gif){:.enlargeImage} + +This block will determine what Alexa will do and say. You can add if statements and a lot of things you could do in normal App Inventor Procedures. For now, we simply want to get Alexa to say Hello World. To do this, we need to find the **Say** block in the **Voice** drawer. Add the **Say** block to the inside of the when intent spoken block. + +![Drag Say block](../images/alexa-helloworld/say_block.gif){:.enlargeImage} + +Next, attach a text block to the **Say** block and type inside the text block, ”Hello World.” + +![Add text to Say block](../images/alexa-helloworld/blocks4.png){:.enlargeImage} + +And now we’ve finished defining the Endpoint function. If you decide to add more intents, like a SayGoodbye intent, you need to add a new **when intent spoken** block for each intent. + + + +When playing around with your Endpoint function, you may be tempted to add more Say blocks to an intent. But be careful! Alexa will only say whatever is in the *last* Say block of any intent. + + + +## Generate the Endpoint Function + +Now, go back to the Designer view. + +![Switch to designer](../images/alexa-helloworld/goto_designer.png){:.enlargeImage} + +We want to send our new **Endpoint Function** to Amazon. Click the button labeled **Send Updates**. + +![Send updates](../images/alexa-helloworld/send_updates.png){:.enlargeImage} + +You should get a pop-up at the top of your browser that says “Skill updated successfully on Amazon”. Click OK to continue + +![Amazon notification](../images/alexa-helloworld/update_done.png){:.enlargeImage} + +## Go to the Alexa Developer Console + +Now that we’ve finished creating our first custom Alexa Skill, it’s time for us to test our new Alexa Skill. In the future, testing your custom Alexa Skill will be done all within MIT App Inventor. For now, we will need to use the Alexa Developer Console to simulate Alexa. To get to the Alexa Developer Console, navigate to [this link](https://developer.amazon.com/alexa/console/ask). + +Login to your Developer Account if you get prompted to. + +![Login to Amazon](../images/alexa-helloworld/amazon_login.png){:.enlargeImage} + +Once you’ve logged in, you will reach the Alexa Developer Console. The Alexa Developer Console should look something like the page below. + +![Amazon Alexa Developer Console](../images/alexa-helloworld/dev_console.png){:.enlargeImage} + +## Select the Skill with the Right Name + +On the developer console, you will see a list of all of the Alexa Skills you’ve made so far. The most recent skill should be the same name as the invocation name you set for your skill. For this tutorial, the skill is called “codi bee.” (Notice that the name of the Skill is in all lower case now even though the invocation name was not all lower case to begin with). + +![Select codi bee skill](../images/alexa-helloworld/find_skill.png){:.enlargeImage} + +Click on the name of your custom Alexa Skill. This will take you to the Build tab for your skill. + +![Amazon Alexa build tab](../images/alexa-helloworld/build_tab.png){:.enlargeImage} + +## Click on the Testing Tab + +In the top menu bar, you should see a tab labeled **Test**. Click on the **Test** tab to enter the simulation screen. + +![Switch to Test tab](../images/alexa-helloworld/test_tab.png){:.enlargeImage} + +Now, you should be in the Test screen for your custom Alexa Skill. The screen should look something like the following. + +![Amazon Alexa Test tab](../images/alexa-helloworld/test_tab2.png){:.enlargeImage} + +Notice that at the top of the screen is a drop down menu. Select the drop down menu and select Development in order to enable your skill for testing. + +![Enable development](../images/alexa-helloworld/start_testing.gif){:.enlargeImage} + +Now that your skill is enabled for development, any Alexa-enabled devices that are already linked with your Amazon account can be used to test your new Alexa skill. Simply say “Alexa, tell Codi bee to say hello.” + +## Enter the Test Utterances + +If you don’t have an Alexa-enabled device on hand, the Alexa Developer Console allows you to simulate an Alexa using your custom Alexa skill online. Simply type in the console, “Tell codi bee to say hello.” (You can omit the Alexa at the beginning of the phrase). + +![Test your new skill](../images/alexa-helloworld/test_skill.png){:.enlargeImage} + +## Finish! + +Congratulations! You’ve made your first custom Alexa Skill! Feel free to extend this app by adding new intents and new ways for Alexa to respond to each intent. \ No newline at end of file