Créer un package d’application pour votre application Microsoft teamsCreate an app package for your Microsoft Teams app

Les applications dans teams sont définies par un fichier JSON de manifeste d’application et regroupées dans un package d’application avec leurs icônes.Apps in Teams are defined by an app manifest JSON file, and bundled in an app package with their icons. Vous aurez besoin d’un package d’application pour télécharger et installer votre application dans Teams, et pour publier le catalogue d’applications de votre ligne de l’application métier ou vers AppSource.You'll need an app package to upload and install your app in Teams, and to publish to either your Line of Business app catalog or to AppSource.

Un package d’applications teams est un fichier. zip contenant les éléments suivants :A Teams app package is a .zip file containing the following:

  • Un fichier manifeste nommé « manifest.json », qui spécifie les attributs de votre application et pointe vers les ressources requises pour votre expérience, telles que l’emplacement de sa page de configuration d’onglets ou l’ID d’application Microsoft pour son bot.A manifest file named "manifest.json", which specifies attributes of your app and points to required resources for your experience, such the location of its tab configuration page or the Microsoft app ID for its bot.
  • Une icône « plan » transparente et une icône « couleur » complète.A transparent "outline" icon and a full "color" icon. Pour plus d’informations, consultez la section icônes plus loin dans cette rubrique.See Icons later in this topic for more information.

Création d’un manifesteCreating a manifest

Teams App Studio peut vous aider à configurer votre manifeste.Teams App Studio can help configure your manifest. Elle contient également une bibliothèque de contrôle React et des exemples configurables pour les cartes.It also contains a React control library and configurable samples for cards. Voir application Studio Overview.See App Studio Overview.

Votre fichier manifeste doit être nommé « manifest.js » et se trouver au niveau supérieur du package de téléchargement.Your manifest file must be named "manifest.json" and be at the top level of the upload package. Notez que les manifestes et les packages créés précédemment peuvent prendre en charge une version plus ancienne du schéma.Note that manifests and packages built previously might support an older version of the schema. Pour les applications teams et en particulier la soumission AppSource (anciennement Office Store), vous devez utiliser le schéma de manifesteactuel.For Teams apps and especially AppSource (formerly Office Store) submission, you must use the current manifest schema.

Conseil

Spécifiez le schéma au début de votre manifeste pour activer IntelliSense ou une prise en charge similaire à partir de votre éditeur de code :Specify the schema at the beginning of your manifest to enable IntelliSense or similar support from your code editor:

"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",

IcônesIcons

Notes

Si votre application contient un bot ou une extension de messagerie, les icônes utilisées seront les icônes chargées dans l’enregistrement de votre bot dans l’infrastructure de robot.If your app contains a bot or messaging extension, the icons used will be the icons uploaded to your bot registration in the Bot Framework.

Microsoft teams nécessite deux icônes pour l’expérience de votre application, à utiliser dans le produit.Microsoft Teams requires two icons for your app experience, to be used within the product. Les icônes doivent être incluses dans le package et référencées via des chemins d’accès relatifs dans le manifeste.Icons must be included in the package and referenced via relative paths in the manifest. La longueur maximale de chaque chemin d’accès est de 2048 octets, et le format de l’icône est. png.The maximum length of each path is 2048 bytes, and the format of the icon is .png.

colorcolor

L' color icône est utilisée dans Microsoft Teams (dans les galeries d’applications et d’onglets, les robots, les lanceurs, etc.).The color icon is used throughout Microsoft Teams (in app and tab galleries, bots, flyouts, and so on). Cette icône doit être 192x192 pixels.This icon should be 192x192 pixels. Votre icône peut être n’importe quelle couleur (ou couleurs), mais l’arrière-plan doit être votre couleur d’accentuation personnalisée.Your icon can be any color (or colors), but the background should be your branded accent color. Elle doit également avoir une petite quantité de remplissage autour de l’icône pour prendre en charge le rognage hexagonal pour la version bot de l’icône.It should also have a small amount of padding surrounding the icon to accommodate the hexagonal cropping for the bot version of the icon.

outlineoutline

L' outline icône est utilisée aux emplacements suivants : la barre d’application et les extensions de messagerie que l’utilisateur a marquées comme « favoris ».The outline icon is used in these places: the app bar and messaging extensions the user has marked as a "favorite." Cette icône doit être de 32x32 pixels.This icon must be 32x32 pixels. Votre icône de contour ne doit contenir que le blanc et la transparence (aucune autre couleur).Your outline icon must contain only white and transparency (no other colors). L’icône peut être blanche avec un arrière-plan transparent ou transparente avec un arrière-plan blanc.The icon can be white with transparent background or transparent with a white background. L’icône de contour ne doit pas avoir de remplissage supplémentaire autour de l’icône et doit être aussi rapprochée que possible tout en maintenant les dimensions 32x32.The outline icon should not have extra padding surrounding the icon and should be as tightly cropped as possible while still maintaining the 32x32 dimensions. Voici quelques exemples intéressants :Here are a few good examples:

Exemples d’icônes de plan

Imaginons, par exemple, que votre société est contoso.For example, say your company is Contoso. Vous devez envoyer deux icônes :You'd submit two icons:

Présentation des icônes

Voici comment les icônes apparaîtront dans l’interface utilisateur :Here's how the icons would appear in the UI:

Robot et chiclet dans l’affichage des canauxBot and chiclet in Channel view

Bot et chiclet UX

MenuFlyout

Exemples d’icônes contoso

Barre d’application et écran d’accueilApp bar and home screen

Exemples d’icônes contoso