Walkthrough - Building your first Microsoft Teams app in JavaScript

hello i'm microsoft mvp tom morgan in this video we're going to walk through building your first microsoft teams developer app with javascript we're going to do this by following one of the guides that's available on the microsoft documentation and i'm going to go through the whole process with you you can follow along on my screen chat as we're doing it and then that way you can see how easy it is if you get stuck doing it yourself you can refer back to this video or you can just watch with me and see the steps i go through and then you're ready to jump into creating your own uh teams app using javascript okay so a little bit about this video and my setup as much as i possibly can i'm going to do this without any editing so you can see everything that goes on if we get stuck if we hit problems that's really useful for you because probably you're going to hit those problems too so let's work through them together let's come out the other side with something working i'm going to be doing all of this on a virtual machine that has nothing installed so we're going to go through all the prerequisites as well so you understand exactly what you need to do you might not need to go through all these prereq steps you might have stuff already installed and configured but if you don't we can go through all on this video that way you can drop in and out of it as you need to okay let's get started so first things first uh let's drop over to my vm so you can see what i'm seeing so this is my vm as i say this is a brand new virtual machine there is nothing on it at all what i've done really the only thing i've done apart from sign in is open up edge and go to the get started overview for the microsoft teams developer documentation so that's docs.microsoft.com slash microsoft team slash platform slash get dash started get dash get dash started dash overview i'll put that up on the screen in the edit so uh you don't have to kind of listen to me saying it let's full screen this for a second this is where we're going first building your first app using javascript let's load this page okay let's walk through this together so this is you're going to start building for microsoft teams and you're going to create your first teams app so first of all let's just make sure we understand each other what does that actually mean we're going to put something inside teams we're going to actually create three things looking at this we're going to create a tabbed app a bot app and a messaging extension app which sounds really interesting for a first app and each one is going to have a capability it's going to come with its own ui and ux okay so tabbed apps what are they okay well they show up in channels so if you think about teams and you've got different teams down the left-hand side of the team's client and then inside that you've got different channels inside a channel you can have different tabs you've got the conversation tab the files tab you can add other ones like wiki there's lots and lots of other tabs you can add as well you can put your own tab in there as well and that's what we're going to be doing a bot one of those kind of chat message extensions so you can um have a conversation with something like a machine a bot it shows up in your chat history shows up as a contact you can chat with that's exciting and messaging extensions what are they okay well they show up where you go and compose a message down at the bottom where the gifts are and the emotion emoticons are and all that sort of stuff you can put your own thing down there as well all right so what are you gonna need uh don't know i thought that's what this was going to cover it's not it's going to tell us what we're going to learn so houses have a new project with something called the teams toolkit how to build three different types of apps the structure of them uh we're going to look a bit with react node.js how to deploy okay let's go let's begin so there's a whole set of prerequisites here some are required and some are optional all right so let's have a look required so node.js a back-end javascript runtime environment okay i've never done this before so let's open up this in a new browser and see what happens okay so it takes us to the node site node.js.org and we've got an lts recommended for face most users and a current well i'm going to go with this lts recommended for most users because i feel like that's probably me i'm running on windows i've got a nice new windows 11 install going on here so i'm going to click the windows installer that's going to download and we can install that hopefully so let's just step through that process and see if there's anything complicated about the install um you should check the terms the license agreement um and accept it i'm just going to go to the default location i'm going to leave everything exactly as it kind of as it was or i missed that bit about what was that something about c and c plus plus i don't think i care about those uh let's just go install okay so that's going to take a second to install and we're done okay so i think i think that's the node bit done that was easy microsoft edge or chrome okay well we've got microsoft edge that's good visual studio code we don't have so use version 1.55 or later okay so let's open this in a new tab and see where we get to oh this takes us nicely to the download page for visual studio that's great and there's a big windows download link so let's click that one and that runs the download and we can also click that one so this is 1.61 and we have to download 1.55 or later so i think we're good uh where's it gone this user installer is not meant to be running administrator okay uh if you would like to install vscos for all users i don't want to do that i just want to install it for me i think it's saying because i'm an administrator it's moaning at me i mean i'm okay with that for now um okay acceptance agreement again install it in the default place click click click uh let's just kind of keep all the defaults exactly as they are should be fine um but if we hit any problems we can always come back and have a look okay and the other thing that i haven't really installed is teams microsoft teams client um and i didn't think about that until i kind of started recording this video that's okay you might not have the microsoft teams client either at some point in this process we're gonna have to remember to download the microsoft teams client um so for now let's uh this is finished the visual studio code setup wizards finished so we can let's untick launch video studio code for a second and click finish okay so we're done with that uh so we're done with all our required prerequisites great so let's have a quick look down at these other things do we do we need any of these i don't know um i think let's not worry about them for now and we might come back to them if they become required if it seems like they become required as we're going through these other sets we can always come back to to them all right so let's prepare our development environment install the teams toolkit okay so what's the team's toolkit team's toolkit is an extension for visual studio code so visual studio code is the thing that we literally just installed it's an ide it's a bit like a really cut-down version of visual studio if you've used visual studio before except that it's actually become more and more and more feature rich and now like it's its own thing so actually it's pretty powerful it's just a different ide for visual studio um it's got a concept of extensions and so one of those extensions is called the team's toolkit that helps us build teams applications it's scaffolding for building teams applications okay so let's get started building and installing the teams toolkit so okay you can use the toolkit with your studio code or the cli bloody bloody blah okay well we've got obviously your code let's use that so first things first we need to open visual studio code so if you've just installed visual studio code and you don't know how to get back to it you can click on start and you can just type visual or vis and you should find visual studio code listed here so we're going to run visual studio code for the first time let's see what it says uh okay so it wants to know what look we want okay uh we should probably do that uh oh dark i think we can maybe skip all these steps you might want to go through these and do some syncing add some shortcuts add support for languages i'm just going to click mark done and we're just going to kind of leave it for now let me take these instructions and dock them on this side of the screen and let's bring visual studio back up on this side of the screen so now we can kind of go through what we're doing uh open visual studio select the extensions view okay that is this little icon here this little four boxes that is the extensions view so this brings up all the extensions in the search box we want to enter two teams toolkit so let's do that here it is at the top big teams icon teams toolkit so let's click that let's click install and that will take a second to install and when it does you will see that it shows up here uh as an icon on the sidebar so that's very cool and right so let's refer back to our documentation so well let's try and full screen this okay so this bit is done the team's toolkit icon appears in visual studio sidebar after it's installed yep we see that good up your team's development tenant okay so we do need teams at this point so if you don't have microsoft teams at this point uh you need to go and find microsoft teams from somewhere i'm going to kind of assume that you've got teams set up somewhere you're running teams you've got a login for teams and that actually isn't true for me on this machine right now because i don't have teams if that was the case what can you do about it i could go to teams.microsoft.com i could sign in as an account let's do that do do do do okay we got past the word let's join which is nice which means i don't have to type a password on the screen for you to copy so that's nice and okay and let's sign in stay signed in and this is going to load the team's client this is not this webview for uh running teams is great but it's not the best for doing development there's some things that you might kind of come unstuck so i would recommend using the desktop client for all your kind of development needs for everything um whilst you're building it as a developer i'd use the desktop client unless you specifically know that you want to use the web client to try something out or something like that okay okay so i've got a i've got a really funny old setup so um what am i missing i'm missing all sorts of things in my sidebar but that's okay good example of how you can have a completely different looking sidebar um but it doesn't matter okay so i've got teams here however what i'm going to do is download the teams client so easy way to do that is these three dots at the top when you're in the web client oh you can't see because my face is in the way hang on um right these three dots uh up here up near your name and tenant name click those click download the desktop app okay that gives you a link to download the latest version of teams for the platform you're on so in my case windows x64 so we'll run that um in a second and that will put the team's desktop client onto this machine so all this stuff is worth doing before you even get anywhere close to starting doing any of the kind of development work all right so i could probably close this tab now actually because what we're going to do is run the installer and then we'll have teams running as its own application um i'm hoping it'll pop up in a minute uh with the installer it might not let's look uh oh let's just open anyway did that work did that not who knows uh let's just go looking for it in the download folder then and so we can double click it maybe to run it oh i'm not sure if it's doing anything or not to be honest okay it's just kind of slow we might oh we are now going to end up with lots of different versions okay so it might just be my vm and the vm that i'm using here might just be kind of a bit slow um because oh now we're getting all sorts of oh it's a funny error um i wonder if it's going to say that for all of them yeah i think it might well this is interesting okay well i think maybe what happened is i opened this multiple times and then my vm was a little slow so it took a very long time to do the first one um but now it seems to be okay like one of these seems to have worked so let's click on get started maybe it was just installing um and it never kind of like you double clicked it and it installed it without actually saying it was going to install but it does look like it's kind of installed now so let's find out uh if i could type i probably need to sign in again okay i don't actually know what that means that's a kind of different signing experience to the one before where it like just wanted to um kind of pop the notification i'm not quite sure what a code means i mean maybe it sent it to my email let's have a quick look at that that might be what that means is the email address so that would sort of make sense right um don't think well that's fun so when it does this let's go back here and maybe me [Music] i mean let's try it again see if it does anything exciting i don't think it's going to um wonder what that means hmm odd message let's close everything and start again right okay so let's restart restart teams and try that process again i didn't think this would be where we would get stuck so switch teams app to sign in using a microsoft account oh uh chat club right using your work or school account switch teams app to sign in using a microsoft account i think i want to use the one with my workload account um so tom art stuff okay work account okay that's better i don't know what happened before maybe i mistyped it i don't know whatever this is what i kind of expected which is the passwordless login uh you can optionally do this i'm just going to say sign in to just this app for now uh it doesn't make an awful lot of difference to teams or for what we're doing um today okay so let's make sure we have teams that was an involved process wasn't it once that's loading let's come back and see what we actually need to do with teams so after creating your app so we're into like after you've actually made your app you need to load your app in teams without distributing it this is known as side loading yes so we're going to create the app and we're going to make it run on our version of teams without putting it in the store or giving it to anyone else do you already have a tenant do you already have admin access let's check if you really do okay so in the team this is a good process to go through so in teams client uh [Music] one more step to set up teams with office okay i guess so good all right uh so in the teams app what we need to do is go to apps which takes us to the store next thing we need to do is click manage your apps and look for an option to upload a custom app okay i don't see that option i don't see the option to say i can upload to my aux app catalog because i'm an admin and i could submit an app to the org but what i don't see is the option to sideload okay so if this is you then you need to do something else so the first thing you need to do is go and find an administrator and tell them that you want to be able to upload custom apps if you are an administrator and you want to know what to do next that's okay too so let's do that together so let's go to admin.teams.microsoft.com so if you're not an admin you can safely ignore this section or you might be interested in seeing what it looks like so this is the microsoft teams admin center the bit you want to go to um to figure out what's going on is teams apps and setup policies i think now if you look at my user account um let's just find my user so if we look at policies for my user you can see i've got a strange app setup policy called panel policy which is different from the global one so i can click on this and go and have a look at this policy it will take me to the right place in teams accessor policies and you'll notice that for this policy upload custom apps is turned off so i'm going to turn that on in fact well i'm going to do that that's one thing you could do go and find the policy for the user you care about and go and save it the other thing you can do of course is take that user and put them into a different policy that does have access so that's the other thing i might do as well is i'm going to edit these policies and take the app setup policy where is it and put it back to the global and i want to apply all that okay notice this at the top it may take a few hours for those changes to take effect okay so that's going to be a bit of a pain for us doing this video and doing this work here however i'm going to carry on anyway and we'll come back to this later what i might do actually is sign out of this for now and then when we come back to it we'll sign into it and see if it's changed and see if we get that um setting to upload hello and then we can come back if not i can kind of pause the video i'll wait for it all to sync up and come back again and if that was you if you had to go and turn on custom apps just be aware it can take a little bit of time so constantly come back and check this is what you're looking for this upload a custom app experience if you have that then you're good there's a section down here for if you don't have teams if you don't have access to teams that's useful so if you're watching all this and you don't have access to teams and or even if you do have access to teams but it's really really locked down and you know that going to find an administrator is going to be a real challenge and they're never going to turn on like custom maps anyway this might be a better way to go because you can create your own tenant you can sign out of teams from your kind of corporate or work or whatever it is and sign into this one whilst you're working on this and then sign out again and be done with it sign back into the corporate one it's free to create a team's developer account so that might be a really good place for you to go you become an admin over that as well so you can change anything you want you can go into that team's admin center you've got complete control um so that could be a really good place to go to go and create a teams developer account okay and there's a bit here about hosting uh resources in azure that's another thing we're going to do so i imagine in a minute we're going to deploy some of this stuff somewhere and it's probably going to be in azure so we might need an azure account so that's also worth bearing in mind if you don't have access to one of those you can create a free account there as well so lots of places to go don't feel like this is not open to you at all all right let's keep going [Music] creating a project workspace for your app right okay what are we going to do so what does this work so first things first is building out the tabbed app right so that's what we're going to do we're going to build a tab app this is this part not the bot not the messaging extension so this is going to show us how to set up a tab project and what it looks like all right so we think the prerequisites are in place so let's let's start so open visual studio code we already have it open select the teams toolkit icon in the visual studio sidebar then click create a new teams app all right let's walk through this process so let me full screen this so you can see everything we already you know clicked onto the team's toolkit here it is and we're going to click create a new teams app let's give it a nice name my first teams uh app i guess tab map let's call it tab app okay ensure that the ui based the tab ui based app is selected as the capability so the nice thing about this toolkit uh is that it doesn't cope very well with uh oh here is sorry it does cope very well with tabbing uh okay i don't know how you oh okay you can't press enter don't press enter you've got to click this tick box nope you can't do that either what's going on create a new tab oh what oh did i type the name in there like an idiot i probably did okay don't do what i did don't be an idiot let's start again create a new team's app okay do what it says and select the option which is create a new teams app make sure tab is selected for me that's the default but just make sure it's selected click ok select a hosting type okay let's flip back to the documentation for a second so it says to choose azure as the front-end hosting type you don't need any other resources and you want to choose javascript as the programming language okay we can do that azure and javascript give it a name right now here's where we want to say my first teams tab app and press enter at this point it's going to go and build a whole load of things for you which is great so if you see this yes you want to trust uh the authors of files in this folder that it's been built out for us it's going to go and build a whole load of files for us a whole directory structure to kind of hold everything about our team's app in and in a minute we're going to go through that only takes a few seconds and like the screenshot says we've got this structure here let's go and check that yep look at this like we've got exactly the same as they've got in there screenshot that's great right so now we can take a tour of the source code so we can walk through it so some interesting things to point out so i'm learning stuff i've no idea like so this is the state of your application the state for your app in the folder okay interesting i didn't know that um okay so you've got things in here like settings uh you've got the local environment settings which aren't really sort of set up you've got some default stuff for the local environment um and all the rest of it we've got some app packaging stuff so this is when it builds out the teams that package this is what it's going to use to build that out i've got a folder called tabs that's got some source in it it's got some components in it so if you're familiar with typescript this will be familiar to you if you're not don't worry about it you can see the names here of these things like privacy tab terms of use app so kind of looking like they might be the kind of basis of an application okay and um oh the settings.json i didn't see that uh that's that one is it talking about yeah i think so um yeah we did go through that one uh and then the source code for the actual tab capabilities in the tabs folder yep we were just looking through that and things like apps and tabs and tab config all right what's kind of interesting i suppose is that this also includes a page called privacy and a page called terms of use the reason for that is that when you create a teams application you have to specify a page for the terms of use and you have to specify a page in your app for privacy that's so that when you submit it to the store um that content is all there so what this scaffolding has done is created sort of placeholder pages for you that you can use and the reason for that is that it makes it very easy then to go from the scaffolding code into your team's application without it failing saying i don't have a privacy page i don't have terms of a use page or anything like that all right let's go what's the next step okay sign into your microsoft 365 account um okay well we can do that and what does this do uh okay it shows okay we could do all that we could sign into microsoft 365 for that so how do you do that so open visual studio code go back to the teams toolkit select sign into 365. okay we can do that so come back over here sign into 365. requires an organizational account yeah we've already talked through what the developer program is so i'm just going to click sign in uh this is a brand new machine so it is kind of the first time visual studio has run so i need to announce some firewall rules for this uh sign in as the user i'm already signed in as you are signed in and can close this page great and this is updated to be my m365 account which is all brilliant and i've got some extra things down here now which is exciting now you're ready to build the app and run it locally all right so big moment of truth apparently we just press f5 and it will run right this could take some time to complete all right and you may get a security certificate in which case we'll click yes to it or continue or something and then teams the web client opens in a browser window okay and then we need to add the app so there's quite a few things that are going to happen i think when we press f5 so first of all oh hello uh so node is not in the supported version list click continue anyway if you just installed node 10 1214 restart visual studio code for the change segment we haven't just installed it um no js version 16 is not in the supported version list of 10 12 and 14. now i think that's what is what it's saying is that visual studio code really wants versions 10 12 and 14 and we've got version 16 and therefore it's not happy it's i wonder if there's a good way of proving that so yes look we've we installed version look well say look at the file name we installed node v16 okay however visual studio would quite like v10 v12v14 now what should we do about that what we could do is uninstall node and then go and find version 14 and go and install it that's probably the right thing to do the other thing we could do is sort of say well for what we're using node for maybe there's not that much difference between version 14 and version 16 and so we'll go ahead and try it anyway and i think that's probably what we should do first if we get loads of odd problems we can always come back we can uninstall the node version 16 and we can go and install version 14. so let's click continue anyway and see what it does so it's going to try and build out our project our scaffolding our tab app and this involves going through quite a few processes and things so there's a lot of dependencies that will need to be downloaded because this is the first time this project's ever been built so it needs to download.net core it needs to download a whole bunch of libraries so that is going to take quite a long time if it if i run out of things to talk about i'll pause the video and we can resume once it's ready to go the other thing it's going to do it's actually going to take all of our code and package it into a teams application so i talked about this on the overview video about what a team's app actually is it's a it's a manifest that describes the capabilities so it's going to create a manifest which describes the capabilities of our tab app as being an application that just has a single tab in it and it's going to take all of that together and it's going to make an entirely new teams application it's then going to deploy that kind of open it up if you like inside the team's experience so we're going to see that as showing up uh i'll come back to this in a minute it's gonna uh it's gonna show up in teams as a thing we can add to our team's client and then we'll be able to use it all right so let's talk about this message that's popped up to debug applications in teams your localhost server must be on https okay uh so you may skip this step so teams to trust it wants to install a self-certified certificate okay we're cool with that i think that's the thing it told us might happen and so we'll click continue to that and yes to install this certificate and it's still building things i think or it might actually be compiling now okay so i'm gonna i'm gonna pause the video and i'm gonna unpause it if anything exciting happens unpause things are starting to happen i think it's done all the building um and now oh it's still waiting around a bit i feel like there we go something is happening another firewall thing from node this time so for reference on this machine it took about 10 minutes of uh visual studio code just sitting here spinning doing the build um that first time build is going to take a long time because it takes down all these dependencies has to draw them down so just be aware of that can take a little bit of time what we're doing now is uh i don't think you can see on the screen but it says starting the uh that's not gonna help at all uh starting the development server i thought it might zoom in a bit but it doesn't um starting the development server so it's actually going to host a little web server inside kind of the terminal here that we can use to access and it's going to host our code on that everything inside teams when you're building applications such as tabs they're really just web pages so they need hosting on a web server this is a nice easy way to do it locally it's like a development server that you can use locally uh it'll just sort of happen when you f5 in visual studio code it'll spin it all up and start that web server running for you and that's what's happening right now and compiled successfully and it says that you can view it in the browser which is great what it's also doing is it's going to open up my browser and it's going to sign me in and it's going to probably need me to click this button and do the actual sign in and it's going to try and take me somewhere so let's see where it takes me okay let's say yes and it's going all sorts of places but i think it's going to finally land on oh all sorts of things are happening i'm kind of not going to touch anything taking me into teams oh and this page is having a problem okay error code out of memory all right that's interesting um i feel like that might be a team's problem rather than a me problem um or it's possibly some kind of looping problem i'm just going to click refresh and see what happens and we'll see what it does so i've got an error message over here now to say the window has crashed okay let's click close oh it closed visual studio okay right never mind let's close well we need to keep our instructions going let's keep those there uh i think it's close to everything else right so let's come back again let's start that again i'm not quite sure what happened there could be a combination of an underpowered machine it could be because it's the very first time we're doing all of this stuff uh no matter we can come back in we haven't lost any of the stuff we've done all of that um the downloading of the libraries all of that is um kind of useful needed to happen and what we might find now is that if we press f5 again uh i'd forgotten about that node thing uh it might be it will be a lot faster um to get to the point of compiling to start in the development server and everything so we can try that and we'll see what it does this time around so this stuff is like i'm not going to edit this out because actually this is useful for you like you may have exactly this experience and i don't i don't really know what we're going to do about it yet um but we'll figure it out as we go along and we'll get it working okay so we're already at the starting the development service server section and hopefully any minute now and that will be ready so you can see it's compiled and it's opening up the browser again it's signing in again now one possibility i hadn't thought about is that it might be the change in policy is the problem so i'm trying to sideload an application but if my policy hasn't taken effect then you might get this strange experience and if that's the case we are just going to have to wait um probably a day or so before the um the policy takes effect or maybe you know it says to wait an hour or two sometimes i think you can you should wait kind of 24 hours because all this stuff gets cached as well so i think what might be what might be happening here is that because my old policy doesn't allow side loading but my new policy does the new policy hasn't quite taken effect yet let's have a look at some of these error messages we've been ignoring um to see if there's anything in here there's a 503 response um from from teams from local.teams um source map i don't know if that's related or not uh these may actually not be real errors you know they may be actually fine i did see a cannot find teams app entitlements so that sort of makes me wonder actually yeah is it something to do with the policies that's the problem i think probably it is that would be my guess the other thing we can do to test that theory out a little bit is to try and close this again let's try and stop debugging as well let's come back to teams here and see if we get the option to sideload those apps yet okay manager i do actually see that option to upload a custom map now which is interesting so i didn't see that before so that means that policy has now been applied which is great i wonder if this is a resource problem that's annoying what i'd like to do is this i think so i wonder if i'm under underpowered on my machine so what if that's the problem so this is a weird inconsistent state where you know maybe teams in edge for whatever reason something it might not be it might not even be teams in edge it might be the combination of that plus visual studio code all of it is a bit too much memory for four uh for four giga memory and so things are kind of breaking down a little bit that's kind of what this looks like with this kind of stuttering the kind of giving up we did get that whole message about being out of memory so what i'm tempted to do at this point is to go and give this this machine a bit more memory and come back and try again so that's what i'm going to do now so you won't notice this but i'm going to go away reprovision up the the ram a little bit on this machine and come back and i'll see you in a minute okay i'm back and this time hey this time i have 8 gig of ram same machine same setup so let's get back to where we were visual studio code teams is opening as well for good measure uh let's close it for now all right let's press f5 again so we're starting the development server process again this might take a little bit longer because of the restart okay let's see what happens this time round there we go fantastic right let's close some of this stuff move some of this stuff out of the way so you can actually see what earth is going on so what it's asking to do what it's prompting to do is to add this app this microsoft teams app and this is an app that's literally just come into being when we compiled this code and the app manifest has been built it doesn't exist in an app store or anything like that we are sideloading it so that means our policy obviously works and i can click add at this point it's going to add the app and the really interesting thing about this this is running in teams but it is also kind of all just happening locally so kind of amazing for to like go from the scaffolding all the code is still running on my machine but i'm now viewing it through teams through the app experience in teams this code what we're looking at on the screen right here where it says congratulations tom morgan your app is running yada yada um this is the actual code of my application i can show you that so if i flip back over to here for a second if we go into the explorer and into tabs and source and components and tab we've got a welcome we've got uh something about the function name if i can find well let's have a look we've got privacy terms use uh some of these you'll see kind of matching in a minute so what i'm looking for is kind of this stuff that says your app is running in your local environment and there's some interesting things here about getting the current user and the photo and things like that um what i'm really looking for but i can't find anywhere is all of that stuff so where would that be ah it's probably in this welcome component isn't it so in here in the sample section it's a cheeky here we are welcome component it's got a let's go down to here we go congratulations your app is running in your and whatever the friendly environment name is so it'd be like development environment probably let's have a quick look again in your local environment so we could actually change some of this we could let's take this and let's add a new line let's keep it h1 keep it centered and let's say um we've just built our first tab out for teams exclamation mark two exclamation marks right so one exclamation mark let's save it now we're using as we saved it it's automatically updated um so this is the actual code that is running on our machine we're looking at it through here so we've created a tab application you can see it and it's showing up on the side like this it's showing a personal app we could actually go and add it um if it was an actual app we could go and add it to uh to a team there's a couple of different things uh you can do here so you can access basic information so for instance if i click authorize here it's going to ask for some permissions to sign in read the profile all the rest of it i can say yes to that and it will go and get who i am very cool um let's come back then to um let's create a new window because what we lost was our instructions that we're supposed to be following so we got hung up on this bit but for me from my experience going from four gig around to eight giga ram and or waiting for the policy to take effect was the thing that kind of unblocked it for me so i'm going to keep all of that in the video it's going to make it a super long video but i think it's really important to work through some of these problems in real time because you know you probably not probably you may well have this problem too and now you don't need to worry about it you know what you need to do to solve it so okay let's let's review what we just went through we finally did this ad process we didn't see this actually uh we were already using the web thing uh opened up the web experience we saw this we actually played with it a little bit and changed it and made it different so that was interesting uh we didn't need to use this troubleshooting step um the big thing about this is making sure side loading works in your team's application okay so we've built our first tab up we're done what's next let's move on let's do something different let's build a bot a bot workspace okay so let's quickly review this before we jump back to the code so we're going to go back and create a new teams app i'm going to show you how to do that when you're already in one that's fine we're going to create a new teams app very similar to how we did it before this time we're going to choose a bot we're going to choose javascript language again and we're going to give give it a nice name all right so we're still in our team's tab app but let's uh let's click on the team's toolkit icon let's click create a new teams app and again click create new teams app this time we're going to say abot and click ok we're going to choose javascript as our language we're going to call it testbot1 because that's uh that's a snappy name click ok it's going to build again a load of scaffolding for us so that we don't have to and very very similar to how it did it for tabs it's going to create it and we've got a different looking set of things here we've got an adaptive cards folder we've got again an index and that package again so let's look through a quick tour of the code so interesting thing so the bot code is stored in the bot directory uh okay so that's all this directory here the bot slash teamspot.js is the main entry point for the app okay so if we look at this code here uh you can see there's some things in here around recording the like count there's a uh some trigger commands for welcome and learn and some other things and you can kind of see there's some good uh placeholder like some comments to documentation to learn more about what this code is doing as well which is really nice all right what's next we can build it so what do we need to do we need to make sure we're signed in again then we need to press f5 and again it's going to add a new application and when it's built application well um it will be a conversation with the bot so let's try all that out so the first thing i'm going to do is just make sure i'm still signed in yes i am then i'm going to press f5 i'm going to continue again for my node again might be a problem this time around wasn't a problem before so fingers crossed it won't be a problem this time and this is going to take a while to install so i'm going to pause the video and i'm pause it when um some interesting things happen okay so i think it's doing the done the build mostly and ah so interesting so this i think is going to fail and i've just noticed a message i might be wrong but it can't find ngrok which completely makes sense because i don't have ngrok installed now i'm not quite sure what it's going to do about that uh whether or not it's going to carry on anyway and whether or not it's going to be all right with it this i'm looking at this there's a message here that says it can't find my uh ngrok file now that might be a problem it might not be a problem it's still doing something it's actually currently registering the bot uh which is the process that needs to happen um in your kind of microsoft environment in your azure environment anyway so i'm gonna let that all happen anyway we might need to go and um install ngrok and do all that sort of stuff or possibly this is gonna do it all for us and we might not need to do anything so we'll wait and see okay i'm pause um it's doing something he seems to be mostly okay with not having anger but we'll see if that's a real problem when we come to use it it wants me to sign in again so that's fine let's try clicking don't show this again and i think any minute now there we go so um this is the new bot the testbot one that we created again a new application so we can go and add that side loading it again so it's just showing off on our teams client so we can play with it and this gives us a hopefully a chat experience okay so ignore everything i said about ngrok not needing to be installed it's done some magic whether or not it's running engroc in the background whether or not it's using something else that is not in grok doesn't really matter ingrock by the way if you don't know is a tunneling tool so it gives you a an ability to run some code locally on your machine but have a endpoint which is accessible on the web like an https endpoint that the bot service the microsoft bot service and microsoft teams can hit as if it was a public endpoint but actually it tunnels all the way back through to your machine and serves up your local code really really useful for doing debug scenarios where you're integrating with something like teams or the bot framework that needs a publicly accessible address my my guess is it's probably using it under the hood somehow um doesn't matter uh we didn't need to install it anyway so we have a hello world bot which is really nice um we can talk to it i don't know what it does but let's just say hello and and we can send it that message hopefully and see what it says uh we'll send it hello i don't know if it's gonna reply or not or or whether it's made to reply or what it's gonna do um it might just ignore us we've got some buttons we can click on here uh that look like they open documentation they certainly do and when we click in here as well uh i'm not sure if i'm gonna be able to get it to do it now there we go we have some suggestions for welcome and learn so uh if we do learn so it might be that these are the keywords that it really likes and uh this gives us a an adaptive card around learning and we can actually click i like this and it will increment the like count so there's some kind of basic functionality going on here which is kind of good um all of this is code that is in here and that is in this project so it's a great starting place to play with um but you can see how that you know by following this scaffolding you don't really need to worry about the how of building up your first bot now you can kind of focus in okay well i've got these trigger commands look for welcome and learn they do different things they render these adaptive cards this is the learn one this is the welcome one or you could have your bot do something completely different like um i don't know respond to this in a completely different way add your own message add your own command you can see here you could add well let's do this actually let's just uncomment this section uh if you'll let me some reason oh it's probably because i'm in a virtual machine it's not very happy about some of my control no it's not very happy about uncommenting okay pretty odd um i'm gonna have to do it the old-school way let's quickly do this okay um and let's put in that hello command that i tried to do before that didn't do anything uh cases hello let's send a message let's send um this is my first bot i'm gonna click save i think it's gonna just compile it and and it will just work uh we should just test that out sure uh so if i now say oh it's doing a whole bunch of things in the background so perhaps i should wait for them to finish no don't know maybe not um let's click hello yeah i don't know if we need to go through the process of restarting it in order for some of that stuff to take effect possibly we do it feels like we might do because this isn't doing anything uh i don't think there's anything else i need to do here so we'll do it let's just restart this go through the signing process again jump to the application again okay click the bot again and now you can still see the conversation before from before this time let's send hello again and this time you get that response this is my first bot so we've changed some code as well so we've done it even a bit more than the than in the documentation so that's that's how we get started with with the bot so we build our first bot which is very cool um great i didn't show this actually but you can set break points like it's just local code i showed that really by making changes but i should have done a break point it would have been a lot faster um so yeah you could put a breakpoint on um to kind of stop the code whilst it's running see what it how it works see what it does it's really nice okay let's go do something else let's go and create a messaging extension application so how does this work very similar create a new teams app this time we're going to choose the messaging extension capability we're going to choose javascript again we're going to create some some more code and we'll take a quick look at it so let's come back here let's go back to our team's toolkit let's create a new teams app this time we're going to choose messaging extension choose javascript my first messaging extension click ok it's going to go and create all the code we need in a new project again let's we've got a couple of different things here we've got an app package we've got a bot folder now the way message extensions work is uh it's really a bot under the hood that services the requests that we make to the messaging extension so that's why there's a bot folder and in this bot folder there's a let's have a look there's a team spot um it's interesting i don't really know what i was expecting to see in here but i don't think it was that because uh i was think i was expecting to see a messaging extension bot that looked like this not uh a team spot one that looked like that so this looks more like the this more looks more like the bot that we've just created from uh from before but maybe it's not this is messaging extension code so maybe it's the same code uh maybe it's the same code used for both samples and this time it's it's just set up to do messaging extensions so either way let's build it and run it and see what it does uh so make sure we're still signed in yes we are press f5 and this time we'll see what it does so again i'm going to pause the video here and unpause it when it gets interesting okay i think it's mostly nearly finished um got some of those same warnings around ngrok that we had with the bot but i'm not going to worry about that just now registering again okay and back to teams back to signing in okay perfect let's add that one now how to use so let's go back to what this is adding oh this is nice um we got a nice message to say it's uh it's been installed uh we can click try it so we get taken to a chat with the bot and this is the same bot which is interesting because it's the same code but now we have a messaging extension down here wherever it is i'm not quite sure which one it is actually um here where is it let's try okay fine it's showing up in recent here so this is what i meant by saying this is where you add like this is where messaging extensions go they go down here where you add things of your own sort down here if you like your own applications can live down here i've got my own one down here um and there's a big one here maybe oh news bing news there's a viva learning one and if i click the three dots i can also see for instance this one uh that we added uh i didn't actually read to see what you're supposed to do to use it and i probably should have done that if not we'll go back to the oh here we go uh it's looking up some information i guess super test ah good um it's created a nice card with a description and i can send that into the chat let's go back to the documentation to see how it's supposed to work so we can try it out and you can either go to chat or you can go to the team's channel and enable the message composing would go and find it by the three dots uh you can put in a search string to get a match a list of matching terms you'll get that nice um kind of adaptive card that i showed you and you can post it into the channel cool we could also change this as well so in here if we now go now that we know what it does it's a little bit easier to look through some of this code and pick out on the adaptive cards invoke uh the binding spacing extension query here you go so oh it's searching the mpmg yes that's interesting um for the query what not thing to do okay i suppose it's a good that it's a good place to um go and kind of get some data from uh so it's searching it it's searching the npm registry um and then it's building up a card um with those results and just kind of putting them onto the you know doing some income oh link i'm filling as well there's all sorts of things in here you can go and play with um but the point is it's created the scaffolding for you for your very first messaging extension and it's done all that sort of work too so look what are we going here so you can see all of the npm libraries how interesting um all of the uh all of the work for you to um nice all about for you to create a messaging extension so that's really nice okay we're nearly at the end of uh this particular tutorial but let's go to the next step 100 complete so we have built several things the final step is to deploy into azure okay so how do we do this we make sure we're signing to azure first of all by going to the teams toolkit here and clicking sign into azure okay so i'm going to sign in uh i'm going to use a different account only because i sign into azure with a different account so i'm going to i'm going to come over here sneaky sneaky so you can't see me typing all my secret passwords in uh so i'm going to do that quickly now and a bit more verification again let's come back so i'm signed into uh i'm now signed into azure next things to do is to deploy so for each of um let's have a look so each of these things so you really need to be using so you've got this deployment section here that you've got like a one-click provision in the cloud so let's just like step through that we've got this messaging extension that's currently running so i'm just going to stop that and then i'm going to click provision in the cloud this is going to actually go and publish the messaging extension that's okay we might decide we actually want to go and do one of the others like the tabs we can do that too we can go back to them we can load up the tab application uh it looks like this in case you've forgotten with the tabs in it if we go back down to source you can kind of see the components the welcome message where's the welcome message and all the rest of it that we added where's the bit that we put in here we go uh with our welcome message so oh it wants er that's an interesting one so every time you flip projects you have to sign into oh no don't it just did it for me i went to click and it's only like changed so that's worth just making sure if you flip projects just make sure that you are stayed signed into azure and then you can click provision in the cloud okay what this is going to do is go and provision all the resources for you so this is kind of an important step so it is going to go and build components for you in your azure environment that might end up well it will end up costing you money so just be aware of that the pros to this is that you don't need to understand all the components you need to build out it's going to build them all for you the cons are you're not completely aware of all the costs so you can you can do this i would make sure you build it all in a separate resource group so that you can understand what those costs are you can delete it all if you're just playing around you can delete it all at the end of this video and carry on but yeah that's just kind of worth making sure there is a pricing calculator as well so you can click pricing calculator this will take you to the azure pricing calculator unfortunately it won't um it won't tell you the pricing of all the things it's about to deploy it just takes you to the standard pricing calculator so um so you don't really know how much it's going to cost before you provision it um but you can click provision and then it's going to build a whole load of things for you it's going to kind of just go away and do it it's not going to ask any more questions it's just going to go and put it into azure for you we're going to go and take a look once it's done and i'll show you what it's built okay so that's finished what's it actually done well it's not deployed anything it's not taken this code and deployed it to azure it's provisioned what does that mean it means it's built all of the components in azure but none of the code and we can i can show you that so if i go over to my my azure instance um well it's it's created a resource group um which is the name of the application and then a dash rg and it's created three things the storage account an app service plan and an app service these are all the things that are needed to to run the application but it hasn't actually deployed any of the code to them if i want to do that and i can do that from in here as well there's a deploy to the cloud button so you should not do this until you've done the provisioning step but you can now click deploy to the cloud and again it's going to do the same thing it's going to pop up at the bottom it's going to think about it for a bit it's going to do like a build and then it's going to take that build and deploy it up to the cloud so again i'm going to pause until that's done because it takes a little bit of time you can see it going through the steps at the moment you can carry on working when it's doing this as well it's just kind of in the background process just deploying it up to azure for you uh it might take a little bit of time so i'm going to pause the video now and we'll unpause it when it's finished okay so it just disappears like there's no big fanfare to say it's done and in fact you won't even really notice any big difference coming over here because it's just been deployed inside of these things however what you can now do is if you go over to the run and debug tab and drop down up here where it says debug edge you can uh you can launch remote rather than uh like debug up here launch remote is tied to the azure instance you've just deployed to so it's going to do the same thing through teams around loading the app and everything except that what it's going to load and install this time is the version that's actually running in your azure not the local version i will try and show you what that looks like um let's just let it step through the process again so i'm going to say that again because it's kind of confusing this looks like it's doing the same thing as before it's kind of not so we've lost a couple of things we've we've got a nice name now rather than the kind of dash debug local thing if we add this and run it this is actually going to install and run the code from azure not our local code so first thing it's a lot faster you've where here where it says your app is running in your azure environment not your local environment so it's picked up the environment difference and crucially this bit here if i come back over here and delete this line out again that says your app is running and save it it's not going to update this isn't going to update now because this is running from azure the code that we published to azure it's no longer running on our local machine so this is production ready if you like this is ready to go you could take this application manifest you could share it with other people if this was how you wanted your application to look uh you could take the application manifest and upload it to the store it's no longer running on your machine um this is running out in azure so you can now make changes so if you wanted to um i don't know uh let's uh let's take this line here that says we've just built our first app for teams and change it to we're in azure right let's how do i get this code that i've just changed up to azure now first of all i need to i probably don't need to stop but it's probably not a bad idea to stop this code come back down here i don't need to reprovision i do need to click deploy to the cloud again okay and that is going to take the latest version of my code and push it up to uh up to azure once this has happened then i can go and click the run in teams again and then it's going to run the latest code from azure and we will see that um kind of that has updated so i'm going to pause whilst it goes through the deployment process again because you don't need to watch that okay so it says successfully deployed to the cloud if i come back to here and launch remote again and let it install again but you don't need to go through this installation process each time because once it's installed it will actually be i don't think i'll be able to get to it to click it fast enough uh it will actually be here so i actually just cancelled that install process and i can just now open it and you can see the updated code we're in azure um so i can do that every time now and i can do it from within the teams app or the web app i can just go to installed apps i can see all of them here the ones that have the local debug thing after them won't work unless it's actually running in here but the one that's deployed to azure uh this one will work all the time now and i can give it to someone else and it will work on their machine as well all right that was a mammoth session uh we went through quite a lot in that session um this is quite an involved kind of hello world it's really i like it actually it's really detailed um it goes through the whole process we've got to the end of the um the kind of learning we can go back to getting started we've completed this this was how we built our first application using javascript uh it was a nice kind of intro into building tabs into building bots and building messaging extensions gave us really good scaffolding to get started for building whatever else you know we're going to go and take it and build with it i hope it's been useful we hit some road bumps along the way i'm going to try i'm going to keep them in because i think they're a good learning tool um and hopefully it's been useful we have that um ram bump as well so if you're struggling with ram or struggling seeing some of the errors i was seeing consider bumping the ram if you can hope it's been useful i do lots of videos like this so check out my channel subscribe catch me on twitter whatever else you is you're doing today have a great one and i will talk to you again next time [Music] you

Channel: thoughtstuff - Microsoft 365, Teams & Copilot Dev

Views: 16,442

Keywords:

Id: xU7GUfTmMws

Length: 74min 14sec (4454 seconds)

Published: Thu Nov 04 2021