Building an application using Microsoft Graph Toolkit and Electron provider

Key Takeaways

[Music] hi i'm amrita and i'm a software engineer on the microsoft graph toolkit team and i'm super excited to talk to you about our latest addition to the toolkit in vp 2.1 which is our electron provider now before i get into what that is in case you're not aware of the toolkit i thought i'd give you a brief intro so the microsoft graph toolkit is a collection of ui components and authentication providers that make using the graph really really easy and help you create these data rich and user-centric experiences with very few lines of code in your application so there are two parts to that ui components and authentication providers so when you talk about the ui components these are fully functional right out of the box and they use data from the graph and they help you render it really beautifully with just basically two to three lines of code and the best place to kind of explore all the components we have is here at mgt.dev an example of one of our ui components is the people picker and uh this is basically like a multi-select drop down which allows you to pick people from your organization or people you work with so i can even like start typing in like the first few letters of the name and it's going to allow me to pick multiple people as you can see this actually is pulling data from the graph to render this for you similarly you have a component like mgt agenda so all you have to do is include this html tag and of course import our library and authenticate to get all of this beautifully rendered agenda data and they're super customizable with your own you can add your own css make them match the look and feel of your application so that's that's where ui components are concerned and they're oh sorry there are a lot more components here on the left that you can go and look at and play with um so as you can imagine all of these components use the use the graph in a different way they call different graph apis so we have to first be authenticated with microsoft identity to be able to get these access tokens for the graph and that's where our authentication providers come in so we have different authentication providers for the different platforms that you may want to build on that help abstract away all of that code that you would need to get access tokens not only for these ui components to work but also it gives you a graph endpoint to call any graph api of your choice and so like i said we have different providers for different platforms so if you were building a web application you would be using our m subprovider if you were building a sharepoint web part you'll be using our sharepoint provider similarly if you're using it if you're building a teams tab you'll be using our teams provider and last but not least if you're building an electron app you can use our electron provider and there's a very simple example of how you would use an m cell provider here for our web app for a web application so all you need to do is uh import the provider from our package and then say providers.google provider initialize the amsa provider with a client id of your app app registration and that's basically it that's uh all you need to do get to get authenticated and then you can start using our ui components or even call the graph so with that intro let's jump to our electron up so here i've um basically have a very simple electron app here and for those of you who don't know what electron is or i've never worked with it before electron is a framework to build native applications that are cross-platform because they're based on very fundamental web technologies like html and javascript with a node.js backend and a chromium front-end and so yeah so they cross platform and they allow you to build and it allows you to build native uh app experiences and a lot of actually a lot of the most common apps that we use on windows like microsoft teams and even vs code that you're looking at right now are electron applications and electron has two kinds of processes main and renderer right and you can think of main as back end and render as the front end so the main process is responsible for the application life cycle for all native interactions and also for creating render processes the renderer is the ui so every page that you would have in your electron application would be associated with a renderer process and the main process kind of controls the generation and uh deletion of these vendor processes so this is just a very basic typescript electron quick start kind of template project that i cloned from github all i've done right now is i downloaded i npm installed these three packages so the first one is mgd components which contains all the ui uh mgt components that we're going to be using um this is the electron provider itself it's in its own package and then mgt element is the base package that allows these components and providers to interact with each other and what we're going to be building today is a very simple to do application so we can go over here so now we're going to try to get authenticated first using the provider so in the main process we're going to be initializing this class called electron authenticator which is what's responsible for getting all of the access tokens and then we're going to be like initializing something called electron provider in the renderer dot ts file which is just responsible for receiving all the access tokens from electron authenticator so let's complete the first step i'm gonna import these the electron authenticator in my main.tps file what i've done here is i've created a config object of all the the details that you would need to pass to initialize electron authenticator like your app registration um the window on which you want to get authenticated which is this browser window instance and all the scopes that you would need to call all the apis or to render all the ui components and last but not least initialize the authenticator and we're done with this part so there's only one step left which is in the renderer process like i said we initialize something called electron provider so just import these libraries and and so i just initialized the provider and that's basically all you have to do i'm also going to disable cache for this demo and show you the the calls actually being made and finally we can add the components that we're going to be using so i added mgt login which is our login component mgt person which shows personal details of the person logged in and mgt to do basically displays all your to-do information from microsoft to do so wait till it runs again i think it's taking more time than usual because i'm sharing my screen so just to recap we initialize the electron authenticator and the main process and we initialized electron provider and then we added some mgd components in the meantime um for folks that are following the staff jeremy just put out a quick survey out there and we're just interested in knowing how many devs are actually doing uh actually doing dev and like an alt right now but if you can just do a thumbs up on uh jeremy's both we're just surveying just quick surveys try to understand like where you guys are actually um yeah thank you so finally opened so i'm gonna sign in so the login component basically has two states when you're signing in when nobody's signed in it's going to say sign in and allow you to sign in i'm going to get the password and then once you're logged in the login component will display your name and your picture and yeah so all of this data just rendered right away and that's pretty much how easy it is to get started with the electron provider and so as you can see this is the login component and then you have the person component that has a picture and also your status your name and you can always customize the amount of data you want to display here and then all of your to-do tasks straight from microsoft to do now this is a very basic version of the app i built but i also did i built the same app here it's actually pretty much the same code except i added a hidden feature that i'm really excited to show you so i'm going to go to i'm logged in as megan right and this is her team's app so right now megan is available and she's just working at a normal pace she has this beautiful desktop wallpaper of mount rainier okay and i don't know about you but sometimes i have trouble focusing during the pandemic and like i get really annoyed when i'm trying to get something done but people are pinging me so i like to go to like do not disturb mode um once i do that my app actually turns to dark theme and i did this solely for the purpose of showing off that mgd supports dark theme and all you have to do to enable that is to add a class to all your mgt components or in your document in your body dot element but also my wallpaper changed to this giraffe that's telling me that it's watching me and i need to get back to work similarly when when i'm done with work i like to appear away and i also have this bad habit of lingering on on my laptop when i'm done with work but really i should be working out so i have my wallpaper reminding me that i need to go work out with this cute little kitten so how i'm doing that is in this application it's basically the same the same code so as you can see this is the renderer process and we initialize the electron provider here what i did was i i npm installed a package called wallpaper that allows me to do all the wallpaper changing magic and what i'm basically doing is pulling presents data from the graph every five seconds and this is how i'm doing it so you can subscribe to the on state changed event on the provider that will fire every time there's a log in or log out so i'm checking here if a person is signed in and then i'm calling this function called check presence that's going to pull data every five seconds from the graph for the presence data so this is how i'm calling the graph so i don't know if you remember that i said that all our providers give you expose a graph endpoint that allows you to call any graph api so here i'm using that graph endpoint to call the presence api and i'm also checking based on what the response i receive i'm checking what the status is and based on that i'm changing the wallpaper using the wallpaper npm package and one more thing i'm doing is i'm also able to manually set the presence over here because in our person component we use a different polling frequency to poll for presence but since i am pulling presents every five seconds i want to manually update that every time i find every time i get the presence data so i just pull the mgt person dom element and then i uh manually add the presence object so that brings me to the end of my demo hopefully i've shown you how easy it is to start off with the toolkit on electron so i can take questions now thank you thanks i'm just going to bring back the the slide deck but uh great work i love it when we're having fun uh doing demos uh thank you i definitely need that present status background quicker on top of my presence life right i actually have it this app on all the time and sometimes it really works here are just some resources for if you want to get started with the toolkit or learn more these are all great places to start again i appreciate your time great work from the nbc soon um always exciting with spokesperson so i appreciate your time at least and i'm rude