{"id":131,"date":"2018-03-15T14:00:00","date_gmt":"2018-03-15T14:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/03\/15\/bot-framework-tutorial-2-create-your-first-chat-bot-in-azurestep-by-step\/"},"modified":"2020-11-05T14:07:57","modified_gmt":"2020-11-05T13:07:57","slug":"bot-framework-tutorial-2-create-your-first-chat-bot-in-azurestep-by-step","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/bot-framework-tutorial-2-create-your-first-chat-bot-in-azurestep-by-step\/","title":{"rendered":"Bot Framework Tutorial 2: Create Your First Chat Bot in Azure(Step by Step)"},"content":{"rendered":"<div style=\"color: #555555; font-size: 18px; line-height: 30px; text-align: justify;\">\n<div style=\"font-family: 'segoe ui';\">\n<p>In this Demo, we are going to build and test a complete bot created in Azure in just few steps!<br \/>\n<a href=\"https:\/\/youtu.be\/YCUNwz3Nwb0\" target=\"_blank\" rel=\"noopener noreferrer\">Watch the video lessons here. <\/a><\/p>\n<p><b>Content<\/b><\/p>\n<hr \/>\n<ol>\n<li><a href=\"#whatis\">What is Bot Framework? <\/a><\/li>\n<li><a href=\"#whatyou\">What you need for this Demo<\/a><\/li>\n<li><a href=\"#step\">Step-by-Step Procedure<\/a><\/li>\n<li><a href=\"#final\">Final Notes<\/a><\/li>\n<li><a href=\"#next\">Next Steps<\/a><\/li>\n<\/ol>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/3.bp.blogspot.com\/-WiFcI-Y2HoA\/Wqp8ZiFlU2I\/AAAAAAAABXc\/BoAephQ75BcP1rxHQy3HlAXJKj2CITiqACLcBGAs\/s1600\/Tutorial%2B2-%2BCreate%2Byour%2BFirst%2BChat%2BBot.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/3.bp.blogspot.com\/-WiFcI-Y2HoA\/Wqp8ZiFlU2I\/AAAAAAAABXc\/BoAephQ75BcP1rxHQy3HlAXJKj2CITiqACLcBGAs\/s320\/Tutorial%2B2-%2BCreate%2Byour%2BFirst%2BChat%2BBot.jpg\" width=\"320\" height=\"218\" border=\"0\" data-original-height=\"788\" data-original-width=\"1152\" \/><\/a><\/div>\n<p>&nbsp;<\/p>\n<h3><b>1. What is Bot Framework?<\/b><\/h3>\n<p><b> <a href=\"http:\/\/kindsonthegenius.blogspot.com\/2018\/03\/bot-framework-tutorials-1-introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">read more&#8230;<\/a><\/b><\/p>\n<hr \/>\n<p>Bot Framework is a set of tools provided by Microsoft to help you build full functional interactive bots very easily. The Bot Framework was announce just less than two years ago. But somehow, many developer either don&#8217;t know about it, or they don&#8217;t know what they can accomplish with it.<br \/>\nTo learn more about Bot Frame work read <a href=\"http:\/\/kindsonthegenius.blogspot.com\/2018\/03\/bot-framework-tutorials-1-introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">Introduction to MS Bot Framework by Kindson The Genius<\/a>.<\/p>\n<p><b>How It Works<\/b><br \/>\nBot Framework is based on the Bot Builder SDK and Bot Framework Connectors<\/p>\n<p>&nbsp;<\/p>\n<h3><b>2. What you need for this Demo<\/b><\/h3>\n<hr \/>\n<p>You will need the following to complete this demo. Interestingly all you need for this demo is free! You don&#8217;t need to spend a dime!.<\/p>\n<p><i>Microsoft Live ID<\/i><br \/>\nYou can create a Microsoft Account and recieve the ID for free. To create an account if you don&#8217;t already have one, please visit this link: <a href=\"https:\/\/www.google.hu\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwir2f29k-7ZAhXC3CwKHebMClIQFggoMAA&amp;url=https%3A%2F%2Faccount.microsoft.com%2Faccount&amp;usg=AOvVaw0jFlin5Ts7HkGZcGbEtZ2Y\" target=\"_blank\" rel=\"noopener noreferrer\">Create Microsoft Account<\/a><\/p>\n<p><i>An Azure Subscription<\/i><br \/>\nYou can create an free 30 days trial subscription in Azure. You can create a subscription from here: <a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create and Azure Subcription<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3><b>3. Step-by-step Procedure<\/b><\/h3>\n<hr \/>\n<p>This 3-step procedure would take about 7 minutes to complete, depending on your internet\u00a0 connetion speed.<\/p>\n<p><b>Step 1:<\/b> Create an Free MS Azure Subcription<br \/>\nIf you have not already created the subscription, you can create a subscription from here: <a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create and Azure Subcription<\/a>.<\/p>\n<p><b>Step 2:<\/b> Create a Bot using Bot Service<br \/>\nLog in the Microsoft Azure, by visiting <a href=\"http:\/\/portal.azure.com\/\">portal.azure.com<\/a><br \/>\nIn the Search box Type Bot Service. Bot Service shows up<br \/>\nClick on Bot Service. The windows is show a in Figure 1<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/4.bp.blogspot.com\/-rhnTdx6hiQ0\/Wqpqy18pbfI\/AAAAAAAABV4\/OowdkBvWZbgXDK2YKcZv8Bjc7_bSSL6WQCLcBGAs\/s1600\/Bot%2BService.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/4.bp.blogspot.com\/-rhnTdx6hiQ0\/Wqpqy18pbfI\/AAAAAAAABV4\/OowdkBvWZbgXDK2YKcZv8Bjc7_bSSL6WQCLcBGAs\/s640\/Bot%2BService.jpg\" width=\"640\" height=\"395\" border=\"0\" data-original-height=\"805\" data-original-width=\"1296\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 1: Open Bot Services<\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>(A second way to get here is to visit dev.botframework.com and then click on Create Bot, the window is shown as in Figure 2)<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-o3ZY4lhREJo\/WqpsFxS4bKI\/AAAAAAAABWI\/6lL4l7rq2Jo-ZuyZ6upuHQZX7LP4uin8QCLcBGAs\/s1600\/dev.BotFramework.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-o3ZY4lhREJo\/WqpsFxS4bKI\/AAAAAAAABWI\/6lL4l7rq2Jo-ZuyZ6upuHQZX7LP4uin8QCLcBGAs\/s640\/dev.BotFramework.jpg\" width=\"640\" height=\"355\" border=\"0\" data-original-height=\"809\" data-original-width=\"1448\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 2: dev.botframework.com Window<\/div>\n<p>When you click on Bot Service. The next window would open which displays a list of all the bots you have previously created.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/1.bp.blogspot.com\/-oM4ZGGvN7HY\/Wqpt1FsPKkI\/AAAAAAAABWU\/tQCTS_xLXIQaBEyw27Gb8p9EAmq7PkLbgCLcBGAs\/s1600\/Bot%2BServices.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/1.bp.blogspot.com\/-oM4ZGGvN7HY\/Wqpt1FsPKkI\/AAAAAAAABWU\/tQCTS_xLXIQaBEyw27Gb8p9EAmq7PkLbgCLcBGAs\/s640\/Bot%2BServices.jpg\" width=\"640\" height=\"396\" border=\"0\" data-original-height=\"800\" data-original-width=\"1281\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 3: Bot Service showing existing bots<\/div>\n<p>To Create a new bot, click on Add Service (Close to the + sign under Bot Services). The next window opens<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/1.bp.blogspot.com\/-Ig4lW-3XnRI\/Wqpub4JPJ_I\/AAAAAAAABWc\/8fXCe4Ma-fsfBlIPNsDuJpQG53b2LfLZgCLcBGAs\/s1600\/Bot%2BServices2.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/1.bp.blogspot.com\/-Ig4lW-3XnRI\/Wqpub4JPJ_I\/AAAAAAAABWc\/8fXCe4Ma-fsfBlIPNsDuJpQG53b2LfLZgCLcBGAs\/s640\/Bot%2BServices2.jpg\" width=\"640\" height=\"352\" border=\"0\" data-original-height=\"807\" data-original-width=\"1459\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 4:\u00a0 Create a Web App Bot<\/div>\n<p>Click on Web App Bot under Bot Services. Then you will see a Create button<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/4.bp.blogspot.com\/--Bqd-uZqCTg\/Wqpvwy_jg3I\/AAAAAAAABWo\/PWhIhvCRUhQkSdys7l-5dKnjrkE_JpkwACLcBGAs\/s1600\/Create.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/4.bp.blogspot.com\/--Bqd-uZqCTg\/Wqpvwy_jg3I\/AAAAAAAABWo\/PWhIhvCRUhQkSdys7l-5dKnjrkE_JpkwACLcBGAs\/s640\/Create.jpg\" width=\"640\" height=\"347\" border=\"0\" data-original-height=\"793\" data-original-width=\"1452\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 5: Bot Creation Page<\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>Click on the Create button. It would open the Bot creation form so you can fill in the needed information for the new bot.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-8AXRhHvh1No\/WqpxcKuha_I\/AAAAAAAABW0\/HX5wmvR89vUKECFmNaB5TSY33tCl9BnpQCLcBGAs\/s1600\/Bot%2BCreation%2BForm.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-8AXRhHvh1No\/WqpxcKuha_I\/AAAAAAAABW0\/HX5wmvR89vUKECFmNaB5TSY33tCl9BnpQCLcBGAs\/s640\/Bot%2BCreation%2BForm.jpg\" width=\"640\" height=\"502\" border=\"0\" data-original-height=\"791\" data-original-width=\"1007\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 6: Bot Creation Form<\/div>\n<p>Fill in the data and click Create<\/p>\n<ul>\n<li>Bot Name: Enter the name you want to assign the bot<\/li>\n<li>Subscription: Leave this as it is<\/li>\n<li>Resource Group: Leave it at Create New. Don&#8217;t enter anything in the box<\/li>\n<li>Location:\u00a0 Leave it at the default value<\/li>\n<li>Pricing: Leave at the default value<\/li>\n<li>App Name: Same name as the name you entered as the Bot Name<\/li>\n<li><\/li>\n<li>Leave every other item in its default value.<\/li>\n<\/ul>\n<p>You can also click on Pin to dashboard. So you can see it in the home page<br \/>\nClick on Create.<br \/>\nBy now, your bot is created and you can see the name of the bot.<br \/>\nClick on it so it would display a page that can allow you to test the newly created bot. The page below is displayed<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/4.bp.blogspot.com\/-1H6cEXX6_vo\/Wqp1FsTWg2I\/AAAAAAAABXA\/3kOHMcc7DAAOsGTVnMA-cKKxFTRq_tSNgCLcBGAs\/s1600\/Bot%2BManagement.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/4.bp.blogspot.com\/-1H6cEXX6_vo\/Wqp1FsTWg2I\/AAAAAAAABXA\/3kOHMcc7DAAOsGTVnMA-cKKxFTRq_tSNgCLcBGAs\/s640\/Bot%2BManagement.jpg\" width=\"640\" height=\"352\" border=\"0\" data-original-height=\"792\" data-original-width=\"1437\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 7: Bot Management Window<\/div>\n<p>&nbsp;<\/p>\n<h3><b>4. Step 3: Test the Bot<\/b><\/h3>\n<hr \/>\n<p>Hurray! You have successfully created a bot and now we are ready to test it on real chat.<br \/>\nWe would open the chat, send a message to the bot and see how it responds<br \/>\nUnder Bot Managment, Click on Test in Web Chat<br \/>\nYou will see &#8216;Authorizing Chat with Bot&#8217; displayed for a short time. Then the chat window opens up<br \/>\nType &#8216;Hello&#8217; and press Send<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-43lR8ui2p8o\/Wqp3OGgF6UI\/AAAAAAAABXM\/UxqEwrdghIoS5mAxBMtFEGL0QBJDJLK8QCLcBGAs\/s1600\/Test%2Bin%2BWeb%2BChat.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-43lR8ui2p8o\/Wqp3OGgF6UI\/AAAAAAAABXM\/UxqEwrdghIoS5mAxBMtFEGL0QBJDJLK8QCLcBGAs\/s640\/Test%2Bin%2BWeb%2BChat.jpg\" width=\"640\" height=\"420\" border=\"0\" data-original-height=\"743\" data-original-width=\"1126\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 8: Testing Bot in Web Chat<\/div>\n<p>If you get a response, then you have successfully created you first bot!<br \/>\nIf not, or you have some challenges, leave a comment in the comment box at the left side of this page.<\/p>\n<p>&nbsp;<\/p>\n<h3><b>5. Final Notes<\/b><\/h3>\n<hr \/>\n<p>As you can see, it is quite easy to create a Chat Bot.\u00a0 However, what we just created is the very basic bot. How it works is that it echoes back the users input back to the user. Not much functionality. In subsequent lessongs, we would actually create a bot that would give an &#8216;intelligent&#8217; response to any user input.<\/p>\n<p>&nbsp;<\/p>\n<h3><b>6. Next Steps<\/b><\/h3>\n<hr \/>\n<p>Go ahead to read about the various types of bot you can create. This is under <a href=\"http:\/\/kindsonthegenius.blogspot.com\/2018\/03\/understanding-bot-templates-in-bot.html\" target=\"_blank\" rel=\"noopener noreferrer\">Learn About Bot Templates<\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this Demo, we are going to build and test a complete bot created in Azure in just few steps! Watch the video lessons here. &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[195],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/131"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":1747,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions\/1747"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}