Créez un onglet personnel personnalisé avec ASP.Create a Custom Personal Tab with ASP. NET Core MVCNET Core MVC

Dans ce démarrage rapide, nous allons passer en revue la création d’un onglet personnel personnalisé avec C# et ASP.In this quickstart we'll walk-through creating a custom personal tab with C# and ASP. NET Core MVC.Net Core MVC. Nous allons également utiliser app Studio pour Microsoft teams pour finaliser votre manifeste de l’application et déployer votre onglet sur Teams.We'll also use App Studio for Microsoft Teams to finalize your app manifest and deploy your tab to Teams.

Conditions préalablesPrerequisites

  • Pour terminer ce démarrage rapide, vous aurez besoin d’un client Office 365 et d’une équipe configurée avec l’option autoriser le téléchargement d’applications personnalisées .To complete this quickstart you'll need an Office 365 tenant and a team configured with Allow uploading custom apps enabled. Pour en savoir plus, consultez la rubrique préparer votre client Office 365.To learn more, see Prepare your Office 365 tenant.

    • Si vous ne disposez pas d’un compte Office 365, vous pouvez vous inscrire pour obtenir un abonnement gratuit via le programme de développement office 365.If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. L’abonnement reste actif tant que vous l’utilisez pour le développement continu.The subscription will remain active as long as you're using it for ongoing development.
  • Vous utiliserez App Studio pour importer votre application dans Teams.You'll use App Studio to import your application to Teams. Pour installer App Studio, sélectionnez App Store app dans le coin inférieur gauche de l’application Teams, puis recherchez App Studio.To install App Studio select Apps Store App at the bottom-left corner of the Teams app, and search for App Studio. Une fois que vous avez trouvé la vignette, sélectionnez-la et choisissez installer dans la boîte de dialogue fenêtre contextuelle.Once you find the tile, select it and choose install in the pop-up window dialog box.

De plus, ce projet requiert que les éléments suivants soient installés dans votre environnement de développement :In addition, this project requires that you have the following installed in your development environment:

  • Version actuelle de l’IDE Visual Studio avec la charge de travail de développement multiplateforme .net .The current version the Visual Studio IDE with the .NET CORE cross-platform development workload installed. Si vous ne disposez pas encore de Visual Studio, vous pouvez télécharger et installer la dernière version de la communauté Microsoft Visual Studio gratuitement.If you don't already have Visual Studio, you can download and install the latest Microsoft Visual Studio Community version for free.

  • Outil de proxy inverse ngrok .The ngrok reverse proxy tool. Vous utiliserez ngrok pour créer un tunnel vers les points de terminaison HTTPs HTTPs disponibles localement pour votre serveur Web.You'll use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Vous pouvez le télécharger ici.You can download it here.

Obtenir le code sourceGet the source code

Ouvrez une invite de commandes et créez un nouveau répertoire pour votre projet d’onglet.Open a command prompt and create a new directory for your tab project. Nous avons fourni un projet simple pour vous aider à démarrer.We have provided a simple project to get you started. Pour récupérer le code source, vous pouvez télécharger le dossier zip et extraire les fichiers ou cloner le référentiel de l’exemple dans votre nouveau répertoire :To retrieve the source code you can download the zip folder and extract the files or clone the sample repository into your new directory:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

Une fois que vous avez le code source, ouvrez Visual Studio et sélectionnez ouvrir un projet ou une solution.Once you have the source code, open Visual Studio and select Open a project or solution. Accédez au répertoire de l’application d’onglets et ouvrez PersonalTabMVC. sln.Navigate to the tab application directory and open PersonalTabMVC.sln.

Pour générer et exécuter votre application, appuyez sur F5 ou choisissez Démarrer le débogage dans le menu Déboguer .To build and run your application press F5 or choose Start Debugging from the Debug menu. Dans un navigateur, accédez aux URL ci-dessous pour vérifier que l’application a été correctement chargée :In a browser navigate to the URLs below to verify that the application loaded properly:

  • http://localhost:44335
  • http://localhost:44335/privacy
  • http://localhost:44335/tou

Vérifier le code sourceReview the source code

Startup.csStartup.cs

Ce projet a été créé à partir d’une page ASP.This project was created from an ASP. NET Core 2,2 modèle vide de l’application Web avec la case à cocher Advanced-configure for HTTPS activée lors de l’installation.NET Core 2.2 Web Application empty template with the Advanced - Configure for HTTPS check box selected at setup. Les services MVC sont enregistrés par la méthode de l’infrastructure d’injection de dépendance ConfigureServices() .The MVC services are registered by the dependency injection framework's ConfigureServices() method. En outre, le modèle vide ne permet pas de traiter le contenu statique par défaut, de sorte que l’intergiciel de fichiers statiques est ajouté à la Configure() méthode :Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the Configure() method:

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

dossier Wwwrootwwwroot folder

Dans ASP.In ASP. NET Core, le dossier racine Web est l’emplacement où l’application recherche des fichiers statiques.NET Core, the web root folder is where the application looks for static files.

Dossier AppManifestAppManifest folder

Ce dossier contient les fichiers de package d’application requis suivants :This folder contains the following required app package files:

  • Une icône de couleur complète mesurant 192 x 192 pixels.A full color icon measuring 192 x 192 pixels.
  • Icône de contour transparent mesurant 32 x 32 pixels.A transparent outline icon measuring 32 x 32 pixels.
  • Un fichier manifest.js qui spécifie les attributs de votre application.A manifest.json file that specifies the attributes of your app.

Ces fichiers doivent être Zippés dans un package d’application pour être utilisés dans le téléchargement de votre onglet vers Teams.These files need to be zipped in an app package for use in uploading your tab to Teams. Microsoft teams chargera le contentUrl spécifié dans votre manifeste, l’incorporera dans un IFRAME et le restituera sous votre onglet.Microsoft Teams will load the contentUrl specified in your manifest, embed it in an IFrame, and render it in your tab.

. csproj.csproj

Dans la fenêtre de l’Explorateur de solutions Visual Studio, cliquez avec le bouton droit sur le projet et sélectionnez modifier le fichier de projet.In the Visual Studio Solution Explorer window right-click on the project and select Edit Project File. En bas du fichier, vous verrez le code qui crée et met à jour votre dossier zip lorsque l’application génère les éléments suivants :At the bottom of the file you'll see the code that creates and updates your zip folder when the application builds:

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

CONFORMITEModels

PersonalTab.cs présente un objet message et des méthodes qui seront appelées à partir de PersonalTabController lorsqu’un utilisateur sélectionne un bouton dans la vue PersonalTab .PersonalTab.cs presents a Message object and methods that will be called from PersonalTabController when a user selects a button in the PersonalTab View.

AffichagesViews

FamilleHome

Technologie.ASP. NET Core traite les fichiers appelés index comme page d’accueil par défaut du site.NET Core treats files called Index as the default/home page for the site. Lorsque l’URL de votre navigateur pointe vers la racine du site, index. cshtml s’affichera comme page d’accueil de votre application.When your browser URL points to the root of the site, Index.cshtml will be displayed as the home page for your application.

SharedShared

Le balisage de vue partielle _Layout. cshtml contient la structure de page globale et les éléments visuels partagés de l’application.The partial view markup _Layout.cshtml contains the application's overall page structure and shared visual elements. Elle fait également référence à la bibliothèque Teams.It will also reference the Teams Library.

Contrã’leursControllers

Les contrôleurs utilisent la propriété ViewBag pour transférer dynamiquement les valeurs dans les vues.The controllers use the ViewBag property to transfer values dynamically to the Views.

Mettre à jour votre applicationUpdate your application

_Layout. cshtml_Layout.cshtml

Pour que votre onglet s’affiche dans Teams, vous devez inclure le Kit de développement logiciel (SDK) JavaScript client Microsoft teams et inclure un appel à microsoftTeams.initialize() après le chargement de votre page.For your tab to display in Teams, you must include the Microsoft Teams JavaScript client SDK and include a call to microsoftTeams.initialize() after your page loads. Voici comment votre onglet et l’application teams communiquent :This is how your tab and the Teams app communicate:

  • Naviguez jusqu’au dossier partagé , ouvrez _Layout. cshtmlet ajoutez ce qui suit à <head> la section des balises :Navigate to the Shared folder, open _Layout.cshtml, and add the following to the <head> tags section:
`<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>`
`<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>`

PersonalTab. cshtmlPersonalTab.cshtml

Ouvrez PersonalTab. cshtml et mettez à jour <script> les balises microsoftTeams.initialize()incorporées en appelant.Open PersonalTab.cshtml and update the embedded <script> tags by calling microsoftTeams.initialize().

Veillez à enregistrer votre mise à jour de PersonalTab. cshtml.Make sure to save your updated PersonalTab.cshtml.

Établir un tunnel sécurisé vers votre ongletEstablish a secure tunnel to your tab

Microsoft teams est un produit entièrement basé sur le Cloud et nécessite que le contenu de votre onglet soit disponible dans le nuage à l’aide de points de terminaison HTTPs.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams n’autorise pas l’hébergement local.Teams doesn't allow local hosting. Vous devrez publier votre onglet sur une URL publique ou utiliser un proxy qui exposera votre port local à une URL accessible sur Internet.You'll need to either publish your tab to a public URL, or use a proxy that will expose your local port to an internet-facing URL.

Pour tester votre onglet, vous utiliserez ngrok.To test your tab you'll use ngrok. Les points de terminaison Web de votre serveur seront disponibles pendant l’exécution d’ngrok sur votre ordinateur local.Your server's web endpoints will be available while ngrok is running on your local machine. Si vous fermez ngrok, les URL seront différentes lors du prochain démarrage.If you close ngrok, the URLs will be different the next time you start it.

  • Ouvrez une invite de commandes à la racine du répertoire de votre projet et exécutez la commande suivante :Open a command prompt in the root of your project directory and run the following command:
ngrok http https://localhost:44345 -host-header="localhost:44345"
  • Ngrok écoutera les demandes en provenance d’Internet et les acheminera vers votre application lorsqu’elle s’exécutera sur le port 44325.Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44325. Il doit ressembler https://y8rPrT2b.ngrok.io/ à l’emplacement où y8rPrT2b est remplacé par votre URL HTTPS alphanumériques ngrok.It should resemble https://y8rPrT2b.ngrok.io/ where y8rPrT2b is replaced by your ngrok alpha-numeric HTTPS URL.

  • Veillez à conserver l’invite de commandes avec ngrok en cours d’exécution et à prendre note de l’URL, vous en aurez besoin plus tard.Be sure to keep the command prompt with ngrok running, and to make a note of the URL — you'll need it later.

  • Vérifiez que ngrok est en cours d’exécution et qu’il fonctionne correctement en ouvrant votre navigateur et en accédant à votre page de contenu via l’URL HTTPS ngrok qui a été fournie dans votre fenêtre d’invite de commandes.Verify that ngrok is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.

[![! Conseil] vous devez avoir à la fois votre application dans Visual Studio et ngrok en cours d’exécution pour effectuer ce démarrage rapide.TIP] You need to have both your application in Visual Studio and ngrok running to complete this quickstart. Si vous devez arrêter l’exécution de votre application dans Visual Studio pour qu’elle fonctionne, maintenez ngrok en cours d’exécution.If you need to stop running your application in Visual Studio to work on it, keep ngrok running. Il continuera à écouter et reprendra le routage de la demande de votre application lorsqu’elle redémarrera dans Visual Studio.It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. Si vous devez redémarrer le service ngrok, il renverra une nouvelle URL et vous devrez mettre à jour chaque emplacement qui utilise cette URL.If you have to restart the ngrok service it will return a new URL and you'll have to update every place that uses that URL.

Exécuter votre applicationRun your application

  • Dans Visual Studio, appuyez sur F5 ou sélectionnez Démarrer le débogage dans le menu débogage de votre application.In Visual Studio press F5 or choose Start Debugging from your application's Debug menu.

Télécharger votre onglet vers teams avec App StudioUpload your tab to Teams with App Studio

Notes

Nous utilisons App Studio pour modifier votre fichier Manifest. JSON et télécharger le package terminé vers Teams.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Vous pouvez également modifier manuellement le fichier manifest. JSON si vous le souhaitez.You can also manually edit manifest.json if you prefer. Si vous le faites, veillez à créer à nouveau la solution pour créer le fichier . zip de tabulation à télécharger.If you do, be sure to build the solution again to create the Tab.zip file to upload.

  • Ouvrez le client Microsoft Teams.Open the Microsoft Teams client. Si vous utilisez la version basée sur le Web , vous pouvez inspecter votre code frontal à l’aide des outils de développementde votre navigateur.If you use the web based version you can inspect your front-end code using your browser's developer tools.

  • Ouvrez l’application Studio et sélectionnez l’onglet éditeur de manifeste .Open App studio and select the Manifest editor tab.

  • Sélectionnez la vignette Importer une application existante dans l’éditeur de manifeste pour commencer à mettre à jour le package d’application pour votre onglet. Le code source est fourni avec son propre manifeste partiellement complet.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. Le nom de votre package d’application est Tab. zip.The name of your app package is tab.zip. Il doit se trouver ici :It should be found here:

/bin/Debug/netcoreapp2.2/Tab.zip
  • Téléchargez Tab. zip dans App Studio.Upload Tab.zip to App Studio.

Mettre à jour votre package d’application avec l’éditeur de manifesteUpdate your app package with Manifest editor

Une fois que vous avez téléchargé votre package d’application dans App Studio, vous devez terminer de le configurer.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • Sélectionnez la mosaïque de votre onglet nouvellement importé dans le volet droit de la page d’accueil de l’éditeur de manifeste.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

Il y a une liste d’étapes dans le côté gauche de l’éditeur de manifeste, et à droite, une liste de propriétés qui doivent avoir des valeurs pour chacune de ces étapes.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. La plupart des informations ont été fournies par votre fichier manifest. JSON , mais il existe quelques champs que vous devrez mettre à jour :Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Détails : détails de l’applicationDetails: App details

Dans la section Détails de l' application :In the App details section:

  • Sous identification , sélectionnez générer pour générer un nouvel ID d’application pour votre application.Under Identification select Generate to generate a new App Id for your app.

  • Sous informations sur le développeur , mettez à jour l' URL du site Web avec votre URL HTTPS ngrok .Under Developer information update the Website URL with your ngrok HTTPS URL.

  • Sous URL de l’application **** https://<yourngrokurl>/privacy , mettez à jour la déclaration de confidentialité et les conditions d’utilisation pour https://<yourngrokurl>/tou>.Under App URLs update the Privacy statement to https://<yourngrokurl>/privacy and Terms of use to https://<yourngrokurl>/tou>.

Fonctionnalités : ongletsCapabilities: Tabs

Dans la section onglets :In the Tabs section:

  • Sous Ajouter un onglet personnel , sélectionnez Ajouter.Under Add a personal tab select Add. Une fenêtre de boîte de dialogue contextuelle s’affiche.You will be presented with a pop-up dialogue window.

  • Renseignez le champ nom .Complete the Name field.

  • Renseignez le champ ID de l' entité .Complete the Entity Id field.

  • Mettez à jour le champ URL du https://<yourngrokurl>/personalTabcontenu avec la valeur à.Update the Content URL field with to https://<yourngrokurl>/personalTab.

  • Laissez le champ URL du site Web vide.Leave the Website URL field blank.

  • Cliquez sur Enregistrer.Select Save.

Terminer : domaines et autorisationsFinish: Domains and permissions

Dans la section domaines et autorisations , les domaines de votre champ d’onglets doivent contenir votre URL ngrok sans le préfixe <yourngrokurl>.ngrok.io/HTTPS-.In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Terminer : tester et distribuerFinish: Test and distribute

Important

Dans le champ Description à droite, vous verrez l’avertissement suivant :In the Description field on the right you'll see the following warning:

le tableau « validDomains » ne peut pas contenir de site de tunneling...⚠ "The 'validDomains' array cannot contain a tunneling site..."

Cet avertissement peut être ignoré lors du test de votre onglet.This warning can be ignored while testing your tab.

Dans la section test et distribution :In the Test and distribute section:

  • Sélectionnez Installer.Select Install.

  • Dans la fenêtre contextuelle, assurez-vous que l’option Ajouter pour vous est définie sur Oui et Ajouter à une équipe ou une conversation est définie sur non.In the pop-up window make sure that Add for you is set to Yes and Add to a team or chat is set to No.

  • Sélectionnez Installer.Select Install.

  • Dans la fenêtre contextuelle suivante, sélectionnez ouvrir et votre onglet est affiché.In the next pop-up window select Open and your tab will be displayed.

Affichage de votre onglet personnelView your personal tab

  • Dans la barre de navigation située à l’extrême gauche de l’application Teams, sélectionnez ... le menu.In the navigation bar located at the far-left of the Teams App, select the ... menu. Une liste d’applications personnelles s’affiche.You'll be presented with a list of personal apps.

  • Sélectionnez votre onglet dans la liste à afficher.Select your tab from the list to view.