Skip to content

Commit

Permalink
Updates to bot-tutorial-introduction.md
Browse files Browse the repository at this point in the history
Redid the dialogs and parts of the article, in part due to changes in the Composer design.
  • Loading branch information
WashingtonKayaker committed Jan 17, 2020
1 parent e8a655a commit 5caea6e
Show file tree
Hide file tree
Showing 15 changed files with 47 additions and 71 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file modified docs/media/tutorial-weatherbot/01/create-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/media/tutorial-weatherbot/01/create-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file modified docs/media/tutorial-weatherbot/01/empty-main-dialog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/media/tutorial-weatherbot/01/emulator-launch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file removed docs/media/tutorial-weatherbot/01/new-flow.png
Binary file not shown.
Binary file added docs/media/tutorial-weatherbot/01/new.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/media/tutorial-weatherbot/01/send-activity.png
Binary file not shown.
Binary file modified docs/media/tutorial-weatherbot/01/start-bot.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 47 additions & 71 deletions docs/tutorial/bot-tutorial-introduction.md
Original file line number Diff line number Diff line change
@@ -1,119 +1,95 @@
# Build a weather bot
In this tutorial, you will build a weather bot using Bot Framework Composer. We'll start simple and gradually introduce sophistication. We'll cover how to:
- Create a new bot
- Author a new dialog
- Add global help and cancel handling
- Use Language Generation to power your bot's responses
- Use Adaptive Cards
- Handle interruptions in the conversation flow
- Add multiple dialogs to help your bot fulfill more than one scenario
In this tutorial, you will build a weather bot using the Bot Framework Composer, starting with a simple bot and gradually introducing more sophistication. You'll learn how to:
- Create a new bot.
- Author a new dialog.
- Add global help and cancel handling.
- Use Language Generation to power your bot's responses.
- Use Adaptive Cards.
- Handle interruptions in the conversation flow.
- Add multiple dialogs to help your bot fulfill more than one scenario.

## Prerequisites
- [Bot Framework Composer](./docs/setup-yarn.md)
- The [Bot Framework Composer](../setup-yarn.md)
<!---- Cognitive Service Language Understanding authoring resource. To verify, click on Environment details tab in the integrated documentation pane. You should see non empty values for `LUIS authoring key 1` and `LUIS authoring key 2`.-->
- A LUIS subscription [key](https://stackoverflow.com/questions/42920829/where-can-i-get-the-luis-subscription-key) (found in [Settings](https://www.luis.ai/user/settings) in LUIS)
- A LUIS [subscription key](https://stackoverflow.com/questions/42920829/where-can-i-get-the-luis-subscription-key) (found in [Settings](https://www.luis.ai/user/settings) in LUIS)


# Create the Weather Bot
# Create the weather Bot

The first step in creating a bot with Bot Framework Composer is to create a new bot project from the home screen in the Composer. This will create a new folder locally on your computer with all the files necessary to build, test and run the bot.
The first step in creating a bot with the Bot Framework Composer is to create a new bot project from the home screen in the Composer. This will create a new folder locally on your computer with all the files necessary to build, test and run the bot.

## Create Project
## Create project

1. From the home screen, select **New** from the upper left corner. You'll be presented with a dialog with options to either create an empty bot project from scratch, or to create one based on a template. For this workshop, make sure `Create from Scratch` selected and click **Next**
1. From the home screen, select **New**.

![create project](../media/tutorial-weatherbot/01/create-1.png)

2. The second screen asks for a **Name** and **Description** of your bot. Let's call it:

`WeatherBot`

and give it a description:

`A friendly bot who can talk about the weather.`

> Make sure not to put any spaces or special characters in the bot's name.
> Leave the **Location** field with its default value - this will put the bot project into Composer's default project folder where it will be easy to find.
![create bot](../media/tutorial-weatherbot/01/create-2.png)

3. Click **Next**, and Composer will create the project for you!
![create project](../media/tutorial-weatherbot/01/new.png)

## Give your bot something to say
2. In the **Create from scratch?** screen, you'll be presented with options to create an empty bot project from scratch or to create one based on a template. For this tutorial, select the **Create from Scratch** option, then **Next**.

After creating your bot, Composer will load the new bot's `Main` dialog in the editor. It should look like this:
![create project](../media/tutorial-weatherbot/01/create-1.png)

![bot conversation](../media/tutorial-weatherbot/01/empty-main-dialog.png)
3. The **Define conversation objective** form:
1. Enter the name "_Weatherbot_" in the **Name** field.
2. Enter "_A friendly bot who can talk about the weather._" in the **Description** field.
3. Select the location to save your bot.
4. Save your changes and create your new bot by selecting **Next**.

Each dialog contains one or more **[Triggers](concept-events-and-triggers.md)** that define the actions available to the bot while the dialog is active. Right now the dialog is empty, so the bot won't do anything.
![create project](../media/tutorial-weatherbot/01/create-2.png)

You will notice that the new bot is pre-configured with one trigger in the left dialogs window - `Greeting`.
> [!TIP] Spaces and special characters are not allowed in the bot's name.
> Triggers help your dialog capture events of interest and respond to them using actions.
After creating your bot, Composer will load the new bot's `Main` dialog in the editor. It should look like this:

1. Click the `Greeting` trigger in the left hand explorer.
![bot conversation](../media/tutorial-weatherbot/01/empty-main-dialog.png)

2. You will see a new flow has been added to the dialog.
> [!NOTE]
> Each dialog contains one or more **[Triggers](concept-events-and-triggers.md)** that define the actions available to the bot while the dialog is active. When you create a new bot, an **Activities** trigger of type **Greeting (ConversationUpdate activity)** is automatically provisioned. Triggers help your dialog capture events of interest and respond to them using actions.
![dialog](../media/tutorial-weatherbot/01/new-flow.png)
> [!tip]
> To help keep bots created in Composer organized, you can rename any trigger to something that better describes what it does.
3. To help keep the bot organized, let's rename this trigger to something that describes what it does. In the **properties panel** on the right side of the screen, click on the name of the trigger ("Greeting"). You'll be able to update the title there, and the change will be instantly reflected in the dialog and navigation on the left. Rename ths trigger to:
Steps 4-8 are demonstrated in the image immediately following step 9.

`WelcomeTheUser`
4. Click the **Greeting** trigger in the navigation pane.

![trigger](../media/tutorial-weatherbot/01/rename-trigger.gif)
5. In the **properties panel** on the right side of the screen, select the trigger name and type **WelcomeTheUser**.

Now, let's actually make the bot do something!
Inside the flow, you'll see that the real **Trigger** box has a line below it that includes in a **+** button.
6. Next you will start adding functionality to your bot by adding **Actions** to the _WelcomeTheUser_ trigger. You do this by selecting the **+** button in the _Authoring canvas_ and select **Send a response** from the list.

The **+** button can be used to add **Actions** to the conversation flow. You can use this to add actions to the end of a flow, or insert actions at an earlier point.
Now, it's time to make the bot do something.

For now, let's instruct the bot to send a simple greeting.
You will see the flow in the _Authoring canvas_ starts with the **Trigger** name with a line below it that includes in a **+** button.

4. Click the **+** button and select the first menu item **Send a response**.
> [!tip]
> The **+** button can be used to add **Actions** to the conversation flow. You can use this to add actions to the end of a flow, or insert new actions between existing actions.
![menu](../media/tutorial-weatherbot/01/add-send-activity.gif)
For now, instruct the bot to send a simple greeting.

5. Select the new **Send a response** action in the flow and it's properties will appear on the right hand side of the screen. This action has only one main property - the text of the activity to send.
7. Select the new **Send a response** action in the flow and it's properties will appear on the right hand side of the screen. This action has only one main property, the text of the activity to send.

6. Type a welcome message into this field. It is always a good idea to have your bot introduce itself and explain it's main features. So let's make the welcome message something like:
8. Type a welcome message into this field. It is always a good idea to have your bot introduce itself and explain it's main features, something like:

`Hi! I'm a friendly bot that can help with the weather. Try saying WEATHER or FORECAST.`

Your bot should now look like this:

![activity](../media/tutorial-weatherbot/01/send-activity.png)

Next, let's temporarily disable the recognizer for the main dialog. We will get back to this in the next step.

7. Click on `WeatherBot.Main` in the left pane to bring up the properties editor for the root dialog.
![trigger](../media/tutorial-weatherbot/01/WelcomeTheUser.gif)

6. In the properties panel on the right hand side, click on **Recognizer type** and select `None`.

> Dialogs in Composer support two different recognizer types - LUIS and Regular expressions. Unless you need intent classification or entity extraction you can remove the recognizer by setting it to `None`.
![recognizer](../media/tutorial-weatherbot/01/recognizer-none.gif)

## Start your bot and test it

Now that our new bot has its first simple feature, let's launch it in the emulator and make sure everything works.
Now that your new bot has its first simple feature, you can launch it in the emulator and verify that it works.

1. Click the **Start Bot** button in the upper right hand corner of the screen. This tells Composer to launch the bot's runtime (an external app powered by the Bot Framework SDK) and updates it with the latest content and settings from Composer.
1. Click the **Start Bot** button in the upper right hand corner of the screen. This tells Composer to launch the bot's runtime, which is powered by the Bot Framework SDK.

2. After a few seconds, a second link will appear next to the button **Test in Emulator**. Click this link to open Emulator and connect.
2. After a second the **Start Bot** button will change to **Restart Bot** which indicates that the bots runtime has started. Simultaneously a new link will appear next to the button labeled **Test in Emulator**. Selecting this link will open your bot in the Emulator.

![start bot](../media/tutorial-weatherbot/01/start-bot.gif)

You should see a window like this appear:
Soon the Emulator will appear, and the bot should immediately greet you with the message you just configured:

![emulator](../media/tutorial-weatherbot/01/emulator-launch.png)

And the bot should immediately greet you with the message we just configured:

![emulator](../media/tutorial-weatherbot/01/greeting-in-emulator.png)

We now have a working bot, and we're ready to add some more substantial functionality!
You now have a working bot, and you're ready to add some more substantial functionality!

## Next steps
- [Add a dialog](./bot-tutorial-add-dialog.md)

0 comments on commit 5caea6e

Please sign in to comment.