Prise en main de Microsoft Graph ToolkitGetting started with the Microsoft Graph Toolkit

Les composants de la boîte à outils Microsoft Graph peuvent être facilement ajoutés à votre application Web, le composant WebPart SharePoint ou les onglets Microsoft Teams.The Microsoft Graph Toolkit components can easily be added to your web application, SharePoint web part, or Microsoft Teams tabs. Les composants sont basés sur des normes Web et peuvent être utilisés dans des projets JavaScript simples ou avec des infrastructures Web populaires telles que la portée, l’angle, la Vue.js et bien plus encore.The components are based on web standards and can be used in both plain JavaScript projects or with popular web frameworks such as Reach, Angular, Vue.js, and more.

Vous pouvez regarder cette courte vidéo pour découvrir comment commencer rapidement et facilement la prise en main de la boîte à outils.You can watch this short video to see how quick and easy it is to get started with the Toolkit.

Configurer votre client Microsoft 365Set up your Microsoft 365 tenant

Pour développer à l’aide de la boîte à outils, vous devez accéder à un client Microsoft 365.In order to develop with the Toolkit, you need access to a Microsoft 365 tenant. Si vous n’en avez pas, vous pouvez obtenir gratuitement un abonnement Microsoft 365 Developer en joignant le programme de développement microsoft 365.If you don't have one, you can get a free Microsoft 365 developer subscription by joining the Microsoft 365 Developer Program. Pour plus d’informations sur la configuration de votre abonnement, consultez la rubrique set up a Microsoft 365 Developer subscription.For details about how to configure your subscription, see Set up a Microsoft 365 developer subscription.

Configuration de votre environnement de développementSet up your development environment

Pour développer à l’aide de la boîte à outils, vous aurez besoin d’un éditeur de texte ou IDE.To develop with the Toolkit, you will need a text editor or IDE. Vous pouvez utiliser l’éditeur ou l’IDE de votre choix ou installer et utiliser Visual Studio code gratuitement.You can use the editor or IDE of your choice or install and use Visual Studio Code for free. Vous aurez également besoin d’un navigateur Web moderne tel que Microsoft Edge, Google Chrome ou Firefox.You will also need a modern web browser like Microsoft Edge, Google Chrome, or Firefox.

Utilisation de Microsoft Graph ToolkitUsing the Microsoft Graph Toolkit

Vous pouvez utiliser Microsoft Graph Toolkit dans votre application en référençant le chargeur directement (via unpkg) ou en installant le package NPM.You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package.

Utilisation via le chargeur de gestionUse via mgt-loader

Pour utiliser la boîte à outils via le chargeur de gestion, ajoutez la référence dans un script à votre code :To use the Toolkit via mgt-loader, add the reference in a script to your code:

<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

Utilisation via NPM (modules ES6)Use via npm (ES6 modules)

L’utilisation de la boîte à outils via des modules ES6 vous permettra de contrôler totalement le processus de regroupement et de vous permettre de regrouper uniquement le code dont vous avez besoin pour votre application.Using the Toolkit via ES6 modules will give you full control of the bundling process and allow you to bundle only the code you need for your application. Pour utiliser les modules ES6, ajoutez le package NPM à votre projet :To use the ES6 modules, add the npm package to your project:

npm install @microsoft/mgt

À présent, vous pouvez référencer tous les composants de la page que vous utilisez :Now you can reference all the components in the page you're using:

<script src="node_modules/@microsoft/mgt/dist/es6/components.js"></script>

Vous pouvez également faire référence au composant dont vous avez besoin et éviter de charger tout le reste :Or, just reference the component you need and avoid loading everything else:

<script src="node_modules/@microsoft/mgt/dist/es6/components/mgt-login/mgt-login.js"></script>

PolyfillsPolyfills

Si vous utilisez les modules ES6 du package NPM et que vous Ciblez un navigateur tel que IE11 qui ne prend pas en charge les composants Web en mode natif, vous devrez inclure des polyremplissages dans votre projet, car ils ne sont pas inclus automatiquement.If you're using the ES6 modules from the npm package and you're targeting a browser such as IE11 that does not support web components natively, you will need to include polyfills in your project, as they are not automatically included. Les polyremplissages permettent de remplir les fonctionnalités de navigateur manquantes dans les navigateurs qui sont toujours en cours de mise à jour pour prendre en charge les normes webcComponent.Polyfills help to fill in missing browser capabilities in browsers that are still in the process of updating to support webcComponent standards. Pour plus d’informations et pour plus d’informations, consultez la rubrique polyfills documentation.For instructions and to learn more, see polyfills documentation.

Les polyremplissages sont déjà inclus si vous utilisez la boîte à outils via le script du chargeur de gestion.The polyfills are already included if you're using the Toolkit via the mgt-loader script.

Étapes suivantesNext Steps

Vous êtes maintenant prêt à commencer à développer avec Microsoft Graph Toolkit !You're now ready to start developing with the Microsoft Graph Toolkit! Les guides suivants sont disponibles pour vous aider à commencer :The following guides are available to help you get started: