Microsoft 365 Community Microsoft Teams, 16 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build Bots using Microsoft Teams Toolkit

Description

In this 17-minute Developer-focused demo, Ayca Bas demonstrates on how to get started on building bots using Microsoft Teams Toolkit. The Microsoft Teams Toolkit extension enables you to create, debug and deploy Teams apps directly from Visual Studio Code. It's a great tool to streamline your development experience for Microsoft Teams with support for different extensibility options and automatic publishing of the solution to corporate catalog and to public store.

Demo Presenter: Ayca Bas (Microsoft) | @aycabs

Supporting document:
• Microsoft Teams developer documentation | https://docs.microsoft.com/en-us/microsoftteams/platform/?WT.mc_id=m365-15744-cxa
• Documentation - Build apps with the Teams Toolkit and Visual Studio Code | https://docs.microsoft.com/en-us/microsoftteams/platform/toolkit/visual-studio-code-overview?WT.mc_id=m365-15744-cxa
• Documentation - What are conversational bots in Microsoft Teams? | https://docs.microsoft.com/en-us/microsoftteams/platform/bots/what-are-bots?WT.mc_id=m365-15744-cxa

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hi everyone. Today we are going to learn how to build a bot using microsoft teams toolkit my name is itabus and I'm a cloud developer advocate at microsoft, developer relations. So let's get started. Let's start with installing microsoft teams toolkit first.

A

I will open my visual studio code.

A

Then I will go to extensions here. I will type microsoft themes toolkit and the first one appears in the list is going to be our toolkit click on. It then, first make sure that you have all the required prerequisites available. You need visual studio code and node.js.

A

After that, go ahead and click install once install is completed. You will see there is a teams icon appearing on the left hand, side, menu, click on microsoft, teams, icon.

A

Then there we go, we have our microsoft teams toolkit available for us now, it's time to build the bots with it.

A

Our team's extension is ready, so it's time to create a bot.

A

Now I will click on, create a new teams app. Then I will give it a name any name you like, I will call it teams dash demobot, I click enter, and now I need to create a new folder. You can call the folder any name you want. I will call it demobot and choose workspace folder here before we move any further. We need to sign in so that our bot framework will be connected. In the same account. I will click sign in.

A

Then I will choose my demo tenant created through m365 developer program.

A

Once I log in I can choose any capability I want. We can create a tab, bot or messaging extension for this demo. We will create a bot, I will switch it on. Then I will click next here. This is the place where we're going to complete our configuration.

A

You can either create a new bot or you can use existing bot registered with bot framework. At the same time, you can rename your bot or you can create your bot as microsoft teamspot. I will rename it as teams dash demo bot. Then I will click create once our creation is completed, it will show as success and it will give us a name of the bot id of the bot and password.

A

Let's go and finish.

A

Then here we go, our bot is available with a great readme file. Before we move forward, let's go ahead and check if our bot is registered in bot framework and if it is appearing in the bot framework page, I will open my browser. Then I will go to.

A

Dev.Framework.Com.

A

Make sure you log in with the same account that you sign in in the themes toolkit I will go to my bots. Then there we go. Our bot is available under the bot framework. Let's click to our bot.

A

Now, as you see, microsoft teams is assigned as a channel automatically for our bot. It's because we created our bot through microsoft teams toolkit and our bot is running healthy right now.

A

So now it's time to test our bot on teams app studio.

A

We have a great documentation when it comes to testing and running our application before we move forward how to run our app and how to test it on app studio on microsoft teams, we first have to complete the dependencies. We will need node.js and clock and to be able to get required permissions to install an app. We will need enter 65 developer account, which you can get from enter 65 developer program once we are done with our dependencies.

A

Next is running our ang rock. We are going to run our anc rock by pointing the port 3978 and to be able to do that. We will need this script, so I will go ahead and open my ngrok. I install it and unzip it under my desktop.

A

You can unzip it wherever you like, and I will double click it.

A

This will open my terminal and I will just paste the script. I need to.

A

A

Now my localhost 3978 is forwarded to the following ngrok url. I just need to copy this and make sure that my messaging endpoint url also goes to this forwarding url, let's copy this and turn back to our code.

A

Let's continue following our documentation. We now need to update both framework messaging endpoints. Before we move forward with updating our messaging endpoint, we first need to update our base url under dot, publish folder, let's go ahead and update that one first I'll go under publish then development that end here in base url. We are not going to use localhost anymore, but we forwarded our localhost to ngrok. I will paste our url here then I save it. Let's turn back to our documentation.

A

Next step is to update messaging endpoint url. To do that, we need to first go to bot management and we need to make sure that we create the endpoint url as our dot io, slash api, slash messages, let's go to bot management here we need to sign in with our demo tenant with that. We sign in while creating our bots make sure it's the same account once we sign in. We should be able to find our bots available under the existing bot registrations.

A

There we go, we had teams dash demo bots.

A

When I choose this, if we scroll down here's the place, we put our bot endpoint address, let's paste our ngrok and, let's not forget, we need to put slash api, slash messages.

A

Then, on the right side, we need to make sure we get the green tick.

A

Okay, once we get the green tick now we can turn back to our file, documentation, scroll down and we just completed adding our endpoint url. Now it's time to build and run our application, we need npm install first in the project directory. I'm gonna run npm install here.

A

A

This may take couple of minutes. Now we're done now it's time to run our app, so we will type npm start.

A

With that we will run our application under localhost 3978 and our ngrok is listening exactly the same localhost url. Now it's time to deploy our application to themes app studio, so we make sure that we are listening the same local host from the end rock.

A

Now, let's open our teams, I will open a private window I'll go to teams.microsoft.com.

A

Let's make it bigger. I will log in with the same account I created my bots.

A

Now we will use web version okay, so if you don't have app studio installed, yet you can go to um you. Can click on three dots on the left hand, side menu, and then you can click more here. You can search app studio and you should be able to find app studio here. If you click it, then you can click open. If it has not installed, you can click install.

A

Then it will automatically install for your microsoft teams. Next is we will go to manifest editor and we will import an existing app. Let's find out our project folder, which is demo bot for me. I will open my project now we will go to that publish and under you will find a zip file which is development.zip.

A

I will select this now. This will open my project so before we deep dive into our manifest and the project. What do we have here in app studio? Let's test our bot first, I will click on test and distribute and I will install my bot.

A

I will click add. Now we should be directed to our themes, dash demo, bot, okay, let's try. I will type hey and, let's see yeah, so our bot is responding. It's responding with. Let's talk and there's a button called say hello. Let's click on the button.

A

Now our bot responded us with hi mod administrator, which is our username here. If it is something else like icha or somebody else, then it will say hi I cha and so on. Let's try to type hello.

A

Again, this will respond back with hi mod administrator.

A

Let's check out what do we have in the project? I will go to app studio again open the manifest editor. I will find my bot here teams demo bot, let's check out. What do we have first page is coming up which is app details here we have the short name full name. We have identification descriptions, we have short description, full description, developer information.

A

You can change all this and we have branding if you're interested in adding some pictures as a logo and branding you can do that. You can customize your bot. However, you like, if we go to dots under capabilities here, let's scroll up, you should be able to see your bot id and it should be exactly the same that you created through teams toolkit and we have the password. We have messaging endpoint.

A

That means that we can change our messaging endpoint through app studio as well, so you can either do it through teams toolkit or you can manage everything from app studio and, let's scroll down.

A

Here we have languages, so you can change the default language and the region.

A

We have domain and permissions our domain right now is our ngrok, but once you publish your app it's going to be your website url or bot url. This is the app manifest.

A

So you can change your app manifest from app studio 2. and finally, this is the place where we test and distribute our bot. So when I install it again and click add.

A

I should be directed to my bots: let's see, how do we do that in the code site.

A

So I will go to bot activityhandler.js first and here this is my code- that I have all of my dialogues inside so far.

A

We don't have much dialogues or messages, but I'm seeing here that we have a switch and we have one case only so when I write hello, then my bot understands hello and it responds back with hi and plus my profile name display name, and if I write something else, it's run the default, which is the adaptive cart, which is showing me hero card with, let's talk and giving me a button as say hello, if you want to add another thing and test your bot, you can add it as another case here under case hello.

A

You can add a new case and test your bot if your bot is responding back to new actions as well.

A

And finally, we have index.js which our bot framework, adapters and handlers available here.

A

And we are basically reading our app id and password, which is our bot.

A

And we have our server post running the bot activity handler and, finally, if you would like to publish your application, if you think that your bot is ready, you can go to publish here, you need to choose the environment. Our hours is development.

A

And these are the options where you can publish your app. You can either publish your app on contoso app catalog, which means publishing your app under your organization only or you can publish your app under microsoft appsource. That means that, once it is approved, your app will be publicly available for all microsoft teams. Users.

A

Thanks everyone for joining today's session. I hope you find it.

A