Connect Azure Bot with Jira Cloud

Plan, track, and manage your agile and software development projects in Jira. Customize your workflow, collaborate, and release great software.

According to Atlassian, Jira is used for issue tracking and project management by over 75,000 customers in 122 countries.

Complete Process

Pre-requisites

Creating Azure Bot

Make sure you have the bot ready. I have used Echo Bot for this demo. Refer my post to learn creating Echo Bot using Azure Bot Service or watch below video.

Enable Development mode in Jira

After you have signed up in Jira Cloud and created a project, below is the home page you will be redirected.

Click on Apps -> Manage your apps.

Click on Settings and enable development mode.

When development mode is enabled, “Upload App” functionality will be shown in Manage apps.

Creating the Application

Open the Command Prompt or Node.js Command Prompt in Windows and install ngrok using below command.

npm install -g ngrok

ngrok allows you to expose a web server running on your local machine to the internet.

Verify whether ngrok is installed.

ngrok help

Create a project directory with name “Jira Bot“. Inside the project directory, create a JSON file “atlassian-connect.json” with below content.

  {
     "name": "Jira Chatbot",
     "description": "Atlassian Connect app",
     "key": "com.example.myapp",
     "baseUrl": "<base url>",
     "vendor": {
         "name": "Example, Inc.",
         "url": "http://example.com"
     },
     "authentication": {
         "type": "none"
     },
     "apiVersion": 1,
     "modules": {
         "generalPages": [
             {
                 "url": "/jirabot.html",
                 "key": "jira-bot",
                 "location": "system.top.navigation.bar",
                 "name": {
                     "value": "My Jira Bot"
                 }
             }
         ]
     }
}

Leave the base URL as of now, will be putting it later when our application is available over the internet. Create a HTML file “jirabot.html” with below content.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://unpkg.com/@atlaskit/css-reset@2.0.0/dist/bundle.css" media="all">
        <script src="https://connect-cdn.atl-paas.net/all.js" async></script>
    </head>
    <body>
        <section id="content" class="ac-content">
            <h1>Jira Chatbot</h1>
        </section>
	<iframe src='https://webchat.botframework.com/embed/<bot name>?s=SECRET_KEY'  style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
    </body>
</html>

The iframe is the chat bot which will be rendered. Get the embed code from Azure Portal -> Web App Bot -> Channels -> Get Embed Codes along with secret key.

To learn getting the embed codes, refer my post on Embed Azure Bot in Website.

Replace the iframe with yours in the html file.

Open command prompt from the project directory. To host the application on a local server, we will use http-server. Install it using below command.

npm install http-server -g

Host your application on port number 8000. You can also use any other port.

http-server -p 8000

Below is the output you will get when server is started.

Starting up http-server, serving ./
Available on:
  http://10.0.0.4:8000
  http://128.0.0.1:8000
Hit CTRL-C to stop the server

The web address may differ based on your server. Open the link in web browser.

Navigate to both the files and check. You can test your bot by navigating to jirabot.html page. Open new command prompt and give below command to make the application available to the internet.