Créer votre première application à l’aide de C #

Article
Developer (Débutant)
5 minutes avant achèvement

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 aura toutes les fonctionnalités et chacune possède sa propre interface utilisateur et son expérience utilisateur :

Diagramme montrant que cette application comporte trois fonctionnalités.

Dans ce didacticiel, vous allez apprendre :

Comment configurer un nouveau projet.
Comment créer trois applications avec une fonctionnalité différente : onglet, bot et extension de message à l’aide de C# et Visual Studio 2019.
Comment déployer votre application à partir du portail des développeurs.

Conditions préalables

4 minutes restantes

Voici la liste des outils que vous devez installer pour créer et déployer une application Teams.

	Installer	Pour l’utilisation...
Obligatoire
	Visual Studio 2019 Installez l’une des deux charges de travail suivantes : • développement ASP.NET et web • Développement multiplateforme .NET Core	.NET. Vous pouvez installer l’édition communauté gratuite de Visual Studio 2019 et installer les charges de travail également.
	Git	Git pour utiliser l’exemple de référentiel d’application C# à partir de GitHub.
	ngrok	Les fonctionnalités de l’application Teams (bot conversationnel et extension de message) nécessitent des connexions entrantes. Vous devez exposer votre système de développement à Teams via un tunnel. Un tunnel n’est pas nécessaire pour les applications qui incluent uniquement des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm `devDependencies`).
	Toolkit Teams	Extension Visual Studio 2019 qui crée une structure de projet pour votre application. Utilisez la dernière version.
	Documentation pour les développeurs	Portail web pour configurer, gérer et distribuer votre application Teams, y compris à votre organisation ou au magasin Teams.
	Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via les applications pour les conversations, les réunions, les appels, le tout au même endroit.
Optional
	Azure Tools pour Visual Studio Code et Microsoft Azure CLI	Outils Azure pour accéder aux données stockées ou déployer un backend cloud pour votre application Teams dans Azure.

Vérifier l’installation de Git

Si l’installation de Visual Studio vous invite à ajouter git au chemin d’accès, sélectionnez-le.

Pour vérifier la version de Git installée :

Ouvrez une fenêtre de terminal.
Exécutez la commande suivante pour vérifier la git version installée sur votre ordinateur :
```
$ git --version
```
Exemple de sortie : git version 2.17.1.windows.2

Installer Teams Toolkit

Teams Toolkit simplifie le processus de développement avec des outils permettant de créer une structure de projet pour votre application. Il crée la structure de répertoire nécessaire pour toutes les fonctionnalités sélectionnées avec les fichiers requis en place, prêts à générer le projet.

Teams Toolkit est disponible en tant qu’extension Visual Studio 2019.

Pour installer l’extension Teams Toolkit :

Ouvrez Visual Studio 2019 et sélectionnez les extensions > Gérer les extensions.
Dans la zone de recherche, entrez le Kit de ressources Teams.
Sélectionnez Télécharger en regard du Kit de ressources Teams.

Les modifications sont disponibles après la fermeture de Visual Studio 2019. Elle est requise, car Visual Studio 2019 doit redémarrer après l’installation de l’extension.
Sélectionnez Fermer.
Fermez Visual Studio 2019.

Le programme d’installation VSIX s’ouvre avec des instructions pour l’installation de l’extension.
Suivez les instructions du programme d’installation de VSIX pour terminer l’installation du kit de ressources.
Ouvrez à nouveau Visual Studio 2019.

Les applications Teams seront disponibles en tant que modèle dans Visual Studio 2019.

Vous trouverez également le Kit de ressources Teams sur la Place de marché Visual Studio Code.

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. Vérifions si vous êtes prêt à développer avec le locataire.

Rechercher l’option de chargement indépendant

Après avoir créé l’application, vous devez charger votre application dans Teams sans la distribuer. Ce processus est appelé chargement indépendant. Connectez-vous à votre compte Microsoft 365 pour afficher cette option.

Notes

Le chargement indépendant est nécessaire pour afficher un aperçu et tester des 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 c’est vraiment le cas !

Vérifiez si vous pouvez charger des applications de version test dans Teams :

Dans le client Teams, sélectionnez l’icône Du Store .
Sélectionnez Gérer vos applications.
Recherchez l’option permettant de charger une application personnalisée. Si vous voyez l’option, le chargement indépendant des applications est activé.

Notes

Si Teams n’affiche pas l’option de chargement d’une application personnalisée, contactez votre administrateur Teams.

Créer un locataire de développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte Teams, vous pouvez l’obtenir gratuitement. Rejoignez le programme développeur Microsoft 365 !

Accédez auProgramme pour les développeurs Microsoft 365.
Sélectionnez Joindre 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 configurez vos comptes. Ensuite, nous allons configurer votre environnement de développement et commencer à créer !

Notes

Utilisez une fenêtre de terminal appropriée sur votre plateforme. Ces exemples utilisent Git Bash, mais peuvent être exécutés sur la plupart des plateformes.

Ouvrez la dernière version de Visual Studio et installez toutes les mises à jour.

Vous pouvez utiliser la même fenêtre de terminal pour exécuter les commandes de ce didacticiel.

Télécharger l’exemple

Pour ce didacticiel, utilisez Hello, World! exemple en C#. Vous pouvez le télécharger et le cloner à partir de GitHub.

Pour utiliser cet exemple, clonez l’exemple de référentiel de l’une des manières suivantes :

Utilisation de Git Bash
Utilisation de Visual Studio 2019

Pour utiliser Git Bash pour cloner l’exemple de référentiel

Exécutez la commande suivante dans une fenêtre de terminal pour cloner l’exemple de référentiel sur votre ordinateur :
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```
L’exemple de référentiel pour l’application C# est cloné sur votre ordinateur à l’emplacement par défaut.

Conseil

Vous pouvez dupliquer ce référentiel pour modifier et enregistrer vos modifications dans GitHub.

Vous pouvez afficher le référentiel cloné en l’ouvrant dans Visual Studio 2019.

Pour utiliser Visual Studio 2019 pour cloner l’exemple de référentiel

Ouvrez Visual Studio 2019.
Sélectionnez Cloner un référentiel.
Entrez https://github.com/OfficeDev/Microsoft-Teams-Samples.git comme chemin d’accès pour le clonage du référentiel :
Entrez l’emplacement où vous souhaitez cloner le référentiel, puis sélectionnez Cloner.

L’exemple de dépôt est cloné et Visual Studio s’ouvre. Vous pouvez afficher le dépôt cloné dans le Explorateur de solutions.

Maintenant que vous avez cloné l’exemple de référentiel, générons votre première application C# pour Teams.

Générer et exécuter votre première application C#

3 minutes restantes

Une fois que vous avez cloné le référentiel pour l’exemple d’application C#, vous pouvez générer et exécuter l’application dans votre environnement local.

Dans cette page, vous allez apprendre à :

Créer votre première application
Déployer votre exemple d’application localement

Créer votre première application

Vous pouvez afficher la structure du projet dans le Explorateur de solutions après la création de l’espace de travail. À présent, vous devez générer et exécuter votre application.

Pour générer et exécuter l’exemple cloné

Ouvrez le fichier de solution Microsoft.Teams.Samples.HelloWorld.sln à partir du répertoire Microsoft-Teams-Samples/samples/app-hello-world/csharp de l’exemple.
Sélectionnez le menu Projet , puis les propriétés Microsoft.Teams.Samples.HelloWorld.Web.
Sélectionnez Déboguer dans le volet gauche de la fenêtre Propriétés .
Parcourez l’écran pour afficher les paramètres du serveur web.
Définissez les paramètres suivants dans le volet Débogage :
- Définissez l’URL de l’application sur http://localhost:3333/.
- Effacer Activer SSL.
Sélectionnez Générer la solution dans le menu Générer .
Sélectionnez la touche F5 ou sélectionnez Démarrer le débogage dans le menu Déboguer pour exécuter l’exemple.

Lorsque l’application démarre, une fenêtre de navigateur s’ouvre. Il affiche la racine de votre application. Vous pouvez accéder aux URL suivantes pour vérifier que toutes les URL d’application sont chargées :
- https://localhost:3333/
- https://localhost:3333/hello
- https://localhost:3333/first
- https://localhost:3333/second
Notes

Si vous recevez une erreur Could not find a part of the path … bin\roslyn\csc.exe, mettez à jour le package avec la commande Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r.

Déployer votre exemple d’application localement

Les applications Microsoft Teams sont des applications web qui fournissent une ou plusieurs fonctionnalités. Mettez votre application à disposition sur Internet afin que la plateforme Teams puisse la charger. Hébergez votre application ngrok pour créer un tunnel vers le processus local sur votre ordinateur.

Après avoir hébergé votre application, notez son URL racine, telle que https://yourteamsapp.ngrok.io ou https://yourteamsapp.azurewebsites.net.

Tunnel à l’aide de 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:3333
```
Le tunnel ngrok est créé. Voici un exemple :

Vous pouvez essayer d’ajouter helloou second firstd’accéder à l’URL du tunnel ngrok pour afficher différentes pages d’onglet de l’application.

Ngrok écoute les demandes 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 :
Notez l’adresse de transfert dans la console ngrok. Vous avez besoin de cette URL pour déployer votre application dans Teams.

Notes

Si vous avez utilisé un autre port pendant la génération, assurez-vous d’utiliser le même numéro de port pour configurer le ngrok tunnel.

Conseil

Il est judicieux de s’exécuter ngrok dans une autre fenêtre de terminal. Cela permet de ne pas ngrok interférer avec l’application, quand vous devrez arrêter, reconstruire et réexécuter l’application. La ngrok session fournit des informations de débogage utiles dans cette fenêtre.

Important

Si vous utilisez la version gratuite de ngrok, votre application sera disponible uniquement pendant la session actuelle sur votre ordinateur de développement. Elle n’est pas disponible si la machine est arrêtée ou mise 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 lors du partage de l’application à des fins de test.

Configurer votre première application C# à l’aide du portail des développeurs

2 minutes restantes

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 généré et testé votre application Teams, vous pouvez la configurer et la prévisualiser à l’aide du portail des développeurs.

Dans cette page, vous allez apprendre à configurer le package d’application dans le portail des développeurs.

Option Publier dans Visual Studio 2019

Ce didacticiel utilise le portail des développeurs pour configurer les fonctionnalités de l’application et publier votre application.

Toutefois, Visual Studio 2019 offre une prise en charge intégrée du déploiement d’applications sur différents fournisseurs, notamment Azure :

Image montrant l’élément de menu Publier sur Azure dans Visual Studio 2019

Microsoft Azure héberge votre application .NET sur un niveau gratuit. Il utilise une infrastructure partagée suffisante pour exécuter l’exemple Hello World . Pour plus d’informations, consultez la création d’un compte Azure gratuit.

Si vous utilisez cette option, vous pouvez entrer les détails du site Azure et des ressources Azure et publier votre application.

Pour ce didacticiel, vous n’avez pas besoin d’utiliser cette étape.

Configurer le package d’application dans le portail des développeurs

Vous pouvez utiliser le portail des développeurs pour configurer le package d’application et ses fonctionnalités. 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 !

La configuration du package d’application inclut :

Importation du package d’application dans le portail des développeurs
Configuration des fonctionnalités d’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 le 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 l’application.
Sélectionnez le package helloworldapp.zip d’application dans le chemin d’accès suivant dans votre structure de répertoire de référentiel d’exemple C# :

<path to cloned C# repo>/Source/Repos/Microsoft-Teams-Samples/samples/app-hello-world/csharp/Microsoft.Teams.Samples.HelloWorld.Web/bin/Debug/netcoreapp3.1

L’application Hello World est importée 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 les développeurs
- 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 les fonctionnalités de l’application dans le volet gauche du portail des développeurs.

Les fonctionnalités de l’application apparaissent 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.

Pour afficher le manifeste de l’application :

Sélectionnez Publier dans le volet gauche pour ouvrir la liste déroulante, puis sélectionnez Package d’application.

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 d’application dans différentes sections. Cela facilite la configuration des fonctionnalités de l’application.

À l’aide du portail des développeurs, vous pouvez :

Configurer l’application onglet personnel
Configurer le bot
Configurer l’extension de message

Configurer l’application onglet personnel

Pour configurer l’application onglet personnel :

Sélectionnez l’icône dans la carte d’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 de 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 s’affichent dans le volet Application personnelle .
Sélectionnez Enregistrer.

Le volet Application personnelle affiche désormais le nouvel onglet et un onglet À propos créé automatiquement.

Configurer le bot

Il est facile d’ajouter les fonctionnalités des bots à votre application. L’exemple d’application Hello World possède déjà un bot, mais vous devez l’inscrire auprès de Teams.

Image montrant l’application de bot importée sans ID d’application

Le bot qui a été 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 les opérations suivantes :

Ajout d’un nouveau bot
Ajout d’un bot à une application
Configuration de l’étendue du bot

Pour ajouter un nouveau bot

Sélectionnez l’icône dans 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 de gestion du bot .
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 ngrok console, puis sélectionnez Enregistrer.
Sélectionnez Secrets client, puis ajoutez 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 didacticiel, vous n’avez pas besoin de le copier.
Sélectionnez OK.
Sélectionnez < Bots pour revenir au volet de gestion des bots.

Le volet de 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.

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.
Parcourez le volet Bot pour afficher la section Commandes , puis sélectionnez + Ajouter une commande.
Entrez un nom et une description appropriés pour la commande.
Sélectionnez les trois étendues de la commande, puis sélectionnez Ajouter.
- Personnel
- Équipe
- 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 la forme de cartes dans la conversation de canal. Les extensions de message s’affichent en bas de la zone de rédaction.

Pour ajouter une nouvelle extension de message :

Sélectionnez l’icône dans la carte d’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 d’extension message .
Sélectionnez Enregistrer.

L’extension de message est enregistrée et la section Commandes s’affiche dans le volet d’extension message .
Sélectionnez + Ajouter une commande pour définir l’étendue de ce que votre application d’extension de message peut faire.
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 dans 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 La valeur par défaut est sélectionnée.
Sélectionnez les contextes suivants pour la commande d’extension de message :
- Zone de commande
- Boîte de rédaction
- 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 du volet d’extension message .
Sélectionnez Enregistrer.
Ouvrir le volet Fonctionnalités de l’application .

Vous verrez les trois fonctionnalités (application onglet personnel, bot et extension de message) configurées pour l’application Hello World. L’étape suivante consiste à inscrire votre application dans Teams et à tester votre application.