Développer rapidement des applications avec App Studio pour Microsoft teamsQuickly develop apps with App Studio for Microsoft Teams

App Studio facilite la création ou l’intégration de vos propres applications Microsoft Teams, que vous développiez des applications personnalisées pour vos applications d’entreprise ou SaaS pour teams dans le monde entier en rationalisant la création du manifeste et du package pour votre application et en fournissant des outils utiles tels que l’éditeur de carte 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 d’App StudioInstalling App Studio

App Studio est une application de teams qui se trouve dans le Store Teams.App Studio is a Teams app which can be found in the Teams store. Suivez ce lien pour télécharger directement : app Studio (vous pouvez également trouver l’application dans le magasin d’applications).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 de magasin 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 App Studio

Sélectionnez installer.Select install.

App Studio

Une fois que vous êtes dans l’application Studio, cliquez sur l’onglet éditeur de manifeste où vous pouvez importer une application existante ou créer une 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

ConversationConversation

C’est ici que vous pouvez voir les cartes 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 significative d’un package d’application Microsoft teams est son manifest.jssur fichier.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 d’application de 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 produire un fichier. zip pouvant facilement être téléchargé dans teams à des fins de test ou distribué à d’autres personnes.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 l’application Studio ne produit pas de code fonctionnel pour votre application ou héberge 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 d’application se traduit par une application de travail.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 de haut niveau de l’application que vous effectuez.The details section of the Manifest Editor defines the high-level description of the app you are making. Cela inclut des éléments tels que le nom, la description et la personnalisation visuelle 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 les 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 des 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 répertorié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.

OngletsTabs
  • Onglets équipe.Team Tabs. Un onglet équipe fait partie d’un canal et permet d’accéder rapidement aux informations et aux 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 est mappé à 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 accéder au contexte approprié, mais ils ne doivent pas pouvoir naviguer à l’extérieur de l’onglet. L’onglet Power BI, par exemple, ne permet pas la navigation vers d’autres rapports Power BI, mais il active le bouton accéder au site Web qui lance le rapport dans le site Web Power bi principal.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 des informations afin que les utilisateurs puissent personnaliser le contenu et l’expérience de votre onglet. Cette page HTML iframe est affichée lorsqu’un utilisateur ajoute l’onglet à un canal pour la première fois.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 les domaines supplémentaires à partir desquels le chargement ou la liaison doit être lié à l’onglet.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 de l’application personnelle (par exemple, l’expérience qu’a un utilisateur 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 avec les onglets Teams, fournissez tous les domaines supplémentaires à partir desquels le chargement de l’onglet est prévu 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 de conversation à votre application.This section allows you to add a conversational bot to your app. Si vous avez déjà un bot enregistré avec bot Framework, vous pouvez l’ajouter en cliquant sur configurer et en fournissant le nom du bot, l’ID de l’infrastructure bot et en définissant les étendues dans lesquelles le bot fonctionnera.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 enregistré de robot avec l’infrastructure de robot, cliquez sur Enregistrer pour en créer un nouveau.If you have not yet registered a bot with the Bot Framework, click Register to create a new one. Une fois que vous avez fini d’inscrire votre robot, revenez à cette section de l’éditeur de manifeste pour entrer son nom et son ID d’infrastructure de robot.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 robot, vous pouvez définir éventuellement une liste de commandes que votre bot peut suggérer aux utilisateurs.Once 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 la commande qui indique sa syntaxe et ses arguments, ainsi que la ou les étendues auxquelles 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 de sorte qu’il ne prenne en charge qu’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 robot 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 souhaitez qu’un nouveau connecteur clique sur inscrire dans le tableau de bord du développeur connecteur dans votre navigateur.If you want a new connector click Register to be taken to the Connector Developer Dashboard in your browser.

Extensions de messagerieMessaging Extensions

Les extensions de messagerie sont un moyen efficace pour les utilisateurs de s’engager avec votre application dans Microsoft Teams.Messaging extensions are a powerful way for users to engage with your app within Microsoft Teams. Les utilisateurs peuvent demander des informations à votre service et publier ces informations sous la forme de cartes, directement dans la conversation de canal ou de conversation.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 gérées par les robots de l’infrastructure bot, de sorte qu’ils nécessitent un bot configuré pour fonctionner.Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. Si vous avez le nom et l’ID de l’infrastructure de bot du bot sur lequel vous souhaitez alimenter 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. Dans le cas contraire, cliquez sur Enregistrer pour en créer un et entrez les informations par la suite.Otherwise, click Register to create one and enter the information afterward. Indiquez 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 que le bot sous-jacent est configuré, définissez les commandes et les 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’entre eux nécessitant :Each command can support up to five parameters, each of which requires:

  • Le nom du paramètre tel qu’il apparaît dans le client teams et est inclus dans la demande de l’utilisateur.The 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

Test et distributionTest and Distribute

Une fois que vous avez terminé la définition de votre application, la section test et distribution vous permet d’exporter la définition de votre application sous la forme d’un fichier zip, qui peut ensuite être partagé et téléchargé dans le client teams à des fins 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. Si vous cliquez sur Exporter, le fichier zip est téléchargé en appname.zip dans le 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 dans teamsPublish your app to Teams

Sur la page d’accueil de votre projet, vous pouvez charger votre application dans une équipe, envoyer votre application à votre magasin d’applications personnalisé d’entreprise pour les utilisateurs de votre organisation ou soumettre votre application à la source de l’application pour tous les utilisateurs de 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 examinera 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 rejetée par votre administrateur informatique. Il s’agit également de l’endroit où vous allez envoyer des mises à jour à votre application ou d’annuler les envois actuellement actifs.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 informations courtes ou associées.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 une façon dont les robots et les connecteurs relaient les informations exploitables aux utilisateurs.Cards are a key way that bots and connectors relay actionable information to users.

Pour simplifier ce processus et réduire les risques d’erreurs, l’onglet Éditeur de carte vous permet de créer des cartes de héros ou des cartes miniatures à l’aide d’un formulaire et de vérifier et tester la carte obtenue (exactement comme un utilisateur le verrait) 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. Il 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 disposez déjà d’une carte que vous souhaitez vérifier dans Teams, vous pouvez coller le JSON de cette carte dans l’onglet JSON sous Ajouter des informations sur la carte et vous l’envoyer à vous-même pour voir à quoi il 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ôle 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 Fluent-UI REACT 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 un aspect adapté à l’expérience client 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 de l’interface utilisateur que vous utilisez sont essentiels pour atteindre cette fin.The UI controls that you use are critical to achieving that end. Pour faciliter 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 dans 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 sont les suivants :Controls include:

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