Créer des applications avec Team Toolkit et Visual Studio codeBuild apps with the Teams Toolkit and Visual Studio Code

Le Kit de ressources Microsoft teams vous permet de créer des applications personnalisées d’équipes directement dans l’environnement deVisual Studio Code.The Microsoft Teams Toolkit enables you to create custom Teams apps directly within the Visual Studio Code environment. Le kit de ressources vous guide dans le processus et vous fournit toutes les fonctionnalités nécessaires pour créer, déboguer et lancer votre application Teams.The toolkit guides you through the process and provides everything you need to build, debug, and launch your Teams app.

Installation du kit de développement teamsInstalling the Teams Toolkit

Microsoft teams Toolkit for Visual Studio code peut être téléchargé à partir de Visual Studio Marketplace ou directement en tant qu’extension dans Visual Studio code.The Microsoft Teams Toolkit for Visual Studio Code is available for download from the Visual Studio Marketplace or directly as an extension within Visual Studio Code.

Conseil

Après l’installation, vous devriez voir la boîte à outils teams dans la barre d’activité code Visual Studio.After installation, you should see the Teams Toolkit in the Visual Studio Code activity bar. Si ce n’est pas le cas, cliquez avec le bouton droit de la barre d’activité et sélectionnez Microsoft teams pour épingler la boîte à outils pour un accès facile.If not, right-click within the activity bar and select Microsoft Teams to pin the toolkit for easy access.

Utilisation de la boîte à outilsUsing the toolkit

Configurer un nouveau projet teamsSet up a new Teams project

  1. Créez un dossier/espace de travail pour votre projet dans votre environnement local.Create a workspace/folder for your project in your local environment.
  2. Dans Visual Studio code, sélectionnez l’icône teamsIn Visual Studio Code, select the Teams icon Icône Teams à partir de la barre d’activité sur le côté gauche de la fenêtre.from the activity bar on the left side of the window.
  3. Sélectionnez ouvrir la boîte à outils Microsoft teams dans le menu de commandes.Select Open the Microsoft Teams Toolkit from the command menu.
  4. Sélectionnez créer une nouvelle application teams dans le menu de commandes.Select Create a new Teams app from the command menu.
  5. Lorsque vous y êtes invité, entrez le nom de l’espace de travail.When prompted, enter the name of the workspace . Il sera utilisé à la fois comme nom du dossier dans lequel votre projet réside et comme nom par défaut de votre application.This will be used as both the name of the folder where your project will reside, and the default name of your app.
  6. Appuyez sur entrée pour accéder à l’écran Add Capabilities et configurer les propriétés de votre nouvelle application.Press Enter and you will arrive at the Add capabilities screen configure the properties for your new app.
  7. Cliquez sur le bouton Terminer pour terminer le processus de configuration.Select the Finish button to complete the configuration process.

Importer un projet d’application teams existantImport an existing Teams app project

  1. Dans Visual Studio code, sélectionnez l’icône teamsIn Visual Studio Code, select the Teams icon Icône Teams à partir de la barre d’activité sur le côté gauche de la fenêtre.from the activity bar on the left side of the window.
  2. Sélectionnez Importer un package d’application dans le menu de commandes.Select Import app package from the command menu.
  3. Choisissez votre fichier zip de package d’application teams existant.Choose your existing Teams app package zip file.
  4. Cliquez sur le bouton Sélectionner un package de publication .Choose the Select publishing package button. L’onglet Configuration de la boîte à outils doit maintenant être renseigné avec les détails de votre application.The configuration tab of the toolkit should now be populated with your app's details.
  5. Dans Visual Studio code, sélectionnez fichier -> Ajouter un dossier à l’espace de travail pour ajouter le répertoire de votre code source à l’espace de travail de code Visual Studio.In Visual Studio Code, select File -> Add Folder to Workspace to add your source code directory to the Visual Studio Code workspace.

Configurer votre applicationConfigure your app

À son niveau principal, l’application teams adopte trois composants :At its core, the Teams app embraces three components:

  1. Le client Microsoft Teams (Web, de bureau ou mobile) où les utilisateurs interagissent avec votre application.The Microsoft Teams client (web, desktop or mobile) where users interact with your app.
  2. Serveur qui répond aux demandes de contenu qui s’affichent dans Teams, par exemple, le contenu de l’onglet HTML ou une carte de robot.A server that responds to requests for content that will be displayed in Teams, e.g., HTML tab content or a bot adaptive card .
  3. Package d' application teams comprenant trois fichiers :A Teams app package consisting of three files:
  • La manifest.jssurThe manifest.json
  • Une icône de couleur pour l’affichage de votre application dans le catalogue d’applications public ou d’organisationA color icon for your app to display in the public or organization app catalog
  • Icône de plan pour l’affichage dans la barre d’activité de teams.An outline icon for display on the Teams activity bar.

Lorsqu’une application est installée, le client teams analyse le fichier manifeste pour déterminer les informations nécessaires telles que le nom de votre application et l’URL où se trouvent les services.When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located.

  1. Pour configurer votre application, accédez à l’onglet Microsoft teams Toolkit dans Visual Studio code.To configure your app, navigate to the Microsoft Teams Toolkit tab in Visual Studio Code.
  2. Sélectionnez modifier le package d’application pour afficher la page des détails de l' application .Select Edit app package to view the App details page.
  3. La modification des champs de la page des détails de l’application met à jour le contenu de la manifest.jssur un fichier qui sera finalement envoyé dans le cadre du package d’application.Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. Voir éditeur de manifeste de l’application StudioSee App Studio manifest editor

Empaquetage de votre applicationPackage your app

La modification de la page de détails de l' application , du manifeste ou des fichiers . env dans le dossier . Publish de votre application générera automatiquement votre fichier Development.zip .Modifying the app details page, manifest, or .env files in your app's .publish folder will automatically generate your Development.zip file. Vous devez inclure deux icônes dans ce même dossier.You'll need to include two icons in that same folder.

Installer et exécuter votre application localementInstall and run your app locally

Exécuter votre applicationRun your app

Installer et exécuter votre application localementInstall and run your app locally

Pour obtenir des instructions détaillées sur la façon d’empaqueter et de tester votre application, reportez-vous à la page *générer et exécuter du contenu dans votre page d’accueil Project.Refer to the *Build and Run content in your project homepage for detailed instructions on how to package and test your app. En général, vous devez installer le serveur de votre application, le faire fonctionner, puis configurer une solution de tunneling afin que les équipes puissent accéder au contenu exécuté à partir de localhost.In general, you need to install your app's server, get it running, then setup a tunneling solution so that Teams can access content running from localhost.

Activer le développement à partir de localhostEnable development from localhost

Si vous souhaitez déboguer votre application basée sur les onglets sur localhost à l’aide du protocole HTTPs, vous devez indiquer à votre navigateur d’approuver l’application en provenance de https://localhost .If you wish to debug your tab based app on localhost using HTTPS, you will need to tell your browser to trust the app being served from https://localhost. Accédez à la page https://localhost:3000/tab.Navigate to https://localhost:3000/tab. Si vous voyez un avertissement indiquant que le site n’est pas approuvé, sélectionnez l’option continuer quand même.If you see a warning indicating that the site isn't trusted, choose the option to proceed anyway. Votre application doit maintenant être accessible depuis le client Teams.Your app should now be accessible from the Teams client.

Exécuter votre application dans teamsRun your app in Teams

Conditions préalables : activer le mode aperçu développeur teamsPrerequisites: Enable Teams developer preview mode

  1. Accédez à la barre d’activité sur le côté gauche de la fenêtre de code Visual Studio.Navigate to the activity bar on the left side of the Visual Studio Code window.
  2. Sélectionnez l’icône exécuter pour afficher l’affichage exécuter et déboguer .Select the Run icon to display the Run and Debug view.
  3. Vous pouvez également utiliser le raccourci clavier Ctrl+Shift+D .You can also use the keyboard shortcut Ctrl+Shift+D.