Microsoft 365 Community Microsoft Teams, 26 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create an app that extends across Teams, Outlook, and Office.com

Description

In this 12-minute developer focused demo – Saurabh Bhatia uses the Microsoft Teams Toolkit in VS Code to create, test, provision and deploy in a tenant and cloud, a “Hello World” Teams application (personal tab) that runs across Teams, Outlook and Office.com. The tool prompts developers though all steps including signing into (downloading, if necessary) Microsoft 365 and Azure test tenants. Q&A addresses platform integrations including SPFx alignment, Office js, and desktop app integration – the unification journey. More new capabilities to be announced at Microsoft Build. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 26, 2022.

Demo Presenter
• Saurabh Bhatia (Microsoft) | @iamSBTron

Supporting materials
• Toolkit - Microsoft Teams Toolkit for Visual Studio Code | aka.ms/VSCodeTeamsToolkit
• Documentation - Microsoft Teams JavaScript client SDK v2 Preview | https://docs.microsoft.com/microsoftteams/platform/m365-apps/using-teams-client-sdk-preview

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

A

So hey everyone uh today, I'm gonna talk about obviously creating your first hello world application that can, you can write once and then run across teams, outlook and office.com uh before we go into how to write and deploy this kind of app. I want to share a little bit of an example on the types of scenarios you can enable with this type of app.

A

uh So let's take an example of a simple app or favorite company contoso and imagine you're, building an app for your sales team uh which tracks their action plans. So the cap, contoso action plan app, allows sales teams to build and coordinate action plans using a nice intuitive interface.

A

Now the sales team spends a lot of time inside teams communicating with their peers and customers. So it makes sense for this cap app to be a personal tab in teams the sales team can access it and update the action plan without having to leave teams if you're, already familiar with developing apps for teams this cap app is is nothing but a personal tab, but the additional piece here is now it's not only in teams.

A

You can also run it in office.com or outlook, so the sales team isn't just using teams they're, also using outlook to email and schedule meetings with their customers. So cap can now also show up in outlook as a personal tab, just like it did in teams, and you can access it as just another app in outlook.

A

Similarly, as part of their daily work, the sales team will often have to collaborate on various documents and presentations. Many of them might might use office.com or the office app on windows to discover their most recent files that they're working on along with their peers. So it makes sense for this crap app to also now show up as a personal tab in office, just like it does in teams.

A

So that's just an example of the types of scenarios that you can enable by just taking that personal tab app that was initially in teams, but now is available across outlook and office.com. So now, let's get into. Hopefully that gave you some background. Now, let's get into how you can actually start building like the very first hello world app and what are all the places and uh environment setups. You need to do to go, build it. So today's one-stop shop to get started on everything is going to be the team's toolkit.

A

You can go, get it from ak.ms vs teams toolkit or if you already have a visual studio code, you can just search for the teams, toolkit extension and go get it from there uh once you do install the extension. What you'll notice is you get this additional toolkit themes toolkit tab over here uh and there's a nice little quick start guide uh that you can follow to just get started with the whole experience.

A

The very first step it does is sort of just a pre checker make sure you have the right version of node and npm running. I've already done that. So it's checked and I can go on to the next step, which is, let's start building the first teams app. So you can create a brand new app from scratch, or you can view some samples and open up those samples uh from the teams toolkit itself uh for today.

A

I'm just gonna pick the very basic hello world tab sample, which essentially just shows up a tab in teams, and I've already opened this up, so I don't have to go in and create it. It's it's already in my ps code, environment. So I'll just say. Yes, this is done and I am ready to start building my first themes app. So once I have the sample clone in my local drive, the next step is you need a microsoft 365 tenant to start testing your app.

A

This is what I think beta alluded to earlier, uh which is you actually get this free developer, tenant, instant, dev sandbox, where you can start site loading your apps as you're, developing them from the vs teams toolkit. You can actually just click on that link and go spin up and sign up for this app or, if you already have like an organization tenant.

A

You can sign into that, and the only additional thing you have to do is make sure that site loading is enabled on that tenant because site loading is the thing that allows you to deploy that test app on your tenant, hit, f5 and debug things once you do these steps. I've already done these. You can then sign in to vs toolkit with your credentials whether it's for your developer, tenant or your organization channel, and then the toolkit will automatically check and make sure that site loading is enabled and you're good to go there.

A

So this is just an environmental setup step that you need to do uh once that is done. You are ready to hit f5, you have the app you have the environment, uh you're ready to just run a local preview and you get the option of which browser you want to run it in. I already have that app running it's already debugging, so we don't have to debug again.

A

uh Let me stop switch to my edge window here, so uh it is that app that we just cloned that is now running in teams.

A

Now, since I said this is not just a teams app, it could also run in outlook or office.

A

You can actually navigate to office.com and click on the apps and the same app will now show up in in office.com as well and then.

A

Finally, you can also go to outlook and the exact same app is pinned now just to show that it's the exact same app and you're running f5 I'll just click over here and then I have a breakpoint, that's set up, which is gonna hit right over here. So even when uh you are uh debugging across all these test, apps, whether it's teams or office.com uh or outlook, it's actually the exact same app that you're testing out through edge.

A

It's just another web app you can hit with breakpoints, just like you would with vs code and continue your development environment.

A

So let me get that window back in and hit continue on that breakpoint, so that we can continue there.

A

uh Now that you have kind of gotten your local dev loop running you cloned the app you hit a local f5, you might actually want to deploy to a cloud environment and test things out from there itself and the sample ads itself.

A

Tells you how you can go about doing that so I'll minimize that window and go back to my team's toolkit uh so right here, along with the accounts, in addition to your developer, tenant that you signed into you, can also sign in to your azure tenant, where you can deploy your cloud resources uh once you've signed in. You can simply say I didn't want to provision.

B

That again, but you.

A

Can simply say provision it I'll cancel out of there, because it's already provisioned and it'll go in and create the right resources. The right services that are needed for this app on your azure backend even go in and register the azure ad registration if needed, and once that is provisioned the environment for dev will show up as provision and tell you which resources it's using.

A

uh Just like you hit f5 on the local debug. Now you can also hit f5 on the the actual cloud deployment that you have developed over there. So not only can you do kind of the local loop on escort you can actually deploy to your cloud environment and start testing things out over there.

A

So once I've done this I'll just head back to that get started page. I have previewed my team's app locally. The last step is say: you've tested things out and you are really ready to deploy uh your team uh application say to your environment, you're still within vs code vs code lets. You have some deployment commands, which I can click on over here and that takes you back to that deployment page and there's a couple of options.

A

Here I can say: publish to teams- or I can just zip the team's metadata package and and get a zip file that then I can upload to partner sender or dev portal or wherever the publisher teams is super cool, because even if you're, not the admin, what it's going to do is allow you to give the options to say, install for your organization directly it'll send your app to your teams administrator for approval via teams portal.

A

So, as a developer, you might not have the right permissions to deploy the app to your environment, but from here you can submit it and then the admin on your tenant will get a notification or a pending approval uh on the custom app that you've submitted uh and then they can go in and allow it and then that app will show up so right from within teams. This was like a quick tour right from within teams. You can get started, deploy your cloud environment, get a sample at hit, f5 on your local image.

B

A

The thing in the cloud and then deploy the app on your own tenant and wait for approval from the admin, so just a quick overview of everything. That's coming uh online with teams there'll be more that will be coming in uh as we head towards build, which is less than a month away almost and uh looking forward to any feedback and questions. People might have.

B

As we have few minutes, don't don't remove stop sharing. I want to ask a few questions and I can help on answering the second one. So what about teams for the desktop will this work in teams desktop as well.

A

uh The f5 story, the debug story, is for web only, but the same app once you've signed loaded it through vs code. You can actually launch teams desktop and also see it working over there.

B

Yeah- and I have well this- this is almost a technical nuance, so jim jungkong is saying: if I enable site loading site, load up and disable site loading, would it work? My understanding is yes, because it's just a site loading on site loading time? I don't know if you can start up confirm that. So, if you kind of enable the site loading site load up, you disable the site, loading will the applications which were site loaders still keep on working. I I guess I don't know, I don't have to verify.

A

Yeah, I don't know, I am curious- why you would want to do that, but uh yeah, I'm not sure about that.

B

I guess it's exception for one application or or another, so it's just so story on that. One, um an outlook desktop too, but that's going to be in the plans, absolutely just checking that quickly. The main questions, uh that's it and then there was a question related on what will that work too?

B

On the microsoft teams apps created with spfx and not yet that is in the in the roadmap, uh so spx team spfx team is aligning to the new v2 packaging model and then the meta os people are and spfx team people are working together and making that happen. So spfx has the advantage that you don't then need to externally host anything because stuff is getting hosted directly in microsoft, 365, and that's probably why people keep on using that so widely so and asking about that. But I guess that's all on the list.

B

Unless I missed something, there was one question from russell.

A

uh When this one's in outlook can you use officejs to interact with the mailbox, uh I would say again: uh it's not yet right. Now, it's still using teams.js to interact with certain outlet capabilities like mail, but uh you like the only mail capabilities right now. You can create a mail and then kind of queue it up for sending all the office.js capabilities are still sort of in a separate app and we are looking at how we can kind of bring those together and make them work together, but not yet.

B

I think the direction is really cool, we're looking into doing a unified package, unified moral, unified coordination- administrative all of that so but this journey is going to take a while so but we'll get there and- and the objective obviously is not to do any disruptive moves and shutting down anything what we're doing right now, because again, we need to do this carefully, together with our ecosystem and community. So we'll keep on doing these demos for sure in this course and and show stuff in the build as well and and so on.

B

But thank you sarap on that. One.