Building Microsoft Graph Toolkit apps with React

Summary

このビデオスクリプトでは、Microsoft Graph Toolkitの活用方法について紹介しています。Reactフレームワークと統合してアプリを作成する方法に焦点を当て、ツールキットの使いやすさと柔軟性を強調しています。ツールキットは、Microsoft Graph APIにアクセスするための再利用可能なコンポーネントとプロバイダーを提供し、開発時間を短縮し、カスタマイズ性に優れています。また、Reactと組み合わせることで、M365のエクスペリエンスを再現しながらも、独自のブランドを組み込むことができるという利点を説明しています。

Takeaways

• 🌐 マイクロソフトグラフツールキットは、再利用可能なフレームワークに依存しないコンポーネントとプロバイダーのコレクションで、Microsoft Graphにアクセスして操作することができます。
• 🛠️ ツールキットは完全に機能的なコンポーネントで、コードの数行でカスタマイズ可能なエクスペリエンスを構築できます。
• 📈 グラフツールキットは開発時間を短縮し、UIコンポーネントを簡単に追加できるため、生産性が向上します。
• 🎨 柔軟性があり、M365の外観に似せることができますが、完全にカスタマイズ可能です。
• 📱 モダンなブラウザであればどこでも動作し、Teams、SharePoint、単一ページアプリケーション、Electronで使用可能です。
• 🔄 ReactとMGTの組み合わせはコミュニティで人気があり、Reactラッパーがリリースされてから大きなアップテイクがあります。
• 🚀 Create React Appを使用してアプリを作成し、MGT Reactコンポーネントを簡単に追加できます。
• 🔑 認証設定は、コードで行い、MSAL2プロバイダーを介してクライアントIDやスコープを設定します。
• 🔍 MGT ReactコンポーネントはReactに自然に組み込まれており、プロパティや属性が豊富に用意されています。
• 📂 各コンポーネントのプロパティは、MGTのドキュメントで確認でき、Reactの属性として使用できます。
• 🌟 カスタムコンポーネントを作成することで、MGTの機能セットにない場合でも、Graph APIを活用してデータを取得できます。

Q & A

マイクロソフトグラフツールキットとは何ですか？

マイクロソフトグラフツールキットは、再利用可能なフレームワークに依存しないコンポーネントとプロバイダーのコレクションで、Microsoft Graphにアクセスして操作することができます。

マイクロソフトグラフツールキットをReactアプリで使用することの利点は何ですか？

Reactアプリでグラフツールキットを使用することで、開発時間を短縮し、非常に少ないコードでMicrosoft GraphにアクセスするためのUIコンポーネントを簡単に追加できます。

マイクロソフトグラフツールキットはどの程度のカスタマイズが可能ですか？

マイクロソフトグラフツールキットは、M365の外観を模したものですが、完全にカスタマイズ可能です。独自のブランドをコンポーネントに取り込むことができます。

マイクロソフトグラフツールキットはどのブラウザで動作しますか？

マイクロソフトグラフツールキットは、すべての現代のブラウザで動作します。

Reactでマイクロソフトグラフツールキットを使用する際のセットアップ手順は何ですか？

Reactプロジェクトを作成し、`@microsoft/mgt-react`をインストールして、MGTのReactコンポーネントを利用できるようにします。その後、お好みのプロバイダーをインストールします。

認証を設定するために必要なプロパティは何ですか？

認証を設定するためには、クライアントIDと必要な一連のスコープが必要なプロパティです。

MGT Reactラッパーはどのくらいの期間で採用されていますか？

MGT Reactラッパーは18ヶ月前にリリースされ、大きな採用が見られています。

MGTのカスタムコンポーネントを使用する場合、どのような利点がありますか？

MGTのカスタムコンポーネントを使用することで、グラフツールキットの機能セットに必要な機能がない場合でも、Microsoft Graphからデータを取得し、独自のコンポーネントを作成できます。

MGTのカスタムテンプレートを使用する際の利点は何ですか？

カスタムテンプレートを使用することで、コンポーネントの外観を変更したり、コンポーネントの実際のHTMLを変更したりできます。

MGTの使用例として紹介された3つのコンポーネントは何ですか？

紹介された3つのコンポーネントは、アジェンダ、ファイルリスト、およびカスタムのメールコンポーネントです。

MGT Reactコンポーネントを使用する際に提供されるReact Hooksとは何ですか？

提供されるReact Hooksの1つは`useIsSignedIn`で、ログイン状態の変化を理解するために使用できます。

MGTのReactコンポーネントをカスタマイズするためのアプローチはどのようなものですか？

MGTのReactコンポーネントをカスタマイズするためには、ネイティブのReactコンポーネントを活用し、必要なHTMLを構築することが重要です。

Outlines

00:00

😀 ReactとMicrosoft Graph Toolkitの統合

第11週のMicrosoft Graph Toolkitの紹介では、Reactフレームワークと統合する方法が中心になります。これまではHTMLでツールキットの多用途性を見せてきたが、Reactなどの他のフレームワークではWebコンポーネントを活用するのが難しい場合があると指摘。Microsoft Graph Toolkitは、再利用可能なコンポーネントとプロバイダーのコレクションで、Microsoft Graphにアクセスして操作することができます。このツールキットは非常に少数のコードでカスタマイズ可能なUIコンポーネントを簡単に追加できるため、開発時間を短縮できます。また、M365の外観を模したが完全にカスタマイズ可能なコンポーネントで、TeamsやSharePoint、Electronアプリなど、あらゆる環境で動作します。ReactとMGTの組み合わせはコミュニティで人気があり、簡単に始められることが示されています。

05:01

🛠️ ReactアプリでMicrosoft Graph Toolkitを使う方法

ReactアプリでMicrosoft Graph Toolkitを使う方法について説明されています。Create React Appを使用してアプリを作成し、Microsoft Graph ToolkitのReactラッパーをインストールすることで、MGTの機能をReactコンポーネントとして利用できるようになります。認証の設定を行い、必要なスコープを定義することで、MGTコンポーネントがMicrosoft Graphにアクセスできるようになります。また、MGTのReactラッパーは、Reactの属性とプロパティを活用して、完全にReactに統合されたコンポーネントを提供しています。ログインコンポーネントの例を挙げ、その属性とプロパティ、そしてReactのHooksを使用してログイン状態を検出するようにしています。

10:01

📅 MGTのReactコンポーネントを使ったカスタマイズ

Microsoft Graph ToolkitのReactコンポーネントを使ってカスタマイズする方法が紹介されています。アジェンダ、ファイルリスト、カスタムコンポーネントの例を挙げ、これらのコンポーネントがReactでどのように使われるかを説明しています。アジェンダコンポーネントでは、日ごとにグループ化するオプションを設定する方法が示されています。ファイルリストコンポーネントでは、複数のプロパティを使ってファイルのリストを表示する方法が説明されています。さらに、MGTのカスタムコンポーネントである'get'コンポーネントを使って、任意のGraphエンドポイントにアクセスする方法も紹介されています。また、Reactコンポーネントのテンプレートをカスタマイズして、独自のコンポーネントを作成する方法も触れられています。

Keywords

💡Microsoft Graph Toolkit

Microsoft Graph Toolkitは、Microsoft Graph APIを利用してデータを取得し、ユーザーインターフェースを作成するための再利用可能なコンポーネントとプロバイダーの集まりです。このツールキットは、フレームワークに依存しないため、様々な環境で使用することができます。ビデオでは、このツールキットがReactアプリにどのように統合されるかが説明されています。

💡React

Reactは、Facebookによって開発されたJavaScriptライブラリで、ユーザーインターフェースの構築に使われます。ビデオでは、Microsoft Graph ToolkitをReactと組み合わせてアプリを作成する方法が紹介されています。Reactのコンポーネントベースのアプローチは、MGTの機能を活用する際に非常に適しています。

💡Web Components

Web Componentsは、カスタム要素を作成し、再利用可能なUIコードを構築するためのウェブ標準技術です。ビデオでは、Microsoft Graph ToolkitがWeb Componentsを提供していることと、それらがReactアプリでどのように使用されるかが説明されています。

💡create-react-app

create-react-appは、Reactアプリケーションを素早く作成するためのコマンドラインツールです。ビデオでは、このツールを使用して新しいReactプロジェクトを立ち上げ、Microsoft Graph Toolkitを統合する方法が紹介されています。

💡TypeScript

TypeScriptは、JavaScriptのスーパーセットで、静的型付けをサポートする言語です。ビデオでは、TypeScriptを使用してMicrosoft Graph ToolkitをReactと統合する例が示されています。これにより、開発者はより安全でスケーラブルなコードを書くことができます。

💡Authentication

認証は、システムやサービスへのアクセスを制限するために使用されるプロセスです。ビデオでは、Microsoft Graph Toolkitを使用する際に認証を設定する方法が説明されています。これは、Microsoft Graph APIに安全にアクセスするために必要です。

💡MSAL (Microsoft Authentication Library)

MSALは、Microsoft IDプラットフォームを介してトークンを取得し、認証フローを管理するためのライブラリです。ビデオでは、MSAL2プロバイダーを使用してReactアプリの認証を設定する方法が紹介されています。

💡Custom Components

カスタムコンポーネントは、開発者が特定のニーズに合わせて作成するコンポーネントのことです。ビデオでは、Microsoft Graph Toolkitのカスタムコンポーネントを使用して、Graph APIのエンドポイントにアクセスし、データの取得や表示を行う方法が説明されています。

💡Hooks

ReactのHooksは、Reactの関数コンポーネント内で状態やライフサイクルメソッドなどの機能を利用するための特殊な関数です。ビデオでは、useIsSignedInというカスタムフックを使用して、ユーザーの認証状態を監視する方法が紹介されています。

💡Template

テンプレートは、コンポーネントの外観や構造を定義するもので、ReactではJSXを使用して作成されます。ビデオでは、Microsoft Graph Toolkitのコンポーネントのテンプレートをカスタマイズする方法が説明されています。これにより、開発者はUIをより自分たちのブランドに合わせることができます。

Highlights

第11周的Microsoft Graph Toolkit教程，专注于如何将工具包集成到常用的框架中，首先介绍React。

Microsoft Graph Toolkit是一套可重用的、框架无关的组件和提供程序，用于访问和操作Microsoft Graph。

工具包组件完全功能化，只需很少的代码即可构建可定制的体验。

工具包支持任何现代浏览器，并且可以与React等框架一起使用。

使用Microsoft Graph Toolkit可以减少开发时间，通过几行代码轻松添加UI组件。

工具包组件具有M365体验的外观，但完全可定制。

社区反馈显示，MGT与React结合使用非常受欢迎，易于上手。

创建React项目时，推荐使用create-react-app，并可以结合TypeScript或JavaScript。

通过npm安装@microsoft/mgt-react，将MGT作为React组件引入项目。

安装提供程序以准备项目进行身份验证，例如使用MSAL提供程序。

演示如何在index.ts中设置MSAL2提供程序进行身份验证。

展示如何在React应用中使用MGT的登录组件，并介绍其属性。

使用useIsSignedIn钩子来检测登录状态变化，以保护React应用中的特定区域。

展示如何使用MGT的日程、文件列表等组件，并介绍它们的配置方式。

介绍如何使用MGT的自定义组件和模板，以创建自定义的电子邮件组件。

强调MGT组件的底层逻辑，如缓存、分页和批处理，开发者只需关注组件的HTML结构。

预告接下来的教程将深入探讨Teams、Angular和SharePoint Framework的集成。

Transcripts

[Music]

well folks

we are now at week 11 of doing a grand

tour of the microsoft graph toolkit

for the next couple of sessions we will

be looking at

how you can integrate a toolkit in some

of the frameworks that you might already

be using today we're going to start with

how can we build apps

using mgt but with react since the

beginning we've been using plain html to

showcase

the

versatility of the graph toolkit but

sometimes

your

framework of choice might be something

else in just plain html and you know how

in some of these frameworks it might be

difficult

to actually leverage

native html elements and custom elements

that web components are providing so

today our focus will really be about

react and what does it mean for you to

utilize the graph toolkit within

a react app

so as a reminder what is the microsoft

graph toolkit the toolkit is a

collection of reusable framework

agnostic components and off providers

that let you access and work with the

microsoft graph

so it is a set of fully functional

components that are already made that

are drop

components you can use

in your apps that requires basically

very very very few lines of code where

you can build customizable

experiences and that work with any

frameworks and today will be a great

example of this because we're going to

use it with react

it also works on any modern browsers

today

why would you care about the the

graph toolkit well first

it helps you cut on development time you

can easily add ui components

to

um

access graph to your app with just a few

lines of code we could even probably

make it a single line of code a very

long single line but it could be

possible to do it in just one line it's

beautiful but it's flexible

it is built to look like an m365

experience but it's still fully

customizable so if you want to bring

your own brand inside these components

it's absolutely possible it's up to you

to make it happen and finally it just

works everywhere you want to work in

teams you want to work in sharepoint you

want to work in your own single page

application or even you want to host it

within electron well it's up to you you

do whatever you want it works everywhere

on every single browser

mgd loves react

and not only it's

it's something that we see but it's

something that we're hearing a lot from

the community

18 months ago we launched our react

wrappers for mgt and we have seen

huge uptake on mgt and react together

what does it mean it means that it's so

easy to get it started that

i'm not gonna even go through how to set

up a react project or whatsoever i'm

just gonna show you the three

common lines you should be using

and that is it afterwards we're going to

jump into code so first when you're

thinking about creating an app

well one of the ways i really like to

create apps is to use the create react

app

a set of functionality so you just

create an app that you would create an

app in any for any of your react apps or

you can even just leverage an existing

app that has already been created um in

our case we love to use typescript but

you can also use plain javascript here

absolutely

you install at microsoft slash ngt react

which will bring

all the capabilities from mgt as react

components

that afterwards you install your

favorite

provider so if you want to use msl

provider you might want to use a teams

provider we're going to see that in the

future

example

well these will allow you

to

be ready to get started

that's the only thing you need to add to

your project to get access

to um into these so

let me

go straight into code

and let's show the demo

so the first thing that i want to

mention

is

that

the root of your project which is

usually an index.js or an index of ts in

my case

is where you want to do the setup for

everything regarding authentication

you want to make sure that the auth is

is all prepared for all the components

that will actually use uh microsoft

craft will get so how do we do that in

previous demos you were adding a

component to a page that was called the

mgt msol 2 provider where we're setting

up some of the scope some of the ids

here we're going to do it through code

because we don't want just to drag a

component that would not really work in

a react world it's not really how react

works so how do we do it well we are

creating a new msl2 provider that is

coming from our mgtm cell to provider

package

and we're assigning it a couple of

properties the first one being the

client id the client id

that could

either here be hard-coded or be part of

your environment variables that you

would be using

with react

and then a series of scopes these scopes

are the different scopes that you want

to use in your application

here i'm predefining these scopes but if

you want you can also leverage

a very very minimal set of scopes here

and have the dynamic consent or

incremental consent to pop up

when you're using capabilities when

you're going uh deeper into your

application so let's say you want to use

files in a specific area of your app you

could ask for that scope at that moment

and not beforehand

so in my index at ts that's the only

thing i have to do it's going to set up

everything we need from an

authentication standpoint it's going to

know what's what's over there uh our app

is already pre-configured our azure ad

app is already pre-configured with

basically just the url back to this

local host that i'm using here localhost

2000 and that's it

so now your app is ready to be used it's

preconfigured with mgt and now what

we're going to do is we're going to

import some of these components from mgt

to leverage them

in

our application

our app here

we'll start with

this here

we will be providing a login component

and this login component is a react

component it's fully

entirely rich it has all the

capabilities that you need from

a react standpoint so if you want to add

some of these properties you're going to

be able to leverage or autocomplete

right there

you can see everything that is here

all of the different properties that are

available

you can even go to

aka rms slash mgt slash dots where you

can find

the the all the components that we have

for example the login component and you

want to see all the different properties

well you're going to see them here well

in in our

case we don't have a lot of properties

here on the on the login component where

there's basically only the user details

but here you see the attribute will be

for plain html and the property would be

the one to be used with react

so very simple way of documenting

everything is in a single place

super easy to get that going

and now when i do the login

automatically i can actually let me just

remove all of this so we

don't have to

see it happening and now when i refresh

i just see my component right here and i

see the component showing up

right in here nothing to change it just

logs you in in my case i was already

logged in i was i already consented to

my app but besides that it's the same

component that was

used

when

we were using the html components now

we're using the full

on

um react components and the second thing

i want to show is

how we have built this these

these components in a way that they feel

native to react something that we did is

we provided

border play code to get

some of the hooks that you might want

for example here we provided a use is

signed in hook

where you can create the hook and

understand when there are some changes

in the login capability so when i'm

signed in now i'm going to receive is

signed in to true

what will that

deliver to my app i will be able to get

a reference

this is signed in and i will be able to

use react to protect areas of my app i

want the user to be signed in before you

can showcase this component

and that's exactly what we're doing here

so when i i save this

now

and i

save this actually

if i do something bad oh it's good and

now automatically because i'm signed in

i can have all of these components show

up what are these components first

there's the agenda component all the

components we have in mtt are available

as react components so don't think that

there's one or the other all of them are

available and today i want to showcase

three of them

so the agenda

um where i could also see for example

group by day

i can just say this is true

and i want to do it right there saving

this and now i have it grouped by day

so depending on

your use cases you can configure the

components the exact same way you do it

in html but now you're doing it natively

with react

the second component that i wanted to

share is the file list the file list is

here i have a really really good file

list right here where i can show more

items where i can see all of them so

this file list with all the properties

that you can find is also available this

is a composition of multiple components

we have including the file the file list

and all of that so it really feels

natural when you're using them within

react

something that we also showed a couple

of weeks ago was the use of custom

components

namely the get component that was

allowing you

to basically get access to

any

endpoints and graph when you're thinking

that oh i might not have all the

capabilities i need with the feature set

of the graph toolkit but i want to still

use graph

to get data for example from my emails

but mgt doesn't have an email component

how do i do that

well this is where

we now have a way to have a get

component with the exact same

capabilities that we have on the mgt get

custom

element which is our web component so

here you just need to specify some of

the resources you need in that case the

resource the max pages all of them in in

a very react way and we also support

custom templating of every single react

components in mgt components

so you've seen already in the past

in some of our session that you we could

change the way it looks or even we could

change the actual html for sections of

the components well in our case that's

exactly what we're doing here so what

we're doing is we are leveraging

native

react components so for example here i

have my email component

that will overwrite the template that is

called value if you go to the

documentation you're going to see that

we're going to have a value compo or

value template

that is

used for every single item

of an array

so in my case what i did i created a

very simple emails component

all built in react

where i can embed all my logic here

i can have all my different divs i can

even use other mgt component here i'm

using the person component again i can

do all the

really normal things that i would do

with react

and when i go to the emails tab now

you're going to see

that we have a great experience here

because we have all of these great

components showing up all using the

underlying foundation of the graph

toolkit which will do all the caching

all the logic all the paging all the

batching for you

the only thing you have to care about is

to build the html of your component so

don't stop at looking at the current

feature set of mgt you can always build

your own components when you feel that

this is absolutely required so how do we

do that here we just need to provide a

property

here that

would be an ng template props and

automatically you will be able to

identify what's happening once the data

is being passed to you and you're going

to be able to display that

straight on the screen so

a couple of resources before we end and

i give it uh it back to you

vesa

thanks for today our next couple of

sessions we'll continue building on top

of this we're gonna talk about teams

angular sharepoint framework

[Music]