Here you can find the transcript of Episode #146 of PiaSys TechBites.

Welcome back to PiaSys Tech Bites. Today, we’re back talking about Yo Teams generator version three, and specifically, I want to explain you how to create a Bot using Yo Teams. So, first of all, a Bot is nothing more than an app, that the users interact with in a conversational way. From a technical point of view, a Bot is just a REST API registered in the Azure Bot services as a Bot Channel Registration, and from an internal implementation point of view, there is an activity handler which will process activities, which can be defined by a message type or an activity type, which could be for example, a message, a message reaction, an invoke, an event and stuff like that. And the activity handler will reply back to teams through the Bot infrastructure, providing yet another activity again, with an activity type, which could be a message typing activity or stuff like that.

With Yo Teams generator version 3.x, We can simply and easily scaffold the basic infrastructure of a Bot, and we can then create our own logic inside the scaffolded Bot logic.

So let me move to the demo environment. Let me show you how to create a Bot with Yo Teams version three. So Let’s start scaffolding the solution using the Yo Teams Generator. Here I am in the Console window. Let me start Yo Teams. As we already saw in the previous episodes about Yo Teams, we simply need to provide a set of answers to the scaffolding tool, to the Yeoman Generator scaffolding tool. So this will be the name of my solution. I’m going to use the current folder, this is a correct title and that’s the author, I will use version 1.8x of the schema manifest. I want to use the quick scaffolding to speed up the process, and I want to create a Bot.

Moreover, this will be the URL for my Bot when it will be hosted on Azure and I eventually can provide a loading indicator or not. Then I want to create a Bot based on a new frame or Bot meaning that I will have to create a new Bot channel registration on Azure, which is something that I’m going to do really shortly. I will provide a name which can be Demo Bot Tech Bites, for example, and I will have to provide the ID of my Bot. In order to do that, I will switch to Azure and I will create a Bot Channel Registration. By doing that, I will have to provide a name for my Bot, which can be for example, PiaSys Test Bot 01. I will choose this subscription and the corresponding resource group. I will place my Bot Channel Registration in North Europe, and I will choose the free one.

I don’t need Application Insights. And as the URL of my REST API I will provide https the ngrok endpoint that I will use to publish my solution and then /api/messages. And I can click on create and wait. And in the meantime, I will simply fade out and fade in to save some of your time, and here it is. So let’s go to PiaSys Test Bots 01. We can go to configuration and manage, and there we can get and grab the application ID, which we will use while scaffolding the solution as well as we can go to certificates and secrets, and we can create a new client secret, which we will use later on. And let me copy the value for the secret in a safe place. Of course, right after this video, I will delete, like always the Bot Channel Registration.

So if I go back to my Bot channel, I can go under channels and I can configure this Bot channel registration to interact with Microsoft Teams. So I click on save here to use the commercial one. I agree on the terms and that’s it. In a matter of two seconds, my Bot Channel Registration will be ready to interact with Microsoft Teams. As such we can go back to the console scaffolding tool. We can copy and paste the ID of the Bot Channel Registration application. And we can proceed with the scaffolding tool. We don’t need a tab for our Bot. We don’t need to support uploading files and including Bot calling capability neither, so we can just scaffold the solution. And again, I will fade out and fading when it will be reading.

And the solution is now fully scaffolded. So I can simply say “code .” and we can see what regenerated code is. So let me show, Visual Studio Code in full screen here, and we can see, we have the well-known environment file of yo teams, where we can see that we have the application ID that we configured, and we can get rid of this duplicate. And we can add a password here, which will be the shared secret that I created before. I can configure the ngrok sub domain here in order to publish my API with the correct URL. And then we can see in the SRC folder that under the self server sub folder, we have our DemoBotTechBiteBot. Here. We have a TypeScript file, which implements the actual logic of our Bot. So for example, here we configure the onMessage event handling.

And here we get a turnContext object, which will include the activity property. And we can inspect the type of the activity. And we can see, for example, that when we get a message, we do something like replying back to the user in different flavors. So if we get the hello, lowercase hello message, we simply reply back “oh, hello to you as well”. If we get an help, we reply back with the dialogue, dialogue which will be based on an help dialogue defined in this type, extending the dialogue base type, or we can also provide just a default response for any other kind of request.

Moreover, we have the on conversation update event, and when that’s the event that get triggered in that one, we simply use the adaptive card APIs to use the card factory and to create an adaptive card based on this definition, which is based on this JSON adaptive card, made of a TextBlock with a welcome message another TextBlock and an action to open a URL, to learn more about Yo Teams and another one to learn more about the Bot solution that we just created.

And moreover, we also have the onMessageReaction event, which we can use to react to any reaction from the user. So if the user will like or react on any of our Bot generated messages, we can reply back to the user and say, okay, that was an interesting reaction and provide the type of reaction that we collected. So let me start this solution. Let me run a new terminal instance and we can simply do gulp ngrok-serve. And we will start running our local server to being able to process the request for our Bot. Once the server will be running and it is a matter of few seconds now, and it’s ready. Now we can go back to our folder. We can copy the path of our solution, and we can go to a teams solution like this one, we can go to apps and we can choose to upload the custom app for the whole tenant.

I can go to the folder where I created my solution in the package subfolder, and I can install my solution in the target tenant. Once I’ve done that I can click on it and I can add the solution to my target tenant. And here we are. Now, we already see the welcome card coming back from the Bot. And if I switch back here, we can see that we have got a post to the api/messages endpoint, because we have got the conversation update for the initial conversation. And we can reply back to the Bot. We can say hello, and the Bot will reply back to us. We can say help, and we will get the dialogue help card and so on, so forth. Now, if you want to do something, let me say smarter or better than the, just out of the box behavior, for example, we can see that here, when we process an activity and we’ll reply back with another activity, actually, we also have a method called the sendActivities that we can use.

And the sendActivities is a plural one, will allow us to provide the back in the conversation, not just one but multiple activities, so an array of activities. And for example, we can provide back one activity which will be of type, ActivityTypes.Typing, to give the idea to the user on the other side, that the Bot is typing something and thinking about the response, like there is a real intelligence in the backend. We can then provide a type delay for example, so that we will simulate a three seconds, this is a number in milliseconds, of delay to simulate the thinking and the typing. And then we can reply back with another message which will be ActivityTypes.Message, and will be the actual content of the message that we want to provide. And we can say hello back to you. So by doing that, we simply updated the logic of our bot in the onMessage event. We can save the server is running again.

So I can go back to my Bot, and now I can say again, hello, but right now we will see that the Bot will be typing the response you see here. And after three seconds, we will get the actual response and we can then like the response. And we will see that the Bot would reply back. That was an interesting reaction heart because we process the messageReaction with this event. So really simple, really straightforward, and you can have true fun developing Bot with yo teams.

Like always thank you for watching this video. I hope you found it useful and we are looking forward to seeing you next week and remember to subscribe to this channel. Thank you.