Créer un onglet configurable

Créer un onglet configurable avec Node.js

1. À l’invite de commandes, installez les packages Yeoman et gulp-cli en entrant la commande suivante après avoir installé le 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
   

Générer votre application avec un onglet configurable

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

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 :

   

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, tapez la commande suivante :

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.

   

3. Pour afficher la page de configuration de votre onglet, accédez à http://localhost:3007/<yourDefaultAppNameTab>/config.html.

   

Établir un tunnel sécurisé vers votre onglet

Pour établir un tunnel sécurisé vers votre onglet, quittez l’hôte local et entrez la commande suivante :

gulp ngrok-serve

Charger votre application dans Teams

1. Accédez à Teams et sélectionnez Applications .

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 du package d’application, puis choisissez Ouvrir.

   

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

   Si Ajouter ne s’affiche pas dans la boîte de dialogue, supprimez le code suivant du manifeste du dossier zip du package d’application chargé. Compressez à nouveau le dossier et chargez-le dans Teams.

   "staticTabs": [],
   "bots": [],
   "connectors": [],
   "composeExtensions": [],
   

5. Suivez les instructions pour ajouter un onglet. Il existe une boîte de dialogue de configuration personnalisée pour votre onglet configurable.

6. Sélectionnez Enregistrer et votre onglet est ajouté à la barre d’onglets du canal.

   

   Votre onglet configurable est correctement créé et ajouté dans Teams.

Créer un onglet configurable personnalisé 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
   

Générer votre application avec un onglet configurable

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

2. Accédez à Modèles de Microsoft Teams> modèles>tab-channel-group>dossier razor-csharp et ouvrez channelGroupTab.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 :

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

<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>

É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

Veillez à conserver l’invite de commandes avec ngrok en cours d’exécution et notez l’URL.

Mettre à jour votre application

1. Ouvrez Visual Studio Explorateur de solutions, accédez au dossier Pages>Partagés, ouvrez _Layout.cshtml, puis ajoutez ce qui suit à la section balises :

   <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.2.0/js/MicrosoftTeams.min.js" 
     integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
     crossorigin="anonymous" >
   </script>
   

   Importante

   Ne copiez pas et ne collez pas les URL <script src="..."> de cette page, car elles ne représentent pas la dernière version. Pour obtenir la dernière version de TeamsJS, accédez toujours à l’API JavaScript Microsoft Teams.

2. Insérez un appel à microsoftTeams.app.initialize(); dans la balise script.

3. Dans Visual Studio Explorateur de solutions, accédez au dossier Pages et ouvrez Tab.cshtml

   Dans Tab.cshtml, l’application présente à l’utilisateur deux options pour afficher l’onglet avec une icône rouge ou grise. Le bouton Sélectionner gris ou Sélectionner rouge déclenche saveGray() ou saveRed() , respectivement, définit pages.config.setValidityState(true)et active Enregistrer sur la page de configuration. Ce code indique à Teams que la configuration requise est terminée et que vous pouvez poursuivre l’installation. Les paramètres de pages.config.setConfig sont définis. Enfin, saveEvent.notifySuccess() est appelé pour indiquer que l’URL de contenu est correctement résolue.

4. Mettez à jour les valeurs websiteUrl et contentUrl dans chaque fonction avec l’URL ngrok HTTPS sous votre onglet.

   Votre code doit maintenant inclure ce qui suit avec y8rCgT2b remplacé par votre URL ngrok :

   
       let saveGray = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                   entityId: "grayIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl: ""
               });
               saveEvent.notifySuccess();
           });
       }
   
       let saveRed = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                   entityId: "redIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl: ""
               });
               saveEvent.notifySuccess();
           });
       }
   

5. Enregistrez le Tab.cshtml mis à jour.

Générer et exécuter votre application

1. Dans Visual Studio, sélectionnez F5 ou choisissez Démarrer le débogage dans le menu Déboguer.

2. Vérifiez que ngrok s’exécute et fonctionne correctement en ouvrant votre navigateur et en accédant à votre page de contenu via l’URL HTTPS ngrok fournie dans la fenêtre d’invite de commandes.

   Conseil

   Votre application doit être en cours d’exécution dans Visual Studio et ngrok pour effectuer les étapes fournies dans cet article. Si vous devez arrêter l’exécution de votre application dans Visual Studio pour travailler dessus, conserver ngrok en cours d’exécution. Il écoute et reprend le routage de la demande de votre application lorsqu’elle redémarre dans Visual Studio. Si vous devez redémarrer le service ngrok, il retourne une nouvelle URL et vous devez mettre à jour votre application avec la nouvelle URL.

Mettre à jour votre package d’application avec Developer Portal

1. Accédez à Teams. Si vous utilisez la version web, vous pouvez inspecter votre code frontal à l’aide des outils de développement de votre navigateur.

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

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

4. 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
   

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

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

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

8. 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.

9. Dans les URL d’application, mettez à jour la Stratégie de confidentialité vers https://<yourngrokurl>/privacy et Conditions d’utilisation vers https://<yourngrokurl>/tou, puis enregistrez.

10. Dans Fonctionnalités de l’application, sélectionnez Grouper et canaliser l’application. Mettez à jour l’URL de configuration avec https://<yourngrokurl>/tab, puis sélectionnez l’Étendue de votre onglet.

11. Sélectionnez Enregistrer.

12. 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 à l’équipe pour configurer l’onglet dans une équipe. Configurez votre onglet et sélectionnez Enregistrer. Votre onglet est désormais disponible dans Teams.

   

   Votre onglet configurable est correctement créé et ajouté dans Teams.

Créer un onglet configurable personnalisé 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
   

Générer votre application avec un onglet configurable

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

2. Accédez au dossier Modèles Microsoft Teams>Modèles>tab-channel-group>mvc-csharp, puis ouvrez ChannelGroupTabMVC.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 :

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

<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>

É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

Veillez à conserver l’invite de commandes avec ngrok en cours d’exécution et notez l’URL.

Mettre à jour votre application

1. Ouvrez Visual Studio Explorateur de solutions, accédez au dossier Views>Shared et ouvrez _Layout.cshtml, puis ajoutez ce qui suit à la section balises :

   <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.2.0/js/MicrosoftTeams.min.js" 
     integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
     crossorigin="anonymous" >
   </script>
   

   Importante

   Ne copiez pas et ne collez pas les URL <script src="..."> de cette page, car elles ne représentent pas la dernière version. Pour obtenir la dernière version du Kit de développement logiciel (SDK), accédez toujours à l'API JavaScript microsoft Teams.

2. Insérez un appel à microsoftTeams.app.initialize(); dans la balise script.

3. Dans Visual Studio Explorateur de solutions, accédez au dossier Tab et ouvrez Tab.cshtml.

   Dans Tab.cshtml, l’application présente à l’utilisateur deux options pour afficher l’onglet avec une icône rouge ou grise. Le bouton Sélectionner gris ou Sélectionner rouge déclenche saveGray() ou saveRed() , respectivement, définit pages.config.setValidityState(true)et active Enregistrer sur la page de configuration. Ce code indique à Teams que la configuration requise est terminée et que vous pouvez poursuivre l’installation. Les paramètres de pages.config.setConfig sont définis. Enfin, saveEvent.notifySuccess() est appelé pour indiquer que l’URL de contenu a été résolue.

4. Mettez à jour les valeurs websiteUrl et contentUrl dans chaque fonction avec l’URL ngrok HTTPS sous votre onglet.

   Votre code doit maintenant inclure ce qui suit avec y8rCgT2b remplacé par votre URL ngrok :

   
       let saveGray = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                   entityId: "grayIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl:""
               });
               saveEvent.notifySuccess();
           });
       }
   
       let saveRed = () => {
           microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
               microsoftTeams.pages.config.setConfig({
                   websiteUrl: `https://y8rCgT2b.ngrok.io`,
                   contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                   entityId: "redIconTab",
                   suggestedDisplayName: "MyNewTab",
                   removeUrl:""
               });
               saveEvent.notifySuccess();
           });
       }
   

5. Veillez à enregistrer la Tab.cshtml.

Générer et exécuter votre application

1. Dans Visual Studio, sélectionnez F5 ou choisissez Démarrer le débogage dans le menu Déboguer.

2. Vérifiez que ngrok s’exécute et fonctionne correctement en ouvrant votre navigateur et en accédant à votre page de contenu via l’URL HTTPS ngrok fournie dans la fenêtre d’invite de commandes.

   Conseil

   Votre application doit être en cours d’exécution dans Visual Studio et ngrok pour effectuer les étapes fournies dans cet article. Si vous devez arrêter l’exécution de votre application dans Visual Studio pour travailler dessus, conserver ngrok en cours d’exécution. Il écoute et reprend le routage de la demande de votre application lorsqu’elle redémarre dans Visual Studio. Si vous devez redémarrer le service ngrok, il retourne une nouvelle URL et vous devez mettre à jour votre application avec la nouvelle URL.

Mettre à jour votre package d’application avec Developer Portal

1. Accédez à Teams. Si vous utilisez la version web, vous pouvez inspecter votre code frontal à l’aide des outils de développement de votre navigateur.

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

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

4. 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
   

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

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

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

8. 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.

9. Dans les URL d’application, mettez à jour la Stratégie de confidentialité vers https://<yourngrokurl>/privacy et Conditions d’utilisation vers https://<yourngrokurl>/tou, puis enregistrez.

10. Dans Fonctionnalités de l’application, sélectionnez Grouper et canaliser l’application. Mettez à jour l’URL de configuration avec https://<yourngrokurl>/tab, puis sélectionnez l’Étendue de votre onglet.

11. Sélectionnez Enregistrer.

12. 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 à l’équipe pour configurer l’onglet dans une équipe. Configurez votre onglet et sélectionnez Enregistrer. Votre onglet est désormais disponible dans Teams.

   

   Votre onglet configurable est correctement créé et ajouté 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.

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

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).

npm install -g @microsoft/teamsfx-cli

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

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 disposez-vous de 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é.

   

   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.

   

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 vous avez configuré 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.

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.

   

   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.

      

      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.

      

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

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

   Sélectionnez la fonctionnalité de l’application :

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

   2. Sélectionnez Créer.

   

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

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.

   

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

   

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 l’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.

   

   Teams est chargé dans un navigateur web.

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

   

   Félicitations, 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.

   

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

   

   Votre photo et vos détails s’affichent sous l’onglet de votre canal.

   

   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 est rechargée.

   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 de déployer votre application sur Azure et la préversion dans Teams :

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.

   

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.

   

   L’avertissement d’approvisionnement s’affiche.

3. Sélectionnez Provisionner.

   

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

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

   

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

   

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

   Votre app-dev-rg s’affiche.

   

   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.

   

2. Sélectionnez OK.

   

   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.

   

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

   

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

   

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

   

4. 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.

   

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

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

   

Félicitations

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