I was working with a partner recently in developing Apps and integrated them as a part of Teams. At times there are questions from customers whether they would be able to utilize the features of teams within their application. The simple answer for the will be NO as Teams Platform Architecture is enabling developers to bring adoption to teams by building more applications from different industry verticals which can be embedded inside teams
However there are two ways you can make the user to navigate to Microsoft Teams from the web application or even from Outlook.
Make a clickable link for Teams chat :
Here is a handy tip on how to make a one-click link that will open up Teams chat to you or the person who is already logged in. Say if you are using a web application which is on Angular, simply you can add a click event to navigate to teams with the code,
When the user click on the button it will open a web page where the user will sign-in with their Microsoft account. If the Teams app is installed on the client's computer, the web page will offer to open the chat in the Teams client, otherwise they can use the Teams web browser experience
User Navigation from web app to Teams
Opening chat seamlessly once user login
This is a very simple tip but most of the customers are asking for a way to do the same.
Third-party websites can also use the launcher script to embed Share to Teams buttons on their webpages which will launch the Share to Teams experience in a popup window when clicked. This will allow you to share a link directly to any person or Microsoft Teams channel without switching context.
Step 1: Add launcher.js script on your webpage.
https://teams.microsoft.com/share/launcher.js
Step 2 : add an HTML element on your webpage with the teams-share-button class attribute and the link to share in the data-href attribute.
This is my 2nd post about a Chatbot solution to address the world wide problem "CoronaVirus" panademic. As it is now spreading across the world and its really vital to provide all citizens of the countries with up-to-date information. As we know it has come to a level that certain countries are in lockdown mode , more and more people are started to practice social distancing and work from home. As we have seen in the previous blog about the sentiment analysis of employees working form home, in this blog i will explain about how to build a chat bot to provides answers to most of the queries related to health information and latest learning. Chatbot is a platform which can be integrated with Web inteface or any collaboration tools such as MS Teams, Slack or Telegram and it can be operated 24*7 without any downtime.
As the first step, we need to create the resource group that contains all the resources needed. Navigate to Azure Portal and create the resource group named “rg-chatbot”
As the next step, navigate to QnA maker,sign-in with your Microsoft account and then click "Create a knowledge base" option
QnA maker
click "Create a QnA service" button in "Step 1" as shown below;
Create QnA service
You will be re-directed to Azure portal. Fill in the template form, and make sure to set pricing tier for "QnA Maker service" to F0, and for the supporting Azure Search service to F, if you want to host your Bot components for free. Then click "Create" button;
Create QnA service
As you could see in the portal Deployment of the relevant resources in your target resource group. If successful, you should get notification as resources deployed. As you will see the following resources under the particular resource group
Resources in QnA
Click on the App Service Plan you created
Note : By Default when you create, App Service Plan for the website is set to S1 pricing tier. You need to change it to the F1 tier if you don't want to have much cost incur on your subscription. You can do this by navigating to Scale Up(App Service Plan) and then select Dev/Test tab and select F1 and Apply.
Navigate to the QnA maker again and click 'Refresh" button in "Step 2"
Click on Refresh and select the bot we created
Give a meaningful name to your Knowledge Base (KB)
Name your KB
Step 4 : Populate Knowledge base from different sources
You can specify different sources to feed your knowledge base. It can be populated uploaded from files (e.g., in PDF, MS Word, MS Excel, etc. formats) or typed manually or from Web sites (containing FAQ). For this example, we will be using the recommended standard Knowledge base with Covid-19 FAQs from the Centers for Disease Control and Prevention and World Health Organisation Web sites.
Knowledge Base Sources
Also in the next step chit-chat" section you may choose "personality" for your bot, so that it can answer some additional small talk questions. This option will enrich the knowledge base with additional question/answer details, so you bot may respond to various greetings.
Populate KB
Now you can create your KB with a simple button click to setup your knowledge base and populate it with the data from the different configured sources.
Select the way it should answer small-talk questions
Once it successfuly created, you will see a window as follows,
Once it got successfully published, you can click on Create Bot as follows,
Create Bot
You will be re-directed to Azure portal where you can set the pricing tier of your Azure Bot Service to F0 (free one) , and you can pick SDK language as the one you are familiar with (either C# or Node) and the click "Create" button;
Create Web Bot
You can obtain the QnA authKey by clicking on it and from the deployment details,
Obtaining AuthKey
Once we filled everything, just hit Create button. Once it get deployed you will be able to see it from the notification.
Once Web App Bot is deployed , you may verify its functionality by selecting "Test in Web Chat" in the left navigation bar and then typing your messages in the Test window.
Test in Web Chat
If you get replies similar to what is shown on the screenshot above, congratulations - you have successfully completed setup and training of your bot !
Next step would be to make it accessible in your platform of choice.
Step 7 : Embed your bot into any web site of yours
Azure Web App Bot can communicate with external world via so called "channels". The channels are built for the relevant collaborating platforms, e.g. Skype,MS teams or Telegram. To find out more about supported channels, please consult Microsoft documentation here. By default, Web App Bot has "Web Chat" channel activated. It means that you can easily start using it on your Web site.
Navigate to Channels on the blade of created bot, then click "Get bot embedded codes" and finally click "Click here to open Web Chat configuration page" link.
Web Chat
Now click the "Show" link to reveal one of the secret keys. Use it to replace the <YOUR_SECRET_CODE> placeholder in the provided embedded code sample.
You can now paste this embedded code into the source code of your target website.
Now you can embed this into a Web sites can be built using various Web development frameworks: be it Angular,React,Vue,Angular or anything else.
Copy the code and embed in your site
Simply clone the repository, then replace the <PUT_YOUR_SECRET_CODE> placeholder on line 1059 with the secret code from your Web Chat configuration page (as described above).
You will then have a fully functional web page with an embedded QnA chatbot.
In this case, i already have built an Covid Tracker application with Angular and this how it looks when i embed the code what we got from the portal.
Say if you want to serve internal audience such as employees and if you are widely using Microsoft Teams in this crisis situation, you would nee to activate relvant channel in the bot's configuration.
Open Web App bot resource in the Azure portal again and select "Channels" option from the blade and click Microsoft Teams icon and press Save button
Select the channel you want to integrate with
Once it got successfully published, you can navigate to Channels blade again and see the Microsoft Teams channel in running state.
MS teams on running state
Now, switch to Microsoft Teams client, select "App Studio" from the left navigation bar if you dont have App studio, just install it from here
Click "Manifest Editor" tab and then click "Create a new app" button.
Create a new App on teams
Fill all the details which are necessary and mandatory,
Add the details and make sure you get through all validation
Next in Capabilities -> Bots" choose your Azure bot from "Existing bot" tab's drop-down list and then define its scope in MS Teams, e.g. "Personal" and "Team" for your users to chat with the bot directly and within specific teams.
Setup the bot
Finish -> Test and distribute", use "Install" button (if you have MS Teams administrator access) or "Download" button (to send .ZIP package with the manifest details to your MS Teams administrator) to make your bot available in your MS Teams environment.
We're adone
If successful, then you should be able to chat now with your bot directly from within MS Teams.
BOT in Lit Mode
The above can be integrated into any social media platform listed in the channels and its quite easy
You can also consider using HealthCare Bot if you are focused to have the chatbot to handle related scenario only and he is a detailed article on how to build the same.
Modify your bot with lot more cool features with images and more content via the code (either c#/Node)
Keep the knowledge base upto date : As shown aove it is important to keep your bot's knowledge base up to date. You can just navigate to the QnA maker website and click on Save and Train button and publish as we shown above.
I am sure this would be useful to those who have built COVID trackers , you can just create and embed this chat bot within your web application, and for others to support employees who are working from home you can extend this bot on the respective collaboration tool. Let's fight against COVID with these cool technology and make this world a better place. Cheers!
It's been almost a week since Angular 9 was released which included several new features such as new Ivy Renderer, SSR, Type checking etc. In this post, i will be going through on how to build and deploy an Angular9 application as a static website to Azure with GitHub Actions.
We will use the package by Wassim Chegham to deploy the application to Azure. Next step in your Angular project make sure to install the Hexa.run CLI as a prod dependency as you can see from the package.json of this project.
Next step is to create the necessary resources to deploy the angular application. In this way, we will deploy our application to static website for Azure Storage which is the optimum option to host a single page application (SPA) on Azure.Hosting a SPA in pure Storage is by far the cheapest and most efficient way of running in Azure.
You can login to azure account with the command,
npm run hexa:login
which will list down the available subscriptions and you need to pick the subscription where you want to deploy the application.
Next step is to initiate the configuration needed for the deployment of the application. Run the Hexa CLI command as follows,
npm run hexa:init
which will ask for few inputs from the user such as the project name, storage account name and the destination folder. Eventually, you will see a new file generated as hexa.json which will look like the below,
You need to use the service principal identity mechanism to do the authorization of the deployment. In order to generate the service principal using hexa, run the below command,
npm run hexa:ci
Hexa.run will automatically:
create an Azure resource group (or lets you choose an existing one)
create the Azure storage account
configure the storage account and make it static-website ready
upload the angular bundle.
prints the generated URL from the Azure service.
Also it will generate the necessary credentials as a JSON and make a note of them.
Now it's the time to create the Actions workflow, you can create a new workflow by navigating to actions and click New Worfklow. There are few sample template workflows available , in this case we will use own workflow. So you need to click on setup workflow yourself.
Setting up own workflow GitHub Actions
Immediately you could see new workflow.yml file created where you need to add the steps and actions needed to deploy the app. Here is the workflow file look like after adding all the steps.
name: Deploy to Azure with Hexa.ru on: push: branches: - master - release/* jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x] steps: - uses: actions/checkout@v1 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: npm install run: | npm install - name: npm build, and deploy env: AZURE_SERVICE_PRINCIPAL_ID: ${{ secrets.AZURE_SERVICE_PRINCIPAL_ID }} AZURE_SERVICE_PRINCIPAL_PASSWORD: ${{ secrets.AZURE_SERVICE_PRINCIPAL_PASSWORD }} AZURE_SERVICE_PRINCIPAL_TENANT: ${{ secrets.AZURE_SERVICE_PRINCIPAL_TENANT }} run: | npm run hexa:login npm run build -- --prod npm run hexa:deploy
As you could see, the steps are very much simple starting with installing the dependencies and deploying the angular application using the hexa:deploy command.
Also you need to configure the secrets in the github repository which were generated in the step 6. You can create a new secret by navigating to settings and then secrets. you need to define the below secrets which are associated with the service principal.
Github Secrets
The rest in the workflow can be easily understood as its about the environment and the trigger(whenever someone push the changes to master/release there should be a build)
Step 9 : See Github Actions in Action
Immediately when you save the workflow.yml you can see there will be a new build triggered and the steps are executed, which you can notice in the Actions tab as follows,
That's all you need to do inorder to deploy the Angular application to Azure. If you need to include end to end testing and different tasks you could simply modify the flow and it. Github Actions definitely a future to believe in! Try this out and let me know if you have any queries! Cheers!
It's been almost a week since Angular 9 was released which included several new features such as new Ivy Renderer, SSR, Type checking etc. In this post, i will be going through on how to build and deploy an Angular9 application as a static website to Azure with GitHub Actions.
We will use the package by Wassim Chegham to deploy the application to Azure. Next step in your Angular project make sure to install the Hexa.run CLI as a prod dependency as you can see from the package.json of this project.
Next step is to create the necessary resources to deploy the angular application. In this way, we will deploy our application to static website for Azure Storage which is the optimum option to host a single page application (SPA) on Azure.Hosting a SPA in pure Storage is by far the cheapest and most efficient way of running in Azure.
You can login to azure account with the command,
npm run hexa:login
which will list down the available subscriptions and you need to pick the subscription where you want to deploy the application.
Next step is to initiate the configuration needed for the deployment of the application. Run the Hexa CLI command as follows,
npm run hexa:init
which will ask for few inputs from the user such as the project name, storage account name and the destination folder. Eventually, you will see a new file generated as hexa.json which will look like the below,
You need to use the service principal identity mechanism to do the authorization of the deployment. In order to generate the service principal using hexa, run the below command,
npm run hexa:ci
Hexa.run will automatically:
create an Azure resource group (or lets you choose an existing one)
create the Azure storage account
configure the storage account and make it static-website ready
upload the angular bundle.
prints the generated URL from the Azure service.
Also it will generate the necessary credentials as a JSON and make a note of them.
Now it's the time to create the Actions workflow, you can create a new workflow by navigating to actions and click New Worfklow. There are few sample template workflows available , in this case we will use own workflow. So you need to click on setup workflow yourself.
Setting up own workflow GitHub Actions
Immediately you could see new workflow.yml file created where you need to add the steps and actions needed to deploy the app. Here is the workflow file look like after adding all the steps.
name: Deploy to Azure with Hexa.ru on: push: branches: - master - release/* jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x] steps: - uses: actions/checkout@v1 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: npm install run: | npm install - name: npm build, and deploy env: AZURE_SERVICE_PRINCIPAL_ID: ${{ secrets.AZURE_SERVICE_PRINCIPAL_ID }} AZURE_SERVICE_PRINCIPAL_PASSWORD: ${{ secrets.AZURE_SERVICE_PRINCIPAL_PASSWORD }} AZURE_SERVICE_PRINCIPAL_TENANT: ${{ secrets.AZURE_SERVICE_PRINCIPAL_TENANT }} run: | npm run hexa:login npm run build -- --prod npm run hexa:deploy
As you could see, the steps are very much simple starting with installing the dependencies and deploying the angular application using the hexa:deploy command.
Also you need to configure the secrets in the github repository which were generated in the step 6. You can create a new secret by navigating to settings and then secrets. you need to define the below secrets which are associated with the service principal.
Github Secrets
The rest in the workflow can be easily understood as its about the environment and the trigger(whenever someone push the changes to master/release there should be a build)
Step 9 : See Github Actions in Action
Immediately when you save the workflow.yml you can see there will be a new build triggered and the steps are executed, which you can notice in the Actions tab as follows,
That's all you need to do inorder to deploy the Angular application to Azure. If you need to include end to end testing and different tasks you could simply modify the flow and it. Github Actions definitely a future to believe in! Try this out and let me know if you have any queries! Cheers!
I have come across this question about "How to deploy a web app within a sub folder on Azure" in Stackoverflow many times. Even though there is an official documentation, this question has not been addressed in general. With Virtual Directories, You could keep your web sites in separate folders and use the ‘virtual directories and applications’ settings in Azure to publish the two different projects under the same site.
However, say if you have an ASP.NET Core/Angular app to a sub-folder inside Azure Web App (App Service), and wanted to deploy on Azure inside a sub-folder. You can simply navigate to Azure portal -> Select the Web App -> Overview
Download the publish profile
Import in Visual Studio
Edit the web-deploy profile(Normally the publish profile will have Web Deploy as well as FTP profile)
Change Site Name from your-site to your-site\folder\sub-folder
Change the Destination URL from http://your-site.azurewebsites.net to http://your-site.azurewebsites.net/folder/sub-folder
Publish
You should be getting an error as follows,
System.TypeLoadException: Method ‘get_Settings’ in type ‘Microsoft.Web.LibraryManager.Build.HostInteraction’ from assembly ‘Microsoft.Web.LibraryManager.Build
You can resolve the above issue by updating the nuget package named Microsoft.Web.LibraryManager.Build in your project.
One other thing that you should be aware is that, Go to portal > demo-site App Service > Configuration > Path Mappings > Virtual applications and directories. And add the following,
Virtual Path
Physical Path
Type
/folder
site\wwwroot\folder
Folder
/folder/sub-folder
site\wwwroot\folder\sub-folder
Application
Configuration Virtual Directory
Now publish from Visual Studio. If you only need to publish to a first level folder, i.e to your-site\folder, then all you have to do is, change the Type to Application in the Path mappings for /folder, and skip the sub-folder entry since you don’t need it. And correct the Site Name and Destination URL in the publish profile accordingly.
Hope there will be no more questions on the same. Happy Coding!
