Prise en main de la plateforme Microsoft teams avec node. js et App StudioGet started on the Microsoft Teams platform with Node.js and App Studio

La plateforme de développement Microsoft teams vous permet d’étendre facilement teams et d’intégrer vos propres applications et services de façon transparente dans l’espace de travail de teams.The Microsoft Teams developer platform makes it easy for you to extend Teams and integrate your own applications and services seamlessly into the Teams workspace. Ces applications peuvent ensuite être distribuées à votre entreprise ou pour teams dans le monde entier.These apps can then be distributed to your enterprise or for teams around the world.

Pour étendre Microsoft Teams, vous devez créer une application Microsoft Teams.To extend Microsoft Teams, you need to create a Microsoft Teams app. Une application Microsoft teams est une application Web que vous hébergez.A Microsoft Teams app is a web application that you host. Cette application peut ensuite être intégrée dans l’espace de travail de l’utilisateur dans Teams.This app can then be integrated into the user's workspace in Teams.

Préparer votre environnement de développementPrepare your development environment

La première chose à faire est de préparer votre environnement de développement.The first thing you'll need to do is prepare your development environment. Vous devez vous assurer que le téléchargement d’applications personnalisées est activé pour l’organisation Office 365 que vous souhaitez utiliser pour créer votre application.You'll need to make sure custom app uploading is enabled for the Office 365 organization you want to build your app in. Si vous avez besoin d’un client de développement dédié, vous pouvez vous inscrire au programme pour les développeurs Office 365.If you need a dedicated development tenant, you can sign up for the Office 365 developer program. Pour plus d’informations, consultez la rubrique Configuration de votre environnement de développement.For additional information see Setup your development environment.

Télécharger et héberger votre applicationDownload and host your app

Procédez comme suit pour télécharger et héberger une application « Hello World » simple dans Teams.Follow these steps to download and host a simple "hello world" app in Teams.

Obtenir les conditions préalablesGet prerequisites

Pour effectuer ce didacticiel, vous avez besoin des outils suivants.To complete this tutorial, you need the following tools. Si vous ne les avez pas encore installés, vous pouvez les installer à partir de ces liens.If you don't already have them you can install them from these links.

Si vous voyez des options permettant gitd' nodeajouter npm,, code , et le chemin d’accès pendant l’installation, choisissez de le faire.If you see options to add git, node, npm, and code to the PATH during installation, choose to do so. Il sera pratique.It will be handy.

Vérifiez que les outils sont disponibles en exécutant ce qui suit dans une fenêtre de terminal :Verify that the tools are available by running the following in a terminal window:

Notes

Utilisez la fenêtre de terminal qui vous convient le mieux sur votre plateforme.Use the terminal window that you are most comfortable with on your platform. Ces exemples utilisent bash (inclus dans Git), mais ces scripts s’exécuteront sur la plupart des plateformes.These examples use Bash (which is included in Git), but these scripts will run on most platforms.

$ git --version
git version 2.19.0.windows.1

$ node -v
v8.9.3

$ npm -v
5.5.1

$ gulp -v
CLI version 4.0.2

Vous disposez peut-être d’une autre version de ces applications.You may have a different version of these applications. Cela ne doit pas être un problème, à l’exception de Gulp.This should not be a problem, except for gulp. Pour Gulp, vous devez utiliser la version 4.0.0 ou une version ultérieure.For gulp you'll need to use version 4.0.0 or later.

Si Gulp n’est pas installé (ou si vous n’avez pas installé la version incorrecte) npm install gulp , faites-le maintenant en exécutant la fenêtre de votre terminal.If you don't have gulp installed (or have the wrong version installed), do so now by running npm install gulp in your terminal window.

Si vous avez installé Visual Studio code, vous pouvez vérifier l’installation en exécutant :If you have installed Visual Studio Code, you can verify the installation by running:

code --version
1.28.2
929bacba01ef658b873545e26034d1a8067445e9

Vous pouvez continuer à utiliser cette fenêtre de terminal pour exécuter les commandes qui suivent dans ce didacticiel.You can continue to use this terminal window to run the commands that follow in this tutorial.

Télécharger l’exempleDownload the sample

Nous avons fourni un simple Hello, World !We have provided a simple Hello, World! exemple pour vous aider à démarrer.sample to get you started. Dans une fenêtre de terminal, exécutez la commande suivante pour cloner le référentiel de l’exemple sur votre ordinateur local :In a terminal window, run the following command to clone the sample repository to your local machine:

git clone https://github.com/OfficeDev/msteams-samples-hello-world-nodejs.git

Conseil

Vous pouvez bifurquer sur cette référentiel si vous voulez modifier et archiver les modifications apportées à votre référentiel GitHub à des fins de référence ultérieure.You can fork this repo if you want to modify and check in your changes to your GitHub repo for future reference.

Création et exécution de l’exempleBuild and run the sample

Une fois le référentiel cloné, accédez au répertoire qui contient l’exemple :Once the repo is cloned, change to the directory that holds the sample:

cd msteams-samples-hello-world-nodejs

Pour générer l’exemple, vous devez installer toutes ses dépendances.In order to build the sample, you need to install all its dependencies. Pour ce faire, exécutez la commande suivante :Run the following command to do this:

npm install

Vous devriez voir une série de dépendances installées.You should see a bunch of dependencies getting installed. Une fois ces opérations terminées, vous pouvez exécuter l’application :Once they are finished, you can run the app:

npm start

Lors du démarrage de l’application Hello-World, App started listening on port 3333 celle-ci s’affiche dans la fenêtre du terminal.When the hello-world app starts, it displays App started listening on port 3333 in the terminal window.

Notes

Si vous voyez un numéro de port différent affiché dans le message ci-dessus, c’est qu’une variable d’environnement de PORT est définie.If you see a different port number displayed in the message above, it is because you have a PORT environment variable set. Vous pouvez continuer à utiliser ce port ou modifier votre variable d’environnement sur 3333.You can continue to use that port or change your environment variable to 3333.

À ce stade, vous pouvez ouvrir une fenêtre de navigateur et accéder aux URL suivantes pour vérifier que toutes les URL d’application sont en cours de chargement :At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading:

Héberger l’exemple d’applicationHost the sample app

N’oubliez pas que les applications dans Microsoft teams sont des applications Web qui exposent une ou plusieurs fonctionnalités.Remember that apps in Microsoft Teams are web applications exposing one or more capabilities. Pour que la plateforme teams charge votre application, votre application doit être accessible à partir d’Internet.For the Teams platform to load your app, your app must be reachable from the internet. Pour permettre à votre application d’être accessible à partir d’Internet, vous devez héberger votre application.To make your app reachable from the internet, you need to host your app.

Pour les tests locaux, vous pouvez exécuter l’application sur votre ordinateur local et y créer un tunnel à l’aide d’un point de terminaison Web.For local testing you can run the app on your local machine and create a tunnel to it with a web endpoint. ngrok est un outil gratuit qui vous permet d’effectuer cette opération.ngrok is a free tool that lets you do just that. Avec ngrok , vous pouvez obtenir une adresse Web telle https://d0ac14a5.ngrok.io que (cette URL n’est qu’un exemple).With ngrok you can get a web address such as https://d0ac14a5.ngrok.io (this URL is just an example). Vous pouvez Télécharger et installer ngrok pour votre environnement.You can download and install ngrok for your environment. Veillez à l’ajouter à un emplacement dans votre PATH.Make sure you add it to a location in your PATH.

Une fois que vous l’avez installé, vous pouvez ouvrir une nouvelle fenêtre de terminal et exécuter la commande suivante pour créer un tunnel.Once you install it, you can open a new terminal window and run the following command to create a tunnel. L’exemple utilise le port 3333, veillez donc à le spécifier ici.The sample uses port 3333, so be sure to specify it here.

ngrok http 3333 -host-header=localhost:3333

Ngrok écoutera les demandes en provenance d’Internet et les acheminera vers votre application en cours d’exécution sur le port 3333.Ngrok will listen to requests from the internet and will route them to your app running on port 3333. Vous pouvez vérifier en ouvrant votre navigateur et en accédant à https://d0ac14a5.ngrok.io/hello pour charger la page Hello de votre application.You can verify by opening your browser and going to https://d0ac14a5.ngrok.io/hello to load your app's hello page. Veillez à utiliser l’adresse de transfert affichée par ngrok dans votre session de console au lieu de cette URL.Please be sure to use the forwarding address displayed by ngrok in your console session instead of this URL.

Notes

Si vous avez utilisé un port différent dans l’étape de création et d’exécution ci-dessus, assurez-vous d’utiliser le même numéro de port pour configurer le tunnel ngrok .If you have used a different port in the build and run step above, make sure you use the same port number to setup the ngrok tunnel.

Conseil

Il est judicieux d’exécuter ngrok dans une autre fenêtre de terminal pour continuer à fonctionner sans interférer avec l’application de nœud que vous devrez peut-être arrêter, reconstruire et réexécuter.It is a good idea to run ngrok in a different terminal window to keep it running without interfering with the node app which you might later have to stop, rebuild and rerun. La session ngrok renverra des informations utiles sur le débogage dans cette fenêtre.The ngrok session will return useful debugging information in this window.

Il existe une version payante d' ngrok qui autorise les noms persistants.There is a paid version of ngrok that allows persistent names. Si vous utilisez la version gratuite, votre application ne sera disponible que pendant la session en cours sur votre ordinateur de développement.If you use the free version your app will only be available during the current session on your development machine. Si l’ordinateur est arrêté ou passe en mode veille, le service n’est plus disponible.If the machine is shut down or goes to sleep the service will no longer be available. Souvenez-vous de ceci lors du partage de l’application pour le test par d’autres utilisateurs.Remember this when sharing the app for testing by other users. Si vous devez redémarrer le service, il renverra une nouvelle adresse et vous devrez mettre à jour chaque emplacement qui utilise cette adresse.If you have to restart the service it will return a new address and you will have to update every place that uses that address.

N’oubliez pas d’indiquer l’URL de votre application, car vous en aurez besoin plus tard lors de l’inscription de l’application auprès de teams à l’aide d’App Studio.Remember, make a note of the URL of your app because you will need this later when you register the app with Teams using App studio. Le bloc-notes fonctionne à cet effet.Notepad works fine for this purpose.

Déployer votre application dans Microsoft teamsDeploy your app to Microsoft Teams

À ce stade, vous disposez d’une application hébergée sur Internet, mais vous n’avez aucun moyen d’indiquer à teams où le Rechercher, ni même ce que votre application est appelée.At this point you have an app hosted on the internet, but you have no way yet of telling Teams where to look for it, or even what your app is called. Pour ce faire, vous devez maintenant créer un package d’application.To do this you now have to create an app package. Il ne s’agit que d’un fichier texte qui contient le manifeste de l’application et de certaines icônes que le client teams utilisera pour afficher et personnaliser correctement votre application.This is little more than a text file that contains the app manifest and some icons that the Teams client will use to properly display and brand your app. Vous pouvez créer manuellement ce package d’application, ou vous pouvez utiliser app Studio, un outil qui s’exécute dans teams pour simplifier le processus d’inscription de l’application.You can manually create this app package, or you can use App Studio, a tool that runs in Teams that will simplify the process of registering the app. Il est recommandé d’App Studio pour créer et mettre à jour le package d’application.App Studio is the recommended way of creating and updating the app package.

Pour les deux méthodes, vous aurez besoin des éléments suivants :For either method you will need the following:

  • URL où votre application peut être trouvée sur Internet.The URL where your app can be found on the internet.
  • Icônes que teams utilisera pour personnaliser votre application.Icons that Teams will use to brand your app. L’exemple est fourni avec des icônes d’espace réservé situées dans «src\static\images.The sample comes with placeholder icons located in "src\static\images. App Studio fournira également les icônes par défaut si nécessaire.App Studio also will provide default icons if needed.

Utiliser app Studio pour mettre à jour le package d’applicationUse App Studio to update the app package

App Studio est une application de teams que vous pouvez installer à partir du Store Teams.App Studio is a Teams app that you can install from the Teams store. Il simplifie la création et l’inscription d’une application.It simplifies the creation and registration of an app.

Pour installer App Studio dans Teams, cliquez sur l’icône App Store en bas de la barre de gauche, puis recherchez App Studio.To install App Studio in Teams, click on the app store icon at the bottom of the left hand bar, and search for App Studio.

Une fois que vous avez trouvé la vignette pour App Studio, cliquez dessus et choisissez installer dans la boîte de dialogue qui s’affiche.Once you find the tile for App Studio, click on it and choose install in the dialog that pops up.

Une fois que vous avez installé App Studio, cliquez sur l’onglet Éditeur de manifeste pour commencer à créer le package d’application pour votre application Teams.Once App Studio is installed click on the Manifest editor tab to begin creating the app package for your Teams app.

L’exemple est fourni avec son propre manifeste prédéfini, et est conçu pour créer un package d’application lors de la création du projet.The sample comes with its own pre-made manifest, and is designed to build an app package when the project is built. Sur .NET, cette opération est exécutée dans Visual Studio, ainsi que sur le nœud JS gulp pour cela, en tapant à la ligne de commande dans le répertoire racine du projet.On .NET this is done in Visual Studio, and on Node JS this is done by typing gulp at the command line in the root directory of the project.

$ gulp
[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js
[13:39:27] Starting 'clean'...
[13:39:27] Starting 'generate-manifest'...
[13:39:27] Finished 'generate-manifest' after 11 ms
[13:39:27] Finished 'clean' after 21 ms
[13:39:27] Starting 'default'...
Build completed. Output in manifest folder
[13:39:27] Finished 'default' after 62 μs

Le nom du package d’application généré est HelloWorldApp. zip.The name of the generated app package is helloworldapp.zip. Vous pouvez rechercher ce fichier s’il n’est pas clair dans l’outil que vous utilisez.You can search for this file if the location is not clear in the tool you are using.

Dans la partie suivante de cette procédure pas à pas, vous allez modifier ce package d’application en sélectionnant la vignette Importer une application existante dans l’éditeur de manifeste.In the next part of this walkthrough you are going to modify this app package by selecting the Import an existing app tile in the Manifest Editor.

Une fois le package d’application importé, l’application Studio doit ressembler à ce qui suit :Once the app package has been imported App Studio should look like this:

Cliquez sur la mosaïque de votre application nouvellement importée, Hello World.Click on the tile for your newly imported app, Hello World.

Il y a une liste d’étapes dans la partie gauche de l’éditeur de manifeste, et sur la droite une liste de propriétés qui doivent être renseignées pour chacune de ces étapes.There is a list of steps in the left-hand side of the Manifest editor, and on the right a list of properties that need to be filled in for each of those steps. Étant donné que vous avez commencé avec un exemple d’application, la plupart des informations sont déjà renseignées. Les étapes suivantes vous permettront de modifier les composants qui doivent encore être mis à jour.Since you started with a sample app, much of the information is already filled out. The next steps will walk you through changing the parts that still need to be updated.

Détails de l’applicationApp details

Cliquez sur l’entrée détails de l' application sous Détails.Click on the App details entry under Details. Cliquez sur le bouton générer pour créer un ID d’application.Click the Generate button to create a new app id.

Votre ID d’application doit ressembler à 2322041b-72bf-459d-b107-f4f335bc35bdceci :.Your new app id should look something like: 2322041b-72bf-459d-b107-f4f335bc35bd.

Examinez les autres détails de l’application dans le volet droit, et familiarisez-vous avec certaines entrées, telles que les informations sur les développeurs et la personnalisation.Look through the rest of the App details in the right hand pane, and familiarize yourself with some of the entries such as Developer information and Branding. Ces sections sont importantes si vous écrivez une nouvelle application pour la distribution.These sections are important if you are writing a new app for distribution.

Fonctionnalités : ongletsCapabilities: Tabs

Les onglets sont parmi les éléments les plus simples à ajouter à une application Teams.Tabs are among the simplest elements to add to a Teams app. L’exemple d’application prend déjà en charge plusieurs onglets, et vous pouvez les activer comme suit.The sample app already supports several tabs, and you can enable them as follows.

Onglet équipeTeam tab

Votre application ne peut avoir qu’un seul onglet équipe.Your app can only have one Team tab.

Dans cet exemple, l’onglet équipe est l’endroit où se trouve votre page de configuration.In this sample, the Team tab is where your configuration page goes. Cliquez sur le symbole ... à la fin de l’entrée, puis sélectionnez modifier dans la liste déroulante.Click on the ... symbol at the end of the entry and choose Edit from the drop-down. Modifiez l’URL de https://yourteamsapp.ngrok.io/configure telle yourteamsapp.ngrok.io sorte qu’elle soit remplacée par l’URL que vous avez utilisée ci-dessus lors de l’hébergement de votre application.Change the URL to https://yourteamsapp.ngrok.io/configure where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

Onglets personnelsPersonal tabs

Votre application peut comporter jusqu’à 16 onglets, y compris l’onglet équipe.Your app can have up to 16 tabs, including the team tab.

Les onglets personnels sont représentés différemment à partir de l’onglet équipe. L' onglet Hello doit déjà figurer dans la liste des onglets personnels.Personal tabs are represented differently from the team tab. You should see Hello Tab already listed in the personal tabs list. Au moment où elle a une valeur com.contoso.helloworld.hellotabd’espace réservé.At the moment it has a placeholder value com.contoso.helloworld.hellotab. Cliquez sur le symbole ... à la fin de l’entrée, puis sélectionnez modifier dans la liste déroulante.Click on the ... symbol at the end of the entry and choose Edit from the drop-down. La boîte de dialogue suivante s’affiche.The following dialog will appear.

Deux champs doivent être mis à jour avec l’URL de votre application.There are two fields that you need to update with your app URL.

  • Modifier l’URL de contenu enhttps://yourteamsapp.ngrok.io/helloChange Content URL to https://yourteamsapp.ngrok.io/hello
  • Modifier l’URL du site Web enhttps://yourteamsapp.ngrok.io/helloChange Website URL to https://yourteamsapp.ngrok.io/hello

yourteamsapp.ngrok.io doit être remplacé par l’URL que vous avez utilisée ci-dessus lors de l’hébergement de votre application.Where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

BotsBots

Les robots sont les plus courants pour ajouter des fonctionnalités à votre application.Bots are the most common way to add functionality to your app. L’exemple Hello World a déjà un bot dans le cadre de l’exemple, mais il n’a pas encore été inscrit auprès de Microsoft.The hello world sample already has a bot as part of the sample, but it has not been registered with Microsoft yet.

Aucun ID d’application n’est associé au robot qui a été importé à partir de l’exemple.The bot that was imported from the sample does not have an App ID associated with it yet. Vous devrez créer un nouveau Bot afin que l’application Studio puisse créer un ID d’application et l’inscrire auprès de Microsoft.You will have to create a new bot so that App Studio can create a new App ID and register it with Microsoft. Notez qu’il s’agit de l’ID d’application pour le bot, qui est différent de l’ID d’application que nous avons créé pour l’application dans une étape précédente.Note that this is the App ID for the bot, which is different from the App ID that we created for the app in a earlier step. Chaque bot d’une application requiert son propre ID d’application.Each bot in an app requires its own App ID.

Cliquez sur le bouton Delete (supprimer ) en regard du bot importé dans la liste bot.Click the delete button next to the Imported bot in the bot list.

À présent, il n’y a aucun bots à afficher.Now there are no bots left to show. Cliquez sur configurer.Click Setup. Cette opération affiche la boîte de dialogue Configurer un bot .This will display the Set up a bot dialog.

Ajoutez un nom de bot tel Contoso botque, puis cliquez sur les deux boutons sous étendue.Add a bot name such as Contoso bot, and click both the buttons under scope.

Sélectionnez créer un bot pour quitter la boîte de dialogue.Choose Create bot to exit the dialog. App Studio passera un moment à l’inscription de votre robot auprès de Microsoft, puis affichera votre nouveau robot dans la liste des robots.App Studio will spend a moment registering your bot with Microsoft, and then should display your new bot in the bot list. Maintenant, nous vous conseillons d’ouvrir un fichier texte dans le bloc-notes et de copier et coller votre nouvel ID de robot dans celui-ci.Now would be a good time to open a text file in notepad and copy and paste your new bot id into it. Vous aurez besoin de cet ID ultérieurement.You will need this id later.

Cliquez sur générer un nouveau mot de passe, puis notez le mot de passe dans le même fichier texte que vous avez noté l’ID de votre application bot dans.Click Generate New Password, and make a note of the password in the same text file you noted your Bot app ID in. Il s’agit de la seule fois que votre mot de passe est affiché, donc n’oubliez pas de le faire maintenant.This is the only time your password will be shown, so be sure to do this now.

Mettez à jour l’adresse du https://yourteamsapp.ngrok.io/api/messagespoint de yourteamsapp.ngrok.io terminaison du bot vers, où doit être remplacée par l’URL que vous avez utilisée ci-dessus lors de l’hébergement de votre application.Update the Bot endpoint address to https://yourteamsapp.ngrok.io/api/messages, where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

Maintenant, nous vous conseillons d’enregistrer votre fichier texte si vous ne l’avez pas encore fait.Now would be a good time to save your text file if you have not done so already. Vous ajouterez ces informations à l’application hébergée plus loin dans cette procédure pas à pas, ce qui permettra la communication sécurisée avec votre robot.You will add this information to your hosted app later in this walkthrough, which will allow secure communication with your bot.

Extensions de messagerieMessaging extensions

Les extensions de messagerie permettent aux utilisateurs de demander des informations à votre service et de publier ces informations, sous la forme de cartes, directement dans la conversation de canal.Messaging extensions let users ask for information from your service and post that information, in the form of cards, right into the channel conversation. Les extensions de messagerie apparaissent au bas de la zone de composition.Messaging extensions appear along the bottom of the compose box.

Cliquez sur extensions de messagerie sous capacités dans la colonne gauche de l’application Studio pour commencer à configurer l’extension de messagerie.Click on Messaging extensions under Capabilities in the left hand column of App Studio to begin configuring the messaging extension.

L’exemple d’extension de messagerie est affiché dans le volet de droite sous extensions de messagerie.The sample messaging extension is listed in the right hand pane under Messaging Extensions. Cliquez à nouveau sur supprimer pour supprimer cette entrée, puis cliquez sur le bouton configurer en suivant les mêmes étapes que celles suivies pour les robots.Click Delete again to remove this entry, and then click the Set up button following the same steps as you followed for bots. Cette opération affiche la boîte de dialogue extension de messagerie .This will display the Messaging Extension dialog.

Sélectionnez l’onglet utiliser un bot existant , puis Sélectionnez l’une de mes robots existants.Select the Use existing bot tab, then Select from one of my existing bots. Dans le menu déroulant, sélectionnez le bot que vous avez créé dans la section ci-dessus.In the drop-down menu, select the bot you created in the section above. Ajoutez un nom de bot et cliquez sur Enregistrer pour fermer la boîte de dialogue.Add a Bot name and click Save to close the dialog.

Sous la section commande , cliquez sur Ajouter.Under the Command section, click Add. Nous ajoutons une commande basée sur la recherche, donc choisissez l’option autoriser les utilisateurs à interroger votre service... .We're adding a search-based command, so choose the Allow users to query your service... option.

Dans la boîte de dialogue nouvelle commande , entrez les valeurs suivantes.In the New command dialog enter the following values.

Sous nouvelle commande:Under New command:

  • ID de commande = getRandomTextCommand ID = getRandomText
  • Title = obtenir du texte aléatoire pour vous amuserTitle = Get some random text for fun
  • Description = obtient du texte et des images aléatoiresDescription = Gets some random text and images

Sous le paramètre:Under Parameter:

  • Nom = cardTitleName = cardTitle
  • Titre = titre de la carteTitle = Card title
  • Description = titre de la carte à utiliserDescription = Card title to use

Une fois que vous avez entré les informations, cliquez sur Enregistrer pour fermer la boîte de dialogue.Once you're entered the information, click Save to close the dialog.

Inscrire votre application dans teamsRegister your app in Teams

Vous avez maintenant entré les détails de votre application, mais deux étapes subsistent.You have now completed entering the details of your app, but two steps remain. Tout d’abord, vous devez utiliser la section test et distribution d’App Studio pour installer votre application dans Teams, puis vous devez mettre à jour votre application hébergée avec l’ID d’application et le mot de passe de votre bot.First you must use the Test and Distribute section of App Studio to install your app in Teams, and second you must update your hosted application with the App ID and password for your bot. N’oubliez pas que l’exemple prévoit d’utiliser les mêmes ID d’application et mot de passe pour le robot et l’extension de messagerie.Remember that the sample expects to use the same App ID and password for both the bot and the messaging extension.

Cliquez sur l’élément de test et de distribution sous Terminer dans la colonne de gauche de l’application Studio.Click on the Test and distribute item under Finish in the left hand column of App Studio.

Pour télécharger votre application dans Teams, cliquez sur le bouton installer sous tester et distribuer.In order to upload your app to Teams, click the Install button under Test and Distribute.

Cliquez sur la zone de recherche dans la section Ajouter à une équipe et sélectionnez une équipe à laquelle ajouter l’exemple d’application.Click on the Search box in the Add to a team section and select a team to add the sample app to. En règle générale, vous souhaiterez configurer une équipe spéciale à des fins de test.Usually you will want to set up a special team for testing.

Cliquez sur le bouton installer en bas de la boîte de dialogue.Click the Install button at the bottom of the dialog.

Cette procédure termine la partie App Studio de cette procédure pas à pas.This finishes the App Studio portion of this walkthrough. Vous devez maintenant voir votre application en cours d’exécution dans Teams, mais le robot et l’extension de messagerie ne fonctionnent pas tant que vous n’avez pas mis à jour l’environnement des applications hébergées afin de connaître les ID et les mots de passe d’application.You should now see your app running in Teams, however the bot and the messaging extension will not work until you update the hosted applications environment to know what the App IDs and passwords are.

Mettre à jour votre application hébergéeUpdate your hosted app

L’exemple d’application requiert que les variables d’environnement suivantes soient définies sur les valeurs que vous avez notées précédemment.The sample app requires the following environment variables to be set to the values you made a note of earlier.

MICROSOFT_APP_ID=<YOUR BOT'S APP ID>
MICROSOFT_APP_PASSWORD=<YOUR BOT'S PASSWORD>
WEBSITE_NODE_DEFAULT_VERSION=8.9.4

La manière dont vous effectuez cette opération diffère selon la manière dont vous avez hébergé votre application.How you do that differs depending on how you hosted your app. L’utilisation de variables d’environnement est importante dans la mesure où ces valeurs font partie de votre environnement : elles sont accessibles par le code de votre application, mais elles ne sont pas exposées à des tiers qui peuvent examiner les fichiers qui composent votre site.The important thing about using environment variables is that these values are part of your environment - they can be accessed by the code for your app, but they are not exposed to third parties who might examine the files that make up your site.

Si vous exécutez l’application à l’aide de ngrok, vous devez configurer certaines variables d’environnement locales.If you are running the app using ngrok you'll need to set up some local environment variables. Il existe de nombreuses façons de le faire, mais le plus simple, si vous utilisez Visual Studio code, est d’ajouter une configuration de lancement:There are many ways to do this, but the easiest, if you are using Visual Studio Code, is to add a launch configuration:

{
    "type": "node",
    "request": "launch",
    "name": "Launch - Teams Debug",
    "program": "${workspaceRoot}/src/app.js",
    "cwd": "${workspaceFolder}/src",
    "env": {
        "BASE_URI": "https://yourNgrokURL.ngrok.io",
        "MICROSOFT_APP_ID": "00000000-0000-0000-0000-000000000000",
        "MICROSOFT_APP_PASSWORD": "yourBotAppPassword",
        "NODE_DEBUG": "botbuilder",
        "SUPPRESS_NO_CONFIG_WARNING": "y",
        "NODE_CONFIG_DIR": "../config"
    }
}

Où :Where:

MICROSOFT_APP_ID et MICROSOFT_APP_PASSWORD sont respectivement l’ID et le mot de passe de votre robot.MICROSOFT_APP_ID and MICROSOFT_APP_PASSWORD is the ID and password, respectively, for your bot. NODE_DEBUG vous montrera ce qui se passe dans votre bot dans la console de débogage de code Visual Studio.NODE_DEBUG will show you what's happening in your bot in the Visual Studio Code debug console. NODE_CONFIG_DIR pointe vers le répertoire situé à la racine du référentiel (par défaut, lorsque l’application est exécutée localement, elle la recherche dans le dossier src).NODE_CONFIG_DIR points to the directory at the root of the repository (by default, when the app is run locally, it looks for it in the src folder).

Notes

Si vous n’avez pas arrêté NPM de la version antérieure dans le didacticiel, vous devrez npm stop exécuter pour que Visual Studio code collecte correctement vos variables de configuration de lancement.If you have not stopped npm from earlier in the tutorial, you'll need to run npm stop in order for Visual Studio Code to pickup your launch configuration variables correctly.

Configurer l’onglet applicationConfigure the app tab

Une fois que vous avez installé l’application dans une équipe, vous devez la configurer pour afficher le contenu.Once you install the app into a team, you will need to configure it to show content. Accédez à un canal de l’équipe et cliquez sur le bouton « + » pour ajouter un nouvel onglet. Vous pouvez ensuite choisir Hello World dans la liste Ajouter un onglet .Go to a channel in the team and click on the '+' button to add a new tab. You can then choose Hello World from the Add a tab list. Une boîte de dialogue de configuration s’affiche.You will then be presented with a configuration dialog. Cette boîte de dialogue vous permet de choisir l’onglet à afficher dans ce canal.This dialog will let you choose which tab to display in this channel. Une fois que vous avez sélectionné l’onglet Save , puis cliqué sur Hello World , vous pouvez voir l’onglet chargé avec l’onglet que vous avez choisi.Once you select the tab and click on Save you can see the Hello World tab loaded with the tab you chose.

Tester votre robot dans teamsTest your bot in Teams

Vous pouvez désormais interagir avec le bot dans Teams.You can now interact with the bot in Teams. Sélectionnez un canal dans l’équipe où vous avez enregistré votre application, puis @your-bot-nametapez, suivi de votre message.Choose a channel in the team where you registered your app, and type @your-bot-name, followed by your message. Il s’agit d’une ** @mention**.This is called an @mention. Tout message que vous envoyez au bot vous sera renvoyé en tant que réponse.Whatever message you send to the bot will be sent back to you as a reply.

Tester votre extension de messagerieTest your messaging extension

Pour tester votre extension de messagerie, vous pouvez cliquer sur les trois points sous la zone d’entrée de votre affichage conversation.To test your messaging extension, you can click on the three dots below the input box in your conversation view. Un menu s’affiche avec l’application « Hello World » .A menu will pop up with the 'Hello World' app in it. Lorsque vous cliquez dessus, vous verrez un certain nombre de textes aléatoires.When you click it, you will see a number of random texts. Vous pouvez choisir l’un d’entre eux et l’insérer dans votre conversation.You can choose any one of them and it will be inserted it into your conversation.

Choisissez l’un des textes aléatoires, et vous verrez une carte formatée et prête à envoyer avec votre propre message en bas.Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.