Partager via

Créer un onglet

  • Article

Les onglets dans les conversations, les canaux ou les réunions se comportent plus comme des applications, car vous ne pouvez épingler qu’un seul onglet par application au volet gauche pour un accès facile.

Importante

Vérifiez que vous avez tous les prérequis pour générer votre onglet.

Remarque

Cette rubrique reflète la version 2.0.x de la bibliothèque de client JavaScript Microsoft Teams (TeamsJS). Si vous utilisez une version antérieure, reportez-vous à la vue d’ensemble de la bibliothèque TeamsJS pour obtenir des conseils sur les différences entre la dernière version de TeamsJS et les versions antérieures.

Créer un onglet avec Node.js

  1. À l’invite de commandes, installez les packages Yeoman and gulp-cli en entrant la commande suivante après l’installation de Node.js :

    npm install yo gulp-cli --global

  2. À l’invite de commandes, installez le générateur d’applications Microsoft Teams en entrant la commande suivante :

    npm install generator-teams --global

Voici les étapes de création d’un onglet :

  1. Générer votre application avec un onglet
  2. Ajouter une page de contenu à l’onglet
  3. Créer votre package d’application
  4. Créer et exécuter votre application
  5. Établir un tunnel sécurisé vers votre onglet
  6. Charger votre application dans Teams

Générer votre application avec un onglet

  1. À l’invite de commandes, créez un répertoire pour votre onglet.

  2. Entrez la commande suivante dans votre nouveau répertoire pour démarrer le générateur d’applications Microsoft Teams :

    yo teams

  3. Fournissez vos valeurs à une série de questions posées par le générateur d’applications Microsoft Teams pour mettre à jour votre manifest.json fichier.

    Générateur Teams

    Série de questions pour mettre à jour votre fichier manifest.json

    • Quel est le nom de votre solution ?

      Le nom de la solution est le nom de votre projet. Vous pouvez accepter le nom suggéré en sélectionnant Entrée.

    • Où souhaitez-vous placer les fichiers ?

      Vous êtes dans le répertoire de votre projet. Ensuite, sélectionnez Entrée.

    • Titre de votre projet d’application Microsoft Teams ?

      Le titre est le nom de votre package d’application et est utilisé dans le manifeste et la description de l’application. Entrez un titre ou sélectionnez Entrer pour accepter le nom par défaut.

    • Le nom de votre (entreprise) ? (32 caractères maximum)

      Le nom de votre entreprise est utilisé dans le manifeste de l’application. Entrez un nom de société ou sélectionnez Entrer pour accepter le nom par défaut.

    • Quelle version du manifeste voulez-vous utiliser ?

      Sélectionnez le schéma par défaut.

    • La génération de modèles automatique rapide ? (Y/n)

      La valeur par défaut est Oui ; entrez n pour entrer votre ID partenaire Microsoft.

    • Entrez votre ID partenaire Microsoft, si vous en avez un ? (Laissez vide pour ignorer)

      Ce champ n’est pas obligatoire et doit être utilisé uniquement si vous faites déjà partie du programme Microsoft Cloud Partner, anciennement appelé Microsoft Partner Network.

    • Que voulez-vous ajouter à votre projet ?

      Sélectionnez ( * ) Un onglet.

    • URL dans laquelle vous hébergez cette solution ?

      Par défaut, le générateur suggère une URL de site web Azure. Vous testez uniquement votre application localement, donc une URL valide n’est pas nécessaire.

    • Voulez-vous afficher un indicateur de chargement lorsque votre application/onglet se charge ?

      Choisissez ne pas inclure un indicateur de chargement lors du chargement de votre application ou onglet. La valeur par défaut est non, entrez n.

    • Voulez-vous que les applications personnelles soient restituées sans barre d’en-tête d’onglet ?

      Choisissez ne pas inclure les applications personnelles à afficher sans barre d’en-tête d’onglet. Valeur par défaut est non, entrez n.

    • Voulez-vous inclure l’infrastructure de test et les tests initiaux ? (y/N)

      Choisissez pas pour inclure une infrastructure de test pour ce projet. La valeur par défaut est non, entrez n.

    • Voulez-vous inclure la prise en charge d’ESLint ? (y/N)

      Choisissez de ne pas inclure la prise en charge d’ESLint. La valeur par défaut est non, entrez n.

    • Voulez-vous utiliser Azure Applications Insights pour la télémétrie ? (y/N)

      Choisissez ne pas inclure Azure Application Insights. La valeur par défaut est Non ; entrez n.

    • Nom de l’onglet par défaut (16 caractères maximum) ?

      Nommez votre onglet. Ce nom d’onglet est utilisé dans l’ensemble de votre projet en tant que composant de chemin d’URL ou de fichier.

    • Quel type d’onglet voulez-vous créer ?

      Utilisez les touches de direction pour sélectionner onglet Personnel (statique) .

    • Avez-vous besoin Microsoft Entra prise en charge de l’authentification unique pour l’onglet ?

      Choisissez de ne pas inclure Microsoft Entra prise en charge de l’authentification unique pour l’onglet. La valeur par défaut est oui, entrez n.

    Remarque

    Dans un onglet, la page d’accueil de l’onglet s’affiche uniquement lorsque l’utilisateur sélectionne le bouton Précédent (ou quitte l’onglet) et revient à la page d’accueil. L’onglet ne conserve pas ou ne conserve pas l’état précédent par conception.

Ajouter une page de contenu à l’onglet

Créez une page de contenu et mettez à jour les fichiers existants de l’application onglet :

  1. Créez un fichier personal.html dans votre Visual Studio Code avec le balisage suivant :

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>

  2. Enregistrez personal.html dans le dossier public de votre application à l’emplacement suivant :

    ./src/public/<yourDefaultTabNameTab>/personal.html

  3. Ouvrez manifest.json à partir de l’emplacement suivant dans votre Visual Studio Code :

     ./src/manifest/manifest.json

  4. Ajoutez ce qui suit au tableau staticTabs vide (staticTabs":[]) et ajoutez l’objet JSON suivant :

    {
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "scopes": ["personal"]
}

    Importante

    Le composant de chemin d’accès yourDefaultTabNameTab est la valeur que vous avez entrée dans le générateur pour nom de tabulation par défaut plus le mot Tab.

    Par exemple : DefaultTabName est MyTab then /MyTabTab/

  5. Mettez à jour le composant de chemin d’accès contentURLyourDefaultTabNameTab avec le nom de votre onglet réel.

  6. Enregistrez le fichier manifest.json mis à jour.

  7. Ouvrez Tab.ts dans votre Visual Studio Code à partir du chemin d’accès suivant pour fournir votre page de contenu dans un iFrame :

    ./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts

  8. Ajoutez ce qui suit à la liste des décorateurs iFrame :

     @PreventIframe("/<yourDefaultTabName Tab>/personal.html")

  9. Enregistrez le fichier mis à jour. Votre code d’onglet est terminé.

Créer votre package d’application

Vous devez disposer d’un package d’application pour générer et exécuter votre application dans Teams. Le package d’application est créé via une tâche gulp qui valide le fichier manifest.json et génère le dossier zip dans le répertoire ./package. À l’invite de commandes, utilisez la commande gulp manifest.

Générer et exécuter votre application

Générer votre application

Entrez la commande suivante à l’invite de commandes pour transpiler votre solution dans le dossier ./dist :

gulp build

Exécuter votre application

  1. À l’invite de commandes, entrez la commande suivante pour démarrer un serveur web local :

    gulp serve

  2. Entrez http://localhost:3007/<yourDefaultAppNameTab>/ dans votre navigateur pour afficher la page d’accueil de votre application.

    Onglet par défaut

  3. Accédez http://localhost:3007/<yourDefaultAppNameTab>/personal.htmlà , pour afficher votre onglet.

    Onglet HTML par défaut

Établir un tunnel sécurisé vers votre onglet

À l’invite de commandes, quittez l’hôte local et entrez la commande suivante pour établir un tunnel sécurisé vers votre onglet :

gulp ngrok-serve

Une fois votre onglet chargé dans Microsoft Teams via ngrok et correctement enregistré, vous pouvez l’afficher dans Teams jusqu’à la fin de votre session tunnel.

Charger votre application dans Teams

  1. Accédez à Teams et sélectionnez ApplicationsMicrosoft Teams Store .

  2. Sélectionnez Gérer vos applications>Charger une applicationCharger une application> charger une application personnalisée.

  3. Accédez au répertoire de votre projet, accédez au dossier ./package , sélectionnez le dossier zip, puis choisissez Ouvrir.

    Ajout de votre onglet

  4. Sélectionnez Ajouter dans la boîte de dialogue. Votre onglet est chargé dans Teams.

    Onglet Personnel chargé

  5. Dans le volet gauche de Teams, sélectionnez les points de suspension ●●● puis choisissez votre application chargée pour afficher votre onglet.

    Votre onglet est correctement créé et ajouté dans Teams. Vous pouvez également réorganiser vos onglets dans Teams.

Créer un onglet avec ASP.NET Core

  1. À l’invite de commandes, créez un répertoire pour votre projet d’onglet.

  2. Clonez l’exemple de référentiel dans votre nouveau répertoire à l’aide de la commande suivante ou vous pouvez télécharger le code source et extraire les fichiers :

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Voici les étapes de création d’un onglet :

  1. Générer votre application avec un onglet
  2. Mettre à jour et exécuter votre application
  3. Établir un tunnel sécurisé vers votre onglet
  4. Mettre à jour votre package d’application avec le Portail des développeurs
  5. Prévisualiser votre application dans Teams

Générer votre application avec un onglet

  1. Ouvrez Visual Studio et sélectionnez Ouvrir un projet ou une solution.

  2. Accédez à Modèles de Microsoft Teams> modèles>tab-personal>dossier razor-csharp et ouvrez PersonalTab.sln.

  3. Dans Visual Studio, sélectionnez F5 ou choisissez Démarrer le débogage dans le menu Déboguer de votre application pour vérifier si l’application est chargée correctement. Dans un navigateur, accédez aux URL suivantes :

    • <http://localhost:3978/>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Passer en revue le code source

Startup.cs

Ce projet a été créé à partir d’un modèle vide d’application web ASP.NET Core 3.1 avec la case à cocher Avancé – Configurer pour HTTPS sélectionnée lors de l’installation. Les services MVC sont inscrits par la méthode ConfigureServices() de l’infrastructure d’injection de dépendances. En outre, le modèle vide n’active pas le traitement du contenu statique par défaut. Par conséquent, l’intergiciel de fichiers statiques est ajouté à la méthode Configure() à l’aide du code suivant :

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

dossier wwwroot

Dans ASP.NET Core, le dossier racine web est l’emplacement où l’application recherche des fichiers statiques.

Index.cshtml

ASP.NET Core traite les fichiers appelés Index comme page d’accueil ou par défaut pour le site. Lorsque l’URL de votre navigateur pointe vers la racine du site, Index.cshtml s’affiche en tant que page d’accueil de votre application.

Dossier AppManifest

Ce dossier contient les fichiers de package d’application requis suivants :

  • Icône de couleur mesurant 192 x 192 pixels.
  • Icône de contour transparent mesurant 32 x 32 pixels.
  • Un fichier manifest.json qui spécifie les attributs de votre application.

Ces fichiers doivent être compressés dans un package d’application pour être utilisés lors du chargement de votre onglet dans Teams. Teams charge le contentUrl spécifié dans votre manifeste, l’incorpore dans un <iframe> et le restitue dans votre onglet.

.csproj

Dans Visual Studio Explorateur de solutions, cliquez avec le bouton droit sur le projet et sélectionnez Modifier le fichier projet. À la fin du fichier, vous pouvez voir le code suivant qui crée et met à jour votre dossier zip lors de la génération de l’application :

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Mettre à jour et exécuter votre application

  1. Ouvrez Visual Studio Explorateur de solutions et accédez au dossier Pages>Shared, ouvrez _Layout.cshtml, puis ajoutez les éléments suivants à la section des balises <head> :

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

  2. Dans Visual Studio Explorateur de solutions, ouvrez PersonalTab.cshtml à partir du dossier Pages et ajoutez microsoftTeams.app.initialize() les <script> balises.

  3. Sélectionnez Enregistrer.

  4. Dans Visual Studio, sélectionnez F5 ou choisissez Démarrer le débogage dans le menu Déboguer de votre application.

Établir un tunnel sécurisé vers votre onglet

À l’invite de commandes à la racine du répertoire de votre projet, exécutez la commande suivante pour établir un tunnel sécurisé dans votre onglet :

ngrok http 3978 --host-header=localhost

Mettre à jour votre package d’application avec Developer Portal

  1. Accédez à Portail des développeurs.

  2. Ouvrez Applications et sélectionnez Importer une application.

  3. Le nom du fichier du package d’application est tab.zip et il est disponible au niveau /bin/Debug/netcoreapp3.1/tab.zip du chemin d’accès.

  4. Sélectionnez tab.zip et ouvrez-le dans le Developer Portal.

  5. Un ID d’application par défaut est créé et rempli dans la section Informations de base.

  6. Ajoutez la description courte et longue de votre application dans Descriptions.

  7. Dans information du développeur, ajoutez les détails requis et dans Le site web (doit être une URL HTTPS valide) donnez votre URL HTTPS ngrok.

  8. Dans URL d’application, mettez à https://<yourngrokurl>/privacy jour la politique de confidentialité vers et les conditions d’utilisation, https://<yourngrokurl>/tou puis sélectionnez Enregistrer.

  9. Dans Fonctionnalités de l’application, sélectionnez Application> personnelleCréer votre premier onglet d’application personnelle, entrez le nom et mettez à jour l’URL du contenu avec https://<yourngrokurl>/personalTab. Laissez le champ URL du site web vide, sélectionnez Contexte comme personalTab dans la liste déroulante, puis sélectionnez Confirmer.

  10. Sélectionnez Enregistrer.

  11. Dans la section Domaines, les domaines de vos onglets doivent contenir votre URL ngrok sans le préfixe HTTPS <yourngrokurl>.ngrok.io.

Afficher un aperçu de votre application dans Teams

  1. 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. La page Ajouter s’affiche pour votre application dans Teams.

  2. Sélectionnez Ajouter pour charger l’onglet dans Teams. Votre onglet est désormais disponible dans Teams.

    Onglet par défaut

    Votre onglet est correctement créé et ajouté dans Teams. Vous pouvez également réorganiser votre onglet dans Teams.

Créer un onglet avec ASP.NET Core MVC

  1. À l’invite de commandes, créez un répertoire pour votre projet d’onglet.

  2. Clonez l’exemple de référentiel dans votre nouveau répertoire à l’aide de la commande suivante ou vous pouvez télécharger le code source et extraire les fichiers :

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Voici les étapes de création d’un onglet :

  1. Générer votre application avec un onglet
  2. Mettre à jour et exécuter l’application
  3. Établir un tunnel sécurisé vers votre onglet
  4. Mettre à jour votre package d’application avec le Portail des développeurs
  5. Prévisualiser votre application dans Teams

Générer votre application avec un onglet

  1. Ouvrez Visual Studio et sélectionnez Ouvrir un projet ou une solution.

  2. Accédez à Modèles de Microsoft Teams> modèles>tab-personal>dossier mvc-csharp et ouvrez PersonalTabMVC.sln dans Visual Studio.

  3. Dans Visual Studio, sélectionnez F5 ou choisissez Démarrer le débogage dans le menu Déboguer de votre application pour vérifier si l’application est chargée correctement. Dans un navigateur, accédez aux URL suivantes :

    • <http://localhost:3978>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Passer en revue le code source

Startup.cs

Ce projet a été créé à partir d’un modèle vide d’application web ASP.NET Core 3.1 avec la case à cocher Avancé – Configurer pour HTTPS sélectionnée lors de l’installation. Les services MVC sont inscrits par la méthode ConfigureServices() de l’infrastructure d’injection de dépendances. En outre, le modèle vide n’active pas le traitement du contenu statique par défaut. Par conséquent, l’intergiciel de fichiers statiques est ajouté à la méthode Configure() à l’aide du code suivant :

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

dossier wwwroot

Dans ASP.NET Core, le dossier racine web est l’emplacement où l’application recherche des fichiers statiques.

Dossier AppManifest

Ce dossier contient les fichiers de package d’application requis suivants :

  • Icône de couleur mesurant 192 x 192 pixels.
  • Icône de contour transparent mesurant 32 x 32 pixels.
  • Un fichier manifest.json qui spécifie les attributs de votre application.

Ces fichiers doivent être compressés dans un package d’application pour être utilisés lors du chargement de votre onglet dans Teams. Teams charge le contentUrl spécifié dans votre manifeste, l’incorpore dans un iFrame et le restitue dans votre onglet.

.csproj

Dans le Visual Studio Explorateur de solutions, cliquez avec le bouton droit sur le projet et sélectionnez Modifier le fichier projet. À la fin du fichier, vous voyez le code suivant qui crée et met à jour votre dossier zip lors de la génération de l’application :

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Modèles

PersonalTab.cs présente un objet de message et des méthodes appelés à partir de PersonalTabController lorsqu’un utilisateur sélectionne un bouton dans l’affichage PersonalTab.

Affichages

Ces vues sont les différentes vues dans ASP.NET Core MVC :

  • Accueil : ASP.NET Core traite les fichiers appelés Index comme page d’accueil ou par défaut du site. Lorsque l’URL de votre navigateur pointe vers la racine du site, Index.cshtml s’affiche en tant que page d’accueil de votre application.

  • Partagé : le balisage de vue partielle _Layout.cshtml contient la structure de page globale de l’application et les éléments visuels partagés. Il référence également la bibliothèque Teams.

Contrôleurs

Les contrôleurs utilisent la propriété ViewBag pour transférer dynamiquement des valeurs vers les vues.

Mettre à jour et exécuter votre application

  1. Ouvrez Visual Studio Explorateur de solutions et accédez au dossier Vues>Shared, ouvrez _Layout.cshtml, puis ajoutez les éléments suivants à la section des balises <head> :

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

  2. Dans Visual Studio Explorateur de solutions, ouvrez PersonalTab.cshtml à partir du dossier Views>PersonalTab et ajoutez microsoftTeams.app.initialize() à l’intérieur des <script> balises.

  3. Sélectionnez Enregistrer.

  4. Dans Visual Studio, sélectionnez F5 ou choisissez Démarrer le débogage dans le menu Déboguer de votre application.

Établir un tunnel sécurisé vers votre onglet

À l’invite de commandes à la racine du répertoire de votre projet, exécutez la commande suivante pour établir un tunnel sécurisé dans votre onglet :

ngrok http 3978 --host-header=localhost

Mettre à jour votre package d’application avec Developer Portal

  1. Accédez à Portail des développeurs.

  2. Ouvrez Applications et sélectionnez Importer une application.

  3. Le nom de votre package d’application est tab.zip. Il est disponible dans le chemin d’accès suivant :

    /bin/Debug/netcoreapp3.1/tab.zip

  4. Sélectionnez tab.zip et ouvrez-le dans le Developer Portal.

  5. Un ID d’application par défaut est créé et rempli dans la section Informations de base.

  6. Ajoutez la description courte et longue de votre application dans Descriptions.

  7. Dans Informations sur le développeur, ajoutez les détails requis et dans Site web (doit être une URL HTTPS valide) indiquez votre URL HTTPS ngrok.

  8. Dans URL d’application, mettez à https://<yourngrokurl>/privacy jour la politique de confidentialité vers et les conditions d’utilisation, https://<yourngrokurl>/tou puis sélectionnez Enregistrer.

  9. Dans Fonctionnalités de l’application, sélectionnez Application> personnelleCréer votre premier onglet d’application personnelle, entrez le nom et mettez à jour l’URL du contenu avec https://<yourngrokurl>/personalTab. Laissez le champ URL du site web vide, sélectionnez Contexte comme personalTab dans la liste déroulante, puis sélectionnez Confirmer.

  10. Sélectionnez Enregistrer.

  11. Dans la section Domaines, les domaines de vos onglets doivent contenir votre URL ngrok sans le préfixe HTTPS <yourngrokurl>.ngrok.io.

Afficher un aperçu de votre application dans Teams

  1. 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. La page Ajouter s’affiche pour votre application dans Teams.

  2. Sélectionnez Ajouter pour charger l’onglet dans Teams. Votre onglet est désormais disponible dans Teams.

    Onglet personnel

    Votre onglet est correctement créé et ajouté dans Teams. Vous pouvez également réorganiser votre onglet dans Teams.

Blazor vous permet de créer des interfaces utilisateur web interactives à l’aide de C#, au lieu de JavaScript. Vous pouvez créer une application d’onglet et une application bot avec Blazor et la dernière version de Visual Studio.

Capture d’écran de l’application Blazor affichant la sortie de l’onglet, du bot et de l’extension de message une fois le guide Blazor pas à pas terminé.

Remarque

Teams Toolkit ne prend pas en charge la fonctionnalité d’extension de message.

Voici une liste des outils dont vous avez besoin pour créer et déployer votre application.

  Installer Pour l’utilisation...
Obligatoire    
  Visual Studio version 17.2.0 preview 2.1 Sélectionnez Visual Studio Enterprise préversion 2022 (version 17.2.0 preview 2.1).
  Microsoft Teams Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour la conversation, les réunions et les appels dans un seul endroit.
  Microsoft Edge (recommandé) ou Google Chrome Un navigateur avec des outils de développement.

Préparer l’environnement de développement

Une fois que vous avez installé les outils requis, configurez l’environnement de développement.

Installer microsoft Teams Toolkit

Le kit de ressources Teams permet de simplifier le processus de développement avec des outils permettant de provisionner et de déployer des ressources cloud pour votre application, de publier sur le Magasin Teams, etc. Vous pouvez utiliser le kit de ressources avec Visual Studio ou comme interface de ligne de commande (appelée teamsfx).

Vous pouvez utiliser la dernière version de Visual Studio pour développer des applications Teams avec Blazor Server dans .NET.

Pour installer l’extension Microsoft Teams Toolkit :

  1. Téléchargez la dernière version de Visual Studio.

  2. Ouvrez vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe à partir de votre dossier de téléchargement.

  3. Sélectionnez Continuer dans la page Visual Studio Installer pour configurer votre installation.

    Capture d’écran de Visual Studio Installer avec les options continuer mises en évidence en rouge.

  4. Sélectionnez ASP.NET et développement web sous Charges de travail.

  5. Sélectionnez Outils de développement Microsoft Teams sous Détails de l’installation.

  6. Sélectionnez Installer.

    Capture d’écran de Visual Studio Enterprise Préversion avec l’option Asp.NET, développement web et outils de développement Microsoft Teams sous détails de l’installation et l’installation mise en évidence en rouge.

    Votre Visual Studio est installé en quelques minutes.

Configurer votre locataire de développement Teams

Un locataire est comme un espace ou un conteneur pour votre organization 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.

Avez-vous déjà un locataire et l’accès administrateur ? Nous allons case activée si vous le faites vraiment !

Vérifiez si vous pouvez charger une application personnalisée dans Teams :

  1. Dans le client Teams, sélectionnez Applications.

  2. Sélectionnez Gérer vos applications.

  3. Sélectionnez Charger une application personnalisée. Si vous voyez l’option Charger une application personnalisée , le chargement d’application personnalisée est activé.

    Capture d’écran montrant l’option de chargement d’une application personnalisée dans Teams.

    Remarque

    Si vous ne trouvez pas l’option de charger une application personnalisée, contactez votre administrateur Teams.

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

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

  1. Accédez auProgramme pour les développeurs Microsoft 365.

  2. Sélectionnez Rejoindre maintenant et suivez les instructions à l’écran.

  3. Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.

  4. Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche.

    Capture d’écran du Programme pour les développeurs Microsoft 365 affichant vos abonnements de développeur Microsoft 365 pour l’application Blazor.

  5. 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 de la configuration de vos comptes. Ensuite, nous allons configurer votre environnement de développement et commencer à créer !

Créer un espace de travail de projet pour votre application d’onglet

Démarrez le développement d’applications Teams en créant votre première application. Cette application utilise la fonctionnalité d’onglet.

Capture d’écran de l’application Blazor affichant la sortie finale de l’application d’onglet une fois le guide Blazor effectué avec succès.

Ce tutoriel vous guide tout au long des étapes de création, d’exécution et de déploiement de votre première application Teams à l’aide de .NET/Blazor.

Dans cette page, vous allez découvrir les points suivants :

  1. Comment configurer un nouveau projet d’onglet avec teams Toolkit
  2. À propos de la structure de répertoires de votre application

Créer votre projet d’onglet

Utilisez le Kit de ressources Teams pour créer votre premier projet d’onglet. Le kit de ressources vous guide dans une série de pages pour créer et configurer votre projet d’application Teams :

  1. Créer une page de projet : vous pouvez sélectionner le type de projet.
  2. Configurer votre nouvelle page de projet : vous pouvez entrer les détails du projet.
  3. Créer une page d’application Teams : vous pouvez sélectionner les fonctionnalités de l’application Teams.

Pour créer votre espace de travail de projet d’onglet

  1. Ouvrez la dernière version de Visual Studio.

  2. Sélectionnez Créer un projet.

    Capture d’écran de Visual Studio avec l’option Créer un projet mise en évidence en rouge pour l’application Blazor.

    La page Créer un projet s’affiche.

  3. Sélectionnez les détails du projet.

    Sélectionnez le type de projet :

    1. Recherchez Microsoft Teams dans la liste déroulante des modèles.

    2. Sélectionnez Application Microsoft Teams comme modèle.

    3. Sélectionnez Suivant.

      Capture d’écran de Créer un projet avec l’option Suivant mise en évidence en rouge pour la création de l’application Blazor.

      La page Configurer votre nouveau projet s’affiche.

  4. Configurez les détails du nouveau projet.

    Sélectionnez la configuration de projet suivante :

    1. Entrez un nom approprié pour votre projet.

      Remarque

      Vous pouvez noter que le nom du projet que vous entrez est automatiquement renseigné comme nom de la solution . Si vous le souhaitez, vous pouvez modifier le nom de la solution sans affecter le nom du projet.

    2. Sélectionnez le chemin du dossier dans lequel vous souhaitez créer l’espace de travail du projet.

    3. Entrez un autre nom de solution, si vous le souhaitez.

    4. Activez l’option permettant d’enregistrer le projet et la solution dans le même dossier, si vous le souhaitez. Pour ce didacticiel, vous n’avez pas besoin de cette option.

    5. Sélectionnez Créer.

      Capture d’écran de Configurer votre nouveau projet avec l’option Créer mise en évidence en rouge.

      La page Créer une application Teams s’affiche .

  5. Sélectionnez la fonctionnalité d’application Teams.

    1. Sélectionnez l’onglet comme fonctionnalité pour votre application.

    2. Sélectionnez Créer.

    Capture d’écran de Créer une application Teams avec les options Tab et Créer mises en évidence en rouge.

    Votre application d’onglet Teams est créée en quelques secondes.

    Capture d’écran de Visual Studio affichant des conseils pour bien démarrer lors de la création de votre application.

    Récapitulatif rapide de la création d’une application d’onglet Teams. Regardez ce bref récapitulatif pour la création d’une application d’onglet Teams.

    La représentation graphique montre le processus de création de l’onglet Teams app1.

Découvrez le code source de l’application d’onglet Teams

Après la création du projet, vous disposez des composants pour créer une application d’onglet de base. Vous pouvez afficher la structure de répertoires du projet dans le volet Explorateur de solutions de Visual Studio.

Capture d’écran de l’Explorateur de solutions affichant les composants permettant de créer une application personnelle de base.

Teams Toolkit crée une structure pour votre projet en fonction des fonctionnalités que vous avez sélectionnées. Entre autres fichiers, Teams Toolkit gère les éléments suivants :

Nom du dossier Sommaire
Icônes d’application Les icônes d’application sont stockées sous forme de fichiers PNG dans color.png et outline.png.
manifest.json Le manifeste d’application pour la publication via le portail des développeurs pour Teams est stocké dans Properties/manifest.json.
BackendController.cs Un contrôleur principal est fourni dans Controllers/BackendController.cs pour faciliter l’authentification.
Pages/Tab.razor Le manifeste d’application pour la publication via le portail des développeurs pour Teams est stocké dans Properties/manifest.json.
TeamsFx.cs et JS/src/index.js Le contenu est utilisé pour initialiser les communications avec l’hôte Teams.

Vous pouvez ajouter des fonctionnalités de back-end en ajoutant d’autres contrôleurs ASP.NET Core à votre application.

Créer et exécuter votre première application d’onglet Teams

Après avoir configuré votre espace de travail de projet avec Teams Toolkit, générez votre projet d’onglet.

Pour générer et exécuter votre application :

  1. Sélectionnez Project>Teams Toolkit>Préparer les dépendances d’application Teams.

    Capture d’écran de Visual Studio avec les options Project, Teams Toolkit et Préparer les dépendances d’application Teams sont mises en surbrillance en rouge.

  2. Sélectionnez votre compte Microsoft 365 ou Ajouter un compte pour vous connecter.

    Capture d’écran du compte Microsoft 365 avec l’option Continuer mise en évidence en rouge.

  3. Sélectionnez Déboguer>Démarrer le débogage ou F5 pour exécuter votre application en mode débogage.

    Découvrez ce qui se passe lorsque vous exécutez votre application localement dans le débogueur.

    Lorsque vous sélectionnez F5, Teams Toolkit :

    1. Inscrit votre application auprès de Microsoft Entra ID.
    2. Inscrit votre application pour le chargement dans Teams.
    3. Démarre votre back-end d’application en cours d’exécution localement.
    4. Démarre votre application frontale hébergée localement.
    5. Démarre Teams dans un navigateur web avec une commande pour indiquer à Teams de charger une application personnalisée (l’URL est inscrite dans le manifeste de l’application).

  4. Installez le certificat SSL auto-signé pour le débogage local, si nécessaire.

    Capture d’écran de l’avertissement de sécurité avec l’option Oui mise en évidence en rouge.

    Teams est chargé dans un navigateur web.

  5. Sélectionnez Ajouter lorsque vous êtes invité à installer l’application dans Teams.

    Capture d’écran du débogage local BlazorApp avec l’option Ajouter mise en évidence en rouge.

    Félicitations, votre première application d’onglet s’exécute dans votre environnement local !

    Capture d’écran montrant que votre première application d’onglet s’exécute dans votre environnement local.

  6. Parcourez la page pour afficher les détails de l’utilisateur.

  7. Sélectionnez Autoriser pour permettre à votre application de récupérer les détails de l’utilisateur à l’aide de Microsoft Graph.

    L’application demande l’autorisation d’accorder l’accès pour afficher les détails de l’utilisateur.

    Capture d’écran montrant l’option Autoriser dans l’onglet personnel de votre application.

  8. Sélectionnez Accepter pour permettre à votre application d’accéder aux détails de l’utilisateur.

    Capture d’écran des autorisations demandées affichant les informations de l’application.

    Votre photo et vos détails s’affichent dans votre onglet Personnel.

    Capture d’écran montrant les informations de base affichées sous l’onglet personnel de votre application dans Teams.

    Vous pouvez effectuer des activités de débogage normales, telles que la définition de points d’arrêt, comme s’il s’agissait d’une autre application web. L’application prend en charge le rechargement à chaud. Si vous modifiez un fichier dans le projet, la page se recharge.

    Découvrez comment résoudre les problèmes si votre application ne s’exécute pas localement.

    Pour exécuter votre application dans Teams, vous avez besoin d’un compte de développement Microsoft 365 qui autorise le chargement d’applications personnalisées. Vous pouvez en savoir plus à ce sujet dans la section Prérequis.

  9. Arrêtez le débogage dans Visual Studio.

Afficher un aperçu de votre première application d’onglet Teams

Vous avez appris à créer, générer et exécuter une application Teams avec la fonctionnalité d’onglet. Les étapes finales suivantes sont le déploiement de votre application sur Azure et la préversion dans Teams en suivant les étapes suivantes :

  1. Provisionner votre application d’onglet dans le cloud : vous pouvez provisionner votre application onglet dans le cloud.

  2. Déployer votre application d’onglet dans le cloud : vous pouvez déployer votre application d’onglet dans le cloud.

  3. Afficher un aperçu de votre application d’onglet dans Teams : vous pouvez afficher un aperçu de votre application d’onglet dans Teams.

    Déployons la première application avec la fonctionnalité d’onglet sur Azure à l’aide du Kit de ressources Teams.

Pour provisionner votre application d’onglet dans le cloud

  1. Sélectionnez Provisionner lekit de ressources> Project > Teamsdans le cloud.

    Capture d’écran de Visual Studio avec les options Project, Teams Toolkit et Provision in the Cloud sont mises en surbrillance en rouge.

  2. Entrez les détails de l’abonnement et du groupe de ressources dans la boîte de dialogue Provisionner :

    1. Sélectionnez le nom de l’abonnement dans la liste déroulante Nom de l’abonnement .
    2. Sélectionnez le groupe de ressources dans la liste déroulante Groupe de ressources ou sélectionnez Nouveau pour ajouter le groupe de ressources généré pour votre application.
    3. Sélectionnez votre région si un groupe de ressources est créé.
    4. Sélectionnez Provisionner.

    Capture d’écran de l’approvisionnement avec Nouveau et Provisionnement mis en évidence en rouge.

    L’avertissement d’approvisionnement s’affiche.

  3. Sélectionnez Provisionner.

    Capture d’écran du Kit de ressources Teams avec provisionnement mis en évidence en rouge.

    Le provisionnement de votre groupe de ressources dans le cloud prend quelques minutes.

  4. Une fois l’approvisionnement terminé, sélectionnez OK.

    Capture d’écran de l’application Teams Toolkit avec l’option OK mise en évidence en rouge.

  5. Sélectionnez Afficher les ressources approvisionnées pour afficher Portail Azure.

    Capture d’écran du Kit de ressources Teams avec Afficher les ressources provisionnées mise en évidence en rouge.

  6. Connectez-vous à votre compte Portail Azure à l’invite de connexion.

    Votre app-dev-rg s’affiche.

    Capture d’écran de Blazorapp-dev-rg affichant les ressources approvisionnées dans le Portail Azure.

    Vos ressources sont approvisionnées dans le Portail Azure !

Pour déployer votre application d’onglet dans le cloud

  1. Sélectionnez Project>Teams Toolkit>Déployer dans le cloud.

    Capture d’écran de Visual Studio avec les options Project, Teams Toolkit et Déployer dans le cloud mises en évidence en rouge.

  2. Sélectionnez OK.

    Capture d’écran de l’application créée avec teams Toolkit avec l’option OK mise en évidence en rouge.

    Votre application d’onglet est correctement déployée dans le cloud !

Pour afficher un aperçu de votre application d’onglet dans Teams

  1. Sélectionnez Project>Teams Toolkit Preview>dans Teams.

    La capture d’écran de Visual Studio avec les options Project, Teams Toolkit et Preview dans Teams est mise en surbrillance en rouge.

  2. Sélectionnez Ajouter lorsque vous êtes invité à installer l’application dans Teams.

    Capture d’écran de Teams affichant l’option Ajouter pour ajouter l’application Blazor. Option Ajouter mise en évidence en rouge.

    Félicitations, votre première application d’onglet s’exécute dans votre environnement Azure !

    Capture d’écran montrant l’onglet personnel de votre application dans Teams.

    Parcourez la page pour afficher les détails de l’utilisateur.

  3. Sélectionnez Autoriser pour permettre à votre application de récupérer les détails de l’utilisateur à l’aide de Microsoft Graph.

    L’application demande l’autorisation d’accorder l’accès pour afficher les détails de l’utilisateur.

    Capture d’écran montrant l’option Autoriser dans l’onglet personnel de votre application dans Teams.

  4. Sélectionnez Accepter pour permettre à votre application d’accéder aux détails de l’utilisateur.

    Capture d’écran des autorisations demandées affichant les informations de l’application.

    Votre photo et vos détails s’affichent dans votre onglet Personnel.

    Capture d’écran de votre application avec l’onglet personnel affichant des informations de base.

Félicitations

Vous avez terminé le tutoriel pour créer une application d’onglet avec Blazor.

Réorganiser les onglets

À compter de la version 1.7 du manifeste, les développeurs peuvent réorganiser tous les onglets de leur application personnelle. Vous pouvez déplacer l’onglet de conversation du bot , qui est toujours à la première position par défaut, n’importe où dans l’en-tête d’onglet de l’application personnelle. Deux mots clés entityId sont déclarés, conversations et à propos de.

Si vous créez un bot avec une étendue personnel, il apparaît par défaut à la première position de l’onglet dans une application personnelle. Si vous souhaitez le déplacer vers une autre position, vous devez ajouter un objet onglet statique à votre manifeste avec le mot clé réservé, conversations. L’onglet conversation s’affiche sur le web et sur le bureau en fonction de l’emplacement où vous ajoutez l’onglet de conversation dans le staticTabs tableau.


{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

Remarque

Dans les appareils mobiles, les onglets sont réorganisés comme défini dans staticTabs.

Cette propriété vous permet également de définir la fonctionnalité d’atterrissage par défaut pour votre application. Vous pouvez configurer l’application pour qu’elle s’ouvre en tant qu’onglet ou bot par défaut. Pour plus d’informations, consultez Configurer la fonctionnalité d’atterrissage par défaut.

Étendre les onglets statiques aux conversations de groupe, aux canaux et aux réunions

Remarque

Pour étendre votre onglet statique à la conversation de groupe, aux canaux et aux réunions, utilisez le manifeste de l’application version 1.16 ou ultérieure.

Vous pouvez étendre les onglets statiques aux conversations de groupe, aux canaux et aux réunions. Au lieu d’épingler du contenu d’application, vous pouvez créer des onglets qui se comportent davantage comme des applications, car vous ne pouvez épingler qu’un seul onglet par application, par exemple, épinglage d’un seul onglet d’application YouTube.

Pour étendre vos onglets statiques à la conversation de groupe, aux canaux et aux réunions, mettez à jour votre manifeste d’application avec les scopes paramètres et context dans la staticTabs propriété . Lorsque vous déclarez plusieurs onglets statiques dans le manifeste et ajoutez l’application dans l’étendue du canal, seul le premier onglet répertorié dans le manifeste s’affiche.

Voici un exemple de manifeste d’application où un onglet statique qui fonctionne dans toutes les étendues et tous les contextes dans Teams est défini :

"staticTabs": [ 
  { 
     "entityId": "homeTab", 
     "scopes": [ 
       "personal", 
       "groupChat", 
       "team"
      ], 
     "context": [ 
       "personalTab",
       "channelTab", 
       "privateChatTab", 
       "meetingChatTab", 
       "meetingDetailsTab", 
       "meetingSidePanel", 
       "meetingStage" 
      ], 
      "name": "Contoso", 
      "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
      "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
  }
],

Si un contexte n’est pas défini dans le manifeste de l’application, par défaut, Teams considère le contexte suivant :

"context": [ 
   "personalTab",
   "channelTab",
   "privateChatTab", 
   "meetingChatTab", 
   "meetingDetailsTab", 
   "meetingStage" 
]

Personnalisation de votre onglet statique dans les conversations ou les réunions

Pour personnaliser votre expérience d’onglet statique dans les conversations, les canaux ou les réunions, vous pouvez utiliser les setConfig API de votre onglet pour mettre à jour les contentUrl et websiteUrl. Voici un exemple :

pages.config.setConfig({ 
  "contentUrl": "https://wwww.contoso.com/teamsapp/thread/" + context.threadId,
   ...}

Seules contentUrl les modifications et websiteUrl sont prises en charge pour setConfig, les autres propriétés ne peuvent pas être modifiées pour les onglets statiques.

Onglets hors connexion

Remarque

Les onglets personnels avec des fonctionnalités hors connexion sont uniquement pris en charge sur Teams sur les appareils Android.

Vous pouvez créer un onglet personnel qui fonctionne dans Teams sans connexion Internet. Un onglet hors connexion est avantageux pour les utilisateurs qui travaillent dans des zones où la couverture réseau est médiocre ou inexistante, comme les agents de terrain ou les employés de première ligne. Les utilisateurs peuvent effectuer les tâches suivantes dans un onglet hors connexion :

  • Enregistrez des données via des formulaires qui peuvent inclure des images et des vidéos.
  • Affichez les détails des demandes, incidents ou formulaires précédemment envoyés.

Lorsque l’appareil de l’utilisateur se reconnecte à Internet, l’onglet synchronise automatiquement les données stockées localement avec un stockage Blob Azure. Cette action garantit que toutes les modifications hors connexion apportées par l’utilisateur sont mises à jour dans un stockage central, ce qui maintient la cohérence des données dans l’organization.

Le graphique montre le fonctionnement d’un onglet hors connexion dans le client mobile Teams.

Créer un onglet hors connexion

Avant de commencer à créer un onglet hors connexion, vérifiez que vous remplissez les conditions préalables pour créer un onglet personnel.

  1. Créez un stockage Blob Azure. Veillez à noter le nom du compte et du conteneur pour une utilisation ultérieure.

  2. Clonez le référentiel d’exemples Microsoft Teams .

  3. Dans le dépôt cloné, accédez à exemples>tab-support-offline>nodejs et ouvrez le dossier dans Visual Studio Code.

    Capture d’écran montrant comment ouvrir l’exemple de code dans Visual Studio Code.

  4. Sous EXPLORATEUR, accédez à server>blobStoreOperations.js et remplacez et {{ container-Name }} par {{ account-Name }} votre compte de stockage Blob Azure et les valeurs du conteneur.

  5. Sélectionnez la touche F5 pour déboguer l’application. Teams s’ouvre dans une fenêtre de navigateur une fois la build terminée.

  6. Connectez-vous avec votre compte Microsoft 365, si vous y êtes invité.

  7. Sélectionnez Ajouter lorsqu’une boîte de dialogue s’ouvre pour vous permettre d’ajouter l’application onglet à Teams.

    Capture d’écran montrant comment ajouter l’application d’onglet hors connexion à Teams.

Félicitations ! Vous avez créé un onglet Teams avec des fonctionnalités hors connexion.

Exemple de code

Exemple de nom Description .NET Node.js Manifeste
Onglet personnel Exemple d’application, qui présente l’onglet personnel personnalisé avec ASP.NET cœur pour la conversation de groupe, les canaux et les réunions. View View View
Onglet personnel hors connexion L’exemple d’application présente une application d’onglet personnel qui fonctionne hors connexion dans Microsoft Teams. N/A View View

Étape suivante

Créer un onglet de canal ou de groupe

Voir aussi