Créer votre première application à l’aide de Node.js
Démarrez le développement d’applications Microsoft Teams en créant votre première application avec un onglet, un bot et une fonctionnalité d’extension de message.
Cette application a toutes les fonctionnalités et chacune a sa propre interface utilisateur et expérience utilisateur :
Dans ce tutoriel, vous allez apprendre à :
- Comment configurer un nouveau projet à l’aide d’outils en ligne de commande.
- Comment créer trois applications avec une fonctionnalité différente chacune : onglet, bot et extension de message.
- Comment déployer votre application à partir du Portail des développeurs.
Configuration requise
Voici une liste des outils que vous devez installer pour créer et déployer une application Teams.
| Installer | Pour l’utilisation... | |
|---|---|---|
| Obligatoire | ||
| Node.js et NPM | Environnement runtime JavaScript principal. Pour plus d’informations, consultez Node.js table de compatibilité des versions pour le type de projet. | |
| ngrok | Les fonctionnalités d’application Teams (bots conversationnels, extensions de message et webhooks entrants) nécessitent des connexions entrantes. Un tunnel connecte votre système de développement à Teams. Elle n’est pas obligatoire pour les applications qui incluent uniquement des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm devDependencies). |
|
| Microsoft Edge (recommandé) ou Google Chrome | Un navigateur avec des outils de développement. | |
| Visual Studio Code | Environnements de build JavaScript, TypeScript ou SharePoint Framework (SPFx). Utilisez la version 1.55 ou ultérieure. | |
| Git | Git pour utiliser l’exemple de dépôt d’application Node.js à partir de GitHub. | |
| gorgée | Kit de ressources JavaScript open source. Installez la version 4.0.0 ou ultérieure. | |
| Microsoft Teams | Microsoft Teams vous permet de collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour la conversation, les réunions et les appels au même endroit. | |
| Optional | ||
| Outils Azure pour Visual Studio Code et Microsoft Azure CLI | Outils Azure permettant d’accéder aux données stockées ou de déployer un back-end basé sur le cloud pour votre application Teams dans Azure. | |
| Outils de développement React pour Chrome OR React Developer Tools for Microsoft Edge | Outils de navigateur pour le développement d’onglets avec JavaScript. | |
| Afficheur Microsoft Graph | Explorateur Microsoft Graph, un outil basé sur un navigateur qui vous permet d’exécuter une requête à partir de données Microsoft Graph. | |
| Documentation pour les développeurs | Portail web pour configurer, gérer et distribuer votre application Teams, y compris à votre organisation ou au Microsoft Teams Store. | |
| Visual Studio Code Extensions | ||
| Azure Functions Core Tools | Composants principaux localement lors d’une exécution de débogage locale, y compris les assistances d’authentification requises lors de l’exécution de vos services dans Azure. Il est installé dans le répertoire du projet (à l’aide de npm devDependencies). |
|
| Kit de développement logiciel .NET | Liaisons personnalisées pour le débogage local et les déploiements d’applications Azure Functions. Si vous n’avez pas installé le SDK .NET 3.1 (ou version ultérieure) globalement, la version portable peut être installée. |
Vérifier les numéros de version des outils installés
Utilisez les commandes suivantes pour vérifier que les versions installées pour les outils sont en fonction des besoins.
Remarque
Utilisez la fenêtre de terminal avec laquelle vous êtes le plus à l’aise sur votre plateforme. Ces exemples utilisent Git Bash (qui est inclus dans l’installation de Git), mais ces scripts peuvent s’exécuter sur la plupart des plateformes.
Pour vérifier les numéros de version des outils installés :
Ouvrez une fenêtre de terminal.
Exécutez la commande suivante pour vérifier la
gitversion installée sur votre ordinateur :$ git --versionExemple de sortie :
git version 2.19.0.windows.1Exécutez la commande suivante pour vérifier la
node.jsversion :$ node -vExemple de sortie :
v8.9.3Vérifiez le numéro de version de
npm:$ npm -vExemple de sortie :
5.5.1Vérifiez le numéro de version de
gulp:$ gulp -vExemple de sortie :
CLI version 2.3.0Local version 4.0.2Exécutez la commande suivante pour vérifier le numéro de version de Visual Studio Code :
code --versionExemple de sortie :
1.28.2929bacba01ef658b873545e26034d1a8067445e9
Vous pouvez utiliser une autre version de ces applications sans aucun problème.
Configurer votre locataire de développement Teams
Un locataire est comme un espace ou un conteneur pour votre organisation dans Teams, où vous discutez, partagez des fichiers et exécutez des réunions. Cet espace est également l’endroit où vous chargez et testez votre application personnalisée.
Vérifions si vous êtes prêt à développer avec le locataire.
Activer l’option de chargement d’application personnalisée
Après avoir créé l’application, vous devez charger votre application dans Teams sans la distribuer. Ce processus est appelé chargement d’application personnalisée. Connectez-vous à votre compte Microsoft 365 pour afficher cette option.
Remarque
Le chargement d’applications personnalisées est nécessaire pour afficher un aperçu et tester les applications dans l’environnement local Teams. S’il n’est pas activé, vous ne pourrez pas afficher un aperçu et tester votre application dans Teams localement.
Avez-vous déjà un locataire et disposez-vous de l’accès administrateur ? Vérifions si vous le faites vraiment !
Vérifiez si vous pouvez charger une application personnalisée dans Teams :
Dans le client Teams, sélectionnez Icône Store .
Sélectionnez Gérer vos applications.
Recherchez l’option Charger une application personnalisée. Si vous voyez l’option , le chargement d’applications personnalisées est activé.
Remarque
Si Teams n’affiche pas l’option de chargement d’une application personnalisée, parlez-en à votre administrateur Teams.
Créer un locataire développeur Teams gratuit
Si vous n’avez pas de compte de développeur Teams, vous pouvez l’obtenir gratuitement. Rejoignez le programme des développeurs Microsoft 365 !
Sélectionnez Rejoindre maintenant et suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche.
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.
Obtenir un compte Azure gratuit
Si vous souhaitez héberger votre application ou accéder aux ressources dans Azure, vous devez disposer d’un abonnement Azure. Créez un compte gratuit avant de commencer.
Vous disposez maintenant de tous les outils et vous avez configuré vos comptes. Ensuite, nous allons configurer votre environnement de développement et commencer à créer !
Vous pouvez continuer à utiliser cette fenêtre de terminal pour exécuter les commandes qui suivent dans ce didacticiel.
Télécharger l’exemple
Pour ce tutoriel, utilisez l’exemple Hello, World ! pour commencer. Vous pouvez le télécharger et le cloner à partir de GitHub.
Pour utiliser Git Bash pour cloner l’exemple de dépôt :
Ouvrez une fenêtre de terminal.
Exécutez la commande suivante pour cloner l’exemple de référentiel sur votre ordinateur :
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
Créer votre première application Node.js
Une fois que vous avez cloné le référentiel pour Node.js exemple d’application, vous pouvez générer et tester l’application dans votre environnement local.
Dans cette page, vous allez apprendre à :
Création et exécution de l’exemple
Une fois le dépôt cloné, vous pouvez générer l’exemple d’application.
Ouvrez une fenêtre de terminal.
Exécutez la commande modifier le répertoire dans le terminal pour passer au répertoire de l’exemple d’application :
cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/Installez toutes les dépendances à l’aide de la commande suivante :
npm installVous devriez voir un ensemble de dépendances installées.
Une fois l’installation terminée, exécutez l’application à l’aide de la commande suivante :
npm startLorsque l’application Hello World démarre, elle s’affiche
App started listening on port 3333dans la fenêtre du terminal.Remarque
Si vous voyez un numéro de port différent affiché dans le message ci-dessus, c’est parce que vous avez défini une variable d’environnement PORT. Vous pouvez continuer à utiliser ce port ou modifier votre variable d’environnement sur 3333.
Ouvrez une fenêtre de navigateur et utilisez les URL suivantes pour vérifier que toutes les URL de l’application Hello World sont chargées :
http://localhost:3333
http://localhost:3333/hello
http://localhost:3333/first
http://localhost:3333/second
Tester votre exemple d’application dans un environnement local
N’oubliez pas que les applications dans Microsoft Teams sont des applications web qui exposent une ou plusieurs fonctionnalités. Rendez votre application disponible sur Internet afin que la plateforme Teams puisse la charger. Pour rendre votre application accessible à partir d’Internet, vous devez héberger votre application.
Pour les tests locaux, vous pouvez exécuter l’application sur votre ordinateur local et y créer un tunnel avec un point de terminaison web.
ngrok est un outil gratuit qui vous permet de le faire. Avec ngrok, vous pouvez obtenir une adresse web telle que https://d0ac14a5.ngrok.io (cette URL n’est qu’un exemple). Vous pouvez télécharger et installerngrok pour votre environnement. Veillez à l’ajouter à un emplacement dans .PATH
Créer un tunnel ngrok
Après avoir installé ngrok, vous pouvez créer un tunnel pour déployer votre application localement.
Ouvrez une nouvelle fenêtre de terminal.
Exécutez la commande suivante pour créer un tunnel. L’exemple d’application utilise le port 3333 :
ngrok http 3333 --host-header=localhost:3333Un tunnel ngrok est créé. Voici un exemple de tunnel ngrok.
Ngrok écoute les requêtes provenant d’Internet et les achemine vers votre application s’exécutant sur le port 3333.
Pour vérifier le déploiement local de l’application :
Ouvrez le navigateur.
Chargez votre application à l’aide de l’URL suivante :
https://<forwarding address in ngrok console session>/Voici un exemple d’URL :
Vous pouvez essayer d’ajouter
hello,firstousecondà l’URL du tunnel ngrok pour afficher les différentes pages d’onglet de l’application.Ngrok écoute les requêtes provenant d’Internet et les achemine vers votre application s’exécutant sur le port 3333.
Notez l’adresse de transfert dans la console ngrok. Vous avez besoin de cette URL pour déployer votre application dans Teams.
Remarque
Si vous avez utilisé un port différent pendant la génération et l’exécution, veillez à utiliser le même numéro de port pour configurer le tunnel ngrok .
Conseil
Il est judicieux d’exécuter ngrok dans une autre fenêtre de terminal pour le maintenir en cours d’exécution sans interférer avec l’application de nœud, que vous devrez peut-être arrêter, reconstruire et réexécuter ultérieurement. La session ngrok retourne des informations de débogage utiles dans cette fenêtre. La version payante de ngrok autorise les noms persistants.
Importante
Si vous utilisez la version gratuite de ngrok, votre application est disponible uniquement pendant la session en cours sur votre ordinateur de développement. Il n’est pas disponible si la machine est arrêtée ou se met en veille. Lorsque vous redémarrez le service, il retourne une nouvelle adresse. Ensuite, vous devez mettre à jour chaque emplacement qui utilise l’adresse obsolète. N’oubliez pas cette étape lorsque vous partagez l’application à des fins de test.
Générer Node.js package d’application
Vous pouvez utiliser gulp CLI pour générer le package d’application pour Node.js.
Ouvrez une fenêtre de terminal.
Vérifiez que vous êtes dans le répertoire où est
node.jscloné. Il s’agit du dossier dans lequelgulpfile.jsest placé.Exécutez la commande suivante pour générer le package d’application Node.js.
$ gulpVoici un exemple de sortie de commande :
[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 μsLe package d’application helloworldapp.zip est créé. Vous trouverez le fichier de package au chemin d’accès suivant.
<path to the cloned repo>/Microsoft-Teams-Samples/samples/app-hello-world/nodejs/manifestRemarque
Recherchez le fichier de package d’application, helloworldapp.zip, si l’emplacement n’est pas clair dans l’outil que vous utilisez.
Configurer votre première application Node.js à l’aide du Portail des développeurs
Vous pouvez utiliser le portail des développeurs pour charger le package d’application dans Teams et configurer les fonctionnalités de l’application. Le portail des développeurs est une application Teams qui simplifie la création et l’inscription d’une application. Installez à partir du Magasin Teams !
Après avoir créé et testé votre application Teams, vous pouvez la configurer et la prévisualiser à l’aide du portail des développeurs.
La mise à jour du package d’application comprend les éléments suivants :
- Importation du package d’application dans le portail des développeurs
- Configuration des fonctionnalités de l’application
Importer le package d’application dans le portail des développeurs
Pour importer le package d’application :
Ouvrir Microsoft Teams.
Sélectionnez l’icône Store
dans la barre de gauche.Recherchez Portail des développeurs dans la barre de recherche, puis sélectionnez Portail des développeurs*.
Sélectionnez Ouvrir.
Le portail des développeurs s’ouvre.
Sélectionnez l’onglet Applications .
Sélectionnez Importer une application.
Ouvrez le package
helloworldapp.zipd’application à partir du chemin d’accès suivant dans votre exemple de structure de répertoire de référentiel C# :<path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifestL’application Hello World est importée dans le Portail des développeurs.
Une fois que vous avez importé votre application dans le Portail des développeurs, vous pouvez afficher ses détails dans le Portail des développeurs.
Visite guidée de votre application dans le portail des développeurs
Une fois que vous avez importé votre application dans le Portail des développeurs, vous pouvez afficher ses détails, y compris le fichier manifeste.
Afficher les informations de l’application
Sélectionnez Informations de base dans le volet gauche du Portail des développeurs.
Notez les informations suivantes à partir des informations de base :
- ID de l’application
- Informations sur le développeur
- URL d’application
Sélectionnez Personnalisation dans le volet gauche pour afficher les informations de personnalisation.
Ces détails sont importants si vous écrivez une nouvelle application pour la distribution.
Afficher les fonctionnalités de l’application
Sélectionnez Fonctionnalités de l’application dans le volet gauche du Portail des développeurs.
Les fonctionnalités de l’application s’affichent dans le volet droit. Vous pouvez afficher les cartes pour l’application personnelle, le bot et l’extension de message.
Afficher le manifeste de l’application
Vous utilisez le fichier manifeste pour configurer les fonctionnalités, les ressources requises et d’autres attributs importants pour votre application.
Sélectionnez Publier dans le volet gauche pour ouvrir la liste déroulante, puis sélectionnez Package d’application.
Le manifeste de l’application s’affiche dans le volet droit.
Le fichier manifeste s’affiche dans le volet droit.
Configurer les fonctionnalités de votre application
Une fois que vous avez importé votre application dans le Portail des développeurs, l’étape suivante consiste à configurer les fonctionnalités de l’application. Le portail des développeurs contient toutes les informations sur l’application dans différentes sections. Il facilite la configuration des fonctionnalités de l’application.
À l’aide du Portail des développeurs, vous pouvez :
Configurer l’application d’onglet personnel
Pour configurer l’application d’onglet personnel :
Sélectionnez l’icône
sur la carte Application personnelle dans le volet Fonctionnalités de l’application , puis sélectionnez Modifier.Les détails de l’onglet Hello s’affichent.
Sélectionnez l’icône
de l’onglet Hello, puis sélectionnez Modifier pour ouvrir les détails de l’application à mettre à jour.
Entrez les détails de l’application pour l’onglet Hello dans Ajouter un onglet à votre application personnelle.
Entrez les détails suivants :
- Nom : onglet Hello.
- URL du contenu et URL du site web : adresse de transfert dans la session de console ngrok.
- Contexte : sélectionnez l’onglet Personnel.
Sélectionnez Mettre à jour.
Les détails de l’onglet Hello apparaissent dans le volet Application personnelle .
Sélectionnez Enregistrer.
Le volet Application personnelle affiche désormais le nouvel onglet et un onglet À propos de créé automatiquement.
Configurer le bot
Il est facile d’ajouter les fonctionnalités de bots à votre application. L’exemple d’application Hello World comporte déjà un bot dans le cadre de l’exemple, mais vous devez l’inscrire auprès de Teams.
Le bot importé à partir de l’exemple n’a pas d’ID d’application associé. Vous devez le supprimer et créer un bot. Le Portail des développeurs crée un ID d’application et l’inscrit auprès de Teams.
L’ajout et la configuration d’un bot impliquent :
Pour ajouter un nouveau bot
Sélectionnez l’icône
sur la carte bot dans le volet Fonctionnalités de l’application , puis sélectionnez Supprimer.Sélectionnez Outils pour ajouter une fonctionnalité.
Sélectionnez Gestion des bots dans le volet Outils .
Sélectionnez + Nouveau bot dans le volet Gestion des bots.
Entrez un nom approprié pour votre bot, puis sélectionnez Ajouter.
Le volet Configurer s’affiche avec les détails du nouveau bot dans le volet gauche.
Entrez l’URL de transfert à partir de la
ngrokconsole, puis sélectionnez Enregistrer.
Sélectionnez Clés secrètes client, puis Ajouter une clé secrète client à votre bot pour générer un mot de passe pour le bot.
Le portail des développeurs génère un mot de passe pour le bot.
Vous pouvez utiliser l’icône
pour copier le mot de passe. Pour ce tutoriel, vous n’avez pas besoin de le copier.
Sélectionnez OK.
Sélectionnez < Bots pour revenir au volet Gestion des bots.
Le volet Gestion du bot affiche le nouveau bot ajouté avec un ID d’application.
Veillez à enregistrer l’ID de bot avec le mot de passe de la section Clé secrète client .
Pour ajouter un bot à l’application
Ouvrez le volet Fonctionnalités de l’application , puis sélectionnez la carte Bot .
Le volet Bot s’affiche.
Sélectionnez votre application bot dans Sélectionner un bot existant, puis sélectionnez Enregistrer.
Le nouveau bot est ajouté à votre application avec son propre ID d’application.
Pour configurer l’étendue du bot
Sélectionnez l’icône
sur la nouvelle carte bot , puis sélectionnez Modifier.Sélectionnez les trois étendues de la commande dans la page Bot .
Parcourez le volet Bot pour afficher la section Commandes , puis sélectionnez + Ajouter une commande.
Entrez un nom et une description appropriés, sélectionnez les trois étendues de la commande, puis sélectionnez Ajouter.
- Personnel
- Team
- Conversation de groupe
La nouvelle commande est ajoutée à la section Commandes du volet Bot .
Sélectionnez Enregistrer.
Les détails de la commande sont enregistrés.
Ouvrez le volet Fonctionnalités de l’application, puis sélectionnez Carte d’application personnelle pour afficher les détails de l’onglet de votre application.
Vous verrez qu’un onglet pour votre nouveau bot de conversation est ajouté à votre application.
Configurer l’extension de message
Les extensions de message permettent aux utilisateurs de demander des informations à votre service et de publier ces informations. Les informations sont publiées sous forme de cartes dans la conversation du canal. Les extensions de message s’affichent en bas de la zone de composition.
Pour ajouter une nouvelle extension de message :
Sélectionnez l’icône
sur la carte Extension de message dans le volet Fonctionnalités de l’application , puis sélectionnez Supprimer.Sélectionnez Extension de message dans le volet Fonctionnalités de l’application .
Sélectionnez le nom de votre application bot dans la liste déroulante Sélectionner un bot existant dans le volet Extension de message .
Sélectionnez Enregistrer.
L’extension de message est enregistrée et la section Commandes s’affiche dans le volet Extension de message .
Sélectionnez + Ajouter une commande pour définir l’étendue de ce que peut faire votre application d’extension de message.
Boîte de dialogue Ajouter une commande .
Vérifiez que La recherche est sélectionnée comme type de commande que vous souhaitez ajouter dans la boîte de dialogue Ajouter une commande .
Entrez les informations appropriées pour les détails suivants :
- ID de commande
- Titre de la commande
- Description de la commande
Parcourez la boîte de dialogue pour afficher les détails restants.
Vérifiez que l’option Définir par défaut est sélectionnée.
Sélectionnez les contextes suivants pour la commande d’extension de message :
- Zone de commande
- Zone de composition
- Message
Entrez les informations appropriées pour les détails suivants :
- Nom du paramètre
- Titre du paramètre
- Description du paramètre
Sélectionnez Texte comme type d’entrée.
Sélectionnez Enregistrer.
La commande d’extension de message est enregistrée et s’affiche dans la liste des commandes dans le volet Extension de message .
Sélectionnez Enregistrer.
Ouvrez le volet Fonctionnalités de l’application .
Vous verrez les trois fonctionnalités (application d’onglet personnel, bot et extension de message) configurées pour l’application Hello World.
Afficher un aperçu et tester votre application Node.js
Une fois que vous avez importé votre application et configuré les fonctionnalités dans le Portail des développeurs, vous pouvez afficher un aperçu et tester l’exemple d’application.
Remarque
Les développeurs externes ne peuvent pas utiliser l’option Aperçu dans Teams dans l’application Portail des développeurs dans Teams. Il n’est pas disponible en tant qu’application sur Teams, en raison d’une limitation d’API. Si vous souhaitez afficher un aperçu de votre application dans Teams, utilisez le site web du portail des développeurs .
Après avoir configuré les fonctionnalités de votre application, vous pouvez afficher un aperçu et tester votre application dans Teams dans l’environnement local.
Pour afficher un aperçu de votre application :
Sélectionnez Aperçu dans Teams dans la barre d’outils du Portail des développeurs
Le portail des développeurs vous informe que votre application personnalisée est correctement chargée.
Sélectionnez Gérer vos applications. Votre application est répertoriée dans les applications chargées.
Recherchez votre application à l’aide de la zone de recherche, puis sélectionnez les trois points dans sa ligne.
Sélectionnez l’option Afficher . La page Ajouter s’affiche pour votre application.
Sélectionnez Ajouter pour charger l’application sur Teams.
Votre application est désormais disponible dans Teams. Vous pouvez afficher tous les onglets et tester les fonctionnalités :
Onglet Hello :
Bot de conversation :
Vous pouvez envoyer un message à l’aide de la conversation.
Extension de message :
Vous pouvez essayer une recherche à l’aide de l’extension de message.
À propos de l’onglet :
Vous avez un défi avec cette section ? Si c'est le cas, faites-nous part de vos commentaires pour que nous puissions l'améliorer.