exercise5-Deployment.md

Exercise 5: Deploying Your Bot to the Cloud (Node.js)

Introduction

In this exercise you will learn how to register your bot and deploy it to Azure so others can use it.

Prerequisites

The following software is required for completing this exercise:

• A code editor like Visual Studio Code (preferred), or Visual Studio 2017 Community or higher
• An Azure subscription
• An account in the LUIS Portal
• Git command line interface
• An Skype account (optional)

Task 1: Register the Bot with the Bot Framework

In this task you will generate an App ID and App Password, and register your bot.

1. Sign in to the Bot Framework Portal.

2. Click the My bots button and next click the Create a bot button (if you have other bots) or the Register buton.

3. Upload the logo.png as Custom Icon.

4. Type Help Desk Bot as Display Name. Enter a globally unique App Name in the Bot Handle.

5. For Long Description you can enter This bot will try to help you to solve common issues and can raise tricky ones as tickets. This is the description that will appear in search results, so it should accurately describe what the bot does.

   

6. On the Configuration section, click on the Create Microsoft AppID and Password button and a new page should open. If required, sign in again with the same credentials you use in the Bot Framework portal. In this page, you should see the App name you have entered previously and an App ID which was automatically generated. Save the App ID for later and click on the Generate an app password to continue.

   

7. You should see a popup which contains an automatically generated password for your bot. Notice that this is the only time it will be displayed. Store it securely for later. Click Ok to close the popup.

   

8. Click on the Finish and go back to Bot Framework button. You may notice the page will close and you will go back to the Bot registration page. Now, you have the App ID auto-completed in the page.

9. Scroll down and confirm your agreement of the Terms of Use, Privacy Statement, and Code of Conduct. Click on the Register button. A confirmation message should appear, click Ok. And next you should see your bot's dashboard with a few channels available.

   

Task 2: Create an Azure Web App

In this task you will learn how to deploy and configure your app to enable it to communicate with the Bot framework channels.

1. Sign in to the Azure portal. Click on the New button on the left bar, next click on the Web + Mobile and then choose Web App.

2. Enter an App name, choose a Subscription and a Resource Group. You can use the same resource group you've used for the Cosmos DB and Search services. Click Create.

   

3. Open the previously created App Service if you are not there already. Click on Application Settings on the left menu. Navigate to the App settings and add the following keys and replace with the values described (you should have these values in your bot source code).

   Key	Description
   AZURE_SEARCH_ACCOUNT	Use the Azure Search account name
   AZURE_SEARCH_INDEX	Use the Azure Search index name
   AZURE_SEARCH_KEY	Use the Azure Search key
   MICROSOFT_APP_ID	Use the Bot App ID
   MICROSOFT_APP_PASSWORD	Use the Bot Password
   LUIS_MODEL_URL	Use the LUIS model URL
   TICKET_SUBMISSION_URL	Use your App Service URL (eg. https://help-desk-bot.azurewebsites.net/)

   After you entered the key and values you should have a similar result as the image below.

   

4. Click Save ().

5. Navigate to the Deployment section and click on the Deployment credentials on the left bar. Type a Username and Password and confirm the password entered again on Confirm Password. Next click on the Save button.

   

6. Navigate to the Deployment section and click on the Deployment options on the left menu. Next click on the Configure required settings and then click on the Local Git Repository. Click OK.

   

7. Click on the Overview option on the left bar. Save for later use the Git clone url on the right column of the Essentials pane.

   

Task 3: Publish your Bot to Azure

In this task you will publish your code to Git Repository and this will deploy your recent changes to the Azure App Service. For more information about Git you can check the Git Reference here.

1. Open a console on the app folder you've obtained from the previous exercise. Alternatively, you can use the app from the exercise4-KnowledgeBase folder. If you didn't create a Git repository for this code, type the following command in the console (if you already initialized this code to a Git repository, you don't need to do this step):

   git init
   

2. Next, type the following command and remember to replace the {gitcloneurl} with the Git clone url you obtained in the previous task.

   git remote add azure {gitcloneurl}
   

3. Type the following commands to commit you changes and push it to the Azure web app.

   git add .
   git rm --cached node_modules -r
   git commit -m "initial commit"
   git push azure master
   

4. Enter your deployment credentials you created on the previous task.

5. Next you should see files being uploaded, the npm packages installed on the remote server and finally the deployment status.

   

Task 4: Update Your Bot Configuration

1. Navigate to Bot Framework Portal. Click on your bot name to edit it.

2. Click on the Settings button on the top-right corner of the page.

3. On the Configuration section, type the App Service URL you created on Task 2 (eg. https://help-desk-bot.azurewebsites.net/api/messages). Remember to put the /api/messages at the end of the URL and ensure the protocol is https. Click the Save changes button at the bottom of the page.

   

Task 5: Test Your Published Bot

In this task you will test your bot from other channels.

1. Navigate to Bot Framework Portal and edit your bot, if you are not there already.

2. Click on the Test button on the top-right corner of the page. It should open a new window on the right of the page. This is an embedded Web Chat Channel so you can easily test your bot.

3. Type Hi! I want to explore the knowledge base and see the bot response with the category list. Click on any of the category and see the articles listed for that category and click on one article to see it.

   

4. Click the Channels menu item. Note you should have the Skype and Web Chat channels enabled by default. Click on the Skype link. A new page will open to allow to add your bot to your Skype account. Click on the Add to Contacts button. You should be prompted to be sign into your Skype Account and the Skype app should be opened.

   

   NOTE: You can also check the Get bot embed codes link that shows you how to build a link for users to add the bot to their Skype account.

5. Search for the bot on your Contact List and test a new conversation.

   

   NOTE: At the moment this hands-on lab was written Skype does not fully support Adaptive Cards, so you might not see the ticket confirmation message correctly.

Further Challenges

• Test the bot from the Bot Emulator - you need to use ngrok to let the bot know how to reply to your local computer.
• Run code locally while testing the bot via Skype or Web Chat.
• You can try adding Bot Analytics by using Application Insights.
• Register the bot with another channel, such as Slack.