Développez rapidement des applications avec App Studio pour Microsoft TeamsQuickly develop apps with App Studio for Microsoft Teams

App Studio vous permet de créer et d’intégrer facilement vos propres applications Microsoft Teams, que vous développiez des applications personnalisées pour votre entreprise ou des applications SaaS pour des équipes du monde entier, en rationalisant la création du manifeste et du package pour votre application et en fournissant des outils utiles comme l'éditeur de cartes et une bibliothèque de contrôle React.App Studio makes it easy to start creating or integrating your own Microsoft Teams apps, whether you develop custom apps for your enterprise or SaaS applications for teams around the world by streamlining the creation of the manifest and package for your app and providing useful tools like the Card Editor and a React control library.

Installation de App StudioInstalling App Studio

App Studio est une application Teams disponible dans la boutique Teams.App Studio is a Teams app which can be found in the Teams store. Suivez ce lien pour le téléchargement direct : App Studio (l’application est également disponible dans l’App Store).Follow this link for direct download: App Studio (you can also find the app in the app store).

Dans le Store, recherchez App Studio.In the store, search for App Studio.

Entrée du Store pour App Studio

Sélectionnez la vignette App Studio pour ouvrir la page d’installation de l’application :Select the App Studio tile to open the app install page:

Configurer de app studio

Sélectionnez Installer.Select install.

app studio

Une fois dans App Studio, cliquez sur l’onglet Éditeur de manifeste dans lequel vous pouvez importer une application existante ou créer une nouvelle application.Once you are in App Studio, click on the Manifest editor tab where you can either import an existing app or create a new app.

Fonctionnalités d’App StudioApp Studio Features

Cette section traite des fonctionnalités, telles que la conversation, l’éditeur de manifeste, les détails et les fonctionnalités.This section covers features, such as conversation, manifest editor, details, and capabilities. Vous pouvez personnaliser vos fonctionnalités à l’aide de la personnalisation de l’application.You can customize your capabilities using app customization.

ConversationConversation

C’est l’endroit où vous pouvez voir à quoi ressemblent les cartes de visite que vous créez dans App Studio dans Teams lorsque vous les testez en les envoyant vous-même.This is where you can see what cards you create in App Studio look like in Teams when you test them by sending them to yourself.

Éditeur de manifesteManifest Editor

Comme indiqué précédemment, la partie la plus importante d’un package d’application Microsoft Teams est son fichier manifest.json.As mentioned earlier, the most significant part of a Microsoft Teams app package is its manifest.json file. Ce fichier, qui doit être conforme au schéma de l’application Teams, contient des métadonnées qui permettent à Teams de présenter correctement votre application aux utilisateurs.This file, which must conform to the Teams App schema, contains metadata which allows Teams to correctly present your app to users.

L’onglet Éditeur de manifeste dans App Studio simplifie la création du manifeste, ce qui vous permet de décrire l’application, de télécharger vos icônes, d’ajouter des fonctionnalités d’application et de créer un fichier .zip qui peut être facilement téléchargé dans Teams à des utilisateurs à des buts de test ou de distribution.The Manifest Editor tab in App Studio simplifies creating the manifest, allowing you to describe the app, upload your icons, add app capabilities, and produce a .zip file which can easily be uploaded into Teams for testing or distributed for others to use. Notez que App Studio ne produit pas de code fonctionnel pour votre application ou n’héberge pas votre application.Note that App Studio does not produce functional code for your app, or host your app. Votre application doit déjà être hébergée et en cours d’exécution à l’URL répertoriée dans le manifeste pour que le processus de chargement de l’application aboutisse à une application fonctionnelle.Your app must already be hosted and running at the URL listed in the manifest for the app upload process to result in a working app.

DétailsDetails

La section détails de l’Éditeur de manifeste définit la description générale de l’application que vous êtes en train de réaliser.The details section of the Manifest Editor defines the high-level description of the app you are making. Notamment le nom, la description et l’image de marque de l’application.This includes things such as the app’s name, description, and visual branding. Vous pouvez générer automatiquement un GUID pour votre application et fournir des URL pour votre déclaration de confidentialité et vos conditions d’utilisation.You can automatically generate a GUID for your app and provide URLs for your privacy statement and terms of use.

FonctionnalitésCapabilities

La section Fonctionnalités de l'Éditeur de manifeste est l'endroit où les fonctionnalités de l'application sont définies et où les détails de chacune de ces fonctionnalités sont énumérés.The capabilities section of the Manifest Editor is where the app's capabilities are defined and where details of each of those capabilities are listed.

Notes

La fonctionnalité de personnalisation de l’application est actuellement disponible en prévisualisation pour les développeurs uniquement.The app customization feature is currently available in developer preview only.

En tant que meilleure pratique, vous devez fournir des instructions de personnalisation que les utilisateurs et les clients de l’application doivent suivre lors de la personnalisation de votre application.As a best practice, you must provide customization guidelines for app users and customers to follow when customizing your app. Pour plus d’informations, voir personnaliser les applications dans Microsoft Teams.For more information, see customize apps in Microsoft Teams.

OngletsTabs
  • Onglets d’équipe.Team Tabs. Un onglet d’équipe devient un canal et permet d’accéder rapidement aux informations et ressources de l’équipe.A team tab becomes part of a channel and provides quick access to team information and resources. Par exemple, l’onglet Planificateur d’un canal contient un seul plan. L’onglet Power BI correspond à un rapport spécifique.For example, the Planner tab for a channel contains a single plan; the Power BI tab maps to a specific report. Les utilisateurs peuvent explorer le contexte approprié, mais ils ne peuvent pas naviguer en dehors de l’onglet. Par exemple, l’onglet Power BI n’active pas la navigation vers les autres rapports Power BI, mais il active le bouton Accéder au site web qui lance le rapport dans le site web principal de Power BI.Users can drill down to the relevant context, but they should not be able to navigate outside the tab. The Power BI tab, for instance, doesn't enable navigation to other Power BI reports, but it does enable the Go to website button that launches the report in the main Power BI website.

    Pour les onglets d’équipe, vous devez fournir une URL de configuration pour présenter les options et collecter les informations nécessaires pour que les utilisateurs personnalisent le contenu et l’expérience de votre onglet. Cette page HTML iframée s’affiche lorsqu’un utilisateur ajoute l’onglet pour la première fois à un canal.For team tabs, you must provide a Configuration URL to present options and gather information so users can customize the content and experience of your tab. This iframed HTML page is displayed when a user first adds the tab to a channel.

    Vous devez également fournir d'autres domaines à partir desquels l'onglet doit être chargé ou lié.You must also provide any additional domains that the tab expects to load from or link to.

  • Onglets personnels.Personal Tabs. Cette section vous permet de définir un ensemble d’onglets qui sont présentés par défaut dans l’expérience d’application personnelle (c’est-à-dire, l’expérience qu’un utilisateur a avec votre application en dehors du contexte d’une équipe ou d’un canal).This section lets you define a set of tabs that are presented by default in the personal app experience (i.e. the experience a user has with your app outside the context of a team or channel). Dans cette section, indiquez le nom de l’onglet, un identificateur unique, l’URL qui pointe vers l’interface utilisateur à afficher dans Teams et éventuellement l’URL à utiliser si un utilisateur choisit d’afficher l’onglet dans un navigateur.In this section, provide the tab name, a unique identifier, the URL that points to the UI to be displayed in Teams, and optionally, the URL to use if a user opts to view the tab in a browser. Comme pour les onglets Teams, indiquez tous les autres domaines à partir desquels l'onglet devrait être chargé ou lié.As with Teams tabs, provide any additional domains from which the tab expects to load from or link to.

BotsBots

Cette section vous permet d’ajouter un bot conversation à votre application.This section allows you to add a conversational bot to your app. Si vous avez déjà inscrit un bot auprès de Bot Framework, vous pouvez ajouter ce bot en cliquant sur Configurer et en fournissant le nom du bot, l’ID Bot Framework, et en définissant les étendues dans lesquelles le bot fonctionne.If you already have a bot registered with Bot Framework, you can add that bot by clicking Set Up and supplying the bot's name, Bot Framework ID, and defining the scopes in which the bot will work.

Si vous n’avez pas encore inscrit un bot auprès de Bot Framework, cliquez sur s'inscrire pour en créer un autre.If you have not yet registered a bot with the Bot Framework, click Register to create a new one. Une fois que vous avez inscrit votre bot, revenez à cette section de l’Éditeur manifeste pour entrer son nom et l’ID Bot Framework.Once you’re done registering your bot, come back to this section of the Manifest Editor to enter its name and Bot Framework ID.

Une fois que vous avez fourni les informations de votre bot, vous pouvez éventuellement définir une liste de commandes que votre bot peut suggérer aux utilisateurs.After you have supplied your bot's information, you can now optionally define a list of commands that your bot can suggest to users. Ajoutez le nom de la commande, une description de celle-ci qui indique sa syntaxe et ses arguments, ainsi que l’étendue à laquelle cette commande doit s’appliquer.Add the name of the command, a description of the command which indicates its syntax and arguments, and the scope(s) to which this command should apply.

Notez que si vous avez défini votre bot pour prendre en charge une seule étendue, les commandes spécifiées pour l’étendue non prise en charge seront ignorées.Note that if you have defined your bot to only support one scope, commands specified for the unsupported scope will be ignored. Vous pouvez modifier les étendues que votre bot prend en charge à tout moment.You can edit the scopes your bot supports at any time.

ConnecteursConnectors

Cette section vous permet d’ajouter un connecteur à votre application.This section allows you to add a connector to your app. Si vous avez déjà inscrit un connecteur Office 365, sélectionnez Configurer puis entrez le nom et l’ID du connecteur.If you already have registered an Office 365 connector, choose Set up and enter the name and ID of the connector. Si vous voulez un nouveau connecteur, cliquez sur S'inscrire pour accéder au tableau de bord du développeur de connecteurs dans votre navigateur.If you want a new connector click Register to be taken to the Connector Developer Dashboard in your browser.

Notes

La personnalisation d’application permet aux administrateurs de modifier l’apparence des applications chargées par le biais de bots, d’extensions de messagerie, d’onglets et de connecteurs.App customization enables admins to change the look-and-feel of the apps loaded through bots, messaging extensions, tabs, and connectors. Par exemple, si l’administrateur Teams personnalise le nom d’une application de Contoso à Agent Contoso, l’application apparaît sous le nouveau nom Agent Contoso pour les utilisateurs.For example, if the Teams admin customizes the name of an app from Contoso to Contoso Agent, then the app will appear with the new name Contoso Agent to users. Toutefois, lors de l’ajout d’un connecteur à une conversation, dans la liste, les connecteurs afficheront toujours le nom de l’application en tant que Contoso.However, while adding a connector to a chat, in the list the connectors will still show the name of the app as Contoso.

Extensions de messagerieMessaging Extensions

Les extensions de messagerie sont un moyen puissant pour les utilisateurs de interagir avec votre application au sein de Microsoft Teams.Messaging extensions are a powerful way for users to engage with your app within Microsoft Teams. Les utilisateurs peuvent interroger les informations de votre service et publier ces informations sous forme de cartes, directement dans le canal ou la conversation instantanée.Users can query for information from your service and post that information in the form of cards, right into the channel or chat conversation.

Les extensions de messagerie sont optimisées par des bots Bot Framework. Ils ont donc besoin d’un bot configuré pour opérer.Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. Si vous avez le nom et l’ID Bot Framework du bot dont vous voulez power l’extension de messagerie, entrez-le.If you have the name and Bot Framework ID of the bot you would like to power the messaging extension, enter it. Sinon, cliquez sur S'inscrire pour en créer un, puis entrez les informations par la suite.Otherwise, click Register to create one and enter the information afterward. Choisissez si la configuration d’une extension de messagerie peut être mise à jour par l’utilisateur.Select whether the configuration of a messaging extension can be updated by the user.

Une fois le bot sous-jacent configuré, définissez les commandes et paramètres que l’extension de messagerie peut accepter.Once you have the underlying bot configured, define the commands and parameters which the messaging extension can accept.

Chaque commande nécessite un titre et un ID.Each command requires a title and an ID. La commande peut éventuellement contenir une description pour l’utilisateur.The command can optionally contain a description for the user. Chaque commande peut prendre en charge jusqu’à cinq paramètres, chacun d’eux nécessitant :Each command can support up to five parameters, each of which requires:

  • Nom du paramètre tel qu’il apparaît dans le client Teams et est inclus dans la demande de l’utilisateurThe name of the parameter as it appears in the Teams client and is included in the user request
  • Titre convivialA user-friendly title
  • Description facultativeAn optional description

Tester et distribuerTest and Distribute

Une fois que vous avez fini de définir votre application, la section Tester et distribuer vous permet d’exporter la définition de votre application en tant que fichier zip, qui peut ensuite être partagé et téléchargé dans le client Teams à des moments de test.Once you have finished defining your application, the Test and Distribute section allows you export your app’s definition as a zip file which then can be shared and uploaded into the Teams client for testing. Cliquer sur Exporter télécharge le fichier zip sous appname.zip dans votre répertoire de téléchargement par défaut.Clicking export downloads the zip file as appname.zip in your default download directory.

Publier votre application sur TeamsPublish your app to Teams

Sur la page d’accueil de votre projet, vous pouvez télécharger votre application dans une équipe, l’envoyer sur le magasin d’applications personnalisé de votre entreprise pour les utilisateurs de votre organisation ou envoyer votre application à la source de l’application pour tous les utilisateurs Teams.On your project home page, you can upload your app to a team, submit your app to your company custom app store for users in your organization, or submit your app to App Source for all Teams users. Votre administrateur informatique examine ces envois.Your IT admin will review these submissions. Vous pouvez revenir à la page Publier pour vérifier l’état de votre envoi et savoir si votre application a été approuvée ou refusée par votre administrateur informatique. C’est également ici que vous pouvez envoyer des mises à jour à votre application ou annuler les envois en cours.You can return to the Publish page to check on your submission status and learn if your app was approved or rejected by your IT admin. This is also where you'll come to submit updates to your app or cancel any currently active submissions.

Éditeur de carteCard Editor

Une carte est un conteneur pour des éléments d’informations courts ou associés.A card is a container for short or related pieces of information. Microsoft Teams prend en charge les cartes, qui peuvent avoir plusieurs propriétés et pièces jointes.Microsoft Teams supports cards, which can have multiple properties and attachments. Les cartes sont un moyen clé pour les bots et les connecteurs de relayer des informations utilisables pour les utilisateurs.Cards are a key way that bots and connectors relay actionable information to users.

Pour simplifier ce processus et réduire le risque d’erreurs, l’onglet Éditeur de carte vous permet de créer des Cartes bannières ou miniatures à l’aide d’un formulaire, et de vérifier et de tester la carte résultante (exactement comme le ferait un utilisateur) via un bot.To make this process easier and less error-prone, the Card Editor tab lets you build Hero Cards or Thumbnail Cards using a form and verify and test the resulting card (exactly as a user would see it) via a bot. Elle fournit également le code JSON, C# ou Node.js correspondant pour la carte que vous pouvez copier/coller dans le code source de votre application.It also provides the corresponding JSON, C#, or Node.js code for the card that you can copy/paste into your app's source code.

Si vous avez déjà une carte que vous voulez vérifier dans Teams, vous pouvez coller le JSON de cette carte dans l’onglet JSON sous Ajouter des informations de carte et vous les envoyer pour voir à quoi celle-ci ressemble dans une conversation.If you already have a card that you would like to verify inside Teams, you can paste the JSON for that card into the JSON tab under Add card info and send it to yourself to see what it looks like in a chat.

Bibliothèque de contrôles ReactReact Control Library

Notes

Cette bibliothèque de contrôle React sera déconseillée à l'avenir.This React control library will be deprecated in the future. Envisagez d’utiliser les contrôles React de l’interface utilisateur Fluent comme alternative (anciennement Stardust UI).Consider using the Fluent-UI react controls as an alternative (formerly Stardust UI).

La création d’une application qui suit les meilleures pratiques de Teams est un excellent moyen de donner à votre application une apparence qui s’adapte parfaitement à l’expérience cliente de Teams.Creating an app that follows the Teams best practices is a great way to give your app a look and feel that fits seamlessly with the Teams client experience. Les contrôles d’interface utilisateur sont essentiels pour atteindre cet objectif.The UI controls that you use are critical to achieving that end. Pour simplifier la création d’une interface utilisateur cohérente, App Studio fournit plusieurs catégories de contrôles d’interface utilisateur qui suivent les principes de conception de Teams.To make it easier to create a consistent UI, App Studio provides several categories of UI controls which follow Teams design principles.

Des exemples de contrôles et de composants React correspondants sont fournis et prêts à être utilisés pour la création de votre application.Examples of the controls and corresponding React components are provided and ready to use in building your app.

ContrôlesControls

Les contrôles incluent :Controls include:

  • BoutonsButtons
  • Listes déroulantesDropdowns
  • Cases à cocherCheckboxes
  • Cases d’optionRadio Buttons
  • BasculeToggles
  • Zones de texteText Areas
  • LiensLinks
  • OngletsTabs
  • TablesTables
  • IcônesIcons