Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions

Introduction

 
In this article, we’re learning basic information about Extension Development, Microsoft Chat Bot Integration in Extensions, and Enabling Web Chat for your DevOps organization. It’s an idea to adopt the BOT services in all environments to automate your organizational processes in a single application.
 
Prerequisites
  1. Azure DevOps Login
  2. Visual Studio Code or any code editor
  3. Microsoft Chat Bot - Web App Bot – Azure PaaS services
  4. Node.js
  5. Visual Studio Marketplace Management Portal to publish your extension. 
Now first create a Web App Bot in Azure portal, go to this link and login with your valid credentials. 
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
It redirects to your Azure portal, here we require Resource Group, Web App Bot, App Service, Application insights, and app service plan for bot usage, so create a new resource group by clicking on Add Menu item shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Select your valid subscription for a new resource group, valid resource group name and region to publish all your resources in selected data center locations to protect your applications and data from datacenter failures.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Once validation is passed, click on the Create button as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now our resource group was created, so it's time to create our resources by clicking on the ‘Add’ button as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now Select ‘AI + Machine learning’ option and click on Web App Bot as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now fill Bot Handle (name of your chat bot), Valid Subscription, Resource group, Location, Pricing Tier, App Name (Bot End Point), Bot Template = C#, application insights for Log information about your chat bot end point, and click on create button. Follow the below two screenshots to create a  new web app bot step by step.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now Azure PaaS services are created and listed in the below screenshot.
 
Type
Notes
Web App Bot: It’s a Bot channel to enable your channels and linking your bot end point
Web App: Bot end point to publish your bot engine code
Application Insights: Log information about your bot responses.
App Service Plan: Plan details of your app
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now click on Web App Bot to test your bot by using ‘Test in Web Chat’ option as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
We can achieve  this activity in two ways i.e., from Web App or Direct Line. At present I’m using Web chat, now click on ‘Edit’ option to get iframe details with security key details.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now click on show button for your web chat secret key and scroll down for iframe code to place it in your html file.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now it’s time to create extension project. Open Visual Studio code and type the below commands in power shell terminal to create extension project resources.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
My Code
Commands in other tools
Notes
PS C:\Users\vegit> cd D:\
Cd D:\
Changing directory to my ‘D’ drive
PS D:\> md NewBotinExtension
md NewBotinExtension
In my ‘D’ drive, I’m creating new folder with name of ‘NewBotinExtension’ for my project files.
PS D:\> cd NewBotinExtension
cd NewBotinExtension
Now change to my Project folder. i.e., ‘NewBotinExtension’.
PS D:\NewBotinExtension> node -v
node -v
To check your node.js version installed in your machine.
PS D:\NewBotinExtension> npm install -g tfx-cli
npm install -g tfx-cli
Command utility for interacting with Microsoft Team Foundation Server and Azure DevOps Services (formerly VSTS). It is cross platform and supported on Windows, OS X, and Linux.
PS D:\NewBotinExtension> npm init -y
npm init -y
npm init is there when you are installing the project very first time. Here ‘-y’ is for ‘-Yes’
PS D:\NewBotinExtension> npm install vss-web-extension-sdk –save
npm install vss-web-extension-sdk –save
For your vss-web-extension sdk’s to your project.
 
PS C:\Users\vegit> cd D:\
PS D:\> md NewBotinExtension
PS D:\> cd NewBotinExtension
PS D:\NewBotinExtension> node -v
PS D:\NewBotinExtension> npm install -g tfx-cli
PS D:\NewBotinExtension> npm init -y
PS D:\NewBotinExtension> npm install vss-web-extension-sdk –save
 
Now our code is ready and next process is to generate VSIX extension file to publish package in Visual studio Market place. Follow the below URL to register or enable your accounts. This activity is to get Publisher ID and replace manifest file.
 
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
If it's your  first time using visual studio marketplace publisher, please note out your publisher ID (Eg: My Publisher ID: VegiManiteja). So replace your publisher id in the manifest file (vss-extension.json file) as shown in the below code.
 
Required Attributes for Manifest File
 
Property
Description
Required Notes
manifestVersion
A number corresponding to the version of the manifest format
This should be 1.
Id
Extension identifiers
This is a string that must be unique among extensions from the same publisher. It must start with an alphabetic or numeric character and contain 'A' through 'Z', 'a' through 'z', '0' through '9', and '-' (hyphen). Example: sample-extension.
Version
A string specifying the version of an extension.
Should be in the format major.minor.patch, for example 0.1.2 or 1.0.0. You can also add a fourth number for the following format: 0.1.2.3
name
A short, human-readable name of the extension. Limited to 200 characters.
Example: "My Bot in Extension".
publisher
The identifier of the publisher.
This identifier must match the identifier the extension is published under with your visual studio marketplace. i.e., Publisher ID
categories
Array of strings representing the categories your extension belongs to. At least one category must be provided and there is no limit to how many categories you may include.
Valid values: Azure Repos, Azure Boards, Azure Pipelines, Azure Test Plans, and Azure Artifacts
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Before
 
 
Now, it’s time to create VSIX file with below command syntax using VS Code, PowerShell, Command Prompt or Developer Command Prompt. At this time, VS Code terminal is using that  to run the TFX tool's packaging command from my extension directory.
 
D:\NewBotinExtension>tfx extension create
 
After
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now visual studio extension was created and now we switch to visual studio marketplace publisher to publish our extension (.vsix file).
 
Click on ‘Azure DevOps’ option to upload your .VSIX file.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Click or Drag and Drop your extension.VSIX file.  Once your file iss uploaded click on ‘Upload’ button as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions 
 
Now our extension has uploaded and it shows a success symbol in Version column as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now click on ‘ …’ symbol for extension options and click on ‘View Extension’ for your extension details.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now your extension details will be visible as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now it’s time give your extension access to your organization. Now click ‘…’ symbol and click on ‘Share/Unshare’ options as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now Click on ‘+ Organization’ option to add your Azure DevOps Organization details as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now switch to your dev.azure.com and select your organization as shown in the below screen shot. Click on ‘Organization settings’ options to enable your extension.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now Click on ‘Extensions’ options and go to ‘Shared’ option and click on ‘Install’ button. Make sure this extension will be available only to your current organization.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Select your Azure DevOps Organization from dropdown shown in the below screenshot and click on ‘Install’ button.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions
 
Now our new extension was enabled as shown in the below screenshot.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions 
 
Now Click on ‘My AI Bot’ option in Repos option, you can give any name for your extension and make sure there is scope to develop extension for Boards, Repose, Pipelines, Test Plans & Artifacts.
 
Integrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions 
 
Now we can achieve this new idea to adopt Microsoft AI chat bots on our extensions like Azure DevOps, Visual Studio SDK, Visual Studio Code etc.
 
...Happy Chatting with AI Bots Integrate Chat Bots In Azure DevOps Extensions - Chat Bot AdoptionsIntegrate Chat Bots In Azure DevOps Extensions - Chat Bot AdoptionsIntegrate Chat Bots In Azure DevOps Extensions - Chat Bot AdoptionsIntegrate Chat Bots In Azure DevOps Extensions - Chat Bot AdoptionsIntegrate Chat Bots In Azure DevOps Extensions - Chat Bot AdoptionsIntegrate Chat Bots In Azure DevOps Extensions - Chat Bot AdoptionsIntegrate Chat Bots In Azure DevOps Extensions - Chat Bot Adoptions