/weather-bot

this is weather-bot using Microsoft Bot Framework v4

Primary LanguageJavaScript

netways-weather-bot-task

Describtion

This is a chatbot for getting the weather degree. This bot has been created using Bot Framework, it shows how to create a simple bot that accepts input from the user and echoes it back. Firstly, I started searching for what is the Microsoft Bot Framework and how to use it, Then downloaded the Prerequisites to be able to start working on the task.

Prerequisites

To run the bot i faced some troubles because of my mac:

  • After downloading the VS and the botBuilder VSIXV4.vsix file, i couldn't install it because this extention not supported on macOS.
  • So i downloaded a sample code locally to open it with VS to test and try the emulator and it works fine, but still cannot see the " Create Echo Bot" template from the starting new project panel, to be able to start from scartch as shown below.

Screen Shot 2021-05-25 at 8 15 44 PM

Screen Shot 2021-05-26 at 4 20 14 PM

  • So I switched the work from C# to JavaScript to be able to create the project from the scartch and save time for the task delivery.

  • So,I started with installing the Yeoman generator for Bot Framework v4. It Will let me quickly set up a conversational AI bot using core AI capabilities.

    npm install -g yo
    npm install -g generator-botbuilder
  • Choose "Echo Bot " Template and used the core bot features " Send and Receive Messages".

  • Create a New Project

    yo botbuilder
  • Install modules

    npm install
  • Start the bot

    npm start

And Here we go!

Screen Shot 2021-05-26 at 12 08 11 AM

Connect to the bot using Bot Framework Emulator

  • Launch Bot Framework Emulator
  • Enter a Bot URL of http://localhost:3978/api/messages
  • Then i followed the task requirements turns, until here and the bot works locally fine.

Screen Shot 2021-05-26 at 12 15 40 AM

Deploy the bot to Azure

when it come to deploying a bot to Azure, i used this docs Deploy your bot to Azure for a complete the list of deployment instructions. I started with pushing the project to Github without the node_modules by adding it to the .gitignore file.

  • First I make a subscription to Microsoft Azure.
  • Downloaded the latest version of Azure CLI. But while following the instructions, I faced this error while deploying:

Screen Shot 2021-05-26 at 4 54 01 PM

After doing a research on this issue, i followed a tutorial to solve it manually by adding:

  • Azure Extension on VSC and connect it with Github repo.
  • Join Microsoft Azure dashboard.
  • Create a Resource Group for the bot.
  • Create an App service plan.
  • Create a New Bot Web APP.

Screen Shot 2021-05-26 at 4 11 54 PM

  • Also made an Azure Pipeline.

Screen Shot 2021-05-26 at 4 09 51 PM

  • And its Done.

Screen Shot 2021-05-26 at 3 51 52 PM

  • From the "Channel" Integration end point, I choosed WEB APP, and added the iframe to my personal website for example.

Screen Shot 2021-05-26 at 3 53 38 PM

You can test it through this url:

BotWebApp

I used Luis.ai

Screen Shot 2021-05-29 at 12 09 16 PM

I Also worked with QnA Maker

Screen Shot 2021-05-28 at 9 39 46 PM

And tested it and works as expected Screen Shot 2021-05-28 at 9 40 42 PM

Then i published the QnA Maker and added the configuration to the .env file to hit the Knowloedge base

Screen Shot 2021-05-28 at 9 44 09 PM

Screen Shot 2021-05-29 at 11 44 42 AM

When it comes the enhancing the front end, i followed this tutorial

Screen Shot 2021-05-29 at 11 55 29 AM

References i used