-
Notifications
You must be signed in to change notification settings - Fork 378
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updating the tutorial structure and adding an overview
- Loading branch information
1 parent
5caea6e
commit 9ec6d75
Showing
2 changed files
with
134 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| --- | ||
| title: The bot framework Composer tutorial Create a new bot and test it in the Emulator | ||
| description: Learn how to create a bot using the bot framework Composer and test it in the Emulator | ||
| keywords: The bot framework Composer, Composer, Tutorial, Emulator | ||
| author: washingtonKayaker | ||
| ms.author: v-liyan | ||
| manager: kamrani | ||
| ms.topic: article | ||
| ms.service: bot-service | ||
| ms.date: 01/17/2020 | ||
| monikerRange: 'azure-bot-service-4.0' | ||
| --- | ||
|
|
||
| # Tutorial: Create a new bot and test it in the Emulator | ||
|
|
||
| This tutorial walks you through creating a basic bot with the Bot Framework Composer and testing it in the Emulator. | ||
|
|
||
| In this tutorial, you learn how to: | ||
|
|
||
| > [!div class="checklist"] | ||
| > * Create a basic bot using the Bot Framework Composer | ||
| > * Run and interact with your bot locally using the Bot Framework Emulator | ||
| ## Prerequisites | ||
| - The [Bot Framework Composer](../setup-yarn.md) | ||
| - The [Bot Framework Emulator](https://aka.ms/bot-framework-emulator-readme) | ||
|
|
||
|
|
||
| # Create the weather 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 | ||
|
|
||
| 1. From the home screen, select **New**. | ||
|
|
||
|  | ||
|
|
||
| 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**. | ||
|
|
||
|  | ||
|
|
||
| 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**. | ||
|
|
||
|  | ||
|
|
||
| > [!TIP] Spaces and special characters are not allowed in the bot's name. | ||
| After creating your bot, Composer will load the new bot's `Main` dialog in the editor. It should look like this: | ||
|
|
||
|  | ||
|
|
||
| > [!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. | ||
| > [!tip] | ||
| > To help keep bots created in Composer organized, you can rename any trigger to something that better describes what it does. | ||
| Steps 4-8 are demonstrated in the image immediately following step 9. | ||
|
|
||
| 4. Click the **Greeting** trigger in the navigation pane. | ||
|
|
||
| 5. In the **properties panel** on the right side of the screen, select the trigger name and type **WelcomeTheUser**. | ||
|
|
||
| 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. | ||
|
|
||
| Now, it's time to make the bot do something. | ||
|
|
||
| You will see the flow in the _Authoring canvas_ starts with the **Trigger** name with a line below it that includes in a **+** button. | ||
|
|
||
| > [!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. | ||
| For now, instruct the bot to send a simple greeting. | ||
|
|
||
| 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. | ||
|
|
||
| 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.` | ||
|
|
||
|
|
||
|  | ||
|
|
||
|
|
||
| ## Start your bot and test it | ||
|
|
||
| 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, which is powered by the Bot Framework SDK. | ||
|
|
||
| 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. | ||
|
|
||
|  | ||
|
|
||
| Soon the Emulator will appear, and the bot should immediately greet you with the message you just configured: | ||
|
|
||
|  | ||
|
|
||
| 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,30 @@ | ||
| # Build a weather bot | ||
| 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. | ||
| --- | ||
| title: The bot framework Composer tutorial overview | ||
| description: Learn how to create bots using the bot framework Composer. | ||
| keywords: The bot framework Composer, Composer, tutorial | ||
| author: washingtonKayaker | ||
| ms.author: v-liyan | ||
| manager: kamrani | ||
| ms.topic: article | ||
| ms.service: bot-service | ||
| ms.date: 01/17/2020 | ||
| monikerRange: 'azure-bot-service-4.0' | ||
| --- | ||
|
|
||
| # The bot framework Composer tutorials | ||
|
|
||
| Welcome to the bot framework Composer tutorials. These start with the creation of a simple bot with each successive tutorial building on the previous tutorial adding additional capabilities designed to teach to basic concepts of building bots with Composer. | ||
|
|
||
| In these tutorials, 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: | ||
| > [!div class="checklist"] | ||
| > * Create a new bot and test it in the Emulator | ||
| > * Add multiple dialogs to help your bot fulfill more than one scenario | ||
| > * Handle interruptions in the conversation flow in order to add global help and the ability to cancel at any time | ||
| > * Use Language Generation to power your bot's responses | ||
| > * Use Adaptive Cards | ||
| ## Prerequisites | ||
| - 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 good understanding of the material covered in the [Introduction to Bot Framework Composer](../bfcomposer-intro.md) | ||
|
|
||
|
|
||
| # Create the weather 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 | ||
|
|
||
| 1. From the home screen, select **New**. | ||
|
|
||
|  | ||
|
|
||
| 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**. | ||
|
|
||
|  | ||
|
|
||
| 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**. | ||
|
|
||
|  | ||
|
|
||
| > [!TIP] Spaces and special characters are not allowed in the bot's name. | ||
| After creating your bot, Composer will load the new bot's `Main` dialog in the editor. It should look like this: | ||
|
|
||
|  | ||
|
|
||
| > [!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. | ||
| > [!tip] | ||
| > To help keep bots created in Composer organized, you can rename any trigger to something that better describes what it does. | ||
| Steps 4-8 are demonstrated in the image immediately following step 9. | ||
|
|
||
| 4. Click the **Greeting** trigger in the navigation pane. | ||
|
|
||
| 5. In the **properties panel** on the right side of the screen, select the trigger name and type **WelcomeTheUser**. | ||
|
|
||
| 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. | ||
|
|
||
| Now, it's time to make the bot do something. | ||
|
|
||
| You will see the flow in the _Authoring canvas_ starts with the **Trigger** name with a line below it that includes in a **+** button. | ||
|
|
||
| > [!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. | ||
| For now, instruct the bot to send a simple greeting. | ||
|
|
||
| 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. | ||
|
|
||
| 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.` | ||
|
|
||
|
|
||
|  | ||
|
|
||
|
|
||
| ## Start your bot and test it | ||
|
|
||
| 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, which is powered by the Bot Framework SDK. | ||
|
|
||
| 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. | ||
|
|
||
|  | ||
|
|
||
| Soon the Emulator will appear, and the bot should immediately greet you with the message you just configured: | ||
|
|
||
|  | ||
|
|
||
| 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) | ||
| ## Next step | ||
| - [Create a new bot and test it in the Emulator](./bot-tutorial-create-bot.md) |